Catch up on everything we announced at this year's Firebase Summit. Learn more

Firebase را به پروژه JavaScript خود اضافه کنید

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

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

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

مشاهده درک پروژه فایربیس برای کسب اطلاعات بیشتر در مورد پروژه های فایربیس و بهترین شیوه برای اضافه کردن برنامه به پروژه.

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

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

این صفحه را توصیف دستورالعمل تنظیم را برای نسخه 9 از فایربیس JS SDK، که با استفاده از یک جاوا اسکریپت ماژول فرمت.

این گردش کار استفاده NPM و نیاز به bundlers ماژول و یا جاوا اسکریپت قالب چارچوب دلیل SDK V9 است برای کار با بهینه سازی شده bundlers ماژول برای از بین بردن کد استفاده نشده (درخت تکان دادن) و کاهش اندازه 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 project configuration
    const firebaseConfig = {
      //...
    };
    
    const app = initializeApp(firebaseConfig);
    

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

مرحله 3: دسترسی فایربیس در برنامه شما

خدمات 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 project 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: استفاده از یک bundler ماژول (webpack / عرضه به) برای کاهش اندازه

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

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

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

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

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

مراحل بعدی

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