মডুলার Firebase JS SDK-এ স্থানান্তর করে আপনার ওয়েব অ্যাপকে সুপারচার্জ করুন

1. আপনি শুরু করার আগে

মডুলার ফায়ারবেস JS SDK হল বিদ্যমান JS SDK-এর একটি পুনর্লিখন এবং পরবর্তী প্রধান সংস্করণ হিসাবে প্রকাশ করা হবে৷ এটি ডেভেলপারদেরকে Firebase JS SDK থেকে অব্যবহৃত কোড বাদ দিতে সক্ষম করে যাতে ছোট বান্ডিল তৈরি করা যায় এবং আরও ভালো পারফরম্যান্স পাওয়া যায়।

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

একটি মসৃণ আপগ্রেড প্রক্রিয়া প্রদান করতে, সামঞ্জস্যপূর্ণ প্যাকেজের একটি সেট প্রদান করা হয়। এই কোডল্যাবে, আপনি শিখবেন কীভাবে অ্যাপ টুকরো টুকরো পোর্ট করতে সামঞ্জস্যপূর্ণ প্যাকেজগুলি ব্যবহার করতে হয়।

আপনি কি নির্মাণ করবেন

এই কোডল্যাবে, আপনি ধীরে ধীরে একটি বিদ্যমান স্টক ওয়াচলিস্ট ওয়েব অ্যাপ স্থানান্তর করতে যাচ্ছেন যা v8 JS SDK ব্যবহার করে নতুন মডুলার JS SDK-তে তিনটি ধাপে:

• সামঞ্জস্যপূর্ণ প্যাকেজগুলি ব্যবহার করতে অ্যাপটি আপগ্রেড করুন
• অ্যাপটিকে সামঞ্জস্যপূর্ণ প্যাকেজ থেকে মডুলার API টুকরো টুকরো করে আপগ্রেড করুন
• অ্যাপটির কার্যক্ষমতা আরও উন্নত করতে Firestore Lite ব্যবহার করুন, Firestore SDK-এর একটি হালকা বাস্তবায়ন

এই কোডল্যাবটি Firebase SDK আপগ্রেড করার উপর দৃষ্টি নিবদ্ধ করে৷ অন্যান্য ধারণা এবং কোড ব্লকগুলি চকচকে করা হয়েছে এবং আপনাকে কেবল অনুলিপি এবং পেস্ট করার জন্য সরবরাহ করা হয়েছে।

আপনি কি প্রয়োজন হবে

• আপনার পছন্দের একটি ব্রাউজার, যেমন Chrome
• আপনার পছন্দের IDE/টেক্সট এডিটর, যেমন WebStorm , Atom , Sublime , বা VS Code
• প্যাকেজ ম্যানেজার npm , যা সাধারণত Node.js এর সাথে আসে
• কোডল্যাবের নমুনা কোড (কোডটি কীভাবে পেতে হয় তার জন্য কোডল্যাবের পরবর্তী ধাপটি দেখুন।)

2. সেট আপ করুন

কোড পান

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

কমান্ড লাইন থেকে কোডল্যাবের গিথুব সংগ্রহস্থল ক্লোন করুন:

git clone https://github.com/FirebaseExtended/codelab-modular-sdk.git

বিকল্পভাবে, যদি আপনার গিট ইনস্টল না থাকে, আপনি একটি জিপ ফাইল হিসাবে সংগ্রহস্থলটি ডাউনলোড করতে পারেন এবং ডাউনলোড করা জিপ ফাইলটি আনপ্যাক করতে পারেন।

অ্যাপটি আমদানি করুন

1. আপনার IDE ব্যবহার করে, codelab-modular-sdk ডিরেক্টরি খুলুন বা আমদানি করুন।
2. স্থানীয়ভাবে অ্যাপটি তৈরি এবং চালানোর জন্য প্রয়োজনীয় নির্ভরতাগুলি ইনস্টল করতে npm install চালান।
3. অ্যাপটি তৈরি করতে npm run build চালান।
4. ওয়েব সার্ভার শুরু করতে npm run serve চালান
5. একটি ব্রাউজার ট্যাব খুলুন http://localhost:8080

3. একটি বেসলাইন স্থাপন করুন

আপনার শুরু বিন্দু কি?

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

অ্যাপটিতে সবকিছু কাজ করছে তা নিশ্চিত করুন:

