Firebase را به پروژه جاوا اسکریپت خود اضافه کنید

این راهنما را دنبال کنید تا از Firebase JavaScript SDK در برنامه وب خود یا به عنوان یک کلاینت برای دسترسی کاربر نهایی، به عنوان مثال، در دسکتاپ Node.js یا برنامه IoT استفاده کنید.

مرحله 1 : یک پروژه Firebase ایجاد کنید و برنامه خود را ثبت کنید

قبل از اینکه بتوانید Firebase را به برنامه جاوا اسکریپت خود اضافه کنید، باید یک پروژه Firebase ایجاد کنید و برنامه خود را در آن پروژه ثبت کنید. هنگامی که برنامه خود را در Firebase ثبت می کنید، یک شی پیکربندی Firebase دریافت می کنید که از آن برای اتصال برنامه خود به منابع پروژه Firebase خود استفاده می کنید.

برای کسب اطلاعات بیشتر درباره پروژه‌های Firebase و بهترین روش‌ها برای افزودن برنامه‌ها به پروژه‌ها، از Understand Firebase Projects دیدن کنید.

اگر قبلاً پروژه جاوا اسکریپت ندارید و فقط می‌خواهید یک محصول Firebase را امتحان کنید، می‌توانید یکی از نمونه‌های شروع سریع ما را دانلود کنید.

مرحله 2 : SDK را نصب کرده و Firebase را مقداردهی اولیه کنید

این صفحه دستورالعمل‌های راه‌اندازی برای API مدولار Firebase JS SDK را شرح می‌دهد که از قالب ماژول جاوا اسکریپت استفاده می‌کند.

این گردش کار از npm استفاده می‌کند و به بسته‌کننده‌های ماژول یا ابزارهای چارچوب جاوا اسکریپت نیاز دارد، زیرا API ماژولار برای کار با بسته‌کننده‌های ماژول برای حذف کدهای استفاده نشده (درخت تکان دادن) و کاهش اندازه SDK بهینه شده است.

  1. Firebase را با استفاده از npm نصب کنید:

    npm install firebase

  2. Firebase را در برنامه خود راه اندازی کنید و یک شی Firebase App ایجاد کنید:

    import { initializeApp } from 'firebase/app';

// TODO: Replace the following with your app's Firebase configuration
const firebaseConfig = {
  //...
};

const app = initializeApp(firebaseConfig);

    برنامه Firebase یک شی کانتینر مانند است که پیکربندی مشترک را ذخیره می‌کند و احراز هویت را در سرویس‌های Firebase به اشتراک می‌گذارد. پس از اینکه یک شیء Firebase App را در کد خود مقداردهی کردید، می توانید خدمات Firebase را اضافه کرده و شروع به استفاده از آن کنید.

    اگر برنامه شما دارای ویژگی‌های پویا مبتنی بر رندر سمت سرور (SSR) است، باید اقدامات بیشتری را انجام دهید تا مطمئن شوید که پیکربندی شما در سراسر رندر سرور و پاس‌های رندر کلاینت ادامه دارد. در منطق سرور خود، رابط FirebaseServerApp را برای بهینه سازی مدیریت جلسه برنامه خود با کارکنان خدمات پیاده سازی کنید.

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

خدمات Firebase (مانند Cloud Firestore ، Authentication ، Realtime Database ، Remote Config و موارد دیگر) برای وارد کردن در بسته‌های فرعی در دسترس هستند.

مثال زیر نشان می دهد که چگونه می توانید از Cloud Firestore Lite SDK برای بازیابی لیستی از داده ها استفاده کنید.

import { initializeApp } from 'firebase/app';
import { getFirestore, collection, getDocs } from 'firebase/firestore/lite';
// Follow this pattern to import other Firebase services
// import { } from 'firebase/<service>';

// TODO: Replace the following with your app's Firebase configuration
const firebaseConfig = {
  //...
};

const app = initializeApp(firebaseConfig);
const db = getFirestore(app);

// Get a list of cities from your database
async function getCities(db) {
  const citiesCol = collection(db, 'cities');
  const citySnapshot = await getDocs(citiesCol);
  const cityList = citySnapshot.docs.map(doc => doc.data());
  return cityList;
}
 مرحله 4 : از یک بسته ماژول (webpack/Rollup) برای کاهش اندازه استفاده کنید

Firebase Web SDK برای کار با بسته‌کننده‌های ماژول برای حذف هرگونه کد استفاده نشده (درخت تکان دادن) طراحی شده است. ما به شدت توصیه می کنیم از این رویکرد برای برنامه های تولیدی استفاده کنید. ابزارهایی مانند Angular CLI ، Next.js ، Vue CLI ، یا Create React App به‌طور خودکار دسته‌بندی ماژول‌ها را برای کتابخانه‌های نصب‌شده از طریق npm و وارد شده به پایگاه کد شما مدیریت می‌کنند.

برای اطلاعات بیشتر به راهنمای ما در استفاده از باندلرهای ماژول با Firebase مراجعه کنید.

خدمات Firebase در دسترس برای وب

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

دستورات زیر نحوه وارد کردن کتابخانه های Firebase نصب شده به صورت محلی با npm را نشان می دهد. برای گزینه‌های واردات جایگزین، به مستندات کتابخانه‌های موجود مراجعه کنید.

1 Firebase AI Logic قبلاً " Vertex AI in Firebase " با بسته firebase/vertexai نامیده می شد.

مراحل بعدی

درباره Firebase بیاموزید: