React Native Academy · Oppitunti

React Native Firebasen yhdistäminen projektiin

Asentakaa @react-native-firebase/app, lisätkää google-services.json- ja GoogleService-Info.plist-tiedostot ja yhdistäkää natiivimoduulit sekä iOS:lle että Androidille.

Oppitunti 1/413 vaihetta

React Native Firebasen yhdistäminen projektiin on ilmainen React Native Academy-oppitunti CoddyKitissä. Tämä on oppitunti 1/4. Voit lukea tästä oppimispolusta kokonaan mitkä tahansa 3 oppituntia ilmaiseksi — sen jälkeen CoddyKit PRO avaa kaikki oppitunnit sekä käytännön harjoittelun sisäänrakennetulla koodieditorilla ja ympäri vuorokauden toimivalla tekoälytuutorilla. Oppitunti kuuluu React Native Academy-oppimispolkuun, ja edistymisesi synkronoituu verkon ja CoddyKit-sovelluksen välillä. React Native Academy-kurssilla on yhteensä 4 oppituntia.

React Native Firebase verrattuna Expo Firebaseen

Firebasen käyttämiseen React Nativessa on kaksi lähestymistapaa: React Native Firebase -kirjasto (@react-native-firebase) ja firebase npm -paketin kautta käytettävä Firebase JS SDK. React Native Firebase käyttää natiiveja SDK:ita ja on huomattavasti suorituskykyisempi, mutta edellyttää natiiveja build-vaiheita. JS SDK toimii Expo Gossa, mutta siihen liittyy rajoituksia mobiilissa.

Tässä oppitunnissa käsitellään React Native Firebasea, joka on suositeltu lähestymistapa tuotantosovelluksiin. Se edellyttää paljasta React Native - tai Expo bare workflow -asetusta, mikä tarkoittaa, että sinun on suoritettava expo prebuild tai expo eject.

Firebase-projektin luominen

Ennen koodin kirjoittamista tarvitset Firebase-projektin. Siirry osoitteeseen console.firebase.google.com, napsauta kohtaa Add project ja seuraa ohjattua määritystä. Kun projekti on luotu, lisää kaksi sovellusrekisteröintiä: yksi iOS:lle (bundle ID:lläsi) ja toinen Androidille (pakettinimelläsi).

Firebase tarjoaa tämän jälkeen määritystiedostot: Androidille google-services.json ja iOS:lle GoogleService-Info.plist. Nämä tiedostot sisältävät API-avaimet ja projektin tunnisteet, joita natiivit Firebase SDK:t käyttävät todentamiseen Firebase-palvelimille.

React Native Firebasen asentaminen

Asenna ensin Firebasen ydinmoduuli ja lisää sen jälkeen vain tarvitsemasi moduulit (auth, firestore, storage jne.). Jokainen palvelu on erillinen paketti, joten sovelluksesi sisältää vain sen, mitä se todella käyttää.

Suorita asennuksen jälkeen npx expo prebuild, jos käytät Expo managed workflow’ta, tai cd ios && pod install, jos kyseessä on paljas React Native -projekti. Uudemmissa versioissa natiivimoduulit linkitetään automaattisesti.

# Install the core module
npm install @react-native-firebase/app

# Install specific service modules
npm install @react-native-firebase/auth
npm install @react-native-firebase/firestore

# For Expo managed workflow, use the config plugin:
npx expo install @react-native-firebase/app @react-native-firebase/auth

# iOS native linking
cd ios && pod install

google-services.json-tiedoston lisääminen Androidille

Lataa google-services.json Firebase Consolesta (Project Settings > Your apps > Android app > Download config) ja sijoita se polkuun android/app/google-services.json.

Ota sitten Google Services Gradle -lisäosa käyttöön lisäämällä apply plugin: 'com.google.gms.google-services' tiedoston android/app/build.gradle loppuun sekä classpath tiedostoon android/build.gradle. Jos käytät Expon config pluginiä, tämä tehdään automaattisesti.

// android/build.gradle
buildscript {
  dependencies {
    classpath 'com.google.gms:google-services:4.4.0'
  }
}

// android/app/build.gradle (add at the BOTTOM)
apply plugin: 'com.google.gms.google-services'

GoogleService-Info.plist-tiedoston lisääminen iOS:lle

Lataa GoogleService-Info.plist Firebase Consolesta (Project Settings > Your apps > iOS app > Download config) ja sijoita se iOS-projektisi juureen: ios/YourApp/GoogleService-Info.plist.

Jos käytät Xcodea, vedä tiedosto Xcode-projektin navigaattoriin ja varmista, että Copy items if needed on valittuna ja että tiedosto lisätään sovelluksesi targetiin. Natiivi Firebase SDK lukee tämän tiedoston käynnistyksen yhteydessä ja alustaa itsensä.