1. উপরের ডান কোণায় লগইন বোতাম ব্যবহার করে বেনামে লগ ইন করুন।
2. লগ ইন করার পরে, অ্যাড বোতামে ক্লিক করে, অক্ষরে টাইপ করে, এবং নীচে পপ আপ হওয়া অনুসন্ধান ফলাফলের সারিতে ক্লিক করে "NFLX", "SBUX" এবং "T" অনুসন্ধান করুন এবং ওয়াচলিস্টে যোগ করুন।
3. সারির শেষে x- এ ক্লিক করে ওয়াচলিস্ট থেকে একটি স্টক সরান।
4. স্টক মূল্যের রিয়েল-টাইম আপডেট দেখুন।
5. Chrome DevTools খুলুন, নেটওয়ার্ক ট্যাবে যান এবং ক্যাশে নিষ্ক্রিয় করুন এবং বড় অনুরোধ সারি ব্যবহার করুন চেক করুন। ক্যাশে অক্ষম করা নিশ্চিত করে যে আমরা একটি রিফ্রেশ করার পরে সর্বদা সর্বশেষ পরিবর্তনগুলি পেতে পারি এবং বড় অনুরোধ সারিগুলি ব্যবহার করা সারিটিকে একটি সংস্থানের জন্য প্রেরণ করা আকার এবং সংস্থান আকার উভয়ই প্রদর্শন করে। এই কোডল্যাবে, আমরা প্রধানত main.js এর আকারে আগ্রহী।

6. সিমুলেটেড থ্রটলিং ব্যবহার করে বিভিন্ন নেটওয়ার্ক অবস্থার অধীনে অ্যাপটি লোড করুন। আপনি এই কোডল্যাবে লোডের সময় পরিমাপ করতে স্লো 3G ব্যবহার করবেন কারণ এখানে একটি ছোট বান্ডিল আকার সবচেয়ে বেশি সাহায্য করে।

এখন ঝাঁপ দাও এবং অ্যাপটিকে নতুন মডুলার API-এ স্থানান্তর করা শুরু করুন।

4. সামঞ্জস্যপূর্ণ প্যাকেজ ব্যবহার করুন

সামঞ্জস্যপূর্ণ প্যাকেজগুলি আপনাকে একবারে সমস্ত Firebase কোড পরিবর্তন না করেই নতুন SDK সংস্করণে আপগ্রেড করার অনুমতি দেয়৷ আপনি ধীরে ধীরে তাদের মডুলার API এ আপগ্রেড করতে পারেন।

এই ধাপে, আপনি ফায়ারবেস লাইব্রেরিটিকে v8 থেকে নতুন সংস্করণে আপগ্রেড করবেন এবং সামঞ্জস্যপূর্ণ প্যাকেজগুলি ব্যবহার করতে কোড পরিবর্তন করবেন। নিম্নলিখিত ধাপে, আপনি শিখবেন কিভাবে প্রথমে মডুলার API ব্যবহার করার জন্য শুধুমাত্র Firebase Auth কোড আপগ্রেড করবেন, তারপর Firestore কোড আপগ্রেড করবেন।

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

নতুন SDK পান

package.json এ নির্ভরতা বিভাগটি খুঁজুন এবং এটিকে নিম্নলিখিত দিয়ে প্রতিস্থাপন করুন:

package.json

"dependencies": {
    "firebase": "^9.0.0" 
}

নির্ভরতাগুলি পুনরায় ইনস্টল করুন

যেহেতু আমরা নির্ভরতার সংস্করণ পরিবর্তন করেছি, তাই নির্ভরতার নতুন সংস্করণ পেতে আমাদের npm install পুনরায় চালাতে হবে।

আমদানি পথ পরিবর্তন করুন

সামঞ্জস্যপূর্ণ প্যাকেজগুলি সাবমডিউল firebase/compat অধীনে উন্মুক্ত করা হয়েছে, তাই আমরা সেই অনুযায়ী আমদানি পাথগুলি আপডেট করব:

1. src/firebase.ts ফাইলে যান
2. নিম্নলিখিত আমদানির সাথে বিদ্যমান আমদানি প্রতিস্থাপন করুন:

src/firebase.ts

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

অ্যাপ কাজ করে যাচাই করুন

