Tutorial Apache Cordova: Mengembangkan Aplikasi Seluler dengan Cordova

Aplikasi seluler merayap di mana-mana, mulai dari smartphone dan tablet, hingga jam tangan pintar, dan segera juga ditemukan di perangkat wearable lainnya. Namun, mengembangkan untuk setiap platform seluler yang terpisah dapat menjadi tugas yang melelahkan, terutama jika sumber daya Anda terbatas, atau jika Anda adalah pengembang tunggal dan bukan perusahaan pengembang aplikasi seluler.

Di sinilah menjadi pengembang Apache Cordova yang berpengalaman dapat berguna dengan menyediakan cara untuk mengembangkan aplikasi seluler menggunakan teknologi web standar—HTML5, CSS3, dan JavaScript.

Pada tahun 2009, sebuah startup bernama Nitobi menciptakan PhoneGap, sebuah API open source untuk mengakses sumber daya seluler asli, dengan tujuan memungkinkan pengembang untuk membuat aplikasi seluler menggunakan teknologi web standar. Dalam visi Nitobi, sebagian besar aplikasi seluler akan segera dikembangkan menggunakan PhoneGap, tetapi pengembang masih memiliki opsi untuk menulis kode asli bila diperlukan, baik itu karena masalah kinerja, atau kurangnya metode untuk mengakses perangkat keras tertentu.

Cordova PhoneGap?

Tidak ada hal seperti itu, sungguh. Apa yang terjadi adalah, Adobe mengakuisisi Nitobi pada tahun 2011, dan menyumbangkan inti sumber terbuka ke Apache Software Foundation, yang mengganti namanya menjadi Apache Cordova. Analogi umum yang sering Anda temui adalah bahwa Cordova adalah untuk PhoneGap seperti halnya WebKit untuk Chrome atau Safari.

Jelas, perbedaan antara Cordova dan PhoneGap sangat minim pada awalnya. Seiring waktu, Adobe PhoneGap mengembangkan serangkaian fitur eksklusifnya sendiri, sementara Cordova—dan masih—didukung oleh komunitas sumber terbuka. Ulasan dan tutorial Apache Cordova ini akan memeriksa pengembangan aplikasi Cordova secara lebih rinci, dan sementara beberapa di antaranya mungkin berlaku untuk PhoneGap, ini tidak boleh dianggap sebagai tutorial PhoneGap, per se .

Kemampuan Apache Cordova

Intinya, Cordova tidak memiliki batasan dalam kaitannya dengan aplikasi yang dikembangkan secara asli. Apa yang Anda dapatkan dengan Cordova hanyalah API JavaScript, yang berfungsi sebagai pembungkus untuk kode asli dan konsisten di seluruh perangkat. Anda dapat menganggap Cordova sebagai wadah aplikasi dengan tampilan web, yang mencakup seluruh layar perangkat. Tampilan web yang digunakan oleh Cordova adalah tampilan web yang sama yang digunakan oleh sistem operasi asli. Di iOS, ini adalah UIWebView Objective-C default atau kelas WKWebView kustom; di Android, ini adalah android.webkit.WebView .

Apache Cordova hadir dengan seperangkat plugin yang telah dikembangkan sebelumnya yang menyediakan akses ke kamera perangkat, GPS, sistem file, dll. Seiring berkembangnya perangkat seluler, menambahkan dukungan untuk perangkat keras tambahan hanyalah masalah mengembangkan plugin baru.

Akhirnya, aplikasi Cordova menginstal seperti aplikasi asli. Ini berarti bahwa membangun kode Anda untuk iOS akan menghasilkan file IPA, untuk Android file APK, dan membangun untuk Windows Phone menghasilkan file XAP. Jika Anda cukup berupaya dalam proses pengembangan, pengguna Anda mungkin bahkan tidak menyadari bahwa mereka tidak menggunakan aplikasi asli.

Alur Kerja Pengembangan Apache Cordova

Ada dua jalur dasar yang dapat Anda ikuti saat mengembangkan dengan Cordova:

