نحوه ایجاد یک برنامه CRUD با Firebase و React

بسیاری از برنامه‌هایی که توسعه می‌دهید، لایه‌های نازکی در اطراف یک مدل داده جامد هستند. با استفاده از React و Firebase می توانید چنین برنامه هایی را به راحتی توسعه دهید.

با استفاده از ترکیب React و Firebase، می توانید برنامه های فوق العاده واکنش گرا تولید کنید. اگر قبلاً با React آشنا هستید، یادگیری نحوه ادغام Firebase یک قدم عالی بعدی است.

برای درک اصول مدیریت داده های Firebase، باید یاد بگیرید که چگونه پایگاه داده Firestore آن را با React جفت کنید تا یک برنامه CRUD بسازید. با استفاده از این دانش، می‌توانید شروع به ایجاد برنامه‌های کاربردی مقیاس‌پذیر تمام پشته با کد باطن کم یا صفر کنید.

برنامه React خود را به Firebase Firestore متصل کنید

اگر قبلاً این کار را نکرده اید، به کنسول Firebase بروید و Firestore را به پروژه React خود متصل کنید.

اگر قبلاً برنامه React خود را ایجاد کرده باشید، این فرآیند آسان است.

بعد، یک پوشه firebase_setup جدید در پوشه src پروژه خود بسازید. یک فایل firebase.js در داخل این پوشه ایجاد کنید. کد پیکربندی را که هنگام ایجاد یک پروژه Firebase دریافت می کنید در فایل جدید قرار دهید:

import { initializeApp } from "firebase/app";
import {getFirestore} from "@firebase/firestore"
 
const firebaseConfig = {
  apiKey: process.env.REACT_APP_apiKey,
  authDomain: process.env.REACT_APP_authDomain,
  projectId: process.env.REACT_APP_projectId,
  storageBucket: process.env.REACT_APP_storageBucket,
  messagingSenderId: process.env.REACT_APP_messagingSenderId,
  appId: process.env.REACT_APP_appId,
  measurementId: process.env.REACT_APP_measurementId
};
 
const app = initializeApp(firebaseConfig);
export const firestore = getFirestore(app)

متغیر firestore محیط Firebase Firestore شما را نگه می دارد. هنگام درخواست API، از این در سراسر برنامه استفاده خواهید کرد.

اگرچه این کد از روش .env برای پنهان کردن اطلاعات پیکربندی استفاده می کند، اما راه های بهتری برای ذخیره اسرار در React وجود دارد.

اکنون کتابخانه های firebase و uuid را در برنامه React خود نصب کنید. در حالی که uuid اختیاری است، ممکن است از آن به عنوان یک شناسه منحصر به فرد برای هر سند ارسال شده به پایگاه داده Firestore استفاده کنید.

npm install firebase uuid

در اینجا نمایشی از آنچه می خواهید با React و Firestore بسازید آورده شده است:

داده ها را در پایگاه داده Firestore بنویسید

برای افزودن اسناد به Firebase می توانید از روش setDoc یا addDoc استفاده کنید. روش addDoc این مزیت را دارد که به Firebase دستور می دهد برای هر رکورد یک شناسه منحصر به فرد ایجاد کند.

برای شروع، وابستگی های زیر را به App.js وارد کنید:

import './App.css';
import { useEffect, useState } from 'react';
import { addDoc, collection, setDoc, deleteDoc, doc, query, onSnapshot } from "firebase/firestore";
import { firestore } from './firebase_setup/firebase';
import { v4 as uuidv4 } from 'uuid'; 

قبل از ادامه، به ساختار DOM و حالت هایی که این آموزش استفاده می کند نگاه کنید:

function App() {
  const [info, setInfo] = useState([])
  const [isUpdate, setisUpdate] = useState(false)
  const [docId, setdocId] = useState("")
  const [detail, setDetail] = useState("")
  const [ids, setIds] = useState([])
  
  return (
    <div className="App">
      <form>
        <input type= "text" value={detail} onChange={handledatachange} />
        {
          isUpdate ? (
            <>
              <button onClick={handlesubmitchange} type = "submit">Update</button>
              <button onClick={() => { setisUpdate(false); setDetail("")}}>
                X
              </button>
            </>
          ) : (<button onClick={submithandler} type="submit">Save</button>)
        }
      </form>
 
      {info.map((data, index)=>
      <div key={ids[index]} className='data-container' id='data-container'>
        <p className='data' id='data' data-id ={ids[index]} key={ids[index]}>{data}</p>

        <button className='detele-button' id='delete-button' onClick={handledelete}>
          Delete
        </button>
 
        <button className='update-button' id='update-button' onClick={handleupdate}>
          Edit
        </button>
      </div>
      )}
    </div>
  );
}
 
export default App;

سپس، یک کنترل کننده ارسال برای نوشتن داده ها در پایگاه داده Firestore ایجاد کنید. این یک رویداد onSubmit است. بنابراین از آن در دکمه ارسال استفاده خواهید کرد.

علاوه بر این، یک کنترل کننده تغییر ایجاد کنید. این رویداد به تغییرات فیلد فرم گوش می دهد و ورودی را به یک آرایه (آرایه جزئیات در این مورد) ارسال می کند. این به پایگاه داده می رود.

  const handledatachange = (e) => {
    setDetail(e.target.value)
  };
 
  const submithandler = (e) => {
    e.preventDefault()
    const ref = collection(firestore, "test_data")
 
    let data = {
        uuid: uuidv4(),
        testData: detail
    }
    
    try {
        addDoc(ref, data)
    } catch(err) {
        console.log(err)
    }
 
    setDetail("")
  }

