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

Membuat aplikasi android dengan ionic (1/8)

3
Degananda.com -

Tutorial ini bersifat series atau berkelanjutan akan terdapat 8 (delapan) bagian. Goalnya adalah membangun aplikasi android content browser dengan menggunakan ionic. Proses diawali dari perencanaan hingga deploy ke android (bukan playstorenya).

CHAPTER 1 – Spesifikasi project

Hybrid apps

Untuk membangun aplikasi android terdapat dua cara yakni secara native dan hybrid. Pembangunan secara native dilakukan dengan menggunakan bahasa pemrograman java ataupun kotlin sedangkan secara hybrid dapat dilakukan dengan (yang populer) ionic atau react native. Keduannya memiliki keunggulan dan kelemahan masing-masing. Native apps memenangkan sisi performa sedangkan hybriad apps memenangkan sisi portability artinnya apps dapat dideploy pada android, ios ataupun windows phone(multiplatform).

Untuk waktu go to martket, hybrid app memiliki waktu pengerjaan yang lebih cepat dibandingkan dengan pembangunan menggunakan native. Namun, akses terhadap komponen-komponen android ataupun hardware dari handphone masing lebih luas pembangunan secara native. Aplikasi hybrid juga dapat mengakses OS dan hardware namun terbatas tidak seleluasa aplikasi native.

Itulah sedikit pembahasan mengenai sisi positif dan negatif dari aplikasi hybrid. Jika ingin melakukan pengetesan market , aplikasi hybrid sangat direkomendasikan karena memiliki development time lebih cepat. Mengapa ? karena aplikasi hybrid dibangun dengan menggunakan tekonlogi web yakni javascript, html dan css dibandingkan dengan aplikasi native yang menggunakan java dan xml.

Goal

Tutorial series pembuatan aplikasi android ini akan membangun aplikasi content browser dengan menggunakan ionic. Content browser adalah aplikasi yang menampilkan berbagai informasi kepada user yang berupa static content.  Artinnya tidak ada “database“(mysql/nosql) disini namun menggunakan array untuk menyimpan data. Fokus utamannya adalah bagaimana kita dapat membuat halaman serta user dapat berpindah-pindah dari satu halaman ke halaman lainnya. Selain itu, terdapat beberapa tujuan yang harus dicapai setelah mengikuti tutorial ini yaitu :

  • Mengetahui proses navigasi(dasar) yang ada dalam ionic.
  • Mengetahui cara pembuatan UI(User interfaces) Component tabs, sidemenu, list, input, button, thumbnail dan slider.
  • Mengetahui cara pemanfaatan angular form(reactiveForm) secara dasar.
  • Mengetahui konsep search dengan menggunakan pipe pada data bertipe array.

tujuan-tujuan tersebut akan dicover dalam delapan part. Proses installasi tidak dibahas dalam series ini. Anda dapat melihat pada tutorial mengenai installasi ionic disini. Setiap bagian dari tutorial berseri ini nantinnya akan dilengkapi video untuk penunjang.

Pre-requisities

tutorial ini dibuat untuk pemula, jika anda bukan pemula kami tidak merekomendasikan untuk mengikuti ulasan ini karena mengcover basic dari ionic(but, it worth to read). Namun, apabila telah mengerti beberapa konsep dibawah ini akan sangat membantu mengikuti tutorial ini.

  1. Html
  2. Css (Cassading style sheet)
  3. Javascript dasar (function, logging, class , ES6)

namun jika belum mengerti konsep diatas tidak menjadi masalah karena aplikasi yang dibuat adalah content browser dimana data yang disajikan adalah static dan kebanyakan akan berkutat pada html. Html tidak terlalu sulit jika dibandingkan dengan javascript sehingga meski tidak ada pengetahuan mengenai html pun tutorial ini masih dapat di ikuti dengan baik.

What will we built ?