• Ketika niat Anda adalah untuk men-deploy aplikasi ke sebanyak mungkin platform, dengan sedikit atau tanpa pengembangan khusus platform, Anda harus menggunakan alur kerja lintas platform. Alat utama yang mendukung alur kerja ini adalah Cordova Command-Line Interface (CLI), yang berfungsi sebagai abstraksi tingkat yang lebih tinggi untuk mengonfigurasi dan membangun aplikasi Anda untuk platform yang berbeda. Ini adalah jalur pengembangan yang lebih umum digunakan.
• Jika Anda berencana untuk mengembangkan aplikasi Anda dengan platform tertentu, Anda harus menggunakan alur kerja yang berpusat pada platform. Dengan cara ini, Anda akan dapat mengubah dan memodifikasi kode Anda pada tingkat yang lebih rendah dengan mencampur komponen asli dengan komponen Cordova. Meskipun Anda dapat menggunakan pendekatan ini untuk pengembangan lintas platform, prosesnya akan lebih lama dan lebih membosankan.

Biasanya disarankan untuk memulai dengan alur kerja pengembangan lintas platform, karena beralih ke pengembangan yang berpusat pada platform cukup mudah. Namun, jika Anda awalnya memulai dengan alur kerja yang berpusat pada platform, Anda tidak akan dapat beralih ke pengembangan lintas platform karena CLI akan menimpa kustomisasi Anda setelah Anda menjalankan proses pembuatan.

Prasyarat dan Instalasi Cordova

Sebelum menginstal dan menjalankan apa pun yang terkait dengan Cordova, Anda perlu menginstal SDK untuk setiap platform yang ingin Anda bangun aplikasinya. Kami akan fokus pada platform Android dalam artikel ini; namun, proses yang melibatkan platform lain serupa.

Anda harus mengunduh Android SDK yang ada di sini. Untuk Windows, SDK hadir sebagai penginstal, sedangkan untuk Linux dan OSX hadir sebagai arsip yang dapat dengan mudah diekstraksi. Setelah mengekstrak/menginstal paket, Anda perlu menambahkan direktori sdk/tools dan sdk/platform-tools ke variabel PATH Anda. Variabel PATH digunakan oleh Cordova untuk mencari binari yang dibutuhkan untuk proses pembangunan. Jika Anda belum menginstal Java, Anda harus melanjutkan dan menginstal JDK bersama dengan Ant. ANT_HOME dan JAVA_HOME harus disetel ke folder bin JDK dan Ant, dan setelah menginstal Android SDK, setel variabel ANDROID_HOME ke Android/Sdk . Semua lokasi dalam tiga variabel *_HOME juga harus berada dalam variabel PATH Anda.

Setelah Anda menginstal perintah android SDK akan tersedia di baris perintah Anda. Jalankan untuk membuka manajer SDK dan menginstal alat terbaru dan Android API. Anda mungkin memerlukan Android SDK Tools, Android SDK Platform tools, Android SDK Build-tools, SDK Platform, Google APIs Intel x86 Atom System Image, Sources for Android SDK dan Intel x86 Emulator Accelerator (HAXM installer) . Setelah itu Anda akan dapat membuat emulator dengan android avd .

Cordova CLI bergantung pada Node.js dan klien Git, jadi silakan unduh dan instal Node dari nodejs.org, dan Git dari git-scm.com. Anda akan menggunakan npm untuk menginstal Cordova CLI sendiri serta untuk menginstal plugin tambahan, dan Cordova akan menggunakan git di belakang layar untuk mengunduh dependensi yang diperlukan. Akhirnya, lari

 npm install -g cordova

…untuk menginstal Cordova CLI secara global ( npm install cordova tidak cukup.)

Untuk meringkas, ini adalah paket yang Anda perlukan:

• Jawa
• Semut
• Android SDK
• NodeJS
• Git

Dan variabel lingkungan ini perlu diperbarui:

• PATH
• JAVA_HOME
• ANT_HOME
• ANDROID_HOME

Bootstrap Aplikasi

Asalkan Anda telah berhasil menginstal Cordova, Anda sekarang harus memiliki akses ke utilitas baris perintah Cordova. Buka terminal atau baris perintah Anda, dan arahkan ke direktori tempat Anda ingin membuat proyek Cordova pertama Anda. Untuk mem-bootstrap aplikasi, ketikkan perintah berikut:

 cordova create toptal toptal.hello HelloToptal

Baris perintah terdiri dari nama command cordova , diikuti oleh subcommand create . Subcommand dipanggil dengan tiga parameter tambahan: Folder tempat aplikasi akan ditempatkan, namespace aplikasi, dan nama tampilannya. Ini mem-bootstrap aplikasi dalam folder dengan struktur berikut:

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