1. অ্যাপটি পুনর্নির্মাণের জন্য npm run build চালান।
2. একটি ব্রাউজার ট্যাব খুলুন http://localhost:8080 , অথবা বিদ্যমান ট্যাব রিফ্রেশ করুন।
3. অ্যাপ দিয়ে খেলুন। সবকিছু এখনও কাজ করা উচিত.

5. মডুলার API ব্যবহার করতে Auth আপগ্রেড করুন৷

আপনি যেকোনো ক্রমে Firebase পণ্য আপগ্রেড করতে পারেন। এই কোডল্যাবে, আপনি প্রাথমিক ধারণাগুলি শিখতে প্রথমে Auth আপগ্রেড করবেন কারণ Auth API তুলনামূলকভাবে সহজ। Firestore আপগ্রেড করা একটু বেশি জড়িত, এবং আপনি পরবর্তীতে এটি কীভাবে করবেন তা শিখবেন।

প্রমাণীকরণের সূচনা আপডেট করুন

1. src/firebase.ts ফাইলে যান
2. নিম্নলিখিত আমদানি যোগ করুন:

src/firebase.ts

import { initializeAuth, indexedDBLocalPersistence } from 'firebase/auth';

3. import 'firebase/compat/auth'.
4. export const firebaseAuth = app.auth(); সঙ্গে:

src/firebase.ts

export const firebaseAuth = initializeAuth(app, { persistence: [indexedDBLocalPersistence] });

5. export type User = firebase.User; ফাইলের শেষে। User সরাসরি src/auth.ts এ রপ্তানি করা হবে যা আপনি পরবর্তীতে পরিবর্তন করবেন।

প্রমাণীকরণ কোড আপডেট করুন

1. src/auth.ts ফাইলে যান
2. ফাইলের শীর্ষে নিম্নলিখিত আমদানি যোগ করুন:

src/auth.ts

import { 
    signInAnonymously, 
    signOut,
    onAuthStateChanged,
    User
} from 'firebase/auth';

3. import { firebaseAuth, User } from './firebase'; User সরান; যেহেতু আপনি ইতিমধ্যেই 'firebase/auth'. থেকে User আমদানি করেছেন।
4. মডুলার API ব্যবহার করার জন্য ফাংশন আপডেট করুন।

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

সংস্করণ 9-এ, পরিষেবাগুলি ফাংশনের প্রথম যুক্তি হিসাবে পাস করা হয়। পরিষেবাগুলি হল সেই বস্তুগুলি যা আপনি একটি Firebase পরিষেবা শুরু করার মাধ্যমে পান, যেমন বস্তুটি getAuth() বা initializeAuth() থেকে ফিরে এসেছে। তারা একটি নির্দিষ্ট ফায়ারবেস পরিষেবার অবস্থা ধারণ করে এবং ফাংশনটি তার কাজগুলি সম্পাদন করার জন্য রাষ্ট্রকে ব্যবহার করে। নিম্নলিখিত ফাংশন বাস্তবায়ন করতে এই প্যাটার্ন প্রয়োগ করা যাক:

src/auth.ts

export function firebaseSignInAnonymously() { 
    return signInAnonymously(firebaseAuth); 
} 

export function firebaseSignOut() { 
    return signOut(firebaseAuth); 
} 

export function onUserChange(callback: (user: User | null) => void) { 
    return onAuthStateChanged(firebaseAuth, callback); 
} 

export { User } from 'firebase/auth';

অ্যাপ কাজ করে যাচাই করুন

1. অ্যাপটি পুনর্নির্মাণের জন্য npm run build চালান।
2. একটি ব্রাউজার ট্যাব খুলুন http://localhost:8080 , অথবা বিদ্যমান ট্যাব রিফ্রেশ করুন
3. অ্যাপ দিয়ে খেলুন। সবকিছু এখনও কাজ করা উচিত.

বান্ডিলের আকার পরীক্ষা করুন

1. Chrome DevTools খুলুন।
2. নেটওয়ার্ক ট্যাবে স্যুইচ করুন।
3. নেটওয়ার্ক অনুরোধ ক্যাপচার করতে পৃষ্ঠাটি রিফ্রেশ করুন।
4. main.js সন্ধান করুন এবং এর আকার পরীক্ষা করুন। আপনি বান্ডেলের আকার 100KB কমিয়েছেন (36 KB gzipped), বা কোডের কয়েকটি লাইন পরিবর্তন করে প্রায় 22% ছোট করেছেন! ধীরগতির 3G সংযোগে সাইটটি 0.75 সেকেন্ড দ্রুত লোড হচ্ছে।

