Thursday, May 23, 2019

7 Langkah Awal Cara Membuat Aplikasi Android Menggunakan Cordova [Lengkap]

MasIrfun.com - Cara membuat Aplikasi Android - Buat Anda yang ingin sekali membangun sebuah aplikasi di Android, sekarang Anda bisa membangunnya menggunakan Cordova. Salah satu sofware yang bisa Anda pergunakan untuk membuat aplikasi di Android sangat rekomendasi sekali. Banyak sekali para master pun menggunakan Cordova dalam membuat aplikasi.



Cara membuat aplikasi Android kali ini MasIrfun sajikan khusus untuk Anda yang masih awam sekali dan ingin membangun aplikasi Android. Pada kali ini MasIrfun menyajikan lengkap mulai dari awal cara membuat aplikasi Android. Dimana pada artikel ini dijelaskan mulai dari A-Z, oleh karena itu mari kita belajar bersama-sama dengan menyimak artikel dibawah ini !

Cara Membuat Aplikasi Android Menggunakan Cordova



Di sini, di MasIrfun  kami telah mengembangkan aplikasi Android dan iOS selama beberapa tahun. Membuat aplikasi asli memerlukan pengetahuan khusus yang berlaku untuk perangkat yang Anda kembangkan: Java untuk Android, dan Objective C (atau yang lebih baru Swift) untuk iOS. Pengetahuan khusus ini tidak datang murah baik dalam hal biaya sumber daya yang ada dengan pengetahuan ini atau waktu yang dihabiskan oleh tim Anda saat ini mempelajari bahasa dan platform.

Juga, dengan kesamaan pangsa pasar antara pengguna Android dan iOS, kami tidak dapat mengabaikan kedua sisi dan hanya memiliki aplikasi yang melayani satu OS. Akhirnya, menggunakan Cordova secara signifikan mengurangi biaya perawatan karena sebagian besar kode dibagi di seluruh sistem operasi.

Beberapa tahun yang lalu kami memiliki pelanggan kami datang kepada kami meminta rekomendasi untuk membangun kehadiran di toko aplikasi. Mereka ingin mengambil fungsionalitas situs web yang ada dan membuatnya tersedia melalui aplikasi kepada pelanggan mereka. Mereka menginginkan aplikasi yang tersedia untuk pengguna Android dan iOS, ponsel dan tablet, dan mereka ingin mengirim pemberitahuan ke perangkat pelanggan untuk situasi tertentu. Terakhir, mereka ingin menekan pengeluaran dan menggunakan sebanyak mungkin infrastruktur situs web yang ada.

Kami tahu pada saat itu, bahwa kami tidak akan dapat mengirimkan aplikasi yang diinginkan pelanggan sesuai anggaran mereka jika kami membuat aplikasi asli. Karena itu, kami mencari kerangka kerja untuk membantu mengurangi biaya dan pemeliharaan. Masukkan Cordova.

Cordova adalah kerangka kerja open source untuk membuat aplikasi mobile "hybrid". Keindahan Cordova adalah memungkinkan pengembang untuk meningkatkan pengetahuan mereka tentang pengembangan web untuk membangun aplikasi mobile di sejumlah platform yang berbeda. Dengan menggunakan HTML, css, dan JavaScript standar, pengembang dapat membuat aplikasi untuk ponsel Apple, Android, dan Windows tanpa perlu pengetahuan dari masing-masing platform itu bahasa asli.

Selain itu, Cordova memiliki sejumlah plugin yang memungkinkan pengembang untuk berinteraksi dengan fitur-fitur asli ponsel melalui JavaScript. Dengan menggunakan Cordova, kita dapat menambahkan plugin yang memungkinkan aplikasi kita berinteraksi dengan kamera perangkat, geolokasi, mengirim pemberitahuan, dan banyak fitur lainnya.

