ওয়েবের জন্য Firebase বুঝুন

ফায়ারবেস ব্যবহার করে একটি ওয়েব অ্যাপ তৈরি করার সময়, আপনি অপরিচিত ধারণার সম্মুখীন হতে পারেন, অথবা এমন কিছু ক্ষেত্রের সন্ধান পেতে পারেন যেখানে আপনার প্রকল্পের জন্য সঠিক সিদ্ধান্ত নিতে আরও তথ্যের প্রয়োজন হতে পারে। এই পৃষ্ঠাটির উদ্দেশ্য হলো সেই প্রশ্নগুলোর উত্তর দেওয়া অথবা আপনাকে আরও জানার জন্য প্রয়োজনীয় তথ্যের উৎসের সন্ধান দেওয়া।

এই পৃষ্ঠায় অন্তর্ভুক্ত নয় এমন কোনো বিষয় সম্পর্কে আপনার প্রশ্ন থাকলে, আমাদের অনলাইন কমিউনিটিগুলোর একটিতে যান। আমরা পর্যায়ক্রমে নতুন বিষয় দিয়ে এই পৃষ্ঠাটি আপডেট করব, তাই আপনি যে বিষয়টি সম্পর্কে জানতে চান তা যোগ করা হয়েছে কিনা তা দেখতে আবার দেখুন।

SDK সংস্করণ: নেমস্পেসড এবং মডিউলার

ফায়ারবেস ওয়েব অ্যাপের জন্য দুটি এপিআই সারফেস প্রদান করে:

  • জাভাস্ক্রিপ্ট - নেমস্পেসড। এটি হলো জাভাস্ক্রিপ্ট ইন্টারফেস যা ফায়ারবেস বহু বছর ধরে রক্ষণাবেক্ষণ করে আসছে এবং পুরোনো ফায়ারবেস অ্যাপ ব্যবহারকারী ওয়েব ডেভেলপারদের কাছে এটি পরিচিত। যেহেতু নেমস্পেসড এপিআই ক্রমাগত নতুন ফিচার সাপোর্টের সুবিধা পায় না, তাই বেশিরভাগ নতুন অ্যাপের পরিবর্তে মডিউলার এপিআই গ্রহণ করা উচিত।
  • জাভাস্ক্রিপ্ট - মডিউলার । এই SDK-টি একটি মডিউলার পদ্ধতির উপর ভিত্তি করে তৈরি, যা SDK-এর আকার হ্রাস করে এবং webpack বা Rollup-এর মতো আধুনিক জাভাস্ক্রিপ্ট বিল্ড টুলগুলির সাথে অধিকতর কার্যকারিতা প্রদান করে।

মডিউলার এপিআই এমন বিল্ড টুলগুলোর সাথে ভালোভাবে কাজ করে, যা আপনার অ্যাপে ব্যবহৃত না হওয়া কোড ছেঁটে ফেলে; এই প্রক্রিয়াটি "ট্রি-শেকিং" নামে পরিচিত। এই এসডিকে দিয়ে তৈরি অ্যাপগুলোর সাইজ অনেক কমে যায়। নেমস্পেসড এপিআই একটি মডিউল হিসেবে পাওয়া গেলেও, এর কোনো কঠোর মডিউলার কাঠামো নেই এবং এটি সাইজ কমানোর ক্ষেত্রে একই রকম সুবিধা দেয় না।

যদিও মডিউলার এপিআই-এর বেশিরভাগ অংশ নেমস্পেসড এপিআই-এর মতোই প্যাটার্ন অনুসরণ করে, তবে কোডের বিন্যাস ভিন্ন। সাধারণত, নেমস্পেসড এপিআই নেমস্পেস এবং সার্ভিস প্যাটার্নের দিকে অভিমুখী, অন্যদিকে মডিউলার এপিআই স্বতন্ত্র ফাংশনের দিকে অভিমুখী। উদাহরণস্বরূপ, নেমস্পেসড এপিআই-এর ডট-চেইনিং, যেমন firebaseApp.auth() , মডিউলার এপিআই-তে একটিমাত্র getAuth() ফাংশন দ্বারা প্রতিস্থাপিত হয়, যা firebaseApp গ্রহণ করে এবং একটি Authentication ইনস্ট্যান্স রিটার্ন করে।

