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

এই codelab, আপনি কীভাবে ব্যবহার করবেন তা জানতে পারবেন Firebase সহজে বাস্তবায়ন এবং Firebase পণ্য এবং পরিষেবার ব্যবহার করে একটি চ্যাট ক্লায়েন্ট মোতায়েন করার মাধ্যমে ওয়েব অ্যাপ্লিকেশন তৈরি করতে।

3b1284f5144b54f6.png

আপনি যা শিখবেন

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

আপনার যা লাগবে

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

ক্লোন codelab এর GitHub সংগ্রহস্থলের কম্যান্ড লাইন থেকে:

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

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

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

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

একটি Firebase প্রকল্প তৈরি করুন

  1. সাইন ইন করুন Firebase
  2. Firebase কনসোলে, প্রকল্প জুড়ুন এ ক্লিক করুন, এবং তারপর আপনার Firebase প্রকল্পের FriendlyChat নাম দিন। আপনার Firebase প্রকল্পের জন্য প্রকল্প আইডি মনে রাখবেন।
  3. টিকচিহ্ন তুলে দিন এই প্রকল্পের জন্য Google এনালিটিক্স সক্ষম করুন
  4. প্রকল্প তৈরি করুন ক্লিক করুন।

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

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

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

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

  1. ওয়েব আইকনে ক্লিক করুন 58d6543a156e56f9.png একটি নতুন Firebase ওয়েব অ্যাপ তৈরি করতে।
  2. ডাক নাম বন্ধুত্বপূর্ণ আলাপ দেয়ার মাধ্যমে অ্যাপ্লিকেশান নিবন্ধ করুন, তারপর বক্স এছাড়াও এই app এর জন্য হোস্টিং Firebase সেট আপ পরবর্তী চেক করুন। নিবন্ধন অ্যাপ্লিকেশন ক্লিক করুন।
  3. পরবর্তী ধাপে, আপনি একটি কনফিগারেশন বস্তু দেখতে পাবেন। শুধু জাতীয় বস্তু অনুলিপি (না এইচটিএমএল পার্শ্ববর্তী) মধ্যে firebase-config.js

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

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

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

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

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

d89fb3873b5d36ae.png

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

ওয়েব অ্যাপ্লিকেশন ব্যবহার ক্লাউড Firestore চ্যাট বার্তা সংরক্ষণ করুন এবং নতুন চ্যাট বার্তা প্রাপ্ত সদস্যতা।

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

  1. Firebase কনসোলের বিল্ড বিভাগে, Firestore ডাটাবেস এ ক্লিক করুন।
  2. ক্লাউড Firestore ফলকে ডেটাবেস তৈরি করে ক্লিক করুন।

729991a081e7cd5.png

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

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

77e4986cbeaf9dee.png

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

9f2bb0d4e7ca49c7.png

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

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

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

  1. Firebase কনসোলের বিল্ড বিভাগে, সংগ্রহস্থল ক্লিক করুন।
  2. যদি কোন শুরু বোতামটি পান, এটি এর মানে হল যে মেঘ স্টোরেজ ইতিমধ্যেই সক্ষম আছে, এবং আপনি নীচের পদক্ষেপগুলি অনুসরণ করার প্রয়োজন হবে না।
  3. শুরু করা যাক ক্লিক করুন।
  4. আপনার Firebase প্রকল্পের জন্য নিরাপত্তা নিয়ম সম্পর্কে দাবিত্যাগ পড়ুন, তারপর Next ক্লিক করুন।

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

62f1afdcd1260127.png

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

1d7f49ebaddb32fc.png

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

  1. নিম্নলিখিত npm কমান্ডটি চালানোর মাধ্যমে CLI ইনস্টল করুন:
npm -g install firebase-tools
  1. নিম্নলিখিত কমান্ডটি চালানোর মাধ্যমে CLI সঠিকভাবে ইনস্টল করা হয়েছে তা যাচাই করুন:
firebase --version

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

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

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

  1. নিশ্চিত করুন যে আপনার কমান্ড লাইন আপনার অ্যাপ্লিকেশনের স্থানীয় অ্যাক্সেস করছে করুন web-start ডিরেক্টরি।
  2. নিচের কমান্ডটি চালিয়ে আপনার অ্যাপকে আপনার ফায়ারবেস প্রকল্পের সাথে সংযুক্ত করুন:
firebase use --add
  1. যখন বলা হবে, আপনার প্রকল্প ID নির্বাচন করুন, তারপর আপনার Firebase প্রকল্পের উপনাম দেব।

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

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

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

  1. থেকে একটি কনসোলে web-start ডিরেক্টরি, নিম্নলিখিত Firebase CLI কমান্ড সঞ্চালন করুন:
firebase serve --only hosting
  1. আপনার কমান্ড লাইন নিম্নলিখিত প্রতিক্রিয়া প্রদর্শন করা উচিত:
✔  hosting: Local server: http://localhost:5000

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

  1. আপনার ব্রাউজার ব্যবহার করে, আপনার অ্যাপ্লিকেশানটি খুলুন // স্থানীয় হোস্ট: 5000 HTTP

আপনার ফ্রেন্ডলিচ্যাট অ্যাপের UI দেখতে হবে, যা (এখনো!) কাজ করছে না:

4c23f9475228cef4.png

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

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

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

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

আমরা npm থেকে Firebase SDK এর পেতে এবং ব্যবহার করতে যাচ্ছেন Webpack আমাদের কোড বান্ডেল করতে। আমরা এই কাজটি করছি যাতে ওয়েবপ্যাক যেকোনো অ্যাক্সেসারি কোড মুছে ফেলতে পারে, আমাদের JS বান্ডেলের আকার ছোট রেখে আমাদের অ্যাপ যত দ্রুত সম্ভব লোড হয় তা নিশ্চিত করতে। এই codelab জন্য, আমরা ইতিমধ্যে একটি তৈরি করেছি 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 SDK ইনস্টল করুন এবং আপনার ওয়েবপ্যাক তৈরি শুরু করুন

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

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

ফায়ারবেস কনফিগার করুন

আমরা ফায়ারবেস এসডিকে কনফিগার করতে চাই যে আমরা কোন ফায়ারবেস প্রকল্প ব্যবহার করছি তা জানাতে।

  1. আপনার যান Firebase কনসোলে প্রকল্প সেটিংস
  2. "আপনার অ্যাপস" কার্ডে, অ্যাপটির ডাকনাম নির্বাচন করুন যার জন্য আপনার একটি কনফিগ বস্তু প্রয়োজন।
  3. Firebase SDK স্নিপেট ফলক থেকে "কনফিগ" নির্বাচন করুন।
  4. কনফিগ বস্তুর স্নিপেট অনুলিপি করে নিয়ে তারপরে এটি যোগ 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);

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

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

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

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

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 ব্যবহারকারী ক্লিক করা হলে সাইন আউট বাটন ফাংশন সূত্রপাত হয়।

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

index.js

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

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

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

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

index.js

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

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

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

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

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

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;
}

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

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

index.js

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

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

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

এই বিভাগে, আমরা ক্লাউড ফায়ারস্টোরে কিছু ডেটা লিখব যাতে আমরা অ্যাপের UI তৈরি করতে পারি। এই সঙ্গে ম্যানুয়ালি করা যাবে Firebase কনসোল , কিন্তু আমরা অ্যাপ্লিকেশন নিজেই একটি মৌলিক মেঘ Firestore লেখার প্রকট এটা চেষ্টা করবো।

তথ্য মডেল

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

688d7bc5fb662b57.png

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

চ্যাট বার্তাগুলি যা ব্যবহারকারীদের দ্বারা লেখা হয় সংরক্ষণ করার জন্য, আমরা ব্যবহার করব ক্লাউড Firestore

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

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

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);
  }
}

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

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

6812efe7da395692.png

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

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

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

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

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 সংগ্রহ, যেখানে চ্যাট বার্তা সংরক্ষণ করা হয়। আমরা শুধুমাত্র ব্যবহার গত 12 বার্তাগুলি শুনে একটা সীমা আবেদন করছি .limit(12) এবং ব্যবহার তারিখ অনুসারে বার্তা ক্রম orderBy('timestamp', 'desc') 12 নবীনতম বার্তা পাওয়ার জন্য।

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

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

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

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

2168dec79b573d07.png

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

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

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

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

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

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

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

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);
  }
}

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

  1. যদি আপনার অ্যাপটি এখনও পরিবেশিত হয়, ব্রাউজারে আপনার অ্যাপটি রিফ্রেশ করুন। অন্যথায়, চালানোর firebase serve --only hosting কমান্ড লাইন থেকে অ্যাপ ভজনা শুরু করার জন্য HTTP: // স্থানীয় হোস্ট: 5000 , এবং তারপর আপনার ব্রাউজারে এটি খুলুন।
  2. সাইন ইন করার পর ইমেজ আপলোড বাটনে ক্লিক করুন 13734cb66773e5a3.png এবং ফাইল পিকার ব্যবহার করে একটি ইমেজ ফাইল নির্বাচন করুন। আপনি একটি ইমেজ খুঁজছেন, তাহলে এই বিনা দ্বিধায় ব্যবহার করুন একটি কফি কাপ সুন্দর ছবি
  3. আপনার নির্বাচিত চিত্র সহ অ্যাপের UI- এ একটি নতুন বার্তা উপস্থিত হওয়া উচিত: 3b1284f5144b54f6.png

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

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

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

ওয়েব অ্যাপ্লিকেশন একটি প্রয়োজন সেবা কর্মী যে গ্রহণ ও ডিসপ্লে ওয়েব বিজ্ঞপ্তিগুলি হবে।

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

