নামস্থান API থেকে মডুলার API তে আপগ্রেড করুন

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

এই নির্দেশিকাটি অনুমান করে যে আপনি নেমস্পেসযুক্ত API-এর সাথে পরিচিত এবং আপনি একটি মডিউল বান্ডলার যেমন ওয়েবপ্যাক বা রোলআপ আপগ্রেড এবং চলমান মডুলার অ্যাপ বিকাশের সুবিধা গ্রহণ করবেন৷

আপনার উন্নয়ন পরিবেশে একটি মডিউল বান্ডলার ব্যবহার করার জন্য দৃঢ়ভাবে সুপারিশ করা হয়। আপনি যদি একটি ব্যবহার না করেন, আপনি হ্রাসকৃত অ্যাপের আকারে মডুলার API-এর প্রধান সুবিধাগুলির সুবিধা নিতে পারবেন না। SDK ইনস্টল করার জন্য আপনার npm বা সুতার প্রয়োজন হবে।

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

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

Firebase ওয়েব SDK-এর জন্য দুটি ধরনের লাইব্রেরি উপলব্ধ:

  • মডুলার - আপনার ওয়েব অ্যাপকে যতটা সম্ভব ছোট এবং দ্রুত করতে ট্রি-কাঁপানো (অব্যবহৃত কোড অপসারণ) সহজতর করার জন্য ডিজাইন করা একটি নতুন API পৃষ্ঠ।
  • Namespaced ( compat ) - একটি পরিচিত API পৃষ্ঠ যা SDK এর আগের সংস্করণগুলির সাথে সম্পূর্ণ সামঞ্জস্যপূর্ণ, যা আপনাকে একবারে আপনার সমস্ত Firebase কোড পরিবর্তন না করে আপগ্রেড করার অনুমতি দেয়৷ কমপ্যাট লাইব্রেরিগুলির নামস্থানের সমকক্ষগুলির তুলনায় সামান্য থেকে কোন আকার বা কর্মক্ষমতা সুবিধা নেই।

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

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

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

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

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

SDK-এর সর্বশেষ সংস্করণ পান

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

npm i firebase@10.14.0

# OR

yarn add firebase@10.14.0

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

আপনার নির্ভরতা আপডেট করার পরে আপনার কোড কার্যকরী রাখার জন্য, প্রতিটি আমদানির "কম্প্যাট" সংস্করণ ব্যবহার করতে আপনার আমদানি বিবৃতি পরিবর্তন করুন। যেমন:

আগে: সংস্করণ 8 বা তার আগের

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

পরে: compat

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

মডুলার শৈলী রিফ্যাক্টর

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

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

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

আগে: compat

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

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

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

পরে: মডুলার

getAuth ফাংশনটি firebaseApp তার প্রথম প্যারামিটার হিসেবে নেয়। onAuthStateChanged ফাংশনটি auth ইন্সট্যান্স থেকে শৃঙ্খলিত নয় কারণ এটি নেমস্পেস এপিআইতে থাকবে; পরিবর্তে, এটি একটি বিনামূল্যের ফাংশন যা auth তার প্রথম প্যারামিটার হিসেবে নেয়।

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

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

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

মডুলার API getRedirectResult এ একটি ব্রেকিং পরিবর্তন প্রবর্তন করে। যখন কোন রিডাইরেক্ট অপারেশন কল করা হয় না, তখন মডুলার এপিআই নেমস্পেসড এপিআই-এর বিপরীতে null রিটার্ন করে, যা একটি null ব্যবহারকারীর সাথে একটি UserCredential প্রদান করে।

আগে: compat

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;

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

আগে: compat

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 snapshots
            console.log(doc.id, " => ", doc.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 getDocs(q);
querySnapshot.forEach((doc) => {
  // doc.data() is never undefined for query doc snapshots
  console.log(doc.id, " => ", doc.data());
});

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

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

আগে: compat 

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

পরে: মডুলার 

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

উদাহরণ 3: নামস্থান এবং মডুলার কোড শৈলী একত্রিত করা

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

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

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

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

সূচনা কোড আপডেট করুন

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

আগে: compat 

import firebase from "firebase/compat/app"

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

পরে: মডুলার 

import { initializeApp } from "firebase/app"

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

কমপ্যাট কোড সরান

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

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

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

<script src="https://www.gstatic.com/firebasejs/10.14.0/firebase-app-compat.js"></script>
<script src="https://www.gstatic.com/firebasejs/10.14.0/firebase-firestore-compat.js"></script>
<script src="https://www.gstatic.com/firebasejs/10.14.0/firebase-auth-compat.js"></script>
<script>
   const firebaseApp = firebase.initializeApp({ /* Firebase config */ });
   const db = firebaseApp.firestore();
   const auth = firebaseApp.auth();
</script>

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

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

সম্পূর্ণরূপে মডুলারাইজড SDK এর আগের সংস্করণগুলির তুলনায় এই সুবিধাগুলি রয়েছে:

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