Cordova – PhoneGap, Visual Studio – HTML5/JS ile Mobil Uygulama Geliştirme

Cordova ile A’dan Z’ye Microsoft Visual Studio temelli Mobil Uygulama nasıl geliştirebiliriz, bu makalemizde bu etraflıca ele almaya çalışacağım.

Kullanacağımız Yazılım ve Araçlar

1. En az 4 GB RAM ve İ5 özellikli Bilgisayar: Masaüstü veya Dizüstü olabilir. Intercore i7 – 4 GB RAM, 1 TB HDD olan bir bilgisayarda gayet iyi performans sağlayabilirsiniz.
2. İşletim Sistemi: Linux, Windows veya Mac kullanabilirsiniz. Ancak Windows 10 İşletim sistemini kesinlikle tavsiye ediyorum. Çünkü Visual Studio Community, en iyi performansı Windows 10 işletim sisteminde göstermektedir.
3. Microsoft Visual Studio Community: Microsfot’un sitesinden indirebilirsiniz. 2017 veya daha son sürümleri kullanmaya özen gösterin. Fakat 2015 sürümle de gayet güzel uygulama hazırlamanız mümkündür. https://visualstudio.microsoft.com sitesinden indirebilirsiniz. z.
4. Kod Yazım Editörü: HTML, CSS, JS vb. yazılım dillerini yazabileceğimiz bir kod editörüne ihtiyacımız var. Aslında Visual Studio Community ile bunu yapabilirsiniz. Aynı firmanın, aynı yazılımına tabi ama daha pratik ve işlevsel, basit kod editörü bulunuyor; “Visual Studio Code“. Editör olarak ben bunu, “Metin Belgesini” ve “Notepad++” yazılım editörünü kullanıyorum. Size de bunları tavsiye ederim. Ücretsiz ve oldukça işlevseller.
5. Çalışmaları görüntülemek için web tarayıcısı: Yazıp kodladığımız mobil uygulamayı canlı ek bir uygulama olmadan bilgisayarda görüntülememiz mümkün. Bunun için Opera, Chrome, Fire Fox, Edge vb. bir tarayıcı kullanmamız yeterli. Zaten tarayıcısı olmayan bilgisayar mı var canım. 🙂 Ben Opera ve Chrome kullanıyorum.
6. Adobe ID veya Github Hesabı: Tüm çalışmalarımızı tamamladıktan sonra .zip formatında verileri kullanarak .apk formatlı mobil uygulamaya çevirmemiz, bu formata uyarlamamız gerekiyor ki, mobil cihazlarda çalışsın. İşte bunun için de PhoneGap uygulamasından faydalanacağız. “Build.PhoneGap.com” site adresi üzerinden Adobe ID alıp, hesap oluşturmanız gerekiyor.
7. QR Kodu okuyucusu bulunan mobil cihaz: Geliştirip tamamladığımız mobil uygulamayı mobil cihazlarda test etmemiz gerekecektir. Bunun için QR kod okuyucusu bulunan bir Android, IOS veya Windows Phone işletim sistemi yüklü bir akıllı telefona ihtiyacımız var. Samsung, Nokia, LG, Casper, Asus vb. fark etmeksizin tüm akıllı telefon modelleri işinizi görecektir. Ayrıca bunu Tablet ile de yapabilirsiniz.

Kullanacağımız Arayüz ve Yazılım Dilleri

1. HTML5 (Hypertext Markup Language),
2. CSS3 (Hypertext Markup Language),
3. JS (Javascript),
4. Apache Cordova Framework
5. Node.Js

Mobil Uygulama Nasıl Hazırlanır?

Şimdi gelelim bir mobil uygulamanın geliştirilmesine, hazırlanmasına. Biz bu makalemizde Apache Cordova – PhoneGap teknolojisini kullanarak tüm platformlarda native App gibi çalışabilen mobil uygulamayı anlatacağız. Öncelikle iyi düzeyde HTML5, CSS3 ve JS bilmeniz gerekmektedir. Aksi durumda hem uygulama geliştirirken zorlanacak, hem de özgün bir şeyler ortaya çıkarmanız zor olacaktır.

Bilmeniz Gerekenler

Mobil Uygulama geliştirmeye başlamadan önce öğrenmeniz gereken bazı konular bulunuyor. Bunları bilmeniz, mobil uygulama geliştirmenizde o denli size kolaylık ve yaratıcılık sağlayacaktır.

