Apache Cordova Eğitimi: Cordova ile Mobil Uygulama Geliştirme

Mobil uygulamalar, akıllı telefonlar ve tabletlerden başlayarak akıllı saatlere kadar her yere sızıyor ve yakında diğer giyilebilir cihazlarda da bulunacak. Bununla birlikte, özellikle kaynaklarınız sınırlıysa veya bir mobil uygulama geliştirme şirketi yerine tek bir geliştiriciyseniz, her bir ayrı mobil platform için geliştirme yapmak kapsamlı bir görev olabilir.

Burası, standart web teknolojilerini (HTML5, CSS3 ve JavaScript) kullanarak mobil uygulamalar geliştirmenin bir yolunu sağlayarak, deneyimli bir Apache Cordova geliştiricisi olmanın kullanışlı olabileceği yerdir.

2009'da Nitobi adlı bir girişim, geliştiricilerin standart web teknolojilerini kullanarak mobil uygulamalar oluşturmasını sağlamak amacıyla yerel mobil kaynaklara erişim için açık kaynaklı bir API olan PhoneGap'i yarattı. Nitobi'nin vizyonunda, çoğu mobil uygulama yakında PhoneGap kullanılarak geliştirilecekti, ancak geliştiriciler, performans sorunları veya belirli bir donanıma erişme yönteminin olmaması nedeniyle gerektiğinde yerel kod yazma seçeneğine hala sahip olacaklardı.

Cordova PhoneGap?

Öyle bir şey yok gerçekten. Olan şuydu, Adobe 2011'de Nitobi'yi satın aldı ve açık kaynak çekirdeğini Apache Cordova'yı yeniden markalaştıran Apache Software Foundation'a bağışladı. Sıklıkla karşılaşacağınız yaygın bir benzetme, WebKit'in Chrome veya Safari için ne olduğunu Cordova'nın PhoneGap için odur.

Açıkçası, Cordova ve PhoneGap arasındaki farklar başlangıçta çok azdı. Zamanla, Adobe PhoneGap kendi tescilli özelliklerini geliştirirken, Cordova açık kaynak topluluğu tarafından desteklendi ve hala destekleniyor. Bu Apache Cordova incelemesi ve öğreticisi, Cordova uygulama geliştirmesini daha ayrıntılı olarak inceleyecek ve bir kısmı PhoneGap için geçerli olsa da, bu başlı başına bir PhoneGap öğreticisi olarak kabul edilmemelidir.

Apache Cordova Yetenekleri

Özünde, Cordova'nın yerel olarak geliştirilen uygulamalarla ilgili herhangi bir sınırlaması yoktur. Cordova ile elde ettiğiniz şey, yerel kod için bir sarmalayıcı görevi gören ve cihazlar arasında tutarlı olan bir JavaScript API'sidir. Cordova'yı, cihazın tüm ekranını kaplayan web görünümüne sahip bir uygulama kapsayıcısı olarak düşünebilirsiniz. Cordova tarafından kullanılan web görünümü, yerel işletim sistemi tarafından kullanılan web görünümüyle aynıdır. iOS'ta bu, varsayılan Objective-C UIWebView veya özel bir WKWebView sınıfıdır; Android'de bu, android.webkit.WebView .

Apache Cordova, cihazın kamerasına, GPS'ine, dosya sistemine vb. erişim sağlayan bir dizi önceden geliştirilmiş eklenti ile birlikte gelir. Mobil cihazlar geliştikçe, ek donanım için destek eklemek sadece yeni eklentiler geliştirme meselesidir.

Son olarak, Cordova uygulamaları tıpkı yerel uygulamalar gibi yüklenir. Bu, kodunuzu iOS için oluşturmanın bir IPA dosyası, Android için bir APK dosyası ve Windows Phone için oluşturmanın bir XAP dosyası oluşturacağı anlamına gelir. Geliştirme sürecine yeterince çaba harcarsanız, kullanıcılarınız yerel bir uygulama kullanmadıklarını bile anlamayabilir.

Apache Cordova Geliştirme İş Akışları

Cordova ile geliştirme yaparken izleyebileceğiniz iki temel yol vardır:

