ক্লাউড মেসেজিং এবং ক্লাউড ফাংশন ব্যবহার করে একটি ওয়েব অ্যাপের জন্য বিজ্ঞপ্তি পাঠান

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

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

তুমি কি শিখবে

• Firebase SDK ব্যবহার করে Google ক্লাউড ফাংশন তৈরি করুন।
• Auth, Cloud Storage, এবং Cloud Firestore ইভেন্টের উপর ভিত্তি করে ক্লাউড ফাংশন ট্রিগার করুন।
• আপনার ওয়েব অ্যাপে Firebase ক্লাউড মেসেজিং সাপোর্ট যোগ করুন।

তোমার যা লাগবে

• একটি ক্রেডিট কার্ড। Firebase-এর জন্য Cloud Functions-এর জন্য Firebase Blaze প্ল্যানের প্রয়োজন, যার অর্থ হল আপনাকে ক্রেডিট কার্ড ব্যবহার করে আপনার Firebase প্রকল্পে বিলিং সক্ষম করতে হবে।
• আপনার পছন্দের IDE/টেক্সট এডিটর যেমন WebStorm , Atom অথবা Sublime ।
• NodeJS v9 ইনস্টল করে শেল কমান্ড চালানোর জন্য একটি টার্মিনাল।
• ক্রোমের মতো একটি ব্রাউজার।
• নমুনা কোড। এর জন্য পরবর্তী ধাপ দেখুন।

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

কমান্ড লাইন থেকে GitHub রিপোজিটরি ক্লোন করুন:

git clone https://github.com/firebase/friendlychat

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

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

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

প্রকল্প তৈরি করুন

1. আপনার গুগল অ্যাকাউন্ট ব্যবহার করে ফায়ারবেস কনসোলে সাইন ইন করুন।
2. একটি নতুন প্রকল্প তৈরি করতে বোতামটি ক্লিক করুন, এবং তারপর একটি প্রকল্পের নাম লিখুন (উদাহরণস্বরূপ, FriendlyChat )।
   
3. চালিয়ে যান ক্লিক করুন।
4. যদি অনুরোধ করা হয়, তাহলে Firebase শর্তাবলী পর্যালোচনা করুন এবং গ্রহণ করুন, এবং তারপর Continue এ ক্লিক করুন।
5. (ঐচ্ছিক) Firebase কনসোলে ("Gemini in Firebase" নামে পরিচিত) AI সহায়তা সক্ষম করুন।
6. এই কোডল্যাবের জন্য, আপনার গুগল অ্যানালিটিক্সের প্রয়োজন নেই , তাই গুগল অ্যানালিটিক্স বিকল্পটি টগল করে বন্ধ করে দিন ।
7. Create project এ ক্লিক করুন, আপনার province করার জন্য অপেক্ষা করুন, এবং তারপর Continue এ ক্লিক করুন।

ব্লেজ প্ল্যানে আপগ্রেড করুন

Firebase-এর জন্য Cloud Functions এবং Firebase-এর জন্য Cloud Storage ব্যবহার করার জন্য, আপনার Firebase প্রকল্পটি pay-as-you go (Blaze) মূল্য পরিকল্পনায় থাকা প্রয়োজন, যার অর্থ এটি একটি Cloud Billing অ্যাকাউন্টের সাথে লিঙ্ক করা আছে।

• একটি ক্লাউড বিলিং অ্যাকাউন্টের জন্য একটি পেমেন্ট পদ্ধতি প্রয়োজন, যেমন একটি ক্রেডিট কার্ড।
• আপনি যদি Firebase এবং Google Cloud-এ নতুন হন, তাহলে $300 ক্রেডিট এবং একটি বিনামূল্যে ট্রায়াল ক্লাউড বিলিং অ্যাকাউন্টের জন্য যোগ্য কিনা তা পরীক্ষা করে দেখুন।
• যদি আপনি কোনও ইভেন্টের অংশ হিসেবে এই কোডল্যাবটি করেন, তাহলে আপনার আয়োজককে জিজ্ঞাসা করুন যে কোনও ক্লাউড ক্রেডিট উপলব্ধ আছে কিনা।

যদি আপনার ক্রেডিট কার্ড অ্যাক্সেস না থাকে অথবা ব্লেজ প্রাইসিং প্ল্যানটি চালিয়ে যেতে অস্বস্তিকর হন, তাহলে Firebase Emulator Suite ব্যবহার করার কথা বিবেচনা করুন যা আপনাকে আপনার স্থানীয় মেশিনে বিনামূল্যে ক্লাউড ফাংশন অনুকরণ করতে দেবে।

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

আপনার প্রকল্পটিকে ব্লেজ প্ল্যানে আপগ্রেড করতে, এই পদক্ষেপগুলি অনুসরণ করুন:

