এই পৃষ্ঠাটি Cloud Translation API অনুবাদ করেছে।

ফায়ারবেস ওয়েব কোডল্যাব

1। সংক্ষিপ্ত বিবরণ

এই কোডল্যাবে, আপনি ফায়ারবেস পণ্য এবং পরিষেবাগুলি ব্যবহার করে একটি চ্যাট ক্লায়েন্ট বাস্তবায়ন এবং স্থাপন করে সহজেই ওয়েব অ্যাপ্লিকেশন তৈরি করতে Firebase ব্যবহার করতে শিখবেন।

আপনি কি শিখবেন

ফায়ারবেসের জন্য ক্লাউড ফায়ারস্টোর এবং ক্লাউড স্টোরেজ ব্যবহার করে ডেটা সিঙ্ক করুন।
Firebase প্রমাণীকরণ ব্যবহার করে আপনার ব্যবহারকারীদের প্রমাণীকরণ করুন।
Firebase হোস্টিং-এ আপনার ওয়েব অ্যাপ স্থাপন করুন।
Firebase ক্লাউড মেসেজিং এর মাধ্যমে বিজ্ঞপ্তি পাঠান।
আপনার ওয়েব অ্যাপের কর্মক্ষমতা ডেটা সংগ্রহ করুন।

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

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

2. নমুনা কোড পান

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

git clone https://github.com/firebase/codelab-friendlychat-web

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

friendlychat-web সংগ্রহস্থলে একাধিক প্ল্যাটফর্মের জন্য নমুনা প্রকল্প রয়েছে।

এই কোডল্যাব শুধুমাত্র এই দুটি সংগ্রহস্থল ব্যবহার করে:

📁 ওয়েব-স্টার্ট : এই কোডল্যাবের সময় আপনি যে প্রারম্ভিক কোডটি তৈরি করবেন।
📁 ওয়েব : সমাপ্ত নমুনা অ্যাপের সম্পূর্ণ কোড।

দ্রষ্টব্য : আপনি যদি সমাপ্ত অ্যাপটি চালাতে চান, তাহলেও আপনাকে Firebase কনসোলে একটি Firebase প্রকল্প তৈরি করতে হবে (নির্দেশের জন্য এই কোডল্যাবে একটি Firebase প্রকল্প তৈরি করুন এবং সেট আপ করুন বিভাগটি দেখুন)।

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

আপনার IDE ব্যবহার করে, ক্লোন করা সংগ্রহস্থল থেকে 📁 web-start ডিরেক্টরি খুলুন বা আমদানি করুন। এই 📁 web-start ডিরেক্টরিতে কোডল্যাবের প্রারম্ভিক কোড রয়েছে, যা একটি সম্পূর্ণ কার্যকরী চ্যাট ওয়েব অ্যাপ হবে।

3. একটি ফায়ারবেস প্রকল্প তৈরি এবং সেট আপ করুন৷

একটি ফায়ারবেস প্রকল্প তৈরি করুন

Firebase এ সাইন ইন করুন।
Firebase কনসোলে, Add Project এ ক্লিক করুন এবং তারপর আপনার Firebase প্রোজেক্টের নাম দিন FriendlyChat । আপনার ফায়ারবেস প্রকল্পের জন্য প্রজেক্ট আইডি মনে রাখবেন।
এই প্রকল্পের জন্য Google Analytics সক্ষম করুন থেকে টিক চিহ্ন সরিয়ে দিন
প্রকল্প তৈরি করুন ক্লিক করুন।

আমরা যে অ্যাপ্লিকেশনটি তৈরি করতে যাচ্ছি সেটি ফায়ারবেস পণ্য ব্যবহার করে যা ওয়েব অ্যাপের জন্য উপলব্ধ:

Firebase প্রমাণীকরণ সহজেই আপনার ব্যবহারকারীদের আপনার অ্যাপে সাইন ইন করার অনুমতি দেয়।
ক্লাউড ফায়ারস্টোর ক্লাউডে স্ট্রাকচার্ড ডেটা সংরক্ষণ করতে এবং ডেটা পরিবর্তন হলে তাৎক্ষণিক বিজ্ঞপ্তি পেতে।
ক্লাউডে ফাইল সংরক্ষণ করার জন্য ফায়ারবেসের জন্য ক্লাউড স্টোরেজ ।
Firebase হোস্টিং হোস্ট এবং আপনার সম্পদ পরিবেশন.
ফায়ারবেস ক্লাউড মেসেজিং পুশ বিজ্ঞপ্তি পাঠাতে এবং ব্রাউজার পপআপ বিজ্ঞপ্তিগুলি প্রদর্শন করতে।
আপনার অ্যাপের জন্য ব্যবহারকারীর কর্মক্ষমতা ডেটা সংগ্রহ করতে Firebase পারফরম্যান্স মনিটরিং ।

এই পণ্যগুলির মধ্যে কিছু বিশেষ কনফিগারেশন প্রয়োজন বা Firebase কনসোল ব্যবহার করে সক্ষম করা প্রয়োজন।

প্রকল্পে একটি Firebase ওয়েব অ্যাপ যোগ করুন

ওয়েব আইকনে ক্লিক করুন একটি নতুন Firebase ওয়েব অ্যাপ তৈরি করতে।
Friendly Chat ডাকনাম দিয়ে অ্যাপটিকে নিবন্ধন করুন, তারপর এই অ্যাপের জন্য Firebase হোস্টিং সেট আপ করুন এর পাশের বাক্সে টিক চিহ্ন দিন। রেজিস্টার অ্যাপে ক্লিক করুন।
পরবর্তী ধাপে, আপনি একটি কনফিগারেশন অবজেক্ট দেখতে পাবেন। Firebase-config.js- এ শুধু JS অবজেক্ট (আশেপাশের HTML নয়) কপি করুন

ওয়েব অ্যাপের স্ক্রিনশট নিবন্ধন করুন

ব্যবহারকারীদের তাদের Google অ্যাকাউন্ট দিয়ে ওয়েব অ্যাপে সাইন ইন করার অনুমতি দিতে, আমরা Google সাইন-ইন পদ্ধতি ব্যবহার করব।

আপনাকে Google সাইন-ইন সক্ষম করতে হবে:

Firebase কনসোলে, বাম প্যানেলে বিল্ড বিভাগটি সনাক্ত করুন।
প্রমাণীকরণ ক্লিক করুন, তারপর সাইন-ইন পদ্ধতি ট্যাবে ক্লিক করুন (বা সরাসরি সেখানে যেতে এখানে ক্লিক করুন )।
Google সাইন-ইন প্রদানকারী সক্ষম করুন, তারপর সংরক্ষণ করুন ক্লিক করুন৷
আপনার অ্যাপের সর্বজনীন-মুখী নামটি বন্ধুত্বপূর্ণ চ্যাটে সেট করুন এবং ড্রপডাউন মেনু থেকে একটি প্রকল্প সমর্থন ইমেল চয়ন করুন৷
Google ক্লাউড কনসোলে আপনার OAuth সম্মতি স্ক্রীন কনফিগার করুন এবং একটি লোগো যোগ করুন:

ক্লাউড ফায়ারস্টোর সক্ষম করুন

ওয়েব অ্যাপ ক্লাউড ফায়ারস্টোর ব্যবহার করে চ্যাট মেসেজ সেভ করতে এবং নতুন চ্যাট মেসেজ পেতে।

আপনাকে ক্লাউড ফায়ারস্টোর সক্ষম করতে হবে:

Firebase কনসোলের বিল্ড বিভাগে, Firestore Database-এ ক্লিক করুন।
ক্লাউড ফায়ারস্টোর ফলকে ডেটাবেস তৈরি করুন ক্লিক করুন।

স্টার্ট ইন টেস্ট মোড বিকল্পটি নির্বাচন করুন, তারপর নিরাপত্তা নিয়ম সম্পর্কে দাবিত্যাগ পড়ার পর পরবর্তী ক্লিক করুন।

টেস্ট মোড নিশ্চিত করে যে আমরা বিকাশের সময় অবাধে ডাটাবেসে লিখতে পারি। আমরা পরবর্তীতে এই কোডল্যাবে আমাদের ডাটাবেসকে আরও সুরক্ষিত করব।

আপনার ক্লাউড ফায়ারস্টোর ডেটা যেখানে সংরক্ষিত আছে সেটি সেট করুন। আপনি এটিকে ডিফল্ট হিসাবে ছেড়ে যেতে পারেন বা আপনার কাছাকাছি একটি অঞ্চল বেছে নিতে পারেন৷ ফায়ারস্টোরের ব্যবস্থা করতে সম্পন্ন ক্লিক করুন।

ক্লাউড স্টোরেজ সক্ষম করুন

ওয়েব অ্যাপটি ছবি সংরক্ষণ, আপলোড এবং শেয়ার করতে Firebase-এর জন্য ক্লাউড স্টোরেজ ব্যবহার করে।

আপনাকে ক্লাউড স্টোরেজ সক্ষম করতে হবে:

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

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

ক্লাউড স্টোরেজ অবস্থানটি আপনার ক্লাউড ফায়ারস্টোর ডাটাবেসের জন্য আপনি যে অঞ্চলটি বেছে নিয়েছেন তার সাথে পূর্বনির্বাচিত। সেটআপ সম্পূর্ণ করতে সম্পন্ন ক্লিক করুন।

4. Firebase কমান্ড-লাইন ইন্টারফেস ইনস্টল করুন

Firebase কমান্ড-লাইন ইন্টারফেস (CLI) আপনাকে স্থানীয়ভাবে আপনার ওয়েব অ্যাপ পরিবেশন করতে, সেইসাথে আপনার Firebase প্রকল্পে আপনার ওয়েব অ্যাপ স্থাপন করতে Firebase হোস্টিং ব্যবহার করতে দেয়।

নিম্নলিখিত npm কমান্ডটি চালিয়ে CLI ইনস্টল করুন:

npm -g install firebase-tools

নিম্নলিখিত কমান্ডটি চালিয়ে সিএলআই সঠিকভাবে ইনস্টল করা হয়েছে তা যাচাই করুন:

firebase --version

নিশ্চিত করুন যে Firebase CLI-এর সংস্করণ v4.1.0 বা তার পরের।

নিম্নলিখিত কমান্ড চালানোর মাধ্যমে Firebase CLI অনুমোদন করুন:

firebase login

আমরা আপনার অ্যাপের স্থানীয় ডিরেক্টরি (কোডল্যাবে আগে ক্লোন করা সংগ্রহস্থল) থেকে Firebase হোস্টিংয়ের জন্য আপনার অ্যাপের কনফিগারেশন টেনে আনতে ওয়েব অ্যাপ টেমপ্লেট সেট আপ করেছি। কিন্তু কনফিগারেশন টানতে, আমাদের আপনার অ্যাপটিকে আপনার ফায়ারবেস প্রকল্পের সাথে সংযুক্ত করতে হবে।

নিশ্চিত করুন যে আপনার কমান্ড লাইন আপনার অ্যাপের স্থানীয় web-start ডিরেক্টরি অ্যাক্সেস করছে।
নিম্নলিখিত কমান্ডটি চালিয়ে আপনার ফায়ারবেস প্রকল্পের সাথে আপনার অ্যাপটি সংযুক্ত করুন:

firebase use --add

প্রম্পট করা হলে, আপনার প্রোজেক্ট আইডি নির্বাচন করুন, তারপর আপনার ফায়ারবেস প্রোজেক্টকে একটি উপনাম দিন।

আপনার একাধিক পরিবেশ (উৎপাদন, মঞ্চায়ন, ইত্যাদি) থাকলে একটি উপনাম দরকারী। যাইহোক, এই কোডল্যাবের জন্য, default উপনাম ব্যবহার করা যাক।

আপনার কমান্ড লাইনে অবশিষ্ট নির্দেশাবলী অনুসরণ করুন।

5. স্থানীয়ভাবে স্টার্টার অ্যাপ চালান

এখন যেহেতু আপনি আপনার প্রকল্প আমদানি এবং কনফিগার করেছেন, আপনি প্রথমবারের জন্য ওয়েব অ্যাপ চালানোর জন্য প্রস্তুত৷

web-start ডিরেক্টরি থেকে একটি কনসোলে, নিম্নলিখিত Firebase CLI কমান্ডটি চালান:

firebase serve --only hosting

আপনার কমান্ড লাইন নিম্নলিখিত প্রতিক্রিয়া প্রদর্শন করা উচিত:

✔  hosting: Local server: http://localhost:5000

আমরা স্থানীয়ভাবে আমাদের অ্যাপ পরিবেশন করতে Firebase হোস্টিং এমুলেটর ব্যবহার করছি। ওয়েব অ্যাপটি এখন http://localhost:5000 থেকে পাওয়া উচিত। public সাবডিরেক্টরির অধীনে থাকা সমস্ত ফাইল পরিবেশন করা হয়।

আপনার ব্রাউজার ব্যবহার করে, http://localhost:5000 এ আপনার অ্যাপ খুলুন।

আপনি আপনার FriendlyChat অ্যাপের UI দেখতে পাবেন, যা (এখনও!) কাজ করছে না:

অ্যাপটি এখনই কিছু করতে পারে না, তবে আপনার সহায়তায় এটি শীঘ্রই হবে! আমরা এখন পর্যন্ত আপনার জন্য শুধুমাত্র UI তৈরি করেছি।

আসুন এখন একটি রিয়েলটাইম চ্যাট তৈরি করি!

6. Firebase আমদানি এবং কনফিগার করুন

Firebase SDK আমদানি করুন

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

আমরা npm থেকে Firebase SDK পেতে যাচ্ছি এবং আমাদের কোড বান্ডিল করতে Webpack ব্যবহার করব। আমরা এটি করছি যাতে ওয়েবপ্যাক যেকোনো অপ্রয়োজনীয় কোড মুছে ফেলতে পারে, আমাদের অ্যাপ যত তাড়াতাড়ি সম্ভব লোড হয় তা নিশ্চিত করতে আমাদের JS বান্ডেলের আকার ছোট রেখে। এই কোডল্যাবের জন্য, আমরা ইতিমধ্যেই একটি web-start/package.json ফাইল তৈরি করেছি যাতে Firebase SDK-কে নির্ভরতা হিসেবে অন্তর্ভুক্ত করা হয়েছে, সেইসাথে web-start/src/index.js এর শীর্ষে প্রয়োজনীয় ফাংশন আমদানি করা হয়েছে।

package.json

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

index.js

import { initializeApp } from 'firebase/app';
import {
  getAuth,
  onAuthStateChanged,
  GoogleAuthProvider,
  signInWithPopup,
  signOut,
} from 'firebase/auth';
import {
  getFirestore,
  collection,
  addDoc,
  query,
  orderBy,
  limit,
  onSnapshot,
  setDoc,
  updateDoc,
  doc,
  serverTimestamp,
} from 'firebase/firestore';
import {
  getStorage,
  ref,
  uploadBytesResumable,
  getDownloadURL,
} from 'firebase/storage';
import { getMessaging, getToken, onMessage } from 'firebase/messaging';
import { getPerformance } from 'firebase/performance';

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

Firebase SDK ইনস্টল করুন এবং আপনার Webpack বিল্ড শুরু করুন

আমাদের অ্যাপের বিল্ড চালু করার জন্য আমাদের কয়েকটি কমান্ড চালাতে হবে।

একটি নতুন টার্মিনাল উইন্ডো খুলুন
টার্মিনাল চলমান firebase serve খোলা রেখে দিন। এটি এখনও আমরা স্থানীয়ভাবে অ্যাপটি হোস্ট করতে ব্যবহার করব
আপনি web-start ডিরেক্টরিতে আছেন তা নিশ্চিত করুন
Firebase SDK ডাউনলোড করতে npm install চালান
ওয়েবপ্যাক শুরু করতে npm run start চালান। ওয়েবপ্যাক এখন বাকি কোডল্যাবের জন্য আমাদের সোর্স কোড ক্রমাগত পুনর্নির্মাণ করবে।

Firebase কনফিগার করুন

আমরা কোন ফায়ারবেস প্রকল্পটি ব্যবহার করছি তা জানাতে আমাদের Firebase SDK কনফিগার করতে হবে।

Firebase কনসোলে আপনার প্রজেক্ট সেটিংসে যান
"আপনার অ্যাপস" কার্ডে, অ্যাপটির ডাকনাম নির্বাচন করুন যার জন্য আপনার একটি কনফিগার অবজেক্ট প্রয়োজন।
Firebase SDK স্নিপেট ফলক থেকে "কনফিগ" নির্বাচন করুন।
কনফিগার অবজেক্ট স্নিপেট কপি করুন, তারপর web-start/src/firebase-config.js এ যোগ করুন।

firebase-config.js

const config = {
  apiKey: "API_KEY",
  authDomain: "PROJECT_ID.firebaseapp.com",
  databaseURL: "https://PROJECT_ID.firebaseio.com",
  projectId: "PROJECT_ID",
  storageBucket: "PROJECT_ID.appspot.com",
  messagingSenderId: "SENDER_ID",
  appId: "APP_ID",
  measurementId: "G-MEASUREMENT_ID",
};

এখন, web-start/src/index.js এর নীচে যান এবং Firebase শুরু করুন:

index.js

const firebaseAppConfig = getFirebaseConfig();
initializeApp(firebaseAppConfig);

7. ব্যবহারকারী সাইন-ইন সেট আপ করুন৷

Firebase SDK এখন ব্যবহার করার জন্য প্রস্তুত হওয়া উচিত যেহেতু এটি আমদানি করা হয়েছে এবং index.js এ আরম্ভ করা হয়েছে। আমরা এখন Firebase প্রমাণীকরণ ব্যবহার করে ব্যবহারকারী সাইন-ইন বাস্তবায়ন করতে যাচ্ছি।

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

web-start ডিরেক্টরিতে, সাবডিরেক্টরিতে src/ , index.js খুলুন।
ফাংশন signIn খুঁজুন।
নিম্নলিখিত কোড দিয়ে সম্পূর্ণ ফাংশন প্রতিস্থাপন করুন.

index.js

// Signs-in Friendly Chat.
async function signIn() {
  // Sign in Firebase using popup auth and Google as the identity provider.
  var provider = new GoogleAuthProvider();
  await signInWithPopup(getAuth(), provider);
}

ব্যবহারকারী সাইন আউট বোতামে ক্লিক করলে signOut ফাংশনটি ট্রিগার হয়।

src/index.js ফাইলে ফিরে যান।
signOutUser ফাংশনটি খুঁজুন।
নিম্নলিখিত কোড দিয়ে সম্পূর্ণ ফাংশন প্রতিস্থাপন করুন.

index.js

// Signs-out of Friendly Chat.
function signOutUser() {
  // Sign out of Firebase.
  signOut(getAuth());
}

প্রমাণীকরণ অবস্থা ট্র্যাক করুন

সেই অনুযায়ী আমাদের UI আপডেট করতে, ব্যবহারকারী সাইন ইন বা সাইন আউট করেছেন কিনা তা পরীক্ষা করার জন্য আমাদের একটি উপায় প্রয়োজন। ফায়ারবেস প্রমাণীকরণের মাধ্যমে, আপনি প্রমাণীকরণ স্থিতিতে একজন পর্যবেক্ষক নিবন্ধন করতে পারেন যা প্রতিবার প্রমাণীকরণের অবস্থা পরিবর্তন করার সময় ট্রিগার করা হবে।

src/index.js ফাইলে ফিরে যান।
initFirebaseAuth ফাংশন খুঁজুন।
নিম্নলিখিত কোড দিয়ে সম্পূর্ণ ফাংশন প্রতিস্থাপন করুন.

index.js

// Initialize firebase auth
function initFirebaseAuth() {
  // Listen to auth state changes.
  onAuthStateChanged(getAuth(), authStateObserver);
}

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

সাইন ইন করা ব্যবহারকারীর তথ্য প্রদর্শন করুন

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

src/index.js ফাইলে ফিরে যান।
getProfilePicUrl এবং getUserName ফাংশন খুঁজুন।
নিম্নলিখিত কোড দিয়ে উভয় ফাংশন প্রতিস্থাপন করুন.

index.js

// Returns the signed-in user's profile Pic URL.
function getProfilePicUrl() {
  return getAuth().currentUser.photoURL || '/images/profile_placeholder.png';
}

// Returns the signed-in user's display name.
function getUserName() {
  return getAuth().currentUser.displayName;
}

ব্যবহারকারী সাইন ইন না থাকলে ব্যবহারকারী বার্তা পাঠানোর চেষ্টা করলে আমরা একটি ত্রুটি বার্তা প্রদর্শন করি। (যদিও আপনি এটি চেষ্টা করতে পারেন!) তাই, ব্যবহারকারী আসলে সাইন ইন করেছেন কিনা তা আমাদের সনাক্ত করতে হবে।

src/index.js ফাইলে ফিরে যান।
isUserSignedIn ফাংশন খুঁজুন।
নিম্নলিখিত কোড দিয়ে সম্পূর্ণ ফাংশন প্রতিস্থাপন করুন.

index.js

// Returns true if a user is signed-in.
function isUserSignedIn() {
  return !!getAuth().currentUser;
}

অ্যাপে সাইন ইন করার পরীক্ষা করুন

যদি আপনার অ্যাপটি এখনও পরিবেশিত হয়, তাহলে ব্রাউজারে আপনার অ্যাপ রিফ্রেশ করুন। অন্যথায়, http://localhost:5000 থেকে অ্যাপটি পরিবেশন শুরু করতে কমান্ড লাইনে firebase serve --only hosting চালান এবং তারপর আপনার ব্রাউজারে খুলুন।
সাইন-ইন বোতাম এবং আপনার Google অ্যাকাউন্ট ব্যবহার করে অ্যাপে সাইন ইন করুন। আপনি যদি auth/operation-not-allowed একটি ত্রুটির বার্তা দেখতে পান, তাহলে নিশ্চিত করুন যে আপনি Firebase কনসোলে একটি প্রমাণীকরণ প্রদানকারী হিসাবে Google সাইন-ইন সক্ষম করেছেন।
সাইন ইন করার পরে, আপনার প্রোফাইল ছবি এবং ব্যবহারকারীর নাম প্রদর্শিত হবে:

8. ক্লাউড ফায়ারস্টোরে বার্তা লিখুন

এই বিভাগে, আমরা ক্লাউড ফায়ারস্টোরে কিছু ডেটা লিখব যাতে আমরা অ্যাপের UI পূরণ করতে পারি। এটি Firebase কনসোলের সাথে ম্যানুয়ালি করা যেতে পারে, তবে আমরা একটি মৌলিক ক্লাউড ফায়ারস্টোর লেখা প্রদর্শন করতে অ্যাপে এটি করব।

তথ্য মডেল

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

ক্লাউড ফায়ারস্টোরে বার্তা যোগ করুন