• Bir uygulamayı, platforma özel geliştirme çok az veya hiç olmadan mümkün olduğunca çok platforma dağıtmak istediğinizde, platformlar arası iş akışını kullanmalısınız. Bu iş akışını destekleyen ana araç, uygulamanızı farklı platformlar için yapılandırmak ve oluşturmak için daha yüksek düzeyde bir soyutlama işlevi gören Cordova Komut Satırı Arabirimidir (CLI). Bu, daha yaygın olarak kullanılan geliştirme yoludur.
• Uygulamanızı belirli bir platform göz önünde bulundurarak geliştirmeyi planlıyorsanız, platform merkezli iş akışını kullanmalısınız. Bu şekilde, yerel bileşenleri Cordova bileşenleriyle karıştırarak kodunuzu daha düşük bir düzeyde ince ayar yapabilir ve değiştirebilirsiniz. Bu yaklaşımı platformlar arası geliştirme için kullanabilseniz bile, süreç daha uzun ve daha sıkıcı olacaktır.

Platform merkezli geliştirmeye geçiş oldukça basit olduğundan, genellikle platformlar arası geliştirme iş akışıyla başlamanız önerilir. Ancak, başlangıçta platform merkezli iş akışıyla başlarsanız, oluşturma sürecini çalıştırdığınızda CLI özelleştirmelerinizin üzerine yazacağından platformlar arası geliştirmeye geçiş yapamazsınız.

Ön Koşullar ve Cordova Kurulumu

Cordova ile ilgili herhangi bir şeyi yüklemeden ve çalıştırmadan önce, uygulamanızı oluşturmayı düşündüğünüz her platform için SDK'yı yüklemeniz gerekir. Bu yazımızda Android platformuna odaklanacağız; ancak, diğer platformları içeren süreç benzerdir.

Burada bulunan Android SDK'yı indirmelisiniz. Windows için SDK bir yükleyici olarak gelirken, Linux ve OSX için basitçe çıkarılabilen bir arşiv olarak gelir. Paketi çıkardıktan/yükledikten sonra, PATH değişkeninize sdk/tools ve sdk/platform-tools dizinlerini eklemeniz gerekecektir. PATH değişkeni, Cordova tarafından inşa süreci için ihtiyaç duyduğu ikili dosyaları aramak için kullanılır. Java yüklü değilse, Ant ile birlikte JDK'yı yüklemeniz gerekir. ANT_HOME ve JAVA_HOME , JDK ve Ant'ın bin klasörlerine ayarlanmalıdır ve Android SDK'yı yükledikten sonra ANDROID_HOME değişkenini Android/Sdk olarak ayarlayın. Üç *_HOME değişkenindeki tüm konumlar da PATH değişkeninizde olmalıdır.

SDK'yı kurduktan sonra android komutu komut satırınızda kullanılabilir hale gelecektir. SDK yöneticisini açmak ve en son araçları ve Android API'sini yüklemek için yürütün. Büyük olasılıkla Android SDK Araçlarına, Android SDK Platform araçlarına, Android SDK Oluşturma araçlarına, SDK Platformuna, Google API'leri Intel x86 Atom Sistemi Görüntüsüne, Android SDK Kaynaklarına ve Intel x86 Emulator Accelerator'a (HAXM yükleyici) ihtiyacınız olacaktır . Bundan sonra android avd ile bir emülatör oluşturabileceksiniz.

Cordova CLI, Node.js'ye ve Git istemcisine bağlıdır, bu nedenle devam edin ve Node'u nodejs.org'dan ve Git'i git-scm.com'dan indirip yükleyin. Cordova CLI'nin kendisini kurmak ve ek eklentiler kurmak için npm kullanacaksınız ve Cordova gerekli bağımlılıkları indirmek için sahne arkasında git'i kullanacak. Son olarak, koş

 npm install -g cordova

…Cordova CLI'yi global olarak kurmak için ( npm install cordova tek başına yeterli değildir.)

Özetlemek gerekirse, ihtiyacınız olacak paketler şunlardır:

• Java
• Karınca
• Android SDK'sı
• DüğümJS
• Git

Ve bu ortam değişkenlerinin güncellenmesi gerekecek:

• PATH
• JAVA_HOME
• ANT_HOME
• ANDROID_HOME

Bir Uygulamanın Önyüklenmesi

