Mudahnya Membuat Aplikasi Android Dengan Apache Cordova

Membuat Aplikasi Android - Mengembangkan untuk setiap platform seluler bisa menjadi tugas yang melelahkan, terutama jika sumber daya terbatas. Di sinilah Apache Cordova berguna dengan menyediakan cara untuk mengembangkan aplikasi seluler menggunakan teknologi web standar - HTML5, CSS3, dan JavaScript. 

Artikel ini mengeksplorasi bagaimana seseorang dapat memulai dengan Apache Cordova dan membangun aplikasi seluler yang ditargetkan pada berbagai perangkat seluler.

Aplikasi seluler menjamur di mana-mana, mulai dari smartphone dan tablet, hingga smartwatch, dan segera ditemukan di perangkat yang dapat dikenakan lainnya juga. Namun, mengembangkan untuk setiap platform seluler terpisah dapat menjadi tugas yang melelahkan, terutama jika sumber daya Anda terbatas, atau jika Anda adalah pengembang tunggal, 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, API sumber terbuka untuk mengakses sumber daya seluler asli, dengan tujuan memungkinkan pengembang 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 karena masalah kinerja, atau kurangnya metode untuk mengakses perangkat keras tertentu. 

Sampai pada tahun 2011, perusahaan Adobe mengakuisisi Nitobi dan menyumbangkan core / inti open-source ke Apache Software Foundation, sehingga mengubah namanya menjadi Apache Cordova

Kemampuan Apache Cordova

Intinya, Cordova tidak memiliki batasan terkait dengan aplikasi yang dikembangkan secara native. Apa yang Anda dapatkan dengan Cordova hanyalah API JavaScript, yang berfungsi sebagai pembungkus 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 sama dengan tampilan web yang digunakan oleh sistem operasi asli. Di iOS, ini adalah Objective-C default UIWebViewatau WKWebViewkelas khusus; di Android, ini adalah android.webkit.WebView.

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

Akhirnya, aplikasi Cordova dapat diinstall layaknya aplikasi native. Ini berarti 1 kode Anda dapat digunakan untuk multiplatform seperti iOS menghasilkan file IPA, untuk Android file APK, dan membuat untuk Windows Phone menghasilkan file XAP. Mungkin saja pengguna Anda tidak menyadari bahwa mereka tidak menggunakan aplikasi versi native.

Dengan gambaran cara kerja di atas, tentu performa yang dihasilkan tidak secepat aplikasi Native, karena melewati beberapa tahapan supaya aplikasi kita bisa membaca perintah ke device native kita.

Alur Kerja Pengembangan Aplikasi Apache Cordova

Ada dua metode dasar yang dapat Anda gunakan saat mengembangkan dengan Cordova:

1.Jika niat Anda adalah menerapkan aplikasi ke sebanyak mungkin platform, dengan sedikit atau tanpa pengembangan aplikasi khusus platform tertentu, 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 berbagai platform. Ini adalah jalur pengembangan yang lebih umum digunakan.

2. 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 men-tweak dan memodifikasi kode Anda pada tingkat yang lebih rendah dengan menggabungkan komponen asli dengan komponen Cordova. Meskipun Anda dapat menggunakan pendekatan ini untuk pengembangan lintas platform, prosesnya akan lebih lama dan 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 1 platform, Anda tidak akan dapat beralih ke pengembangan lintas platform karena CLI Cordova akan menimpa penyesuaian Anda setelah Anda menjalankan proses build aplikasi.

Prasyarat dan Instalasi Cordova

Sebelum menginstal dan menjalankan apa pun yang terkait dengan Cordova, Anda harus menginstal SDK untuk setiap platform tempat Anda ingin membuat aplikasi. Kami akan fokus pada platform Android di artikel ini; namun, proses yang melibatkan platform lain serupa.

Anda harus mengunduh SDK Android yang ditemukan di sini . Untuk Windows, SDK hadir sebagai installer, sedangkan untuk Linux dan OSX hadir sebagai arsip (.zip) yang dapat diekstraksi dengan mudah. Setelah mengekstraksi/menginstal paket, Anda perlu menambahkan direktori sdk/tools ke variabel Anda. Variabel tersebut digunakan oleh Cordova untuk mencari binari yang diperlukan untuk proses pembangunan. Jika Anda belum menginstal Java, Anda harus melanjutkan dan menginstal JDK bersama Ant. dan harus disetel ke folder bin JDK dan Ant, dan setelah menginstal Android SDK, setel variabel ke semua lokasi di ketiga variabel juga harus ada di variabel Anda :

1. JAVA_HOME

2. ANDROID_SDK_ROOT

3. sdk/tools/bin

4. sdk/platform-tools

5. sdk/emulator (Untuk kebutuhan testing aplikasi melalui emulator)

6. gradle-x.x/bin

