[ React Native ] Introduction and Installation

Pengembangan aplikasi mobile saat ini menjadi semakin seksi terutama aplikasi Android dan iOS. Para penyedia layanan melalui website pun banyak yang menyediakan layanannya dalam bentuk aplikasi smartphone. Pada kenyataannya pengembangan aplikasi smartphone yang kompleks tidaklah mudah. Ditambah lagi kebutuhan pengembangan untuk platform Android dan iOS guna memenuhi kebutuhan pengguna yang sebagian besar menggunakan dua jenis platform tersebut. Dari permasalahan tersebut, telah bermunculan beberapa framework yang menciptakan tools untuk mempermudah pengembangan aplikasi Android dan iOS. Apa saja framework tersebut?

Hybrid App

Pengembangan aplikasi  hybrid menampilkan komponen web ke dalam aplikasi smartphone dengan menggunakan webview. Dengan hybrid anda cukup menulis satu buah aplikasi dan akan berjalan pada platform Android dan iOS. Walaupun hanya menggunakan webview, pengembangan dengan hybrid tetap memungkinkan anda mengakses hardware dari perangkat mobile. Kelemahan dari hybrid adalah bukan aplikasi native dan berjalan pada webview sehingga aplikasi hybrid memiliki performa masih kalah jika dibandingkan aplikasi native. Sedangkan kelebihannya adalah kemudahan dalam pengembangannya, terutama untuk anda yang telah terbiasa dengan pemrograman web. Pengembangan Hybrid menggunakan HTML5, Javascript dan CSS. Terdapat beberapa framework dalam hybrid seperti phone gap, cordova dengan ionic, kendoui, dll. Berdasarkan pengalaman pribadi pengembangan aplikasi dengan hybrid cukup mudah, running aplikasi dapat dilakukan lewat browser (tidak perlu berdarah-darah dengan emulator yang sangat berat). Tetapi untuk pengembangan aplikasi kompleks perlu anda pertimbangkan kembali karena performa yang masih di bawah aplikasi native.

Xamarin

Xamarin adalah framework yang dimiliki Microsoft yang memungkinkan anda membangun aplikasi Android, iOS dan Windows Phone dengan bahasa pemrograman C#. Berbeda dengan hybrid, kelebihan pengembangan dengan Xamarin adalah aplikasi dibangun dengan native dan karenanya Xamarin memberikan performa yang baik. Sedangkan kelemahannya pengembangan dengan Xamarin tidaklah mudah. Jika anda tidak terbiasa menggunakan bahasa pemrograman C# dengan .NET kemungkinan anda akan cukup kesulitan untuk menggunakan Xamarin. Pada Xamarin anda tetap harus memodifikasi code anda untuk masing-masing platform Android, iOS dan Windows Phone.

React Native

Jika hybrid menggunakan pemrograman web dan Xamarin dengan native yang dikonversi dari C#, kemudian muncul Facebook yang mengembangkan React Native. React Native adalah framework besutan Facebook yang memungkinkan anda membuat aplikasi Android dan iOS dengan Javascript. Walau dibangun dengan Javascript, React Native merupakan aplikasi native dimana komponen javascript akan dikonversi menjadi komponen native Android atau iOS. Anda juga membutuhkan iOS dan Android sdk dalam pengembangan dengan react native. Kelebihan dari React Native adalah performanya yang baik karena merupakan aplikasi native. Pengembangan dengan javascript juga menjadi keuntungan tersendiri bagi developer. Kekurangan dari react native anda harus memahami react tidak hanya javascript.

Pada tulisan selanjutnya saya akan membahas proses instalasi React Native. Untuk menjelajah react native lebih lanjut silahkan buka website https://facebook.github.io/react-native/. Berikut ini adalah panduan instalasi menggunakan mac ox, untuk proses instalasi pada windows atau linux dapat dilihat di https://facebook.github.io/react-native/docs/getting-started.html. Proses instalasi react native untuk development aplikasi ios dan android dilakukan terpisah.

Instalasi Pada iOS

Untuk melakukan instalasi react native pada IOS development, yang ada butuhkan adalah node.js, watchman, React Native command line interface, dan xcode.

Node.js dan Watchman dapat anda instal menggunakan Homebrew : http://brew.sh/.

Installasi Homebrew

Silahkan buka website homebrew, kemudian buka terminal pada mac os. Masukkan perintah berikut :

