Langkah Berikutnya

Langkah selanjutnya

Untuk pengembang yang memiliki pemahaman tentang cara menggunakan Cordova CLI dan memanfaatkan plugins, ada beberapa hal yang mungkin ingin Anda pertimbangkan untuk meneliti selanjutnya untuk membangun aplikasi Cordova yang lebih baik dan lebih berkinerja. Dokumen berikut menawarkan saran tentang berbagai topik yang berkaitan dengan praktik terbaik, pengujian, peningkatan, dan topik lainnya, tetapi tidak dimaksudkan untuk bersifat preskriptif. Pertimbangkan ini titik peluncuran Anda untuk pertumbuhan Anda sebagai pengembang Cordova. Juga, jika Anda melihat sesuatu yang dapat ditingkatkan, silakan berkontribusi !

Praktik Terbaik untuk Aplikasi Cordova

1) SPA Adalah Teman Anda

Pertama dan terutama - aplikasi Cordova Anda harus mengadopsi desain SPA (Aplikasi Halaman Tunggal). Didefinisikan secara longgar, SPA adalah aplikasi sisi klien yang dijalankan dari satu permintaan halaman web. Pengguna memuat serangkaian sumber daya awal (HTML, CSS, dan JavaScript) dan pembaruan lebih lanjut (menampilkan tampilan baru, memuat data) dilakukan melalui permintaan XHR. SPA biasanya digunakan untuk aplikasi sisi klien yang lebih kompleks. Gmail adalah contoh yang bagus untuk ini. Setelah Anda memuat Gmail, tampilan surat, pengeditan, dan pengaturan semua dilakukan dengan memperbarui DOM alih-alih meninggalkan halaman saat ini untuk memuat yang benar-benar baru.

Menggunakan SPA dapat membantu Anda mengatur aplikasi Anda dengan cara yang lebih efisien, tetapi juga memiliki manfaat khusus untuk aplikasi Cordova. Aplikasi Cordova harus menunggu acara deviceready diaktifkan sebelum plugin apa pun dapat digunakan. Jika Anda tidak menggunakan SPA, dan pengguna Anda mengklik untuk berpindah dari satu halaman ke halaman lain, Anda harus menunggu deviceready diaktifkan lagi sebelum Anda menggunakan plugin. Ini mudah dilupakan karena aplikasi Anda semakin besar.

Bahkan jika Anda memilih untuk tidak menggunakan Cordova, membuat aplikasi seluler tanpa menggunakan arsitektur satu halaman akan memiliki implikasi kinerja yang serius. Ini karena menavigasi antar halaman akan membutuhkan skrip, aset, dll., Untuk dimuat ulang. Bahkan jika aset ini di-cache, masih akan ada masalah kinerja.

Contoh perpustakaan SPA yang dapat Anda gunakan dalam aplikasi Cordova Anda adalah:

Dan banyak, banyak, lebih banyak.

2) Pertimbangan Kinerja

Pertimbangkan masalah berikut untuk meningkatkan kinerja dalam aplikasi seluler Anda:

Klik versus Sentuh - Banyak perangkat memaksakan penundaan 300ms pada acara klik untuk membedakan antara gerakan ketuk dan ketuk untuk memperbesar. Ini dapat memiliki efek membuat aplikasi Anda terasa lambat dan tidak responsif. Menghindari penundaan ini adalah salah satu cara terpenting untuk meningkatkan kinerja yang dirasakan aplikasi Anda. Untuk informasi lebih lanjut tentang penundaan ketukan, lihat keterlambatan ketukan 300 ms, hilang di situs Pengembang Google.

Sebagian besar versi Android tidak lagi memaksakan penundaan ini, tetapi iOS secara default tetap melakukannya. Untuk iOS, menggunakan WkWebView alih-alih UIWebView default menghilangkan penundaan ini. Untuk Android dan iOS, Anda harus memastikan bahwa meta tag viewport Anda memiliki setidaknya width=device-width, atau Anda masih akan memiliki penundaan ketukan. Jika Anda perlu mendukung perangkat yang lebih lama (Android 4.4 atau iOS 8), pertimbangkan polyfill seperti FastClick , atau menggunakan touchstartdan touchendbukan click.

