Cara Mudah Membuat Aplikasi React Native dan Building APK

Posted on by feri

Mumpung lagi rame nih bahasan tentang aplikasi react native, saya akan membocorkan sedikit tips dan trik bagaimana cara melakukan compile aplikasi Reactnative tanpa harus menunggu upload dan queque build apk nya.

Sebagai prolog mungkin ada yang belum tahu isi dari react native. Aplikasi react native merupakan aplikasi yang dibuat menggunakan bahasa javascript (atau typescript , versi terbaru js) yang pada awal sejarahnya merupakan aplikasi yang berjalan di embeded browser (cordova, ionic dan sejenisnya). Dengan disupport oleh facebook yang kemudian mengembangkan framework react ini menjadi disebut react native, karena dibuild dan dicompile dengan component native yang dapat dipanggil langsung via interface javascript dan struktur sintak penulisan componen baru dengan tag react.

Framework react native ini sangat bergantung pada nodejs untuk melakukan compiling (atau menurut saya lebih tepat disebut compresing) dan embeding source javascript menjadi code yang dapat berjalan di multi platform Android, Ios dan Web dengan satu code base. Hal inilah yang membuat react native sangat menarik untuk dipelajari, terlepas dari sisi performancenya yang tentu saja masih berada di bawah aplikasi native yang ditulis dengan java atau swift.

Ukuran APK ataupun IPK build dari reactnative ini tentu saja lebih besar dari APK pada umumnya yang dibuat dengan bahasa java karena react native memuat component embeded browser dan parsing (translating) UI code react menjadi UI embeded browser serta component yang menjadi bridge untuk mengakses native componen misalnya location, alert, filesystem dan lainnya, sebagai perbandingan APK react sederhana yang membuat hellowold bisa mencapai 40MB, sedangnkan apk helloworld dari java bisa berukuran dibawah 2MB.

A. Tools yang diperlukan