1. Mobil Uygulama Terimleri: Native, Webview, Hybrid, IOS, Android vb.
2. Yazılım Dilleri: HTML5, CSS3, JS, Apache Cordova, Bootstrap, Jquery, Ajax vb.
3. Web sayfası oluşturma mantığı: index.html, main.js, stil.css vb.
4. Mobil uygulamaların çalışma mantığı
5. Kod Editörleri: Notepad++, Metin Belgesi, Visual Studio Code
6. Gerekli Yazılım/Programlar: Visual Studio Community, PhoneGap

Yukarıda listelediğim konulara hakimiyetiniz mobil uygulama geliştirmenize ek katkı sağlayacaktır. Ek olarak azami ölçüde bilmeniz, mobil uygulama geliştirirken çok fazla zorlanmanıza neden olur.

Apache Cordova – PhoneGap & Visual Studio ile Mobil Uygulama Geliştirme

Bizim bu makalede tamamen odaklandığımız mobil uygulama geliştirme safhası ve yöntemi Visual Studio Community programı ve PhoneGap uygulaması ile uygulama geliştirme yönündedir.

Temel bilindik Webview uygulamalardan çok daha farklı ve işlevel native özelliğinde mobil uygulama yapmanızı sağlar. Zaten artık o kadar çok platform ve araç var ki, onlarla çok kolay biçimde Webview uygulama yapabilirsiniz. Webview uygulama için bu denli fazla emek ve kodlama gerektiren işlemlere yönelmenize gerek yok. “AppGeyser” isimli platformda kendi mobil uygulamanızı ücretsiz yapabilirsiniz. Ancak unutmayın! Sadece Android platformlarda ve Webview mantığında çalışmaktadır. (Tabi zamanla gelişip, Native ve Hybrid özellikte uygulama da yapılabilir.)

APACHE CORDOVA – PHONEGAP & VİSUAL STUDİO İLE HANGİ PLATFORMLARA UYGULAMA GELİŞTİREBİLİRİZ?

• Amazon FireOS
• Android
• Blackberry
• FirefoxOS
• iOS
• Ubuntu OS
• Windows Phone 8 ve üzeri
• Windows 8.0 ve üzeri
• Tizen

Yukarıda listelediğimiz tüm platformlar için uygulama geliştirmek mümkündür. Biz, bu makalemizde Android, IOS ve Windows Phone için yalnızca konuyu ele alacağız.

Uygulama Geliştirebileceğimiz IDE’ler

• WebStorm
• Dreamweaver
• Eclipse
• Xcode
• NetBeans
• SublimeText
• Visual Studio (Benim Tavsiyem)
• Atom vb.

Desteklenen API’ler

• Batarya Durumu
• Kamera
• Konsol
• Rehber
• Sürücü
• Compass
• Mesajlar
• Dosya Sistemi
• Dosya transferi
• GPS Konum
• InAPPBrowser – Tarayıcı
• Medya

Apache Cordova Teknolojisi ve Bu Yöntemle Uygulama Geliştirmenin Artıları – Eksileri

Peki Cordova-PhoneGap teknolojisini kullanarak Visual Studio Community üzerinden mobil uygulama geliştirmenin ne gibi avantajları ve dezavantajları bulunuyor?

1. Native ve işlevsel bir mobil uygulamayı kısa sürede geliştirmemize olanak tanır.
2. Maliyeti az olup, yüksek bütçe ayırmanıza gerek yoktur. Fakat henüz Native UI desteği bulunmadığından deneyim ve görünüm konusunda daha iyi performans elde edebilmek için ek çaba gerekmektedir. (Bunu eksi bir yön olarak görebilirsiniz. Ama benim için nötr, yani ne eksi ne de artı bir yöndür.)
3. Tek bir kod yapısıyla onlarca, hatta yüzlerce mobil uygulama geliştirebilirsiniz.
4. Kaynak maliyeti yok denecek kadar azdır.
5. Native uygulama gibi birçok işlevselliği ve özelliği bünyesinde barındırır. Fakat yine de C++, Java, C# vb. dillerde Native olarak geliştirilen uygulamalar kadar ileri düzey performans sağlamaz. Yani güçlü bir performans gerektiren Android oyun yapmanızı tavsiye etmem. Böyle bir girişime bu yöntemle girmeniz doğru olmaz. Onun için Native odaklı uygulama geliştirmeyi araştırmalısınız. Java dilinden faydalanmanızda yarar var.
6. Tek işlev, çaba, çalışma ve kaynakla çoklu ortamlarda çalışabilen uygulama yapmak mümkündür. Güncelleme ve bakım işlemleri Native uygulamalara göre daha basit, kolay ve rahattır.
7. En eksi yönü ise PhoneGap ve IBM Worklight gibi platformların kullanılması gerekmektedir ve bu da zaman içerisinde maliyetlerin armasını sağlayabilir.