Folder www berisi inti aplikasi Anda. Di sinilah Anda akan menempatkan kode aplikasi Anda yang umum untuk semua platform.

Meskipun Cordova memungkinkan Anda mengembangkan aplikasi untuk platform yang berbeda dengan mudah, terkadang Anda perlu menambahkan penyesuaian. Saat mengembangkan untuk beberapa platform, Anda tidak ingin memodifikasi file sumber di berbagai platforms/[platform-name][assets]/www direktori, karena mereka secara teratur ditimpa dengan file www tingkat atas.

Pada titik ini Anda juga dapat membuka file config.xml dan mengubah metadata untuk aplikasi Anda, seperti penulis dan deskripsi.

Tambahkan platform pertama Anda menggunakan:

 cordova platform add android

Jika Anda berubah pikiran nanti, Anda dapat menghapus platform dari proses pembuatan dengan mudah:

 cordova platform rm android

Setelah memeriksa direktori platform, Anda akan melihat folder android di dalamnya. Untuk setiap platform yang Anda tambahkan, Cordova akan membuat direktori baru di platform dan menduplikasi folder www di dalamnya. Jika, misalnya, Anda ingin menyesuaikan aplikasi untuk Android, Anda dapat memodifikasi file di platforms/android/assets/www dan beralih ke alat shell khusus platform.

Namun, ingat bahwa jika Anda membangun kembali aplikasi Anda dengan CLI (digunakan untuk pengembangan lintas platform), Cordova akan menimpa perubahan yang telah Anda buat untuk setiap platform, jadi pastikan Anda memilikinya di bawah kontrol versi, atau Anda melakukan platform-spesifik perubahan setelah Anda selesai dengan pengembangan lintas platform. Seperti yang kami sebutkan sebelumnya, berpindah dari lintas platform ke pengembangan khusus platform itu mudah. Bergerak ke arah lain tidak.

Jika Anda ingin tetap menggunakan alur kerja lintas platform dan masih membuat penyesuaian khusus platform, Anda harus menggunakan folder gabungan tingkat atas. Dari Cordova versi 3.5 dan seterusnya, folder ini telah dihapus dari templat aplikasi default, tetapi jika Anda membutuhkannya, Anda cukup membuatnya di samping direktori tingkat atas lainnya ( hooks , platforms , plugins , dan www ).

Kustomisasi khusus platform ditempatkan di merges/[platform-name] , dan diterapkan setelah file sumber di folder www tingkat atas. Dengan cara ini, Anda dapat menambahkan file sumber baru untuk platform tertentu, atau Anda dapat mengganti seluruh file sumber tingkat atas dengan yang khusus platform. Ambil contoh struktur berikut:

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

Dalam hal ini, file output untuk Android akan berisi file app.js dan android.js , tetapi file output untuk Windows Phone 8 hanya akan berisi file app.js yang ditemukan di folder merges/wp8 , karena file di merges/[platform] menimpa file di www .

Direktori plugins berisi informasi untuk plugin masing-masing platform. Pada titik ini, Anda seharusnya hanya memiliki file android.json yang seharusnya memiliki struktur berikut:

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

Mari kita membangun aplikasi dan menyebarkannya ke perangkat Android. Anda dapat menggunakan emulator juga, jika Anda mau.

Cordova menyediakan beberapa langkah CLI untuk membangun dan menjalankan aplikasi Anda: cordova prepare , cordova compile , cordova build (yang merupakan jalan pintas untuk dua sebelumnya), cordova emulate dan cordova run (yang menggabungkan build dan dapat menjalankan emulator juga). Ini seharusnya tidak membingungkan Anda, karena dalam kebanyakan kasus Anda ingin membangun dan menjalankan aplikasi Anda di emulator:

 cordova run --emulator

Jika mau, Anda dapat mencolokkan perangkat Anda melalui port USB, mengaktifkan mode debugging USB dan menerapkan aplikasi Apache Cordova pertama Anda langsung ke perangkat Anda dengan menjalankan:

 cordova run

