Mudah Membuat Aplikasi Mobile Tanpa Belajar Bahasa Pemrograman

Sekarang jamannya mobile. Apapun harus bisa diakses di mobile. Website sekarang harus mobile-friendly kalau mau dapat ranking bagus di Google. Sebagian besar aplikasi desktop sudah ada versi mobile-nya. Pokoknya kalau mau bersaing ya harus bisa diakses di mobile.

Pertumbuhan smartphone begitu besar akhir-akhir ini. Begitu pula dengan sistem operasinya. Para developer sistem operasi mobile saling berlomba-lomba membuat sistem operasi yang bagus dan manarik bagi pengguna. Ada begitu banyak sistem operasi mobile yang ada saat ini, mulai dari Android, iOS, Blackberry, Windows Phone, Ubuntu Phone, Firefox OS, Tizen, Sailfish OS, dan masih banyak lainnya.

Kebayang ga susahnya kalau kita mau membuat aplikasi yang bisa dijalankan di semua sistem operasi tersebut? Harus belajar satu per satu bahasa pemrograman. Kira-kira sanggup ga ya? Kalau saya sih ogah, hehehe… Dijamin mumet bin ruwet deh.

Solusi

Tapi tenang saja Sob, ada solusinya kok. Kita ga harus belajar satu per satu bahasa pemrograman untuk bisa membuat aplikasi mobile yang bisa berjalan di beberapa mobile OS. Cukup dengan satu bahasa pemrograman saja Sobat sudah bisa membuat aplikasi untuk Android, iOS, dan mobile OS lainnya. Solusinya adalah menggunakan PhoneGap.

Apa itu PhoneGap?

PhoneGap adalah sebuah framework yang open source (kode sumber terbuka) untuk membuat aplikasi mobile multi platform dengan cepat menggunakan teknologi HTML5, CSS dan Javascript. Dengan kata lain kita bisa membuat aplikasi Android, iOS, Blackberry, Windows Phone, dll dengan mudah tanpa harus menguasai semua bahasa pemrograman yang digunakan oleh masing-masing OS. Cukup dengan modal bisa pemrograman HTML, CSS dan Javascript kita sudah bisa membuat aplikasi untuk semua device tersebut. Mudah bukan? Ya pastinya lebih mudahlah..

Untuk versi terbaru saat ini, PhoneGap hanya mendukung OS :

• Android
• iOS
• Blackberry
• Windows Phone 8
• Ubuntu
• Firefox OS

Cara install PhoneGap

PhoneGap tersedia dalam 2 model, aplikasi Desktop dan CLI (Command-Line Install). PhoneGap Desktop App dan CLI ada perbedaan di sisi tampilan. PhoneGap CLI sesuai namanya semua proses dilakukan dengan perintah Command-Line, sedangkan PhoneGap Desktop App kita tinggal klik-klik saja karena memiliki GUI (Graphical User Interface). Selain perbedaan tersebut, PhoneGap CLI memiliki fitur yang lebih lengkap.

Untuk PhoneGap Desktop App akan saya bahas lain kali, saat ini saya akan konsen untuk PhoneGap CLI saja.

Kebutuhan Sistem

Sebelum menginstall PhoneGap CLI, Sobat harus sudah menginstall beberapa dependensi yang dibutuhkan.

Node.js
Installer Node.js bisa didownload di situs resminya https://nodejs.org/en/download/. Untuk pengguna Linux dan BSD bisa mengikuti panduan install di link berikut https://nodejs.org/en/download/package-manager/

Git
Installer Git bisa didownload di situs resminya http://git-scm.com/downloads

Java
Download and install Java SDK versi terbaru. http://www.oracle.com/technetwork/java/javase/downloads/jdk8-downloads-2133151.html

Android SDK Tools
Download SDK Tools Only (tanpa Android Studio) di situs resmi Android http://developer.android.com/sdk/index.html#Other

Koneksi Internet
Terserah mau menggunakan provider sapa saja. Bahkan wifi gratisan di warkop pun boleh. Yang penting koneksi stabil dan tidak lemot-lemot amat. Karena kalau lemot males nunggunya 😀

Langkah-Langkah Install PhoneGap