6. মডুলার API ব্যবহার করতে Firebase অ্যাপ এবং Firestore আপগ্রেড করুন৷

ফায়ারবেস ইনিশিয়ালাইজেশন আপডেট করুন

1. src/firebase.ts.
2. import firebase from 'firebase/compat/app'; সঙ্গে:

src/firebase.ts

import { initializeApp } from 'firebase/app';

3. প্রতিস্থাপন const app = firebase.initializeApp({...}); সঙ্গে:

src/firebase.ts

const app = initializeApp({
    apiKey: "AIzaSyBnRKitQGBX0u8k4COtDTILYxCJuMf7xzE", 
    authDomain: "exchange-rates-adcf6.firebaseapp.com", 
    databaseURL: "https://exchange-rates-adcf6.firebaseio.com", 
    projectId: "exchange-rates-adcf6", 
    storageBucket: "exchange-rates-adcf6.appspot.com", 
    messagingSenderId: "875614679042", 
    appId: "1:875614679042:web:5813c3e70a33e91ba0371b"
});

ফায়ারস্টোর শুরুর আপডেট করুন

1. একই ফাইলে src/firebase.ts, import 'firebase/compat/firestore'; সঙ্গে

src/firebase.ts

import { getFirestore } from 'firebase/firestore';

2. export const firestore = app.firestore(); সঙ্গে:

src/firebase.ts

export const firestore = getFirestore();

3. " export const firestore = ... " এর পরে সমস্ত লাইন সরান

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

1. src/services.ts.
2. আমদানি থেকে FirestoreFieldPath , FirestoreFieldValue এবং QuerySnapshot সরান৷ './firebase' থেকে আমদানি এখন নিম্নলিখিত মত হওয়া উচিত:

src/services.ts

import { firestore } from './firebase';

3. ফাইলের শীর্ষে আপনি যে ফাংশন এবং প্রকারগুলি ব্যবহার করতে যাচ্ছেন তা আমদানি করুন:

    **src/services.ts**

import { 
    collection, 
    getDocs, 
    doc, 
    setDoc, 
    arrayUnion, 
    arrayRemove, 
    onSnapshot, 
    query, 
    where, 
    documentId, 
    QuerySnapshot
} from 'firebase/firestore';

সার্চ আপডেট করুন()

1. সংগ্রহের একটি রেফারেন্স তৈরি করুন যাতে সমস্ত টিকার রয়েছে:

src/services.ts

const tickersCollRef = collection(firestore, 'current');

2. সংগ্রহ থেকে সমস্ত নথি আনতে getDocs() ব্যবহার করুন:

src/services.ts

const tickers = await getDocs(tickersCollRef);

সমাপ্ত কোডের জন্য search() দেখুন।

addToWatchList() আপডেট করুন

ব্যবহারকারীর ওয়াচলিস্টে একটি নথির রেফারেন্স তৈরি করতে doc() ব্যবহার করুন, তারপর arrayUnion() এর সাথে setDoc() ব্যবহার করে এটিতে একটি টিকার যুক্ত করুন :

src/services.ts

export function addToWatchList(ticker: string, user: User) {
      const watchlistRef = doc(firestore, `watchlist/${user.uid}`);
      return setDoc(watchlistRef, {
       tickers: arrayUnion(ticker)
   }, { merge: true });
}

মুছে ফেলুন ওয়াচলিস্ট() আপডেট করুন

একইভাবে, arrayRemove() সহ setDoc() () ব্যবহার করে ব্যবহারকারীর ওয়াচলিস্ট থেকে একটি টিকার সরান:

src/services.ts

export function deleteFromWatchList(ticker: string, user: User) {
   const watchlistRef = doc(firestore, `watchlist/${user.uid}`);
   return setDoc(watchlistRef, {
       tickers: arrayRemove(ticker)
   }, { merge: true });
}

subscribeToTickerChanges() আপডেট করুন

1. প্রথমে ব্যবহারকারীর ওয়াচলিস্টে একটি নথির রেফারেন্স তৈরি করতে doc() ব্যবহার করুন, তারপর onSnapshot() ব্যবহার করে ওয়াচলিস্ট পরিবর্তনগুলি শুনুন :

