Pertemuan #2

Pengembangan Aplikasi Mobile

Program Studi: Teknik Informatika

PL401A Advanced Programming
Author: Herva Emilda Sari, S.kom., M.T.I
Bahan Kajian
●Peralatan untuk belajar React Native
●Emulator React Native
●Menjalankan Aplikasi React Native
●Troubleshoot
●React Native CLI vs Create React Native
 Peralatan untuk Belajar React Native
Adapun peralatan yang harus kita siapkan untuk belajar
React Native adalah sebagai berikut:
1. Install Nodejs
2. Install NPM atau Yarn
3. Install Java JDK
4. Install Android SDK
5. Install React Native
 Install Node.js
Peralatan pertama yang harus ada di dalam komputer kita adalah Nodejs. Nodejs
merupakan sebuah runtime untuk menjalankan program Javascript di luar
browser.
https://nodejs.org/en/download/
 Memulai Aplikasi
Cara termudah untuk memulai adalah dengan Expo CLI.

Expo adalah seperangkat alat yang mendukung pengembangan

pembuatan aplikasi dengan React Native dalam hitungan menit.

Diperlukan juga Xcode dan Android Studio untuk melihat hasil dari
pemrograman.
 Install Expo CLI
Dengan asumsi bahwa kita telah menginstall aplikasi Node 10 LTS
atau lebih tinggi versinya, kita dapat menggunakan npm untuk
melakukan instalasi utility dengan baris perintah Expo CLI sebagai
berikut:
 Install Expo CLI
Kemudian jalankan perintah berikut ini untuk membuat project
aplikasi React Native baru dengan nama “AwesomeProject”
 React Native CLI
Ini adalah cara install dalam bentuk yang lain
disesuaikan dengan sistem operasi yang kita
gunakan apakah kita akan membuat aplikasi
untuk iOS atau Android.
 React Native CLI
Install Dependensi (untuk Android)
Kita membutuhkan Node, Watchman, React Native
CLI dan sebuah JDK serta Android Studio.
Meskipun kita menggunakan editor pilihan (misal visual
studo code) kita perlu menginstall Android Studio
untuk menyiapkan tool yang diperlukan untuk
membangun aplikasi React Native untuk Android.
 React Native CLI
Install Dependensi (untuk iOS)
Kita membutuhkan Node, Watchman, React Native
CLI dan Xcode.
Meskipun kita menggunakan editor pilihan (misal visual
studo code) kita perlu menginstall Xcode untuk
menyiapkan tool yang diperlukan untuk membangun
aplikasi React Native untuk iOS.
 Node, Watchman, JDK
Disarankan untuk menginstall Node, Watchman dan
JDK menggunakan Homebrew. Jalankan Perintah
berikut di terminal setelah menginstal Homebrew.
 Node, Watchman, JDK
Jika kita sudah menginstal Node di sistem kita, pastikan
Node versi 8.3 atau yang lebih baru.

Watchman adalah tools dari Facebook untuk memantau

perubahan dalam sistem file. Sangat disarankan Anda
menginstalnya untuk kinerja yang lebih baik.

Jika kita sudah menginstal JDK pada sistem kita, pastikan

itu adalah JDK 8 atau yang lebih baru.
 React Native CLI
Node hadir dengan npm, yang memungkinkan kita
menginstal interface baris perintah React Native.
Jalankan perintah berikut di terminal:
 Android Development Environment
Lakukan langkah dengan hati-hati berikut ini
• Install Android Studio
• Install Android SDK
 Instal Android Studio
Android Studio menginstal Android SDK terbaru secara default.
Namun, membangun aplikasi React Native dengan kode native
membutuhkan Android 9 (Pie) SDK. SDK Android
tambahan dapat diinstal melalui SDK Manager di Android
Studio.

Manajer SDK dapat diakses dari layar "Selamat datang di

Android Studio". Klik pada "Configuration", lalu pilih "SDK
Manager".
 Instal Android SDK
Unduh dan install Android Studio. Pilih pengaturan “custome”
ketika diminta untuk memilih jenis instalasi. Pastikan kotak pada
instalasi tercentang, seperti:

• Android SDK
• Platform Android SDK
• Kinerja (Intel ® HAXM) (Lihat di sini untuk AMD)
• Android Virtual Device
• Kemudian, klik "Next" untuk menginstal semua komponen ini.
Instal Android SDK
Manajer SDK juga dapat
ditemukan dalam dialog
"Preferences" Studio
Android, di bawah
Appearance & Behavior →
System Settings → Android
SDK.
 Instal Android SDK
Pilih tab “Platform SDK” dari dalam Manager SDK, lalu centang
kotak di samping “Show Package Detail” dibagian kanan bawah.

Cari dan entri Android 9 (Pai), lalu pastikan butir-butir berikut

dicentang:

• Platform Android SDK 28

• ntel x86 Atom_64 Sistem Image atau Google APIs. Intel x86
Atom System Image
 Instal Android SDK
Selanjutnya, pilih tab "SDK Tools" dan centang kotak di
samping "Show Package Detail". Cari dan perluas entri
"Android SDK Build-Tools", lalu pastikan 28.0.3 dipilih.

Terakhir, klik "Apply" untuk mengunduh dan menginstal

Android SDK dan alat bantu terkait.
 Konfigurasi ANDROID_HOME
React Native memerlukan beberapa Environment variabel yang
harus disiapkan untuk membangun aplikasi dengan kode native.

Tambahkan baris berikut ke file konfigurasi

$HOME/.bash_profile ATAU $HOME/.bashrc

.bash_profile khusus untuk bash.

Jika Anda menggunakan shell
lain, Anda perlu mengedit file
konfigurasi khusus shell yang
sesuai.
 Konfigurasi ANDROID_HOME
Ketik sumber $HOME/.bash_profile untuk memuat konfigurasi ke
shell Anda saat ini.

Verifikasi bahwa ANDROID_HOME telah ditambahkan ke path Anda

dengan menjalankan echo $PATH.

Pastikan Anda menggunakan jalur Android SDK dengan path yang benar.

Kita dapat cari lokasi aktual SDK pada dialog “Preferensi” Studio Android,
pada Appearance & Behavior → System Settings → Android SDK.
 Membuat Aplikasi Baru
Gunakan React Native Command Line Interface untuk generate
projek baru namanya: “AwesomeProject”

Ini tidak perlu jika kita mengintegrasikan React Native ke dalam aplikasi yang ada, jika kita "eject"
dari Create React Native App, atau jika Anda menambahkan dukungan Android ke proyek React
Native yang ada (lihat Platform Specific Code). Anda juga dapat menggunakan CLI pihak ketiga
untuk memasukkan aplikasi React Native Anda, seperti Ignite CLI.
 Persiapan Android Device
Anda akan memerlukan perangkat Android untuk menjalankan aplikasi
React Native Android.

Ini bisa berupa perangkat Android fisik, atau lebih umum, Anda dapat
menggunakan Perangkat Virtual Android yang memungkinkan Anda
untuk meniru perangkat Android di komputer Anda.

Apa pun itu, Anda harus menyiapkan perangkat untuk menjalankan

aplikasi Android untuk pengembangan.
 Menggunakan Physical Device
Jika kita menggunakan Physical Device, kita
dapat menggunakan itu untuk development di
tempatnya dengan menghubungkan komputer
dengan kabel USB dan dapat mengikuti instruksi
disini.
 Menggunakan Virtual Device
Jika kita menggunakan Android Studio untuk membuka
./AwesomeProject/android, kita dapat melihat list yang tersedia Android
Virtual Devices (ADVs) by opening “ADV manager” dari Android Studio.
Lihat icon berikut:

Jika kita baru saja menginstall Android Studio mungkin perlu membuat
ADV baru, pilih “Create Virtual Device...” lalu pilih telepon apa saja dari
daftar dan klik “next” lalu pilih gambar Pie API Level 28.
 Menjalankan Aplikasi React Native
Jalankan react-native run-android di dalam folder
project React Native:
 Menjalankan Aplikasi React Native
Jika seluruhnya di atur secara benar, kita seharusnya bisa
melihat aplikasi yang berjalan pada emulator

react-native run-android
hanyalah satu cara untuk menjalankan
aplikasi Anda. Anda juga dapat
menjalankan langsung dalam Android
Studio.
 Modifikasi Aplikasi
Sekarang Anda telah berhasil menjalankan aplikasi,
selanjutnya kita dapat modifikasi.

Buka App.js di editor teks pilihan Anda dan edit beberapa

baris.

Tekan tombol R dua kali atau pilih reload dari Developer

Menu (⌘M) untuk melihat perubahan Anda.
 Lanjutan...
Aktifkan Live Reload di Developer Menu. Aplikasi Anda
sekarang akan dimuat ulang secara otomatis setiap kali Anda
menyimpan perubahan apa pun!
Jika Anda ingin menambahkan Kode React Native baru ini ke
dalam aplikasi yang ada, lihat panduan Integrasi.
Jika Anda penasaran untuk mempelajari lebih lanjut tentang
React Native, lanjutkan ke Tutorial.
 Struktur React Native
package.json adalah dependensi atau inisiasi apa saja yang harus
kita install dan bagaimana cara menjalankan project
 Struktur React Native
app.json berisi identitas aplikasi
 Struktur React Native
app.json identitas aplikasi

Import dari library React

Import dari React Native

class

style
 Struktur React Native
folder assets adalah tempat kita meletakkan file yang dibutuhkan.
Terima Kasih