در حالی که Firebase به طور خودکار شناسه های سند را تولید می کند (مگر اینکه از آن جلوگیری کنید)، فیلد UUID همچنین به عنوان یک شناسه منحصر به فرد برای هر سند عمل می کند.

داده ها را از پایگاه داده Firestore بخوانید

واکشی داده ها از پایگاه داده Firestore در قلاب useEffect با استفاده از روش جستجوی Firestore:

  useEffect(() => {
    const getData = async () => {
      const data = await query(collection(firestore, "test_data"));
 
      onSnapshot(data, (querySnapshot) => {
        const databaseInfo = [];
        const dataIds = []
 
        querySnapshot.forEach((doc) => {
          databaseInfo.push(doc.data().testData);
          dataIds.push(doc.id)
        });
 
        setIds(dataIds)
        setInfo(databaseInfo)
      });
    }
 
    getData()
  }, [])

کد بالا از کوئری Firebase برای دریافت عکس فوری از داده های ارسال شده به Firestore با استفاده از تابع onSnapshot استفاده می کند.

یک عکس فوری به برنامه شما اجازه می دهد تا به تغییرات پشتیبان گوش دهد. هر بار که شخصی در پایگاه داده می نویسد، کلاینت را به طور خودکار به روز می کند.

حالت setInfo داده های هر سند را می گیرد. هنگام ارائه به DOM، از طریق این (آرایه اطلاعات) نقشه برداری می کنید.

حالت setIds همه شناسه‌های سند (که به‌عنوان آرایه ID ارسال می‌شوند) را ردیابی می‌کند. می توانید از هر شناسه برای اجرای پرس و جوهای Delete و Update در هر سند استفاده کنید. سپس می توانید هر شناسه سند را به عنوان یک ویژگی DOM در حین نقشه برداری از طریق آرایه اطلاعات ارسال کنید.

در اینجا وضعیت استفاده در DOM آمده است (همانطور که در قطعه کد قبلی نشان داده شده است):

به روز رسانی داده های موجود در Firestore

از روش setDoc برای به روز رسانی یک سند یا یک فیلد در یک سند استفاده کنید.

دو کنترل کننده برای عمل به روز رسانی تعریف کنید. یکی دکمه ارسال را برای داده های ویرایش شده کنترل می کند (handlesubmitchange)، در حالی که دیگری برای دکمه ای است که داده ها را در قسمت ورودی برای ویرایش بازنویسی می کند (handleupdate):

const handleupdate = (e) => {
    setisUpdate(true)
    setDetail(e.target.parentNode.children[0].textContent)
    setdocId(e.target.parentNode.children[0].getAttribute("data-id"))
};
 
const handlesubmitchange = async (e) => {
    e.preventDefault()
    const docRef = doc(firestore, 'test_data', docId);
 
    const updatedata = await {
      testData: detail
    };
 
    await setDoc(docRef, updatedata, { merge:true })
        .then(console.log("Data changed successfully"))
 
    setisUpdate(false)
    setDetail("") 
}

همانطور که در قطعه کد قبلی نشان داده شده است، در اینجا رندر DOM برای اقدامات ایجاد و به روز رسانی است:

تابع handleupdate هر شناسه سند را در DOM با استفاده از مسیر گره آن هدف قرار می دهد. از این برای پرس و جو کردن هر سند از پایگاه داده برای ایجاد تغییرات استفاده می کند. دکمه ویرایش از این عملکرد استفاده می کند.

بنابراین isUpdate (که توسط وضعیت setisUpdate ردیابی می شود) زمانی که کاربر روی دکمه Edit کلیک می کند، مقدار true را برمی گرداند. این عمل دکمه Update را نمایش می دهد که وقتی کاربر روی آن کلیک می کند، داده های ویرایش شده را ارسال می کند. دکمه X اضافی هنگام کلیک کردن، عمل ویرایش را با تنظیم isUpdate روی false می‌بندد.

اگر isUpdate نادرست باشد، DOM به جای آن دکمه ذخیره اولیه را حفظ می کند.

حذف داده ها از Firestore

با استفاده از روش deleteDoc می توانید داده های موجود را از Firestore حذف کنید. همانطور که برای عمل Update انجام دادید، هر سند را با استفاده از شناسه منحصر به فرد خود با هدف قرار دادن ویژگی DOM آن با استفاده از مسیر گره بازیابی کنید:

const handledelete = async (e) => {
    const docRef = doc(firestore, 'test_data', e.target.parentNode.children[0].getAttribute("data-id"));
 
    await deleteDoc(docRef)
        .then(() => {
          console.log(`${e.target.parentNode.children[0].textContent} has been deleted successfully.`)
        })
        .catch(error => {
          console.log(error);
        })
}

تابع بالا را به دکمه Delete منتقل کنید. هنگامی که کاربر روی آن کلیک می کند، داده ها را از پایگاه داده و DOM حذف می کند.

Firebase را با بهترین فریم ورک فرانت اند خود جفت کنید

Firebase به شما کمک می کند تا کد کمتری بنویسید در حالی که داده ها را مستقیماً از سمت مشتری جستجو می کنید. علاوه بر React، از دیگر فریم‌ورک‌های جاوا اسکریپت از جمله Angular.js، Vue.js و بسیاری دیگر پشتیبانی می‌کند.

اکنون که نحوه عملکرد آن با React را دیدید، ممکن است بخواهید جفت کردن آن با Angular.js را نیز بیاموزید.

منبع مقاله