Uyarı Niteliğinde Bazı Bilgiler

Şayet yüksek RAM ve işlemci gerektiren bir oyun yapmayı düşünüyorsanız bu yöntem ve Apache Cordova size uygun bir seçenek değildir.

Kullanıcılarınıza iyi bir deneyim ve performans sunamayacaksa Cordova ile mobil uygulama geliştirmenizin bir anlamı yok. Ayrıca buna harcayacağınız çabayı, daha iyi performans alacağınız yöntemlere harcamalısınız.

Benim tavsiyem, web geliştirici bakış açısıyla mobil uygulama geliştirmeyin. Bu kapsamda işlevsiz, performansı düşük mobil uygulama geliştirecekseniz, hiç geliştirmeyin. Onun yerine Responsive site tasarlayın. İlla bir uygulamam olsun, istiyorsanız Webview uygulama tasarlamanız işinizi görecektir.

Hangi Durumda Cordova Önemle Tavsiye Edilir?

Kesinlikle Apache Cordova – PhoneGap kullanmalısınız, Visual Studio Community ile mobil uygulamanızı geliştirmelisiniz, diyebileceğim bazı konular var. Bunlara sizin fikirleriniz de uyuyorsa kesinlikle Cordova ile işe başlayın derim.

1. Aciliyet durumu varsa, Cross Platform olarak pazara açılmak istiyorsanız kesinlikle bu yöntemi tercih etmelisiniz.
2. Şayet iyi düzeyde mobil teknoloji ve yazılım dillerine hakim değilseniz Cordova, gerçekten iyi bir çözüm olacaktır.
3. Uygulama marketine temel düzeyde uygulama yüklemeniz gerekiyorsa, site veya projelerinize, firmanıza ait bir uygulama olmasını istiyorsanız Cordova’yı tavsiye ederim.
4. İyi düzeyde Javascript biliyor ve onun gücüne inanıyorsanız elbetteki Cordova-PhoneGap derim.
5. Düşük bütçeniz varsa veya ilk etapta yüksek sermaye koyamayacaksanız kuşkusuz en iyi yöntem Visual Studio Community ile Cordova uygulama olacaktır.

Dizin Yapısı

Gelelim geliştireceğimiz mobil uygulamanın dizin yapısına. Uygulamamız bazı temel klasör ve kod belgelerinden oluşmaktadır.

1. Klasör “WWW“: Mobil uygulama projemizin .html, .css ve .js uzantılı dosyalarının bulunduğu klasördür.
2. “Platforms” Klasörü: Uygulamamızın işlev göstereceği işlem sistemlerine/platformlara ait native öğelerin yer aldığı klasördür.
3. “Plungins” Klasörü: Uygulamamıza eklediğimiz bütün eklentiler bu klasör içerisinde yer alır. Ekli olan .Json dosyaları da bu klasör içerisinde bulunmaktadır.
4. “Merges” Klasörü: Uygulamamız birden fazla platformda çalışır vaziyette olacak, işlev gösterecekse önem arz eden klasör Merges klasörüdür.
5. “Config.xml” Dosyası ve “hooks” Klasörümüz: Uygulamamızın bütün tanımlayıcı verileri Config.xml dosyasında yer alır. Tüm işlemlerin, kodlamanın tamamlanmasının ardından mutlaka bu dosya düzenlenmeli, uygulama verilerine göre güncellenmelidir.

Örnek Apache Cordova Odaklı Config.xml Dosya Kodları