# Directory structure after adding the file:
ios/
  YourApp/
    GoogleService-Info.plist  <-- place it here
    AppDelegate.swift
    Info.plist
  YourApp.xcworkspace

Expo Config Plugin -lähestymistavan käyttäminen

Jos rakennat sovellusta Expon avulla, @react-native-firebase/app -paketti sisältää Expo config pluginin, joka automatisoi natiivin määrityksen. Lisää se app.json-tiedoston plugins-taulukkoon ja anna polut määritystiedostoihisi.

Kun suoritat komennon npx expo prebuild, plugin lisää Google Services -lisäosan Gradleen ja kopioi plist-tiedoston automaattisesti oikeaan iOS-sijaintiin. Näin natiivien tiedostojen manuaalista muokkaamista ei tarvita.

// app.json
{
  'expo': {
    'plugins': [
      '@react-native-firebase/app',
      '@react-native-firebase/auth'
    ],
    'android': {
      'googleServicesFile': './google-services.json'
    },
    'ios': {
      'googleServicesFile': './GoogleService-Info.plist'
    }
  }
}

Firebasen alustaminen JavaScriptissä

React Native Firebasea käyttäessäsi et kutsu initializeApp-funktiota JavaScriptissä — natiivit SDK:t alustuvat automaattisesti määritystiedostojen avulla. Sinun tarvitsee vain tuoda moduulit ja käyttää niitä.

Firebase Authiin pääsee käsiksi komennolla import auth from '@react-native-firebase/auth' ja Firestoreen komennolla import firestore from '@react-native-firebase/firestore'. Nämä palauttavat Firebase-projektiisi yhdistetyt singleton-instanssit.

// No explicit initialization needed!
// The native SDK reads GoogleService-Info.plist and google-services.json

import auth from '@react-native-firebase/auth';
import firestore from '@react-native-firebase/firestore';

// Use Firebase Auth
const currentUser = auth().currentUser;

// Use Firestore
const usersCollection = firestore().collection('users');

Yhteyden toiminnan varmistaminen

Nopea tapa varmistaa, että Firebase on yhdistetty oikein, on kuunnella auth-tilaa. Käynnistä sovellus ja tarkista, että onAuthStateChanged laukeaa arvolla null (yhtään käyttäjää ei ole kirjautuneena). Jos näet natiivin kaatumisen tai punaisen ruudun, jossa ilmoitetaan, ettei Firebase-sovellusta ole alustettu, tarkista, että määritystiedostot ovat oikeissa sijainneissa ja että suoritit komennon pod install.

Voit myös lisätä testinäkymään yksinkertaisen Firestore-lukutoiminnon — jos se palauttaa tietoja tai auth-/käyttöoikeusvirheen (mutta ei kaadu), SDK on alustettu oikein.

import { useEffect } from 'react';
import auth from '@react-native-firebase/auth';

export function TestScreen() {
  useEffect(() => {
    const unsubscribe = auth().onAuthStateChanged((user) => {
      if (user) {
        console.log('User is signed in:', user.uid);
      } else {
        console.log('No user signed in — Firebase is connected!');
      }
    });

    return unsubscribe; // Cleanup
  }, []);

  return null;
}

Useita Firebase-projekteja

Jos sovelluksesi tarvitsee yhteyden useampaan kuin yhteen Firebase-projektiin (esimerkiksi eri projektiin kehitys- ja tuotantoympäristöissä), voit alustaa ylimääräisiä Firebase-sovellusinstansseja toissijaisen määrityksen avulla. Kutsu firebase().initializeApp(config, 'secondaryApp') ja viittaa siihen komennolla firebase().app('secondaryApp').

Useimmissa React Native -sovelluksissa yksi Firebase-projekti riittää. Kehitys- ja tuotantoympäristöjen erottelu kannattaa yleensä toteuttaa käyttämällä eri build-varianteille omia google-services.json-tiedostoja, jotka määritetään Gradlessa.

// android/app/build.gradle
android {
  buildTypes {
    debug {
      // Uses google-services-debug.json
    }
    release {
      // Uses google-services-release.json
    }
  }
  sourceSets {
    debug { resources.srcDirs = ['src/debug'] }
    release { resources.srcDirs = ['src/release'] }
  }
}

Firebase-hallintapaneelin tarkistaminen

Kun sovellus on käynnissä ja yhdistetty, voit tarkastella toimintaa Firebase Consolessa. Avaa Authentication nähdäksesi kirjautuneet käyttäjät, Firestore Database tarkastellaksesi dokumenttien luku- ja kirjoitustoimintoja sekä App Check seurataksesi pyyntöjä.

Firebase Emulator Suite on erittäin hyödyllinen kehityksen aikana — se suorittaa paikallisen Firebase-palvelimen tietokoneellasi, joten voit testata Authia ja Firestorea koskematta tuotantodataan. Suorita firebase emulators:start ja osoita Firebase SDK käyttämään osoitetta localhost.

