استخراج و consume کردن دیتا از Firestore

استخراج داده از Firebase Firestore در یک برنامه React

استخراج داده از Firebase Firestore در یک برنامه React

Firebase یکی از سرویس های جدید گوگل می باشد که امکانات و قابلیت های بیشماری را در اختیار شما قرار میدهد. به شما امکان می دهد که به راحتی یک برنامه و اپلیکیشن تحت وب را بدون نیاز به سرور، در سیستم خود ایجاد و راه اندازی کنید.

فایربیس با ارائه قابلیت هایی مثل احراز هویت، توابع cloud یا فضای ابری، پایگاه داده real-time (بلادرنگ) و … به عنوان یک سرویس کامل و واقعی شناخته شده است.

در ادامه آموزش راه اندازی و استفاده از برخی قابلیت های فایربیس خواهیم پرداخت.

راه اندازی اولیه

ابتدا مطمئن شوید که یک حساب کاربری در وب سایت رسمی Firebase دارید. سپس یک پروژه جدید فایربیس ایجاد و بر روی Add Firebase to Your Web App کلیک کنید. بعد از آن به بخش Could Firestore وارد شوید و یک مجموعه جدید به نام Blogs ایجاد کنید. مطابق دستورات زیر یک داکیومنت یا سند به آن اضافه کنید.

body: “Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.”

created_at: November 11, 2020 at 12:00:00 AM UTC+5:30

posted_by: “Sam

title: “New Egg Recipe”

اکنون وارد برنامه React شوید و Firebase را نصب کنید.

npm i firebase

ذخیره سازی پیکربندی ها

یک فایل جدید جهت ذخیره سازی تمام  پیکربندی های مورد نیاز، برای اتصال به پروژه فایربیس بسازید. نام آن را firebase.config.js بگذارید. سپس به تنظیمات پروژه بروید و firebaseConfig را کپی و در داخل فایل firebase.config.js پیست (paste) کنید.

import firebase from ‘firebase’

var firebaseConfig = {

apiKey: “xxxxxxxxxxxxxxxx”,

authDomain: “xxxxxxxxxxxxxxxx”,

databaseURL: “xxxxxxxxxxxxxxxx”,

projectId: “xxxxxxxxxxxxxxxx”,

storageBucket: “xxxxxxxxxxxxxxxx”,

messagingSenderId: “xxxxxxxxxxxxxxxx”,

appId: “xxxxxxxxxxxxxxxx”,

measurementId: “xxxxxxxxxxxxxxxx”

};

const firebaseApp=firebase.initializeApp(firebaseConfig);

const db=firebase.firestore();

export default db;

مطمئن شوید که firebaseConfig پروژه های فایربیس خود را، به درستی اضافه کرده اید. مقداردهی اولیه برنامه Firebase را از طریق firebaseConfig به متد ()firebase.initializeapp انجام دهید .

با فراخوانی متد firestore در Object فایربیس به پایگاه داده مراجعه و در آن یک متغیر ذخیره کنید.

استخراج و consume کردن دیتا از Firestore

استخراج و دریافت داده از فایر استور شبیه درست شبیه به دریافت فایل JSON از REST API می ماند.

در ابتدا دستور db از کانفیگ فایل را وارد میکنیم. سپس برای ساختن state و درخواست واکشی یا fetch کردن داده ها دستورات useState و useEffect را ارسال کنید:

import db from ‘./firebase.config’;

import React,{useState,useEffect} from ‘react’;

برای ذخیره سازی داده ها از state یک مکان مشخص و ایجاد کنید:

const [blogs,setBlogs]=useState([])

برای واکشی داده ها از فایر استور و فراخوانی آن در useEffect، مانند دستورات زیر یک تابع async ایجاد کنید:

useEffect(() => {

fetchBlogs();

}, [])

درون متد ()fetchBlogs ، با فراخوانی متد ()collection در شی db مرجع پایگاه داده خود را دریافت کنید. سپس به پایگاه داده بروید و نام مجموعه را به عنوان پارامتر ارسال کنید:

const fetchBlogs=async()=>{

const response=db.collection(‘Blogs’);

}

برای بدست آوردن داده ها از شی response ، از کلمه کلیدی await استفاده میشود.

در شی response، متد ()get را فراخوانی کنید و آن را داخل متغیر data ذخیره کنید:

const fetchBlogs=async()=>{

const response=db.collection(‘Blogs’);

const data=await response.get();

}

شی data چه ویژگی خاصی را ارائه میدهد؟

شی data شامل ویژگی ایی به نام docs است که حاوی یک سری اطلاعات جداگانه و مربوط به هر سند در مجموعه است. بنابراین هر داکیومنت یا سند می تواند حاوی اطلاعاتی در مورد یک وبلاگ منحصر به فرد و شخصی باشد. دستور data.docs را برای بدست آوردن یک آیتم تکرار کنید و متد ()data را در هر آیتم برای بدست آوردن داده های داخل آن، فراخوانی کنید.

const fetchBlogs=async()=>{

const response=db.collection(‘Blogs’);

const data=await response.get();

data.docs.forEach(item=>{

setBlogs([…blogs,item.data()])

})

}

همانطور که در حلقه بالا نشان داده شد، میتوانید داده ها را به state خود اضافه کنید .

از آنجا که مجموعه Blogs از یک سند تشکیل شده است ، state شما هم شامل یک آیتم میشود. در آخر از طریق state و ارائه داده ها در DOM چرخه را ادامه دهید.

return (

<div className=”App”>

{

blogs && blogs.map(blog=>{

return(

<div className=”blog-container”>

<h4>{blog.title}</h4>

<p>{blog.body}</p>

</div>

)

})

}

</div>

);

کد نهایی

تمام کدی که داده های یک مجموعه فایر استور ، مصرف میکنند به شکل زیر است:

import ‘./App.css’;

import db from ‘./firebase.config’;

import React,{useState,useEffect} from ‘react’;

 

function App() {

const [blogs,setBlogs]=useState([])

const fetchBlogs=async()=>{

const response=db.collection(‘Blogs’);

const data=await response.get();

data.docs.forEach(item=>{

setBlogs([…blogs,item.data()])

})

}

useEffect(() => {

fetchBlogs();

}, [])

return (

<div className=”App”>

{

blogs && blogs.map(blog=>{

return(

<div className=”blog-container”>

<h4>{blog.title}</h4>

<p>{blog.body}</p>

</div>

)

})

}

</div>

);

}

 

export default App;

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

بستن