এর মানে হলো, মডিউলার অ্যাপ ডিজাইনের সুবিধা নিতে নেমস্পেসড এপিআই দিয়ে তৈরি ওয়েব অ্যাপগুলোকে রিফ্যাক্টরিং করতে হবে। আরও বিস্তারিত জানতে আপগ্রেড গাইড দেখুন।

জাভাস্ক্রিপ্ট - নতুন অ্যাপের জন্য মডিউলার এপিআই

আপনি যদি Firebase-এর সাথে নতুন কোনো ইন্টিগ্রেশন শুরু করেন, তাহলে SDK যোগ ও ইনিশিয়ালাইজ করার সময় মডিউলার API বেছে নিতে পারেন।

আপনার অ্যাপ তৈরি করার সময় মনে রাখবেন যে, আপনার কোড প্রধানত ফাংশনকে কেন্দ্র করে সাজানো থাকবে। মডিউলার এপিআই-তে, সার্ভিসগুলোকে প্রথম আর্গুমেন্ট হিসেবে পাস করা হয় এবং ফাংশনটি বাকি কাজ করার জন্য সেই সার্ভিসের বিবরণ ব্যবহার করে। উদাহরণস্বরূপ:

import { getAuth, onAuthStateChanged } from "firebase/auth";

const auth = getAuth(firebaseApp);
onAuthStateChanged(auth, user => {
  // Check for user status
});

For more examples and details, see the guides for each product area as well as the the modular API reference documentation .

আপনার অ্যাপে ওয়েব SDK যোগ করার উপায়

ফায়ারবেস তার বেশিরভাগ প্রোডাক্টের জন্য জাভাস্ক্রিপ্ট লাইব্রেরি সরবরাহ করে, যার মধ্যে Remote Config , FCM এবং আরও অনেক কিছু অন্তর্ভুক্ত। আপনার ওয়েব অ্যাপে ফায়ারবেস এসডিকে কীভাবে যুক্ত করবেন তা নির্ভর করে আপনি আপনার অ্যাপের সাথে কোন টুলিং (যেমন একটি মডিউল বান্ডলার) ব্যবহার করছেন তার উপর।

You can add any of the available libraries to your app via one of the supported methods:

  • এনপিএম (মডিউল বান্ডলারের জন্য)
  • সিডিএন (কন্টেন্ট ডেলিভারি নেটওয়ার্ক)

বিস্তারিত সেটআপ নির্দেশাবলীর জন্য, আপনার জাভাস্ক্রিপ্ট অ্যাপে ফায়ারবেস যোগ করুন দেখুন। এই বিভাগের বাকি অংশে উপলব্ধ বিকল্পগুলি থেকে বেছে নিতে সাহায্য করার জন্য তথ্য রয়েছে।

এনপিএম

Firebase npm প্যাকেজটি (যার মধ্যে ব্রাউজার এবং Node.js উভয় বান্ডেলই অন্তর্ভুক্ত) ডাউনলোড করলে আপনি Firebase SDK-এর একটি স্থানীয় কপি পাবেন, যা Node.js অ্যাপ, React Native বা Electron-এর মতো নন-ব্রাউজার অ্যাপ্লিকেশনগুলির জন্য প্রয়োজন হতে পারে। কিছু প্যাকেজের ক্ষেত্রে ডাউনলোডের সাথে Node.js এবং React Native বান্ডেলগুলো একটি বিকল্প হিসেবে অন্তর্ভুক্ত থাকে। SSR ফ্রেমওয়ার্কগুলির সার্ভার-সাইড রেন্ডারিং (SSR) ধাপের জন্য Node.js বান্ডেলগুলো অপরিহার্য।