Transisi CSS versus Manipulasi DOM - Menggunakan perangkat keras transisi CSS yang dipercepat akan jauh lebih baik daripada menggunakan JavaScript untuk membuat animasi. Lihat daftar sumber daya di akhir bagian ini untuk contoh.

Menghisap Jaringan - Ok, jaringan tidak selalu payah, tetapi latensi jaringan seluler, bahkan jaringan seluler yang baik, jauh lebih buruk daripada yang mungkin Anda pikirkan. Aplikasi desktop yang menyeruput 500 baris data JSON, setiap 30 detik, akan lebih lambat pada perangkat seluler dan juga baterai. Ingatlah bahwa aplikasi Cordova memiliki banyak cara untuk tetap menggunakan data dalam aplikasi (misalnya, LocalStorage dan sistem file). Tembolok data itu secara lokal dan perhatikan jumlah data yang Anda kirim bolak-balik. Ini adalah pertimbangan yang sangat penting ketika aplikasi Anda terhubung melalui jaringan seluler.

Artikel dan Sumber Daya Kinerja Tambahan

3) Mengenali dan Menangani Status Offline

Lihat tip sebelumnya tentang jaringan. Anda tidak hanya dapat berada di jaringan yang lambat, sangat mungkin untuk aplikasi Anda sepenuhnya offline. Aplikasi Anda harus menangani ini dengan cara yang cerdas. Jika aplikasi Anda tidak, orang akan berpikir aplikasi Anda rusak. Mengingat betapa mudahnya menangani (Cordova mendukung mendengarkan baik untuk acara offline maupun online), sama sekali tidak ada alasan bagi aplikasi Anda untuk tidak merespons dengan baik ketika dijalankan offline. Pastikan untuk menguji (lihat bagian Pengujian di bawah) aplikasi Anda dan pastikan untuk menguji bagaimana aplikasi Anda menangani ketika Anda mulai di satu negara dan kemudian beralih ke yang lain.

Perhatikan bahwa acara online dan offline, serta API Sambungan Jaringan, tidak sempurna. Anda mungkin perlu mengandalkan penggunaan permintaan XHR untuk melihat apakah perangkat tersebut benar-benar offline atau online. Pada akhirnya, pastikan menambahkan beberapa bentuk dukungan untuk masalah jaringan - pada kenyataannya, toko Apple (dan mungkin toko lain) akan menolak aplikasi yang tidak menangani keadaan offline / online dengan benar. Untuk diskusi lebih lanjut tentang topik ini, lihat "Is This Thing On?"

Menangani Peningkatan

Meningkatkan Proyek Cordova

Tidak ada perintah pemutakhiran untuk proyek Cordova. Alih-alih, hapus platform dari proyek Anda, dan tambahkan kembali untuk mendapatkan versi terbaru:

cordova platform rm android
cordova platform add android

Sangat penting bagi Anda untuk membaca apa yang telah diubah di versi yang diperbarui, karena pembaruan dapat merusak kode Anda. Tempat terbaik untuk menemukan informasi ini adalah dalam catatan rilis yang diterbitkan di repositori dan di blog Cordova. Anda akan ingin menguji aplikasi Anda secara menyeluruh untuk memverifikasi bahwa itu berfungsi dengan benar setelah Anda melakukan pembaruan.

Catatan: beberapa plugin mungkin tidak kompatibel dengan versi Cordova yang baru. Jika sebuah plugin tidak kompatibel, Anda mungkin dapat menemukan plugin pengganti yang melakukan apa yang Anda butuhkan, atau Anda mungkin perlu menunda meningkatkan proyek Anda. Atau, ubah plugin agar berfungsi di bawah versi baru dan berkontribusi kembali ke komunitas.

Peningkatan Plugin

Memutakhirkan plugin melibatkan proses yang sama seperti platform - hapus, lalu tambahkan kembali.

cordova plugin rm some-plugin
cordova plugin add some-plugin

Lihat Mengelola versi dan platform untuk detail lebih lanjut.