src/services.ts

const watchlistRef = doc(firestore, `watchlist/${user.uid}`);
const unsubscribe = onSnapshot(watchlistRef, snapshot => {
   /* subscribe to ticker price changes */
});

2. একবার আপনার ওয়াচলিস্টে টিকার্স থাকলে, তাদের দাম আনার জন্য একটি ক্যোয়ারী তৈরি করতে query() ব্যবহার করুন এবং তাদের দামের পরিবর্তনগুলি শুনতে onSnapshot() ব্যবহার করুন:

src/services.ts

const priceQuery = query(
    collection(firestore, 'current'),
    where(documentId(), 'in', tickers)
);
unsubscribePrevTickerChanges = onSnapshot(priceQuery, snapshot => {
               if (firstload) {
                   performance && performance.measure("initial-data-load");
                   firstload = false;
                   logPerformance();
               }
               const stocks = formatSDKStocks(snapshot);
               callback(stocks);
  });

সম্পূর্ণ বাস্তবায়নের জন্য subscribeToTickerChanges() দেখুন।

subscribeToAllTickerChanges() আপডেট করুন

প্রথমে আপনি collection() ব্যবহার করবেন সংগ্রহের একটি রেফারেন্স তৈরি করতে যাতে প্রথমে সমস্ত টিকারের দাম রয়েছে, তারপর দামের পরিবর্তনগুলি শুনতে onSnapshot() ব্যবহার করুন:

src/services.ts

export function subscribeToAllTickerChanges(callback: TickerChangesCallBack) {
   const tickersCollRef = collection(firestore, 'current');
   return onSnapshot(tickersCollRef, snapshot => {
       if (firstload) {
           performance && performance.measure("initial-data-load");
           firstload = false;
           logPerformance();
       }
       const stocks = formatSDKStocks(snapshot);
       callback(stocks);
   });
}

অ্যাপ কাজ করে যাচাই করুন

1. অ্যাপটি পুনর্নির্মাণের জন্য npm run build চালান।
2. একটি ব্রাউজার ট্যাব খুলুন http://localhost:8080 , অথবা বিদ্যমান ট্যাব রিফ্রেশ করুন
3. অ্যাপ দিয়ে খেলুন। সবকিছু এখনও কাজ করা উচিত.

বান্ডিলের আকার পরীক্ষা করুন

1. Chrome DevTools খুলুন।
2. নেটওয়ার্ক ট্যাবে স্যুইচ করুন।
3. নেটওয়ার্ক অনুরোধ ক্যাপচার করতে পৃষ্ঠাটি রিফ্রেশ করুন।
4. main.js সন্ধান করুন এবং এর আকার পরীক্ষা করুন। এটিকে আবার মূল বান্ডেলের আকারের সাথে তুলনা করুন - আমরা বান্ডেলের আকার 200KB (63.8 KB gzipped) বা 50% কম কমিয়েছি, যা 1.3s দ্রুত লোড টাইমে অনুবাদ করে!

7. প্রাথমিক পৃষ্ঠা রেন্ডারিং গতি বাড়াতে Firestore Lite ব্যবহার করুন

ফায়ারস্টোর লাইট কি?

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

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

এই ধাপে, আপনি শিখবেন কিভাবে ফায়ারস্টোর লাইট ব্যবহার করে বান্ডেলের আকার কমাতে প্রাথমিক পৃষ্ঠার রেন্ডারিংকে গতি বাড়ানোর জন্য, তারপরে রিয়েল-টাইম আপডেটে সদস্যতা নিতে ডায়নামিকভাবে প্রধান Firestore SDK লোড করুন।

আপনি কোডটি রিফ্যাক্টর করবেন:

1. একটি পৃথক ফাইলে রিয়েল-টাইম পরিষেবাগুলি সরান, যাতে তারা গতিশীল আমদানি ব্যবহার করে গতিশীলভাবে লোড হতে পারে।
2. ওয়াচলিস্ট এবং স্টক মূল্য পুনরুদ্ধার করতে Firestore Lite ব্যবহার করতে নতুন ফাংশন তৈরি করুন৷
3. প্রাথমিক পৃষ্ঠা রেন্ডারিং করতে ডেটা পুনরুদ্ধার করতে নতুন ফায়ারস্টোর লাইট ফাংশনগুলি ব্যবহার করুন, তারপর রিয়েল-টাইম আপডেটগুলি শুনতে রিয়েল-টাইম পরিষেবাগুলি গতিশীলভাবে লোড করুন৷

