Firebase

Firebase side

Već smo spomenuli da ćemo za potrebe naše aplikacije koristiti funkcionalnosti koje nam obezbeduje Firebase. Firebase je online baza podataka koja se direktno povezuje na aplikaciju i u "real-time"-u možemo ažurirati kako bazu podataka tako i podatke u aplikaciji koje stižu iz baze.
Pored medjusobnog slanja podataka izmedju aplikacije i Firebase-a, ona može da pomogne oko analiktike, čuvanja celih fajlova ili onoga što nas zanima a to je autentifikacija.
Potrebno je da odete na firebase.google.com (potreban vam je i gmail akaunt) i prijavite se. Nakon prijave, ako vas browser direktno browser ne odvede na Firebase konzolu u gornjem desnom uglu imate link "Go to console".

Nakon što ste u vašu konzolu, sledeći korak je da kliknete na dugme "CREATE NEW PROJECT", potrebno je da izaberete ime (recimo auth) i kliknete dugme "CREATE PROJECT". Nakon sto se projekat napravio automatski vas šalje na project dashboard. Sa leve strane imate kolonu svih features-a koje nudi.
Sada kliknimo na Authentification sekciju, kada je otvorite kliknite na "SET UP A SIGN-UP METHOD", tada dobijate listu svih provajdera pomoću kojih možete da izvršite svoju autentifikaciju. Mi ćemo korisiti Email/Password. Kliknite na Email/Password i zatim na "Enable". Na taj način smo dozvolili da se naša autentifikacija izvršava preko Email-a i Šifre.

Na sredini vidite tri izbora Firebase za iOS, Android ili web app, mi ćemo koristi za web app, jer React Native predstavlja javascript kod.

Client side

Sada, unutar naše aplikacije prvo je potrebno da instaliramo firebase npm modul. Tako da ćemo u konzoli, dok smo unutar foldera projekta ukucati

npm install --save firebase

U trenutku kada smo na firebase-u napravili naš projekat, na njihovim serverima dobili smo naš folder ili kako oni nazivaju to "bucket". Tako da je naš sledeći korak to da "kažemo" aplikaciji na koji tačno bucket da se poveže. Unutar naše App komponente će se nalaziti taj kod inicijalizacije.
Prvo ćemo importovati firebase

import firebase from 'firebase';

Najbolje vreme za ovo set up-ovanje je neposredno pre nego što se naša aplikacija prikaže na ekranu. Zato ćemo koristi lifecycle method componentWillMount .

Podsetimo se da su lifecycle metode koje se automatski pozivaju, potrebno ih je samo definisati i one se u "svoje" vreme pozivaju. Nešto više o njima možete pročitati i ovde.

Sada je potrebno da se vratiti na dashboard vaše aplikacije na firebase-u i tu možete uočiti tri izbora za korišćenje firebase-a.

Potrebno je da izaberete "Add Firebase to your web app", i pošto ovo nije klasična web aplikacija, potrebno da je iz svega prikazanog iskopirate samo config objekat, tj njegove vrednosti, i zatim je unutar componentWillMount smestite na sledeći način

componentWillMount() {
    firebase.initializeApp({
        apiKey: 'AIzaSyCBgNLfb6lkoxqEBdmlVBm487tr2QU3ugo',
        authDomain: 'auth-ec3f8.firebaseapp.com',
        databaseURL: 'https://auth-ec3f8.firebaseio.com',
        storageBucket: 'auth-ec3f8.appspot.com',
        messagingSenderId: '680495307201'
    });
}

(Iskopirajte svoje podatke!).

Tako da naša App komponenta na kraju izgleda ovako:

import React, { Component } from 'react';
import firebase from 'firebase';
import { Text, View } from 'react-native';

class App extends Component {
  componentWillMount() {
    firebase.initializeApp({
      apiKey: 'AIzaSyCBgNLfb6lkoxqEBdmlVBm487tr2QU3ugo',
      authDomain: 'auth-ec3f8.firebaseapp.com',
      databaseURL: 'https://auth-ec3f8.firebaseio.com',
      storageBucket: 'auth-ec3f8.appspot.com',
      messagingSenderId: '680495307201'
    });
  }

  render() {
    return (
      <View>
        <Text> Hello World! </Text>
      </View>
    );
  }
}

export default App;

I to je to, potrebno je da instaliramo firebase biblioteku i pomoću gore navedenog koda našu aplikaciju povežemo sa odredjenim bucket-om koji se nalazi na serverima firebase-a.