क्लाउड मैसेजिंग और क्लाउड फ़ंक्शंस का उपयोग करके वेब ऐप के लिए सूचनाएं भेजें

1 अवलोकन

इस कोडलैब में, आप सीखेंगे कि चैट ऐप के उपयोगकर्ताओं को सूचनाएं भेजकर चैट वेब ऐप में कार्यक्षमता जोड़ने के लिए फायरबेस के लिए क्लाउड फ़ंक्शंस का उपयोग कैसे करें।

3b1284f5144b54f6.png

आप क्या सीखेंगे

  • Firebase SDK का उपयोग करके Google मेघ कार्य बनाएँ।
  • ऑथेंटिकेशन, क्लाउड स्टोरेज और क्लाउड फायरस्टोर इवेंट्स पर आधारित ट्रिगर क्लाउड फ़ंक्शंस।
  • अपने वेब ऐप में फायरबेस क्लाउड मैसेजिंग सपोर्ट जोड़ें।

आपको किस चीज़ की ज़रूरत पड़ेगी

  • एक क्रेडिट कार्ड। फायरबेस के लिए क्लाउड फ़ंक्शंस के लिए फायरबेस ब्लेज़ योजना की आवश्यकता होती है, जिसका अर्थ है कि आपको क्रेडिट कार्ड का उपयोग करके अपने फायरबेस प्रोजेक्ट पर बिलिंग सक्षम करनी होगी।
  • आपकी पसंद का IDE/पाठ संपादक जैसे WebStorm , Atom या Sublime ।
  • NodeJS v9 स्थापित के साथ शेल कमांड चलाने के लिए एक टर्मिनल।
  • क्रोम जैसा ब्राउज़र।
  • नमूना कोड। इसके लिए अगला स्टेप देखें।

2. नमूना कोड प्राप्त करें

कमांड लाइन से GitHub रिपॉजिटरी को क्लोन करें:

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

स्टार्टर ऐप आयात करें

अपने आईडीई का उपयोग करके, खोलें या आयात करें android_studio_folder.png नमूना कोड निर्देशिका से cloud-functions-start निर्देशिका। इस निर्देशिका में कोडलैब के लिए शुरुआती कोड शामिल है जिसमें पूरी तरह कार्यात्मक चैट वेब ऐप शामिल है।

3. एक फायरबेस प्रोजेक्ट बनाएं और अपना ऐप सेट करें

प्रोजेक्ट बनाएं

फायरबेस कंसोल में, ऐड प्रोजेक्ट पर क्लिक करें और इसे फ्रेंडलीचैट कहें।

प्रोजेक्ट बनाएं पर क्लिक करें।

ब्लेज़ योजना में अपग्रेड करें

फायरबेस के लिए क्लाउड फ़ंक्शंस का उपयोग करने के लिए, आपको अपने फायरबेस प्रोजेक्ट को ब्लेज़ बिलिंग योजना में अपग्रेड करना होगा। इसके लिए आपको अपने Google क्लाउड खाते में एक क्रेडिट कार्ड या अन्य बिलिंग साधन जोड़ने की आवश्यकता होगी।

ब्लेज़ योजना सहित सभी फायरबेस परियोजनाओं के पास अभी भी क्लाउड फ़ंक्शंस के लिए निःशुल्क उपयोग कोटा तक पहुंच है। इस कोडलैब में बताए गए कदम फ्री टियर के उपयोग की सीमा के भीतर आएंगे। हालाँकि, आपको क्लाउड स्टोरेज से छोटे शुल्क ( लगभग $0.03 ) दिखाई देंगे, जिसका उपयोग आपके क्लाउड फ़ंक्शंस बिल्ड छवियों को होस्ट करने के लिए किया जाता है।

यदि आपके पास क्रेडिट कार्ड तक पहुंच नहीं है या ब्लेज़ योजना को जारी रखने में असहज हैं, तो फायरबेस एमुलेटर सूट का उपयोग करने पर विचार करें जो आपको अपने स्थानीय मशीन पर मुफ्त में क्लाउड फ़ंक्शंस का अनुकरण करने की अनुमति देगा।