Ini akan menyalin semua file Anda ke platforms/* dan menjalankan semua tugas yang diperlukan.

Anda dapat membatasi ruang lingkup proses pembangunan dengan menentukan nama platform yang Anda inginkan untuk membangun aplikasi dan/atau bahkan emulator tertentu, misalnya:

 cordova run android --emulator

atau

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

Tutorial langsung Apache Cordova

Mari membuat aplikasi tutorial sederhana untuk mendemonstrasikan penggunaan Cordova dan pluginnya. Seluruh demo dapat ditemukan di repositori GitHub ini sehingga Anda dapat mengunduhnya dan membaca bagian-bagiannya bersama dengan tutorial singkat Cordova ini.

Kami akan menggunakan pengaturan awal yang Anda buat dan menambahkan kode tambahan. Katakanlah kita ingin menambahkan proyek baru ke database Toptal imajiner, serta melihat yang sudah ada. Buka index.html dan siapkan dua tab dengan cara berikut:

 <!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>

Perhatikan bahwa saya telah menambahkan Bootstrap dan jQuery Mobile sebagai dependensi. Perlu diketahui bahwa solusi dan kerangka kerja yang jauh lebih baik telah dikembangkan untuk membangun aplikasi hibrid modern, tetapi karena sebagian besar (jika tidak semua) pengembang web akrab dengan kedua pustaka ini, masuk akal untuk menggunakannya untuk tutorial pemula. Anda dapat mengunduh stylesheet dari GitHub atau menggunakan milik Anda sendiri, jika Anda mau.

Mari kita pindah ke file index.js , dan menghapusnya menjadi berikut:

 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();

Ingatlah bahwa arsitektur yang dianjurkan untuk aplikasi Cordova sedang menyiapkan Aplikasi Halaman Tunggal (SPA). Dengan cara ini, semua sumber daya hanya dimuat sekali saat aplikasi dimulai, dan dapat tetap berada di tampilan web selama aplikasi berjalan. Selain itu, dengan SPA, pengguna tidak akan memuat ulang halaman yang tidak biasa untuk aplikasi asli. Dengan mengingat hal itu, mari kita siapkan pengontrol sederhana untuk beralih di antara dua tab:

 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; }

Pengontrol memiliki dua metode sejauh ini, satu untuk merender Tampilan Pencarian, dan satu untuk merender tampilan Post Project. Mari kita inisialisasi dalam file index.js kita dengan terlebih dahulu mendeklarasikannya di bagian atas dan membangunnya dalam metode onDeviceReady:

 // top of index.js var controller = null

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

Terakhir, tambahkan referensi skrip di index.html di atas referensi ke index.js . Anda dapat mengunduh tampilan Pencarian dan Posting langsung dari GitHub. Karena tampilan sebagian dibaca dari file, beberapa browser seperti Chrome, saat mencoba merender halaman Anda, akan mengeluh tentang permintaan lintas domain.

Solusi yang mungkin di sini adalah menjalankan server statis lokal, misalnya menggunakan modul npm node-static . Juga, di sini Anda dapat mulai berpikir untuk menggunakan beberapa kerangka kerja seperti PhoneGap dan/atau Ionic. Semuanya menyediakan berbagai alat pengembangan, termasuk meniru di browser, memuat ulang panas, dan menghasilkan kode (scaffolding).

Untuk saat ini, mari kita terapkan ke perangkat Android dengan menjalankan yang berikut ini:

 cordova run android

Pada titik ini, aplikasi Anda harus memiliki dua tab. Tab pertama memungkinkan proyek untuk dicari:

Tab kedua memungkinkan proyek baru untuk diposting:

Yang kita miliki sekarang adalah aplikasi web klasik yang berjalan di dalam tampilan web. Kami belum benar-benar menggunakan salah satu fitur asli jadi mari kita coba melakukannya sekarang. Pertanyaan umum adalah bagaimana menyimpan data secara lokal di perangkat, atau lebih tepatnya, jenis penyimpanan apa yang digunakan. Ada beberapa cara untuk pergi:

• Penyimpanan lokal
• WebSQL
• DB terindeks
• Penyimpanan sisi server diakses melalui layanan web
• Plugin pihak ketiga menyediakan opsi lain

Penyimpanan Lokal dapat digunakan untuk menyimpan data dalam jumlah kecil, tetapi itu tidak akan cukup jika Anda membuat aplikasi intensif data, karena ruang yang tersedia bervariasi dari 3 hingga 10 MB. IndexedDB mungkin merupakan solusi yang lebih baik untuk kasus ini. WebSQL tidak digunakan lagi dan tidak didukung pada beberapa platform. Terakhir, menggunakan layanan web untuk mengambil dan memodifikasi data sangat cocok dengan paradigma SPA, tetapi akan rusak saat aplikasi Anda offline. Teknik PWA bersama dengan Service Worker baru-baru ini datang ke dunia Cordova untuk membantu dalam hal ini.

Juga, ada banyak tambahan, plugin pihak ketiga yang masuk untuk mengisi celah di inti Cordova. Plugin File mungkin cukup berguna karena memberi Anda akses ke sistem file perangkat, memungkinkan Anda membuat dan menyimpan file. Untuk saat ini, mari kita coba SQLitePlugin yang menyediakan database SQLite lokal untuk Anda. Anda dapat menambahkannya ke proyek Anda dengan menjalankan:

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

SQLitePlugin menyediakan API ke database SQLite perangkat dan berfungsi sebagai mekanisme persistensi yang sebenarnya. Kami dapat membuat Layanan Penyimpanan sederhana dengan cara berikut:

 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(); }

Anda dapat mengunduh kode untuk mengambil dan menambahkan proyek dari GitHub dan menempelkannya di tempat penampung masing-masing. Jangan lupa untuk menambahkan SQLiteStorageService.js ke file index.html Anda di atas Controller.js, dan inisialisasi di controller Anda dengan memodifikasi fungsi init Controller:

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

Jika Anda melihat sekilas pada service.addProject(), Anda akan melihat bahwa itu membuat panggilan ke metode navigator.geolocation.getCurrentPosition(). Cordova memiliki plugin geolokasi yang dapat Anda gunakan untuk mendapatkan lokasi ponsel saat ini, dan Anda bahkan dapat menggunakan metode navigator.geolocation.watchPosition() untuk menerima pembaruan saat posisi pengguna berubah.

Terakhir, mari tambahkan pengendali event handle untuk menambahkan dan mengambil proyek dari database:

 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); }); }); }

Untuk menambahkan konsol dan plugin dialog, jalankan perintah berikut:

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

Plugin cordova.console akan membantu Anda dalam debugging dengan mengaktifkan fungsi console.log() dalam emulator.

Anda dapat dengan mudah men-debug aplikasi Android melalui debugger jarak jauh Chrome. Setelah Anda menghubungkan perangkat Anda, klik menu tarik-turun di sudut kanan atas (di bawah tombol X), perluas More Tools, dan klik Inspect Devices. Anda akan melihat perangkat Anda dalam daftar dan harus dapat membuka konsol debugnya.

Safari menyediakan fungsionalitas yang sama untuk men-debug aplikasi iOS yang berjalan di perangkat atau emulator yang terhubung ke USB. Cukup aktifkan Alat Pengembang di bawah Pengaturan Safari> tab Lanjutan.

Plugin cordova.dialogs mengaktifkan notifikasi asli. Praktik umum adalah mendefinisikan ulang metode windows.alert menggunakan cordova.dialogs API dengan cara berikut:

 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 ); }; } }

Fungsi overrideBrowserAlert harus dipanggil dalam event handler deviceready .

Anda sekarang harus dapat menambahkan proyek baru dan melihat yang sudah ada dari database. Jika Anda memilih kotak centang “Sertakan lokasi”, perangkat akan melakukan panggilan ke API Geolokasi dan menambahkan lokasi Anda saat ini ke proyek.

Mari kita tambahkan sentuhan akhir pada aplikasi dengan mengatur ikon dan layar pembuka. Tambahkan yang berikut ini ke file config.xml Anda:

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

Terakhir, letakkan gambar logo di folder www/img .

Aplikasi Cordova Anda Sendiri

Kami telah melalui langkah-langkah dasar pengembangan aplikasi Apache Cordova dan menggunakan arsitektur JavaScript dan stylesheet CSS kami sendiri. Tutorial Cordova ini merupakan upaya untuk menunjukkan potensi Apache Cordova sebagai sarana untuk mengembangkan aplikasi seluler menggunakan teknologi yang sudah dikenal, mengurangi waktu pengembangan dan upaya yang diperlukan untuk membangun banyak aplikasi untuk platform yang berbeda.

Namun, saat membangun aplikasi yang akan masuk ke produksi, disarankan agar Anda menggunakan kerangka kerja yang ada. Selain menyusun aplikasi Anda dalam arsitektur yang telah ditentukan sebelumnya, ini mungkin juga memberi Anda satu set komponen yang akan membantu aplikasi Anda mendekati tampilan dan nuansa asli. Beberapa framework yang perlu diperhatikan adalah Ionic, Framework7, Weex, Ratchet, Kendo UI, dan Onsen UI. Semoga berhasil!