Rabu, 01 Maret 2017

Cara Install React Native pada Linux

React Native adalah sebuah framework yang di kembangkan oleh Facebook untuk membuat aplikasi mobile hybrid. Menurut info, framework ini telah di pakai oleh banyak aplikasi populer seperti: Instragram, Facebook, Airbnb, Walmart, dst. Anda bisa melihat info selengkapnya disini.

React Native

Berikut adalah cara install React Native pada Linux khususnya Ubuntu (Saya menggunakan Deepin Linux yang berbasis Ubuntu).

Menurut dokumentasi yang saya baca, React Native membutuhkan beberapa dependencies dan tools supaya bisa berjalan. Berikut dependencies dan tools yang di butuhkan:
- Node.js
- Yarn (atau anda bisa menggunakan NPM)
- React Native CLI
- Watchman
- Java Development Kit (Oracle JDK 8)
- Android SDK (Android Studio)

Catatan:
- Dalam tutorial ini akan di khususkan untuk membuat aplikasi Android, walau sebenarnya React Native bisa juga untuk membuat aplikasi iOS.
- Pastikan anda terhubung ke internet dan memiliki kouta yang memadai, karena hampir seluruh konten yang ada dalam tutorial ini akan kita download dari internet.

Install Node.js

Untuk menginstall Node.js silahkan ketik perintah berikut pada terminal:
sudo apt-get install nodejs nodejs-legacy
Cek versi Node.js dengan perintah berikut:
node -v

Install Yarn Package Manager

Sebelumnya, anda harus menambahkan repositori milik Yarn untuk bisa melakukan installasi lewat APT. Ketik perintah berikut untuk menambahkan repositori Yarn:
curl -sS https://dl.yarnpkg.com/debian/pubkey.gpg | sudo apt-key add -
echo "deb https://dl.yarnpkg.com/debian/ stable main" | sudo tee /etc/apt/sources.list.d/yarn.list
Jika berhasil, kemudian lakukan update dan install yarn. Ketik perintah berikut:
sudo apt-get update && sudo apt-get install yarn
Kemudian, periksa versi Yarn yang terpasang untuk memastikan installasi berhasil.
yarn --version

Install React Native CLI

Langkah selanjutnya adalah menginstall React Native CLI, ketik perintah berikut:
yarn add global react-native-cli
Periksa versi dari React Native, ketik perintah berikut ini:
react-native --version

Install Watchman

Pada langkah ini kita akan menginstall Watchman, sebuah tools untuk memonitor perubahan files. Kita akan menginstall Watchman dari Source karena memang metode ini yang tersedia. Ketik perintah berikut satu persatu untuk memastikan tidak ada error terjadi:
sudo apt-get install git
git clone https://github.com/facebook/watchman.git
cd watchman/
git checkout v4.7.0
sudo apt-get install -y autoconf automake build-essential python-dev
./autogen.sh 
./configure 
make
sudo make install
Kemudian periksa versi dari Watchman untuk memastikan installasi sukses, ketik:
watchman --version
Selanjutnya, lakukan konfigurasi agar Watchman berjalan lancar.
echo 999999 | sudo tee -a /proc/sys/fs/inotify/max_user_watches
echo 999999 | sudo tee -a  /proc/sys/fs/inotify/max_queued_events
echo 999999 | sudo tee  -a /proc/sys/fs/inotify/max_user_instances
watchman  shutdown-server

Install Java Development Kit

Selanjutnya, install Oracle JDK untuk compiling source code saat kita membuat aplikasi. Sebelumnya kita tambahkan repositori official dari Oracle JDK:
sudo add-apt-repository ppa:webupd8team/java
sudo apt-get update
Kemudian install Oracle JDK, ketik:
sudo apt-get install oracle-java8-installer
Jika tidak ada pesan error saat proses installasi di atas, selanjutnya tambahkan variable pada environment kita.
nano ~/.bashrc
Kemudian, masukan text berikut pada akhir baris file di atas:
export JAVA_HOME="/usr/lib/jvm/java-8-oracle"
export JDK_HOME="/usr/lib/jvm/java-8-oracle"
export PATH=$JAVA_HOME/bin:$PATH
Jika merasa sudah benar, tekan CTRL+O untuk menyimpan kemudian CTRL+X untuk keluar dari text editor Nano.
Kemudian ketik perintah berikut untuk reload file .bashrc:
source ~/.bashrc
Dan, selanjutnya kita cek versi dari Oracle JDK dengan mengetik perintah berikut:
javac -version
Jika tidak ada pesan error, maka proses installasi Oracle JDK berhasil.

