[Tutorial] Aplikasi ToDoList Sederhana Dengan Cordova + Polymer

Pada tutorial kali ini, kita akan membuat aplikasi ‘to do list’ sederhana untuk sistem operasi android berbasis html5. Apa saja tool yang dibutuhkan? berikut list-nya:

  1. Node.js dapat diunduh pada tautan berikut: https://nodejs.org/en/download/
  2. Java Development Kit dapat diunduh pada tautan berikut: download jdk
  3. Apache Ant dapat di unduh di http://ant.apache.org/bindownload.cgi
  4. Android SDK dapat diunduh pada tautan berikut: download android sdk.
  5. Git dapat diunduh pada tautan berikut https://git-scm.com/downloads
  6. Cordova
  7. Bower
  8. Polymer

PENGENALAN

Dalam pengembangan aplikasi android terdapat berbagai macam tool yang dapat digunakan, salah satunya adalah teknologi html5. Dengan perkembangan dunia mobile yang sangat pesat, kini developer web tidak harus belajar native language seperti java, c++, swift dll. untuk membuat aplikasi mobile. Cordova sendiri merupakan framework pengembangan aplikasi mobile multi platform yang memungkinkan kita untuk mengembangkan aplikasi mobile dengan html, css dan javascript.

Dalam tutorial berikut, saya menggunakan sistem operasi windows 10 64 bit, untuk versi tool yang dipakai menyesuaikan dengan sistem operasi yang kamu pakai.

DAFTAR KONTEN

  1. Installasi Tool dan Setting Environment Variables
  2. Menyiapkan Project dengan Cordova CLI
  3. Coding Time
  4. Test dan Debug Aplikasi

KONTEN

  1. Installasi Tool dan Setting Environment Variable

    Node.js
    Pertama download dan instal node.js seperti menginstal program pada umumnya. Perlu diketahui, nantinya yang kita pakai adalah npm yang satu paket dengan installer node.js. Apabila proses penginstalan sudah selesai, cek dengan membuka cmd dan masukan perintah npm -v seperti pada gambar berikut:

    npm
    cek  npm version


    JDK

    Download dan instal jdk sesuai dengan sistem operasi yang kamu pakai. Setelah JDK terinstal, setting agar dapat dipakai melalui cmd dengan cara masuk ke Control Panel > System and Security > System > Advanced System Setting > Advanced > Environment Variables.

    jdk
    Environment Variables

    Setelah itu, copy lokasi dimana kamu menginstal jdk dan masukan pada variable Path dengan mengedit dan menambahkan nya  seperti pada gambar berikut:

    jdk2

    Jika sudah, tambahkan 1 lagi variable dengan nama JAVA_HOME dan isi dengan lokasi C:\Program Files\Java\jdk1.8.0_121 apabila kamu menginstal secara default. Perlu diperhatkan pada variable ini lokasi tidak menuju ke folder bin.

    jdk3

    Apabila sudah semua, test dengan menuliskan javac -version melalui cmd. Jika berhasil maka jdk sudah siap digunakan.

    Apache Ant
    Download Apache Ant versi terbaru yang berekstensi .zip pada tautan berikut. Lalu extract dan letakan di folder yang kamu ingin kan. Dalam kasus ini saya menaruhnya di C:\Program Files\Apache\Ant\apache-ant-1.10.1/bin.  Dengan cara yang sama, edit variable Path dan tambahkan lokasi kamu menginstal Apache Ant.

    ant

    Tambahkan satu variable lagi dengan nama ANT_HOME dan beri nilai dengan lokasi kamu menginstal Apache Ant tanpa bin folder.

    ant2

    Jika sudah test dengan menuliskan ant -version pada cmd. Jika berhasil maka ant sudah siap bekerja.

    Android SDK
    Sebenarnya, jika kamu sudah pernah menginstal ide android studio atau pernah menggunakan  eclipse sebelumnya, maka harusnya kamu sudah tidak asing dengan android  sdk.
    Pertama download android sdk pada tautan di atas. Pilih yang SDK nya saja. Seperti pada gambar dibawah ini.

    sdk

    Download dan extract file zipnya, letakan dimana kamu sukai. Jangan lupa catat pathnya. Sama dengan langkah sebelumnya, masuk ke environment variables edit variable  Path, tambahkan direktori kamu menginstal android sdk.

    android-sdk

    Simpan dan buat variable baru dengan nama ANDROID_HOME dan beri value lokasi kamu menginstal android sdk.

    sdk-andro

    Jika sudah, test dengan melihat version yang terinstal. Buka cmd lalu tuliskan adb version jika muncul version, maka penginstalan sudah berhasil. Lanjut dengan ketikan perintah android pada cmd untuk membuka sdk manager. Jika anda tidak berhasil membuka sdk manager lewat cmd, maka buka folder kamu menginstal android sdk, dalam kasus saya C:\Users\sanja\AppData\Local\Android\sdk lalu launch program SDK Manager.exe. Install package yang kamu butuhkan.

    GIT
    GIT adalah software version control, kamu dapat mendownloadnya pada tautan di atas. Proses penginstalannya sama seperti program pada umumnya. Kamu membutuhkan git karena nantinya saat mendownload polymer akan melalui repositorynya di  github.

    CORDOVA
    Untuk menginstallnya sangat mudah, pertama buka cmd lalu tuliskan

    npm install -g cordova

    untuk menginstall cordova  secara global. Sediakan koneksi internet karena npm akan mengunduhnya. Setelah selesai tuliskan perintah cordova -v apabila muncul version maka cordova siap di gunakan.

    BOWER
    Tuliskan perintah berikut untuk menginstal bower secara global.

    npm install -g bower
  2. Menyiapkan Project dengan Cordova CLI 

    Pertama, siapkan folder terlebih dahulu sebagai  workspace kamu. Jika sudah melalui windows explorer, buka folder tsb. Klik file > open command promt > open command promt atau buka cmd lalu arahkan ke  folder workspace yang tadi dengan perintah cd. Jika  sudah, create project dengan menuliskan perintah

    cordova create todolist com.yourcompany.yourapp ToDoList

    Tunggu sampai proses selesai, kamu akan mendapati folder todolist yang berisikan project cordova yang baru dibuat.

    tree
    Melalui cmd masuk ke folder todolist tsb untuk menambahkan platform browser dan android pada project cordova.

    cordova platform add browser
    cordova platform add android

    jika sudah, kita coba run program di browser dengan perintah

    cordova run browser

    jika berhasil akan keluar seperti gambar berikut.

    project

    Gunakan ctrl + c untuk terminate running. Folder tempat kita bekerja nantinya adalah di www . Jika sudah, melalui cmd masuk ke folder www tersebut. Struktur di dalamnya merupakan struktur yang tidak asing lagi untuk web developer.

    www

    Sekarang, gunakan bower untuk mengunduh element polymer yang akan kita gunakan dengan cara:

    bower init                                                                    

    Perintah tersebut akan menghasilkan file bower.json yang bisa kamu isi dengan keterangan yang kamu inginkan.

    bower install --save PolymerElements/polymer-starter-kit

    Sebenarnya kita tidak memakai seluruh element yang ada pada polymer, namun untuk mempermudah kita akan memakai polymer starter kit dengan perintah di atas. Setelah download selesai, maka akan  muncul folder bower_component dimana starter kit polymer berada.

    bower-kom

    Sampai disini persiapan project sudah  selesai. Bagaimana? cukup mudah bukan.

  3. Coding Time 

    Buka project tersebut dengan text editor favorit kamu. hal pertama yang akan kita lakukan adalah membuat layout aplikasinya terlebih dahulu. Untuk itu buka file index.html, tuliskan code seperti dibawah ini.

    Kemudian buat file di lokasi yang sama  dengan index.html  dengan nama tasks-list.html lalu tuliskan code dibawah ini.

    Sampai disini kita sudah dapat menjalankan aplikasi pada web browser ataupun android. Saya tidak akan menjelaskan banyak mengenai polymer, untuk fungsi-fungsi dalam code nya terdapat keterangannya.

  4. Test dan Debug  Aplikasi 

    Untuk melakukan testing kamu dapat  menggunakan emulator, real device ataupun browser. Untuk debugging sendiri saya lebih suka menggunakan browser dan inspect element.untuk run di browser dapat menggunakan perintah:

    cordova run browser

    untuk run di android dapat menggunakan perintah:

    cordova run android

    untuk build apk file dapat menggunakan perintah:

    cordova build android


PENUTUP

Demikian tutorial kali ini. Kamu dapat mendownload seluruh source code pada link berikut ini:

Source Code

Live Demo Aplikasi

Referensi Penulisan:
https://www.codepolitan.com/tutorial/membuat-aplikasi-android-berbasis-html5-cordova

https://code.tutsplus.com/tutorials/how-to-create-a-to-do-list-app-with-polymer-and-cordova–cms-25434

https://cordova.apache.org/docs/en/latest/

https://elements.polymer-project.org/

Advertisements

2 thoughts on “[Tutorial] Aplikasi ToDoList Sederhana Dengan Cordova + Polymer

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s