Cara Mengintegrasikan Firebase dengan Apl React Native Expo dalam inutes

Firebase, platform backend-sebagai-perkhidmatan yang berkuasa, menyediakan set alat yang komprehensif untuk pengesahan pengguna, pangkalan data masa nyata, analitis dan banyak lagi. Menyepadukan Firebase ke dalam apl React Native anda yang dibina dengan Expo ialah cara yang cepat dan cekap untuk meningkatkan aplikasi anda dengan ciri seperti pengesahan selamat dan penyegerakan data masa nyata.

Panduan ini menunjukkan cara menyepadukan Firebase ke dalam projek Expo React Native dalam masa kurang dari 5 minit. Kami akan meliputi penyediaan Firebase, melaksanakan Pengesahan Firebase untuk log masuk dan pendaftaran pengguna serta menggunakan Pangkalan Data Masa Nyata untuk pengurusan data.

Prasyarat

Sebelum bermula, pastikan anda mempunyai:

1. Node.js dipasang.
2. Projek Ekspo sedia ada (buat satu menggunakan expo init jika perlu).
3. Akaun dan projek Firebase (buat satu di Firebase Console jika perlu).
4. Expo Firebase SDK dipasang (expo install firebase).

Langkah 1: Pasang Firebase SDK

Gunakan proses pemasangan Expo yang diperkemas: Navigasi ke direktori projek Expo anda di terminal anda dan jalankan:

expo install firebase

Ini memasang SDK Firebase yang diperlukan.

Langkah 2: Konfigurasi Firebase Console

1. Akses Firebase Console: Pergi ke Firebase Console.
2. Buat Projek (jika perlu): Buat projek Firebase baharu jika anda belum melakukannya.
3. Tambahkan Firebase pada Apl Anda: Memandangkan Ekspo menggunakan pendekatan berasaskan web, konfigurasikan projek anda sebagai apl web dalam Firebase Console. Salin objek konfigurasi Firebase yang dijana. Ia akan kelihatan serupa dengan ini:

const firebaseConfig = {
  apiKey: "YOUR_API_KEY",
  authDomain: "YOUR_AUTH_DOMAIN",
  projectId: "YOUR_PROJECT_ID",
  storageBucket: "YOUR_STORAGE_BUCKET",
  messagingSenderId: "YOUR_MESSAGING_SENDER_ID",
  appId: "YOUR_APP_ID",
};

Langkah 3: Integrasikan Firebase ke dalam Apl React Native Anda

Tampal konfigurasi Firebase anda ke dalam App.js (atau titik masuk apl utama) anda dan mulakan Firebase:

import React, { useState } from 'react';
import { TextInput, Button, View, Text } from 'react-native';
import firebase from 'firebase/app';
import 'firebase/auth';
import 'firebase/database';

// Your Firebase config object (from Step 2)
const firebaseConfig = { /* ... */ };

// Initialize Firebase
if (!firebase.apps.length) {
  firebase.initializeApp(firebaseConfig);
} else {
  firebase.app(); 
}

// ... rest of your app code (see below for authentication and database examples)

Ini memulakan Firebase menggunakan konfigurasi anda. Bahagian berikut menambah kefungsian pengesahan dan pangkalan data.

Langkah 4: Menggunakan Pangkalan Data Masa Nyata Firebase (Pilihan)

Pangkalan Data Masa Nyata Firebase menawarkan penyegerakan data masa nyata merentas pelanggan. Begini cara menambah fungsi asas baca/tulis:

Mula-mula, import modul pangkalan data:

import 'firebase/database';

Kemudian, tambahkan fungsi untuk menulis dan membaca data:

const writeData = () => {
  firebase.database().ref('/users/1').set({
    name: 'John Doe',
    email: email,
  }).then(() => {
    alert('Data saved!');
  }).catch(error => alert(error.message));
};

const readData = () => {
  firebase.database().ref('/users/1').once('value')
    .then(snapshot => {
      const data = snapshot.val();
      alert('User data: ' + JSON.stringify(data));
    })
    .catch(error => alert(error.message));
};

Langkah 5: Jalankan Aplikasi Anda

Dengan Firebase bersepadu, jalankan apl Ekspo anda menggunakan:

expo start

Imbas kod QR dengan Expo Go untuk menguji pendaftaran pengguna, log masuk dan ketekunan data.

Kesimpulan

Anda telah berjaya menyepadukan Firebase ke dalam apl Expo React Native anda! Ini menyediakan asas yang kukuh untuk membina aplikasi yang kaya dengan ciri yang memanfaatkan pengesahan Firebase dan keupayaan pangkalan data masa nyata. Terokai perkhidmatan Firebase yang lain (pemberitahuan tolak, storan awan, dll.) untuk meningkatkan lagi apl anda.

Atas ialah kandungan terperinci Cara Mengintegrasikan Firebase dengan Apl React Native Expo dalam inutes. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!