webpack বা Rollup-এর মতো মডিউল বান্ডলারের সাথে npm ব্যবহার করলে অব্যবহৃত কোড "ট্রি-শেক" করা এবং নির্দিষ্ট পলিফিল প্রয়োগ করার মতো অপটিমাইজেশন অপশন পাওয়া যায়, যা আপনার অ্যাপের সাইজ অনেকাংশে কমিয়ে আনতে পারে। এই ফিচারগুলো প্রয়োগ করতে গেলে আপনার কনফিগারেশন এবং বিল্ড চেইনে কিছুটা জটিলতা যোগ হতে পারে, কিন্তু বিভিন্ন মূলধারার CLI টুল তা কমাতে সাহায্য করতে পারে। এই টুলগুলোর মধ্যে রয়েছে Angular , React , Vue , Next এবং অন্যান্য।

সারসংক্ষেপে:

  • অ্যাপের আকার অপ্টিমাইজেশনে মূল্যবান সুবিধা প্রদান করে
  • মডিউলগুলি পরিচালনা করার জন্য শক্তিশালী টুলিং উপলব্ধ আছে।
  • Node.js-এর সাথে SSR-এর জন্য প্রয়োজন

সিডিএন (কন্টেন্ট ডেলিভারি নেটওয়ার্ক)

ফায়ারবেসের সিডিএন-এ সংরক্ষিত লাইব্রেরিগুলো যুক্ত করা একটি সহজ এসডিকে সেটআপ পদ্ধতি, যা অনেক ডেভেলপারের কাছে পরিচিত হতে পারে। সিডিএন ব্যবহার করে এসডিকে যুক্ত করলে আপনার কোনো বিল্ড টুলের প্রয়োজন হবে না এবং মডিউল বান্ডলারের তুলনায় আপনার বিল্ড চেইন আরও সরল ও সহজে ব্যবহারযোগ্য হতে পারে। যদি আপনার অ্যাপের ইনস্টল করা আকার নিয়ে বিশেষ কোনো উদ্বেগ না থাকে এবং টাইপস্ক্রিপ্ট থেকে ট্রান্সপাইলিং করার মতো কোনো বিশেষ প্রয়োজনীয়তা না থাকে, তাহলে সিডিএন একটি ভালো বিকল্প হতে পারে।

সারসংক্ষেপে:

  • পরিচিত এবং সহজ
  • অ্যাপের আকার যখন প্রধান বিবেচ্য বিষয় নয়, তখন এটি উপযুক্ত।
  • আপনার ওয়েবসাইট বিল্ড টুল ব্যবহার না করলে এটি উপযুক্ত।

ফায়ারবেস ওয়েব এসডিকে ভ্যারিয়েন্ট

ফায়ারবেসের ওয়েব এসডিকে ব্রাউজার এবং নোড অ্যাপ্লিকেশন উভয় ক্ষেত্রেই ব্যবহার করা যায়। তবে, এর কয়েকটি প্রোডাক্ট নোড এনভায়রনমেন্টে উপলব্ধ নয়। সমর্থিত এনভায়রনমেন্টের তালিকা দেখুন।

কিছু প্রোডাক্ট SDK আলাদা ব্রাউজার এবং Node ভ্যারিয়েন্ট প্রদান করে, যার প্রতিটিই ESM এবং CJS উভয় ফরম্যাটে পাওয়া যায়, এবং কিছু প্রোডাক্ট SDK এমনকি Cordova বা React Native ভ্যারিয়েন্টও প্রদান করে। ওয়েব SDK-টি আপনার টুলিং কনফিগারেশন বা পরিবেশের উপর ভিত্তি করে সঠিক ভ্যারিয়েন্টটি সরবরাহ করার জন্য কনফিগার করা থাকে এবং বেশিরভাগ ক্ষেত্রে এটি ম্যানুয়ালি নির্বাচন করার প্রয়োজন হয় না। সমস্ত SDK ভ্যারিয়েন্টগুলো এন্ড-ইউজারদের ব্যবহারের জন্য ওয়েব অ্যাপ বা ক্লায়েন্ট অ্যাপ তৈরি করতে সাহায্য করার জন্য ডিজাইন করা হয়েছে, যেমন একটি Node.js ডেস্কটপ বা IoT অ্যাপ্লিকেশনে। যদি আপনার লক্ষ্য বিশেষ সুবিধাপ্রাপ্ত পরিবেশ (যেমন সার্ভার) থেকে অ্যাডমিনিস্ট্রেটিভ অ্যাক্সেস সেট আপ করা হয়, তবে এর পরিবর্তে Firebase Admin SDK ব্যবহার করুন।

বান্ডলার এবং ফ্রেমওয়ার্কের সাহায্যে পরিবেশ সনাক্তকরণ

আপনি যখন npm ব্যবহার করে Firebase ওয়েব SDK ইনস্টল করেন, তখন JavaScript এবং Node.js উভয় সংস্করণই ইনস্টল হয়ে যায়। প্যাকেজটি আপনার অ্যাপ্লিকেশনের জন্য সঠিক বান্ডেলগুলো সক্রিয় করতে বিস্তারিত পরিবেশ শনাক্তকরণের সুবিধা প্রদান করে।

আপনার কোডে যদি Node.js-এর require স্টেটমেন্ট ব্যবহার করা হয়, তাহলে SDK Node-এর জন্য নির্দিষ্ট বান্ডলটি খুঁজে নেয়। অন্যথায়, আপনার package.json ফাইলের সঠিক এন্ট্রি পয়েন্ট ফিল্ড (যেমন, main , browser বা module ) শনাক্ত করার জন্য আপনার বান্ডলারের সেটিংস সঠিকভাবে সেট করা থাকতে হবে। আপনি যদি SDK ব্যবহারে রানটাইম এরর অনুভব করেন, তবে আপনার এনভায়রনমেন্টের জন্য সঠিক ধরনের বান্ডলকে অগ্রাধিকার দিতে বান্ডলারটি কনফিগার করা আছে কিনা তা পরীক্ষা করে দেখুন।

ফায়ারবেস কনফিগ অবজেক্ট সম্পর্কে জানুন

আপনার অ্যাপে Firebase চালু করতে, আপনাকে আপনার অ্যাপের Firebase কনফিগারেশন প্রদান করতে হবে। আপনি যেকোনো সময় আপনার Firebase কনফিগারেশন অবজেক্টটি পেতে পারেন।

  • আমরা আপনার কনফিগ অবজেক্ট ম্যানুয়ালি সম্পাদনা করার পরামর্শ দিই না, বিশেষ করে নিম্নলিখিত প্রয়োজনীয় "ফায়ারবেস অপশনগুলো": apiKey , projectId , এবং appID । আপনি যদি এই প্রয়োজনীয় "ফায়ারবেস অপশনগুলোর" জন্য অবৈধ বা অনুপস্থিত মান দিয়ে আপনার অ্যাপ শুরু করেন, তাহলে আপনার অ্যাপের ব্যবহারকারীরা গুরুতর সমস্যার সম্মুখীন হতে পারেন। এর ব্যতিক্রম হলো authDomain , যা signInWithRedirect ব্যবহারের সর্বোত্তম অনুশীলন অনুসরণ করে আপডেট করা যেতে পারে।

  • আপনি যদি আপনার Firebase প্রজেক্টে Google Analytics চালু করে থাকেন, তাহলে আপনার কনফিগ অবজেক্টে measurementId ফিল্ডটি রয়েছে। এই ফিল্ডটি সম্পর্কে আরও জানতে Analytics গেটিং স্টার্টেড পেজটি দেখুন।

  • আপনার Firebase ওয়েব অ্যাপ তৈরি করার পরে যদি আপনি Google Analytics বা Realtime Database সক্রিয় করেন, তাহলে নিশ্চিত করুন যে আপনার অ্যাপে ব্যবহৃত Firebase কনফিগারেশন অবজেক্টটি সংশ্লিষ্ট কনফিগারেশন ভ্যালু (যথাক্রমে measurementId এবং databaseURL ) দিয়ে আপডেট করা হয়েছে। আপনি যেকোনো সময় আপনার Firebase কনফিগারেশন অবজেক্টটি পেতে পারেন।

সমস্ত পরিষেবা সক্রিয় করা থাকলে একটি কনফিগারেশন অবজেক্টের ফরম্যাটটি নিচে দেওয়া হলো (এই মানগুলি স্বয়ংক্রিয়ভাবে পূরণ হয়ে যায়):

