Basic React Native Part 4 - Run Aplikasi Ke Device

React Native Dec 27, 2019

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 BelajarBasicRN. 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.
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.
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
Opsi Developer
  • Selanjutnya akan masuk ke tampilan menu Opsi Developer cari dan enable Debugging USB
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 BelajarBasicRN.
adb devices
Cek Android
adb devices
  • Sekarang masuk folder project BelajarBasicRN
cd BelajarBasicRN/
Masuk Ke Folder BelajarBasicRN
Masuk Ke Folder BelajarBasicRN
  • 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
  • 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.
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
Perintah Menjalankan Server Debug
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 menekan tombol ctrl + t secara bersamaan.
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 
Mengecek IP Address
  • Berikut Detail Hasil dari menjalankan perintah ifconfig. Setelah tampilnya detail hasil perintah ifconfig , maka kita cara nama adapter card wifilaptop atau komputer kita. Untuk nama Adapter Card Wifi Laptop saya adalaj wlp3s0. Nah di wlp3s0 terdapat inet 192.168.1.11 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.
Detail Hasil Ifconfig
  • Kemudian kita kembali ke aplikasi yang telah kita install Aplikasi Debug di HP Android kita, Goyang Goyangkan HP Android maka akan tampil beberapa menu.Setelah Tampil Menu Tersebut, sekarang klik Settings
  • Setelah anda memiliki Settings akan tampil beberapa menu, silakan anda ikuti petujuk digambar berikut.
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.
Masukan IP Address dan Port
  • Back dari Menu, kemudian Goyang - Goyangkan lagi HP Android nya ketika tampil Menu maka anda pilih Reload.
Reload Aplikasi
  • Proses Loading Server Debug dan Tunggu Hinga Proses 100% selesai
server
  • Berikut Tampilan Aplikasi Secara Default

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