Google प्रमाणीकरण सक्षम करें

उपयोगकर्ताओं को ऐप में साइन-इन करने देने के लिए, हम Google प्रमाणीकरण का उपयोग करेंगे, जिसे सक्षम करने की आवश्यकता है।

फायरबेस कंसोल में, बिल्ड सेक्शन> ऑथेंटिकेशन > साइन-इन मेथड टैब खोलें (या वहां जाने के लिए यहां क्लिक करें )। फिर, Google साइन-इन प्रदाता को सक्षम करें और सहेजें पर क्लिक करें। इससे उपयोगकर्ता अपने Google खातों से वेब ऐप में साइन इन कर सकेंगे.

साथ ही, अपने ऐप के सार्वजनिक रूप से दिखने वाले नाम को फ़्रेंडली चैट पर सेट करने में संकोच न करें:

8290061806aacb46.png

क्लाउड स्टोरेज सक्षम करें

ऐप चित्र अपलोड करने के लिए क्लाउड स्टोरेज का उपयोग करता है। अपने फायरबेस प्रोजेक्ट पर क्लाउड स्टोरेज को सक्षम करने के लिए, स्टोरेज सेक्शन पर जाएँ और गेट स्टार्ट बटन पर क्लिक करें। वहां के चरणों से गुजरें, और क्लाउड स्टोरेज स्थान के लिए, उपयोग करने के लिए एक डिफ़ॉल्ट मान होगा। बाद में हो गया पर क्लिक करें।

एक वेब ऐप जोड़ें

फायरबेस कंसोल पर, एक वेब ऐप जोड़ें। ऐसा करने के लिए, प्रोजेक्ट सेटिंग पर जाएं और ऐप जोड़ें के लिए नीचे स्क्रॉल करें। प्लेटफ़ॉर्म के रूप में वेब चुनें और फायरबेस होस्टिंग सेट करने के लिए बॉक्स को चेक करें, फिर ऐप को पंजीकृत करें और शेष चरणों के लिए नेक्स्ट पर क्लिक करें, अंत में कंटिन्यू टू कंसोल पर क्लिक करें।

4. फायरबेस कमांड लाइन इंटरफेस स्थापित करें

फायरबेस कमांड लाइन इंटरफेस (सीएलआई) आपको स्थानीय रूप से वेब ऐप की सेवा करने और अपने वेब ऐप और क्लाउड फ़ंक्शंस को तैनात करने की अनुमति देगा।

CLI को स्थापित या अपग्रेड करने के लिए निम्न npm कमांड चलाएँ:

npm -g install firebase-tools

यह सत्यापित करने के लिए कि CLI सही तरीके से स्थापित किया गया है, एक कंसोल खोलें और चलाएँ:

firebase --version

सुनिश्चित करें कि फायरबेस सीएलआई का संस्करण 4.0.0 से ऊपर है ताकि इसमें क्लाउड फ़ंक्शंस के लिए आवश्यक सभी नवीनतम सुविधाएँ हों। यदि नहीं, तो ऊपर दिखाए अनुसार अपग्रेड करने के लिए npm install -g firebase-tools चलाएँ।

चलाकर फायरबेस सीएलआई को अधिकृत करें:

firebase login

सुनिश्चित करें कि आप cloud-functions-start डायरेक्टरी में हैं, फिर अपने फायरबेस प्रोजेक्ट का उपयोग करने के लिए फायरबेस सीएलआई सेट करें:

firebase use --add

इसके बाद, अपनी प्रोजेक्ट आईडी चुनें और निर्देशों का पालन करें। संकेत दिए जाने पर, आप कोई भी उपनाम चुन सकते हैं, जैसे codelab ।

5. वेब ऐप को तैनात करें और चलाएं

अब जब आपने अपना प्रोजेक्ट आयात और कॉन्फ़िगर कर लिया है, तो आप पहली बार वेब ऐप चलाने के लिए तैयार हैं! एक टर्मिनल विंडो खोलें, cloud-functions-start फ़ोल्डर में नेविगेट करें, और वेब ऐप को फायरबेस होस्टिंग पर तैनात करें:

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://<प्रोजेक्ट-आईडी>.firebaseapp.com के रूप में होना चाहिए। खोलो इसे। आपको चैट ऐप का कार्यशील UI देखना चाहिए।

साइन- इन विथ GOOGLE बटन का उपयोग करके ऐप में साइन- इन करें और बेझिझक कुछ संदेश जोड़ें और चित्र पोस्ट करें:

3b1284f5144b54f6.png

यदि आप किसी नए ब्राउज़र पर पहली बार ऐप में साइन-इन करते हैं, तो सुनिश्चित करें कि आपने संकेत दिए जाने पर नोटिफिकेशन की अनुमति दी है: 8b9d0c66dc36153d.png

हमें बाद में सूचनाएं सक्षम करने की आवश्यकता होगी।

अगर आपने गलती से ब्लॉक पर क्लिक कर दिया है, तो आप क्रोम ऑम्निबार में यूआरएल के बाईं ओर 🔒 सिक्योर बटन पर क्लिक करके और नोटिफिकेशन के बगल में बार को टॉगल करके इस सेटिंग को बदल सकते हैं:

e926868b0546ed71.png

अब, हम क्लाउड फ़ंक्शंस के लिए Firebase SDK का उपयोग करके कुछ कार्यात्मकता जोड़ेंगे।

6. कार्य निर्देशिका

क्लाउड फ़ंक्शंस आपको आसानी से कोड प्राप्त करने की अनुमति देता है जो बिना सर्वर सेटअप किए क्लाउड में चलता है। हम Firebase Auth, Cloud Storage, और Firebase Firestore डेटाबेस ईवेंट पर प्रतिक्रिया करने वाले फ़ंक्शन बनाने का तरीका जानेंगे। आइए प्रमाणीकरण से शुरू करें।

क्लाउड फ़ंक्शंस के लिए फायरबेस एसडीके का उपयोग करते समय, आपका फ़ंक्शन कोड 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 फाइल पर:

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 सूचनाएं भेजना।

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 क्लाउड प्लेटफ़ॉर्म कंटेनरों पर तैनात किए जाने पर फायरबेस एडमिन एसडीके को स्वचालित रूप से कॉन्फ़िगर किया जा सकता है, और ऐसा तब होता है जब हम बिना किसी तर्क के admin.initializeApp() को कॉल करते हैं।

अब, एक ऐसा फंक्शन जोड़ते हैं जो तब चलता है जब कोई उपयोगकर्ता पहली बार चैट ऐप में साइन इन करता है, और हम उपयोगकर्ता का स्वागत करने के लिए एक चैट संदेश जोड़ेंगे।

8. नए उपयोगकर्ताओं का स्वागत करें

चैट संदेशों की संरचना

फ्रेंडलीचैट चैट फीड पर पोस्ट किए गए संदेश क्लाउड फायरस्टोर में संग्रहीत किए जाते हैं। आइए एक संदेश के लिए उपयोग की जाने वाली डेटा संरचना पर एक नज़र डालें। ऐसा करने के लिए, चैट में एक नया संदेश पोस्ट करें जिसमें "हैलो वर्ल्ड" लिखा हो:

11f5a676fbb1a69a.png

यह इस तरह दिखना चाहिए:

fe6d1c020d0744cf.png

फायरबेस कंसोल में, बिल्ड सेक्शन के तहत फायरस्टोर डेटाबेस पर क्लिक करें। आपको संदेश संग्रह और आपके द्वारा लिखे गए संदेश वाले एक दस्तावेज़ को देखना चाहिए:

