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

1 अवलोकन

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

3b1284f5144b54f6.png

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

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

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

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

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

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

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

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

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

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

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

सीएलआई को स्थापित या अपग्रेड करने के लिए निम्नलिखित एनपीएम कमांड चलाएँ:

npm -g install firebase-tools

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

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 प्रदर्शित होना चाहिए। वेब ऐप अब इस यूआरएल से परोसा जाना चाहिए, जिसका फॉर्म https://<project-id>.firebaseapp.com होना चाहिए। खोलो इसे। आपको चैट ऐप का कार्यशील यूआई देखना चाहिए।

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

3b1284f5144b54f6.png

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

हमें बाद में सूचनाओं को सक्षम करना होगा।

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

e926868b0546ed71.png

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

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

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

क्लाउड फ़ंक्शंस के लिए फ़ायरबेस एसडीके का उपयोग करते समय, आपका फ़ंक्शंस कोड functions निर्देशिका (डिफ़ॉल्ट रूप से) के अंतर्गत रहेगा। आपका फ़ंक्शंस कोड भी एक Node.js ऐप है और इसलिए उसे एक package.json आवश्यकता है जो आपके ऐप के बारे में कुछ जानकारी देता है और निर्भरताओं को सूचीबद्ध करता है।

आपके लिए इसे आसान बनाने के लिए, हमने पहले से ही functions/index.js फ़ाइल बना ली है जहां आपका कोड जाएगा। आगे बढ़ने से पहले बेझिझक इस फ़ाइल का निरीक्षण करें।

cd functions
ls

यदि आप Node.js से परिचित नहीं हैं, तो कोडलैब जारी रखने से पहले इसके बारे में अधिक सीखना सहायक होगा।

package.json फ़ाइल पहले से ही दो आवश्यक निर्भरताएँ सूचीबद्ध करती है: क्लाउड फ़ंक्शंस के लिए फ़ायरबेस SDK और फ़ायरबेस एडमिन 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 के स्थान पर तीन फ़ंक्शन लिखेंगे। आइए आवश्यक नोड मॉड्यूल आयात करके शुरुआत करें।

7. क्लाउड फ़ंक्शंस और फ़ायरबेस एडमिन मॉड्यूल आयात करें

इस कोडलैब के दौरान दो मॉड्यूल की आवश्यकता होगी: firebase-functions क्लाउड फ़ंक्शंस ट्रिगर्स और लॉग लिखने में सक्षम बनाता है जबकि firebase-admin क्लाउड फायरस्टोर पर लिखने या एफसीएम अधिसूचनाएं भेजने जैसे कार्यों को करने के लिए एडमिन एक्सेस वाले सर्वर पर फायरबेस प्लेटफ़ॉर्म का उपयोग करने में सक्षम बनाता है।

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.

क्लाउड फ़ंक्शंस वातावरण या अन्य Google क्लाउड प्लेटफ़ॉर्म कंटेनरों पर तैनात किए जाने पर फायरबेस एडमिन एसडीके को स्वचालित रूप से कॉन्फ़िगर किया जा सकता है, और यह तब होता है जब हम बिना किसी तर्क के admin.initializeApp() को कॉल करते हैं।

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

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

चैट संदेश संरचना

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

11f5a676fbb1a69a.png

यह इस प्रकार दिखना चाहिए:

fe6d1c020d0744cf.png

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

442c9c10b5e2b245.png

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

स्वागत संदेश जोड़ा जा रहा है

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

उपरोक्त फ़ंक्शन में, हम चैट संदेशों की सूची में "फ़ायरबेस बॉट" द्वारा पोस्ट किया गया एक नया स्वागत संदेश जोड़ रहे हैं। हम क्लाउड फायरस्टोर में 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. छवियाँ मॉडरेशन

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

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

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

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

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

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

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 फ़ाइल के शीर्ष पर निम्नलिखित पंक्तियाँ जोड़ें:

सूचकांक.जे.एस

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 फ़ंक्शन जोड़ें:

सूचकांक.जे.एस

// 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 फ़ंक्शन जोड़ें:

सूचकांक.जे.एस

// 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 डिवाइस टोकन की आवश्यकता होगी। जिस चैट वेब ऐप का हम उपयोग कर रहे हैं वह पहले से ही उपयोगकर्ताओं से डिवाइस टोकन एकत्र करता है जब वे किसी नए ब्राउज़र या डिवाइस पर पहली बार ऐप खोलते हैं। ये टोकन fcmTokens संग्रह में क्लाउड फायरस्टोर में संग्रहीत हैं।

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

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

यह पता लगाने के लिए कि नए संदेश कब पोस्ट किए जाते हैं, आप functions.firestore.document().onCreate Cloud Functions ट्रिगर का उपयोग करेंगे, जो क्लाउड फायरस्टोर के दिए गए पथ पर एक नया ऑब्जेक्ट बनाए जाने पर आपका कोड चलाता है। अपनी 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. यदि आप पहली बार ऐप में साइन-इन करते हैं, तो सुनिश्चित करें कि संकेत मिलने पर आप सूचनाओं की अनुमति दें: 8b9d0c66dc36153d.png
  3. चैट ऐप टैब बंद करें या एक अलग टैब प्रदर्शित करें: सूचनाएं केवल तभी दिखाई देती हैं जब ऐप पृष्ठभूमि में हो। यदि आप सीखना चाहते हैं कि जब आपका ऐप अग्रभूमि में हो तो संदेश कैसे प्राप्त करें, तो हमारे दस्तावेज़ पर एक नज़र डालें।
  4. किसी भिन्न ब्राउज़र (या गुप्त विंडो) का उपयोग करके, ऐप में साइन इन करें और एक संदेश पोस्ट करें। आपको पहले ब्राउज़र द्वारा प्रदर्शित एक अधिसूचना देखनी चाहिए: 45282ab12b28b926.png

11. बधाई हो!

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

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

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

अगले कदम

और अधिक जानें