একটি নতুন ফাইলে রিয়েল-টাইম পরিষেবাগুলি সরান৷

1. src/services.realtime.ts.
2. নতুন ফাইলে src/services.ts থেকে subscribeToTickerChanges() এবং subscribeToAllTickerChanges() ফাংশনগুলি সরান।
3. নতুন ফাইলের শীর্ষে প্রয়োজনীয় আমদানি যোগ করুন।

আপনাকে এখনও এখানে কয়েকটি পরিবর্তন করতে হবে:

4. প্রথমে, ফাংশনে ব্যবহার করার জন্য ফাইলের শীর্ষে প্রধান Firestore SDK থেকে একটি Firestore উদাহরণ তৈরি করুন। আপনি এখানে firebase.ts থেকে Firestore দৃষ্টান্ত আমদানি করতে পারবেন না কারণ আপনি এটিকে কয়েকটি ধাপে একটি Firestore Lite ইনস্ট্যান্সে পরিবর্তন করতে যাচ্ছেন, যা শুধুমাত্র প্রাথমিক পৃষ্ঠা রেন্ডারিংয়ের জন্য ব্যবহার করা হবে।
5. দ্বিতীয়ত, firstload ভেরিয়েবল এবং এটি দ্বারা সুরক্ষিত if ব্লক পরিত্রাণ পান। তাদের কার্যকারিতাগুলি পরবর্তী ধাপে আপনি তৈরি করা নতুন ফাংশনে স্থানান্তরিত হবে।

src/services.realtime.ts

import { User } from './auth'
import { TickerChange } from './models';
import { collection, doc, onSnapshot, query, where, documentId, getFirestore } from 'firebase/firestore';
import { formatSDKStocks } from './services';

const firestore = getFirestore();
type TickerChangesCallBack = (changes: TickerChange[]) => void

export function subscribeToTickerChanges(user: User, callback: TickerChangesCallBack) {

   let unsubscribePrevTickerChanges: () => void;

   // Subscribe to watchlist changes. We will get an update whenever a ticker is added/deleted to the watchlist
   const watchlistRef = doc(firestore, `watchlist/${user.uid}`);
   const unsubscribe = onSnapshot(watchlistRef, snapshot => {
       const doc = snapshot.data();
       const tickers = doc ? doc.tickers : [];

       if (unsubscribePrevTickerChanges) {
           unsubscribePrevTickerChanges();
       }

       if (tickers.length === 0) {
           callback([]);
       } else {
           // Query to get current price for tickers in the watchlist
           const priceQuery = query(
               collection(firestore, 'current'),
               where(documentId(), 'in', tickers)
           );

           // Subscribe to price changes for tickers in the watchlist
           unsubscribePrevTickerChanges = onSnapshot(priceQuery, snapshot => {
               const stocks = formatSDKStocks(snapshot);
               callback(stocks);
           });
       }
   });
   return () => {
       if (unsubscribePrevTickerChanges) {
           unsubscribePrevTickerChanges();
       }
       unsubscribe();
   };
}

export function subscribeToAllTickerChanges(callback: TickerChangesCallBack) {
   const tickersCollRef = collection(firestore, 'current');
   return onSnapshot(tickersCollRef, snapshot => {
       const stocks = formatSDKStocks(snapshot);
       callback(stocks);
   });
}

ডেটা আনতে Firestore লাইট ব্যবহার করুন

1. src/services.ts.
2. 'firebase/firestore' থেকে 'firebase/firestore/lite', getDoc যোগ করুন এবং আমদানি তালিকা থেকে onSnapshot সরান :

src/services.ts

import { 
    collection, 
    getDocs, 
    doc, 
    setDoc, 
    arrayUnion, 
    arrayRemove,
//  onSnapshot, // firestore lite doesn't support realtime updates
    query, 
    where, 
    documentId, 
    QuerySnapshot, 
    getDoc // add this import
} from 'firebase/firestore/lite';