ব্যবহারকারীদের দ্বারা লেখা চ্যাট বার্তা সংরক্ষণ করতে, আমরা Cloud Firestore ব্যবহার করব।

এই বিভাগে, আপনি ব্যবহারকারীদের আপনার ডাটাবেসে নতুন বার্তা লেখার জন্য কার্যকারিতা যোগ করবেন। একজন ব্যবহারকারী পাঠান বোতামে ক্লিক করলে নিচের কোড স্নিপেটটি ট্রিগার করবে। এটি messages সংগ্রহে আপনার ক্লাউড ফায়ারস্টোর দৃষ্টান্তে বার্তা ক্ষেত্রের বিষয়বস্তু সহ একটি বার্তা বস্তু যুক্ত করে। add() পদ্ধতি সংগ্রহে একটি স্বয়ংক্রিয়ভাবে তৈরি আইডি সহ একটি নতুন নথি যোগ করে।

src/index.js ফাইলে ফিরে যান।
saveMessage ফাংশন খুঁজুন।
নিম্নলিখিত কোড দিয়ে সম্পূর্ণ ফাংশন প্রতিস্থাপন করুন.

index.js

// Saves a new message to Cloud Firestore.
async function saveMessage(messageText) {
  // Add a new message entry to the Firebase database.
  try {
    await addDoc(collection(getFirestore(), 'messages'), {
      name: getUserName(),
      text: messageText,
      profilePicUrl: getProfilePicUrl(),
      timestamp: serverTimestamp()
    });
  }
  catch(error) {
    console.error('Error writing new message to Firebase Database', error);
  }
}

বার্তা পাঠানোর পরীক্ষা করুন

যদি আপনার অ্যাপটি এখনও পরিবেশিত হয়, তাহলে ব্রাউজারে আপনার অ্যাপ রিফ্রেশ করুন। অন্যথায়, http://localhost:5000 থেকে অ্যাপটি পরিবেশন শুরু করতে কমান্ড লাইনে firebase serve --only hosting চালান এবং তারপর আপনার ব্রাউজারে খুলুন।
সাইন ইন করার পরে, একটি বার্তা লিখুন যেমন "আরে আছে!", এবং তারপরে পাঠান ক্লিক করুন৷ এটি ক্লাউড ফায়ারস্টোরে বার্তাটি লিখবে। যাইহোক, আপনি এখনও আপনার প্রকৃত ওয়েব অ্যাপে ডেটা দেখতে পাবেন না কারণ আমাদের এখনও ডেটা পুনরুদ্ধার বাস্তবায়ন করতে হবে (কোডল্যাবের পরবর্তী বিভাগ)।
আপনি আপনার Firebase কনসোলে নতুন যোগ করা বার্তা দেখতে পাবেন। আপনার ফায়ারবেস কনসোল খুলুন। বিল্ড বিভাগের অধীনে Firestore ডেটাবেস ক্লিক করুন (বা এখানে ক্লিক করুন এবং আপনার প্রকল্প নির্বাচন করুন) এবং আপনি আপনার নতুন যোগ করা বার্তা সহ বার্তা সংগ্রহ দেখতে পাবেন:

9. বার্তা পড়ুন

বার্তা সিঙ্ক্রোনাইজ করুন

অ্যাপে বার্তাগুলি পড়ার জন্য, আমাদের এমন শ্রোতাদের যোগ করতে হবে যা ডেটা পরিবর্তন হলে ট্রিগার করে এবং তারপরে একটি UI উপাদান তৈরি করতে হবে যা নতুন বার্তাগুলি দেখায়।

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

src/index.js ফাইলে ফিরে যান।
loadMessages ফাংশন খুঁজুন।
নিম্নলিখিত কোড দিয়ে সম্পূর্ণ ফাংশন প্রতিস্থাপন করুন.

index.js

// Loads chat messages history and listens for upcoming ones.
function loadMessages() {
  // Create the query to load the last 12 messages and listen for new ones.
  const recentMessagesQuery = query(collection(getFirestore(), 'messages'), orderBy('timestamp', 'desc'), limit(12));
  
  // Start listening to the query.
  onSnapshot(recentMessagesQuery, function(snapshot) {
    snapshot.docChanges().forEach(function(change) {
      if (change.type === 'removed') {
        deleteMessage(change.doc.id);
      } else {
        var message = change.doc.data();
        displayMessage(change.doc.id, message.timestamp, message.name,
                      message.text, message.profilePicUrl, message.imageUrl);
      }
    });
  });
}

ডাটাবেসের বার্তাগুলি শোনার জন্য, আমরা কোন সংগ্রহে ডেটা শুনতে চাই তা নির্দিষ্ট করার জন্য collection ফাংশন ব্যবহার করে একটি সংগ্রহে একটি প্রশ্ন তৈরি করি৷ উপরের কোডে, আমরা messages মধ্যে পরিবর্তনগুলি শুনছি সংগ্রহ, যেখানে চ্যাট বার্তা সংরক্ষণ করা হয়। আমরা .limit(12) ব্যবহার করে শুধুমাত্র শেষ 12টি বার্তা শুনে এবং 12টি নতুন বার্তা পেতে orderBy('timestamp', 'desc') ব্যবহার করে তারিখ অনুসারে বার্তাগুলি অর্ডার করার মাধ্যমে একটি সীমা প্রয়োগ করছি৷

onSnapshot ফাংশন তার প্রথম প্যারামিটার হিসাবে একটি ক্যোয়ারী নেয় এবং দ্বিতীয় হিসাবে একটি কলব্যাক ফাংশন নেয়। কলব্যাক ফাংশনটি ট্রিগার করা হবে যখন কোয়েরির সাথে মেলে এমন নথিতে কোনো পরিবর্তন হবে। এটি হতে পারে যদি একটি বার্তা মুছে ফেলা, পরিবর্তন করা বা যোগ করা হয়। আপনি ক্লাউড ফায়ারস্টোর ডকুমেন্টেশনে এই সম্পর্কে আরও পড়তে পারেন।

সিঙ্ক্রোনাইজিং বার্তা পরীক্ষা করুন

যদি আপনার অ্যাপটি এখনও পরিবেশিত হয়, তাহলে ব্রাউজারে আপনার অ্যাপ রিফ্রেশ করুন। অন্যথায়, http://localhost:5000 থেকে অ্যাপটি পরিবেশন শুরু করতে কমান্ড লাইনে firebase serve --only hosting চালান এবং তারপর আপনার ব্রাউজারে খুলুন।
আপনি ডাটাবেসে আগে যে বার্তাগুলি তৈরি করেছেন তা FriendlyChat UI-তে প্রদর্শিত হওয়া উচিত (নীচে দেখুন)। নতুন বার্তা লিখতে নির্দ্বিধায়; তারা অবিলম্বে উপস্থিত করা উচিত.
(ঐচ্ছিক) আপনি Firebase কনসোলের ডাটাবেস বিভাগে সরাসরি ম্যানুয়ালি মুছে ফেলা, পরিবর্তন বা নতুন বার্তা যোগ করার চেষ্টা করতে পারেন; কোনো পরিবর্তন UI এ প্রতিফলিত হওয়া উচিত।

অভিনন্দন! আপনি আপনার অ্যাপে ক্লাউড ফায়ারস্টোর ডকুমেন্ট পড়ছেন!

10. ছবি পাঠান

আমরা এখন একটি বৈশিষ্ট্য যোগ করব যা ছবি শেয়ার করে।

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

ক্লাউড স্টোরেজে ছবি সংরক্ষণ করুন

