Sabtu, 29 September 2018

REACT NATIVE + FIREBASE | EMAIL AUTH

 Pada kali ini saya akan membagi tutorial tentang cara menghubungkan Firebase dengan React Native Android dan membuat authentication email. Saya menganggap semua yang membaca tutorial ini sudah menginstal react native dan juga  node js. Disini saya menggunakan OS windows, sehingga kemungkinan sedikit berbeda tampilan dengan OS lain. Okee langsung aja ke tutorialnya..

1. Pada awalnya buat project dulu nih, disini saya menggunakan expo init untuk buat project react native. Buka CommandPrompt as Administrator -> pergi ke folder dimana kalian akan membuat projectnya -> expo init Firebase-React. Project akan otomatis dibuat dengan nama folder Firebase-React (pastikan terhubung internet). pastikan juga sudah install expo-cli sebelum membuat project yaa.


2. Setelah membuat projectnya, install firebase dan native-base juga.



3. Setelah install firebase dan native-base mulai project dengan expo start.



4. Hubungkan Device sebagai debugger dengan menggunakan QR code yang ditampilkan.
5. Buat project pada Firebase di website Firebase https://firebase.google.com/ (daftar dan login terlebih dahulu). Disini saya menamai project saya Firebase-React.

6. Setelah itu buka gambar code di halaman biru disamping gambar android, karena disini saya menggunakan code.
7. Salin code konfigurasinya pada app.js agar bisa terhubung.


8. Selanjutnya aktifkan email authentication pada firebasenya. seperti gambar dibawah ini.




9. Setelah diaktifkan, lanjut ke code. buka app.js di folder react native yang telah dibuat. untuk menghubungkan dengan firebase hanya tinggal salin code yang sudah diberikan sebelumnya. Setelah disalin, buat tampilannya dengan cara import dahulu dari native-base lalu gunakanlah alat yang telah diimport itu. Disini saya membuat tampilannya sederhana, hanya menggunakan text input, label, label, item, button dll. seperti gambar dibawah ini.






10. Setelah membuat tampilannya, buat fungsi sign in dan sign up. Disini saya menggunakan try and catch, jika tak ada error maka memanggil fungsi bawaan dari firebase yaitu singInWithEmailAndPassword dan createUserWithEmailAndPassword. Jangan lupa untuk import terlebih dahulu class firebasenya. Codenya kurang lebih seperti gambar dibawah ini



11. Langkah terakhir yaitu melakukan percobaan. Hal ini sebenarnya bisa dilakukan secara berkala menggunakan live reload pada expo namun saya test ulang untuk yang terakhir. Jika berhasil maka data akan tersimpan pada firebase, dapat dilihat pada Firebase web dan juga cli-nya.




 Sekian tutorial pada kali ini, mohon maaf apabila ada kekurangan, komentar positif sangat diharapkan untuk kebaikan bersama. Terimakasih...










Tidak ada komentar:

Posting Komentar

jangan comment dengan kata kotor dan mengandung unsur yang tidak baik...comment dengan kata yang tidak menyinggung siapapun dan tidak merugikan orang lain... selamat berkomentar..!! :)