Pengembangan Aplikasi dengan Android Jetpack untuk Pemula

Android Jetpack merupakan sebuah inovasi dari Google yang membuat para developer Android terbantu dan cepat dalam mengembangkan sebuah Aplikasi yang berkuliatas dan tangguh dengan sekumpulan libray, tools dan panduan didalamnya.

Android jetpack dapat mengelola berbagai aktifitas seperti Background Task, Navigation dan LifeCycle dari Android itu sendiri. Androi Jetpack juga didesign cocok berjalan di Kotlin yang akan membuat hemat code dengan Android KTX-nya. Banyak library dan tools panduan yang sudah disediakan Android jetpack untuk mempermudah para developer dalam mengembangkan sebuah Aplikasi Android (https://developer.android.com/jetpack/ )

Saat ini tutorial akan fokus bahas Jetpack untuk developer pemula yang mencoba memasuki Area baru pengembangan Aplikasi Android dengan Kotlin. Target tutorial ini Anda dapat ciptakan Aplikasi Android Jetpack Simple, berkenalan dengan LiveData, Observer, lifeCycle Android dan Navigation.

Sample Project Android Jetpack

SIlahkan download Android Canary 3.2 atau lebih tinggi dapat Anda unduh di https://developer.android.com/studio/preview  dan pastikan sudah melakukan instalasi yang lengkap.

1. Buka Android Studio , Create Project dengan nama Starterjetpack

2. Pilih Default Activity ( Activity & Fragment ViewModel)

3. Setelah Project selesai di-create, maka langkah selanjutnya yaitu menambahkan komponen Jetpack yang kita ingin fokuskan yaitu Lifecycle ( LiveData ), Navigation.
4. Buka File Gradle Project Anda dan sisipkan beberapa script untuk masing library jetpack.
5. Library LifeCycle
6. Library Navigation
7. Sync and Run your App

Berkenalan dengan  View Model & LiveData

Baiklah, ketika komponen jetpack sudah berhasil menyatu dengan Aplikasi Startetjetpack. Bagaimana sih sebenarnya View Model & Live Data dari Android jetpack?. Jadi kalau arsitektur sebelumnya bahwa Fragment & Actvitiy bertugas untuk menyediakan & mengelola data untuk UI baik dari Database maupun webservice, sekarang tugas tersebut sudah ambil ahli oleh View Model & LiveData.

ViewModel di design berperan sebagai penyimpan data & mengelola Data UI sesuai dengan lifecycle Android, secara garis besar class ini bertugas untuk menyiapkan Data untuk UI dengan bantuan Observer. Misalkan Anda ingin menampilkan koleksi berita dari API atau dari database Anda pada Aplikasi, maka disinilah ViewModel berperan yang mungkin sebelumnya Anda assign pekerjaan ini pada Activity atau Fragment.

Sedangkan LiveData adalah kelas yang beperan untuk memberikan/update data kapan untuk di lakukan (observerable data) Observer (Pengamat) di Activity atau Fragment.

1. Masuk ke Project yang sudah diciptakan sebelumnya
2. Buka file MainViewModel.kt dan kita coba untuk mendaftarkan satu Live data disana sebagai data yang akan ditampilkan di welcome message Fragment default pada saat kita ciptakan proyek tadi.
3. Sisipkan Kode berikut

Perbedaan dari LiveData dengan MutableLiveData adalah

LiveData dapat melakukan perubahan value (writable) sedangkan MutableLiveData hanya dapat baca saja (ReadOnly)

4. Silahkan Run Aplikasi Anda

Teks di Fragment akan berganti menjadi Hello World! Sesuai dengan apa yang telah Anda  tuliskan pada ViewModel

5. Nah, sekarang coba lakukan update pada teks hello world dengan nama “Ready to start” dengan bantuan sebuah button . Tambahkan sebuah Floating Button pada Fragment dan kita berikan click listener yang akan mengubah value data dari ViewModel dan apakah UI teks akan berubah?
6. Tambahkan Script ini untuk Floating Point di main_fragment

7. Set Listener dari button fab_change ini untuk merubah value HelloWorld tadi dengan script berikut.

Eitss, Import dulu package ini mempermudah kita tidak memperkenalkan fab_change

import kotlinx.android.synthetic.main. main_fragment.*

berlaku hanya untuk file kotlin

8. Kemudian set listener dan change value helloworld dengan script ini.

fab_change.setOnClickListener{
viewModel.data.value = "Ready to start"
}

9. . Something wrong… apa yang Anda temukan?

Karena variable data pada kelas MainViewModel adalah LiveData yang hanya ReadOnly sehingga tidak diijinkan untuk dirubah, solusi agar dapat dirubah adalah dengan definsikan variable data tersebut ke MutableLiveData dan pastinya tidak aka nada Error Kan?

10. Silahkan Run Aplikasi and coba click floating point. Apa yang Anda temukan?
11. Kita tidak melakukan update UI seperti cara kita sebelumnya, itu semua dilakukan oleh LiveData dengan observer yang telah kita pasanga pada Fragment Main tadi.

Berkenalan dengan Navigation dari Android Jetpack

Setelah bermain dengan ViewModel dan Live Data, sekarang mari kita lihat salah satu komponen yang ada dalam Android Jetpack yaitu Navigation. Kebetulan saat kita create project tadi, kita sudah install library untuk ini. Tools ini akan mempermudah Anda untuk menyimpelkan bagaimana implementasi Navigasi antara masing-masing destinasi pada Aplikasi Anda.

Sekarang peranan Activity pada Android jetpack merupakan entry point untuk masuk ke Aplikasi yang handle global navigation seperti Bottom Navigation, Navigation Drawer dll.

Berikut langkah-langkah untuk implementasi navigation dari Android Jetpack ini.

1. Klik Kanan pada project dan pilih Android Resource File , berikan nama nav_graph dan tipe resource-nya adalah navigation. Akan menghasilkan struktur seperti ini.
2. 
3. Klik Design untuk melihat Editor Navigasi.
4. 
5. Klik Add Destination dan Pilih MainFragment, maka akan muncul disana layout main fragment
6. Sekarang, kita akan coba untuk buat sebuah Fragment baru dengan nama AboutFragment yang nantinya ketika Teks “Ready to start” di click akan berpindah ke AboutFragment ini.

5. Setelah FragmentAbout sudah kita ciptkan, selanjutnya kita tambahkan fragment tersebut pada nav_graph tadi, kita coba dengan penamaan seperti gambar ini.

Launcher_fragment adalah sebagai start destination pada Aplikasi.

6. Kita lakukan update pada layout MainActivity sebelumnya dengan menyertakan satu komponen Fragment. Fragment inilah yang menjadi navigation host dari aplikasi kita, Fragment Transaction ini sudah di handle oleh Library Navigation Android Jetpack.

7. Sekarang, kita akan set click listener pada teks “ready to start” pada launcher fragment menuju destinasi About Fragment.
8. Oh ya, sekarang kita akan sederhanakan code pada MainAcitivity dengan script berikut

class MainActivity : AppCompatActivity() {

   override fun onCreate(savedInstanceState: Bundle?) {
       super.onCreate(savedInstanceState)
       setContentView(R.layout.main_activity)
  }

}

Yang sebelumnya dibubuhi dengan fragment transaction dihapus saja karena fragment navigation sudah di handle oleh Navigation lib.

Dengan mendefinisikan startDestination pada Nav_graph, fragment pada MainActiity kita akan otomatis jalanin MainFragment.

9. Buka file Fragment dan set ClickListener ke Fragment About, seperti script berikut

/*Action when txt_message is click*/
message.setOnClickListener{
     view?.let { Navigation.findNavController(it).navigate(R.id.about) }
}

10. Run Aplikasi dan Amati bagaimana Navigation bekerja.

Selamat Anda, baru saja memasuki cara baru dalam pengembangkan Aplikasi dengan Android Jetpack.

Full Project dapat Anda clone dari Github