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

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

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

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

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

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

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

যদিও বেশিরভাগ মডুলার API নেমস্পেসযুক্ত API-এর মতো একই প্যাটার্ন অনুসরণ করে, কোডের সংগঠন ভিন্ন। সাধারণত, নেমস্পেস এপিআই একটি নেমস্পেস এবং সার্ভিস প্যাটার্নের দিকে পরিচালিত হয়, যখন মডুলার এপিআই বিচ্ছিন্ন ফাংশনের দিকে ভিত্তিক হয়। উদাহরণস্বরূপ, নেমস্পেসযুক্ত 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 পণ্যের জন্য জাভাস্ক্রিপ্ট লাইব্রেরি প্রদান করে, যার মধ্যে রয়েছে Remote Config , FCM এবং আরও অনেক কিছু। আপনি কীভাবে আপনার ওয়েব অ্যাপে Firebase SDK যোগ করবেন তা নির্ভর করে আপনি আপনার অ্যাপের সাথে কোন টুলিং ব্যবহার করছেন (যেমন মডিউল বান্ডলার)।

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

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

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

npm

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

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

সংক্ষেপে:

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

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

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

সংক্ষেপে:

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

Firebase ওয়েব SDK ভেরিয়েন্ট

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

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

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

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

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

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

আপনার অ্যাপে Firebase আরম্ভ করতে, আপনাকে আপনার অ্যাপের 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",
  storageBucket: "PROJECT_ID.appspot.com",
  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-এর লোডিং বিলম্বিত (CDN থেকে)

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

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

    <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 project configuration
var firebaseConfig = {
  // ...
};

// Initialize Firebase
firebase.initializeApp(firebaseConfig);

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

বেশিরভাগ ক্ষেত্রে, আপনাকে শুধুমাত্র একটি একক, ডিফল্ট অ্যাপে 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 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 init

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

    firebase serve

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

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

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

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

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

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