Kita akan membangun aplikasi content browser dengan tema “sampah”. Judul aplikasi ini adalah “sampahku” merupakan aplikasi yang menyajikan informasi mengenai jenis dan bahaya dari sampah bagi lingkungan. Berikut sedikit gambaran(user interface) aplikasi

Aplikasi ini akan dibangun dengan menggunakan teknologi berikut ini

Framework ionic versi 3, Angular versi 4
Database tidak ada , hanya berupa array (simple array).
Styling css yang langsung di embed pada syntax html.

karena ini merupakan tutorial pemula maka kami melakukan styling terhadap komponen-komponen langsung pada syntax htmlnya dengan menggunakan (style=””). Harapannya ini akan lebih memudahkan dalam proses pembelajaran. Penggunaan class dan id menurut kami akan semakin merumitkan proses belajar karena banyak hal yang harus di pelajari dasarnya mulai dari html, javascript, ionic, angular. Oleh karena itu penggunaan css pada syntax diharapkan mengurangi beban belajar.

Perencangan

Fitur aplikasi

Secara keseluruhan terdapat empat fungsionalitas utama dari aplikasi ini yang tergambar dalam gambar dibawah.

yaitu pertama user dapat melihat detail dari suatu sampah. Misalnya , baterai (baterry) merupakan sampah jenis B3 yang memiliki resiko mencemarkan lingkungan. Kedua, melihat jenis-jenis sampah. Kita tahu ada tiga jenis sampah yaitu sampah organik dan anorganik. Ketiga , melihat bahaya sampah atua dampak sampah pada berbagai aspek misalnya lingkungan, sosial , ekonomi dan lain sebagainnya. Terahir , melihat aliran sampah yaitu bagaimana proses pengelolaan sampah yang dilakukan oleh pemerintah.

Detail fitur

1. Melihat detail sampah

Fitur ini mencakup tiga hal yakni menampilkan daftar sampah, mencari sampah(search)  dan user dapat melihat detail dari sampah tersebut. Contohnya pada gambar dibawah ini

terlihat terdapat dua daftar sampah yang ditampilkan yakni plastik dan suntikan. Data sampah diatas kita simpan dalam suatu array yang kemudian ditampilkan secara list. Penggunaan array ini ditujukan agar kita dapat membuat mekanisme search.  Contohnya saat kita tuliskan “plas” maka yang akan muncul hanyalah plastik.

setiap sampah yang ditampilkan akan memiliki link “lihat”. Ketika user mengklik atau mentap link lihat tersebut maka akan ditampilkan informasi detail mengenai sampah tersebut. Informasi yang akan ditampilkan adalah gambar sampah, jenis sampah, resiko pencemaran dan deskripsi.

2. Melihat jenis-jenis sampah

terdapat tiga jenis sampah yaitu sampah organik, anorganik dan b3. Ketiga jenis sampah tersebut akan disajikan dalam bentuk tab. Informasi yang dapat didapatkan oleh user adalah sebagai berikut ini :

  1. Nama sampah
  2. Jenis sampah
  3. Deskripsi sampah
  4. Daftar sampah yang termasuk pada jenis tersebut
  5. Pemanfaatan (misal sampah anorganik untuk kompos).

Berikut ini adalah user interface untuk menyajikan jenis-jenis sampah beserta lima informasi detail diatas.

3. Melihat bahaya sampah

Informasi yang akan ditampilkan dalam bagian melihat bahaya sampah yaitu daftar bencana-bencana yang pernah terjadi akibat sampah. Selain itu juga terdapat “grid” yang menjelaskan bahaya apa saja yang dapat terjadi secara umum.

4. Melihat aliran sampah