1. Firebase কনসোলে, আপনার প্ল্যান আপগ্রেড করতে নির্বাচন করুন।
2. ব্লেজ প্ল্যানটি নির্বাচন করুন। আপনার প্রকল্পের সাথে একটি ক্লাউড বিলিং অ্যাকাউন্ট লিঙ্ক করতে অন-স্ক্রিন নির্দেশাবলী অনুসরণ করুন।
   এই আপগ্রেডের অংশ হিসেবে যদি আপনার একটি ক্লাউড বিলিং অ্যাকাউন্ট তৈরি করার প্রয়োজন হয়, তাহলে আপগ্রেড সম্পূর্ণ করার জন্য আপনাকে Firebase কনসোলে আপগ্রেড ফ্লোতে ফিরে যেতে হতে পারে।

Google Auth সক্ষম করুন

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

Firebase Console-এ, Build বিভাগ > Authentication > Sign-in method ট্যাব খুলুন (অথবা সেখানে যেতে এখানে ক্লিক করুন )। তারপর, Google Sign-in Provider সক্ষম করুন এবং Save এ ক্লিক করুন। এটি ব্যবহারকারীদের তাদের Google অ্যাকাউন্ট দিয়ে ওয়েব অ্যাপে সাইন ইন করার অনুমতি দেবে।

এছাড়াও, আপনার অ্যাপের পাবলিক ফেসিং নামটি Friendly Chat এ সেট করতে দ্বিধা করবেন না:

Firebase এর জন্য ক্লাউড স্টোরেজ সেট আপ করুন

অ্যাপটি ছবি আপলোড করার জন্য ক্লাউড স্টোরেজ ব্যবহার করে।

আপনার Firebase প্রকল্পে Firebase এর জন্য ক্লাউড স্টোরেজ কীভাবে সেট আপ করবেন তা এখানে দেওয়া হল:

1. Firebase কনসোলের বাম প্যানেলে, Build প্রসারিত করুন এবং তারপর Storage নির্বাচন করুন।
2. শুরু করুন ক্লিক করুন।
3. আপনার ডিফল্ট স্টোরেজ বাকেটের জন্য একটি অবস্থান নির্বাচন করুন।
   US-WEST1 , US-CENTRAL1 , এবং US-EAST1 এর বাকেটগুলি Google ক্লাউড স্টোরেজের জন্য "সর্বদা বিনামূল্যে" স্তরের সুবিধা নিতে পারে। অন্যান্য সমস্ত অবস্থানের বাকেটগুলি Google ক্লাউড স্টোরেজের মূল্য এবং ব্যবহার অনুসরণ করে।
4. পরীক্ষা মোডে শুরু করুন ক্লিক করুন। নিরাপত্তা নিয়ম সম্পর্কে দাবিত্যাগ পড়ুন।
   আপনার স্টোরেজ বাকেটের জন্য নিরাপত্তা নিয়ম যোগ না করে কোনও অ্যাপ সর্বজনীনভাবে বিতরণ বা প্রকাশ করবেন না ।
5. তৈরি করুন ক্লিক করুন।

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

Firebase Console-এ, একটি ওয়েব অ্যাপ যোগ করুন। এটি করার জন্য, Project Settings- এ যান এবং Add app- এ স্ক্রোল করুন। প্ল্যাটফর্ম হিসেবে web বেছে নিন এবং Firebase Hosting সেট আপ করার জন্য বক্সে টিক চিহ্ন দিন, তারপর অ্যাপটি নিবন্ধন করুন এবং বাকি ধাপগুলির জন্য Next-এ ক্লিক করুন, সবশেষে Continue to console- এ ক্লিক করুন।

৪. ফায়ারবেস কমান্ড লাইন ইন্টারফেস ইনস্টল করুন

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

CLI ইনস্টল বা আপগ্রেড করতে নিম্নলিখিত npm কমান্ডটি চালান:

npm -g install firebase-tools

CLI সঠিকভাবে ইনস্টল করা হয়েছে কিনা তা যাচাই করতে, একটি কনসোল খুলুন এবং চালান:

firebase --version

নিশ্চিত করুন যে Firebase CLI এর সংস্করণটি 4.0.0 এর উপরে আছে যাতে এতে ক্লাউড ফাংশনের জন্য প্রয়োজনীয় সমস্ত সর্বশেষ বৈশিষ্ট্য রয়েছে। যদি না হয়, তাহলে উপরে দেখানো হিসাবে আপগ্রেড করতে npm install -g firebase-tools চালান।

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

firebase login

নিশ্চিত করুন যে আপনি cloud-functions-start ডিরেক্টরিতে আছেন, তারপর আপনার Firebase Project ব্যবহার করার জন্য Firebase CLI সেট আপ করুন:

firebase use --add

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

