Skip to content

How To Start

Faisal Amir edited this page Feb 2, 2022 · 6 revisions

Disclaimer

Sebelum Memulai Silahkan Baca Dulu How To Generate Project

Memulai Menggunakan Nutrition Framework

Pembuatan Activity Class

  1. Buka Module nutritionapp
  2. Kemudian masuk sampai package mvvm, kemudian buat package baru, sebagai contoh : vitamina. seperti gambar dibawah ini.
  3. Setelah itu klik kanan pilih create empty activity
  4. Beri nama dengan contoh MainVitaminActivity, tunggu sampai proses selesai.
  5. Setelah proses build gradle selesai ubah activity tersebut menjadi seperti gambar dibawah ini. Setalah mengubahnya, terdapat 2 fungsi kosong yaitu setupViewModel() dan setupUI(). Anda dapat memanggil component UI XML ID anda didalam fungsi setupUI() tersebut.

Pembuatan Fragment Class

  1. Sama seperti pembuatan activity class bedanya adalah disini kita memilih fragment.
  2. Setelah membuat fragment class, maka ubah seperti code dibawah ini, fungsinya juga sama seperti pada activity

Pembuatan ViewModel Class

  1. Buat Class Baru dengan contoh nama : MainVitaminViewModel
  2. Kemudian Extend clas tersebut terhadap BaseViewModel seperti gambar dibawah ini
  3. Setelah selesai jangan lupa tambahkan dependency injection pada class ViewModelModule.kt seperti contoh di bawah ini
  4. ViewModel Selesai Dibuat

Pemanggilan Fungsi Vitamin

  1. Buka ViewModel yang sudah di buat, kemudian buat fungsi seperti contoh di bawah ini dengan nama fungsi getVitaminA()
  2. Setelah itu panggil variable repository, kemudian tambahkan “.” Setelah repository akan banyak sekali muncul suggestion fungsi yang sudah di buat, seperti contoh di bawah ini, isikan parameter sesuai permintaan dari fungsi tersebut.
  3. Kemudian seperti ini contoh setelah pemanggilan fungsi selesai.
  4. Tambahkan variable livedata agar data dapat update secara otomatis saat proses update dari server dengan cara menambahkan NutriSingleLiveEvent seperti contoh di bawah. Beberapa fungsi sudah menjadi bawaan dari nutritionframework sehingga kita tidak perlu membuat variable baru lagi.
  5. ViewModel Selesai

Pembuatan Tampilan Sederhana Menggunakan NutriRecyclerView

  1. Buka Layout XML, contoh disini adalah activity_main_vitamin.xml pada folder res
  2. Kemuadian ubah code xml awal menjadi seperti gambar ini.
  3. Pembuatan Xml Layout dengan NutriRecyclerView Selesai
  4. Kembali ke Activity dan membuat adapter untuk NutriRecyclerView dengan membuat variable dengan nilai kembalian INutriViewAdapter disini kita menggunakan VitaminContent, sehingga menjadi INutriViewAdapter, untuk contoh lengkapnya seperti gambar dibawah ini.
  5. Setelah selesai membuat adapter selanjutnya kita membuat fungsi setup untuk NutriRecyclerView dengan cara seperti gambar dibawah ini.
  6. Kita inisiasi ViewModel yang sudah kita buat sebelumnya dengan cara seperti ini.
private val mainVitaminViewModel: MainVitaminViewModel by viewModel()
  1. Kita panggil viewModelnya dengan cara memanggil mainVitaminViewModel tadi didalam setupViewModel(). Seperti contoh di gambar ini.
  2. Aplikasi Selesai di implementasikan

Source Code Class Contoh Lengkap

  • MainVitaminActivity.kt
package com.frogobox.nutritionapp.mvvm.vitamina

import android.os.Bundle
import android.view.View
import android.widget.TextView
import com.frogobox.nutritionapp.R
import com.frogobox.nutritionapp.core.BaseActivity
import com.frogobox.nutritionapp.databinding.ActivityMainVitaminBinding
import com.frogobox.nutritioncore.model.vitamin.VitaminContent
import com.frogobox.nutritionframework.recycler.core.INutriViewAdapter
import com.frogobox.nutritionframework.recycler.core.NutriRecyclerNotifyListener
import org.koin.androidx.viewmodel.ext.android.viewModel

class MainVitaminActivity : BaseActivity<ActivityMainVitaminBinding>() {

    private val mainVitaminViewModel: MainVitaminViewModel by viewModel()

    private val vitaminAdapter = object : INutriViewAdapter<VitaminContent> {
        override fun onItemClicked(
            view: View,
            data: VitaminContent,
            position: Int,
            notifyListener: NutriRecyclerNotifyListener<VitaminContent>
        ) {}

        override fun onItemLongClicked(
            view: View,
            data: VitaminContent,
            position: Int,
            notifyListener: NutriRecyclerNotifyListener<VitaminContent>
        ) {}

        override fun setupInitComponent(
            view: View,
            data: VitaminContent,
            position: Int,
            notifyListener: NutriRecyclerNotifyListener<VitaminContent>
        ) {
            view.findViewById<TextView>(R.id.nutri_rv_list_type_2_tv_title).text = data.information
            view.findViewById<TextView>(R.id.nutri_rv_list_type_2_tv_subtitle).text = data.description
        }
    }

    override fun setupViewBinding(): ActivityMainVitaminBinding {
        return ActivityMainVitaminBinding.inflate(layoutInflater)
    }

    override fun setupViewModel() {
        mainVitaminViewModel.apply {
            getVitaminA()

            dataVitaminA.observe(this@MainVitaminActivity, {
                setupRV(it)
            })

            eventShowProgress.observe(this@MainVitaminActivity, {
                setupEventProgressView(binding.progressView, it)
            })
            
        }
    }

    override fun setupUI(savedInstanceState: Bundle?) {
    }

    private fun setupRV(data: List<VitaminContent>) {
        binding.rvVitaminA
            .injector<VitaminContent>()
            .addData(data)
            .addCustomView(R.layout.nutri_rv_list_type_2)
            .addEmptyView(null)
            .addCallback(vitaminAdapter)
            .createLayoutLinearVertical(false)
            .build()
    }

}