var firebaseConfig = {
  apiKey: "API_KEY",
  authDomain: "PROJECT_ID.firebaseapp.com",
  // The value of `databaseURL` depends on the location of the database
  databaseURL: "https://DATABASE_NAME.firebaseio.com",
  projectId: "PROJECT_ID",
  // The value of `storageBucket` depends on when you provisioned your default bucket (learn more)
  storageBucket: "PROJECT_ID.firebasestorage.app",
  messagingSenderId: "SENDER_ID",
  appId: "APP_ID",
  // For Firebase JavaScript SDK v7.20.0 and later, `measurementId` is an optional field
  measurementId: "G-MEASUREMENT_ID",
};

উপলব্ধ লাইব্রেরি

অতিরিক্ত সেটআপ বিকল্প

ফায়ারবেস এসডিকে (সিডিএন থেকে) লোড হতে বিলম্ব করুন

সম্পূর্ণ পৃষ্ঠাটি লোড না হওয়া পর্যন্ত আপনি Firebase SDK-গুলির অন্তর্ভুক্তি বিলম্বিত করতে পারেন। আপনি যদি <script type="module"> সহ মডিউলার API CDN স্ক্রিপ্ট ব্যবহার করেন, তবে এটিই ডিফল্ট আচরণ। আপনি যদি একটি মডিউল হিসাবে নেমস্পেসড CDN স্ক্রিপ্ট ব্যবহার করেন, তাহলে লোডিং স্থগিত করতে এই ধাপগুলি সম্পূর্ণ করুন:

  1. Add a defer flag to each script tag for the Firebase SDKs, then defer the initialization of Firebase using a second script, for example: 

    <script defer src="https://www.gstatic.com/firebasejs/8.10.1/firebase-app.js"></script>

<script defer src="https://www.gstatic.com/firebasejs/8.10.1/firebase-auth.js"></script>
<script defer src="https://www.gstatic.com/firebasejs/8.10.1/firebase-firestore.js"></script>

// ...

<script defer src="./init-firebase.js"></script>

  2. Create an init-firebase.js file, then include the following in the file: 

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

// Initialize Firebase
firebase.initializeApp(firebaseConfig);

একটি অ্যাপে একাধিক ফায়ারবেস প্রজেক্ট ব্যবহার করুন

In most cases, you only have to initialize Firebase in a single, default app. You can access Firebase from that app in two equivalent ways:

Web 

import { initializeApp } from "firebase/app";
import { getStorage } from "firebase/storage";
import { getFirestore } from "firebase/firestore";

// Initialize Firebase with a "default" Firebase project
const defaultProject = initializeApp(firebaseConfig);

console.log(defaultProject.name);  // "[DEFAULT]"

// Option 1: Access Firebase services via the defaultProject variable
let defaultStorage = getStorage(defaultProject);
let defaultFirestore = getFirestore(defaultProject);

// Option 2: Access Firebase services using shorthand notation
defaultStorage = getStorage();
defaultFirestore = getFirestore();
app_default_init_options.js

Web 

// Initialize Firebase with a "default" Firebase project
const defaultProject = firebase.initializeApp(firebaseConfig);

console.log(defaultProject.name);  // "[DEFAULT]"

// Option 1: Access Firebase services via the defaultProject variable
let defaultStorage = defaultProject.storage();
let defaultFirestore = defaultProject.firestore();

// Option 2: Access Firebase services using shorthand notation
defaultStorage = firebase.storage();
defaultFirestore = firebase.firestore();
firebaseapp.js

তবে, কখনও কখনও আপনার একই সময়ে একাধিক ফায়ারবেস প্রজেক্ট অ্যাক্সেস করার প্রয়োজন হতে পারে। উদাহরণস্বরূপ, আপনি হয়তো একটি ফায়ারবেস প্রজেক্টের ডাটাবেস থেকে ডেটা পড়তে চাইতে পারেন, কিন্তু ফাইলগুলো অন্য একটি ফায়ারবেস প্রজেক্টে সংরক্ষণ করতে পারেন। অথবা আপনি হয়তো একটি প্রজেক্টকে অথেন্টিকেট করার পাশাপাশি দ্বিতীয় একটি প্রজেক্টকে আনঅথেন্টিকেটেড রাখতে চাইতে পারেন।