Pastikan untuk memeriksa dokumentasi plugin yang diperbarui, karena Anda mungkin perlu menyesuaikan kode Anda untuk bekerja dengan versi baru. Juga, periksa kembali apakah versi baru plugin berfungsi dengan versi Cordova dari proyek Anda.

Selalu uji aplikasi Anda untuk memastikan bahwa menginstal plugin baru tidak merusak sesuatu yang tidak Anda antisipasi.

Jika proyek Anda memiliki banyak plugin yang perlu Anda perbarui, mungkin akan menghemat waktu untuk membuat skrip shell atau batch yang menghapus dan menambahkan plugin dengan satu perintah.

Menguji aplikasi Cordova

Menguji aplikasi Anda sangat penting. Tim Cordova menggunakan Jasmine , tetapi solusi pengujian unit yang ramah-web akan dilakukan.

Menguji pada simulator vs. pada perangkat nyata

Tidak jarang menggunakan peramban desktop dan simulator / emulator perangkat saat mengembangkan aplikasi Cordova. Namun, sangat penting bagi Anda untuk menguji aplikasi pada sebanyak mungkin perangkat fisik yang Anda bisa:

Simulator hanya itu: simulator. Misalnya, aplikasi Anda dapat bekerja di simulator iOS tanpa masalah, tetapi mungkin gagal pada perangkat nyata (terutama dalam keadaan tertentu, seperti kondisi memori rendah). Atau, aplikasi Anda mungkin gagal di simulator saat berfungsi dengan baik di perangkat nyata.
Emulator hanyalah itu: emulator. Mereka tidak mewakili seberapa baik aplikasi Anda akan berjalan pada perangkat fisik. Misalnya, beberapa emulator dapat membuat aplikasi Anda dengan tampilan yang kacau, sementara perangkat nyata tidak memiliki masalah. (Jika Anda mengalami masalah ini, nonaktifkan GPU host di emulator.)
Simulator umumnya lebih cepat daripada perangkat fisik Anda. Sebaliknya, emulator umumnya lebih lambat. Jangan menilai kinerja aplikasi Anda dengan kinerjanya di simulator atau emulator. Jangan menilai kinerja aplikasi Anda dengan cara kerjanya pada spektrum perangkat nyata.
Tidak mungkin untuk merasakan bagaimana aplikasi Anda merespon sentuhan Anda dengan menggunakan simulator atau emulator. Sebaliknya, menjalankan aplikasi pada perangkat nyata dapat menunjukkan masalah dengan ukuran elemen antarmuka pengguna, daya tanggap, dll.
Meskipun alangkah baiknya untuk dapat menguji hanya pada satu perangkat per platform, yang terbaik adalah untuk menguji pada banyak perangkat yang menggunakan banyak versi OS yang berbeda. Misalnya, apa yang berfungsi pada ponsel cerdas Android Anda mungkin gagal pada perangkat Android lain. Apa yang berfungsi pada perangkat iOS terbaru mungkin gagal pada yang lebih lama.

Tentu saja tidak mungkin untuk menguji pada setiap perangkat yang ada di pasaran. Karena alasan ini, sebaiknya merekrut banyak penguji yang memiliki perangkat berbeda. Meskipun mereka tidak akan menangkap setiap masalah, kemungkinan besar mereka akan menemukan keanehan dan masalah yang tidak akan Anda temukan sendirian.

Mendebug aplikasi Cordova

Dalam kebanyakan kasus, debugging aplikasi Cordova cukup mudah.

Debugging iOS

Xcode

Dengan Xcode Anda dapat men-debug sisi asli iOS dari aplikasi Cordova Anda. Pastikan Area Debug ditampilkan (Lihat -> Area Debug). Setelah aplikasi Anda berjalan di perangkat (atau simulator), Anda dapat melihat output log di area debug. Di sinilah kesalahan atau peringatan akan dicetak. Anda juga dapat mengatur breakpoint dalam file sumber. Ini akan memungkinkan Anda untuk melangkah melewati kode satu baris pada satu waktu dan melihat keadaan variabel pada waktu itu. Keadaan variabel ditampilkan di area debug ketika breakpoint terkena. Setelah aplikasi Anda aktif dan berjalan di perangkat, Anda dapat membuka inspektur web Safari (seperti yang dijelaskan di bawah) untuk men-debug tampilan web dan sisi JS dari aplikasi Anda. Untuk detail lebih lanjut, rujuk ke dokumen Dukungan Debugging Apple .