< ?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.ornek.ornek" version   = "1.0.0" >
< name >Örnek Hemen Tasarım Uygulama adı < / name >
< description >
Örnek hemen tasarım mobil uygulama tanımı ve açıklaması.
< / description >
< author href= " https://www.hementasarim.com " email = " adiniz@alanadiniz.com " >
Geliştirici veya uygulama yetkilisi adı-bilgisi
< / author >
< icon src= " images/icon.png" / >
< icon src= " images/bbicon.jpg " gap:platform="blackberry"  / >
< gap:splash src="images/splash.png" / >
< access origin="*" / >
< preference value = "true" / >
< / widget >

Önemli Araçlarımızı Tanıyalım

En önemli 2 aracımız bulunuyor; Visual Studio Community ve PhoneGap. Bunları tanıyalım.

PhoneGap

“https://build.phonegap.com” URL uzantılı web adresi üzerinden hizmet veren çevrim için APK dönüştürücü ve uyarlayıcı platformdur. Ayrıca Adobe ürünlerinden olup, kullanım için Adobe ID veya Github hesabınızın olması gerekir.

Öncesi Dipnot: PhoneGap ile APK işlemine başlamadan önce Visual Studio ile uygulamamız hazırlanmış ve .zip formatında arşivlenmiş olması gerekir. Akabinde “Upload Code” butonu ile .zip dosyamızı sisteme yükleyeceğiz. Yükleme sonrası otomatik uygulamamız .apk uzantısıyla hazır hale gelecektir. QR kodu ile telefona indirip, test edebilirsiniz. Google Play ve Apple Store gibi mağazalara yüklemek için birkaç ayar yapmamız ve prosedürü tamamlamamız gerekiyor.

NOT: *** Bu işlem, yalnızca Cordova haliyle hazırladığımız uygulamanın son aşamasıdır. Doğrudan bu platform ile mobil uygulama hazırlayamayız. PhoneGap, bir uygulama geliştirme veya yayınlama platformu değil, daha çok APK oluşturma platformudur.

Visual Studio Community

Visual Studio, Microsoft tarafından geliştirilmiş son dönemlerin en kapsamlı ve işlevsel kod editörü, uygulama ve yazılım geliştirme ortamıyla sizi tanıştırmak istiyorum. Birden fazla modül ve eklenti ekleyebiliyoruz. Ayrıca bu eklentilerle çok daha eğlenceli kodlama yapabilmekteyiz.

A’dan Z’ye Visual Studio’da Apache Cordova Teknolojisi İle Mobil Uygulama Geliştirme

Temel olarak temel kaide ve konulara değindik. Şimdi A’dan Z’ye adım adım nasıl mobil uygulama yapacağımıza bakalım. Şimdiden sorularınız, takıldığınız noktalar olursa yorumlarda belirtmekten çekinmeyin.

İlk Aşama: Visual Studio Community ile Cordova Proje Paketi Oluşturma

Evvela Microsoft tarafından geliştirilen Visual Studio Cummunity yazılımını indirip, bilgisayarımıza kuralım. “https://visualstudio.microsoft.com” URL bağlantılı web site adresinden yazılımı indirebilirsiniz.

# Visual Studio Community menü kısmında “dosya > yeni > proje: Yeni proje oluşturma” yolunu izleyelim.

# Proje listesinden de ““Javascript > Mobil Apps > JS Boş Uygulama (Apache Cordova)” yolunu izleyelim. (C# dilinde Xamarin ile de mobil uygulama yapabilirsiniz. Ancak bunlar için ilgili paketleri kurmanız gerekiyor. Eğer C# ile mobil uygulama yapmayı düşünüyorsanız “Xamarin ile mobil uygulama nasıl yapılır?“, konusunu araştırmanızı tavsiye ederim.)

# Paket oluşumunda veriler ve birçok yapı taşı otomatik oluşturulmaktadır. Oluşturduğumuz projeyi açıp düzenleyebilmek için “Dosya > Aç > Proje/Çözüm” yolunu izleyelim.

# Uygulama Test Etme: “Debug – Android > Test Et” yolunu izlyerek uygulama taslak projemizi test edelim. Bu yolla uygulamamızı web ortamında görünüm ve işlevsel olarak test edebiliriz.

# Bilgisayardan proje dosyalarına ulaşma: “Bilgisayarım > C Diski > Kullanıcılar > (Ana kullanıcı) > source > repos” yolunu izleyelim. Bu yolla ulaştığınız klasörü daha kolay ulaşabileceğiniz masaüstü gibi alana kopyalayıp yapıştırabilir veya taşıyabilirsiniz.

# Sonra index.html, main.css, main.js gibi dosyaları kodlayıp, tamamladıktan sonra “www” isimli klasör içerisine ekleyeceğiz. Visual Studio Code veya benzer kod editör ile bu sayfaları düzenleyebilir, ek dosya ve sayfalar oluşturabiliriz. Visual Studio Community üzerinden düzenleyebileceğiniz gibi, manuel (elle) de dosya ve klasörde düzenlemeler yapabilmekteyiz.

İkinci Aşama: Config.xml Düzenleme

Uygulama paketlerimizi hazırladıktan sonra mutlaka Config.xml dosyamızı düzenlememiz gerekiyor. Aksi durumda uygulama adı, iconu ve açıklama bölümleri varsayılan olarak “Cordova” şeklinde kalır. Eminim böyle bir şeyi profesyonellik babınde pek istemezsiniz.

1. Projemizi oluşturduğumuz klasöre gelin.
2. Klasörde bulunan “config.xml” isimli dosyayı bulun. Bu dosyayı Visual Studio Community yazılımı ile açalım. Ben Visual Studio Community ile projeyi hazırladıktan sonra html, css, js ve config.xm gibi dosyaları düzenlemek için visual studio code yazılımını kullanıyorum. Bazende çok derin düzenleme yapmayacaksam Notepad++ ile açıp, düzenliyorum. Siz elbette bunun dışında farklı editörler kullanabilirsiniz. Hatta metin editöründe bile yazabilir, bu dosyaları dünleyebirsiniz.

Hemen Tasarım adına düzenlediğimiz örnek bir “config.xml” dosyasına bakalım;

<name> Kısmı: Mobil uygulamanın adı
	<name>Hemen Tasarım Mobil Uygulaması</name>
<description> Kısmı: Uygulamanın tanımı
	<description>Hementasarim.com örnek mobil cordova uygulamasıdır.</description>
<author href= Kısmı: Uygulamanın Web Sitesi, Eposta adresi ve Geliştirici adı
<author href="https://www.hementasarim.com" email="destek@hementasarim.com">Geliştirici</author>
<engine name= Kısmı: Platform sürüm bilgisi
<engine name="android" spec="4.9.1" />
  <engine name="ios" spec="4.1.5" />
  <engine name="windows" spec="4.6.3" />

Bu dosyada uygulama isim ve açıklamaları, simgelerin isim ve uzantıları yer alıyor. Özgürce düzenleyebiliriz. Fakat ben genelde simge (icon) isimlerini düzenlemiyorum. Onun yerine aynı isimde olan simge ve görselleri düzenleyip, klasörde aynı isimle kaydediyorum. Daha pratik geliyor. Bir sürü görsel yığılmasından kaçınıyorum. Düzenlemeyi bitirdikten sonra mutlaka dosyamızı kaydetmeliyiz. CTRL + S ile kaydedebiliriz.

Not: Bu arada temel html dosyamızın adı “index.html” olmak zorunda. Bu hata ile karşılaşmamak adına önemli. Diğer CSS ve Js dosya isimlerini yazmakta özgürüz. İstediğimiz isimlendirmeleri yapabiliriz. Ben genelde “main.js“, “main.css” ve “stil.css” şeklinde adlandırma koyuyorum. Daha akılda kalıcı ve pratik geliyor bana.

Bu arada özelden gelen bazı sorular arasında SWF uzantılı dosya ekleyebilir miyiz? diye soranlar var. Ekleyebilirsiniz. Güzel bir temellendirme, hoş bir tasarım ve Javascript ile iyi entegrasyon yaptığınız sürece bir sorun teşkil etmeyecektir.

Üçüncü Adım: Simge ve Görsellerin Değiştirilmesi

Şimdi gelelim logo, simge ve temel görselleri değiştirmeye. Sistemin temel paketinde Cordova’nın logoso varsayılan olarak bulunuyor. Bunları klasör içerisinde güncellememiz gerekli. Eğer Config.xml alanında tek tek her birini değiştirmek istemiyor, bunla uğraşmak istemiyorsanız, siz de benim yaptığım gibi yapabilirsiniz. Klasör içindeki görselleri aynı isimle kaydedin. Bu sayede görseller değişir ama siz tekrar dosyalarda ve Config.xml dosyasında düzenleme yapmak zorunda kalmazsınız. Pratik değil mi?