Baiklah sekarang kita akan memulai belajar cara mudah membuat aplikasi react native dengan cepat. Tool yang diperlukan:

  1. Laptop atau PC (bisa windows, linux atau mac), disini saya menggunakan Apple MacBook, pastikan RAM diatas 4 dan CPU minimal core i5 (agar buildnya tidak ngos-ngosan gaes).
  2. Koneksi internet yang cepat tanpa ganguan injek iklan (hal ini sedikit menyebalkan pada koneksi provider tertentu yang melakukan inject pada content web sehingga merusak development environtment, bisa ga sih provider ini dituntut? ), saya akalin menggunakan vpn ke singapore.
  3. Android studio dan Android SDK yang sudah terinstall JDK  (sebenarnya bisa tanpa android studio tetapi kita pilih opsi yang paling mudah karena didalamnya sudah ada JDK dan Android SDK tanpa harus install sendiri-sendiri)
  4. Editor text (sublime, visualstudio ataupun notepad++ )
  5. Node js (pastikan nodejs versi terbaru sudah terinstall, bisa donload disini https://nodejs.org/en/download/ ) atau jika di mac bisa install menggunakan brew.
  6. Install Expo pada hp android di playstore download disini 

 

B. Cek dan Instalasi Dependency modul: adb, yarn, react-native, npx, expo-cli dan turtle-cli

1. Cek Path sudah bisa panggil adb atau belum (cek system path bila belum)

adb version

2. Cek koneksi hp via kabel USB dan aktifkan mode debug pada HP

adb devices

3.Cek versi java nya dan environment path seperti JAVA_HOME, ANDROID_HOME (bisa disesuaikan masing-masing) seharusnya sudah bisa dipanggil (cek system path bila belum)

which java
which javac
java -version
echo $ANDROID_HOME

4. Cek versi nodejs
Buka cmd.exe (windows) atau terminal (macos), cek versi nodejs nya (npm)

npm -v

5. Install yarn

brew install yarn

6. Install reactnative

npm install -g react-native-cli

7. Install expo cli

npm install -g expo-cli

7. Install npx (bila belum atau versi react lama)

npm install -g npx

8. Install turtle-cli

npm install -g turtle-cli
turtle --version

9. Install python , curl dan wget (opsional, bila sudah punya xampp bisa pakai ini tinggal set document rootnya)

brew install python3
which python3

brew install curl
brew install wget

 

C. Membuat Project react native 

Sintaknya :  npx expo init <namaaplikasi>          

nanti akan muncul pilihan, pilih yang templatenya typescript dan tekan enter

npx expo init MyApp1

Tunggu sampai download template selesai mungkin akan butuh waktu beberapa menit.

Download Selesai, sekarang masuk ke folder aplikasi.

cd MyApp1
ls

 

D. Test dan Debug Aplikasi

1. Start metro builder

Untuk menjalankan aplikasi kita dapat menggunakan yarn untuk start aplikasi pada mode debug seperti berikut

cd MyApp1
yarn start

Kemudian akan terbuka browser default chrome atau firefox dan muncul menu metro builder.

Akan muncul menu  disebelah kiri dan qrcode, jika akan melakukan testing pada android, buka aplikasi Expo pada android dan scan QRCODE.

 

2. Start debug di HP

Sebagai catatan : HP dan Laptop harus berada di jaringan yang sama untuk menggunakan expo launcher ini.

2a. Tampilan Expo Launcher, Klik Scan QR Code dan scan qrcode diatas yang muncul pada browser

 

2b. Hasil tampilan aplikasi di HP

E. Melakukan compiling online dengan expo

Untuk membuat APK menggunakan modul expo kita harus melakukan tahap uploading dan compiling di servernya expo. Caranya adalah sebagai berikut

1. Register dan create Account di https://expo.io dengan email anda.

 

2. Jalankan expo builder pada console dan masukan :
nama package nya, serta pilih builder type nya : apk , nanti ada pilihan generate new keystore

(jika belum pernah pakai expo biasanya akan ditanyakan username dan password login akun expo.io ):

expo build:android

 

Minusnya kita perlu menunggu queque sampai proses yang lain selesai (pada versi gratis) dan harus subscibe ke versi berbayar  agar tidak menunggu queque terlalu lama.

3. Dashboard expo

https://expo.io/dashboard

 

4. Download Hasil APK
Klik Pada aplikasi akan muncul details dan link download aplikasi

 

 

F. Melakukan compiling offline

Seringkali compiling online menunggu terlalu lama karena banyaknya queque yang sedang dijalankan oleh expo services. Untungnya ada developer yang membuat tools yang keren dengan nama turtle-cli. Step untuk menginstall turtle sudah dibahas di Atas. Sebelum menggunakan turtle pastikan anda berada pada koneksi internet yang cepat karena biasanya turtle akan mendownload Android SDK terbaru dan tools lainnya.

1.Membuat Keystore untuk sign aplikasi (tanda tangan aplikasi apk, bisa juga dilakukan via android studio)

cd MyApp1
expo fetch:android:keystore

Copy paste result bagian text keystore credential, contohnya seperti berikut dan simpan (akan kita gunakan selanjutnya)

Keystore credentials
  Keystore password: xxxxxxxxxxx1
  Key alias:         kkkkkkkkkkk1
  Key password:      ppppppppppp1
Path to Keystore:  /Users/feri/Documents/nodejs/MyApp1/MyApp1.jks

2.Set expo url dan build dist exoport folder

cd MyApp1
rm -rf dist
expo export --dev --public-url http://127.0.0.1:8000

3.Jalankan python di folder dist agar serving foldernya dist (mengemulasikan expo server)

cd dist
python3 -m http.server

 

4.Building apk offline dengan turtle-cli

export EXPO_ANDROID_KEYSTORE_PASSWORD="kkkkkkk1"
export EXPO_ANDROID_KEY_PASSWORD="pppppp1"
turtle build:android \
  --type apk \
  --keystore-path /Users/feri/Documents/nodejs/MyApp1/MyApp1.jks \
  --keystore-alias "kkkkkkkkk1" \
  --allow-non-https-public-url \
  --public-url http://127.0.0.1:8000/android-index.json

Building APK Android

Hasil Apk build :

Install File Apk ke HP via USB Cable

adb install /Users/feri/expo-apps/@anonymous__MyApp1-7bbb4675716b452bbdd55f0595fb6b62-signed.apk

 

Demikian Cara Mudah Membuat Aplikasi React native, untuk cara layouting serta coding react native akan di bahas dalam tulisan lainnya.

Tulisan ini walaupun sudah disingkat di beberapa part, mungkin masih agak sedikit panjang karena saya jabarkan step by step satu persatu, Happy Coding.

 

Sumber Bacaan:

https://www.robincussol.com/build-standalone-expo-apk-ipa-with-turtle-cli