Cordova'yı başarıyla yüklediyseniz, artık Cordova komut satırı yardımcı programına erişiminiz olmalıdır. Terminalinizi veya komut satırınızı açın ve ilk Cordova projenizi oluşturmak istediğiniz dizine gidin. Bir uygulamayı önyüklemek için aşağıdaki komutu yazın:

 cordova create toptal toptal.hello HelloToptal

Komut satırı, cordova komutunun adından ve ardından create alt komutunun adından oluşur. Alt komut üç ek parametreyle çağrılır: Uygulamanın yerleştirileceği klasör, uygulamanın ad alanı ve görünen adı. Bu, uygulamayı aşağıdaki yapıya sahip bir klasörde önyükler:

 toptal/ |-- hooks/ |-- platforms/ |-- plugins/ |-- www/ `-- config.xml

www klasörü, uygulamanızın çekirdeğini içerir. Burası tüm platformlar için ortak olan uygulama kodunuzu yerleştireceğiniz yerdir.

Cordova, farklı platformlar için kolayca bir uygulama geliştirmenize izin verirken, bazen özelleştirmeler eklemeniz gerekir. Birden çok platform için geliştirme yaparken, çeşitli platforms/[platform-name][assets]/www dizinlerindeki kaynak dosyaları değiştirmek istemezsiniz, çünkü düzenli olarak üst düzey www dosyalarının üzerine yazılırlar.

Bu noktada ayrıca config.xml dosyasını açabilir ve uygulamanızın yazar ve açıklama gibi meta verilerini değiştirebilirsiniz.

Aşağıdakileri kullanarak ilk platformunuzu ekleyin:

 cordova platform add android

Daha sonra fikrinizi değiştirirseniz, bir platformu oluşturma sürecinden kolayca kaldırabilirsiniz:

 cordova platform rm android

Platformlar dizinini inceledikten sonra, içindeki android klasörünü göreceksiniz. Eklediğiniz her platform için Cordova, platformlarda yeni bir dizin oluşturacak ve içindeki www klasörünü çoğaltacaktır. Örneğin, uygulamanızı Android için özelleştirmek istiyorsanız, platforms/android/assets/www içindeki dosyaları değiştirebilir ve platforma özel kabuk araçlarına geçebilirsiniz.

Ancak, uygulamanızı CLI (platformlar arası geliştirme için kullanılır) ile yeniden oluşturursanız, Cordova'nın her platform için yaptığınız değişikliklerin üzerine yazacağını unutmayın; bu nedenle, bunların sürüm kontrolü altında olduğundan emin olun veya platforma özel yapın platformlar arası geliştirmeyi bitirdikten sonra değişir. Daha önce de belirttiğimiz gibi, çapraz platformdan platforma özel geliştirmeye geçmek kolaydır. Diğer yönde hareket etmek değildir.

Platformlar arası iş akışını kullanmaya devam etmek ve yine de platforma özel özelleştirmeler yapmak istiyorsanız, üst düzey birleştirme klasörünü kullanmalısınız. Cordova sürüm 3.5'ten itibaren, bu klasör varsayılan uygulama şablonundan kaldırılmıştır, ancak ihtiyacınız olursa, diğer üst düzey dizinlerin ( hooks , platforms , plugins ve www ) yanında oluşturabilirsiniz.

Platforma özel özelleştirmeler merges/[platform-name] içine yerleştirilir ve üst düzey www klasöründeki kaynak dosyalardan sonra uygulanır. Bu şekilde, belirli platformlar için yeni kaynak dosyaları ekleyebilir veya üst düzey kaynak dosyalarının tamamını platforma özel olanlarla geçersiz kılabilirsiniz. Örneğin aşağıdaki yapıyı alın:

 merges/ |-- wp8/ | `-- app.js |-- android/ | `-- android.js |-- www/ `-- app.js

Bu durumda, Android için çıktı dosyası hem app.js hem de android.js dosyalarını içerecektir, ancak Windows Phone 8 için çıktı dosyası yalnızca merges merges/wp8 klasöründe bulunan app.js dosyasını içerecektir. merges/[platform] içindeki dosyalar www içindeki dosyaları geçersiz kılar.

Eklentiler dizini, her platformun eklentileri için bilgi içerir. Bu noktada, yalnızca aşağıdaki yapıya sahip olması gereken android.json dosyasına sahip olmalısınız:

 { "prepare_queue": { "installed": [], "uninstalled": [] }, "config_munge": { "files": {} }, "installed_plugins": {}, "dependent_plugins": {} }