Safari Remote Debugging dengan Web Inspector

Dengan inspektur web Safari Anda dapat men-debug tampilan web dan kode js di aplikasi Cordova Anda. Ini hanya berfungsi di macOS. Ini menggunakan Safari untuk terhubung ke perangkat Anda (atau simulator) dan akan menghubungkan alat dev browser ke aplikasi Cordova. Anda mendapatkan apa yang Anda harapkan dari perangkat dev - inspeksi / manipulasi DOM, debugger JavaScript, inspeksi jaringan, konsol, dan banyak lagi. Seperti Xcode, dengan inspektur web Safari Anda dapat mengatur breakpoints dalam kode JavaScript dan melihat status variabel pada saat itu. Anda dapat melihat kesalahan, peringatan, atau pesan apa pun yang dicetak ke konsol. Anda juga dapat menjalankan perintah JavaScript langsung dari konsol saat aplikasi Anda berjalan.

Untuk mulai memeriksa, pertama-tama aktifkan pada perangkat di Settings > Safari > Advanced > Web Inspector. Di desktop Anda, aktifkan alat pengembang dari Safari > Preferences > Advanced > Show Develop menu in menu bar. Di Developmenu, Anda sekarang dapat memilih perangkat yang terhubung, dan aplikasi yang ingin Anda periksa.

Debugging Jarak Jauh Chrome

Hampir sama dengan versi Safari, ini hanya bekerja dengan Android tetapi dapat digunakan dari sistem operasi desktop apa pun. Setelah terhubung, Anda mendapatkan pengalaman Alat Dev Chrome yang sama untuk aplikasi seluler Anda seperti yang Anda lakukan dengan aplikasi desktop Anda. Lebih baik lagi, Alat Dev Chrome memiliki opsi cermin yang menunjukkan aplikasi Anda berjalan di perangkat seluler. Ini lebih dari sekadar tampilan - Anda dapat menggulir dan mengeklik dari perangkat dev dan memperbarui pada perangkat seluler.

Untuk memeriksanya, cukup buka URL chrome://inspectdi Chrome di desktop Anda. Di sini Anda akan melihat daftar perangkat yang terhubung dan aplikasi yang dapat diperiksa. Perangkat Anda harus diatur agar debugging USB agar ini berfungsi. Petunjuk lengkap tentang cara menyiapkan dapat ditemukan di https://developers.google.com/chrome/mobile/docs/debugging .

Jika Anda dapat melihat perangkat Anda di bagian memeriksa perangkat, tetapi Anda tidak dapat melihat tampilan web Cordova, Anda mungkin perlu menambahkannya android:debuggable="true"di <application>simpul perangkat Anda AndroidManifest.xml.

Dimungkinkan juga untuk menggunakan Alat Dev Chrome untuk memeriksa aplikasi iOS, melalui proxy WebKit: https://github.com/google/ios-webkit-debug-proxy/

Pilihan lain

Untuk lebih banyak contoh dan penjelasan tentang tips debugging di atas, lihat: httpa: //developer.telerik.com/featured/a-concise-guide-to-remote-debugging-on-ios-android-and-windows-phone/

Antarmuka pengguna

Membangun aplikasi Cordova yang terlihat bagus di perangkat seluler bisa menjadi tantangan, terutama bagi pengembang. Banyak orang memilih untuk menggunakan kerangka kerja UI untuk membuatnya lebih mudah. Berikut adalah daftar opsi yang mungkin ingin Anda pertimbangkan.

Ionic - Kerangka UI yang kuat ini sebenarnya memiliki CLI sendiri untuk menangani pembuatan proyek.
Ratchet - Dipersembahkan oleh orang-orang yang membuat Bootstrap.
Kendo UI - UI open source dan kerangka kerja aplikasi dari Telerik.
Onsen UI - Kerangka UI open source untuk situs web dan aplikasi Cordova
Mantel
ReactJS

