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

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

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

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

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

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

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

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

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

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

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

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

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

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

আরও উদাহরণ এবং বিশদের জন্য, প্রতিটি পণ্য এলাকার নির্দেশিকা এবং মডুলার API রেফারেন্স ডকুমেন্টেশন দেখুন।

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

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

আপনি সমর্থিত পদ্ধতিগুলির একটির মাধ্যমে আপনার অ্যাপে উপলব্ধ যেকোনো লাইব্রেরি যোগ করতে পারেন:

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

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

npm সম্পর্কে

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

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

সংক্ষেপে:

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

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

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

সংক্ষেপে:

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

ফায়ারবেস ওয়েব SDK ভেরিয়েন্ট

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

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

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

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

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

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

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

  • আমরা আপনার কনফিগ অবজেক্টটি ম্যানুয়ালি সম্পাদনা করার পরামর্শ দিচ্ছি না, বিশেষ করে নিম্নলিখিত প্রয়োজনীয় "Firebase বিকল্পগুলি": apiKey , projectId , এবং appID । যদি আপনি এই প্রয়োজনীয় "Firebase বিকল্পগুলির" জন্য অবৈধ বা অনুপস্থিত মান দিয়ে আপনার অ্যাপটি শুরু করেন, তাহলে আপনার অ্যাপের ব্যবহারকারীরা গুরুতর সমস্যার সম্মুখীন হতে পারেন। এর ব্যতিক্রম হল 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",
};

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

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

ফায়ারবেস SDK গুলির বিলম্বিত লোডিং (CDN থেকে)

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

  1. Firebase SDK-এর জন্য প্রতিটি script ট্যাগে একটি defer ফ্ল্যাগ যোগ করুন, তারপর দ্বিতীয় স্ক্রিপ্ট ব্যবহার করে ফায়ারবেসের ইনিশিয়ালাইজেশন ডিফার করুন, উদাহরণস্বরূপ: 

    <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. একটি init-firebase.js ফাইল তৈরি করুন, তারপর ফাইলটিতে নিম্নলিখিতগুলি অন্তর্ভুক্ত করুন: 

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

// Initialize Firebase
firebase.initializeApp(firebaseConfig);

একটি অ্যাপে একাধিক Firebase প্রকল্প ব্যবহার করুন

বেশিরভাগ ক্ষেত্রে, আপনাকে শুধুমাত্র একটি একক, ডিফল্ট অ্যাপে Firebase চালু করতে হবে। আপনি দুটি সমতুল্য উপায়ে সেই অ্যাপ থেকে Firebase অ্যাক্সেস করতে পারেন:

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

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

Firebase JavaScript SDK আপনাকে একই সময়ে একটি অ্যাপে একাধিক Firebase প্রকল্প শুরু করতে এবং ব্যবহার করতে দেয়, প্রতিটি প্রকল্পের নিজস্ব Firebase কনফিগারেশন তথ্য ব্যবহার করে।

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 SDK-এর কিছু অংশের জন্য আপনাকে স্থানীয় ফাইল সিস্টেমের পরিবর্তে সার্ভার থেকে আপনার ওয়েব অ্যাপটি পরিবেশন করতে হবে। স্থানীয় সার্ভার চালানোর জন্য আপনি Firebase CLI ব্যবহার করতে পারেন।

আপনি যদি ইতিমধ্যেই আপনার অ্যাপের জন্য Firebase Hosting সেট আপ করে থাকেন, তাহলে আপনি হয়তো নীচের বেশ কয়েকটি ধাপ ইতিমধ্যেই সম্পন্ন করে ফেলেছেন।

আপনার ওয়েব অ্যাপটি পরিবেশন করতে, আপনাকে Firebase CLI ব্যবহার করতে হবে, যা একটি কমান্ড-লাইন টুল।

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

  2. আপনার Firebase প্রকল্পটি শুরু করুন। আপনার স্থানীয় অ্যাপ ডিরেক্টরির রুট থেকে নিম্নলিখিত কমান্ডটি চালান: 

    firebase init

  3. ডেভেলপমেন্টের জন্য স্থানীয় সার্ভারটি শুরু করুন । আপনার স্থানীয় অ্যাপ ডিরেক্টরির রুট থেকে নিম্নলিখিত কমান্ডটি চালান: 

    firebase serve

Firebase JavaScript SDK-এর জন্য ওপেন সোর্স রিসোর্স

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

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

বেশিরভাগ Firebase JavaScript SDK আমাদের পাবলিক Firebase GitHub রিপোজিটরিতে ওপেন সোর্স লাইব্রেরি হিসেবে তৈরি করা হয়।

দ্রুত শুরুর নমুনা

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