442c9c10b5e2b245.png

जैसा कि आप देख सकते हैं, चैट संदेशों को क्लाउड फायरस्टोर में name , profilePicUrl , text और timestamp विशेषताओं के साथ messages संग्रह में जोड़े गए दस्तावेज़ के रूप में संग्रहीत किया जाता है।

स्वागत संदेश जोड़ना

पहला क्लाउड फ़ंक्शन एक संदेश जोड़ता है जो चैट में नए उपयोगकर्ताओं का स्वागत करता है। इसके लिए, हम ट्रिगर functions.auth().onCreate उपयोग कर सकते हैं, जो फायरबेस ऐप में पहली बार उपयोगकर्ता द्वारा साइन-इन करने पर हर बार फ़ंक्शन चलाता है। addWelcomeMessages फ़ंक्शन को अपनी index.js फ़ाइल में जोड़ें:

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 वस्तु में जोड़ना नोड का तरीका है जिससे वर्तमान फ़ाइल के बाहर फ़ंक्शन को एक्सेस किया जा सकता है और क्लाउड फ़ंक्शंस के लिए आवश्यक है।

उपरोक्त समारोह में, हम चैट संदेशों की सूची में "फायरबेस बॉट" द्वारा पोस्ट किया गया एक नया स्वागत संदेश जोड़ रहे हैं। हम क्लाउड फायरस्टोर में 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. एक नए उपयोगकर्ता के साथ, साइन इन बटन का उपयोग करके अपने ऐप में पहली बार साइन इन करें।
  • यदि आप पहले से ही ऐप में साइन इन हैं, तो आप फायरबेस कंसोल ऑथेंटिकेशन खोल सकते हैं और अपने खाते को उपयोगकर्ताओं की सूची से हटा सकते हैं। फिर, दोबारा साइन इन करें.

262535d1b1223c65.png

  1. साइन इन करने के बाद, एक स्वागत योग्य संदेश अपने आप प्रदर्शित होना चाहिए:

1c70e0d64b23525b.png

9. इमेज मॉडरेशन

उपयोगकर्ता चैट में सभी प्रकार की छवियों को अपलोड कर सकते हैं, और आपत्तिजनक छवियों को मॉडरेट करना हमेशा महत्वपूर्ण होता है, विशेष रूप से सार्वजनिक सामाजिक प्लेटफार्मों में। FriendlyChat में, चैट में प्रकाशित की जा रही छवियों को Google क्लाउड स्टोरेज में संग्रहीत किया जाता है।

क्लाउड फ़ंक्शंस के साथ, आप functions.storage().onFinalize ट्रिगर का उपयोग करके नए छवि अपलोड का पता लगा सकते हैं। क्लाउड स्टोरेज में हर बार एक नई फ़ाइल अपलोड या संशोधित होने पर यह चलेगा।

छवियों को मॉडरेट करने के लिए, हम निम्नलिखित प्रक्रिया से गुजरेंगे:

  1. क्लाउड विज़न API का उपयोग करके देखें कि छवि को वयस्क या हिंसक के रूप में फ़्लैग किया गया है या नहीं।
  2. अगर छवि को फ़्लैग किया गया है, तो इसे चल रहे फ़ंक्शंस इंस्टेंस पर डाउनलोड करें।
  3. ImageMagick का उपयोग करके छवि को धुंधला करें।
  4. धुंधली छवि को क्लाउड स्टोरेज पर अपलोड करें।

क्लाउड विजन एपीआई को सक्षम करें

चूंकि हम इस फ़ंक्शन में Google क्लाउड विज़न एपीआई का उपयोग करेंगे, इसलिए आपको अपने फायरबेस प्रोजेक्ट पर एपीआई को सक्षम करना होगा। इस लिंक का अनुसरण करें, फिर अपना Firebase प्रोजेक्ट चुनें और API सक्षम करें:

5c77fee51ec5de49.png

