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...

»»  READMORE...

MEMBUAT SIMPLE DATABASE LOKAL PADA ANDROID

 Pada kali ini saya akan memabahas tutorial mengenai database simple pada android. Sebelum masuk pada tutorial, diharapkan sudah download dan menginstall Android Studio beserta SDKnya. Saya menganggap semua yang membaca artikel ini sudah mengerti mengenai apa itu database, intinya database yaitu kumpulan data yang disimpan secara sistematis yang dapat diolah/dimanipulasi untuk mendapatkan informasi. Oke, langsung saja masuk ke tutorialnya.

1. Pertama - tama buka Android Studio dan buat project baru. Langkahh untuk membuat project baru ada di artikel sebelumnya.

2. Setelah membuat project dan sudah terbuka, hal pertama yang dilakukan yaitu membuat class Model pada file java sesuai database yang akan dibuat. Disini misalkan saya membuat Biodata simple yang nantinya akan meniympan nama dan umur. Saya memberi nama class model disini yaitu Profile

Saya menggunakan ID sebagai variabel untuk menyimpan integer, Name dan Age sebagai variabel yang menyimpan String. Disini setiap variabel yang saya buat, saya beri setter dan getternya supaya variabel tidak public dan diakses sembarangan.

3. Selanjutnya membuat Class dan fungsi - fungsi yang isinya untuk mengakses database dan membuat CRUD database. Disini saya memberi nama class yaitu DatabaseHelper. Sebagian sudah saya jelaskan pada screenshoot code.

4. Setelah itu kembali ke MainActivity, disini tinggal kita tambahkan semua widget yang ada pada XML yang telah kita buat dan hubungkan dengan on click listener serta fungsi yang telah kita buat . Widget yang saya gunakan disini hanya beberapa saja karena saya hanya membuat simple biodata yang mampu menyimpan ke database. Selain Fungsi menyimpan sebenarnya masih ada lagi seperti Read, Update, Delete yang sudah dibuat di class DatabaseHelper, namun sebagai contoh saya hanya mengimplementasikan satu saja. Berikut merupakan screenshot code MainActivity dan XML nya

Saya hanya menampilkan sebagian dari XML code nya, intinya tampilannya nanti akan seperti screenshot dibawah ini.

*tambahan : saya menggunakan 2 Activity, yaitu saat user menginput biodata, dan menampilkan data yang disimpan database

untuk Code DataAvtivity (menampilkan data yang disimpan pada database) saya sisipkan seperti screenshot dibawah

5. Setelah itu, step terakhir yaitu Run Project yang sudah dibuat pada android studio menggunakan Emulator/Real Device. Hasilnya seperti screenshot dibawah ini.

  

untuk melihat dimana database disimpan, silakan buka tools android device monitor pada android studio dan buka folder data pada file manager.

Sekian tutorial membuat simple database lokal pada android, jika ada kekurangan saya mohon maaf. Komentar membangun dan pembenaran apa yang salah sangat berarti bagi saya. Terimakasih..

»»  READMORE...

CARA MENJALANKAN APLIKASI YANG DIBUAT DI ANDROID STUDIO PADA HANDPHONE ANDROID

Sebelum menjalankan sebuah aplikasi yang telah dibuat di android studio menggunakan handphone yang kalian miliki, pastikan telah terinstall Android Studio pada PC kalian dan handphone menggunakan OS Android 8.0 atau lebih.

Langkah yang dilakukan :

1. Buka Android Studio yang telah terinstall.
   
2. Isi nama proyek, dan lokasi proyek, lalu Next
   
3. Pilih Phone and Tablet beserta minimum SDKnya, lalu Next.
   
4.  Pilih Activity, Next.
   
5. Beri nama Activity dan nama Layout, lalu finish
   
6. Android project sudah siap, buat sesuai kebutuhan kalian. Disini saya memberikan contoh default yaitu "Hello World"
   
    
7. Lalu untuk menjalankan android project yang dibuat dengan menggunakan Handphone, pertama - tama setting dulu HP yang dimiliki. Kebetulan HP saya menggunakan OS Android 8.1. Masuk ke bagian Setting pada Handphone
   
   
   
8. Setelah masuk ke bagian setting, pilih System
   
9. Jika pada menu System belum ditemukan "developer option" maka klik 7x pada build number di menu About Phone.
   
10. Buka Developer Option dan aktifkan USB Debugging
    
11. Kembali pada window project dan RUN project (shift + f10)
    
12. Pilih perangkat anda pada saat "select deployment target"
    
13. Selesai sudah, project yang anda buat akan ditampilkan pada perangkat handphone anda.
    

Sekian Tutorial mengenai cara menjalankan aplikasi yang dibuat di android studio pada handphone.

Fikri Hashfi N
M0516021

»»  READMORE...