3. ফায়ারস্টোর লাইট ব্যবহার করে প্রাথমিক পৃষ্ঠা রেন্ডারিংয়ের জন্য প্রয়োজনীয় ডেটা আনতে ফাংশন যোগ করুন:

src/services.ts

export async function getTickerChanges(tickers: string[]): Promise<TickerChange[]> {

   if (tickers.length === 0) {
       return [];
   }

   const priceQuery = query(
       collection(firestore, 'current'),
       where(documentId(), 'in', tickers)
   );
   const snapshot = await getDocs(priceQuery);
   performance && performance.measure("initial-data-load");
   logPerformance();
   return formatSDKStocks(snapshot);
}

export async function getTickers(user: User): Promise<string[]> {
   const watchlistRef = doc(firestore, `watchlist/${user.uid}`);
   const data =  (await getDoc(watchlistRef)).data();

   return data ? data.tickers : [];
}

export async function getAllTickerChanges(): Promise<TickerChange[]> {
   const tickersCollRef = collection(firestore, 'current');
   const snapshot = await getDocs(tickersCollRef);
   performance && performance.measure("initial-data-load");
   logPerformance();
   return formatSDKStocks(snapshot);
}

4. src/firebase.ts খুলুন, এবং 'firebase/firestore' থেকে 'firebase/firestore/lite':

src/firebase.ts

import { getFirestore } from 'firebase/firestore/lite';

তাদের সবাইকে একসাথে বেঁধে রাখুন

1. src/main.ts.
2. প্রাথমিক পৃষ্ঠা রেন্ডারিংয়ের জন্য ডেটা আনতে আপনার নতুন তৈরি ফাংশন এবং অ্যাপের অবস্থা পরিচালনা করার জন্য কয়েকটি সহায়ক ফাংশনের প্রয়োজন হবে। তাই এখন আমদানি আপডেট করুন:

src/main.ts

import { renderLoginPage, renderUserPage } from './renderer';
import { getAllTickerChanges, getTickerChanges, getTickers } from './services';
import { onUserChange } from './auth';
import { getState, setRealtimeServicesLoaded, setUser } from './state';
import './styles.scss';

3. ফাইলের শীর্ষে একটি ডায়নামিক ইম্পোর্ট ব্যবহার করে src/services.realtime লোড করুন। পরিবর্তনশীল loadRealtimeService হল একটি প্রতিশ্রুতি যা কোডটি লোড হয়ে গেলে রিয়েল-টাইম পরিষেবাগুলির সাথে সমাধান হবে। আপনি রিয়েল-টাইম আপডেটে সদস্যতা নিতে পরে এটি ব্যবহার করবেন।

src/main.ts

const loadRealtimeService = import('./services.realtime');
loadRealtimeService.then(() => {
   setRealtimeServicesLoaded(true);
});

4. onUserChange() এর কলব্যাকটিকে একটি async ফাংশনে পরিবর্তন করুন, যাতে আমরা ফাংশন বডিতে await ব্যবহার করতে পারি:

src/main.ts

onUserChange(async user => {
 // callback body
});

5. এখন আমরা আগের ধাপে তৈরি করা নতুন ফাংশন ব্যবহার করে প্রাথমিক পৃষ্ঠা রেন্ডারিং করতে ডেটা আনুন।

onUserChange() কলব্যাকে, যদি একজন ব্যবহারকারী লগ ইন করেছেন সেখানে if শর্তটি খুঁজুন এবং if স্টেটমেন্টের ভিতরে কোডটি কপি ও পেস্ট করুন:

src/main.ts