Karena Cordova menggunakan HTML, css, dan JavaScript, ada banyak penggunaan kembali kode di antara berbagai platform perangkat. Hal ini menyebabkan lebih sedikit biaya untuk mengembangkan dan memelihara aplikasi di berbagai perangkat, karena mayoritas basis kode adalah sama untuk semua platform. Selain itu, semua kerangka kerja hebat yang membuat pengembang lebih mudah untuk pengembangan situs web akan bekerja di Cordova karena pada dasarnya hanya melayani halaman web pada perangkat. Menggunakan Angular.js untuk Anda situs web yang ada? Ini akan bekerja di Cordova. Suka kekuatan dan fleksibilitasnya dengan JQuery? Ini akan bekerja di Cordova.

Dalam posting blog ini, MasIrfun akan mengarahkan Anda dari awal hingga selesai dalam membuat aplikasi Cordova sederhana yang akan berjalan pada perangkat Android menggunakan Android Studio. Berikut langkah-langkah yang akan dibahas:


  • Memasang Cordova CLI (Command Line Interface)
  • Buat aplikasi kerangka baru menggunakan CLI
  • Instal Android Studio
  • Gunakan Cordova CLI untuk membuat kode platform Android
  • Menggunakan Android Studio untuk membuat dan memuat APK Android (aplikasi Android)
  • Ubah aplikasi kita dan lihat perubahan itu di Telepon kita


Ayo mulai!

Bagian 1: Memasang Cordova CLI (Command Line Interface)


Cordova CLI adalah antarmuka baris perintah yang menyederhanakan proses pembuatan aplikasi Cordova baru pada sistem pilihan Anda. Untuk keperluan entri blog kita akan menginstal CLI pada sistem Windows 8.1. Untuk pengembangan Android, Anda memiliki pilihan untuk menggunakan Windows, Linux, atau Apple.

Anda dapat menemukan panduan platform untuk menginstal CLI di  sini . Karena ini adalah panduan dari awal hingga akhir, MasIrfun akan menguraikan langkah-langkah yang MasIrfun gunakan untuk memuat CLI pada kotak Windows 8.1 MasIrfun.

1.1 Instal Node.js



Kami akan menginstal  Node.js  di sistem kami untuk membantu pemasangan Cordova CLI. Node.js digambarkan sebagai platform yang dibangun di atas runtime JavaScript Chrome untuk dengan mudah membangun aplikasi jaringan yang cepat dan dapat diskalakan. Kami akan menggunakan Node.js karena ia dilengkapi dengan NPM (manajer paket simpul) yang memungkinkan kami untuk menginstal Cordova CLI dengan mudah.

Buka  beranda Node.js  dan klik tombol Instal untuk mulai mengunduh file .msi instalasi node.


Anda sekarang harus memiliki file simpul-v #. ##. # - x64.msi di mana pun unduhan Anda disimpan. Catatan, versi yang MasIrfun unduh adalah v0.12.3 dan ini adalah versi 64 bit karena kotak Windows 8.1 MasIrfun adalah 64 bit. Versi yang Anda unduh mungkin berbeda berdasarkan versi node saat ini, dan sistem tempat Anda mengunduh. Jelajahi direktori tempat file msi diunduh dan klik dua kali file untuk menginstal.

Selama instalasi, pastikan bahwa manajer paket simpul akan diinstal serta opsi tambahkan ke PATH. Mereka harus dipilih untuk menginstal secara default.


Setelah Node.js selesai menginstal, kami siap untuk menginstal Cordova CLI

1.2 Pasang Cordova CLI


Buka prompt perintah dengan mengklik tombol start windows dan mengetik "cmd". Anda akan melihat opsi untuk Command prompt dan untuk command prompt Node.js pilih karena keduanya akan berfungsi. Di jendela command prompt Anda perlu mengetik.

npm install -g cordova

Ini akan menginstal versi terbaru Cordova CLI secara global (-g). Instalasi hanya perlu satu menit atau lebih. Setelah instalasi, Anda harus dapat mengetik perintah berikut untuk melihat versi CLI yang telah diinstal.

