HTML5 ile Mobile Merhaba Deyin

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ı?