Saat membangun antarmuka pengguna Anda, penting untuk memikirkan semua platform yang Anda targetkan dan perbedaan antara harapan pengguna. Misalnya, aplikasi Android yang memiliki UI bergaya iOS mungkin tidak akan cocok dengan pengguna. Ini kadang-kadang bahkan diberlakukan oleh berbagai toko aplikasi. Karena itu, penting bagi Anda untuk menghormati konvensi dari setiap platform dan oleh karena itu akrab dengan berbagai Panduan Antarmuka Manusia:

Pertimbangan Khusus

Meskipun Cordova membuat pengembangan lintas-platform lebih mudah, tidak mungkin untuk memberikan isolasi 100% dari platform asli yang mendasarinya, jadi berhati-hatilah terhadap pembatasan.

Quirks Platform

Saat membaca dokumentasi, cari bagian yang menguraikan perilaku atau persyaratan yang berbeda pada berbagai platform. Jika ada, ini akan berada di bagian berjudul "Android Quirks", "iOS Quirks", dll. Bacalah semua quirks ini dan sadari saat Anda bekerja dengan Cordova.

Memuat Konten Jarak Jauh

Meminta fungsi Cordova JavaScript dari halaman HTML yang dimuat dari jarak jauh (halaman HTML yang tidak disimpan secara lokal di perangkat) adalah konfigurasi yang tidak didukung. Ini karena Cordova tidak dirancang untuk ini, dan komunitas Apache Cordova tidak menguji konfigurasi ini. Meskipun dapat bekerja dalam beberapa keadaan, itu tidak dianjurkan atau didukung. Ada tantangan dengan kebijakan asal yang sama, menjaga agar JavaScript dan bagian asli Cordova disinkronkan pada versi yang sama (karena mereka digabungkan melalui API pribadi yang dapat berubah), kepercayaan atas konten jarak jauh yang memanggil fungsi lokal asli, dan potensi penolakan toko aplikasi. .

Tampilan konten HTML yang dimuat dari jarak jauh dalam tampilan web harus dilakukan menggunakan CordApp's InAppBrowser. InAppBrowser dirancang sehingga JavaScript yang berjalan di sana tidak memiliki akses ke Cordova JavaScript API karena alasan yang tercantum di atas. Silakan merujuk ke Panduan Keamanan .

Menjaga

Berikut adalah beberapa cara untuk mengikuti perkembangan Cordova.

Berlangganan ke blog Cordova .
Berlangganan ke daftar pengembang . Catatan - ini bukan kelompok pendukung, tetapi tempat di mana pengembangan Cordova dibahas.

Mendapatkan bantuan

Tautan berikut adalah tempat terbaik untuk mendapatkan bantuan untuk Cordova:

Slack: http://slack.cordova.io/ Saluran Cordova Slack resmi adalah cara yang bagus untuk mendapatkan bantuan dari komunitas, dan tempat Anda kemungkinan besar akan mendapatkan jawaban atas pertanyaan Anda
StackOverflow: https://stackoverflow.com/questions/tagged/cordova Dengan menggunakan tag Cordova, Anda dapat melihat dan menelusuri semua pertanyaan Cordova. Perhatikan bahwa StackOverflow secara otomatis mengubah tag "Phonegap" menjadi "Cordova", jadi dengan cara ini Anda juga dapat mengakses pertanyaan historis.
PhoneGap Google Group: https://groups.google.com/forum/#!forum/phonegap Grup Google ini adalah forum dukungan lama ketika Cordova masih disebut PhoneGap. Meskipun masih ada banyak pengguna Cordova yang sering mengunjungi grup ini, komunitas Cordova telah menyatakan minat untuk kurang fokus pada grup ini dan sebagai gantinya menggunakan StackOverflow untuk dukungan
Meetup: http://phonegap.meetup.com - Pertimbangkan untuk menemukan grup meetup Cordova / PhoneGap lokal

Tutorial Cordova Indonesia

Cari Blog Ini