Created by: Anisa Damayanti, S.Kom. For Study Purpose Only!
Pada tutorial kali ini, kita akan membuat sebuah aplikasi Todo List sederhana menggunakan React Native Expo, kemudian menghubungkannya dengan Firebase Authentication dan Cloud Firestore.
Aplikasi yang akan kita bangun diberi nama My Todolist Gue. Aplikasi ini nantinya dapat digunakan untuk melakukan register dan login, mengelola data Todo, menyimpan data pengguna secara online menggunakan Cloud Firestore.
Dalam proses pembuatannya, kita akan menggunakan beberapa teknologi utama:
React Native: untuk membangun aplikasi mobile.
Expo: untuk membantu proses pengembangan dan menjalankan aplikasi React Native.
Firebase Authentication: untuk menangani proses register dan login pengguna.
Firebase Cloud Firestore: untuk menyimpan data pengguna dan Todo secara online.
Tutorial ini dibuat secara bertahap agar setiap teknologi dapat dipahami sebelum digunakan dalam aplikasi.
Pada Part 1 ini, kita belum akan membuat fitur Todo. Kita akan terlebih dahulu menyiapkan framework, project React Native Expo, dan dependency yang nantinya akan digunakan pada tahapan berikutnya.
A. Tools Equipment
Node.js
IDE Visual Studio Code
Perangkat fisik Android/iOS yang sudah ter-install Expo Go (sudah login akun)
Web Browser with latest version (Chrome, Chrome Developer, Mozilla Firefox, Microsoft Edge)
Pada VSCode pastikan sudah membuka folder project yang akan dijadikan wadah utama project yang akan dibangun
contoh sudah membuka folder reactnative
Buka terminal di dalam folder project reactnative jalankan perintah: npx create-expo-app@latest my-todolist-gue –template blank@57, lalu tekan Enter
pilih New Terminal
1. menjalankan perintah npx create-expo-app@latest my-todolist-gue –template blank@57 (penamaan project dapat diubah, tidak harus bernama my-todolist-gue) 2. tampilan terminal jika berhasil menginstall expo yang bernama my-todolist-gue
Pada tab Explorer akan otomatis bertambah 1 folder project baru yang bernama my-todolist-gue
Selanjutnya jalankan perintah: cd my-todolist-gue, lalu tekan Enter
setelah menekan Enter pada perintah cd my-todolist-gu, maka akan masuk ke dalam folder my-todolist-gue
Lalu tambahkan depedency React Navigation dengan menjalankan perintah: npm install @react-navigation/native @react-navigation/bottom-tabs, lalu tekan Enter
1. menjalankan perintah npm install @react-navigation/native @react-navigation/bottom-tabs 2. tampilan terminal jika berhasil menginstall
Lalu tambahkan depedency pendukung React Navigation dengan menjalankan perintah: npx expo install react-native-screens react-native-safe-area-context, lalu tekan Enter
1. menjalankan perintah npx expo install react-native-screens react-native-safe-area-context 2. tampilan terminal jika berhasil menginstall
Lalu tambahkan depedency Icon dengan menjalankan perintah: npx expo install @expo/vector-icons, lalu tekan Enter
1. menjalankan perintah npx expo install @expo/vector-icons 2. tampilan terminal jika berhasil menginstall
Lalu tambahkan depedency Firebase dengan menjalankan perintah: npm install firebase@12.19.0, lalu tekan Enter
1. menjalankan perintah npm install firebase@12.19.0 2. tampilan terminal jika berhasil menginstall
Lalu tambahkan depedency AsyncStorage dengan menjalankan perintah: npx expo install @react-native-async-storage/async-storage, lalu tekan Enter
1. menjalankan perintah npx expo install @react-native-async-storage/async-storage 2. tampilan terminal jika berhasil menginstall
Lalu tambahkan depedency web sebagai Live Preview dengan menjalankan perintah: npx expo install react-dom react-native-web, lalu tekan Enter
1. menjalankan perintah npx expo install react-dom react-native-web 2. tampilan terminal jika berhasil menginstall
Kemudian login dengan akun Expo pribadi (email/username & password) di terminal komputer agar dapat dijalankan di aplikasi Expo Go dengan menjalankan perintah: npx expo login, lalu tekan Enter
Jika berhasil login, maka dapat mencoba mengecek akun Expo yang telah dimasukkan dengan menjalankan perintah: npx expo whoami, lalu tekan Enter
setelah menekan Enter pada perintah npx expo whoami, maka akan memunculkan akun Expo pribadi yang bernama anisadamayanti
Selanjutnya kembali me-running project dengan menjalankan perintah: npx expo start -c, lalu tekan Enter
1. menjalankan perintah npx expo start -c 2. tampilan terminal jika berhasil akan memunculkan QR Code yang siap untuk di scan 3. menampilkan web sebagai Live Preview dengan alamat url http://localhost:8081
Kemudian buka aplikasi Expo Go di device Android/iOS, disarankan untuk login dengan akun Expo yang sama seperti login di terminal dan menggunakan sinyal internet yang sama antara komputer/laptop dengan device
jika sudah login dengan akun Expo yang sama maka muncul project my-todolist-gue
output dari my-todolist-gue
Pada Web Browser seperti Chrome, Chrome Developer, Mozilla Firefox ataupun Microsoft Edge membuka url berikut: http://localhost:8081
a founder of december skies code, a software engineering teacher, and a lifelong learner who just tries her best at whatever she does.
let's work together!