Kita akan mempraktekkannya satu per satu

Cordova CLI bergantung pada Node.js dan 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 mendownload dependensi yang diperlukan.

1. Platform Windows : unduh melalui halaman nodejs.org dan git-scm.com

2. Platform Linux : apt install nodejs git 

3. Platform OS X : brew install nodejs git 

Setelah 2 aplikasi tersebut terinstall, silahkan melakukan instalasi aplikasi Cordova-CLI menggunakan Command Prompt (cmd) atau terminal sesuai OS Anda.

“npm install -g cordova”

Selanjutnya sistem akan secara otomatis memasangkan aplikasi cordova ke dalam sistem Anda secara global, nantinya Anda dapat membuat aplikasi cordova diberbagai lokasi atau tempat.

Sebagai peringkas saja, berikut adalah aplikasi atau komponen yang harus disiapkan sebelum memulai pembuatan aplikasi cordova :

1. Android SDK, download di https://developer.android.com/studio pilih Command line tools only

2. Gradle, di sini versi yang kami gunakan Gradle v7.3, silahkan download di https://gradle.org/releases/

3. Java JDK v8 untuk cordova versi < 10, JDK v11 untuk cordova versi >= 10 

4. Nodejs

5. Git

Setup Environment Cordova 

Sebelum mulai membangun aplikasi cordova, Anda perlu melakukan setup environment variabel agar Cordova dapat bekerja dengan baik. Untuk artikel ini, admin sudah pernah instalasi environment pada OS Windows dan MacOs X, OS Linux sepertinya tidak jauh berbeda dengan instalasi environment di MacOS X

Instalasi Cordova di Platform Windows :

1. Ekstract file Gradle yang telah kalian download ke dalam suatu folder khusus. Misal di Local Disk C, tidak ada aturan harus difolder apa intinya.

2. Langkah selanjutnya adalah instalasi Android SDK yang telah kalian download, caranya hampir sama dengan ekstrak file gradle di atas, rename folder commandline-sdk yang telah kalian ekstrak menjadi AndroidSdk untuk memudahkan penulisan di Environtment Variabel

3. Pengaturan Environment Variabel :

a) Buka Windows Explorer kemudian klik kanan This PC - Pilih Properties

b) Kemudian pilih Advanced System Setting di sebelah kiri

c) Pilih tab Advance kemudian klik tab Environment Variables  

4. Langkah selanjutnya adalah membuat variabel-variabel komponen Mobile Development Framework (MDF) untuk ditulis pada daftar Environment Variables.

5. Jika seluruh langkah telah dilakukan, silahkan tutup command prompt Anda dan restart windows

6. Setelah restart, silahkan cek masing-masing command line dengan perintah berikut :

a) Buka CMD ketikkan cordova -v untuk memeriksan versi Apache Cordova yang terinstall. Jika mengembalikan versi maka Apache Cordova terinstall dengan baik

b) Ketikkan javac -version untuk memeriksa versi JDK yang diinstal. Jika mengembalikan versi maka JDK terinstall dengan baik.

7. Proses instalasi selesai.

Instalasi Cordova di Platform OS X:

Untuk instalasi Cordova di MacOs memiliki perbedaan dengan proses instalasi di Windows, akan tetapi komponen pendukung tetaplah sama seperti di Windows. Diperlukan JDK, Android SDK, Gradle, Nodejs dan GIT.

1. Install GIT terlebih dahulu dengan menggunakan perintah “brew install git” pada terminal 

2. Selanjutnya, install nodejs dengan perintah “brew install nodejs”

3. Lalu lakukan instalasi cordova seperti halnya pada OS Windows dengan perintah “npm install -g cordova”

4. Silahkan lakukan instalasi JDK v11 karena cordova yang digunakan saat ini versinya >= 10 dengan perintah “brew install openjdk@11”

5. Secara default, jdk biasanya terpasang di folder /opt/openjdk@11. Selanjutnya kita sinkronkan ke folder /Library/Java/JavaVirtualMachines/ dengan perintah berikut 

“ln -sfn $(brew --prefix)/opt/openjdk@11/libexec/openjdk.jdk /Library/Java/JavaV irtualMachines/openjdk-11.jdk” 

6. Download Android SDK pada link https://developer.android.com/studio/ dan pilih pada bagian Command Line Tools Only jika Anda tidak menginstall android studio. Pada bagian ini, saya melakukan instalasi melalui android studio. Ada sedikit perbedaan terkait path atau folder sdk

a) Jika menggunakan android studio, maka secara default folder android sdk terletak di : /Users/userMac/Library/Android/Sdk 

b) Jika instalasi secara manual melalui file zip Command Line Only, Anda bebas menentukan lokasi ekstrak file zip tersebut.

