Ada banyak alternatif yang bisa
digunakan untuk membuat aplikasi android selain menggunakan Java.
Salah satunya adalah React Native.
Pada kesempatan ini, kita akan
berkenalan dengan React Native dan menyiapkan semua peralatan yang dibutuhkan
unutk belajar membaut aplikasi dengan React Native.
Siap?
Mari kita mulai…
Apa
itu React Native?
React Native adalah sebauh framework
Javascript yang dikembangkan oleh Facebook untuk membuat aplikasi Android dan
iOS.
Apa bedanya React Native dengan
framework yang lainnya seperti ionic?
React Native akan mengkompilasi
aplikasi ke dalam native kode Android dan iOS. Sedangkan Ionic, akan membungkus
aplikasi di dalam sebuah browser.
Mana yang lebih bagus?
Menurut saya tentunya lebih bagus
React Native, karena performanya secepat aplikasi Native.
Contoh aplikasi-aplikasi yang dibuat
dengan React Native:
Ada Facebook, Instagram, Skype,
Pinterest, dll.
Selengkapnya bisa dilihat di Showcase: Who’s using React Native?
Peralatan
untuk Belajar React Native
Adapun peralatan yang harus kita
siapkan untuk belajar React Native adalah sebagai berikut:
1.
Install Nodejs
Peralatan pertama yang harus ada di
dalam komputer kita adalah Nodejs. Nodejs merupakan sebuah runtime untuk
menjalankan program Javascript di luar browser.
Jika di komputermu belum terinstall
Nodejs, silahkan ikuti tutorial: Instalasi Nodejs
Setelah itu, silahkan lanjutkan…
2.
Install NPM atau Yarn
NPM dan Yarn adalah peralatan yang
digunakan untuk mengelola project Nodejs. Ia bertugas untuk membuat project,
menginstal modul, menjalankan script, dll.
Kita bisa pilih salah satu, mau
menggunakan NPM atau Yarn.
Secara default, NPM akan terinstal
di komputer kita, apabila sudah menginstal Nodejs.
Sedangkan Yarn, harus kita install.
Jika kamu belum tahu tentang NPM,
coba baca: Mengenal NPM untuk Manajemen Project Javascript
3.
Install Java JDK
Karena kita membutuhkan Android
Studio untuk menginstal Android SDK, kita harus instal Java JDK terlebih
dahulu.
Java JDK juga akan dibutuhkan saat
kita mengkompilasi aplikasi menjadi APK.
Silahkan install Java JDK dengan perintah
berikut:
#
install versi 8
sudo apt install openjdk-8-jdk
openjdk-8-jdk-headless openjdk-8-jre
4.
Install Android SDK
Kita membutuhkan Android Studio
untuk menginstall Android SDK.
Setelah itu, nanti kita akan
memiliki direktori Android di dalam direktori home. Direktori ini berisi Android SDK
yang kita butuhkan untuk pengembangan aplikasi android.
Ukurannya cukup besar, bahkan sampai
puluhan GB jika kita install semua system image dan API Android-nya.
Tugas kita berikutnya adalah
menambahkan direktori ~/Android/Sdk ke dalam file ~/.bashrc, agar
perintah android dapat digunakan pada terminal.
Silahkan buka file ~/.bashrc dengan nano:
nano ~/.bashrc
Lalu pada bagian akhir tambahkan baris
ini:
export ANDROID_HOME=$HOME/Android/Sdk
export PATH=$PATH:$ANDROID_HOME/tools
export PATH=$PATH:$ANDROID_HOME/tools/bin
export PATH=$PATH:$ANDROID_HOME/platform-tools
Tekan Ctrl+x untuk keluar dan pilih y
untuk menyimpan.
Artinya, kita telah mendaftarkan
alamat PATH untuk android SDK. Dengan demikian perintah android dan adb akan dikenali dalam terminal.
Coba saja ketik android --version, maka yang akan muncul seperti ini:
5.
Install React Native
Peralatan berikutnya yang harus kita
instal adalah React Native.
React Native bisa kita instal
melalui Yarn atau NPM dengan perintah berikut:
sudo npm install -g react-native-cli
Tunggu sampai proses instalasi
selesai.
Setelah itu, coba periksa instalsi
dengan perintah react-native
--version
Versi React Native yang terinstal di
dalam komputer saya adalah versi 2.0.1..
Membuat
Project React Native
Sepertinya semua peralatan sudah
hampir siap. Sekarang, mari kita coba membuat project baru.
Silahkan ketik perintah berikut
untuk membuat project baru:
react-native init AwesomeApp
Perintah di atas akan membuat sebuah
project baru bernama AwesomeApp.
Tunggu sampai prosesnya selesai…
Pembuatan project React Native membutuhkan
koneksi internet untuk mengambil semua library yang dibutuhkan.
Setelah pembuatan project selesai,
langsung masuk ke direktori project-nya dengan perintah cd AwesomeApp.
Sekarang kita sudah siap ngoding
React Native.
Kita bisa langsung buka teks editor
VS Code dari sini dengan perintah:
code .
Maka akan terbuka seperti ini:
Emulator
untuk React Native
Ada dua macam emulator yang dapat
kita gunakan untuk menjalankan aplikasi React Native:
1.
Menggunakan HP Fisik Sebagai Emulator
Langakah pertama, hubungkan
smartphone dengan laptop mengugnakan kabel data.
Kemudian buka terminal dan ketik
perintah lsusb untuk mendapatkan ID vendor dan ID Device.
Setelah itu, daftarkan perangkat
anda ke dalam file 51-android-usb.rules. Ketik perintah berikut:
echo 'SUBSYSTEM=="usb",
ATTR{idVendor}=="22b8", MODE="0666",
GROUP="plugdev"' | sudo tee
/etc/udev/rules.d/51-android-usb.rules
Perhatikan idVendor dan MODE silahkan diganti dengan ID vendor dan ID Device
HP-mu.
Setelah itu coba ketik perintah:
adb devices
Maka akan keluar seperti ini:
Ini artinya, HP kita berhasil
terdeteksi.
2.
Menggunakan Emulator Android Studio
Pertama, kita harus membuat emulator
di Android Studio. Setelah itu silahkan jalankan emulatornya.
Ketik perintah:
adb devices
Untuk mendeteksi emulator.
Menjalankan
Aplikasi React Native di Emulator
Sekarang semua sudah siap, untuk
memastikan semua bekerja dengan benar. Mari kita coba menjalankan aplikasi
React Native di emulator.
Buka terminal, kemudian ketik
perintah:
ract-native run-android
Tunggulah beberapa saat.
React native dan sekumpulan
peralatan lainnya akan melakukan kompilasi dari source code menjadi apk
agar dapat dijalankan di dalam emulator.
Jika ini baru pertama kali, mungkin
akan lama. Karena akan mengambil beberapa dependency dari internet.
Tunggulah dengan sabar…
Jika sudah selesai, maka pada
emulator akan tampil seperti ini:
Troubleshoot
Jika kamu mendapatkan error saat
menjalankan aplikasi seperti ini:
Ini masalah pada sertifikat SSL,
karena kita menggunakan protokol https untuk men-download gradle-wraper.
Solusinya:
Ubah URL gradle pada file android/gradle/wrapper/gradle-wrapper.properties.
Setelah itu, coba lagi untuk
menjalankan react-native
run-android
Komentar
Posting Komentar