এই কোডল্যাবের জন্য, আমরা ইতিমধ্যেই আপনার জন্য একটি বোতাম যুক্ত করেছি যা একটি ফাইল পিকার ডায়ালগ ট্রিগার করে৷ একটি ফাইল নির্বাচন করার পরে, saveImageMessage ফাংশন বলা হয়, এবং আপনি নির্বাচিত ফাইলের একটি রেফারেন্স পেতে পারেন। saveImageMessage ফাংশন নিম্নলিখিতগুলি সম্পন্ন করে:

চ্যাট ফিডে একটি "প্লেসহোল্ডার" চ্যাট বার্তা তৈরি করে, যাতে আমরা ছবিটি আপলোড করার সময় ব্যবহারকারীরা একটি "লোড হচ্ছে" অ্যানিমেশন দেখতে পান।
এই পাথে ক্লাউড স্টোরেজে ইমেজ ফাইল আপলোড করে: /<uid>/<messageId>/<file_name>
চিত্র ফাইলের জন্য একটি সর্বজনীনভাবে পাঠযোগ্য URL তৈরি করে।
অস্থায়ী লোডিং চিত্রের পরিবর্তে নতুন আপলোড করা চিত্র ফাইলের URL দিয়ে চ্যাট বার্তা আপডেট করে।

এখন আপনি একটি চিত্র পাঠাতে কার্যকারিতা যোগ করবেন:

src/index.js ফাইলে ফিরে যান।
saveImageMessage ফাংশন খুঁজুন।
নিম্নলিখিত কোড দিয়ে সম্পূর্ণ ফাংশন প্রতিস্থাপন করুন.

index.js

// Saves a new message containing an image in Firebase.
// This first saves the image in Firebase storage.
async function saveImageMessage(file) {
  try {
    // 1 - We add a message with a loading icon that will get updated with the shared image.
    const messageRef = await addDoc(collection(getFirestore(), 'messages'), {
      name: getUserName(),
      imageUrl: LOADING_IMAGE_URL,
      profilePicUrl: getProfilePicUrl(),
      timestamp: serverTimestamp()
    });

    // 2 - Upload the image to Cloud Storage.
    const filePath = `${getAuth().currentUser.uid}/${messageRef.id}/${file.name}`;
    const newImageRef = ref(getStorage(), filePath);
    const fileSnapshot = await uploadBytesResumable(newImageRef, file);
    
    // 3 - Generate a public URL for the file.
    const publicImageUrl = await getDownloadURL(newImageRef);

    // 4 - Update the chat message placeholder with the image's URL.
    await updateDoc(messageRef,{
      imageUrl: publicImageUrl,
      storageUri: fileSnapshot.metadata.fullPath
    });
  } catch (error) {
    console.error('There was an error uploading a file to Cloud Storage:', error);
  }
}

ইমেজ পাঠানো পরীক্ষা

যদি আপনার অ্যাপটি এখনও পরিবেশিত হয়, তাহলে ব্রাউজারে আপনার অ্যাপ রিফ্রেশ করুন। অন্যথায়, http://localhost:5000 থেকে অ্যাপটি পরিবেশন শুরু করতে কমান্ড লাইনে firebase serve --only hosting চালান এবং তারপর আপনার ব্রাউজারে খুলুন।
সাইন ইন করার পরে, ইমেজ আপলোড বোতামে ক্লিক করুন এবং ফাইল পিকার ব্যবহার করে একটি ইমেজ ফাইল নির্বাচন করুন। আপনি যদি একটি ছবি খুঁজছেন, একটি কফি কাপের এই সুন্দর ছবি ব্যবহার করতে দ্বিধা বোধ করুন৷
আপনার নির্বাচিত চিত্র সহ অ্যাপের UI-তে একটি নতুন বার্তা উপস্থিত হওয়া উচিত:

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

11. বিজ্ঞপ্তি দেখান

আমরা এখন ব্রাউজার বিজ্ঞপ্তির জন্য সমর্থন যোগ করব। চ্যাটে নতুন বার্তা পোস্ট করা হলে অ্যাপটি ব্যবহারকারীদের অবহিত করবে। Firebase ক্লাউড মেসেজিং (FCM) হল একটি ক্রস-প্ল্যাটফর্ম মেসেজিং সলিউশন যা আপনাকে বিনা খরচে নির্ভরযোগ্যভাবে বার্তা এবং বিজ্ঞপ্তি প্রদান করতে দেয়।

FCM পরিষেবা কর্মী যোগ করুন

ওয়েব অ্যাপটির একজন পরিষেবা কর্মী প্রয়োজন যে ওয়েব বিজ্ঞপ্তিগুলি গ্রহণ করবে এবং প্রদর্শন করবে৷

web-start ডিরেক্টরি থেকে, src ডিরেক্টরিতে, firebase-messaging-sw.js খুলুন।
সেই ফাইলে নিম্নলিখিত বিষয়বস্তু যোগ করুন।

firebase-messaging-sw.js

// Import and configure the Firebase SDK
import { initializeApp } from 'firebase/app';
import { getMessaging } from 'firebase/messaging/sw';
import { getFirebaseConfig } from './firebase-config';

const firebaseApp = initializeApp(getFirebaseConfig());
getMessaging(firebaseApp);
console.info('Firebase messaging service worker is set up');

পরিষেবা কর্মীকে কেবল Firebase ক্লাউড মেসেজিং SDK লোড এবং আরম্ভ করতে হবে, যা বিজ্ঞপ্তিগুলি প্রদর্শনের যত্ন নেবে৷

FCM ডিভাইস টোকেন পান

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

ব্যবহারকারী সাইন-ইন করলে, আমরা saveMessagingDeviceToken ফাংশনকে কল করি। সেখানেই আমরা ব্রাউজার থেকে এফসিএম ডিভাইস টোকেন পাব এবং ক্লাউড ফায়ারস্টোরে সংরক্ষণ করব।

src/index.js ফাইলে ফিরে যান।
saveMessagingDeviceToken ফাংশন খুঁজুন।
নিম্নলিখিত কোড দিয়ে সম্পূর্ণ ফাংশন প্রতিস্থাপন করুন.

index.js

// Saves the messaging device token to Cloud Firestore.
async function saveMessagingDeviceToken() {
  try {
    const currentToken = await getToken(getMessaging());
    if (currentToken) {
      console.log('Got FCM device token:', currentToken);
      // Saving the Device Token to Cloud Firestore.
      const tokenRef = doc(getFirestore(), 'fcmTokens', currentToken);
      await setDoc(tokenRef, { uid: getAuth().currentUser.uid });

      // This will fire when a message is received while the app is in the foreground.
      // When the app is in the background, firebase-messaging-sw.js will receive the message instead.
      onMessage(getMessaging(), (message) => {
        console.log(
          'New foreground notification from Firebase Messaging!',
          message.notification
        );
      });
    } else {
      // Need to request permissions to show notifications.
      requestNotificationsPermissions();
    }
  } catch(error) {
    console.error('Unable to get messaging token.', error);
  };
}

যাইহোক, এই কোড প্রাথমিকভাবে কাজ করবে না। আপনার অ্যাপের জন্য ডিভাইস টোকেন পুনরুদ্ধার করতে সক্ষম হওয়ার জন্য, ব্যবহারকারীকে আপনার অ্যাপকে বিজ্ঞপ্তি দেখানোর অনুমতি দিতে হবে (কোডল্যাবের পরবর্তী ধাপ)।

বিজ্ঞপ্তি দেখানোর জন্য অনুমতির অনুরোধ করুন

যখন ব্যবহারকারী এখনও আপনার অ্যাপকে বিজ্ঞপ্তি দেখানোর অনুমতি দেয়নি, তখন আপনাকে একটি ডিভাইস টোকেন দেওয়া হবে না। এই ক্ষেত্রে, আমরা firebase.messaging().requestPermission() পদ্ধতিকে কল করি, যা এই অনুমতির জন্য জিজ্ঞাসা করার জন্য একটি ব্রাউজার ডায়ালগ প্রদর্শন করবে ( সমর্থিত ব্রাউজারে )।