Setelah Node.js dan Git sudah terinstall dengan baik di komputer Sobat, langkah selanjutnya adalah menginstall PhoneGap CLI. Cara installnya menggunakan Command-Line. Berikut langkah-langkahnya:

Buka aplikasi Command Prompt (Windows) atau Terminal (Mac) atau Terminal/Konsole (Linux).

Ketikkan perintah berikut :

npm install -g phonegap@latest

Untuk pengguna Linux dan Mac pastikan mengeksekusi perintah tersebut dengan hak akses root, atau tambahkan prefix sudo menjadi

sudo npm install -g phonegap@latest

Tunggu hingga proses selesai. Pada langkah ini akan mendownload semua file yang dibutuhkan dan menginstallnya secara otomatis secara background. Lama waktunya tergantung dari koneksi masing-masing. Pastikan koneksi yang digunakan stabil.

Untuk memastikan bahwa PhoneGap CLI sudah terinstall dengan benar, ketikkan perintah berikut :

phonegap

Output yang tampil harus seperti berikut :

Usage: phonegap [options] [commands]

 Description:

  PhoneGap command-line tool.

  Commands:

     help [command]       output usage information
     create <path>        create a phonegap project
      ...

Membuat Aplikasi dengan PhoneGap

Setelah PhoneGap sudah terinstall barulah kita bisa membuat aplikasi mobile dengan PhoneGap. Dalam contoh berikut saya akan mencontohkan cara membuat aplikasi Android.

Membuat project aplikasi

Masukkan perintah berikut di Terminal/Command Prompt :

phonegap create BelajarPhoneGap --id "com.aplikasiku.pertama" --name "Belajar Aplikasi Mobile"

Perintah ini akan membuat sebuah folder bernama BelajarPhoneGap, nama aplikasinya Belajar Aplikasi Mobile dan id aplikasinya adalah com.aplikasiku.pertama.

Pastikan Sobat melihat output berikut setelah menjalankan perintah di atas.

Creating a new cordova project.

Masuk ke direktori/folder project yang telah kita buat tadi menggunakan perintah cd :

cd BelajarPhoneGap

Cek susunan file dan foldernya. Kurang lebih seperti berikut :

Edit file www/index.html, ubah isinya menjadi seperti ini :

<!DOCTYPE html>
<html>
    <head>
        <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" />
        <title>Belajar PhoneGap</title>
    </head>
    <body>
        <center>
            <h1>Aplikasi Android Pertama Saya<br />Keren!</h1>
        </center>
        <script type="text/javascript" src="cordova.js"></script>
    </body>
</html>

Menambahkan platform Android

Untuk membuat aplikasi Android kita harus menambahkan platform Android ke dalam project aplikasi yang telah kita buat. Caranya dengan mengetikkan perintah :

phonegap platform add android

Jika ingin membuat aplikasi untuk sistem operasi lainnya tinggal merubah nama OS nya saja. Contoh :

• Windows Phone : phonegap platform add wp8
• iOS : phonegap platform add ios

Membuat file APK

Untuk membuat file APK kita harus mem-build project yang telah kita buat tadi. Cara cukup mudah, ketikkan perintah :

phonegap build

Tunggu hingga proses selesai. File APK akan terbentuk di folder platform/android/build/outputs/apk. Silahkan di-copy dan siap diinstall di HP Android.

Mengubah config PhoneGap

Secara default aplikasi hasil generate dari PhoneGap berjalan secara fullscreen seperti yang terlihat pada tampilan di atas. Sehingga Status Bar Android tidak tampil. Hal ini berbeda dari kebanyakan aplikasi lain yang berjalan tidak fullscreen. Cara agar aplikasi berjalan fullscreen atau tidak adalah dengan cara merubah config PhoneGap.

Buka file config.xml kemudian cari baris seperti ini

<preference name="fullscreen" value="true" />

Ubah nilai “true” menjadi “false” lalu simpan.

Jalankan perintah build kembali untuk membuat file APK yang terbaru.

phonegap build

Install kembali file APK terbaru di HP Android, jalankan dan lihat hasilnya.

Mudah bukan?

Demikian tutorial cara mudah membuat aplikasi mobile tanpa belajar bahasa pemrograman. Selamat mencoba. Jika ada pertanyaan silahkan sampaikan di kolom komentar atau via email.