Catatan: Anda juga bisa menggunakan OpenJDK selain Oracle JDK.

Install Android SDK (Android Studio)

Kunjungi situs https://developer.android.com/studio/index.html, kemudian download Android Studio pada situs tersebut. Jika proses download sudah selesai, kemudian extract file tersebut dan copy ke /opt/android-studio. Silahkan ketik perintah berikut:
sudo apt-get install unzip
unzip android-studio-ide-xxxx-linux.zip
mv android-studio /opt/android-studio
Jika tidak ada error, kemudian jalankan Android Studio untuk melakukan konfigurasi dengan perintah berikut:
cd /opt/android-studio/bin
./studio.sh
Kemudian, akan muncul jendela dengan dua opsi. Pilih opsi paling bawah yang bertuliskan "I do not have a previous ...." dan klik Ok.
Pilih Custom installation saat pertama kali menjalankan Android Studio. Pastikan anda mencentang opsi berikut ini:
  • Android SDK 
  • Android SDK Platform 
  • Android Virtual Device 
Klik "Next" untuk mendownload dan memasang komponen yang di pilih. Jika sudah selesai, tambahkan variable lagi pada environment kita. Ketik:
nano ~/.bashrc
Kemudian masukan text di bawah ini tepat di bawah text JAVA_HOME atau JDK_HOME.
export ANDROID_HOME=${HOME}/Android/Sdk 
export PATH=${PATH}:${ANDROID_HOME}/tools 
export PATH=${PATH}:${ANDROID_HOME}/platform-tools
Jika merasa sudah benar, tekan CTRL+O untuk menyimpan kemudian CTRL+X untuk keluar dari text editor Nano.
Kemudian ketik perintah berikut untuk reload file .bashrc:
source ~/.bashrc

Langkah selanjutnya, Download Build-Tools dan SDK yang di butuhkan.
React Native membutuhkan SDK Android 6.0 (Marshmallow). Untuk memasangnya, buka SDK Manager, klik "Configure" pada jendela "Welcome to Android Studio".

SDK Manager juga bisa di akses pada menu Android Studio → "Preferences" , di bawah Appearance & Behavior → System Settings → Android SDK.

Pilih "SDK Platforms" pada jendela SDK Manager, kemudian centang "Show Package Details" pada bagian bawah jendela. Cari Android 6.0 (Marshmallow) kemudian "expand" untuk melihat daftar yang ada, pastikan daftar di bawah ini di centang:
  • Google APIs
  • Intel x86 Atom System Image
  • Intel x86 Atom_64 System Image
  • Google APIs Intel x86 Atom_64 System Image
Selanjutnya, pilih tab "SDK Tools" pada bagian atas jendela. Dan centang "Show Package Details" pada bagian bawah jendela. Cari "Android SDK Build Tools" kemudian "expand" untuk melihat daftar yang ada, pastikan Android SDK Build-Tools 23.0.1 di centang.
Kemudian, klik tombol "Apply" untuk mendownload paket yang di butuhkan. Tunggu sampai proses download selesai.

Testing installasi React Native Anda

Ketik perintah berikut untuk membuat project baru:
react-native init AwesomeProject 
cd AwesomeProject
Kemudian, coba kita jalankan. Ketik perintah berikut: (Catatan: Anda harus menjalankan sebuah Android Virtual Device terlebih dahulu)
react-native run-android

Jika proses build berhasil dan muncul pesan error pada aplikasi Android kita, kita harus menjalankan Development Server terlebih dahulu:
yarn start

Jika tidak ada pesan error, maka aplikasi Android anda akan menampilkan layar berikut pada AVD (Android Virtual Device) Anda.


Sekian, terimakasih.
- Em Suryadi

Sumber:
  1. https://facebook.github.io/react-native/docs/getting-started.html
  2. https://medium.com/@vonchristian/how-to-setup-watchman-on-ubuntu-16-04-53196cc0227c
  3. http://tipsonubuntu.com/2016/07/31/install-oracle-java-8-9-ubuntu-16-04-linux-mint-18/
  4. https://developer.android.com/studio/index.html

Show Comments