lifelong learner — urip iku urup, currently working on accenture.

Membuat aplikasi android dengan ionic (2/8) – page

0
Degananda.com -

Pada bagian kedua ini kita akan membuat halaman-halaman beserta komponen dari aplikasi content browser.  Selain itu, tutorial ini juga mencakup bagaimana proses pembuatan project ionic beserta memanfaatkan cli(command line interpreter) untuk membuat komponen-komponen tertentu untuk mempersingkat waktu development.

Pre requisites

Sebelum mengikuti tutorial ini anda diharapkan telah membaca bagian pertama karena memang ini adalah bagian dari tutorial berseri mengenai pembuatan aplikasi android dengan menggunakan ionic. Ada beberapa tools yang harus anda persiapkan yang mana proses installasi tools tersebut tidak dibahas di tutorial ini yakni :

  1. NodeJS, disini kami menggunakan versi 6.9.2. Anda dapat melakukan check terhadap versi nodejs dengan menggunakan perintah “node -v” pada terminal atau cmd.
  2. Ionic, disini kami menggunakan versi 3.5.3

untuk lebih detail mengenai spesifikasi environment yang kami miliki dapat dilihat gambar dibawah ini. Diharapkan untuk mencermati dan memahami spesifikasi dibawah ini karena bisa saja terjadi error jika anda mengimplementasikan akibat perbedaan versi. Namun hal ini kecil kemungkinannya jika versi yang anda gunakan sama atau lebih besar dari spesifikasi di project ini.

Jika anda belum melakukan installasi nodejs dan ionic maka silahkan membaca proses installasinya(ionic) disini. Untuk texteditor kami sangat menyarakan menggunakan microsoft visual studio code karena pertama vsc adalah free sehingga kita tidak perlu membayar dan yang paling penting microsoft vcs(singkatan dari visual studio code) adalah salah satu partner utama dalam mengembangkan typescript. Ionic menggunakan angular yang ditulis dengan typescript sehingga kita akan mendapatkan support penuh dalam menggunakan typescript dengan menggunakan visual studio code. Namun anda bebas menggunakan editor apapun.

Goal

Goal dari bagian kedua ini adalah sebagai berikut ini

  1. Membuat halaman-halaman yang akan digunakan di aplikasi
  2. Membuat komponen terkait
  3. Memanfaatkan cli untuk membuat halaman dan komponen tersebut.

Bagian kedua ini sangat mudah karena hanya membuat project beserta komponen-komponen yang dibutuhkan dengan memanfaatkan ionic cli dan dapat dipastikan belum ada coding dalam tutorial ini atau kami menyebutnya sebagai menyiapkan kerangka dari project.

Spesifikasi

sebagaimana telah kita definisikan pada bagian/chapter 1 yang lalu bahwa kita akan membuat navigasi seperti berikut ini

sehingga akan terdapat lima buah halaman dan satu buah komponen. Berikut adalah daftarnya

Tipe Nama
halaman/page home
halaman/page detail-sampah
halaman/page jenis-sampah
halaman/page bahaya-sampah
halaman/page aliran-sampah
komponen/component form-pilahsampah

nama – nama diatas adalah yang akan kami gunakan dalam membuat halaman ataupun komponen. Anda dapat dengan bebas menamai halaman atau komponen yang akan dibuat. Tidak perlu mencontoh 100% namun jika ingin mengikuti juga diperbolehkan.

Implementasi

langkah 1 – membuat project ionic

perintah yang digunakan membuat project ionic adalah

ionic start nama_project [template]

untuk bagian template anda dapat memilih menggunakan blank, sidemenu atau tabs. Blank berarti tidak ada template a.k.a kosong. Jika memilih sidemenu maka akan muncul hamburger menu dipojok kiri atas atau jika memilih tabs maka secara default pada halaman home akan terdapat tabs. Berikut sedikit ilustrasinnya

sidemenu

tabs

Perlu diketahui bahwa template tersebut sebenarnya bisa dibuat secara manual atau dikoding manual namun ionic memberikan kita kemudahan. Pada tutorial ini kami menggunakan sidemenu karen sesuai dengan spesifikasi dari project(lihat pada bagian 1 untuk melihat spesifikasi project). Sehingga perintah yang kami gunakan adalah

ionic start sampahku sidemenu

langkah 2 – cli

pada bagian spesifikasi diatas telah ditampilkan daftar halaman dan komponen. ionic memiliki cli(command line interpreter) yang dapat membantu kita dalam membuat berbagai hal yang berhubungan dengan aplikasi. Misalnya untuk membuat halaman kita dapat menggunakan perintah

ionic generate page nama_page

selain page/halaman ionic juga mensupport object lain seperti

  1. component
  2. directive
  3. page
  4. pipe
  5. provider
  6. tabs

untuk saat ini abaikan selain component dan page karena kita hanya akan menggunakan dua tersebut dalam project kali ini. Ingat ini adalah tutorial untuk pemula sehingga mencakup hal-hal yagn basic. Sebelum kita dapat menggunakan perintah ionic genereate/ionic cli diatas kita harus berada dalam folder dari project ionic.

pertama anda masuk ke dalam folder dari project anda.

cd "path ke lokasi project"

contohnya

untuk memastikan bahwa folder diatas terdapat project ionic tuliskan perintah

ionic info

jika memang project merupakan ionic maka akan menampilkan spesifikasi dari project tersebut.

nah sekarang sudah dapat dipastikan kita berada difolder project ionic sehingga kita sudah dapat menggunakan ionic cli.

langkah 3 – membuat halaman dengan cli

perintah yang digunakan

ionic generate page home
ionic generate page jenis-sampah
ionic generate page bahaya-sampah
ionic generate page aliran-sampah
ionic generate page detail-sampah

langkah 4 – membuat component dengan cli

ionic generate component form-pilahsampah

langkah 5 – memastikan

untuk memastikan bahwa seluruh halaman dan komponen telah berhasil dibuat maka perisksa folder  “src” ionic anda seharusnya akan memiliki struktur direktori seperti ini

done , sampai disini kita telah menyiapkan kerangka yang dibutuhkan oleh project beserta memanfaatkan ionic cli(command line interpreter) untuk mempersiapkan kerangka tersebut.  Untuk chapter-chapter selanjutnya akan membahas spesifik tentang bagaimana membuat user interface dimasing-masing halaman. Proses coding akan dimulai dari chapter 3.