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

Masuk ke Folder Project DesaKu

Masuk ke Folder Project DesaKu

• Setelah itu Jalankan perintah berikut untuk menginstal React Navigation

sudo npm install --save react-navigation

Install React Navigation

Install React Navigation

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

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

Install Package

• Setalah itu tunggu proses instalasi dan download selesai

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.

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

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

Install React Navigation Stack

• Setelah itu tunggu proses instalasi dan download hingga selesai

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

Install App Debug

• Tunggu Proses Instalasi dan Download Package hingga selesai.

Proses Instalasi dan Download Package

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

Tampilan Default Android Debug

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

Catatan: tulisan ini dipindahkan dari cloudborneo.com, terbit pertama 12 Desember 2019.