cordova -v

Anda harus melihat sesuatu yang mirip dengan yang berikut ini dalam kasus MasIrfun menunjukkan saya memiliki versi 5.0.0 dari CLI diinstal .:


Kami sekarang siap menggunakan Cordova CLI untuk membuat aplikasi baru.

Bagian 2: Membuat aplikasi


Salah satu manfaat utama Cordova adalah Anda akan menggunakan HTML, css, dan Javascript untuk membuat aplikasi Anda. Karena kami menggunakan teknologi standar, hampir semua kode yang kami kerjakan akan dibagikan di semua platform perangkat yang berbeda. Mari kita gunakan CLI untuk membuat aplikasi sederhana kami.

2.1 Membuat aplikasi baru menggunakan CLI


Bagian dari keindahan menggunakan CLI untuk membuat aplikasi Anda adalah bahwa itu akan melakukan sebagian besar pekerjaan untuk Anda. Untuk contoh ini, MasIrfun membuat direktori di file explorer c: \ HelloCordova tempat MasIrfun akan membuat aplikasi. Pada prompt perintah yang sama, Anda harus pindah ke direktori tempat Anda ingin aplikasi baru dibuat.

cd c:\HelloCordova

Di dunia nyata, Anda ingin membuat direktori ini di mana Anda menyimpan kendali sumber Anda, atau membuat folder dan mengikat repositori Anda ke direktori ini.

Kami sekarang siap untuk membuat aplikasi. Untuk contoh ini, kita akan membuat program sederhana bernama HelloWorld yang akan dibangun di direktori bernama Hello. Di prompt perintah Anda, ketikkan perintah berikut:

cordova create hello com.example.hello HelloWorld

Perintah di atas memberi tahu Cordova CLI untuk membuat aplikasi baru bernama HelloWorld dalam direktori bernama Hello. Com.example.hello hanyalah pengidentifikasi unik untuk aplikasi yang menggunakan notasi gaya domain terbalik. Jika Anda membuka file explorer ke direktori Hello baru, Anda akan melihat sesuatu seperti ini:


Lihatlah di sub folder www. Anda akan melihat folder yang terletak di sini untuk file css, gambar (img) dan JavaScript (js). Selain itu Anda akan melihat file index.html. Ini adalah file yang pertama kali dijalankan ketika aplikasi dimuat pada perangkat seluler. Saat membuat aplikasi Anda sendiri untuk Cordova, Anda akan menimpa file yang ada dengan Anda sendiri. Anda tidak harus menjaga struktur folder yang sama seperti yang ada di folder www. Perlu diketahui bahwa file index.html Anda harus merujuk css, gambar, dan JavaScript pendukung berdasarkan struktur folder Anda. Lihatlah file index.html default di editor teks favorit Anda untuk mendapatkan ide bagaimana hal ini dilakukan. Perhatikan bahwa persis sama dengan yang akan Anda lakukan jika membangun situs web Anda sendiri. Kami sekarang siap untuk menginstal Android Studio.

Bagian 3: Memasang Android Studio


Android Studio adalah lingkungan pengembangan baru Google untuk membangun Aplikasi Android. Ini adalah rilis pertama sebagai versi 1.0 pada Desember 2014. Sebelum Android Studios diperkenalkan, sudah umum untuk menggunakan Eclipse dan bundel ADT untuk mengembangkan aplikasi Android. Langkah pertama kami dalam menjalankan dan menjalankan Android Studio adalah memastikan kami telah menginstal Java Development Kit di kotak Windows kami.

3.1 Pastikan Java Development Kit (JDK) diinstal