The Firebase JavaScript SDK allows you to initialize and use multiple Firebase projects in a single app at the same time, with each project using its own Firebase configuration information.

Web 

import { initializeApp, getApp } from "firebase/app";
import { getStorage } from "firebase/storage";
import { getFirestore } from "firebase/firestore";

// Initialize Firebase with a default Firebase project
initializeApp(firebaseConfig);

// Initialize Firebase with a second Firebase project
const otherProject = initializeApp(otherProjectFirebaseConfig, "other");

console.log(getApp().name);  // "[DEFAULT]"
console.log(otherProject.name);    // "otherProject"

// Use the shorthand notation to access the default project's Firebase services
const defaultStorage = getStorage();
const defaultFirestore = getFirestore();

// Use the otherProject variable to access the second project's Firebase services
const otherStorage = getStorage(otherProject);
const otherFirestore = getFirestore(otherProject);
app_multi_project_init_options.js

Web 

// Initialize Firebase with a default Firebase project
firebase.initializeApp(firebaseConfig);

// Initialize Firebase with a second Firebase project
const otherProject = firebase.initializeApp(otherProjectFirebaseConfig, "other");

console.log(firebase.app().name);  // "[DEFAULT]"
console.log(otherProject.name);    // "otherProject"

// Use the shorthand notation to access the default project's Firebase services
const defaultStorage = firebase.storage();
const defaultFirestore = firebase.firestore();

// Use the otherProject variable to access the second project's Firebase services
const otherStorage = otherProject.storage();
const otherFirestore = otherProject.firestore();
firebaseapp.js

উন্নয়নের জন্য একটি স্থানীয় ওয়েব সার্ভার চালান

আপনি যদি একটি ওয়েব অ্যাপ তৈরি করেন, তাহলে Firebase JavaScript এসডিকে-র কিছু অংশের জন্য আপনার ওয়েব অ্যাপটি লোকাল ফাইলসিস্টেমের পরিবর্তে একটি সার্ভার থেকে পরিবেশন করতে হয়। আপনি Firebase সিএলআই ব্যবহার করে একটি লোকাল সার্ভার চালাতে পারেন।

If you already set up Firebase Hosting for your app, you might have already completed several of the steps below.

To serve your web app, you'll use the Firebase CLI, a command-line tool.

  1. সিএলআই কীভাবে ইনস্টল করতে হয় বা এর সর্বশেষ সংস্করণে কীভাবে আপডেট করতে হয়, তা জানতে Firebase সিএলআই ডকুমেন্টেশন দেখুন।

  2. Initialize your Firebase project. Run the following command from the root of your local app directory: 

    firebase init

  3. Start the local server for development. Run the following command from the root of your local app directory: 

    firebase serve

Open source resources for Firebase JavaScript SDKs

ফায়ারবেস ওপেন সোর্স উন্নয়নকে সমর্থন করে এবং আমরা কমিউনিটির অবদান ও মতামতকে উৎসাহিত করি।

ফায়ারবেস জাভাস্ক্রিপ্ট এসডিকে

Most Firebase JavaScript SDKs are developed as open source libraries in our public Firebase GitHub repository .

কুইকস্টার্ট নমুনা

ফায়ারবেস ওয়েবের বেশিরভাগ এপিআই-এর জন্য কুইকস্টার্ট স্যাম্পলের একটি সংগ্রহ রক্ষণাবেক্ষণ করে। এই কুইকস্টার্টগুলো আমাদের পাবলিক ফায়ারবেস গিটহাব কুইকস্টার্ট রিপোজিটরিতে খুঁজুন। আপনি ফায়ারবেস এসডিকে ব্যবহারের জন্য উদাহরণ কোড হিসেবে এই কুইকস্টার্টগুলো ব্যবহার করতে পারেন।