src/index.js ফাইলে ফিরে যান।
ফাংশনটি খুঁজুন requestNotificationsPermissions .
নিম্নলিখিত কোড দিয়ে সম্পূর্ণ ফাংশন প্রতিস্থাপন করুন.

index.js

// Requests permissions to show notifications.
async function requestNotificationsPermissions() {
  console.log('Requesting notifications permission...');
  const permission = await Notification.requestPermission();
  
  if (permission === 'granted') {
    console.log('Notification permission granted.');
    // Notification permission granted.
    await saveMessagingDeviceToken();
  } else {
    console.log('Unable to get permission to notify.');
  }
}

আপনার ডিভাইস টোকেন পান

যদি আপনার অ্যাপটি এখনও পরিবেশিত হয়, তাহলে ব্রাউজারে আপনার অ্যাপ রিফ্রেশ করুন। অন্যথায়, http://localhost:5000 থেকে অ্যাপটি পরিবেশন শুরু করতে কমান্ড লাইনে firebase serve --only hosting চালান এবং তারপর আপনার ব্রাউজারে খুলুন।
সাইন ইন করার পরে, বিজ্ঞপ্তি অনুমতি ডায়ালগ উপস্থিত হওয়া উচিত:
Allow এ ক্লিক করুন।
আপনার ব্রাউজারের জাভাস্ক্রিপ্ট কনসোল খুলুন। আপনি নিম্নলিখিত বার্তাটি দেখতে পাবেন: Got FCM device token: cWL6w:APA91bHP...4jDPL_A-wPP06GJp1OuekTaTZI5K2Tu
আপনার ডিভাইস টোকেন কপি করুন. কোডল্যাবের পরবর্তী পর্যায়ে আপনার এটির প্রয়োজন হবে।

আপনার ডিভাইসে একটি বিজ্ঞপ্তি পাঠান

এখন আপনার ডিভাইস টোকেন আছে, আপনি একটি বিজ্ঞপ্তি পাঠাতে পারেন।

Firebase কনসোলের ক্লাউড মেসেজিং ট্যাবটি খুলুন।
"নতুন বিজ্ঞপ্তি" ক্লিক করুন
একটি বিজ্ঞপ্তি শিরোনাম এবং বিজ্ঞপ্তি পাঠ্য লিখুন।
স্ক্রিনের ডানদিকে, "একটি পরীক্ষা বার্তা পাঠান" ক্লিক করুন
আপনার ব্রাউজারের জাভাস্ক্রিপ্ট কনসোল থেকে কপি করা ডিভাইস টোকেনটি লিখুন, তারপর প্লাস ("+") চিহ্নে ক্লিক করুন
"পরীক্ষা" ক্লিক করুন

আপনার অ্যাপটি ফোরগ্রাউন্ডে থাকলে, আপনি JavaScript কনসোলে বিজ্ঞপ্তি দেখতে পাবেন।

যদি আপনার অ্যাপটি পটভূমিতে থাকে, তাহলে এই উদাহরণের মতো আপনার ব্রাউজারে একটি বিজ্ঞপ্তি উপস্থিত হওয়া উচিত:

12. ক্লাউড ফায়ারস্টোর নিরাপত্তা নিয়ম

ডাটাবেস নিরাপত্তা নিয়ম দেখুন

ক্লাউড ফায়ারস্টোর অ্যাক্সেসের অধিকার, নিরাপত্তা এবং ডেটা যাচাইকরণের জন্য একটি নির্দিষ্ট নিয়মের ভাষা ব্যবহার করে।

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

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

rules_version = '2';

service cloud.firestore {
  match /databases/{database}/documents {
    match /{document=**} {
      allow read, write;
    }
  }
}

আমরা নিম্নলিখিত নিয়মগুলি ব্যবহার করে জিনিসগুলিকে সীমাবদ্ধ করতে নিয়মগুলি আপডেট করব:

firestore.rules

rules_version = '2';

service cloud.firestore {
  match /databases/{database}/documents {
    // Messages:
    //   - Anyone can read.
    //   - Authenticated users can add and edit messages.
    //   - Validation: Check name is same as auth token and text length below 300 char or that imageUrl is a URL.
    //   - Deletes are not allowed.
    match /messages/{messageId} {
      allow read;
      allow create, update: if request.auth != null
                    && request.resource.data.name == request.auth.token.name
                    && (request.resource.data.text is string
                      && request.resource.data.text.size() <= 300
                      || request.resource.data.imageUrl is string
                      && request.resource.data.imageUrl.matches('https?://.*'));
      allow delete: if false;
    }
    // FCM Tokens:
    //   - Anyone can write their token.
    //   - Reading list of tokens is not allowed.
    match /fcmTokens/{token} {
      allow read: if false;
      allow write;
    }
  }
}

ডাটাবেস নিরাপত্তা নিয়ম আপডেট করুন

আপনার ডাটাবেস নিরাপত্তা নিয়মগুলি সম্পাদনা করার দুটি উপায় আছে, হয় Firebase কনসোলে অথবা Firebase CLI ব্যবহার করে স্থাপন করা স্থানীয় নিয়ম ফাইল থেকে।

Firebase কনসোলে নিরাপত্তা নিয়ম আপডেট করতে:

বাম প্যানেল থেকে ডেটাবেস বিভাগে যান এবং তারপরে নিয়ম ট্যাবে ক্লিক করুন।
ডিফল্ট নিয়মগুলি প্রতিস্থাপন করুন যা ইতিমধ্যেই কনসোলে রয়েছে উপরে দেখানো নিয়মগুলি দিয়ে৷
প্রকাশ করুন ক্লিক করুন.

একটি স্থানীয় ফাইল থেকে নিরাপত্তা নিয়ম আপডেট করতে:

web-start ডিরেক্টরি থেকে, firestore.rules খুলুন।
ডিফল্ট নিয়মগুলিকে প্রতিস্থাপন করুন যা ইতিমধ্যেই ফাইলে রয়েছে উপরে দেখানো নিয়মগুলি দিয়ে।
web-start ডিরেক্টরি থেকে, firebase.json খুলুন।
firestore.rules এট্রিবিউট যোগ করুন firestore.rules দিকে নির্দেশ করে, যেমনটি নিচে দেখানো হয়েছে। ( hosting বৈশিষ্ট্যটি ইতিমধ্যেই ফাইলে থাকা উচিত।)

firebase.json

{
  // Add this!
  "firestore": {
    "rules": "firestore.rules"
  },
  "hosting": {
    "public": "./public"
  }
}

নিম্নলিখিত কমান্ডটি চালানোর মাধ্যমে Firebase CLI ব্যবহার করে নিরাপত্তা নিয়ম স্থাপন করুন:

firebase deploy --only firestore

আপনার কমান্ড লাইন নিম্নলিখিত প্রতিক্রিয়া প্রদর্শন করা উচিত:

=== Deploying to 'friendlychat-1234'...

i  deploying firestore
i  firestore: checking firestore.rules for compilation errors...
✔  firestore: rules file firestore.rules compiled successfully
i  firestore: uploading rules firestore.rules...
✔  firestore: released rules firestore.rules to cloud.firestore

✔  Deploy complete!

Project Console: https://console.firebase.google.com/project/friendlychat-1234/overview

13. ক্লাউড স্টোরেজ নিরাপত্তা নিয়ম

ক্লাউড স্টোরেজ নিরাপত্তা নিয়ম দেখুন

ফায়ারবেসের জন্য ক্লাউড স্টোরেজ অ্যাক্সেসের অধিকার, নিরাপত্তা এবং ডেটা যাচাইকরণের জন্য একটি নির্দিষ্ট নিয়মের ভাষা ব্যবহার করে।

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