Prasyarat untuk Android Studio adalah Java Development Kit. Diperlukan JDK 6 atau lebih tinggi. Jika Anda berencana untuk mengembangkan Andriod versi 5.0 atau lebih tinggi maka Anda memerlukan setidaknya JDK versi 7. Untuk mengunduh JDK versi terbaru, kunjungi di  sini . Di halaman ini Anda akan melihat tombol unduh Java. Klik tombol itu dan Anda akan dibawa ke halaman lain yang akan mencantumkan opsi unduhan JDK yang tersedia. Pilih versi untuk selera windows Anda. Dalam kasus MasIrfun, MasIrfun menggunakan windows 8.1 64bit jadi MasIrfun akan mengunduh versi Windows x64. Anda harus menerima perjanjian lisensi sebelum dapat mengunduh. Setelah mengunduh file exe JDK kami siap untuk menginstal.

3.2 Memasang JDK


Jelajahi direktori unduhan Anda dan klik file jdk- [versi] -windows-x [bit] .exe untuk menginstal. Memilih semua nilai default harus baik-baik saja, kecuali Anda mungkin ingin menginstal direktori yang berbeda.


Kami sekarang siap mengunduh Android Studio.

3.3 Mengunduh Android Studio


Versi terbaru Android Studio dapat ditemukan di  sini . Anda harus mengklik tombol hijau Unduh Android Studio, menerima Syarat dan Ketentuan, lalu klik biru Unduh Android Studio untuk tombol Windows. Unduhannya kurang dari 900MB.


Setelah mengunduh exe android-studio-bundle, kami siap untuk menginstal.

3.4 Memasang Android Studio

Arahkan ke direktori unduhan Anda dan klik dua kali file android-studio-bundle- [versi] -windows.exe. Ini akan memunculkan panduan instalasi yang akan memandu Anda melalui proses instalasi. MasIrfun sarankan pergi dengan pilihan default pada semuanya, kecuali jika Anda ingin mengubah lokasi pemasangan.


Ketika instalasi selesai, layar final wizard akan memberikan opsi untuk meluncurkan Andriod Studio. Tunggu sebentar untuk saat ini. Pertama-tama kita perlu membuat versi platform Android dari aplikasi HelloWorld Cordova kita.


Bagian 4: Membuat kode platform Andriod


Salah satu hal hebat tentang Cordova adalah kemampuannya untuk membuat kode yang diperlukan untuk berjalan pada salah satu platform yang didukungnya. Pengembang tidak perlu membuat kode proyek untuk memuat ke Android Studio, mereka juga tidak perlu tahu cara membuat proyek xCode untuk membuat aplikasi iOS. Cordova CLI memiliki kemampuan untuk melakukan pekerjaan ini untuk Anda.

4.1 Gunakan Cordova CLI untuk membuat kode Platform Android


Sekarang setelah Android Studio diinstal, kami siap menggunakan CLI untuk membuat kode platform Android Anda. Buka prompt perintah dan pindah ke direktori tempat aplikasi HelloWorld baru dibuat. Sebelum kita dapat memuat kode ke Android Studio, pertama-tama kita harus membuat aplikasi platform Android menggunakan Cordova CLI. Ketik mengikuti ke command prompt untuk membuat kode platform Android.

cordova platform add android

Ini akan membuat direktori baru di folder platform proyek HelloWorld. Jika Anda membuka file explorer dan dan menggali ke dalam folder android di direktori platform Anda akan melihat yang berikut ini:


Jika Anda mempelajari aset dan folder www, Anda akan melihat kode asli termasuk folder index.html, css, img, dan js. Ketika kita memuat kode platform ini ke Android studio, ini akan menjadi apa yang akan berjalan ketika aplikasi dimuat. Kami sekarang siap untuk melakukan hal itu.

Bagian 5: Menggunakan Android Studio untuk membuat dan memuat APK Android


Android Studio sekarang menjadi IDE resmi untuk pengembangan Android. Kami akan menggunakan Android Studio untuk menghasilkan APK untuk aplikasi Cordova HelloWorld dan kemudian memuatnya ke ponsel Android yang kami sambungkan ke komputer kami.

5.1 Memulai Android Studio untuk pertama kalinya