Logo, simge (icon) ve açılış ekran görsellerini Photoshop gibi profesyonel yazılımlarla düzenleyebilir veya oluşturabilirsiniz.

“res” isimli klasörde bulunan “icons” isimli klasör platformlara uygun tüm simgelerin yer aldığı görsel klasörüdür. Örnek: “android: res > icons > android”.

Yine aynı şekil ve mantıkla “screens” isimli klasörde yer lan görselleri de kendimize göre düzenleyip, uyarlamalıyız. Yine aynı isimle kaydetmeniz zamandan tasarruf ettirecektir.

Dördüncü Adım: Index.html Dosyasının Hazırlanması

Uygulamamızın bütün arayüz ve işlev dosyaları “WWW” isimli klasör içerisinde yer alır, almalıdır da. index.htm, style.css, script.js gibi bütün dosyaları bu klasör içerisine kaydedeceğiz. Yeni eklediklerimiz de yine burada olmak zorunda. Ayrıca kullanacağınız görseller için de bir görsel klasörü oluşturmanız gerekiyor. Bu görseller, uygulamamızın içerisinde kullanacağımız jpg, png ve gif uzantılı görsel formatlarından oluşacak.

Bu arada görsellerin boyutları olabildiğince düşük olsun. Yükleme hızını etkileyecektir. Hem de uygulamanın boyutunu gereksiz artırmasını önlemiş oluruz. Fakat olabildiğine düşük olsun diye görsellerin kalitesini çok etkilemesin. Görsellerimiz uygulama kalitesine uygun statüde olmalı.

Olay aslında çok basit. Temel bir ana dizin dosyamız bulunacak; index.html. Tüm tasarım, renklendirme ve arayüz görselleri CSS uzantılı dosyamızda yer alacak. Uygulamanın işlev, ek fonksiyonları ise JS uzantılı dosyamızda bulunacak. Birden fazla CSS ve JS uzantlı dosya oluşturabilirsiniz. Ancak ne kadar az ve tek dosyadan veri çekersek o kadar hızlı ve performansı iyi olur uygulamamızın.

Index.html Dosyasını Oluşturma

Visual Studio yazılımımızda “WWW” klasörümüzün içerisinde olacak şekilde “index” isimli HTML dosyası oluşturuyoruz. Dosyamızın temel kodlaması aşağıdaki gibi olacak;

<!DOCTYPE html>
<html>
<head>
    <title>Uygulama Adı</title>
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <script src="main.js" type="text/javascript"></script>
    <link rel="stylesheet" href="main.css">
</head >

<body>


</body>
</html>

CSS, HTML ve JS kodlama bilgimize, hayal gücümüze göre kodlamalarımızı yaparız. Ben, Javascript’in en yalın halini kullanmanızı, diğer kütüphaneleri en aza indirmenizi tavsiye ediyorum.

Tek bir Index.html dosyası içerisinde de CSS, JS kodlarını yazabilirsiniz. Ama bu performansı olumsuz etkileyecektir. O yüzden her birine ayrı dosya açıp, çağırmak daha mantıklıdır.

Tüm kodlama vb. işlerimizi hallettik ve hem tarayıcı, hem de android arayüzden testlerimizi yaptık. Tümü başarılı oldu. Şimdi yapmamız gereken şey tüm proje klasörlerini tek seferde .zip formatında sıkıştırmaktır. Rar veya Tar.gz gibi farklı sıkıştırmaları kullanmamanızı öneriyorum. Çünkü PhoneGap sadece .zip uzantılı dosyaları kabul ediyor.

Önemli Not: Proje klasörünü değil, proje klasörünün içerisinde bulunan klasör ve dosyaları sıkıştırmamız gerekiyor. Buna dikkat edin. Yoksa uygulamanızın APK dönüşüm ve çalıştırılması başarısız olur.

Son Adım: PhoneGap İle APK’ya Dönüştürme

Visual Studio Community ile oluşturduğumuz ve Zip olarak sıkıştırdığımız uygulama projemizi şimdi APK olarak mobil uygulamaya dönüştürme sırası geldi. Çünkü mobil uygulamların smart – akıllı cihazlarda çalışması için APK yapısında olması gerekiyor. Cordova teknolojisini kullanarak HTML, CSS ve JS ile hazırladığımız mobil uygulamayı, mobil cihazlarda kullanabilir hale getirmek için de PhoneGap teknolojisinden faydalanacağız.

