Post

Build Your First Mobile App With React - Native and Expo

Salam hangat, sahabat sharehubid. Pada article kali ini, sharehubid akan memberikan tutorial tentang pembuatan Mobile App dengan menggunakan React - Native & Expo. Sebelum kesana, sebelumnya kita berkenalan dulu dengan React - Native dan juga Expo.

Secara Singkat, React - Native merupakan javascript frame work yang digunakan untuk mengembangkan Mobile App ataupun Smartphone App. Kelebihannya yaitu aplikasi yang dikembangkan dapat berjalan pada platform Android dan jg IOS, walau tentunya perlu sedikit penyesuaian di masing - masing OS. Nah, sedangkan Expo adalah suatu set tools, library, dan services yang berbasis React - Native. Hanya saja dengan menggunakan Expo, pengembangan aplikasi menjadi lebih cepat dengan kelebihan - kelebihan Expo sebagai berikut :

  • Expo menggunakan Expo SDK, jadi kita tidak memerlukan Android Studio maupun Xcode.
  • Debugging aplikasi dapat dilakukan langsung pada device dengan aplikasi Expo pada Android / IOS dengan membagikan link ataupun QR Code dari project yang dibuat.
  • Beberapa fitur yang sering dipakai developer seperti Social Media Authentication dan Push Notification sudah tersedia.
  • Beberapa library seperti camera, maps, dan gallery sudah disediakan dan dapat berjalan pada Android dan IOS.
  • Membuat release versioning juga menajdi lebih mudah karena dilakukan oleh Expo Server.

Tentunya dalam pengembangan aplikasinya, terdapat kelebihan dan kekurangan tersendiri dalam pengunaan Native Android atwpun IOS dengan menggunakan React - Native dan juga Expo. Namun hal itu tidak saya bahas disini karena tujuan article ini adalah untuk memberikan tutorial pembuatan mobile app sederhana dengan menggunakan Expo.

Baiklah, pertama - tama yang harus dilakukan adalah pastikan pada komputer anda sudah terinstall NodeJs. Untuk yang sudah mengikuti tutorial saya tentang Laravel dan VueJs tentunya sudah menginstall NodeJs. Bila belum, dapat di download di sini.

Setelah komputer anda terinstall NodeJs, maka buka command prompt ataupun terminal anda (disini saya menggunakan command prompt karena mayoritas pengguna windows), lalu instal Expo CLI secara global dengan perintah " npm install -g expo-cli  ". Sembari menunggu proses installasi, anda dapat mendownload Expo client pada mobile device anda. Download pada Play Store untuk Android atau download pada App Store untuk pengguna IOS. Karena saya pengguna android maka saya download dari Play Store seperti berikut.

download expo on playstore

Bila sudah berhasil melakukan isntallasi Expo CLI pada komputer dan Expo Client pada mobile device anda, masih pada command prompt anda dan silahkan ganti active directory ke root folder anda masing - masing. Untuk saya sendiri, saya membuat directory dengan nama " react-native-project " pada directory C: komputer saya. Sebagai catatan, pastikan koneksi internet anda berjalan baik saat instalasi maupun pengembangan aplikasi. Untuk khususnya pada pengembangan aplikasi, pastikan pula untuk mobile device anda berada pada satu jaringan yang sama dengan komputer anda. Sebagai contoh saya menggunakan jaringan wifi yang sama untuk komputer dan smart phone saya.

Bila berada pada directory active masing - masing maka ketik perintah " expo init first-project " untuk membuat new project. Anda akan mendapatkan jendela interactive yang memberikan pilihan untuk membuat blank document atau tabs. Untuk kali ini kita akan membuat dengan blank jadi silahkan pilih blank seperti pada gambar.

Bila sudah selesai, pindahkan active directory ke project yang baru saja dibuat, lalu ketikan perintah " expo start " dan tunggu hingga muncul QR Code seperti berikut.

Bila sudah tampil seperti pada gambar, maka buka expo client pada smart phone ataupun mobile device anda dan scan QR code tersebut dan tunggu hingga building javascript bundle selesai dan muncul tampilan awal seperti ini.

Tampilan Pertama

Sebagai informasi, mobile app yang akan kita buat adalah mobile app sederhana untuk menampilkan data API sebuah album music dan melakukan pembelian album tersebut ke amazon. Dan untuk text editor yang saya gunakan pada kali ini yaitu vscode, kalian bisa menginstallnya bila ingin menggunakannya juga. Pada vscode saya, juga terinstall beberapa extensions yang diperlukan seperti :

  • Bracket Pair Colorizer
  • Full React
  • Indent Rainbow
  • Material Icon Theme
  • Prettier Code Format

Baiklah, untuk selanjutnya akan saya lanjutkan pada article berikutnya mengingat proses yang akan kita lakukan nanti akan cukup panjang. Sekian yang dapat saya sampaikan, selebihnya saya ucapkan terima kasih.