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

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

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

3b1284f5144b54f6.png

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

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

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

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

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

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

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

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

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

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

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

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

  1. সাইন ইন করুন Firebase
  2. Firebase কনসোলে, প্রকল্প জুড়ুন এ ক্লিক করুন, এবং তারপর আপনার Firebase প্রকল্পের FriendlyChat নাম দিন। আপনার ফায়ারবেস প্রকল্পের জন্য প্রজেক্ট আইডি মনে রাখবেন।
  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

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

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

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

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

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

62f1afdcd1260127.png

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

1d7f49ebaddb32fc.png

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

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

  1. নিম্নলিখিত npm কমান্ডটি চালিয়ে CLI ইনস্টল করুন:
npm -g install firebase-tools
  1. নিম্নলিখিত কমান্ডটি চালিয়ে সিএলআই সঠিকভাবে ইনস্টল করা হয়েছে তা যাচাই করুন:
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. আপনার কমান্ড লাইনে অবশিষ্ট নির্দেশাবলী অনুসরণ করুন।

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

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

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

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

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

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

4c23f9475228cef4.png

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

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

6. ফায়ারবেস আমদানি এবং কনফিগার করুন

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-এর সেই অংশগুলিই আমদানি করছেন যা আপনার প্রয়োজন।

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

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

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

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

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

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

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

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

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

অ্যাপ্লিকেশন, একটি ব্যবহারকারী ক্লিক করা হলে সাইন ইন গুগল বোতাম দিয়ে সালে signIn ফাংশন সূত্রপাত হয়। (আমরা ইতিমধ্যেই এটি আপনার জন্য সেট আপ করেছি!) এই কোডল্যাবের জন্য, আমরা ফায়ারবেসকে 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. সাইন-ইন বোতাম এবং আপনার Google অ্যাকাউন্ট ব্যবহার করে অ্যাপে সাইন ইন করুন। আপনি দেখতে একটি ত্রুটির বার্তা জানায় তাহলে auth/operation-not-allowed চেক নিশ্চিত করতে যে আপনার সক্ষমিত Google সাইন-ইন Firebase কনসোলে একটি প্রমাণীকরণ প্রদানকারী হিসাবে।
  3. সাইন ইন করার পরে, আপনার প্রোফাইল ছবি এবং ব্যবহারকারীর নাম প্রদর্শিত হবে: c7401b3d44d0d78b.png

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

এই বিভাগে, আমরা ক্লাউড ফায়ারস্টোরে কিছু ডেটা লিখব যাতে আমরা অ্যাপের 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

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

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

অ্যাপে বার্তাগুলি পড়ার জন্য, আমাদের এমন শ্রোতাদের যোগ করতে হবে যা ডেটা পরিবর্তন হলে ট্রিগার করে এবং তারপরে একটি 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. আপনি ডাটাবেসে আগে যে বার্তাগুলি তৈরি করেছেন তা FriendlyChat UI-তে প্রদর্শিত হওয়া উচিত (নীচে দেখুন)। নতুন বার্তা লিখতে নির্দ্বিধায়; তারা অবিলম্বে উপস্থিত করা উচিত.
  3. (ঐচ্ছিক) আপনি নিজে, মুছে ফেলা পরিবর্তন, বা Firebase কনসোলের ডাটাবেস বিভাগে সরাসরি নতুন বার্তা যোগ করার চেষ্টা করতে পারেন; কোনো পরিবর্তন UI এ প্রতিফলিত হওয়া উচিত।

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

2168dec79b573d07.png

10. ছবি পাঠান

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

যদিও ক্লাউড ফায়ারস্টোর স্ট্রাকচার্ড ডেটা সংরক্ষণের জন্য ভাল, ক্লাউড স্টোরেজ ফাইলগুলি সংরক্ষণের জন্য আরও উপযুক্ত। 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

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

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

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

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

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

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

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 ফাংশন। এর যেখানে আমরা 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. "পরীক্ষা" ক্লিক করুন

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

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

de79e8638a45864c.png

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

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

ক্লাউড 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;
    }
  }
}

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

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

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

  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

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

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

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

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

  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

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

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

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

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

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

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

index.js

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

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

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

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

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

  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 সংহত করেন, আপনার অ্যাপটি স্বয়ংক্রিয়ভাবে কর্মক্ষমতার বিভিন্ন গুরুত্বপূর্ণ দিক নিরীক্ষণ শুরু করার আগে আপনাকে অন্য কোনো কোড লিখতে হবে না। ওয়েব অ্যাপ্লিকেশানগুলির জন্য, 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" )।

  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. আপনার নিজস্ব দুটি Firebase সাবডোমেনে Firebase হোস্টিং ব্যবহার করে একটি গ্লোবাল CDN-এ সম্পূর্ণরূপে হোস্ট করা আপনার ওয়েব অ্যাপটি দেখুন:
  • https://<firebase-projectId>.firebaseapp.com
  • https://<firebase-projectId>.web.app

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

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

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

16. অভিনন্দন!

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

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

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

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

আরও জানুন