फायरबेस के लिए क्लाउड फ़ंक्शंस

1 अवलोकन

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

3b1284f5144b54f6.png

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

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

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

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

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

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

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

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

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

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

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

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

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

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

Firebase के लिए Cloud Functions का उपयोग करने के लिए, आपको अपने Firebase प्रोजेक्ट को Blaze बिलिंग योजना में अपग्रेड करना होगा। इसके लिए आपको अपने Google क्लाउड खाते में एक क्रेडिट कार्ड या कोई अन्य बिलिंग साधन जोड़ना होगा।

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

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

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

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

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

इसके अलावा, बेझिझक अपने ऐप के सार्वजनिक नाम को फ्रेंडली चैट पर सेट करें:

8290061806aacb46.png

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

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

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

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

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

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

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

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 फॉर्म का होना चाहिए। खोलो इसे। आपको चैट ऐप का कार्यशील UI देखना चाहिए।

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

3b1284f5144b54f6.png

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

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

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

e926868b0546ed71.png

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

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

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

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

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

cd functions
ls

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

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

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. नए उपयोगकर्ताओं का स्वागत है

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

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

11f5a676fbb1a69a.png

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

fe6d1c020d0744cf.png

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

442c9c10b5e2b245.png

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

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

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

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

क्लाउड विज़न API सक्षम करें

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

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

उपरोक्त फ़ंक्शन में, छवि बाइनरी क्लाउड स्टोरेज से डाउनलोड की जाती है। फिर इमेजमैजिक के 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 संग्रह में संग्रहीत हैं।

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

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

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

अगले कदम

और अधिक जानें