Daha önceden de verdiğim üzere “https://build.phonegap.com” adresine giriyoruz. “Upload Code” isimli düğmeyi tıklayarak .zip uzantılı proje dosyamızı seçip yüklüyoruz. Yükleme tamamlandığında Config.xml dosyamızı ve diğer verileri okuyup, otomatik uygulamamız APK olarak derlenecektir. Sonra QR Kod yardımıyla uygulamamızı SmartPhone (Akıllı Cihaz)’a indiriyoruz. Normal mobil uygulama kurulum sürecini tamamlıyor ve uygulamayı açıyoruz.

Hayırlı uğurlu olsun. Mobil uygulamanız artık APK formatında ve Native özellikte hazır hale gelmiştir. Doğrudan Google Play ve Apple Store gibi mağazalara eklemek için gereken Key’leri de PhoneGap platformu üzerinden alabilirsiniz.

Soru ve Cevaplar

Şimdi çok sorulan muhtemel sorulara cevap verelim.

Soru 1: Sıfırdan bir mobil uygulamayı PhoneGap ile yapabilir miyim?

Cevap 1: Sıfırdan sadece PhoneGap ile uygulama yapamazsınız. Öncesinde bir HTML sayfanızın olması gerekir. Bu sayfayı APK yapabilirsiniz. Ancak simge, işlevsellik ve performans vb. konularda pek kullanışlı bir şey olmaz. Kim böyle işlevsiz bir uygulamayı kullanır ki?

Soru 2: Hiç bir kod bilgim yok. Ben bu yöntemle mobil uygulama geliştirebilir miyim?

Cevap 2: Evvela bilmemek bir sorun değil. İlla ki öğrenebilirsin. Ancak hiç bir kodlama bilgisi olmadan da mobil uygulama yapman ve bu işi öğrenmen elbetteki mümkün. AppGeyser, Mobiller vb. birçok platform yardımıyla birkaç adımda mobil uygulama yapabilirsin. Hiç bir kod bilgisine ihtiyacın yok. Bu uygulamaları Goolge Play, Apple Store gibi onlarca mağazaya da ekleyebilir, satabilir ve hatta reklam alabilirsin. Fakat bu platformların büyük kısmı, hatta hepsi bile diyebilirim ki ücret talep ediyor. Bazı servislerin kullanım veya yayınlama ücreti o kadar yüksek ki, kendin öğrenip uygulama yazsan daha mantıklı.

Soru 3: Sen mobil uygulama yapıyor musun?

Cevap 3: Elbetteki Hemen Tasarım bünyesinde mobil uygulama hizmetimiz var. Yukarıda bahsettiğim mantık ve özelliklerle sana güzel bir mobil uygulama yapabilirim. AppGeyser gibi platformlarda senin için mobil uygulama geliştirebilirim. Web siten, blog sayfan için Webview veya Hybrid özellikli mobil uygulamalar da hazırlayabilirim. Bunun için şu an mobil uygulama paketi hazırlıyoruz. Yakında mağazamızda yayınlayacağız. Bu paket kapsamında sen de kendi mobil uygulamana sahip olabilirsin. Severek senin için işlevsel bir uygulama yapacağımızdan emin olabilirsin. Ayrıca mobil uygulama paketimiz kapsmında sana ek hizmetler de sunacağız. Detaylar için bizimle iletişime geçebilirsin.

Dipnot

HTML, CSS ve JS tabanlı mobil uygulama geliştirmek istiyorsan bir kütüphane kullanmamız gerekir. Biz, bu makalede Apache Cordova’yı ve PhoneGap’i anlattık ve kullandık. Siz başka Frameworkler de kullanabilirsiniz. Ayrıca Titanium, IBM, Corona, Enyo, Ionic ve Lungo gibi Framworkler de var.

Kaynaklar

“Cordova – PhoneGap ile Mobil Uygulama Geliştirme“, Bizim Köşe, Erişim Tarihi: 29.03.2021.

---

Ayrıca “HTML5/CSS3 ve JS ile Mobil Uygulama Geliştirme” isimli makalemize de göz atabilirsiniz.