7. Kemudian download file gradle pada halaman https://gradle.org/releases/ lalu ekstrak pada folder yang telah Anda tentukan sebelumnya. Di sini saya ekstrak di folder /Users/userMac/Documents/gradle-7.3/

8. Langkah selanjutnya, buat file ~/.bash_profile jika belum ada silahkan buat sendiri dengan perintah “nano ~/.bash_profile”

9. Kemudian definisikan masing-masing variabel MDF seperti berikut :

a) export JAVA_HOME="/opt/homebrew/Cellar/openjdk@11/11.0.16.1_1/libexec/openjdk.jdk/Contents/Home"

b) export ANDROID_SDK_ROOT="/Users/userMac/Library/Android/sdk"

c) export PATH=${PATH}:/Users/userMac/Library/Android/sdk/tools: /Users/userMac/Library/Android/sdk/tools/bin: /Users/userMac/Library/Android/sdk/platform-tools: /Users/userMac/Library/Android/sdk/emulator

Di sini (OS X) menggunakan titik dua : tidak seperti windows menggunakan titik koma ; sebagai pemisah pendefinisian masing-masing Mobile Development Framework. Untuk /Users/userMac/Library/Android/sdk/emulator sifatnya opsional, jika Anda memiliki emulator yang terpasang, silahkan tambahkan informasi tersebut

d) export PATH=$PATH:/Users/userMac/Documents/gradle-7.3/bin

10. Eksekusi perintah berikut ini untuk melakukan validasi PATH yang telah kita tuliskan di atas “source ~/.bash_profile”. Jika tidak ada informasi yang dikembalikan, berarti konfigurasi yang telah dilakukan telah sesuai.

11. Selesai

Pembuatan project cordova

Asalkan Anda telah berhasil menginstal Cordova, seharusnya Anda telah memiliki akses ke utilitas baris perintah Cordova. Buka terminal atau Command Prompt Anda, dan navigasikan ke direktori tempat Anda ingin membuat proyek Cordova pertama Anda. Untuk membuat aplikasi cordova, ketikkan perintah berikut: 

“cordova create appku com.appku AppKu”

Perintah di atas terdiri dari perintah cordova, diikuti oleh subperintah create. Subperintah dipanggil dengan tiga parameter tambahan: Folder tempat aplikasi akan ditempatkan, namespace aplikasi, dan nama tampilannya. Ini menghasilkan folder dengan struktur berikut:

appku/

|--- hooks/

|--- platforms/

|--- plugins/

|--- www/

`-- config.xml

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

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

Pada titik ini Anda juga dapat membuka file config.xml dan mengubah metadata untuk aplikasi Anda, seperti pembuat dan deskripsi, lihat selengkapnya di https://cordova.apache.org/docs/en/11.x/config_ref/index.html 

1. Tambahkan platform pertama Anda menggunakan: cordova platform add android 

2. Jika nanti Anda berubah pikiran, Anda dapat menghapus platform dengan perintah : 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 menggandakan folder www di dalamnya. Misalnya, Anda ingin menyesuaikan aplikasi untuk Android, Anda dapat memodifikasi file platforms/android/assets/www. 

Namun, ingat jika Anda membangun kembali aplikasi Anda dengan CLI (digunakan untuk pengembangan lintas platform), Cordova akan menimpa perubahan yang telah Anda buat untuk setiap platform.

3. Jika Anda ingin menambahkan plugin untuk mengakses fitur dari hardware platform seluler, silahkan tulis perintah cordova plugin add cordova-plugin-camera. detail lengkap bisa Anda lihat pada link https://codova.apache.org/plugins/

4. Jika ingin build aplikasi, bisa menggunakan perintah cordova build android, atau melakukan build kepada seluruh platform yang digunakan cukup menggunakan perintah cordova build, nantinya akan menghasilkan file .apk (android), .ipa (iPhone) dan .xap (Windows Phone)

5. Jika ingin melakukan simulasi dengan virtual device, pastikan virtual device Anda telah terbuka, contoh di sini menggunakan AVD (Android Virtual Device) dengan perintah cordova emulate android. Pastikan konfigurasi pada file ~/bash_profile telah Anda tambahkan /Users/userMac/Library/Android/sdk/emulator supaya cordova dapat terkoneksi dengan emulator Android Anda

6. Untuk melihat perintah cordova lainnya, bisa Anda ketikkan perintah cordova help 

Modifikasi Tampilan Cordova

Mungkin tidak sedikit yang bertanya, framework apa yang digunakan untuk membuat aplikasi mobile hybrid di sini?, ada beragam jawaban yang bisa diberikan misalnya bisa menggunakan ionic, framework7, Onsen UI dan lain sebagainya.

Pada artikel berikutnya mungkin akan kita bahas salah satu dari framework di atas dalam pembuatan aplikasi android menggunakan HTML5, CSS3 dan Javascript