React Native untuk Masa Depan Mobile Development

PENGENALAN REACT NATIVE & LARAVEL

React Native merupakan framework open source besutan facebook yang memungkinkan developer untuk mengembangkan trully native app atau aplikasi yang benar-benar terasa native baik Android ataupun iOS dengan menggunakan javascript. Hal ini memungkinkan karena React Native benar-benar menggunakan Native Component Android & iOS yang dikemas dalam Javascript, dan bukan menggunakan Webview seperti pada teknologi mobile web terdahulu seperti “cordova/phonegap”.

Saya memperkenalkan dan menganjurkan menggunakan teknologi ini bukan tanpa alasan. Saya sudah membuktikan sendiri dengan membangun beberapa aplikasi mobile enterprise yang sudah dipakai oleh orang banyak sehari-hari dengan React Native baik Android maupun iOS. Selain itu React Native juga membantu kita mempercepat proses development, karena hanya membutuhkan javascript saja untuk membangun sebuah UI yang stable.

React Native juga digunakan oleh beberapa “GIANT COMPANY” atau perusahaan raksasa, yang daftarnya bisa Teman-teman lihat pada showcase React Native (https://facebook.github.io/react-native/showcase.html). Giant Company aja pakai, kenapa kita tidak??

Gambar 1.1 React Native Showcase

Walaupun demikian, Anda tidak harus terpaku dengan React Native untuk membangun aplikasi Mobile. Real Native android atau iOS masih menjadi alternatif yang baik untuk saat ini.


INSTALLASI RN ANDROID PADA MAC OS

Node & Watchman

Facebook merekomendasikan untuk melakukan installasi Node dan Watchman menggunakan Homebrew (http://brew.sh/). Jalankan perintah berikut pada Terminal setelah melakukan installasi Homebrew:

$ brew install node
$ brew install watchman

React Native CLI

Pastikan Anda sudah sukses melakukan installasi Node.js, kemudian jalankan perintah berikut:

$ npm install -g react-native-cli

Android Development Environment

  1. Download dan Install Android Studio

Anda dapat mendownload Android studio melalui link berikut:
 https://developer.android.com/studio/install.html

Android studio diperlukan untuk menjalankan dan mengetest aplikasi React Native Anda.

Note: Android Studio membutuhkan Java SE Development Kit (JDK), versi 8. Untuk memastikan versi java Anda, ketik “javac -version” pada terminal/command prompt. Jika Anda belum memiliki JDK terinstall, silakan ikuti link berikut:

http://www.oracle.com/technetwork/java/javase/downloads/jdk8-downloads-2133151.html

2. Install AVD dan HAXM

Pilih “Custom” Installation ketika menjalankan Android Studio pertama kali. Pastikan mencentang semua opsi berikut:

  • Android SDK
  • Android SDK Platform
  • Performance (Intel ® HAXM)
  • Android Virtual Device

Klik “Next” untuk menginstall semua komponen, kemudian lakukan konfigurasi VM acceleration pada sistem Anda melalui link berikut: https://developer.android.com/studio/run/emulator-acceleration.html#vm-linux

Note: Jika Anda sudah pernah melakukan installasi Android Studio sebelumnya, Anda masih dapat melakukan Installasi HAXM tanpa melakukan custom installation.

3. Install Android 6.0 (Marshmallow) SDK

Secara default, Android studio akan menginstall versi Android SDK terbaru. Sementara React Native 0.41 memerlukan Android 6.0 SDK. Untuk menginstallnya, jalankan SDK Manager, klik “Configure” pada layar “Welcome to Android Studio”.

SDK Manager juga dapat ditemukan di “Preferences” menu, pada Appearance & Behavior → System Settings → Android SDK.

Pilih “SDK Platforms” dari dalam SDK Manager, kemudian pilih next “Show Package Details”. Lihat dan expand Android 6.0 (Marshmallow), kemudian pastikan semua pilihan berikut terpilih:

  • Google APIs
  • Intel x86 Atom System Image
  • Intel x86 Atom_64 System Image
  • Google APIs Intel x86 Atom_64 System Image

Kemudian, pilih “SDK Tools” dan pilih box next to “Show Package Details” juga. Lihat dan expand “Android SDK Build Tools”, kemudian pastikan bahwa “Android SDK Build-Tools 23.0.1” terpilih.

4. Setup ANDROID_HOME environment variable

React Native command line interface membutuhkan “ANDROID_HOME” environment variable untuk dijalankan.

Tambahkan beberapa baris berikut ke dalam ~/.bashrc (atau config file sesuai kebutuhan Anda):

export ANDROID_HOME=${HOME}/Android/Sdk
export PATH=${PATH}:${ANDROID_HOME}/tools
export PATH=${PATH}:${ANDROID_HOME}/platform-tools

Pastikan path di atas sesuai dengan path Android SDK, jika Anda tidak melakukan installasi Android SDK dengan Android Studio.

Menjalankan Android Virtual Device

Gambar 1.2 Menjalankan AVD pada Mac Os

Anda dapat melihat list of available AVDs dengan membuka “AVD Manager” dengan Android Studio. Anda juga dapat menjalankan perintah berikut melalui terminal/command prompt:

$ android avd

Setelah masuk ke “AVD Manager”, pilih AVD mu dan klik “Start…”.


INSTALLASI RN iOS PADA MAC OS

Node & Watchman

Facebook merekomendasikan untuk melakukan installasi Node dan Watchman menggunakan Homebrew (http://brew.sh/). Jalankan perintah berikut pada Terminal setelah menginstall Homebrew:

$ brew install node
$ brew install watchman

React Native CLI

Pastikan Anda sudah sukses melakukan installasi Node.js, kemudian jalankan perintah berikut:

$ npm install -g react-native-cli

Xcode

Cara termudah untuk melakukan installasi Xcode adalah melalui Mac App Store (https://itunes.apple.com/us/app/xcode/id497799835?mt=12). Menginstall Xcode juga akan menginstall iOS Simulator dan semua tools yang dibutuhkan untuk melakukan build aplikasi iOS.


INIT RN PROJECT STACK OVERFLOW CLONE (STAG OVERHEAT)

Setelah melakukan bermacam installasi, gunakan React Native command line interface untuk menggenerate aplikasi React Native baru yang akan kita beri nama “StagOverheat”, kemudian jalankan perintah “react-native-run-ios”, atau arahkan Xcode pada folder yang dituju.

$ react-native init StagOverheat
$ cd StagOverheat
$ react-native run-ios

Pada blog ini, penulis hanya akan menggunakan Xcode dan iOS sebagai Emulator untuk mensimulasikan aplikasi yang akan dibuat. Untuk Android, Anda dapat dengan mudah menjalankan emulator Android terlebih dahulu kemudian cukup jalankan perintah “react-native run-android”.

Untuk pemula dalam dunia programming, mungkin langkah di atas sedikit kurang jelas. So, mari kita praktekkan secara visual.

  1. Init RN Project dengan nama StagOverheat

Anda bebas membuat project pada folder mana saja yang Anda inginkan. Pada Mac saya, saya menggunakan direktori ~/Documents/react-apps

$ cd Documents/react-apps/
$ react-native init StagOverheat

Tunggu beberapa saat sehingga tampilan seperti gambar 1.3.

Gambar 1.3 Init StagOverheat Sukses

2. Change Directory ke StagOverheat

Setelah project StagOverheat ter-create dengan sempurna, Anda dapat masuk ke dalam folder StagOverheat.

Gambar 1.4 Pindah Direktori ke StagOverheat

3. Jalankan iOS Simulator melalui Xcode

Anda dapat menjalankan aplikasi dengan mengetikkan “react-native run-ios”, atau dengan cara membuka Xcode sebagai berikut pada folder aplikasi Anda.

Gambar 1.5 Buka xcodeproj dari folder aplikasi

Double klik pada StagOverheat.xcodeproj sehingga Xcode tampil pada Mac Anda.

Gambar 1.6 Tampilan XCODE

Terdapat 3 tombol utama yang harus Anda perhatikan, dilihat dari kiri, pertama terdapat tombol play untuk mulai menjalankan iOS Simulator, kedua adalah Schema, pastikan sesuai dengan gambar di atas, ketiga ada pilihan device yang akan digunakan untuk menjalankan simulator, pada gambar di atas kita pilih iphone 5s karena lebih nyaman dilihat. Jika semua sudah sesuai, klik tombol play, pastikan muncul tulisan “Build Success” dan tampilan simulator Anda seperti berikut:

Gambar 1.7 Tampilan iOS Simulator

4. Struktur Kode

Buka project folder “StagOverheat” dengan Text Editor atau IDE yang Anda sukai. Pada buku ini saya menggunakan Atom sebagai Text Editor (https://atom.io/). Untuk membuka, cukup ketikkan perintah sebagai berikut pada project StagOverheat:

$ atom .
Gambar 1.8 Struktur Kode StagOverheat

Pada gambar 1.8, terlihat struktur kode React Native yang dihasilkan oleh react-native-cli. Karena kita menggunakan iOS, maka kita akan memfokuskan ke file “index.ios.js”. Jangan khawatir untuk Anda yang ingin membangun aplikasi Android, kita akan membahasnya pada bahasan selanjutnya.

Gambar 1.9 Kode file index.ios.js

Mari kita bahas satu persatu kode pada gambar 1.9:

  1. Import Object Component dari class React.
  2. Import Component-component React Native yang dibutuhkan.
  3. Exporting Main class / Class utama yang bernama StagOverheat, yang mewarisi sifat dari Component yang telah kita import dari React.
  4. Me-Render atau menampilkan hasil ke layar. Fungsi render harus dimiliki setiap component, sehingga component dapat menampilkan data ke-layar. Text digunakan untuk menampilkan text. Sementara View digunakan sebagai ganti “div” pada html, dan Styles akan dijelaskan pada bab berikutnya. Untuk penjelasan kode, akan lebih mudah dengan melihat gambar berikut:
Gambar 1.10 Detail Isi Render

Demikian Tulisan singkat saya kali ini. Semoga membantu teman-teman untuk memulai project dengan menggunakan React Native. Tulisan ini merupakan sebagian dari Ebook saya yang berjudul “React Native and Laravel for Future Mobile Development — First Series”. Jika Anda berminat untuk menggali lebih dalam tentang React Native dan membeli Ebook tersebut, silakan lihat detailnya pada gambar berikut untuk detail harga & pemesanan .

Ebook React Native and Laravel for Future Mobile Development — First Series

PROMO WAKTU TERBATAS YAAA….

Benefit Setelah Membeli: 
- Free Discussion di group jika mengalami kesulitan atau mau sharing
- Source code kita berikan melalui GIT
Daftar isi: http://text-share.com/view/a5aaf052
Video demo app Stag Overheat (stack overflow clone sederhana):https://www.screencast.com/t/dHv5Se1LY

Btw ada Event Black Friday nih, jadi cuma 175rb, grab it fast!