onUserChange(async user => {
      // LEAVE THE EXISTING CODE UNCHANGED HERE
      ...

      if (user) {
       // REPLACE THESE LINES

       // user page
       setUser(user);

       // show loading screen in 500ms
       const timeoutId = setTimeout(() => {
           renderUserPage(user, {
               loading: true,
               tableData: []
           });
       }, 500);

       // get data once if realtime services haven't been loaded
       if (!getState().realtimeServicesLoaded) {
           const tickers = await getTickers(user);
           const tickerData = await getTickerChanges(tickers);
           clearTimeout(timeoutId);
           renderUserPage(user, { tableData: tickerData });
       }

       // subscribe to realtime updates once realtime services are loaded
       loadRealtimeService.then(({ subscribeToTickerChanges }) => {
           unsubscribeTickerChanges = subscribeToTickerChanges(user, stockData => {
               clearTimeout(timeoutId);
               renderUserPage(user, { tableData: stockData })
           });
       });
   } else {
     // DON'T EDIT THIS PART, YET   
   }
}

6. অন্য ব্লকে যেখানে কোনও ব্যবহারকারী লগ ইন করা নেই, ফায়ারস্টোর লাইট ব্যবহার করে সমস্ত স্টকের জন্য মূল্যের তথ্য আনুন, পৃষ্ঠাটি রেন্ডার করুন, তারপর রিয়েল-টাইম পরিষেবাগুলি লোড হয়ে গেলে দামের পরিবর্তনগুলি শুনুন:

src/main.ts

if (user) {
   // DON'T EDIT THIS PART, WHICH WE JUST CHANGED ABOVE
   ...
} else {
   // REPLACE THESE LINES

   // login page
   setUser(null);

   // show loading screen in 500ms
   const timeoutId = setTimeout(() => {
       renderLoginPage('Landing page', {
           loading: true,
           tableData: []
       });
   }, 500);

   // get data once if realtime services haven't been loaded
   if (!getState().realtimeServicesLoaded) {
       const tickerData = await getAllTickerChanges();
       clearTimeout(timeoutId);
       renderLoginPage('Landing page', { tableData: tickerData });
   }

   // subscribe to realtime updates once realtime services are loaded
   loadRealtimeService.then(({ subscribeToAllTickerChanges }) => {
       unsubscribeAllTickerChanges = subscribeToAllTickerChanges(stockData => {
           clearTimeout(timeoutId);
           renderLoginPage('Landing page', { tableData: stockData })
       });
   });
}

সমাপ্ত কোডের জন্য src/main.ts দেখুন।

অ্যাপ কাজ করে যাচাই করুন

1. অ্যাপটি পুনর্নির্মাণের জন্য npm run build চালান।
2. একটি ব্রাউজার ট্যাব খুলুন http://localhost:8080 , অথবা বিদ্যমান ট্যাব রিফ্রেশ করুন।

বান্ডিলের আকার পরীক্ষা করুন

1. Chrome Devtools খুলুন।
2. নেটওয়ার্ক ট্যাবে স্যুইচ করুন।
3. নেটওয়ার্ক অনুরোধ ক্যাপচার করতে পৃষ্ঠাটি রিফ্রেশ করুন
4. main.js সন্ধান করুন এবং এর আকার পরীক্ষা করুন।
5. এখন এটি মাত্র 115KB (34.5KB gzipped)। এটি 446KB (138KB জিজিপড) আসল বান্ডেলের আকার থেকে 75% ছোট! ফলস্বরূপ, সাইটটি 3G সংযোগে 2 সেকেন্ডের বেশি দ্রুত লোড হচ্ছে - একটি দুর্দান্ত পারফরম্যান্স এবং ব্যবহারকারীর অভিজ্ঞতার উন্নতি!

8. অভিনন্দন

অভিনন্দন, আপনি সফলভাবে অ্যাপটিকে আপগ্রেড করেছেন এবং এটিকে আরও ছোট এবং দ্রুততর করেছেন!

আপনি অ্যাপটিকে টুকরো টুকরো আপগ্রেড করতে কম্প্যাট প্যাকেজগুলি ব্যবহার করেছেন, এবং আপনি প্রাথমিক পৃষ্ঠা রেন্ডারিংকে গতি বাড়ানোর জন্য Firestore Lite ব্যবহার করেছেন, তারপর দামের পরিবর্তনগুলি স্ট্রিম করতে গতিশীলভাবে প্রধান Firestore লোড করুন৷

আপনি এই কোডল্যাব চলাকালীন বান্ডিলের আকারও হ্রাস করেছেন এবং এর লোডের সময় উন্নত করেছেন:

আপনি এখন নতুন মডুলার JS SDK ব্যবহার করতে v8 Firebase JS SDK ব্যবহার করে এমন একটি ওয়েব অ্যাপ আপগ্রেড করার জন্য প্রয়োজনীয় মূল পদক্ষেপগুলি জানেন৷

আরও পড়া

• v8 -> v9 আপগ্রেড গাইড
• v9 সম্পর্কে আরও জানুন
• v9 দিয়ে শুরু করুন

রেফারেন্স ডক্স

• https://firebase.google.com/docs/reference/js/v9