Membuat Aplikasi Android Sistem Informasi DesaKu - Part 4

android Dec 12, 2019

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

Pada  Part 1 dibagian langkah terakhir kita telah membuat sebuah project React Native menggunakan react-native ini namafolder jadi jika anda belum mengikuti tutorial Part 1  diharapkan anda mengikuti tutorial Part 1 terlebih dahulu.

Dibagian tutorial Part 4 ini saya menganggap anda telah mengikuti tutorial - tutorial part sebelum. Jadi karena pada Part 1 kita telah membuat project react native dengan nama folder DesaKu. Sekarang kita akan mencoba run project kita ke devices hp android langsung jadi ada beberapa hal yang perlu diperhatikan dan siapkan, seperti berikut ini.

  • Pertama pastikan laptop atau komputer dan HP Android terhubung dengan satu jaringan internet, dalam pembuatan tutorial ini saya menggunakan wifi untuk koneksi internetnya, jadi intinya laptop atau komputer dan HP Android nya terhubung ke Satu Jaringan Wifi.
  • Kemudian Siapkan Kabel USB Android, hubungkan HP Android dengan Laptop atau Komputer menggunakan Kabel USB.
  • Setelah kabel USB kita hubungkan dengan Laptop atau Komputer agar HP Android bisa kita gunakan testing Aplikasinya maka kita perlu mengaktifkan Debugging USB di HP Android nya. Saya menggunakan HP Android Vivo mungkin untuk HP Merek Lain Sedikit Berbeda. Untuk mengaktifkan Debbugging USB melalui Pengaturan kemudian masuk ke menu Pengaturan Lainya kemudian masukan ke menu Tentang Ponsel, berikut tampilan nya.
tentangponsel
Tentang Ponsel
  • Kemudian cari Versi perangkat Lunak setelah ketemu, maka tekan beberapa kali sehingga muncul popup di bagian bawah Tidak perlu, Anda sudah ada dalam mode pengembang.
versi
Mengaktifkan Opsi Developer / Pengembang
  • Setelah Opsi Developer di Aktifkan, dan kita telah back ke menu Pengaturan Lainnya dan cari menu dan masuk ke opsi developer
back
Opsi Developer
  • Selanjutnya akan masuk ke tampilan menu Opsi Developer cari dan enable Debugging USB
debugging
Mengaktifkan Debugging USB
  • Setelah mengaktifkan Debugging USB, sekarang jalankan perintah ini  Untuk Mengecek HP Android nya apakah sudah siap digunakan atau belum untuk di Install Aplikasi Android dari project DesaKu.
adb devices
Cek Android
devices
adb devices
  • Sekarang masuk folder project DesaKu
cd DesaKu/
Folder Desaku
cddesaku
cd DesaKu
  • Kemudian jalankan perintah berikut ini, perintah ini berfungsi untuk menginstal aplikasi Debug ke HP Android . Aplikasi Debug adalah merupakan aplikasi android yang dalam mode masih dalam pengembangan baik penambahan atau penghapusan sebuah fitur diaplikasi tersebut.
react-native run-android
Run Android
run-android
Run Android
  • Tunggu proses install selesai dan perlu diingat proses install ini perlu koneksi internet untuk mengdownload package yang diperlukan untuk projectnya, jadi pastikan komputer atau laptop anda terkoneksi dengan internet.
presoes
Proses Instalasi
  • Jika proses install selesai dan tidak ada kesalahan atau error, maka di HP Android akan otomatis terbuka aplikasi namun mungkin anda akan menemukan Error seperti ini.
error
Error
  • Untuk mengatasinya dengan cara menjalankan server debug menggunakan perintah berikut npm start
npm start
Perintah Menjalankan Server Debug
npmstart
Perintah Menjalankan Server Debug
npm start
Loading Server Done
  • Sekarang pastikan Laptop atau Komputer dan HP Android nya terhubung atau terkoneksi dengan jaringan Wifi. Setelah itu buat Tab Baru dengan cara Klik File kemudian Klik New Tab .
tab
Tab Baru
  • Selanjutkan kita akan mengecek IP Address Laptop atau komputer kita. IP Address adalah sebuah alamat pada setiap perangkat yang terhubung atau terkoneksi ke jaringan internet agar dapat berkomunikasi dengan perangkat lainnya. Perintah untuk mengecek IP Address di Linux Ubuntu yaitu dengan menjalankan perintah berikut ifconfig.
ifconfig
Mengecek IP Address 
ifconfig
Mengecek IP Address 
  • Berikut Detail Hasil dari menjalankan perintah ifconfig
detail
Detail Hasil Ifconfig
  • Setelah tampilnya detail hasil perintah ifconfig , maka kita cara nama adapter card wifi laptop atau komputer kita. Untuk nama Adapter Card Wifi Laptop saya adalaj wlp3s0. Nah di wlp3s0 terdapat inet 192.168.7.7 inilah yang dinamakan dengan IP Address yang terdiri dari angka saja dan perlu diingat IP Address ia bersifat dinamis jadi ketika laptop atau komputer di restart maka IP Address akan berubah. Kemudian anda hanya perlu mengecek dan mengingat IP Address tersebut.
detailc
IP Address

Kemudian kita kembali ke aplikasi yang telah kita install Aplikasi Debug di HP Android kita, Goyang Goyangkan HP Android maka akan tampil beberapa menu.

menu
Menu
  • Setelah Tampil Menu Tersebut, sekarang klik Settings
setting
Pilih Settings
  • Setelah anda memiliki Settings akan tampil beberapa menu, silakan anda ikuti petujuk digambar berikut.
server
Debug server host & port for device
  • Kemudian akan tampil Pop Up maka masukan IP Address sesuai Laptop atau Komputer Anda dan Untuk Port disama saja.
serverip
Masukan IP Address dan Port
  • Back dari Menu, kemudian Goyang - Goyangkan lagi HP Android nya ketika tampil Menu maka anda pilih Reload.
reload
Reload Aplikasi
  • Proses Loading Server Debug dan Tunggu Hinga Proses 100% selesai
serverloading
server
  • Berikut Tampilan Aplikasi Secara Default
Tampilandefault
Tampilan Default Aplikasi Android

Demkian Tutorial Part 4 ikuti juga tutorial Part 5 ya.

Wandi Pratama

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