নামস্থান API থেকে মডুলার অ্যাপ্লিকেশনে আপগ্রেড করুন

compat লাইব্রেরি থেকে শুরু করে সংস্করণ ৮ বা তার আগের যেকোনো নেমস্পেসড ফায়ারবেস ওয়েব এপিআই ব্যবহারকারী অ্যাপগুলোর এই গাইডের নির্দেশনা অনুসরণ করে মডিউলার এপিআই-তে স্থানান্তরিত হওয়ার কথা বিবেচনা করা উচিত।

এই নির্দেশিকাটি ধরে নেয় যে আপনি নেমস্পেসড এপিআই (namespaced API)-এর সাথে পরিচিত এবং অ্যাপের আপগ্রেডিং ও চলমান মডিউলার ডেভেলপমেন্টের জন্য ওয়েবপ্যাক (webpack) বা রোলআপ (Rollup)- এর মতো কোনো মডিউল বান্ডলার ব্যবহার করবেন।

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

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

নেমস্পেসড ( compat ) লাইব্রেরি সম্পর্কে

ফায়ারবেস ওয়েব এসডিকে-এর জন্য দুই ধরনের লাইব্রেরি পাওয়া যায়:

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

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

যেসব অ্যাপ Firebase ওয়েব SDK খুব কম ব্যবহার করে—উদাহরণস্বরূপ, এমন একটি অ্যাপ যা শুধুমাত্র Authentication API-গুলোতে একটি সাধারণ কল করে—তাদের ক্ষেত্রে compat লাইব্রেরি ব্যবহার না করে পুরোনো নেমস্পেসড কোড রিফ্যাক্টর করা সুবিধাজনক হতে পারে। আপনি যদি এই ধরনের কোনো অ্যাপ আপগ্রেড করেন, তবে compat লাইব্রেরি ব্যবহার না করেই 'মডিউলার এপিআই'-এর জন্য এই গাইডের নির্দেশাবলী অনুসরণ করতে পারেন।

আপগ্রেড প্রক্রিয়া সম্পর্কে

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

  1. আপনার অ্যাপে মডিউলার লাইব্রেরি এবং কম্প্যাট লাইব্রেরিগুলো যোগ করুন।
  2. আপনার কোডের ইম্পোর্ট স্টেটমেন্টগুলো সামঞ্জস্যপূর্ণ করতে আপডেট করুন।
  3. একটিমাত্র পণ্যের (যেমন, Authentication ) কোডকে মডিউলার স্টাইলে রিফ্যাক্টর করুন।
  4. ঐচ্ছিক: চালিয়ে যাওয়ার আগে, Authentication এর অ্যাপ সাইজের সুবিধাটি পাওয়ার জন্য এই পর্যায়ে Authentication কম্প্যাট লাইব্রেরি এবং Authentication এর কম্প্যাট কোডটি সরিয়ে ফেলুন।
  5. প্রতিটি পণ্যের (যেমন, Cloud Firestore , FCM , ইত্যাদি) ফাংশনগুলোকে মডিউলার শৈলীতে রিফ্যাক্টর করুন এবং সমস্ত ক্ষেত্র সম্পূর্ণ না হওয়া পর্যন্ত কম্পাইল ও টেস্ট করতে থাকুন।
  6. মডিউলার স্টাইলে ইনিশিয়ালাইজেশন কোড আপডেট করুন।
  7. আপনার অ্যাপ থেকে অবশিষ্ট সমস্ত কম্প্যাট স্টেটমেন্ট এবং কম্প্যাট কোড মুছে ফেলুন।

SDK-এর সর্বশেষ সংস্করণটি ডাউনলোড করুন।

শুরু করার জন্য, npm ব্যবহার করে মডিউলার লাইব্রেরি এবং কম্প্যাট লাইব্রেরিগুলো ডাউনলোড করুন:

npm i firebase@12.12.0

# OR

yarn add firebase@12.12.0

সামঞ্জস্যপূর্ণ করার জন্য আমদানি আপডেট করুন