Uygulamayı oluşturalım ve bir Android cihaza dağıtalım. Dilerseniz emülatörü de kullanabilirsiniz.

Cordova, uygulamalarınızı oluşturmak ve çalıştırmak için birkaç CLI adımı sağlar: cordova prepare , cordova compile , cordova build (önceki ikisi için bir kısayoldur), cordova emulate ve cordova run (bu, build içerir ve öykünücüyü de çalıştırabilir). Bu sizi şaşırtmamalıdır, çünkü çoğu durumda uygulamanızı öykünücüde oluşturmak ve çalıştırmak istersiniz:

 cordova run --emulator

İsterseniz, cihazınızı USB bağlantı noktası üzerinden takabilir, USB hata ayıklama modunu etkinleştirebilir ve ilk Apache Cordova uygulamanızı doğrudan aşağıdakileri çalıştırarak doğrudan cihazınıza kurabilirsiniz:

 cordova run

Bu, tüm dosyalarınızı platforms/* kopyalayacak ve gerekli tüm görevleri yürütecektir.

Uygulamayı ve/veya belirli öykünücüyü oluşturmak istediğiniz platformun adını belirterek derleme işleminin kapsamını sınırlayabilirsiniz, örneğin:

 cordova run android --emulator

veya

 cordova run ios --emulator --target="iPhone-8-Plus"

Uygulamalı Apache Cordova Eğitimi

Cordova ve eklentilerinin kullanımını göstermek için basit bir eğitim uygulaması oluşturalım. Demonun tamamı bu GitHub deposunda bulunabilir, böylece onu indirebilir ve bu kısa Cordova öğreticisiyle birlikte bölümlerini inceleyebilirsiniz.

Oluşturduğunuz ilk kurulumu kullanacağız ve ek kod ekleyeceğiz. Diyelim ki hayali bir Toptal veritabanına yeni projeler eklemek ve mevcut projeleri görüntülemek istiyoruz. index.html dosyasını açın ve aşağıdaki şekilde iki sekme ayarlayın:

 <!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <meta name="format-detection" content="telephone=no" /> <meta name="msapplication-tap-highlight" content="no" /> <meta name="viewport" content="user-scalable=no, initial-scale=1, maximum-scale=1, minimum-scale=1, width=device-width, height=device-height, target-densitydpi=device-dpi" /> <link rel="stylesheet" type="text/css" href="css/bootstrap.min.css" /> <link rel="stylesheet" href="css/jquery.mobile-1.4.5.min.css" /> <link rel="stylesheet" type="text/css" href="css/toptal.css" /> <title>Hello Toptal</title> </head> <body> <div> <div> </div> </div> <footer> <ul> <li class="tab-button active" data-tab="#search-tab">Search Projects</li> <li class="tab-button" data-tab="#add-tab">Post a Project</li> </ul> </footer> <div></div> <script src="js/lib/jquery-1.11.1.min.js"></script> <script src="js/lib/jquery.mobile-1.4.5.min.js"></script> <script type="text/javascript" src="cordova.js"></script> <script type="text/javascript" src="js/SQLiteStorageService.js"></script> <script type="text/javascript" src="js/Controller.js"></script> <script type="text/javascript" src="js/index.js"></script> </body> </html>

Bağımlılık olarak Bootstrap ve jQuery Mobile eklediğime dikkat edin. Modern hibrit uygulamalar oluşturmak için çok daha iyi çözümlerin ve çerçevelerin geliştirildiğini lütfen unutmayın, ancak çoğu (hepsi değilse de) web geliştiricisi bu iki kitaplığa aşina olduğundan, bunları yeni başlayanlar için kullanmak mantıklıdır. Stil sayfalarını GitHub'dan indirebilir veya isterseniz kendi stil sayfalarınızı kullanabilirsiniz.

index.js dosyasına geçelim ve onu aşağıdakine indirgeyelim:

 var app = { // Application Constructor initialize: function() { if (navigator.userAgent.match(/(iPhone|iPod|iPad|Android|BlackBerry)/)) { document.addEventListener("deviceready", this.onDeviceReady, false); } else { this.onDeviceReady(); } }, onDeviceReady: function() { // We will init / bootstrap our application here }, }; app.initialize();

Cordova uygulamaları için savunulan mimarinin Tek Sayfa Uygulaması (SPA) oluşturduğunu unutmayın. Bu şekilde, tüm kaynaklar uygulama başladığında yalnızca bir kez yüklenir ve uygulama çalıştığı sürece web görünümünde kalabilir. Ek olarak, SPA'lar ile kullanıcı, yerel uygulamalar için tipik olmayan sayfa yeniden yüklemelerine sahip olmayacaktır. Bunu akılda tutarak, iki sekme arasında geçiş yapmak için basit bir denetleyici ayarlayalım:

 var Controller = function() { var controller = { self: null, initialize: function() { self = this; this.bindEvents(); self.renderSearchView(); }, bindEvents: function() { $('.tab-button').on('click', this.onTabClick); }, onTabClick: function(e) { e.preventDefault(); if ($(this).hasClass('active')) { return; } var tab = $(this).data('tab'); if (tab === '#add-tab') { self.renderPostView(); } else { self.renderSearchView(); } }, renderPostView: function() { $('.tab-button').removeClass('active'); $('#post-tab-button').addClass('active'); var $tab = $('#tab-content'); $tab.empty(); $("#tab-content").load("./views/post-project-view.html", function(data) { $('#tab-content').find('#post-project-form').on('submit', self.postProject); }); }, renderSearchView: function() { $('.tab-button').removeClass('active'); $('#search-tab-button').addClass('active'); var $tab = $('#tab-content'); $tab.empty(); var $projectTemplate = null; $("#tab-content").load("./views/search-project-view.html", function(data) { $projectTemplate = $('.project').remove(); // Load projects here }); } } controller.initialize(); return controller; }

Denetleyicinin şimdiye kadar iki yöntemi vardır, biri Arama Görünümünü oluşturmak için ve diğeri Proje Sonrası görünümünü oluşturmak için. Önce en üstte bildirerek ve onDeviceReady yönteminde oluşturarak index.js dosyamızda başlatalım:

 // top of index.js var controller = null

 // inside onDeviceReady method controller = new Controller();

Son olarak, index.html dosyasına index.js referansının üstüne bir komut dosyası referansı ekleyin. Arama ve Gönderme görünümlerini doğrudan GitHub'dan indirebilirsiniz. Kısmi görünümler bir dosyadan okunduğundan, Chrome gibi bazı tarayıcılar sayfanızı oluşturmaya çalışırken etki alanları arası isteklerden şikayet eder.

Buradaki olası çözüm, örneğin node-static npm modülünü kullanarak yerel bir statik sunucu çalıştırmak olabilir. Ayrıca, burada PhoneGap ve/veya Ionic gibi bir çerçeve kullanmayı düşünebilirsiniz. Hepsi, tarayıcıda öykünme, çalışırken yeniden yükleme ve kod oluşturma (iskele) dahil olmak üzere bir dizi geliştirme aracı sağlar.

Şimdilik, aşağıdakileri çalıştırarak basitçe bir Android cihaza dağıtalım:

 cordova run android

Bu noktada, uygulamanızın iki sekmesi olmalıdır. İlk sekme projelerin aranmasına izin verir:

İkinci sekme, yeni projelerin yayınlanmasına izin verir:

Şimdi elimizdeki tek şey, bir web görünümü içinde çalışan klasik bir web uygulaması. Yerel özelliklerin hiçbirini gerçekten kullanmadık, o yüzden şimdi bunu yapmaya çalışalım. Yaygın bir soru, verilerin cihazda yerel olarak nasıl depolanacağı veya daha kesin olarak ne tür bir depolama kullanılacağıdır. Gitmenin birkaç yolu var:

• Yerel depolama
• WebSQL
• IndexedDB
• Bir web hizmeti aracılığıyla erişilen sunucu tarafı depolama
• Başka seçenekler sunan üçüncü taraf eklentiler

LocalStorage, küçük miktarlarda veri depolamak için uygundur, ancak veri yoğun bir uygulama oluşturuyorsanız, kullanılabilir alan 3 ila 10 MB arasında değiştiğinden, bu yeterli olmayacaktır. IndexedDB bu durum için daha iyi bir çözüm olabilir. WebSQL kullanımdan kaldırılmıştır ve bazı platformlarda desteklenmez. Son olarak, verileri getirmek ve değiştirmek için web hizmetlerini kullanmak SPA paradigmasına çok uygundur, ancak uygulamanız çevrimdışı olduğunda bozulur. Servis Çalışanları ile birlikte PWA teknikleri, bu konuda yardımcı olmak için yakın zamanda Cordova dünyasına geldi.

Ayrıca, Cordova'nın çekirdeğindeki boşlukları doldurmak için gelen birçok ek üçüncü taraf eklentisi var. Dosya eklentisi, cihazın dosya sistemine erişmenizi sağlayarak dosya oluşturmanıza ve saklamanıza izin verdiği için oldukça faydalı olabilir. Şimdilik size yerel bir SQLite veritabanı sağlayan SQLitePlugin'i deneyelim. Aşağıdakileri çalıştırarak projenize ekleyebilirsiniz:

 cordova plugin add https://github.com/brodysoft/Cordova-SQLitePlugin

SQLitePlugin, cihazın SQLite veritabanına bir API sağlar ve gerçek bir kalıcılık mekanizması olarak hizmet eder. Aşağıdaki şekilde basit bir Depolama Hizmeti oluşturabiliriz:

 SQLiteStorageService = function () { var service = {}; var db = window.sqlitePlugin ? window.sqlitePlugin.openDatabase({name: "demo.toptal", location: "default"}) : window.openDatabase("demo.toptal", "1.0", "DB para FactAV", 5000000); service.initialize = function() { // Initialize the database var deferred = $.Deferred(); db.transaction(function(tx) { tx.executeSql( 'CREATE TABLE IF NOT EXISTS projects ' + '(id integer primary key, name text, company text, description text, latitude real, longitude real)' ,[], function(tx, res) { tx.executeSql('DELETE FROM projects', [], function(tx, res) { deferred.resolve(service); }, function(tx, res) { deferred.reject('Error initializing database'); }); }, function(tx, res) { deferred.reject('Error initializing database'); }); }); return deferred.promise(); } service.getProjects = function() { // fetch projects } service.addProject = function(name, company, description, addLocation) { // add a new project } return service.initialize(); }

Projeleri almak ve eklemek için kodu GitHub'dan indirebilir ve ilgili yer tutuculara yapıştırabilirsiniz. SQLiteStorageService.js dosyasını Controller.js'nin yukarısındaki index.html dosyanıza eklemeyi ve Controller'ın init işlevini değiştirerek bunu controller'ınızda başlatmayı unutmayın:

 initialize: function() { self = this; new SQLiteStorageService().done(function(service) { self.storageService = service; self.bindEvents(); self.renderSearchView(); }).fail(function(error) { alert(error); }); }

service.addProject()'e bir göz atarsanız, navigator.geolocation.getCurrentPosition() yöntemini çağırdığını fark edeceksiniz. Cordova, telefonun mevcut konumunu almak için kullanabileceğiniz bir coğrafi konum eklentisine sahiptir ve hatta kullanıcının konumu değiştiğinde güncellemeleri almak için navigator.geolocation.watchPosition() yöntemini kullanabilirsiniz.

Son olarak, veritabanından proje eklemek ve almak için controller olay tanıtıcılarını ekleyelim:

 renderPostView: function() { $('.tab-button').removeClass('active'); $('#post-tab-button').addClass('active'); var $tab = $('#tab-content'); $tab.empty(); $("#tab-content").load("./views/post-project-view.html", function(data) { $('#tab-content').find('#post-project-form').on('submit', self.postProject); }); }, postProject: function(e) { e.preventDefault(); var name = $('#project-name').val(); var description = $('#project-description').val(); var company = $('#company').val(); var addLocation = $('#include-location').is(':checked'); if (!name || !description || !company) { alert('Please fill in all fields'); return; } else { var result = self.storageService.addProject( name, company, description, addLocation); result.done(function() { alert('Project successfully added'); self.renderSearchView(); }).fail(function(error) { alert(error); }); } }, renderSearchView: function() { $('.tab-button').removeClass('active'); $('#search-tab-button').addClass('active'); var $tab = $('#tab-content'); $tab.empty(); var $projectTemplate = null; $("#tab-content").load("./views/search-project-view.html", function(data) { $('#addressSearch').on('click', function() { alert('Not implemented'); }); $projectTemplate = $('.project').remove(); var projects = self.storageService.getProjects().done(function(projects) { for(var idx in projects) { var $div = $projectTemplate.clone(); var project = projects[idx]; $div.find('.project-name').text(project.name); $div.find('.project-company').text(project.company); $div.find('.project-description').text(project.description); if (project.location) { var url = '<a target="_blank" href="https://www.google.com.au/maps/preview/@' + project.location.latitude + ',' + project.location.longitude + ',10z">Click to open map</a>'; $div.find('.project-location').html(url); } else { $div.find('.project-location').text("Not specified"); } $tab.append($div); } }).fail(function(error) { alert(error); }); }); }

Konsolu ve iletişim eklentilerini eklemek için aşağıdakileri yürütün:

 cordova plugin add org.apache.cordova.dialogs cordova plugin add org.apache.cordova.console

cordova.console eklentisi, öykünücüler içinde console.log() işlevini etkinleştirerek hata ayıklamada size yardımcı olacaktır.

Android uygulamalarında Chrome uzaktan hata ayıklayıcı aracılığıyla kolayca hata ayıklayabilirsiniz. Cihazınızı bağladıktan sonra, sağ üst köşedeki (X düğmesinin altında) açılır menüyü tıklayın, Diğer Araçlar'ı genişletin ve Cihazları İncele'yi tıklayın. Cihazınızı listede görmeli ve hata ayıklama konsolunu açabilmelisiniz.

Safari, USB bağlantılı aygıtta veya öykünücüde çalışan iOS uygulamalarında hata ayıklamak için aynı işlevi sağlar. Safari Ayarları > Gelişmiş sekmesi altında Geliştirici Araçlarını etkinleştirmeniz yeterlidir.

cordova.dialogs eklentisi yerel bildirimleri etkinleştirir. Yaygın bir uygulama, cordova.dialogs API'sini kullanarak windows.alert yöntemini aşağıdaki şekilde yeniden tanımlamaktır:

 overrideBrowserAlert: function() { if (navigator.notification) { // Override default HTML alert with native dialog window.alert = function (message) { navigator.notification.alert( message, // message null, // callback "Toptal", // title 'OK' // buttonName ); }; } }

overrideBrowserAlert işlevi, deviceready olay işleyicisinde çağrılmalıdır.

Artık yeni projeler ekleyebilmeli ve mevcut projeleri veritabanından görüntüleyebilmelisiniz. "Konumu dahil et" onay kutusunu seçerseniz, cihaz Geolocation API'sini arar ve mevcut konumunuzu projeye ekler.

Bir simge ve bir açılış ekranı ayarlayarak uygulamaya son bir dokunuş ekleyelim. Aşağıdakileri config.xml dosyanıza ekleyin:

 <platform name="android"> <icon src="www/img/logo.png" /> <splash src="www/img/logo.png" density="mdpi"/> <splash src="www/img/logo.png" density="hdpi"/> <splash src="www/img/logo.png" density="xhdpi"/> </platform>

Son olarak, www/img klasörüne bir logo resmi yerleştirin.

Kendi Cordova Uygulamanız

Apache Cordova uygulama geliştirmesinin temel adımlarından geçtik ve kendi JavaScript mimarimizi ve CSS stil sayfamızı kullandık. Bu Cordova öğreticisi, hem geliştirme süresini hem de farklı platformlar için birden çok uygulama oluşturmak için gereken çabayı azaltarak, tanıdık teknolojileri kullanarak mobil uygulamalar geliştirmenin bir yolu olarak Apache Cordova'nın potansiyelini gösterme girişimiydi.

Ancak, üretime geçecek uygulamalar oluştururken mevcut bir çerçeveyi kullanmanız önerilir. Bu, uygulamanızı önceden tanımlanmış bir mimaride yapılandırmanın yanı sıra, uygulamanızın yerel görünüme ve hisse daha yakın olmasına yardımcı olacak bir dizi bileşen de sağlayabilir. Kayda değer bazı çerçeveler Ionic, Framework7, Weex, Ratchet, Kendo UI ve Onsen UI'dir. İyi şanslar!