৫. ওয়েব অ্যাপ স্থাপন এবং চালান

এখন আপনি আপনার প্রকল্পটি আমদানি এবং কনফিগার করেছেন, আপনি প্রথমবারের মতো ওয়েব অ্যাপটি চালানোর জন্য প্রস্তুত! একটি টার্মিনাল উইন্ডো খুলুন, cloud-functions-start ফোল্ডারে নেভিগেট করুন এবং নিম্নলিখিতটি ব্যবহার করে Firebase হোস্টিংয়ে ওয়েব অ্যাপটি স্থাপন করুন:

firebase deploy --except functions

এটি কনসোলের আউটপুট যা আপনার দেখা উচিত:

i deploying database, storage, hosting
✔  database: rules ready to deploy.
i  storage: checking rules for compilation errors...
✔  storage: rules file compiled successfully
i  hosting: preparing ./ directory for upload...
✔  hosting: ./ folder uploaded successfully
✔ storage: rules file compiled successfully
✔ hosting: 8 files uploaded successfully
i starting release process (may take several minutes)...

✔ Deploy complete!

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

ওয়েব অ্যাপটি খুলুন

শেষ লাইনে হোস্টিং URL প্রদর্শিত হওয়া উচিত। ওয়েব অ্যাপটি এখন এই URL থেকে পরিবেশিত হওয়া উচিত, যা https://<project-id>.firebaseapp.com আকারে হওয়া উচিত। এটি খুলুন। আপনি একটি চ্যাট অ্যাপের কার্যকরী UI দেখতে পাবেন।

"SIGN-IN WITH GOOGLE" বোতামটি ব্যবহার করে অ্যাপটিতে সাইন-ইন করুন এবং কিছু বার্তা এবং ছবি পোস্ট করতে দ্বিধা করবেন না:

যদি আপনি প্রথমবারের মতো নতুন ব্রাউজারে অ্যাপটিতে সাইন-ইন করেন, তাহলে প্রম্পট করার সময় বিজ্ঞপ্তিগুলি মঞ্জুর করুন:

আমাদের পরবর্তী সময়ে বিজ্ঞপ্তিগুলি সক্ষম করতে হবে।

যদি আপনি ভুলবশত Block এ ক্লিক করে থাকেন, তাহলে Chrome Omnibar-এ URL এর বাম দিকে 🔒 Secure বোতামে ক্লিক করে এবং Notifications এর পাশের বারটি টগল করে আপনি এই সেটিংটি পরিবর্তন করতে পারেন:

এখন, আমরা ক্লাউড ফাংশনের জন্য Firebase SDK ব্যবহার করে কিছু কার্যকারিতা যোগ করব।

৬. ফাংশন ডিরেক্টরি

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

ক্লাউড ফাংশনের জন্য Firebase SDK ব্যবহার করার সময়, আপনার ফাংশন কোডটি functions ডিরেক্টরির অধীনে থাকবে (ডিফল্টরূপে)। আপনার ফাংশন কোডটিও একটি Node.js অ্যাপ এবং তাই একটি package.json প্রয়োজন যা আপনার অ্যাপ সম্পর্কে কিছু তথ্য দেয় এবং নির্ভরতা তালিকাভুক্ত করে।

আপনার কাজটি সহজ করার জন্য, আমরা ইতিমধ্যেই functions/index.js ফাইল তৈরি করেছি যেখানে আপনার কোডটি যাবে। এগিয়ে যাওয়ার আগে এই ফাইলটি পরীক্ষা করে দেখতে দ্বিধা করবেন না।

cd functions
ls

আপনি যদি Node.js এর সাথে পরিচিত না হন, তাহলে কোডল্যাব চালিয়ে যাওয়ার আগে এটি সম্পর্কে আরও জেনে নেওয়া সহায়ক হবে।

package.json ফাইলটিতে ইতিমধ্যেই দুটি প্রয়োজনীয় নির্ভরতা তালিকাভুক্ত করা হয়েছে: ক্লাউড ফাংশনের জন্য Firebase SDK এবং Firebase Admin SDK । স্থানীয়ভাবে ইনস্টল করতে, functions ফোল্ডারে যান এবং চালান:

npm install

এবার index.js ফাইলটি একবার দেখে নেওয়া যাক:

ইনডেক্স.জেএস

/**
 * Copyright 2017 Google Inc. All Rights Reserved.
 * ...
 */

// TODO(DEVELOPER): Import the Cloud Functions for Firebase and the Firebase Admin modules here.

// TODO(DEVELOPER): Write the addWelcomeMessage Function here.

// TODO(DEVELOPER): Write the blurImages Function here.

// TODO(DEVELOPER): Write the sendNotification Function here.

