از Firebase برای ذخیره سازی داده های پشتیبان خود استفاده کنید و برنامه های ساده را به راحتی توسعه دهید.
طبق نظرسنجی Stack Overflow در سال 2022، 21.14 درصد از توسعه دهندگان از Firebase استفاده می کنند که آن را به چهارمین پلتفرم ابری محبوب تبدیل می کند. این یک فناوری در حال تکامل برای ادغام یکپارچه باطن است.
با Firebase، می توانید بدون نوشتن یک خط کد پشتیبان، یک برنامه فول استک توسعه دهید. با نحوه اتصال برنامه React.js خود به Firebase و ساخت در حال حرکت آشنا شوید.
بسته Firebase را نصب کنید
پس از ایجاد برنامه React خود، دایرکتوری را به پوشه اصلی پروژه خود تغییر دهید و بسته Firebase را با اجرای:
npm install firebase
برنامه React خود را به پروژه Firebase اضافه کنید
مرحله بعدی ایجاد یک پروژه Firebase و پیوند آن با برنامه React است. به کنسول Firebase بروید:
- برای شروع یک پروژه Firebase جدید روی Add project کلیک کنید.
- نام پروژه را وارد کنید، سپس روی Continue کلیک کنید.
- در صفحه بعد روی Continue کلیک کنید.
- حساب Firebase خود را از منوی بازشو انتخاب کنید یا اگر قبلاً ندارید، روی ایجاد یک حساب جدید کلیک کنید.
- در نهایت روی Create project کلیک کنید.
- پس از اتمام فرآیند روی Continue کلیک کنید.
- سپس، روی نماد وب () در سمت چپ بالای صفحه زیر کلیک کنید تا Firebase برای وب راه اندازی شود.
- در قسمت ارائه شده یک نام مستعار برای برنامه خود وارد کنید. سپس روی ثبت برنامه کلیک کنید.
- کد تولید شده را کپی کرده و آن را برای مرحله زیر نگه دارید (در قسمت زیر بحث شده است).
- روی Continue to the console کلیک کنید.
- گزینه های زیادی در صفحه زیر وجود دارد. به پایین بروید و Cloud Firestore را انتخاب کنید زیرا در این مورد فقط باید یک پایگاه داده راه اندازی کنید.
- بعد روی ایجاد پایگاه داده کلیک کنید.
- روی Next کلیک کنید. مکان Firestore مورد نظر خود را از منوی کشویی انتخاب کنید.
- سپس روی Enable کلیک کنید تا پایگاه داده Firestore ایجاد شود.
Firebase را در برنامه React خود راه اندازی کنید
یک پوشه جدید در پوشه src پروژه خود ایجاد کنید. می توانید این firebase_setup را صدا بزنید. سپس یک فایل firebase.js در داخل آن پوشه ایجاد کنید. سپس کد تولید شده قبلی را در این فایل قرار دهید.
در حال حاضر، می توانید شی پیکربندی (firebaseConfig) را در یک فایل .env ذخیره کنید. اما در نظر داشته باشید که از یک راه امن تر برای پنهان کردن اسرار React در تولید استفاده کنید. داده‌هایی که در یک فایل .env ذخیره می‌کنید می‌توانند به راحتی در ساخت برنامه شما نشت کنند.
اگر از گزینه .env استفاده می کنید، “REACT_APP” را به نام هر متغیر داخل آن اضافه کنید
env
. در غیر این صورت، برنامه شما رشته ها را نمی خواند. علاوه بر این، هر بار که جزئیات موجود در آن را تغییر می دهید، سرور React خود را مجددا راه اندازی کنید
env
فایل.
به عنوان مثال، برای وارد کردن کلید مخفی Firebase برنامه خود در فایل env.
REACT_APP_apiKey = yourFirebaseAccessKey
بنابراین، می توانید کد تولید شده را به صورت زیر تنظیم کنید:
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)
اتصال Firebase خود را تست کنید
می‌توانید اتصال را با ارسال داده‌های ساختگی به Firestore آزمایش کنید. با ایجاد یک پوشه handles در دایرکتوری src پروژه خود شروع کنید. یک کنترل کننده ارسال در داخل این فایل ایجاد کنید. برای مثال می توانید این handlesubmit.js را صدا بزنید:
import { addDoc, collection } from "@firebase/firestore"
import { firestore } from "../firebase_setup/firebase"
const handleSubmit = (testdata) => {
const ref = collection(firestore, "test_data") // Firebase creates this automatically
let data = {
testData: testdata
}
try {
addDoc(ref, data)
} catch(err) {
console.log(err)
}
}
export default handleSubmit
سپس داخل App.js:
import './App.css';
import handleSubmit from './handles/handlesubmit';
import { useRef } from 'react';
function App() {
const dataRef = useRef()
const submithandler = (e) => {
e.preventDefault()
handleSubmit(dataRef.current.value)
dataRef.current.value = ""
}
return (
<div className="App">
<form onSubmit={submithandler}>
<input type= "text" ref={dataRef} />
<button type = "submit">Save</button>
</form>
</div>
);
}
export default App;
برنامه React خود را اجرا کنید و سعی کنید داده ها را از طریق فرم ارسال کنید. برای مشاهده اطلاعات ارسالی در مجموعه خود، کنسول پایگاه داده Firebase را بازخوانی کنید. با وجود اصول اولیه، می‌توانید بسیاری از کارهای دیگر Firebase را که می‌تواند انجام دهد را بررسی کنید تا ببینید چگونه می‌توانید از آن بهترین استفاده کنید.
با Firebase در حال حرکت بسازید و واکنش نشان دهید
Firebase یک راه حل همه کاره باطن به عنوان یک سرویس است که به شما امکان می دهد برنامه خود را به طور موثر مقیاس بندی کنید. هنگامی که برنامه React خود را متصل کردید، می توانید از ویژگی های متعدد آن برای ساخت وب سایت خود مطابق میل خود استفاده کنید.
به عنوان مثال، جعبه ابزار احراز هویت Firebase یکی از ویژگی هایی است که ممکن است بخواهید آن را بررسی کنید.