rules_version = '2';

service firebase.storage {
  match /b/{bucket}/o {
    match /{allPaths=**} {
      allow read, write: if request.auth != null;
    }
  }
}

নিম্নলিখিতগুলি করার জন্য আমরা নিয়মগুলি আপডেট করব:

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

এটি নিম্নলিখিত নিয়মগুলি ব্যবহার করে প্রয়োগ করা যেতে পারে:

স্টোরেজ.নিয়ম

rules_version = '2';

// Returns true if the uploaded file is an image and its size is below the given number of MB.
function isImageBelowMaxSize(maxSizeMB) {
  return request.resource.size < maxSizeMB * 1024 * 1024
      && request.resource.contentType.matches('image/.*');
}

service firebase.storage {
  match /b/{bucket}/o {
    match /{userId}/{messageId}/{fileName} {
      allow write: if request.auth != null && request.auth.uid == userId && isImageBelowMaxSize(5);
      allow read;
    }
  }
}

ক্লাউড স্টোরেজ নিরাপত্তা নিয়ম আপডেট করুন

আপনার স্টোরেজ নিরাপত্তা নিয়মগুলি সম্পাদনা করার দুটি উপায় রয়েছে: হয় Firebase কনসোলে অথবা Firebase CLI ব্যবহার করে স্থাপন করা স্থানীয় নিয়ম ফাইল থেকে।

Firebase কনসোলে নিরাপত্তা নিয়ম আপডেট করতে:

বাম প্যানেল থেকে স্টোরেজ বিভাগে যান এবং তারপরে নিয়ম ট্যাবে ক্লিক করুন।
উপরে দেখানো নিয়মের সাথে কনসোলে থাকা ডিফল্ট নিয়মটি প্রতিস্থাপন করুন।
প্রকাশ করুন ক্লিক করুন.

একটি স্থানীয় ফাইল থেকে নিরাপত্তা নিয়ম আপডেট করতে:

web-start ডিরেক্টরি থেকে, storage.rules খুলুন।
ডিফল্ট নিয়মগুলিকে প্রতিস্থাপন করুন যা ইতিমধ্যেই ফাইলে রয়েছে উপরে দেখানো নিয়মগুলি দিয়ে।
web-start ডিরেক্টরি থেকে, firebase.json খুলুন।
storage.rules অ্যাট্রিবিউট যোগ করুন storage.rules ফাইলের দিকে নির্দেশ করে, যেমনটি নীচে দেখানো হয়েছে। ( hosting এবং database বৈশিষ্ট্য ইতিমধ্যেই ফাইলে থাকা উচিত।)

firebase.json

{
  // If you went through the "Cloud Firestore Security Rules" step.
  "firestore": {
    "rules": "firestore.rules"
  },
  // Add this!
  "storage": {
    "rules": "storage.rules"
  },
  "hosting": {
    "public": "./public"
  }
}

নিম্নলিখিত কমান্ডটি চালানোর মাধ্যমে Firebase CLI ব্যবহার করে নিরাপত্তা নিয়ম স্থাপন করুন:

firebase deploy --only storage

আপনার কমান্ড লাইন নিম্নলিখিত প্রতিক্রিয়া প্রদর্শন করা উচিত:

=== Deploying to 'friendlychat-1234'...

i  deploying storage
i  storage: checking storage.rules for compilation errors...
✔  storage: rules file storage.rules compiled successfully
i  storage: uploading rules storage.rules...
✔  storage: released rules storage.rules to firebase.storage/friendlychat-1234.appspot.com

✔  Deploy complete!

Project Console: https://console.firebase.google.com/project/friendlychat-1234/overview

14. কর্মক্ষমতা তথ্য সংগ্রহ করুন

আপনি আপনার অ্যাপ থেকে বাস্তব-বিশ্বের কর্মক্ষমতা ডেটা সংগ্রহ করতে পারফরম্যান্স মনিটরিং SDK ব্যবহার করতে পারেন এবং তারপর Firebase কনসোলে সেই ডেটা পর্যালোচনা ও বিশ্লেষণ করতে পারেন। পারফরম্যান্স মনিটরিং আপনাকে বুঝতে সাহায্য করে কোথায় এবং কখন আপনার অ্যাপের কর্মক্ষমতা উন্নত করা যেতে পারে যাতে আপনি সেই তথ্য ব্যবহার করে পারফরম্যান্স সংক্রান্ত সমস্যাগুলি সমাধান করতে পারেন৷

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

স্বয়ংক্রিয় ট্রেস

যেহেতু আমরা ইতিমধ্যে web-start/src/index.js এর শীর্ষে getPerformance আমদানি করেছি, ব্যবহারকারীরা যখন আপনার স্থাপন করা সাইটে যান তখন আপনার জন্য স্বয়ংক্রিয়ভাবে পৃষ্ঠা লোড এবং নেটওয়ার্ক অনুরোধের মেট্রিক্স সংগ্রহ করতে পারফরম্যান্স মনিটরিংকে বলার জন্য আমাদের কেবল একটি লাইন যোগ করতে হবে!

web-start/src/index.js এ, পারফরম্যান্স মনিটরিং শুরু করতে বিদ্যমান TODO নীচে নিম্নলিখিত লাইনটি যোগ করুন।

index.js

// TODO: Enable Firebase Performance Monitoring.
getPerformance();

প্রথম ইনপুট বিলম্ব পরিমাপ করুন (ঐচ্ছিক)

প্রথম ইনপুট বিলম্ব কার্যকর কারণ ব্রাউজার ব্যবহারকারীর ইন্টারঅ্যাকশনে সাড়া দেয় আপনার ব্যবহারকারীদের আপনার অ্যাপের প্রতিক্রিয়াশীলতা সম্পর্কে তাদের প্রথম ইম্প্রেশন দেয়।

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

আপনি যদি প্রথম ইনপুট বিলম্ব পরিমাপ করতে চান, তাহলে আপনাকে সরাসরি নিম্নলিখিত কোডটি অন্তর্ভুক্ত করতে হবে।

public/index.html খুলুন।
নিচের লাইনে script ট্যাগটি আনকমেন্ট করুন।

index.html

<!-- TODO: Enable First Input Delay polyfill library. -->
<script type="text/javascript">!function(n,e){var t,o,i,c=[],f={passive:!0,capture:!0},r=new Date,a="pointerup",u="pointercancel";function p(n,c){t||(t=c,o=n,i=new Date,w(e),s())}function s(){o>=0&&o<i-r&&(c.forEach(function(n){n(o,t)}),c=[])}function l(t){if(t.cancelable){var o=(t.timeStamp>1e12?new Date:performance.now())-t.timeStamp;"pointerdown"==t.type?function(t,o){function i(){p(t,o),r()}function c(){r()}function r(){e(a,i,f),e(u,c,f)}n(a,i,f),n(u,c,f)}(o,t):p(o,t)}}function w(n){["click","mousedown","keydown","touchstart","pointerdown"].forEach(function(e){n(e,l,f)})}w(n),self.perfMetrics=self.perfMetrics||{},self.perfMetrics.onFirstInputDelay=function(n){c.push(n),s()}}(addEventListener,removeEventListener);</script>

প্রথম ইনপুট বিলম্ব পলিফিল সম্পর্কে আরও পড়তে, ডকুমেন্টেশনটি একবার দেখুন।

কর্মক্ষমতা তথ্য দেখুন