আমরা প্রয়োজনীয় মডিউলগুলো ইমপোর্ট করব এবং তারপর TODO-এর জায়গায় তিনটি Functions লিখব। প্রয়োজনীয় Node মডিউলগুলো ইমপোর্ট করে শুরু করা যাক।

৭. ক্লাউড ফাংশন এবং ফায়ারবেস অ্যাডমিন মডিউল আমদানি করুন

এই কোডল্যাব চলাকালীন দুটি মডিউলের প্রয়োজন হবে: firebase-functions ক্লাউড ফাংশন ট্রিগার এবং লগ লেখা সক্ষম করে যখন firebase-admin ক্লাউড ফায়ারস্টোরে লেখা বা FCM বিজ্ঞপ্তি পাঠানোর মতো কাজ করার জন্য অ্যাডমিন অ্যাক্সেস সহ সার্ভারে Firebase প্ল্যাটফর্ম ব্যবহার সক্ষম করে।

index.js ফাইলে, প্রথম TODO নিম্নলিখিত দিয়ে প্রতিস্থাপন করুন:

ইনডেক্স.জেএস

/**
 * Copyright 2017 Google Inc. All Rights Reserved.
 * ...
 */

// Import the Firebase SDK for Google Cloud Functions.
const functions = require('firebase-functions');
// Import and initialize the Firebase Admin SDK.
const admin = require('firebase-admin');
admin.initializeApp();

// TODO(DEVELOPER): Write the addWelcomeMessage Function here.

// TODO(DEVELOPER): Write the blurImages Function here.

// TODO(DEVELOPER): Write the sendNotification Function here.

ক্লাউড ফাংশন পরিবেশ বা অন্যান্য গুগল ক্লাউড প্ল্যাটফর্ম কন্টেইনারে স্থাপন করা হলে ফায়ারবেস অ্যাডমিন SDK স্বয়ংক্রিয়ভাবে কনফিগার করা যেতে পারে এবং এটি তখন ঘটে যখন আমরা কোনও আর্গুমেন্ট ছাড়াই admin.initializeApp() কল করি।

এখন, চ্যাট অ্যাপে ব্যবহারকারী প্রথমবার সাইন ইন করলে যে ফাংশনটি কাজ করে তা যোগ করা যাক, এবং আমরা ব্যবহারকারীকে স্বাগত জানাতে একটি চ্যাট বার্তা যোগ করব।

৮. নতুন ব্যবহারকারীদের স্বাগতম

চ্যাট মেসেজের কাঠামো

FriendlyChat চ্যাট ফিডে পোস্ট করা বার্তাগুলি ক্লাউড ফায়ারস্টোরে সংরক্ষণ করা হয়। আসুন আমরা বার্তার জন্য যে ডেটা স্ট্রাকচার ব্যবহার করি তা একবার দেখে নেওয়া যাক। এটি করার জন্য, চ্যাটে "হ্যালো ওয়ার্ল্ড" লেখা একটি নতুন বার্তা পোস্ট করুন:

এটি এইভাবে দেখা উচিত:

Firebase Console-এ, Build বিভাগের অধীনে Firestore Database- এ ক্লিক করুন। আপনি বার্তা সংগ্রহ এবং আপনার লেখা বার্তা সম্বলিত একটি নথি দেখতে পাবেন:

আপনি দেখতে পাচ্ছেন, চ্যাট বার্তাগুলি ক্লাউড ফায়ারস্টোরে একটি ডকুমেন্ট হিসাবে সংরক্ষণ করা হয় যার name , profilePicUrl , text , এবং timestamp বৈশিষ্ট্যগুলি messages সংগ্রহে যোগ করা হয়।

স্বাগত বার্তা যোগ করা হচ্ছে

প্রথম ক্লাউড ফাংশনটি একটি বার্তা যোগ করে যা নতুন ব্যবহারকারীদের চ্যাটে স্বাগত জানায়। এর জন্য, আমরা ট্রিগার functions.auth().onCreate ব্যবহার করতে পারি, যা Firebase অ্যাপে প্রথমবার সাইন-ইন করার সময় প্রতিবার ফাংশনটি চালায়। আপনার index.js ফাইলে addWelcomeMessages ফাংশনটি যোগ করুন:

ইনডেক্স.জেএস

// Adds a message that welcomes new users into the chat.
exports.addWelcomeMessages = functions.auth.user().onCreate(async (user) => {
  functions.logger.log('A new user signed in for the first time.');
  const fullName = user.displayName || 'Anonymous';

  // Saves the new welcome message into the database
  // which then displays it in the FriendlyChat clients.
  await admin.firestore().collection('messages').add({
    name: 'Firebase Bot',
    profilePicUrl: '/images/firebase-logo.png', // Firebase logo
    text: `${fullName} signed in for the first time! Welcome!`,
    timestamp: admin.firestore.FieldValue.serverTimestamp(),
  });
  functions.logger.log('Welcome message written to database.');
});