// Point Auth and Firestore to the local emulator during development
import auth from '@react-native-firebase/auth';
import firestore from '@react-native-firebase/firestore';

if (__DEV__) {
  auth().useEmulator('http://localhost:9099');
  firestore().useEmulator('localhost', 8080);
}

Yleiset määritysvirheet ja niiden korjaaminen

Yleisimmät React Native Firebasen integroinnin aikana ilmenevät määritysvirheet ovat:

No Firebase App '[DEFAULT]' has been created — määritystiedosto puuttuu tai on väärässä hakemistossa
Missing google-services plugin — Gradle-lisäosaa ei otettu käyttöön build.gradle-tiedostossa
Pod install not run — sovellusta yritetään suorittaa iOS:llä ilman natiivimoduulien linkitystä

Kun olet korjannut jonkin näistä ongelmista, tee aina täysi uudelleenrakennus: pysäytä bundleri, suorita cd ios && pod install ja käynnistä sovellus uudelleen komennolla npx expo run:ios --device tai vastaavalla komennolla.

Pikatesti

Testaa, miten hyvin ymmärrät tämän oppitunnin React Native Mobile Development -käsitteet.

Vastaa interaktiivisessa oppitunnissa

Oppitunnin yhteenveto

Tässä oppitunnissa opit: luomaan Firebase-projektin ja rekisteröimään iOS- ja Android-sovellukset, lisäämään google-services.json- ja GoogleService-Info.plist-tiedostot oikeisiin sijainteihin sekä ymmärtämään, miten React Native Firebase alustuu automaattisesti natiivien määritystiedostojen perusteella ilman JavaScriptin initializeApp-kutsua. Seuraavaksi toteutamme sähköposti- ja puhelintodennuksen Firebasella.

Aloita maksutta

Opi JavaScript tekoälytuutorin avulla — ilmaiseksi

Kirjoita ja suorita oikeaa koodia selaimessa, saa välitöntä apua tekoälytuutorilta ympäri vuorokauden ja jatka siitä, mihin jäit, verkossa tai sovelluksessa.

Kurssit: 30
Oppitunnit: 120

Aloita opiskelu maksutta Näytä koko kurssi

Usein kysytyt kysymykset

Onko oppitunti ”React Native Firebasen yhdistäminen projektiin” ilmainen?

Kyllä — voit lukea täällä verkossa kokonaan ilmaiseksi mitkä tahansa React Native Academy-oppimispolun 3 oppituntia, myös oppitunnin “React Native Firebasen yhdistäminen projektiin”. Sen jälkeen CoddyKit PRO avaa kaikki oppitunnit sekä interaktiiviset harjoitukset sisäänrakennetulla koodieditorilla ja ympäri vuorokauden toimivalla tekoälytuutorilla. React Native Academy-kurssilla on yhteensä 4 oppituntia.

Mitä opin oppitunnilla ”React Native Firebasen yhdistäminen projektiin”?

Asentakaa @react-native-firebase/app, lisätkää google-services.json- ja GoogleService-Info.plist-tiedostot ja yhdistäkää natiivimoduulit sekä iOS:lle että Androidille. Harjoittelet React Native Academy-aihetta koodilla, jonka suoritat suoraan selaimessa. Ympäri vuorokauden käytettävissä oleva tekoälytuutori vastaa kysymyksiisi oppitunnin aikana.

Tarvitsenko kokemusta aloittaakseni React Native Academy-opiskelun?

Aiempi kokemus ei ole tarpeen. CoddyKitin React Native Academy-oppimispolku sopii vasta-alkajista edistyneisiin, joten voit aloittaa tästä tai alusta ja edetä omaan tahtiisi. Tämä on oppitunti 1/4.

Kuinka kauan ”React Native Firebasen yhdistäminen projektiin”-oppitunnin suorittaminen kestää?

Useimmat CoddyKitin oppitunnit kestävät noin 5–10 minuuttia. Jokainen oppitunti on lyhyt ja interaktiivinen, joten edistyt tasaisesti ja voit jatkaa siitä, mihin jäit – sekä verkossa että sovelluksessa.

Voinko kirjoittaa ja suorittaa koodia tällä React Native Academy-oppitunnilla?

Kyllä. Jokainen React Native Academy-oppitunti sisältää sisäänrakennetun koodieditorin, joten voit kirjoittaa ja suorittaa oikeaa koodia suoraan selaimessa ja saada välitöntä palautetta tekoälyltä – paikallista asennusta ei tarvita.

Kaikki tämän kurssin oppitunnit

React Native Firebasen yhdistäminen projektiin
Sähköposti- ja puhelinnumerotodennus Firebase-ympäristössä
Firestore-dokumenttien lukeminen ja kirjoittaminen
Reaaliaikaiset kuuntelijat ja offline-persistenssi

← Takaisin: React Native Academy