Membuat Aplikasi Android Berbasis HTML5 dengan Cordova

Persiapan untuk Belajar Cordova

Ada beberapa alat yang harus kamu persiapkan untuk memulai belajar Cordova.

Apa saja itu?

1. Teks Editor dan Web Browser

Teks editor akan kita gunakan untuk menulis kode aplikasi dan web browser akan digunakan untuk melihat hasilnya.

Kamu bisa gunakan teks editor dan web browser apapun.

Rekomendasi saya:

• Untuk teks editor gunakan VS Code
• Untuk web browser gunakan Google Chrome atau Firefox.

2. Instal Nodejs dan NPM

Pastikan di komputermu sudah tersintal Nodejs dan NPM, karena ini akan kita gunakan untuk menginstal Cordova.

Silahkan instal nodejs terlebih dahulu.

Caranya, ketik perintah berikut di terminal:

sudo apt install -y nodejs

Untuk pengguna Windows, silahkan download Nodejs di website resminya lalu tinggal diinstal saja.

Setelah itu coba periksa versi Nodejs dan NPM yang terinstal.

NPM akan ikut terinsal secara otomatis saat kita menginstal Nodejs. Jadi kamu tidak perlu mengisntalnya.

3. Instal Cordova

Setelah kamu menginstal Nodejs, sekarang kita harus menginstal Cordova.

Caranya, ketik perintah berikut di terminal atau CMD.

[sudo] npm install -g cordova

Gunakan sudo jika kamu di Linux dan menginstal Nodejs pada root

Tungulah sampai prosesnya selesai.

Setelah itu, periksa versi yang terinstal dengan perintah:

cordova --version

Maka hasilnya:

Di komputer saya sudah terinstal Codova versi 8.1.2.

Jika kamu ingin update ke versi terbaru, cukup ketik perintah berikut:

[sudo] npm update -g cordova

Atau bisa juga menginstal versi tertentu secara spesifik seperti ini:

sudo npm install -g cordova@8.1.2

4. Instal JDK

JDK (Java Development Kit) kita butuhkan untuk membuat aplikasi Android.

Silahkan install JDK dengan perintah berikut:

sudo apt-get install -y openjdk-8-jdk

Tunggulah sampai prosesnya selesai.

Setelah itu ketik perintah..

java -version

..untuk memeriksa versi Java atau JDK yang terinstal.

Pada komputer saya, sudah terinstal JDK versi 8.

Selanjutnya, kita harus membuat variabel environtment bernama JAVA_HOME dengan isi alamat path dari JDK yang sudah terinstal.

Biasanya akan terinstal di C:\Program Files dan di Linux akan terinstal di/usr/lib/jvm/java-8-openjdk-amd64/.

Silahkan buka file .bashrc..

nano ~/.bashrc

Kemudian tambahkan kode berikut:

export JAVA_HOME=/usr/lib/jvm/java-8-openjdk-amd64/
export PATH=$PATH:$JAVA_HOME/bin/

5. Instal Gradle

Gradle akan digunakan untuk build aplikasi Android menjadi APK.

Gradle biasanya akan ditanam (embed) juga di dalam project.

Tapi untuk jaga-jaga, kamu bisa menginstalnya dengan perintah:

sudo apt install gradle

Untuk gradle versi terbaru, kamu bisa instal dengan SDKman.

6. Install Android SDK

Android SDK dibutuhkan untuk membuat aplikasi Android.

Android SDK menyediakan tools dan api yang bisa dimanfaatkan dalam pembuatan aplikasi.

Cara instal Android SDK, silahkan baca di: “Cara Install Android SDK di Linux”

7. Install Android Studio

Android Studio dibutuhkan untuk membuat emulator. Karena Android SDK versi terbaru sudah tidak mendukung pembuatan emulator dari luar Android Studio.

Bisa saja sih sebenarnya menggunakan Command Line, tapi tetap nanti akan butuh Android Studio juga.

Karena itu, install saja Android Studio-nya.. meskipun kita tidak akan membukanya.

Cara install Android Studio, silahkan baca di:

• Cara Install Android Studio di Linux

Membuat Aplikasi Cordova Pertama

Semua peralatan kini sudah siap.

Berikutnya kita bisa mulai membuat aplikasi.

Mari kita buat proyek baru, silahkan ketik perintah berikut:

cordova create AplikasiCordova

Perintah ini akan membuat folder baru bernama AplikasiCordova yang berisi source code dari aplikasi.

Sekarang coba buka folder tersebut melalui teks editor Visual Studio Code.

Penjelasan tentang file dan folder aplikasi Cordova:

• 📁 hooks adalah folder yang berisi script untuk dieksekusi saat kita menjalankan perintah cordova.
• 📁 node_modules berisi library atau modul Nodejs.
• 📁 platform berisi source code untuk platform seperti android, ios, dan web;
• 📁 plugins berisi plugin yang dibutuhkan untuk akses API;
• 📁 www berisi source code dari aplikasi, di sini lah kita akan menulis kode.
• 📄 config.xml berisi konfigurasi dari aplikasi
• 📄 package-lock.json berisi informasi versi modul nodejs yang dibutuhkan
• 📄 package.json berisi informasi proyek dan versi modul nodejs yang dibutuhkan

Run di Browser

Sekarang coba buka terminal dari VS Code, tekan Ctrl+` (backtik), kemudian ketik perintah berikut:

# menambahkan platform browser
cordova platform add browser
# menjalankan aplikasi di browser
cordova run browser

Tunggulah sampai browsr terbuka…

Hasilnya:

Kerenn 😍

Membuat APK dari Aplikasi Cordova

Karena JDK, Gradle, dan Android SDK sudah kita siapkan.. maka kita bisa membuat APK dan juga menjalankannya di emulator.

Tapi sebelum itu kita harus tambahkan dulu platformnya.

Silahkan ketik perintah:

cordova platform add android

Kemudian, jika ingin menjalankan di emulator ketik perintah:

cordova run android

Catatan: Pastikan kamu sudah membuat android emulator di AVD manager atau bisa juga menggunakan HP fisik.

Maka hasilnya:

Lalu jika ingin membuat file APK-nya, kita bisa ketik:

cordova build android --release

Atau jika ingin buat APK untuk dipublish ke Playstore, ketik:

cordova build android --release -- --keystore="..\android.keystore" --storePassword=android --alias=mykey

Maka Hasilnya:

Oh iya, file APK ini bisa kamu temukan di dalam folder 📁 platforms/android/app/build/aoutputs/apk/.