Hallo sahabat Koding Indonesia. Berjumpa kembali ditutorial membuat aplikasi android menggunakan React Native. Pada tutorial kali ini kita akan membuat aplikasi android menggunakan Create React Native App dan Expo, dengan studi kasus membuat aplikasi To Do List menggunakan Firebase.
Sebelumnya silahkan perhatikan video di bawah ini, kita akan membuat app seperti video di bawah ini:
Untuk mempersingkat waktu mari kita langsung saja memulai membuat projectnya.
Step 1: Membuat Project Pada Firebase
Pada tutorial sebelumnya: Bagian 7 Sign Up dan Login User Authentication, kita telah membahas bagaimana caranya membuat akun dan juga membuat project pada Firebase. Pada tutorial kali ini juga tidak jauh berbeda, kita akan membuat project baru pada akun Firebase yang telah dibuat sebelumnya atau kalian juga bisa membuat akun baru. Baiklah kita akan belajar bagaimana cara untuk membuat project di Firebase.
Membuat Project di Firebase
Pertama, silahkan buka halaman Firebase, selanjutnya pilih Go To Console:
Setelah itu akan terbuka halaman Console dan silahkan pilih Tambahkan Proyek.
Makan akan muncul halaman untuk membuat proyek. Silahkan isi formnya seperti gambar di bawah ini atau disesuaikan dengan keinginan. Selanjutnya klik tombol buat proyek.
Setelah berhasil membuat proyek, selanjutnya ada beberapa konfigurasi yang perlu kita ubah. Pertama kita akan merubah pada bagian database, karena kita akan menggunakan database dari Firebase ini. Yang perlu dilakukan pertama adalah silahkan pilih menu database dibagian kiri navigasi, setelah itu plih tab mulai. Lebih jelasnya silahkan perhatikan gambar di bawah ini:
Bahasa yang digunakan pada Firebase belum tentu bahasa Indonesia, untuk contoh ini menggunakan bahasa Indonesia, jika teman-teman ada yang bahasa inggris maka disesuaikan saja artinya, sedangkan lokasinya pasti sama.
Setelah menekan tombol mulai, maka akan muncul menu dari database. Setelah itu silahkan pilih tab “aturan”. Silahkan ubah pada bagian .read dan .write menjadi “true”, lebih jelasnya silahkan perhatikan gambar berikut:
Sebelum di edit
setelah di edit.
Perubahannya terlihat pada gambar kedua. Selanjutnya mari kita buat project React Native.
Step 2: Membuat Project React Native Expo
Pada step kedua ini, kita akan membuat project React Native Expo. Pertama yang perlu kita lakukan adalah membuka terminal atau Command Prompt, setelah itu arahkan kefolder dimana kita akan membuat project React Native-nya, dan untuk membuat projectnya, silahkan tuliskan perintah berikut:
create-react-native-app rnTodoApp
pada contoh kali ini menggunakan nama project rnTodoApp
Untuk lebih jelasnya silahkan perhatikan gambar di bawah ini.
Berikut ini tampilan dari terminal atau Command Prompt jika berhasil membuat Proyek React Native:
Dan selanjutnya, kamu bisa menjalankan aplikasinya dengan menuliskan perintah yarn start atau npm start di terminal.
Untuk menambah pengetahuan kamu mengenai cara step by step membuat proyek dengan React Native Expo, kamu bisa membacanya pada tutorial Bagian 5 Create React Native App dan Expo.
Selanjutnya kita buka project yang barusan kita buat menggunakan Text Editor atau IDE. Pada contoh kali ini saya menggunkan Visual Studio Code. Pada gambar di atas telah ditunjukan bagaimana membuka project menggunakan Visual Studio melalui perintah di terminal. Setelah dibuka selanjutnya kita akan memasang Firebase pada proyek kita. Caranya yaitu dengan menuliskan perintah berikut npm install firebase –-save diterminal yang mengarah pada project kita. Berikut ini contohnya:
Jika kamu masih bingung dengan tuturoal ini, silahkan ikuti tutorialnya kami sebelumnya, yaitu: step by step membuat project React Native App dan Expo.
Untuk tahap membuat project Create React Native App dan Expo telah selesai disini, selanjutnya mari kita membuat Folder dan juga File yang kita butuhkan.
Silahkan klik tombol Next Step di bawah ini, untuk melanjutkan belajar.
