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

1. ওভারভিউ

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

3b1284f5144b54f6.png

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

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

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

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

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

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

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

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

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

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

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

Firebase কনসোলে , Add Project এ ক্লিক করুন এবং এটিকে FriendlyChat বলুন।

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

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

Firebase-এর জন্য ক্লাউড ফাংশন এবং Firebase-এর জন্য ক্লাউড স্টোরেজ ব্যবহার করতে, আপনার Firebase প্রজেক্টকে পে-অ্যাজ-ইউ গো (Blaze) প্রাইসিং প্ল্যানে থাকতে হবে, যার মানে এটি একটি ক্লাউড বিলিং অ্যাকাউন্টের সাথে লিঙ্ক করা আছে।

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

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

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

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

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

Google Auth সক্ষম করুন

ব্যবহারকারীদের অ্যাপে সাইন-ইন করতে দেওয়ার জন্য, আমরা Google auth ব্যবহার করব যা সক্রিয় করা প্রয়োজন।

Firebase কনসোলে, বিল্ড বিভাগ > প্রমাণীকরণ > সাইন-ইন পদ্ধতি ট্যাব খুলুন (বা সেখানে যেতে এখানে ক্লিক করুন )। তারপর, Google সাইন-ইন প্রদানকারী সক্ষম করুন এবং সংরক্ষণ করুন ক্লিক করুন৷ এটি ব্যবহারকারীদের তাদের Google অ্যাকাউন্ট দিয়ে ওয়েব অ্যাপে সাইন ইন করার অনুমতি দেবে।

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

8290061806aacb46.png

ফায়ারবেসের জন্য ক্লাউড স্টোরেজ সেট আপ করুন

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

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

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

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

Firebase কনসোলে, একটি ওয়েব অ্যাপ যোগ করুন। এটি করতে, প্রজেক্ট সেটিংসে যান এবং অ্যাপ যোগ করুন -এ নিচে স্ক্রোল করুন। প্ল্যাটফর্ম হিসাবে ওয়েব বেছে নিন এবং Firebase হোস্টিং সেট আপ করার জন্য বাক্সটি চেক করুন, তারপরে অ্যাপটি নিবন্ধন করুন এবং বাকি ধাপগুলির জন্য পরবর্তীতে ক্লিক করুন, শেষে Continue to console- এ ক্লিক করুন৷

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

ফায়ারবেস কমান্ড লাইন ইন্টারফেস (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 CLI সেট আপ করুন:

firebase use --add

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

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

এখন আপনি আপনার প্রকল্প আমদানি এবং কনফিগার করেছেন, আপনি প্রথমবারের জন্য ওয়েব অ্যাপ চালানোর জন্য প্রস্তুত! একটি টার্মিনাল উইন্ডো খুলুন, 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 দেখতে হবে।

GOOGLE বোতাম ব্যবহার করে অ্যাপে সাইন-ইন করুন এবং কিছু বার্তা যোগ করুন এবং ছবি পোস্ট করুন:

3b1284f5144b54f6.png

আপনি যদি একটি নতুন ব্রাউজারে প্রথমবার অ্যাপে সাইন-ইন করেন, প্রম্পট করা হলে আপনি বিজ্ঞপ্তির অনুমতি দেন তা নিশ্চিত করুন: 8b9d0c66dc36153d.png

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

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

e926868b0546ed71.png

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

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

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

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

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

cd functions
ls

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

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

npm install

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

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-এর জায়গায় তিনটি ফাংশন লিখব। আসুন প্রয়োজনীয় নোড মডিউল আমদানি করে শুরু করি।

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

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

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

index.js

/**
 * 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.

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

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

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

চ্যাট বার্তা গঠন

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

11f5a676fbb1a69a.png

এই হিসাবে প্রদর্শিত হবে:

fe6d1c020d0744cf.png

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

442c9c10b5e2b245.png

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

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

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

index.js

// 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 কনসোল প্রমাণীকরণ খুলতে পারেন এবং ব্যবহারকারীদের তালিকা থেকে আপনার অ্যাকাউন্ট মুছে ফেলতে পারেন। তারপর, আবার সাইন ইন করুন.

262535d1b1223c65.png

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

1c70e0d64b23525b.png

9. ছবি সংযম

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

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

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

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

Cloud Vision API সক্ষম করুন

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

5c77fee51ec5de49.png

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

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

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

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

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

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

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

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

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

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

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

index.js

// 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 ফাংশন যোগ করুন:

index.js

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

উপরের ফাংশনে, ইমেজ বাইনারি ক্লাউড স্টোরেজ থেকে ডাউনলোড করা হয়। তারপর ImageMagick-এর 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. একবার অ্যাপে সাইন ইন করলে, একটি ছবি আপলোড করুন: 4db9fdab56703e4a.png
  3. আপলোড করার জন্য আপনার সেরা আপত্তিকর ছবি বেছে নিন (অথবা আপনি Zombie খাওয়ার এই মাংস ব্যবহার করতে পারেন!) এবং কয়েক মুহূর্ত পরে, আপনি ছবিটির একটি অস্পষ্ট সংস্করণ সহ আপনার পোস্ট রিফ্রেশ দেখতে পাবেন: 83dd904fbaf97d2b.png

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

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

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

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

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

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

index.js

// 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 ফাংশন যোগ করুন:

index.js 

// 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. আপনি যদি প্রথমবার অ্যাপে সাইন-ইন করেন, প্রম্পট করা হলে আপনি বিজ্ঞপ্তির অনুমতি দেন তা নিশ্চিত করুন: 8b9d0c66dc36153d.png
  3. চ্যাট অ্যাপ ট্যাবটি বন্ধ করুন বা একটি ভিন্ন ট্যাব প্রদর্শন করুন: অ্যাপটি ব্যাকগ্রাউন্ডে থাকলেই বিজ্ঞপ্তিগুলি উপস্থিত হয়৷ আপনি যদি আপনার অ্যাপ ফোরগ্রাউন্ডে থাকাকালীন বার্তাগুলি কীভাবে গ্রহণ করবেন তা শিখতে চান তবে আমাদের ডকুমেন্টেশনটি দেখুন৷
  4. একটি ভিন্ন ব্রাউজার (বা একটি ছদ্মবেশী উইন্ডো) ব্যবহার করে, অ্যাপে সাইন ইন করুন এবং একটি বার্তা পোস্ট করুন৷ আপনি প্রথম ব্রাউজার দ্বারা প্রদর্শিত একটি বিজ্ঞপ্তি দেখতে হবে: 45282ab12b28b926.png

11. অভিনন্দন!

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

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

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

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

আরও জানুন