Jika anda belum tahu sampah yang kita buang sehari-hari ditempat sampah di lingkungan kita akan dikelola oleh pemkot(pemerintah kota) / pemkab. Contohnya di surabaya, setelah masuk di tempat sampah maka sampah tersebut akan dibawa ke TPS(tempat pembuangan sampah) kemudian ke TPA(tempat pembuangan ahir) setempat. Contohnya disurabaya TPA berada di benowo. Kemudian, sampah tersebut akan diolah menjadi listrik dengan bantuan pembangkit listrik tenaga sampah (PLTS). Seluruh proses diatas akan ditampilkan dalam bentuk slide / swipe.

slide 1

slide ke -2

Navigasi

Terdapat lima halaman yang akan dibuat dalam aplikasi content browser ini yakni :

  1. page-home, untuk menampilkan daftar sampah dan form search sampah. Halaman ini mengacu pada fitur 1. melihat detail sampah
  2. page-jenissampah, untuk menampilkan informasi mengenai jenis sampah. Halaman ini mengacu pada fitur 2. melihat jenis-jenis sampah
  3. page-bahayasampah, untuk menampilkan informasi mengenai bahaya sampah. Halaman ini mengacu pada fitur 3. melihat bahaya sampah
  4. page-aliransampah, untuk menampilkan informasi mengenai aliran sampah. Halaman ini mengacu pada fitur 4. melihat aliran sampah.

ke empat halaman tersebut dapat dinavigasikan oleh user. Bagan dari alur navigasi adalah sebagai berikut ini

page-jenissampah, page-bahayasampah dan page-aliransampah dapat diakses langsung melalui sidemenu. Sedangkan dari page home user baru bisa mengakses detail infomasi dari sampah tersebut. Sangat simpel. Misalkan user berada dihalaman detail sampah maka dia hanya bisa kembali ke halaman page-home. tidak bisa menuju halaman lain. Misalnya untuk menuju ke halaman page-bahayasampah maka user harus berada di page-home ataukah disalahsatu halaman yang ada di sidemenu.

NB : page home ditambahkan ke sidemenu.

Komponen

komponen adalah bagian dari suatu halaman/page. Tujuannya membuat komponen adalah untuk mengenalkan bahwa best practice dalam menggunakan angular kita sebisa mungkin untuk membuat sesuatu yang reuseable artinnya dapat digunakan kembali dimanapun. Jawabannya adalah komponen. Perbedaan utama dari komponen dan halaman adalah pada navigasi. Hanya halaman yang dapat melakukan navigasi / mengkases fungsi navigasi sedangkan komponen tidak. Lebih detail teknis mengenai perbedaan ini akan dibahas di chapter-chapter selanjutnya.

Chapter List

berikut ini adalah detail pembahasan yang akan dibahas didelapan chapter (ulasan ini adalah chapter 1).

Chapter 1 Spesifikasi project mencakup pengenalan mengenai apa yang akan dibuat beserta perancangannya (daftar halaman, alur navigasi)
Chapter 2 Membuat kerangka seluruh halaman dan komponen
Chapter 3 Membangun sidemenu dan membuat navigasi
Chapter 4 Mengerjakan UI page-aliransampah
Chapter 5 Mengerjakan UI page-bahayasampah
Chapter 6 Mengerjakan UI page-jenissampah
Chapter 7 Mengerjakan UI page-home(search, form input) & page-detailsampah + coding komponen(input).
Chapter 8 Deploy (menjadikan APK) dan menjalankan pada devices android. Untuk iOS kami tidak melakukan deploy karena tidak ada devices iphone nya 🙁 – sad..

itulah delapan chapter yang akan kita pelajari dalam delapan chapter kedepan. Chapter 1 hingga 8 dimulai dari yang paling mudah untuk dikerjakan except chapter 8 (karena memang harus dipaling ahir). Paling “sulit” adalah chapter 7 karena mungkin tidak tergolong untuk level beginner karena banyak bersentuhan dengan angular.

  • Egi Triandi

    ionic tutorial part 3 sampe 8 ga di lanjut gan?

  • Coup de Grâce

    Lanjut part 3-8 bang

  • Zein Ismalingga

    tolong dilanjutkan gan sampek kelar