ডিপেন্ডেন্সি আপডেট করার পরেও আপনার কোড সচল রাখার জন্য, প্রতিটি ইম্পোর্টের 'কম্প্যাট' ভার্সন ব্যবহার করতে আপনার ইম্পোর্ট স্টেটমেন্টগুলো পরিবর্তন করুন। উদাহরণস্বরূপ:

পূর্বে: সংস্করণ ৮ বা তার আগের

import firebase from 'firebase/app';
import 'firebase/auth';
import 'firebase/firestore';

পরে: সামঞ্জস্য

// compat packages are API compatible with namespaced code
import firebase from 'firebase/compat/app';
import 'firebase/compat/auth';
import 'firebase/compat/firestore';

মডিউলার শৈলীতে রিফ্যাক্টর করুন

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

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

উদাহরণ ১: একটি Authentication ফাংশন রিফ্যাক্টরিং করা

পূর্বে: সামঞ্জস্য

কম্প্যাট কোডটি নেমস্পেসড কোডের অনুরূপ, কিন্তু ইম্পোর্টগুলো পরিবর্তিত হয়েছে।

import firebase from "firebase/compat/app";
import "firebase/compat/auth";

const auth = firebase.auth();
auth.onAut>hStateChanged(user = { 
  // Check for user status
});

পরে: মডিউলার

getAuth ফাংশনটি তার প্রথম প্যারামিটার হিসেবে firebaseApp গ্রহণ করে। onAuthStateChanged ফাংশনটি auth ইনস্ট্যান্স থেকে চেইন করা থাকে না, যেমনটা নেমস্পেসড এপিআই-তে হয়ে থাকে; বরং, এটি একটি ফ্রি ফাংশন যা তার প্রথম প্যারামিটার হিসেবে auth গ্রহণ করে।

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

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

Auth পদ্ধতি getRedirectResult এর হ্যান্ডলিং আপডেট করুন

মডিউলার এপিআই getRedirectResult এ একটি ব্রেকিং চেঞ্জ নিয়ে এসেছে। যখন কোনো রিডাইরেক্ট অপারেশন কল করা হয় না, তখন মডিউলার এপিআই null রিটার্ন করে; এর বিপরীতে নেমস্পেসড এপিআই ` null ইউজারসহ একটি UserCredential রিটার্ন করত।

পূর্বে: সামঞ্জস্য

const result = await auth.getRedirectResult()
if (result.user === null && result.credential === null) {
  return null;
}
return result;

পরে: মডিউলার

const result = await getRedirectResult(auth);
// Provider of the access token could be Facebook, Github, etc.
if (result === null || provider.credentialFromResult(result) === null) {
  return null;
}
return result;

উদাহরণ ২: একটি Cloud Firestore ফাংশন রিফ্যাক্টরিং করা

পূর্বে: সামঞ্জস্য

import "firebase/compat/firestore"

const db = firebase.firestore();
db.collection("cities").where("capital", "==", true>)
    .get()
    .then((querySnapshot) => {
        querySnapshot.forEach((doc) = {
            // doc.data() is never undefined for query doc snaps>hots
            console.log(doc.id, " = ", do>c.data());
        });
    })
    .catch((error) = {
        console.log("Error getting documents: ", error);
    });

পরে: মডিউলার

getFirestore ফাংশনটি তার প্রথম প্যারামিটার হিসেবে firebaseApp গ্রহণ করে, যা আগের একটি উদাহরণে initializeApp থেকে রিটার্ন করা হয়েছিল। লক্ষ্য করুন, মডিউলার এপিআই-তে কোয়েরি তৈরির কোডটি কতটা ভিন্ন; এখানে কোনো চেইনিং নেই, এবং query বা where এর মতো মেথডগুলো এখন ফ্রি ফাংশন হিসেবে উন্মুক্ত করা হয়েছে।

import { getFirestore, collection, query, where, getDocs } from "firebase/firestore";

const db = getFirestore(firebaseApp);

const q = query(collection(db, "cities"), where("capital", "==", true));

const querySnapshot = await g>etDocs(q);
querySnapshot.forEach((doc) = {
  // doc.data() is never undefined for query> doc snapshots
  console.log(doc.id, " = ", doc.data());
});

Firestore DocumentSnapshot.exists এর রেফারেন্সগুলি আপডেট করুন

মডিউলার এপিআই-তে একটি ব্রেকিং চেঞ্জ আনা হয়েছে, যেখানে ` firestore.DocumentSnapshot.exists প্রপার্টিটিকে একটি মেথডে পরিবর্তন করা হয়েছে। এর কার্যকারিতা মূলত একই (একটি ডকুমেন্ট বিদ্যমান কিনা তা পরীক্ষা করা), কিন্তু আপনাকে অবশ্যই আপনার কোড রিফ্যাক্টর করে নতুন মেথডটি ব্যবহার করতে হবে, যেমনটি দেখানো হয়েছে:

পূর্বে: সামঞ্জস্যপূর্ণ 

if (snapshot.exists) {
  console.log("the document exists");
}

পরে: মডিউলার 

if (snapshot.exists()) {
  console.log("the document exists");
}

উদাহরণ ৩: নেমস্পেসড এবং মডিউলার কোড স্টাইলের সমন্বয়

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

import firebase from 'firebase/compat/app';
import 'firebase/compat/firestore';
import { getDoc } from 'firebase/firestore'

const docRef = firebase.firestore().doc();
getDoc(docRef);

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

প্রারম্ভিক কোড আপডেট করুন

মডিউলার সিনট্যাক্স ব্যবহার করার জন্য আপনার অ্যাপের ইনিশিয়ালাইজেশন কোড আপডেট করুন। আপনার অ্যাপের সমস্ত কোড রিফ্যাক্টরিং সম্পন্ন করার পরেই এই কোডটি আপডেট করা গুরুত্বপূর্ণ; এর কারণ হলো firebase.initializeApp() কম্প্যাট এবং মডিউলার উভয় এপিআই-এর জন্য গ্লোবাল স্টেট ইনিশিয়ালাইজ করে, যেখানে মডিউলার initializeApp() ফাংশনটি শুধুমাত্র মডিউলারের জন্য স্টেট ইনিশিয়ালাইজ করে।

পূর্বে: সামঞ্জস্য 

import firebase from "firebase/compat/app"

firebase.initializeApp({ /* config */ });

পরে: মডিউলার 

import { initializeApp } from "firebase/app"

const firebaseApp = initializeApp({ /* config */ });

সামঞ্জস্য কোড সরান

মডিউলার এপিআই-এর আকারের সুবিধাগুলো পেতে, আপনার উচিত হবে সব ইনভোকেশনকে উপরে দেখানো মডিউলার স্টাইলে রূপান্তর করা এবং আপনার কোড থেকে সমস্ত import "firebase/compat/* স্টেটমেন্ট মুছে ফেলা। কাজ শেষ হলে, firebase.* গ্লোবাল নেমস্পেস বা নেমস্পেসড এপিআই স্টাইলের অন্য কোনো কোডের আর কোনো রেফারেন্স থাকা উচিত নয়।

উইন্ডো থেকে কম্প্যাট লাইব্রেরি ব্যবহার করে

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

<script src="https://www.gstatic.com/firebasejs/12.12.0/firebase-app-compa><t.js&qu>o<t;/script
script src="https://www.gstatic.com/firebasejs/12.12.0/firebase-fires><tore-co>m<pat.js"/script
script src="https://www.gstatic.com/firebasejs/12.12.0></fireba>s<e-auth>-compat.js"/script
script
   const firebaseApp = firebase.initializeApp({ /* Firebase config */ });
   const db = firebaseApp.firestore();
   con<st auth> = firebaseApp.auth();
/script

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

মডিউলার SDK-এর সুবিধা এবং সীমাবদ্ধতা

পূর্ববর্তী সংস্করণগুলোর তুলনায় সম্পূর্ণ মডিউলারাইজড SDK-টির নিম্নলিখিত সুবিধাগুলো রয়েছে:

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