Langkah pertama kami adalah menjalankan Android Studio. Di windows 8.1 pergi ke layar mulai dan ketik "Android Studio" dan pilih Android Studio untuk memulai aplikasi. Anda akan melihat layar pemuatan seperti di bawah ini:



Setelah aplikasi dimuat, Anda akan melihat dialog yang muncul berjudul "Instalasi Lengkap". Anda memiliki pilihan untuk mengimpor pengaturan yang ada dari pemasangan sebelumnya, atau untuk tidak mengimpor karena tidak ada versi Studio yang dimuat sebelumnya. Karena MasIrfun belum memuat Android Studio sebelumnya, MasIrfun akan memilih untuk tidak mengimpor apa pun dan klik OK.


Anda akan kembali melihat layar srart untuk Android Studio dengan mengisi bar pemuatan. Anda mungkin perlu mengizinkan akses ke executable untuk Windows Firewall. Anda kemudian akan diminta untuk memilih tema UI untuk Android Studio. Pilih mana yang membuat Anda bahagia dan klik berikutnya.


Android Studio kemudian akan melalui proses mengunduh beberapa komponen dan membuat perangkat virtual. Setelah ini selesai, Anda harus mengklik tombol finish di wizard, dan Anda akan disambut dengan dialog berjudul "Selamat Datang di Android Studio" seperti yang ditunjukkan di bawah ini:


Kami sekarang siap memuat proyek ke Android Studio

5.2 Memuat proyek ke Android Studio


Di sini kami memiliki beberapa opsi untuk dipilih. Dalam kasus kami, kami sudah memiliki proyek yang dibuat untuk kami oleh Cordova CLI di direktori platform / android kami. Silakan dan pilih opsi untuk "Impor proyek (Eclipse ADT, Gradle, dll.)".

Anda kemudian akan disambut oleh dialog di mana Anda harus memilih lokasi proyek untuk diimpor. Anda harus memilih kode platform android yang dihasilkan CLI yang dalam kasus MasIrfun terletak di "C: \ HelloCordova \ hello \ platform \ android". Pilih folder yang benar dan klik OK.

Segera setelah Anda akan melihat dialog lain berjudul "Gradle Sync". Klik OK untuk memungkinkan bungkus Graddle dikonfigurasikan untuk Anda. Android Studio akan terus bekerja sebentar (mungkin perlu beberapa menit) dan akhirnya Andriod Studio akan memuat proyek ini. Anda akan melihat sesuatu yang mirip seperti di bawah ini:


Buka folder android yang ada di bawah folder CordovaLib. Anda akan melihat set folder lain termasuk aset. Buka itu dan Anda akan melihat folder www. Buka folder itu dan Anda akan melihat folder familair index.html, css, img, dan js.

5.3 Membangun proyek menjadi Android Studio


Kami sekarang siap untuk mencoba membangun proyek. Klik tombol putar hijau untuk memulai pembuatan. Anda akhirnya akan melihat dailog Choose Device. Jika Anda tidak memiliki ponsel Android, maka Anda harus memilih emulator untuk menjalankan proyek. Dalam kasus MasIrfun, MasIrfun memiliki ponsel Android yang ingin MasIrfun uji. Hubungkan ponsel Anda ke mesin windows melalui kabel pengisian USB. Catatan, Anda harus mengaktifkan mode pengembang di ponsel Anda. Setelah tersambung ke ponsel, Anda harus mengizinkan USB debugging, dan perangkat Anda akan ditampilkan di dialog Perangkat. Pilih perangkat Anda dan Anda akan segera melihat yang berikut:


Selamat! Anda baru saja membuat aplikasi Cordova dan menjalankannya di perangkat Android Anda!

Langkah kami selanjutnya adalah membuat sedikit modifikasi pada aplikasi Cordova kami dan berjalan melalui proses memasukkan perubahan itu ke Android Studio.

