Günümüzde interneti artık ağırlıklı olarak mobil cihazlardan; cep telefonları ve tabletlerimizden kullanıyoruz. Hal böyle olunca da birçok popüler internet servisi ve masaüstü yazılımın, mobil cihazlarla uyumlu versiyonlarına şiddetle ihtiyaç duyuyoruz. Peki, kendi web siteleriniz ya da gerçekleştirmeyi hayal ettiğiniz yazılım fikirleriniz için ilk adımı mobil dünyada atmayı düşündünüz mü hiç? İşte bu yazımızda sizlere birkaç saatinizi ayırarak nasıl mobil uygulamalar geliştireceğinizden bahsedeceğiz.
Emektar HTML’den Mobil Fatihi HTML5’e
İnternetle ilk tanıştığımız yıllarda en büyük yardımcımız olan ve son yıllarda pek de yüzüne bakmadığımız HTML etiketleri ve Javascript kodları, şimdilerde evrimleşerek CSS’i de içine alan HTML5 sürümüyle yeniden karşımıza geliyor. Bu yeni nesil HTML, tarayıcılarda çalışan yepyeni web tabanlı servisler hazırlayabilmemizi ve hatta bu çalışmaları mobil cihazlar için “native” yani kurulabilen uygulamalara dönüştürebilmemizi sağlıyor.
{pagebreak::2}
Config.xml + index.html = Mobil Uygulama!
HTML5 kullanarak bir mobil uygulama hazırlayabilmek için öncelikle bir uygulama fikrine sonrasında da HTML5 tabanlı bir uygulamanın mimari yapısı hakkında bilgi sahibi olmak gerekiyor. Bu aşamada uygulama fikrini bulmayı size bırakarak işin teknik kısmından devam ediyoruz.
Öncelikle uygulamanızı index.html olarak hazırlamanız gerekiyor. Bu dosyanın içerisinde kullanacağınız Javascript ya da HTML kodları bulunmalı, dışarıdan çağırdığınız hemen her bağlantı adresi de uygulamanın ikinci bölümü olan config.xml dosyası içerisinde refere edilmelidir. Bu şekilde en yalın mobil uygulamamız oluşturulmuş ve derlenmeye hazır hale getirilmiş oluyor. Şimdi buna bir örnek verelim
“Hello World” Uygulaması
Adettendir, bir uygulama geliştirileceği ya da yeni bir dil anlatılacağı zaman hep “Hello World” ya da “Merhaba Dünya” ibaresi kullanılır. Bu geleneği bozmayarak mobil sistemler için bir “Hello World” uygulaması hazırlayacağız. İşe index.html ile başlayalım.
Bir metin editörü açıp, içerisine aşağıdaki kodu yapıştıralım.
<html>
<head>
<meta name="viewport" content="height=device-height,width=device-width,user-scalable=no"/>
</head>
<body>
<h1>Hello World!</h1>
</body> </html>
Ardından bunu index.html olarak kaydedelim. Bu dosyayı bir tarayıcı ile açtığınızda ekranda büyükçe ve bold harflerle “Hello World!” mesajını göreceksiniz. Bu durum telefonunuz için de geçerli.
{pagebreak::3}
Config.xml Dosyasını Oluşturalım
Şimdi ikinci bölüm olan config.xml dosyasını oluşturmaya başlayalım. Bu dosya mobil uygulamalar için hayati önem taşıyor. Bu dosya olmadan derleme işlemini gerçekleştiremeyiz. Ayrıca bu dosya içerisinde yer almayan linkleri de index.html içerisinde olsalar dahi çalıştıramayız / görüntüleyemeyiz.
Yine bir metin editörü açıp, içerisine aşağıdaki kodu yapıştıralım.
<?xml version="1.0" encoding="UTF-8" ?>
<widget xmlns = "http://www.w3.org/ns/widgets"
xmlns:gap = "http://phonegap.com/ns/1.0"
id = "com.helloworld.helloworld"
version = "1.0.0">
<name>Hello World! Mobil Uygulaması</name>
<description>
Cep telefonları için Hello World uygulaması.
</description>
<author href="http://www.darondedeoglu.com" email="daron@darondedeoglu.com">Daron Dedeoğlu</author>
<icon src="images/icon.png" />
<icon src="images/bbicon.jpg" gap:platform="blackberry" />
<gap:splash src="images/splash.png" />
<access origin="*" />
<preference name="disable-cursor" value="true" />
</widget>
Ardından bu dosyayı da Farklı Kaydet seçeneğiyle config.xml olarak kaydedelim. Şimdi uygulamamız derlenmeye hazır hale geldi. Bu iki dosyayı seçili hale getirip, ZIP dosyası olarak sıkıştırmamız gerekiyor.
Şimdi hazırladığımız bu ZIP dosyasını, PhoneGap ile dilediğimiz mobil platform için derleyebiliriz. Bu aşamada build.phonegap.com adresinde bir hesap açarak (ücretli ve ücretsiz seçeneklerden birisini seçebilirsiniz) uygulamanızı derleyebilirsiniz.
:: HTML5 programlamaya ilginiz var mı?
Windows phone 8 de Flash Player niye yok diyorlar. HTML 5 var onu kullan dimi.
Çok sağolun teşekkürler. Sayenizde HTML5 i çok iyi öğrendim birazdan facebooku tasarlamaya baslıyorum
MERHABA
Kısa ve öz bir rehber olmuş teşekkürler. İkinci üçüncü… mesajlarınızda daha güzel paylaşımlar görmek dileğiyle.
Allahını severseniz şu siteye mobil düzgün bi uygulama yapın iOS’taki rezalet geri tuşu bile yok
ibm in geliştirdiği maqetta var birde ona göz atın isterseniz. web tarayıcı üstünde kendi localhostunda çalışıyor.
http://maqetta.org/
ayrıca tizen eclipse üzerine kurulu sdksını yayınladı. onda da html5 kod geliştirebiliyorsuz.
önerebileceğiniz eğitim varsa memnun olurum.
şaka mı bu? nasıl bir konu başlığı nasil bir içerik ve nasıl bir anlatım. bu kadar kolay mı html5 kodu oluşturup onu stabil yapmak?
Yav html 5le uygulama gelistirsek nolucak oyuncak gibi ayfoncuklarin minik ekranlarinda ne gorucek millet de biz ugrasalim. Yeter artik o minil ekranlarda birakin anca mesajlassinlar baska birsey gerekmez onlara androidin mukemmel buyuk ekranli tellerinde zaten flash destegi var ayfoncuklar da yoksa bu onlarin secimi
OOO mobil site yapmayı shiftdelete sayesinde öğrendik birazdan instagram tasarlamaya başlıcam bakarsın sonra facebook ardındanda dayanamaz oyun tasarlarım
derlemenin içerisine neden mail adresi yerleştirdiniz? daron@darondedeoglu.com, bu mail adresine farklı bilgiler mi gidecek?
Emege saygi …tesekkurker anlatim icin
Hello World yazdırmış işte daha ne olsun. Adam size tutorial başlatıyorum dememiş ki, cins misiniz nesiniz ?
bu uygulama tam olarak ne işe yarıyo
phonegap’a attığım zaman malformed config.xml hatası veriyor nedeni ne olabilir??
ben nerdenn indircem
Yorum yazanlara baksan, yazilim dili bilmezler, buraya gelir sacma yorum yazarlar…
Yahu ne salak yorumlar yapıyorsunuz utanmasaniz füze yapımını sorcaksnz.adam ilk aşamayı göstermiş geriye kalan biraz html çalışmak biraz da javascript vb şeyler. Baktın zamanla iyi gidiyor java ya da baslarsn unity de kasarsn.siz neyi bu kadar çabuk elde ettiniz ki bi de yazıLima bu kadar acele ediyosunuz
malformed config.xml hatası alıyoruz bişi vereceksen doğru düzgün ver veya hiç verme