Now Reading:

Bagian 8 Membuat Aplikasi To Do List Dengan React Native dan Firebase

Bagian 8 Membuat Aplikasi To Do List Dengan React Native dan Firebase

Step 3: Membuat Folder dan File Javascript

Setelah tahap membuat project Create React Native App App dan Expo berhasil, selanjutnya kita akan membuat folder dan file yang akan kita gunakan pada project kali ini.

Pertama silahkan membuat folder src pada project kita. Setelah berhasil membuat folder selanjutnya silahkan membuat 6 file Javascript di dalam folder src tersebut dengan urutan nama sebagai berikut:

– Button.js

– Reference.js

– Styles.js

– TaskInput.js

– TaskList.js

– TaskListItem.js

Jika sudah, maka tampilan dari struktur project kita akan seperti di bawah ini:

Jika telah sesuai dengan gambar di atas, maka tahap membuat folder dan file telah selesai. Selanjutnya kita akan masuk ke intinya yaitu membuat kode programnya.

Step 4: Membuat Kode Program

Sebelum kita lanjut untuk membuat programnya, saya pastikan dulu kalian tidak melewatkan step untuk memasang Firebase di project kita dengan perintah npm install firebase –save

Pertama kita akan membuat style atau CSS untuk project kita. Silahkan buka file Styles.js dan tuliskan kode program seperti di bawah ini:

Selanjutnya silahkan buka file Reference.js. Dan sebelum kita menuliskan programnya, silahkan buka halaman project Firebase di browser (yang sebelumnya telah kita buat pada step pertama).

Setelah terbuka, silahkan pilih menu Project Overview dan pilih Tab atau Menu [ Tambahkan Firebase ke aplikasi web Anda ] setelah itu maka akan muncul sebuah script, itulah api untuk project firebase kita, silahkan copy. Lebih jelasnya silahkan perhatikan gambar di bawah ini:

Setelah kita plih Menu Tambahkan Firebase ke aplikasi web Anda maka akan muncul jendela berikut ini dan Copy Script di dalamnya.

Setelah di copy, maka silahkan paste di file Reference.js seperti berikut ini:

Penjelasan:

Silahkan perhatikan gambar di bawah, bagian yang diberi kotak merah merupakan bagian yang diambil dari halaman project Firebase yang tadi telah kita copy.

 

Selanjutnya silahkan buka File Button.js dan tuliskan kode program berikut:

Setelah itu buka file TaskInput.js dan tuliskan kode program berikut:



Setelah itu buka file TaskList.js dan tuliskan kode program berikut :

 

Setelah itu buka file TaskListItem.js dan tuliskan kode program berikut :

 

Setelah itu yang terakhir silahkan buka file App.js dan tuliskan perintah berikut:

Setelah semua kode program telah kita buat, selanjutnya silahkan jalankan project nya dengan perintah yarn start atau npm start, maka aplikasinya akan tampil sesuai dengan video di bawah ini.

Penting:

Jika kamu masih bingung cara menjalankan aplikasi expo yang ada di smartphone, kamu bisa mengikuti tutorial berikut ini: Bagian 5 Create React Native App dan Expo

Kamu bisa menguji aplikasi yang telah kamu buat, apakah benar-benar telah menggunakan Firebase?, maka silahkan buka Console Firebase di browser dan pilih menu Database, selanjutnya itu pilih tab DATA, maka hasilnya akan seperti gambar di bawah ini:

Jika kita menambahkan kegiatan atau list baru maka pada bagian tasks di Database Firebase akan bertambah.

Demikian tutorial mengenai To Do List – React Native dan Firebase .

Bantu kami untuk membagikan tutorial ini, agar orang lain juga bisa belajar belajar Mobile Apps dengan mudahnya. Happy koding 😀

Konten developer untuk Mobile Development yang sangat mencintai mobile programming

Share This Articles