निर्भरताएँ स्थापित करें

छवियों को मॉडरेट करने के लिए, हम अनुचित छवियों का पता लगाने के लिए क्लाउड विज़न एपीआई के माध्यम से छवियों को चलाने के लिए 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 Cloud Functions ट्रिगर का उपयोग कर रहे होंगे, जो क्लाउड स्टोरेज बकेट में कोई फ़ाइल या फ़ोल्डर बनते या संशोधित होते ही आपका कोड चला देता है। अपनी 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 मेमोरी मिले, क्योंकि यह फ़ंक्शन मेमोरी इंटेंसिव है।

जब फ़ंक्शन चालू हो जाता है, तो छवि को क्लाउड विज़न एपीआई के माध्यम से चलाया जाता है ताकि यह पता लगाया जा सके कि यह वयस्क या हिंसक के रूप में फ़्लैग किया गया है या नहीं। यदि इन मानदंडों के आधार पर छवि को अनुपयुक्त पाया जाता है, तो हम छवि को धुंधला कर रहे हैं, जो कि 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. अपलोड करने के लिए अपनी सबसे अच्छी आक्रामक छवि चुनें (या आप इस मांस खाने वाले ज़ोंबी का उपयोग कर सकते हैं!) और कुछ पलों के बाद, आपको अपनी पोस्ट को छवि के धुंधले संस्करण के साथ ताज़ा होते देखना चाहिए: 83dd904fbaf97d2b.png

10. नई संदेश सूचनाएं

इस खंड में, आप एक क्लाउड फ़ंक्शन जोड़ेंगे जो चैट के प्रतिभागियों को एक नया संदेश पोस्ट किए जाने पर सूचनाएं भेजता है।

फायरबेस क्लाउड मैसेजिंग (FCM) का उपयोग करके, आप प्लेटफ़ॉर्म पर उपयोगकर्ताओं को मज़बूती से सूचनाएं भेज सकते हैं। किसी उपयोगकर्ता को सूचना भेजने के लिए, आपको उनके FCM डिवाइस टोकन की आवश्यकता होगी। हम जिस चैट वेब ऐप का उपयोग कर रहे हैं, वह पहले से ही उपयोगकर्ताओं से डिवाइस टोकन एकत्र करता है, जब वे पहली बार किसी नए ब्राउज़र या डिवाइस पर ऐप खोलते हैं। ये टोकन fcmTokens संग्रह में Cloud Firestore में संग्रहीत हैं।

यदि आप सीखना चाहते हैं कि वेब ऐप पर FCM डिवाइस टोकन कैसे प्राप्त करें, तो आप Firebase वेब कोडलैब के माध्यम से जा सकते हैं।

सूचनाएं भेजें

यह पता लगाने के लिए कि नए संदेश कब पोस्ट किए जाते हैं, आप functions.firestore.document().onCreate Cloud Functions ट्रिगर का उपयोग करेंगे, जो Cloud Firestore के दिए गए पथ पर एक नया ऑब्जेक्ट बनाए जाने पर आपका कोड चलाता है। sendNotifications फ़ंक्शन को अपनी index.js फ़ाइल में जोड़ें:

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 का उपयोग किया है और चैट ऐप में सर्वर-साइड घटक जोड़े हैं।

हमने क्या कवर किया है

  • क्लाउड फ़ंक्शंस के लिए फायरबेस एसडीके का उपयोग करके क्लाउड फ़ंक्शंस को संलेखित करना।
  • ऑथेंटिकेशन, क्लाउड स्टोरेज और क्लाउड फायरस्टोर इवेंट्स पर आधारित ट्रिगर क्लाउड फ़ंक्शंस।
  • अपने वेब ऐप में फायरबेस क्लाउड मैसेजिंग सपोर्ट जोड़ें।
  • फायरबेस सीएलआई का उपयोग करके क्लाउड फ़ंक्शंस को परिनियोजित करें।

अगले कदम

और अधिक जानें