نحوه ادغام Firebase با برنامه React Native Expo در 5 دقیقه

Firebase یک پلتفرم قدرتمند باطن به عنوان یک سرویس است که مجموعه ای از ابزارها را برای احراز هویت کاربر، پایگاه داده های بلادرنگ، تجزیه و تحلیل و موارد دیگر ارائه می دهد. اگر در حال توسعه با React Native با استفاده از نمایشگاهادغام Firebase یک راه ساده و سریع برای افزودن ویژگی های قوی مانند احراز هویت و همگام سازی داده ها در زمان واقعی است.

در این پست وبلاگ، به شما نشان خواهم داد که چگونه Firebase را با یک برنامه React Native مبتنی بر Expo ادغام کنید. 5 دقیقه. ما راه اندازی Firebase را برای یک پروژه Expo، استفاده از Firebase Authentication برای ثبت نام کاربران و ورود به سیستم آنها، و استفاده از پایگاه داده بیدرنگ Firebase برای ذخیره و بازیابی داده ها را پوشش خواهیم داد.

بیایید شروع کنیم!

پیش نیازها

قبل از شروع، مطمئن شوید که موارد زیر را دارید:

1. Node.js نصب شده است.
2. موجود نمایشگاه پروژه اگر ندارید، با آن یکی بسازید expo init.
3. الف Firebase حساب و پروژه اگر ندارید، یک پروژه Firebase در کنسول Firebase ایجاد کنید.
4. را نصب کنید Expo Firebase SDK با استفاده از expo install فرمان

مرحله 1: Firebase SDK را برای Expo نصب کنید

Expo یک راه آسان برای نصب بسته های Firebase ارائه می دهد. ترمینال خود را باز کنید و به فهرست پروژه Expo خود بروید، سپس وابستگی های Firebase را نصب کنید:

expo install firebase

با این کار Firebase SDK لازم برای برنامه‌های Expo نصب می‌شود.

مرحله 2: Firebase را در کنسول Firebase تنظیم کنید

1. به کنسول Firebase بروید: از کنسول Firebase دیدن کنید.
2. یک پروژه جدید ایجاد کنید: اگر از قبل پروژه Firebase ندارید، آن را ایجاد کنید.
3. Firebase را به برنامه خود اضافه کنید:
   • برای وب: از آنجایی که Expo از یک راه اندازی مبتنی بر وب استفاده می کند، آن را به عنوان یک برنامه وب در Firebase پیکربندی می کنیم.
   • به کنسول Firebase بروید و انتخاب کنید وب (>) برای افزودن یک برنامه وب جدید.
   • شی پیکربندی Firebase را که Firebase برای شما ایجاد می کند کپی کنید.

در اینجا یک شیء پیکربندی Firebase معمولی به نظر می رسد:

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",
};

مرحله 3: Firebase را در برنامه React Native خود پیکربندی کنید

هنگامی که پیکربندی Firebase را دریافت کردید، می توانید آن را در برنامه React Native Expo خود تنظیم کنید. خودت را باز کن App.js یا هر نقطه ورودی دیگر برنامه شما، و 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
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",
};

// Initialize Firebase if it's not already initialized
if (!firebase.apps.length) {
  firebase.initializeApp(firebaseConfig);
} else {
  firebase.app(); // Use the default app
}

const App = () => {
  const [email, setEmail] = useState('');
  const [password, setPassword] = useState('');
  const [user, setUser] = useState(null);

  const signUp = async () => {
    try {
      await firebase.auth().createUserWithEmailAndPassword(email, password);
      alert('User created!');
    } catch (error) {
      alert(error.message);
    }
  };

  const signIn = async () => {
    try {
      await firebase.auth().signInWithEmailAndPassword(email, password);
      alert('User signed in!');
    } catch (error) {
      alert(error.message);
    }
  };

  const signOut = async () => {
    try {
      await firebase.auth().signOut();
      setUser(null);
      alert('User signed out!');
    } catch (error) {
      alert(error.message);
    }
  };

  return (
    <View style={{ padding: 20 }}>
      <TextInput
        placeholder="Email"
        value={email}
        onChangeText={setEmail}
        style={{ borderBottomWidth: 1, marginBottom: 10 }}
      />
      <TextInput
        placeholder="Password"
        secureTextEntry
        value={password}
        onChangeText={setPassword}
        style={{ borderBottomWidth: 1, marginBottom: 20 }}
      />
      <Button title="Sign Up" onPress={signUp} />
      <Button title="Sign In" onPress={signIn} />
      <Button title="Sign Out" onPress={signOut} />
      {user && <Text>Welcome, {user.email}</Text>}
    </View>
  );
};

export default App;

اینجا چه خبر است؟

1. راه اندازی Firebase: ما Firebase را با استفاده از شی پیکربندی که از کنسول Firebase کپی کردید مقداردهی اولیه می کنیم.
2. احراز هویت: این برنامه دارای قابلیت های اساسی برای ثبت نام و ورود کاربران با احراز هویت Firebase است.

اکنون Firebase به برنامه Expo شما متصل است و می توانید مستقیماً از خدمات Firebase مانند احراز هویت استفاده کنید.

مرحله 4: استفاده از پایگاه داده بیدرنگ Firebase (اختیاری)

Firebase a پایگاه داده بیدرنگ که داده ها را در تمام مشتریان در زمان واقعی همگام می کند. بیایید یک مثال ساده برای ذخیره و بازیابی داده ها اضافه کنیم.

ابتدا ماژول Firebase Database را اضافه کنید:

import 'firebase/database';

سپس، از Firebase Realtime Database API برای ذخیره و واکشی داده ها استفاده کنید:

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));
};

در این مثال:

• writeData(): داده های کاربر را در پایگاه داده بیدرنگ Firebase ذخیره می کند.
• readData(): داده های ذخیره شده کاربر را بازیابی می کند.

مرحله 5: برنامه خود را اجرا کنید

اکنون که احراز هویت Firebase و پایگاه داده Realtime را ادغام کرده اید، می توانید برنامه خود را اجرا کنید و آن را در عمل مشاهده کنید.

برای نمایشگاه CLI:

expo start

کد QR را با برنامه Expo Go گوشی خود اسکن کنید و می توانید ثبت نام کاربر، ورود به سیستم و ذخیره داده ها را در Firebase آزمایش کنید.

نتیجه گیری

تنها در چند مرحله ساده، با موفقیت یکپارچه شده اید Firebase با شما React Native Expo برنامه! اکنون پایه و اساس ساخت برنامه‌های قوی با ویژگی‌هایی مانند احراز هویت کاربر و همگام‌سازی داده‌ها در زمان واقعی را دارید که توسط Firebase پشتیبانی می‌شوند.

در این پست یاد گرفتید که چگونه:

• Firebase SDK را در برنامه Expo خود نصب کنید.
• برای ثبت نام و ورود کاربر، احراز هویت Firebase را تنظیم کنید.
• داده ها را از پایگاه داده بیدرنگ Firebase بنویسید و بخوانید.
• برنامه خود را اجرا کنید و ویژگی های Firebase را در زمان واقعی آزمایش کنید.

با مجموعه ابزارهای Firebase، می توانید به راحتی عملکرد برنامه خود را گسترش دهید تا شامل اعلان های فشار، فضای ذخیره سازی ابری، تجزیه و تحلیل و موارد دیگر شود.

کد نویسی مبارک!