Bagian 6: Membuat perubahan dan membangun kembali platform Android
Untuk merasakan bagaimana proses pengembangan bekerja untuk aplikasi Cordova, mari kita buat perubahan sederhana dan lihat perubahan itu di Android Studio, lalu di ponsel kita.

6.1 Memodifikasi file index.html


Saat membuat perubahan pada kode HTML kami (atau css / Javascript), kami ingin melakukannya di folder aplikasi induk kami. Anda mungkin berpikir untuk melakukan perubahan di folder platform / android tetapi ini tidak terjadi. Bayangkan jika kita memiliki lebih dari satu platform, misalnya Android, iOS, dan Windows Phone. Jika kami melakukan perubahan di platform / folder android, maka perubahan itu tidak akan terlihat di platform iOS dan Windows Phone.

Jadi mari kita buat sedikit modifikasi pada file index.html kita di folder induk Corodova yang dalam kasus MasIrfun terletak di C: \ HelloCordova \ hello \ www. Buka file index.html di editor teks Anda dan cari teks "Perangkat Siap". Ketika Anda menemukan itu, tambahkan "untuk Pergi!" Setelah sehingga Anda berakhir dengan "Perangkat Siap untuk Pergi!".

Kami sekarang siap untuk mempersiapkan Platform Android kami

6.2 Mendapatkan perubahan pada kode platform Android


Untuk melihat perubahan kami pada folder parent index.html di platform platform / android kami, kami perlu menggunakan CLI untuk menyiapkan platform Android. Buka prompt perintah dan pindah ke folder root aplikasi Hello Anda. Dalam ca MasIrfun, itu adalah C: \ HelloWorld \ hello. Di prompt perintah, ketik berikut ini:

cordova prepare android

Ini akan menyalin perubahan kami ke direktori platform / android, yang sekarang akan ditampilkan di Android Studio kami. Satu hal yang perlu diperhatikan. Kami hanya berurusan dengan platform Android di entri blog ini. Di dunia nyata kita mungkin juga berurusan dengan iOS dan Windows phone. Anda tentu bisa mengeluarkan perintah persiapan untuk setiap platform individu, tetapi cara yang lebih mudah adalah dengan mengetikkan yang berikut:

cordova prepare

Karena tidak ada platform yang ditentukan, Cordova CLI akan menyiapkan semua platform yang telah ditambahkan melalui CLI. Dalam kasus kami itu hanya Android. Jika kita memiliki platform lain, itu akan mempersiapkan mereka juga. Mempersiapkan cukup menyalin isi direktori induk dan beberapa file platform spesifik ke masing-masing platform yang telah kami tambahkan.

Kami sekarang siap untuk membangun kembali perubahan kami di Android Studio

6.3 Membangun proyek di Android Studio


Buka Android studio dan lihat di folder assets / www untuk file index.html. Klik dua kali file itu, dan itu akan ditampilkan di editor Android Studio. Gulirkan sedikit ke bawah, dan Anda akan melihat yang berikut:


Perhatikan MasIrfun telah menyoroti perubahan yang kami buat. Tekan tombol putar hijau di Android Studio untuk membangun kembali proyek. Ketika dialog pilih perangkat muncul, pilih lagi telepon Anda dan Anda akan melihat yang berikut:


Anda sekarang telah berjalan melalui proses mempersiapkan dan membangun kembali aplikasi Cordova HelloWorld.

Bagian 7: Beberapa pemikiran terakhir


Dalam entri blog ini, kami telah menelusuri seluruh proses penggunaan Cordova untuk membuat aplikasi Android sederhana di Android Studio. Kami juga melihat untuk membuat perubahan pada aplikasi HelloWorld kami dan melihat perubahan itu di aplikasi kami. Ini baru saja gambaran singkat dari proses. MasIrfun sarankan Anda meluangkan waktu untuk memeriksa apa yang ditawarkan Cordova dengan melihat dokumentasi yang tersedia. Berikut ini tautan ke dokumentasi untuk membantu Anda memulai.

Artikel Terkait