স্পেশাল exports অবজেক্টে এই ফাংশনটি যোগ করা হল বর্তমান ফাইলের বাইরে ফাংশনটিকে অ্যাক্সেসযোগ্য করে তোলার জন্য নোডের একটি উপায় এবং ক্লাউড ফাংশনের জন্য এটি প্রয়োজনীয়।

উপরের ফাংশনে, আমরা চ্যাট বার্তাগুলির তালিকায় "Firebase Bot" দ্বারা পোস্ট করা একটি নতুন স্বাগত বার্তা যুক্ত করছি। আমরা ক্লাউড ফায়ারস্টোরের messages সংগ্রহে add পদ্ধতি ব্যবহার করে এটি করছি, যেখানে চ্যাটের বার্তাগুলি সংরক্ষণ করা হয়।

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

ক্লাউড ফাংশন স্থাপন করুন

ক্লাউড ফাংশনগুলি স্থাপন করার পরেই সক্রিয় হবে। এটি করার জন্য, কমান্ড লাইনে এটি চালান:

firebase deploy --only functions

এটি কনসোলের আউটপুট যা আপনার দেখা উচিত:

i  deploying functions
i  functions: ensuring necessary APIs are enabled...
⚠  functions: missing necessary APIs. Enabling now...
i  env: ensuring necessary APIs are enabled...
⚠  env: missing necessary APIs. Enabling now...
i  functions: waiting for APIs to activate...
i  env: waiting for APIs to activate...
✔  env: all necessary APIs are enabled
✔  functions: all necessary APIs are enabled
i  functions: preparing functions directory for uploading...
i  functions: packaged functions (X.XX KB) for uploading
✔  functions: functions folder uploaded successfully
i  starting release process (may take several minutes)...
i  functions: creating function addWelcomeMessages...
✔  functions[addWelcomeMessages]: Successful create operation. 
✔  functions: all functions deployed successfully!

✔  Deploy complete!

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

ফাংশনটি পরীক্ষা করুন

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