ফায়ারবেস-মেসেজিং- 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');

পরিষেবা কর্মীকে কেবল ফায়ারবেস ক্লাউড মেসেজিং এসডিকে লোড এবং আরম্ভ করতে হবে, যা বিজ্ঞপ্তি প্রদর্শনের যত্ন নেবে।

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

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

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

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

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() পদ্ধতি, যা একটি ব্রাউজার ডায়ালগ এই অনুমতি চাওয়ার (প্রদর্শন করা হবে সমর্থিত ব্রাউজারে )।

8b9d0c66dc36153d.png

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

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.');
  }
}

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

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

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

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

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

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

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

de79e8638a45864c.png

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

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

এই কোডল্যাবের শুরুতে ফায়ারবেস প্রজেক্ট সেট করার সময়, আমরা "টেস্ট মোড" ডিফল্ট নিরাপত্তা নিয়ম ব্যবহার করতে বেছে নিয়েছি যাতে আমরা ডেটাস্টোরে অ্যাক্সেস সীমাবদ্ধ না করি। ইন 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;
    }
  }
}

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

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

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

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

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

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

firebase.json

{
  // Add this!
  "firestore": {
    "rules": "firestore.rules"
  },
  "hosting": {
    "public": "./public"
  }
}
  1. নিচের কমান্ডটি চালিয়ে Firebase CLI ব্যবহার করে নিরাপত্তা বিধি প্রয়োগ করুন:
firebase deploy --only firestore
  1. আপনার কমান্ড লাইন নিম্নলিখিত প্রতিক্রিয়া প্রদর্শন করা উচিত:
=== 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

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

Firebase জন্য মেঘ সঞ্চয়স্থান একটি নির্দিষ্ট ব্যবহার বিধি ভাষা প্রবেশের অধিকার, নিরাপত্তা, এবং ডেটা যাচাই সংজ্ঞায়িত করতে।

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

rules_version = '2';

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

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

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

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

storage.rules

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 ব্যবহার করে স্থানীয় নিয়ম ফাইল থেকে।

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

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

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

  1. থেকে web-start ডিরেক্টরি, খোলা storage.rules
  2. উপরে দেখানো নিয়মগুলির সাথে ফাইলে থাকা ডিফল্ট নিয়মগুলি প্রতিস্থাপন করুন।
  3. থেকে web-start ডিরেক্টরি, খোলা firebase.json
  4. যোগ 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"
  }
}
  1. নিচের কমান্ডটি চালিয়ে Firebase CLI ব্যবহার করে নিরাপত্তা বিধি প্রয়োগ করুন:
firebase deploy --only storage
  1. আপনার কমান্ড লাইন নিম্নলিখিত প্রতিক্রিয়া প্রদর্শন করা উচিত:
=== 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

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

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

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

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

  1. ইন web-start/src/index.js , বিদ্যমান নিচের লাইন যোগ TODO কর্মক্ষমতা নিরীক্ষণের আরম্ভ করতে।

index.js

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

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

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

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

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

  1. ওপেন public/index.html
  2. Uncomment 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>

প্রথম ইনপুট বিলম্ব polyfill সম্পর্কে আরো পড়তে, কটাক্ষপাত করা ডকুমেন্টেশন

পারফরম্যান্স ডেটা দেখুন

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

29389131150f33d7.png

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

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

Firebase অফার একটি হোস্টিং সার্ভিস আপনার সম্পদ ও ওয়েব অ্যাপস পরিবেশন করা। আপনি Firebase CLI ব্যবহার করে আপনার ফাইলগুলিকে Firebase Hosting এ স্থাপন করতে পারেন। মোতায়েন করার আগে, আপনার মধ্যে নির্দিষ্ট করতে হবে 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" )।

  1. নিশ্চিত করুন যে আপনার কমান্ড লাইন আপনার অ্যাপ্লিকেশনের স্থানীয় অ্যাক্সেস করছে করুন web-start ডিরেক্টরি।
  2. নিচের কমান্ডটি চালিয়ে আপনার ফাইলগুলিকে আপনার ফায়ারবেস প্রকল্পে স্থাপন করুন:
firebase deploy --except functions
  1. কনসোল নিম্নলিখিত প্রদর্শন করা উচিত:
=== 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
  1. আপনার ওয়েব অ্যাপটি পরিদর্শন করুন যা এখন আপনার নিজস্ব ফায়ারবেস সাবডোমেনের দুটিতে ফায়ারবেস হোস্টিং ব্যবহার করে একটি বিশ্বব্যাপী সিডিএন -তে সম্পূর্ণরূপে হোস্ট করা হয়েছে:
  • https://<firebase-projectId>.firebaseapp.com
  • https://<firebase-projectId>.web.app

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

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

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

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

যা আমরা েকে রেখেছি

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

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

আরো জানুন