যেহেতু আপনি এখনও আপনার সাইট স্থাপন করেননি (আপনি এটি পরবর্তী ধাপে স্থাপন করবেন), এখানে পৃষ্ঠা লোড কর্মক্ষমতা সম্পর্কে মেট্রিক্স দেখানো একটি স্ক্রিনশট রয়েছে যা ব্যবহারকারীরা আপনার স্থাপন করা সাইটের সাথে ইন্টারঅ্যাক্ট করার 30 মিনিটের মধ্যে আপনি Firebase কনসোলে দেখতে পাবেন :

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

আপনি আপনার অ্যাপের নির্দিষ্ট দিকগুলি পরিমাপ করতে কাস্টম ট্রেস, মেট্রিক্স এবং বৈশিষ্ট্যগুলিও সেট আপ করতে পারেন৷ কাস্টম ট্রেস এবং মেট্রিক্স এবং কাস্টম বৈশিষ্ট্য সম্পর্কে আরও জানতে ডকুমেন্টেশন দেখুন।

15. Firebase হোস্টিং ব্যবহার করে আপনার অ্যাপ স্থাপন করুন

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

firebase.json

{
  // If you went through the "Cloud Firestore Security Rules" step.
  "firestore": {
    "rules": "firestore.rules"
  },
  // If you went through the "Storage Security Rules" step.
  "storage": {
    "rules": "storage.rules"
  },
  "hosting": {
    "public": "./public"
  }
}

এই সেটিংস CLI কে বলে যে আমরা ./public ডিরেক্টরিতে সমস্ত ফাইল স্থাপন করতে চাই ( "public": "./public" )।

নিশ্চিত করুন যে আপনার কমান্ড লাইন আপনার অ্যাপের স্থানীয় web-start ডিরেক্টরি অ্যাক্সেস করছে।
নিম্নলিখিত কমান্ডটি চালিয়ে আপনার ফায়ারবেস প্রকল্পে আপনার ফাইলগুলি স্থাপন করুন:

firebase deploy --except functions

কনসোল নিম্নলিখিত প্রদর্শন করা উচিত:

=== Deploying to 'friendlychat-1234'...

i  deploying firestore, storage, hosting
i  storage: checking storage.rules for compilation errors...
✔  storage: rules file storage.rules compiled successfully
i  firestore: checking firestore.rules for compilation errors...
✔  firestore: rules file firestore.rules compiled successfully
i  storage: uploading rules storage.rules...
i  firestore: uploading rules firestore.rules...
i  hosting[friendlychat-1234]: beginning deploy...
i  hosting[friendlychat-1234]: found 8 files in ./public
✔  hosting[friendlychat-1234]: file upload complete
✔  storage: released rules storage.rules to firebase.storage/friendlychat-1234.appspot.com
✔  firestore: released rules firestore.rules to cloud.firestore
i  hosting[friendlychat-1234]: finalizing version...
✔  hosting[friendlychat-1234]: version finalized
i  hosting[friendlychat-1234]: releasing new version...
✔  hosting[friendlychat-1234]: release complete

✔  Deploy complete!

Project Console: https://console.firebase.google.com/project/friendlychat-1234/overview
Hosting URL: https://friendlychat-1234.firebaseapp.com

আপনার নিজস্ব দুটি Firebase সাবডোমেনে Firebase হোস্টিং ব্যবহার করে একটি গ্লোবাল CDN-এ সম্পূর্ণরূপে হোস্ট করা আপনার ওয়েব অ্যাপটি দেখুন:

https://<firebase-projectId>.firebaseapp.com
https://<firebase-projectId>.web.app

বিকল্পভাবে, আপনি কমান্ড লাইনে firebase open hosting:site চালাতে পারেন।

ফায়ারবেস হোস্টিং কীভাবে কাজ করে সে সম্পর্কে আরও জানতে ডকুমেন্টেশন দেখুন।

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

16. অভিনন্দন!

আপনি একটি রিয়েল-টাইম চ্যাট ওয়েব অ্যাপ্লিকেশন তৈরি করতে Firebase ব্যবহার করেছেন!

আমরা কভার করেছি কি

ফায়ারবেস প্রমাণীকরণ
ক্লাউড ফায়ারস্টোর
ক্লাউড স্টোরেজের জন্য Firebase SDK
ফায়ারবেস ক্লাউড মেসেজিং
ফায়ারবেস পারফরম্যান্স মনিটরিং
ফায়ারবেস হোস্টিং

পরবর্তী পদক্ষেপ

Learn more

firebase.google.com

ফায়ারবেস ওয়েব কোডল্যাব

1। সংক্ষিপ্ত বিবরণ

আপনি কি শিখবেন

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

2. নমুনা কোড পান

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

3. একটি ফায়ারবেস প্রকল্প তৈরি এবং সেট আপ করুন৷

একটি ফায়ারবেস প্রকল্প তৈরি করুন

প্রকল্পে একটি Firebase ওয়েব অ্যাপ যোগ করুন

Firebase প্রমাণীকরণের জন্য Google সাইন-ইন সক্ষম করুন

ক্লাউড ফায়ারস্টোর সক্ষম করুন

ক্লাউড স্টোরেজ সক্ষম করুন

4. Firebase কমান্ড-লাইন ইন্টারফেস ইনস্টল করুন

5. স্থানীয়ভাবে স্টার্টার অ্যাপ চালান

6. Firebase আমদানি এবং কনফিগার করুন

Firebase SDK আমদানি করুন

Firebase SDK ইনস্টল করুন এবং আপনার Webpack বিল্ড শুরু করুন

Firebase কনফিগার করুন

7. ব্যবহারকারী সাইন-ইন সেট আপ করুন৷

Google সাইন-ইন দিয়ে আপনার ব্যবহারকারীদের প্রমাণীকরণ করুন

প্রমাণীকরণ অবস্থা ট্র্যাক করুন

সাইন ইন করা ব্যবহারকারীর তথ্য প্রদর্শন করুন

অ্যাপে সাইন ইন করার পরীক্ষা করুন

8. ক্লাউড ফায়ারস্টোরে বার্তা লিখুন

তথ্য মডেল

ক্লাউড ফায়ারস্টোরে বার্তা যোগ করুন

বার্তা পাঠানোর পরীক্ষা করুন

9. বার্তা পড়ুন

বার্তা সিঙ্ক্রোনাইজ করুন

সিঙ্ক্রোনাইজিং বার্তা পরীক্ষা করুন

10. ছবি পাঠান

ক্লাউড স্টোরেজে ছবি সংরক্ষণ করুন

ইমেজ পাঠানো পরীক্ষা

11. বিজ্ঞপ্তি দেখান

FCM পরিষেবা কর্মী যোগ করুন

FCM ডিভাইস টোকেন পান

বিজ্ঞপ্তি দেখানোর জন্য অনুমতির অনুরোধ করুন

আপনার ডিভাইস টোকেন পান

আপনার ডিভাইসে একটি বিজ্ঞপ্তি পাঠান

12. ক্লাউড ফায়ারস্টোর নিরাপত্তা নিয়ম

ডাটাবেস নিরাপত্তা নিয়ম দেখুন

ডাটাবেস নিরাপত্তা নিয়ম আপডেট করুন

13. ক্লাউড স্টোরেজ নিরাপত্তা নিয়ম

ক্লাউড স্টোরেজ নিরাপত্তা নিয়ম দেখুন

ক্লাউড স্টোরেজ নিরাপত্তা নিয়ম আপডেট করুন

14. কর্মক্ষমতা তথ্য সংগ্রহ করুন

স্বয়ংক্রিয় ট্রেস

প্রথম ইনপুট বিলম্ব পরিমাপ করুন (ঐচ্ছিক)

কর্মক্ষমতা তথ্য দেখুন

15. Firebase হোস্টিং ব্যবহার করে আপনার অ্যাপ স্থাপন করুন

16. অভিনন্দন!

আমরা কভার করেছি কি

পরবর্তী পদক্ষেপ

Learn more