Membuat Aplikasi Android Sistem Informasi DesaKu - Part 5

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

• Setelah itu Jalankan perintah berikut untuk menginstal React Navigation

sudo npm install --save react-navigation

• Setelah itu akan terjadi proses instalasi dan download package, tunggu hingga selesai.

• 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

• Setalah itu tunggu proses instalasi dan download selesai

• 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'

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

• 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'

• 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

• Setelah itu tunggu proses instalasi dan download hingga selesai

• 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

• Tunggu Proses Instalasi dan Download Package hingga selesai.

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

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