Membuat Aplikasi Android Sistem Informasi DesaKu - Part 5

android Dec 12, 2019

Aplikasi Android Sistem Informasi Desaku ini merupakan tutorial Part 5, jadi jika anda belum mengikuti Part 4 diharapkan anda untuk mengikuti tutorial Part 4 terlebih dahulu untuk memudahkan anda dalam memahami tutorial Part 5 ini.

Pada  Part 4  dibagian langkah terakhir kita telah melakukan penginstalan Aplikasi Debug ke HP Android dan Sudah dapat menjalankan Server Debug . Sekarang kita akan menginstall package React Navigation di project React Native kita yaitu DesaKu.

React Navigation adalah Merupakan Routing dan navigasi tampilan untuk aplikasi React Native Anda. Dengan React Navigation memungkinkan kita agar salah terhubung atau bisa berinteraksi dari satu componet ke component lain(satu tampilan ke tampilan lainya).

Pada saat pembuatan tutorial Part 5, React Navigation sudah versi 4, mungkin jika anda membaca tutorial ini beberapa tahun kemudian, kemungkinan ada sedikit perbedaan dari cara penginstalan atau pengimplementasian react navigation nya dalam code, maka dari itu diharapkan anda dapat menyesuaikan dengan membaca Documentation React Navigation.

Sebelum kita memulai penginstalan React Navigation pastikan Komputer atau Laptop terkoneksi dengan Jaringan Internet. Baik Mari kita memuali proses penginstalan dengan mengikuti langkah - langkah berikut ini.

  • Buka Terminal dan Masukan ke Folder Project DesaKu.
cd /DesaKu
Masuk ke Folder Project DesaKu
cd
Masuk ke Folder Project DesaKu
  • Setelah itu Jalankan perintah berikut untuk menginstal React Navigation
sudo npm install --save react-navigation
Install React Navigation
native
Install React Navigation
  • Setelah itu akan terjadi proses instalasi dan download package, tunggu hingga selesai.
prosesinstall
Proses instalasi dan download package
  • Jika proses instalasi dan download selesai, sekarang kita install package pendukung dengan menjalankan perintah berikut.
sudo npm install --save react-native-reanimated react-native-gesture-handler react-native-screens@^1.0.0-alpha.23
Install Package
pedukung
Install Package
  • Setalah itu tunggu proses instalasi dan download selesai
prosesnavi
Proses Instalasi danDownload Package
  • Setelah selesai sekarang tambahkan script link dependencies dibawah ini. Kedalam file android/app/build.gradle.
implementation 'androidx.appcompat:appcompat:1.1.0-rc01'
implementation 'androidx.swiperefreshlayout:swiperefreshlayout:1.1.0-alpha02'
link dependencies

Untuk mengakses file android/app/build.gradle kita menggunakan Visual Studio Code yang pernah kita install di tutorial Part 3 ikuti petujuk berikut.

android
Mengakses File build.grade
  • Setelah tampilan code dair file build.grade maka cari dependencies dan tambahkan script berikut dan jangan lupa di simpan.
implementation 'androidx.appcompat:appcompat:1.1.0-rc01'
implementation 'androidx.swiperefreshlayout:swiperefreshlayout:1.1.0-alpha02'
link dependencies
link
Menambahkan Script Link Dependencies
  • Selanjutkan kita akan menginstall package untuk pengaturan navigasi pindah screen 1 ke screen lainnya. Kita menggunakan react-navigation-stack yang merupakan bagian dari package react-navigation. Untuk cara menginstal silakan anda jalankan perintah berikut ini.
sudo npm install --save react-navigation-stack
Install React Navigation Stack
stack
Install React Navigation Stack
  • Setelah itu tunggu proses instalasi dan download hingga selesai
prosesstatck
Proses instalasi dan Download Package
  • Selanjutkan kita jalankan perintah berikut untuk menginstal ulang aplikasi debug nya. Jika anda belum mengikuti tutorial Part 4 diharapkan anda membaca - baca lagi materi di tutorial Part 4 karena pembahasan secara detail cara menginstall dan mengenail hal - hal yang perlu diperhatikan sudah selesai dibahas di tutorial Part 4 . Jadi saya menganggap anda telah paham cara menginstall Aplikasi Android Debugnya.  
react-native run-android
Install App Debug
run-android
Install App Debug
  • Tunggu Proses Instalasi dan Download Package hingga selesai.
prosesandroid
Proses Instalasi dan Download Package

Berikut jika tampilan android seperti berarti penginstalasian React Navigation selesai dan pastikan tidak error.

android
Tampilan Default Android Debug

Demikian pembahasan meteri dibagian tutorial Part 5 ini, ikuti pembahasan selanjutnya di tutorial Part 6.

Wandi Pratama

Saya seorang Developer Mobile menggunakan Framework React Native dan saya juga memiliki pengalaman dibidang SYS Admin