/usr/bin/ruby -e "$(curl -fsSL https://raw.githubusercontent.com/Homebrew/install/master/install)”. 

Perintah tersebut akan melakukan instalasi pada homebrew pada PC anda.

Catatan : Jika pada proses instalasi homebrew terdapat pesan :

“You have not agreed to the Xcode license.
Before running the installer again please agree to the license by opening
Xcode.app or running:
    sudo xcodebuild -license”

silahkan buka xcode anda lalu klik agree pada xcode license. Jika telah sukses melakukan instalasi homebrew, maka akan muncul pesan :

==> Installation successful!
==> Next steps
Run `brew help` to get started
Further documentation: https://git.io/brew-docs

Installasi Node.js dan Watchmen

Setelah selesai melakukan instalasi homebrew, lakukan instalasi node.js dan watchmen dengan memasukkan perintah berikut pada terminal anda :

  • brew install node (untuk installasi node.js)
  • brew install watchman (untuk installasi watchman)

Installasi React Native

Setelah selesai melakukan node.js dan watchman, kita akan melakukan instalasi react native menggunakan fitur npm yang dimiliki node.js. Ketik perintah berikut pada terminal anda untuk melakukan instalasi react native : npm install -g react-native-cli.

Instalasi Xcode

Buka mac app store anda lalu cari aplikasi xcode, kemudian install aplikasi xcode.

Membuat project React Native

Setelah melakukan installasi semua komponen yang dibutuhkan, sekarang kita mencoba membuat sebuah aplikasi react native. Jalankan perintah berikut di terminal anda :

react-native init myfirstApp 

Perintah ini digunakan untuk membuat sebuah project react native, aplikasi react-native akan diinstal dan memakan cukup waktu untuk menjalankannya. Setelah proses instalasi selesai, masukkan perintah berikut :

cd myfirstApp 

Perintah di atas akan mengarahkan ke path directory project yang telah dibuat. Masukkan perintah berikut untuk menjalankan aplikasi yang telah dibuat.

react-native run-ios

Jika berhasil maka akan muncul ios emulator seperti gambar berikut :

screen-shot-2016-10-29-at-2-32-41-pm

Tampilan di sebelah kiri adalah tampilan dari code “index.ios.js” sedangkan tampilan di sebelah kanan adalah tampilan dari emulator ios.

Instalasi ANDROID

Instalasi pada android juga memerlukan komponen node.js, watchman dan React Native command line interface. Sebagai tambahan untuk menjalankan androidnya, kita juga harus  memiliki android studio beserta android sdk-nya.

Instalasi Android Studio

Unduh android studio pada tautan berikut : https://developer.android.com/studio/install.html dan lakukan instalasi Android studio pada PC anda. Pastikan anda sudah melakukan konfigurasi SDK android anda, caranya? Ketika anda membuka android studio, pada menu halaman welcome pilih tombol “configure” kemudian pilih SDK Manager.

screen-shot-2016-10-29-at-2-34-04-pm

akan tampil menu SDK seperti berikut :

screen-shot-2016-10-29-at-2-35-34-pm

Anda dapat melakukan pengaturan konfigurasi SDK baik merubah path, melakukan update SDK, dll.

React Native command line interface membutuhkan ANDROID_HOME variabel agar dapat mendapatkan path dari android sdk yang kita miliki. Lakukan setting nilai variabel ANDROID_HOME dengan memasukkan perintah berikut pada terminal anda :

 export ANDROID_HOME=pathAndroidAnda

Kemudian jalankan aplikasi anda dengan memasukkan perintah berikut pada terminal :

react-native init myfirtsApp
cd myfirstApp
react-native run-android

Kode di atas sama dengan kode untuk menjalankan react-native pada aplikasi IOS, hanya saja ketika akan menjalankan aplikasi anda perlu mendefinisikan perintah run-android. Berikut tampilan aplikasi android yang telah dibuat :

screen-shot-2016-10-29-at-2-37-18-pm

Catatan : jika aplikasi hanya menampilkan halaman blank berwarna putih, buka SDK command prompt anda, kemudian ketikkan perintah :

adb reverse tcp:8081 tcp:8081

Jika tampilan pada PC anda menampilkan halaman yang sama seperti gambar di atas, artinya anda telah berhasil melakukan instalasi react-native pada IOS dan android..

Happy coding…

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s

%d bloggers like this: