CONTOH CARA ME-RETRIEV DATA DAN MENAMPILKANNYA || REACT NATIVE + FIREBASE

Pada kali ini saya akan membuat tutorial tentang bagaimana menampilkan data yang ada di Firebase pada aplikasi yang telah dibuat. Sebelumnya saya menganggap yang telah membaca artikel ini telah mengerti tentang menghubungkan aplikasi react native pada realtime database firebase.

1. Pertama – tama   buatlah fungsi untuk mengambil data dari firebase
   
2. Ganti code sesuai dengan firebase realtime database yang anda buat. Dibawah ini adalah contoh database yang saya buat. Disini saya me-retrieve seluruh child pada /Barbershop. Jika anda ingin mencoba me-retrieve yang lain, dapat melihat di https://firebase.google.com/docs/database/admin/retrieve-data
   
3. Setelah itu buat tampilan untuk menampilkan data telah diambil, disini saya menggunakan map untuk menampilkan object valuenya.

Berikut adalah hasil dari data yang ditampilkan

Mungkin sekian tutorial yang dapat saya sampaikan, mohon maaf jika ada kekurangan. Kritik dan komentar membangun anda sangat bermanfaat bagi saya. Terimakasih.

»»  READMORE...

NESTED NAVIGATOR REACT-NATIVE || TabNavigator + DrawerNavigator + SwitchNavigator

Pada kali ini saya akan membahas tentang Nested Navigator di React-Native. Jadi navigasi yang saya gunakan disini adalah tab navigation, drawer navigation dan switch navigation. Jika anda belum mengerti apa itu tab, drawer dan switch, anda bisa membuka dokumentasi react-navigation untuk detailnya. Intinya tab navigation yaitu navigasi berbentuk tab yang mungkin berada dibawah atau diatas layar, drawer navigation yaitu panel navigasi yang berada pada samping layar dapat menggunakan swipe ataupun tombol untuk membukanya, dan switch navigation yaitu navigasi yang yang dapat digunakan untuk berpindah pindah layar tanpa harus menggunakan tab atau drawer.

Langsung saja kita aplikasikan react-navigation. Langkah yang harus dilakukan yaitu :

1. Install react-navigation dengan cara ketik npm install --save react-navigation pada cmd di folder project anda.
2. Setelah install selesai, buka project react native anda.
3. Edit code untuk menggunakan react-navigation. Hal pertama yang anda harus tambahkan pada code adalah import react-navigation terlebih dahulu. Misal, jika anda ingin menggunakan drawer navigation anda dapat mengetikkan import { createDrawerNavigation } from “react-navigation”. Contoh disini saya menggunakan ketiganya sekaligus. 
   
   
   
   
   
4. Setelah import dilakukan, gunakan apa yang telah diimport sebelumnya. Saya disini menerapkan nested navigation, maksudnya yaitu navigasi satu berada pada navigasi yang lain. Dibawah ini adalah contoh yang saya buat. Saya mengasumsikan anda telah membuat layar / screen yang akan digunakan untuk navigation. 
   
   
   
   
   
   
   
   
   
5. Setelah anda membuat seperti apa yang ada diatas, navigation akan muncul pada layar yang diinginkan.

Dalam memunculkan react navigation mungkin hanya seperti itu, untuk custom dan memperindah navigation yang telah dibuat mungkin akan dibahas di tutorial lain kali. Saya mohon maaf jika ada kekurangan, kritik dan saran anda akan sangat membantu. Terimakasih J

»»  READMORE...

NAVIGASI ANTAR SCREEN DENGAN STACK NAVIGATOR || REACT NATIVE

Pada kali ini saya akan membahas tentang tutorial tentang StackNavigator untuk berpindah dari Tampilan Screen satu ke Screen yang lainnya dengan Stack.

1. Install StackNavigator dengan menggunakan npm, ketik npm install --save react-navigation

2. Buka project react-native yang dibuat.

3. Edit app.js

4. Import StackNavigator dengan menggunakan import { StackNavigator } from ‘react-Navigation’  atau bisa juga dengan import { createStackNavigator } from ‘react-navigation’

5. Import file JS yang ingin ditampilkan, anda dapat menggunakan RouterName untuk memanggil screen. Seperti contoh simple diatas, saya mempunyai beberapa screen yaitu Loading, SignUp, Login, dll.

6. Dibawah adalah contoh berpindah screen menggunakan sebuah tombol, dengan memanggil router name dan dapat juga diberi parameter.

7. Coba pada Emulator/Device yang sudah terhubung.

Demikian Tutorial StackNavigator ReactNative pada kali ini, jika ada kesalahan saya mohon maaf. Kritik dan Saran anda sangat membantu. Terimakasih J

»»  READMORE...

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