1. হোস্টিং URL ব্যবহার করে আপনার ব্রাউজারে আপনার অ্যাপটি খুলুন ( https://<project-id>.firebaseapp.com আকারে)।
2. নতুন ব্যবহারকারীর সাথে, সাইন ইন বোতামটি ব্যবহার করে আপনার অ্যাপে প্রথমবারের মতো সাইন ইন করুন।

• যদি আপনি ইতিমধ্যেই অ্যাপটিতে সাইন ইন করে থাকেন, তাহলে আপনি Firebase Console Authentication খুলতে পারেন এবং ব্যবহারকারীদের তালিকা থেকে আপনার অ্যাকাউন্টটি মুছে ফেলতে পারেন। তারপর, আবার সাইন ইন করুন।

3. সাইন ইন করার পরে, একটি স্বাগত বার্তা স্বয়ংক্রিয়ভাবে প্রদর্শিত হবে:

৯. ছবি সংযম

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

ক্লাউড ফাংশনের সাহায্যে, আপনি functions.storage().onFinalize ট্রিগার ব্যবহার করে নতুন ছবি আপলোড সনাক্ত করতে পারবেন। ক্লাউড স্টোরেজে প্রতিবার নতুন ফাইল আপলোড বা পরিবর্তন করার সময় এটি চলবে।

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

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

ক্লাউড ভিশন এপিআই সক্ষম করুন

যেহেতু আমরা এই ফাংশনে গুগল ক্লাউড ভিশন এপিআই ব্যবহার করব, তাই আপনার ফায়ারবেস প্রজেক্টে এপিআই সক্রিয় করতে হবে। এই লিঙ্কটি অনুসরণ করুন, তারপর আপনার ফায়ারবেস প্রজেক্টটি নির্বাচন করুন এবং এপিআই সক্রিয় করুন:

নির্ভরতা ইনস্টল করুন

ছবি মডারেট করার জন্য, আমরা Node.js-এর জন্য Google Cloud Vision ক্লায়েন্ট লাইব্রেরি, @google-cloud/vision ব্যবহার করব, যাতে Cloud Vision API-এর মাধ্যমে ছবি চালানো যায় এবং অনুপযুক্ত ছবি শনাক্ত করা যায়।

আপনার ক্লাউড ফাংশন অ্যাপে এই প্যাকেজটি ইনস্টল করতে, নিম্নলিখিত npm install --save কমান্ডটি চালান। নিশ্চিত করুন যে আপনি এটি functions ডিরেক্টরি থেকে করছেন।

npm install --save @google-cloud/vision@2.4.0

এটি স্থানীয়ভাবে প্যাকেজটি ইনস্টল করবে এবং আপনার package.json ফাইলে ঘোষিত নির্ভরতা হিসাবে যুক্ত করবে।

নির্ভরতা আমদানি এবং কনফিগার করুন

এই বিভাগে আমাদের যে নির্ভরতাগুলি ইনস্টল করা হয়েছিল এবং কিছু Node.js কোর মডিউল ( path , os এবং fs ) প্রয়োজন হবে তা আমদানি করতে, আপনার index.js ফাইলের উপরে নিম্নলিখিত লাইনগুলি যুক্ত করুন:

ইনডেক্স.জেএস

const Vision = require('@google-cloud/vision');
const vision = new Vision.ImageAnnotatorClient();
const {promisify} = require('util');
const exec = promisify(require('child_process').exec);

const path = require('path');
const os = require('os');
const fs = require('fs');

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

অনুপযুক্ত ছবি সনাক্ত করা হচ্ছে

আপনি functions.storage.onChange Cloud Functions ট্রিগার ব্যবহার করবেন, যা Cloud Storage বাকেটে কোনও ফাইল বা ফোল্ডার তৈরি বা পরিবর্তন করার সাথে সাথে আপনার কোডটি চালায়। আপনার index.js ফাইলে blurOffensiveImages ফাংশনটি যোগ করুন:

ইনডেক্স.জেএস

// Checks if uploaded images are flagged as Adult or Violence and if so blurs them.
exports.blurOffensiveImages = functions.runWith({memory: '2GB'}).storage.object().onFinalize(
    async (object) => {
      const imageUri = `gs://${object.bucket}/${object.name}`;
      // Check the image content using the Cloud Vision API.
      const batchAnnotateImagesResponse = await vision.safeSearchDetection(imageUri);
      const safeSearchResult = batchAnnotateImagesResponse[0].safeSearchAnnotation;
      const Likelihood = Vision.protos.google.cloud.vision.v1.Likelihood;
      if (Likelihood[safeSearchResult.adult] >= Likelihood.LIKELY ||
          Likelihood[safeSearchResult.violence] >= Likelihood.LIKELY) {
        functions.logger.log('The image', object.name, 'has been detected as inappropriate.');
        return blurImage(object.name);
      }
      functions.logger.log('The image', object.name, 'has been detected as OK.');
    });

মনে রাখবেন যে আমরা ক্লাউড ফাংশন ইনস্ট্যান্সের কিছু কনফিগারেশন যোগ করেছি যা ফাংশনটি চালাবে। .runWith({memory: '2GB'}) এর সাথে, আমরা অনুরোধ করছি যে ইনস্ট্যান্সটি ডিফল্টের পরিবর্তে 2GB মেমরি পাবে, কারণ এই ফাংশনটি মেমরি-ঘন।

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

ছবি ঝাপসা করা হচ্ছে

আপনার index.js ফাইলে নিম্নলিখিত blurImage ফাংশনটি যোগ করুন:

ইনডেক্স.জেএস

// Blurs the given image located in the given bucket using ImageMagick.
async function blurImage(filePath) {
  const tempLocalFile = path.join(os.tmpdir(), path.basename(filePath));
  const messageId = filePath.split(path.sep)[1];
  const bucket = admin.storage().bucket();

  // Download file from bucket.
  await bucket.file(filePath).download({destination: tempLocalFile});
  functions.logger.log('Image has been downloaded to', tempLocalFile);
  // Blur the image using ImageMagick.
  await exec(`convert "${tempLocalFile}" -channel RGBA -blur 0x24 "${tempLocalFile}"`);
  functions.logger.log('Image has been blurred');
  // Uploading the Blurred image back into the bucket.
  await bucket.upload(tempLocalFile, {destination: filePath});
  functions.logger.log('Blurred image has been uploaded to', filePath);
  // Deleting the local file to free up disk space.
  fs.unlinkSync(tempLocalFile);
  functions.logger.log('Deleted local file.');
  // Indicate that the message has been moderated.
  await admin.firestore().collection('messages').doc(messageId).update({moderated: true});
  functions.logger.log('Marked the image as moderated in the database.');
}

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

ফাংশনটি স্থাপন করুন

ফাংশনটি স্থাপন করার পরেই সক্রিয় হবে। কমান্ড লাইনে, firebase deploy --only functions চালান:

firebase deploy --only functions

এটি কনসোলের আউটপুট যা আপনার দেখা উচিত:

i  deploying functions
i  functions: ensuring necessary APIs are enabled...
✔  functions: all necessary APIs are enabled
i  functions: preparing functions directory for uploading...
i  functions: packaged functions (X.XX KB) for uploading
✔  functions: functions folder uploaded successfully
i  starting release process (may take several minutes)...
i  functions: updating function addWelcomeMessages...
i  functions: creating function blurOffensiveImages...
✔  functions[addWelcomeMessages]: Successful update operation.
✔  functions[blurOffensiveImages]: Successful create operation.
✔  functions: all functions deployed successfully!

✔  Deploy complete!

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

ফাংশনটি পরীক্ষা করুন

ফাংশনটি সফলভাবে স্থাপন করা হয়ে গেলে:

1. হোস্টিং URL ব্যবহার করে আপনার ব্রাউজারে আপনার অ্যাপটি খুলুন ( https://<project-id>.firebaseapp.com আকারে)।
2. অ্যাপে সাইন ইন করার পর, একটি ছবি আপলোড করুন:
3. আপলোড করার জন্য আপনার সেরা আপত্তিকর ছবিটি বেছে নিন (অথবা আপনি এই মাংসখেকো জম্বি ব্যবহার করতে পারেন!) এবং কিছুক্ষণ পরে, আপনার পোস্টটি ছবির একটি ঝাপসা সংস্করণ সহ রিফ্রেশ দেখতে পাবেন:

১০. নতুন বার্তা বিজ্ঞপ্তি

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

Firebase Cloud Messaging (FCM) ব্যবহার করে, আপনি নির্ভরযোগ্যভাবে বিভিন্ন প্ল্যাটফর্মের ব্যবহারকারীদের কাছে বিজ্ঞপ্তি পাঠাতে পারেন। কোনও ব্যবহারকারীকে বিজ্ঞপ্তি পাঠাতে, আপনার তাদের FCM ডিভাইস টোকেন প্রয়োজন। আমরা যে চ্যাট ওয়েব অ্যাপটি ব্যবহার করছি তা ব্যবহারকারীরা যখন প্রথমবারের মতো কোনও নতুন ব্রাউজার বা ডিভাইসে অ্যাপটি খোলেন তখন থেকেই তাদের কাছ থেকে ডিভাইস টোকেন সংগ্রহ করে। এই টোকেনগুলি fcmTokens সংগ্রহের ক্লাউড ফায়ারস্টোরে সংরক্ষণ করা হয়।

আপনি যদি ওয়েব অ্যাপে FCM ডিভাইস টোকেন পেতে শিখতে চান, তাহলে আপনি Firebase Web Codelab দেখতে পারেন।

বিজ্ঞপ্তি পাঠান

নতুন বার্তা কখন পোস্ট করা হচ্ছে তা সনাক্ত করতে, আপনাকে functions.firestore.document().onCreate Cloud Functions ট্রিগার ব্যবহার করতে হবে, যা Cloud Firestore-এর একটি নির্দিষ্ট পাথে একটি নতুন অবজেক্ট তৈরি হলে আপনার কোডটি চালায়। আপনার index.js ফাইলে sendNotifications ফাংশনটি যোগ করুন:

ইনডেক্স.জেএস

// Sends a notifications to all users when a new message is posted.
exports.sendNotifications = functions.firestore.document('messages/{messageId}').onCreate(
  async (snapshot) => {
    // Notification details.
    const text = snapshot.data().text;
    const payload = {
      notification: {
        title: `${snapshot.data().name} posted ${text ? 'a message' : 'an image'}`,
        body: text ? (text.length <= 100 ? text : text.substring(0, 97) + '...') : '',
        icon: snapshot.data().profilePicUrl || '/images/profile_placeholder.png',
        click_action: `https://${process.env.GCLOUD_PROJECT}.firebaseapp.com`,
      }
    };

    // Get the list of device tokens.
    const allTokens = await admin.firestore().collection('fcmTokens').get();
    const tokens = [];
    allTokens.forEach((tokenDoc) => {
      tokens.push(tokenDoc.id);
    });

    if (tokens.length > 0) {
      // Send notifications to all tokens.
      const response = await admin.messaging().sendToDevice(tokens, payload);
      await cleanupTokens(response, tokens);
      functions.logger.log('Notifications have been sent and tokens cleaned up.');
    }
  });

উপরের ফাংশনে, আমরা ক্লাউড ফায়ারস্টোর ডাটাবেস থেকে সমস্ত ব্যবহারকারীর ডিভাইস টোকেন সংগ্রহ করছি এবং admin.messaging().sendToDevice ফাংশন ব্যবহার করে প্রতিটি ব্যবহারকারীকে একটি বিজ্ঞপ্তি পাঠাচ্ছি।

টোকেন পরিষ্কার করুন

পরিশেষে, আমরা সেইসব টোকেনগুলি সরিয়ে ফেলতে চাই যেগুলি আর বৈধ নয়। এটি তখন ঘটে যখন ব্যবহারকারীর কাছ থেকে আমরা যে টোকেনটি একবার পেয়েছিলাম তা আর ব্রাউজার বা ডিভাইসে ব্যবহার করা হয় না। উদাহরণস্বরূপ, ব্যবহারকারী যদি ব্রাউজার সেশনের জন্য বিজ্ঞপ্তি অনুমতি প্রত্যাহার করে থাকে তবে এটি ঘটে। এটি করার জন্য, আপনার index.js ফাইলে নিম্নলিখিত cleanupTokens ফাংশনটি যোগ করুন:

ইনডেক্স.জেএস

// Cleans up the tokens that are no longer valid.
function cleanupTokens(response, tokens) {
 // For each notification we check if there was an error.
 const tokensDelete = [];
 response.results.forEach((result, index) => {
   const error = result.error;
   if (error) {
     functions.logger.error('Failure sending notification to', tokens[index], error);
     // Cleanup the tokens that are not registered anymore.
     if (error.code === 'messaging/invalid-registration-token' ||
         error.code === 'messaging/registration-token-not-registered') {
       const deleteTask = admin.firestore().collection('fcmTokens').doc(tokens[index]).delete();
       tokensDelete.push(deleteTask);
     }
   }
 });
 return Promise.all(tokensDelete);
}

ফাংশনটি স্থাপন করুন

ফাংশনটি স্থাপন করার পরেই সক্রিয় হবে এবং এটি স্থাপন করতে, কমান্ড লাইনে এটি চালান:

firebase deploy --only functions

এটি কনসোলের আউটপুট যা আপনার দেখা উচিত:

i  deploying functions
i  functions: ensuring necessary APIs are enabled...
✔  functions: all necessary APIs are enabled
i  functions: preparing functions directory for uploading...
i  functions: packaged functions (X.XX KB) for uploading
✔  functions: functions folder uploaded successfully
i  starting release process (may take several minutes)...
i  functions: updating function addWelcomeMessages...
i  functions: updating function blurOffensiveImages...
i  functions: creating function sendNotifications...
✔  functions[addWelcomeMessages]: Successful update operation.
✔  functions[blurOffensiveImages]: Successful updating operation.
✔  functions[sendNotifications]: Successful create operation.
✔  functions: all functions deployed successfully!

✔  Deploy complete!

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

ফাংশনটি পরীক্ষা করুন

1. ফাংশনটি সফলভাবে স্থাপন করা হয়ে গেলে, হোস্টিং URL ব্যবহার করে আপনার ব্রাউজারে আপনার অ্যাপটি খুলুন ( https://<project-id>.firebaseapp.com আকারে)।
2. আপনি যদি প্রথমবার অ্যাপটিতে সাইন-ইন করেন, তাহলে প্রম্পট করার সময় বিজ্ঞপ্তিগুলি মঞ্জুর করুন:
3. চ্যাট অ্যাপ ট্যাবটি বন্ধ করুন অথবা অন্য একটি ট্যাব প্রদর্শন করুন: অ্যাপটি ব্যাকগ্রাউন্ডে থাকলেই কেবল বিজ্ঞপ্তিগুলি প্রদর্শিত হবে। আপনার অ্যাপটি ফোরগ্রাউন্ডে থাকাকালীন কীভাবে বার্তা গ্রহণ করবেন তা শিখতে চাইলে, আমাদের ডকুমেন্টেশনটি দেখুন।
4. একটি ভিন্ন ব্রাউজার (অথবা একটি ছদ্মবেশী উইন্ডো) ব্যবহার করে, অ্যাপে সাইন ইন করুন এবং একটি বার্তা পোস্ট করুন। আপনি প্রথম ব্রাউজার দ্বারা প্রদর্শিত একটি বিজ্ঞপ্তি দেখতে পাবেন:

১১. অভিনন্দন!

আপনি ক্লাউড ফাংশনের জন্য Firebase SDK ব্যবহার করেছেন এবং একটি চ্যাট অ্যাপে সার্ভার-সাইড উপাদান যোগ করেছেন।

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

• ক্লাউড ফাংশনের জন্য Firebase SDK ব্যবহার করে ক্লাউড ফাংশন লেখা।
• Auth, Cloud Storage, এবং Cloud Firestore ইভেন্টের উপর ভিত্তি করে ক্লাউড ফাংশন ট্রিগার করুন।
• আপনার ওয়েব অ্যাপে Firebase ক্লাউড মেসেজিং সাপোর্ট যোগ করুন।
• Firebase CLI ব্যবহার করে ক্লাউড ফাংশন স্থাপন করুন।

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

• অন্যান্য ক্লাউড ফাংশন ট্রিগার প্রকার সম্পর্কে জানুন।
• আপনার নিজস্ব অ্যাপ দিয়ে ফায়ারবেস এবং ক্লাউড ফাংশন ব্যবহার করুন।

আরও জানুন

• firebase.google.com/docs/functions সম্পর্কে
• firebase.google.com সম্পর্কে