इस पेज का अनुवाद Cloud Translation API से किया गया है.

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

1. खास जानकारी

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

इस कोडलैब को Firebase वेब कोडलैब के सीक्वल के तौर पर बनाया गया है. इसमें आपको Firebase वेब SDK टूल का इस्तेमाल करके चैट ऐप्लिकेशन बनाने का तरीका बताया गया है. अगर आपको चैट ऐप्लिकेशन बनाकर, वेब पर Firebase प्लैटफ़ॉर्म का इस्तेमाल करने का तरीका जानना है, तो पहले Firebase वेब कोडलैब पर जाएं. अगर आपको Firebase प्लैटफ़ॉर्म और CLI का इस्तेमाल करने का तरीका पहले से पता है और आपको Cloud Functions के लिए Firebase SDK टूल के बारे में जानना है, तो आप सही जगह पर हैं. हम आपको यहां Firebase वेब कोडलैब को क्लोन करने का तरीका बताएंगे.

आपको क्या जानकारी मिलेगी

Firebase SDK टूल का इस्तेमाल करके, Google Cloud Functions बनाएं.
पुष्टि करने की सुविधा, Cloud Storage, और Cloud Firestore इवेंट के आधार पर Cloud Functions ट्रिगर करना.
अपने वेब ऐप्लिकेशन में Firebase Cloud Messaging की सहायता जोड़ें.

आपको इन चीज़ों की ज़रूरत होगी

क्रेडिट कार्ड. Firebase के लिए Cloud Functions का इस्तेमाल करने के लिए, Firebase का Blaze प्लान ज़रूरी है. इसका मतलब है कि आपको क्रेडिट कार्ड का इस्तेमाल करके, अपने Firebase प्रोजेक्ट पर बिलिंग की सुविधा चालू करनी होगी.
आपकी पसंद का आईडीई/टेक्स्ट एडिटर, जैसे कि WebStorm, Atom या Sublime.
NodeJS v9 इंस्टॉल होने के साथ-साथ, शेल कमांड चलाने के लिए टर्मिनल.
Chrome जैसा कोई ब्राउज़र.
सैंपल कोड. इसके लिए, अगला चरण देखें.

2. सैंपल कोड पाना

कमांड लाइन से GitHub डेटा स्टोर करने की जगह को क्लोन करें:

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

firebase-codelabs रिपॉज़िटरी में, कई प्लैटफ़ॉर्म के लिए सैंपल प्रोजेक्ट मौजूद हैं. इस कोडलैब में सिर्फ़ इन दो रिपॉज़िटरी का इस्तेमाल किया जाता है:

cloud-functions-start—शुरुआती कोड, जिसे इस कोडलैब में बनाया जाएगा. ध्यान दें: यह कोड, Firebase वेब कोडलैब के फ़ाइनल कोड जैसा ही है.
cloud-functions—पूरे किए गए सैंपल ऐप्लिकेशन का पूरा कोड.

ध्यान दें: अगर आपको पूरा किया गया ऐप्लिकेशन चलाना है, तो आपको अब भी Firebase कंसोल में एक प्रोजेक्ट बनाना होगा. निर्देशों के लिए, Firebase प्रोजेक्ट बनाएं और अपना ऐप्लिकेशन सेटअप करें सेक्शन देखें.

स्टार्टर ऐप्लिकेशन इंपोर्ट करना

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

3. Firebase प्रोजेक्ट बनाना और अपना ऐप्लिकेशन सेट अप करना

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

Firebase कंसोल में, प्रोजेक्ट जोड़ें पर क्लिक करें और इसे FriendlyChat नाम दें.

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

Blaze प्लान पर अपग्रेड करना

'Firebase के लिए Cloud Functions' और 'Firebase के लिए Cloud Storage' का इस्तेमाल करने के लिए, आपका Firebase प्रोजेक्ट पे-अस-यू-गो (Blaze) प्लान पर होना चाहिए. इसका मतलब है कि वह क्लाउड बिलिंग खाते से लिंक होना चाहिए.

Cloud Billing खाते के लिए, क्रेडिट कार्ड जैसा पेमेंट का कोई तरीका होना ज़रूरी है.
अगर आपने Firebase और Google Cloud का इस्तेमाल पहले कभी नहीं किया है, तो देखें कि क्या आपको 300 डॉलर का क्रेडिट और मुफ़्त में आज़माने के लिए Cloud Billing खाता मिल सकता है.
अगर आपने किसी इवेंट के तहत यह कोडलैब किया है, तो इवेंट के आयोजक से पूछें कि क्या कोई Cloud क्रेडिट उपलब्ध है.

अगर आपके पास क्रेडिट कार्ड का ऐक्सेस नहीं है या आपको ब्लेज़ की कीमत वाले प्लान का इस्तेमाल जारी रखने में परेशानी हो रही है, तो Firebase एमुलेटर सुइट का इस्तेमाल करें. इससे आपको अपनी लोकल मशीन पर, Cloud Functions को बिना किसी शुल्क के एमुलेट करने की सुविधा मिलेगी.

सभी Firebase प्रोजेक्ट, अब भी बिना किसी शुल्क के Cloud Functions का इस्तेमाल करने के कोटे का ऐक्सेस रखते हैं. इनमें, Blaze प्लान का इस्तेमाल करने वाले प्रोजेक्ट भी शामिल हैं. इस कोडलैब में बताया गया तरीका, मुफ़्त टीयर के इस्तेमाल की सीमाओं के अंदर होगा. हालांकि, आपको Cloud Storage के लिए लगभग 0.03 डॉलर का शुल्क दिखेगा. इसका इस्तेमाल, Cloud Functions के बिल्ड इमेज को होस्ट करने के लिए किया जाता है.

अपने प्रोजेक्ट को Blaze प्लान पर अपग्रेड करने के लिए, यह तरीका अपनाएं:

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

Google Auth को चालू करना

उपयोगकर्ताओं को ऐप्लिकेशन में साइन-इन करने की अनुमति देने के लिए, हम Google की पुष्टि करने की सुविधा का इस्तेमाल करेंगे. इसके लिए, यह सुविधा चालू होनी चाहिए.

Firebase Console में, बिल्ड सेक्शन > पुष्टि > साइन इन करने का तरीका टैब खोलें. इसके अलावा, वहां जाने के लिए यहां क्लिक करें. इसके बाद, Google साइन-इन प्रोवाइडर को चालू करें और सेव करें पर क्लिक करें. इससे, उपयोगकर्ता अपने Google खातों से वेब ऐप्लिकेशन में साइन इन कर पाएंगे.

इसके अलावा, अपने ऐप्लिकेशन का सार्वजनिक नाम Friendly Chat पर सेट करें:

Firebase के लिए Cloud Storage सेट अप करना

यह ऐप्लिकेशन, फ़ोटो अपलोड करने के लिए Cloud Storage का इस्तेमाल करता है.

अपने Firebase प्रोजेक्ट में, 'Firebase के लिए Cloud Storage' सेट अप करने का तरीका यहां बताया गया है:

Firebase कंसोल के बाएं पैनल में, बिल्ड को बड़ा करें. इसके बाद, स्टोरेज चुनें.
शुरू करें पर क्लिक करें.
अपनी डिफ़ॉल्ट स्टोरेज बकेट के लिए कोई जगह चुनें.
US-WEST1, US-CENTRAL1, और US-EAST1 में मौजूद बकेट, Google Cloud Storage के लिए "हमेशा मुफ़्त" टीयर का फ़ायदा ले सकती हैं. अन्य सभी जगहों की बकेट के लिए, Google Cloud Storage की कीमत और इस्तेमाल लागू होता है.
टेस्ट मोड में शुरू करें पर क्लिक करें. सुरक्षा नियमों के बारे में डिसक्लेमर पढ़ें.
अपनी स्टोरेज बकेट के लिए सुरक्षा नियम जोड़े बिना, किसी ऐप्लिकेशन को सार्वजनिक तौर पर डिस्ट्रिब्यूट या एक्सपोज़ न करें.
बनाएं पर क्लिक करें.

वेब ऐप्लिकेशन जोड़ना

Firebase कंसोल पर, वेब ऐप्लिकेशन जोड़ें. इसके लिए, प्रोजेक्ट सेटिंग पर जाएं और नीचे की ओर स्क्रोल करके ऐप्लिकेशन जोड़ें पर जाएं. प्लैटफ़ॉर्म के तौर पर वेब चुनें और Firebase होस्टिंग सेट अप करने के लिए बॉक्स पर सही का निशान लगाएं. इसके बाद, ऐप्लिकेशन रजिस्टर करें और बाकी चरण पूरे करने के लिए आगे बढ़ें पर क्लिक करें. आखिर में, कंसोल पर जारी रखें पर क्लिक करें.

4. Firebase का कमांड-लाइन इंटरफ़ेस इंस्टॉल करना

Firebase कमांड-लाइन इंटरफ़ेस (सीएलआई) की मदद से, वेब ऐप्लिकेशन को स्थानीय तौर पर दिखाया जा सकता है. साथ ही, वेब ऐप्लिकेशन और Cloud Functions को डिप्लॉय किया जा सकता है.

सीएलआई को इंस्टॉल या अपग्रेड करने के लिए, npm का यह निर्देश चलाएं:

npm -g install firebase-tools

यह पुष्टि करने के लिए कि सीएलआई सही तरीके से इंस्टॉल किया गया है, कोई कंसोल खोलें और यह कमांड चलाएं:

firebase --version

पक्का करें कि Firebase CLI का वर्शन 4.0.0 से ज़्यादा हो, ताकि इसमें Cloud Functions के लिए ज़रूरी सभी नई सुविधाएं हों. अगर ऐसा नहीं है, तो ऊपर दिखाए गए तरीके से अपग्रेड करने के लिए npm install -g firebase-tools चलाएं.

Firebase CLI को अनुमति देने के लिए, यह कमांड चलाएं:

firebase login

पक्का करें कि आप cloud-functions-start डायरेक्ट्री में हों. इसके बाद, अपने Firebase प्रोजेक्ट का इस्तेमाल करने के लिए 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

वेब ऐप्लिकेशन खोलना

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

Google से साइन इन करें बटन का इस्तेमाल करके, ऐप्लिकेशन में साइन इन करें. इसके बाद, कुछ मैसेज जोड़ें और इमेज पोस्ट करें:

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

हमें बाद में सूचनाएं पाने की सुविधा चालू करनी होगी.

अगर आपने गलती से ब्लॉक करें पर क्लिक कर दिया है, तो इस सेटिंग को बदला जा सकता है. इसके लिए, Chrome के ओमनीबार में यूआरएल की बाईं ओर मौजूद 🔒 सुरक्षित करें बटन पर क्लिक करें. इसके बाद, सूचनाएं के बगल में मौजूद बार को टॉगल करें:

अब हम Cloud Functions के लिए Firebase SDK टूल का इस्तेमाल करके, कुछ फ़ंक्शन जोड़ेंगे.

6. फ़ंक्शन डायरेक्ट्री

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

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

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

cd functions
ls

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

package.json फ़ाइल में, पहले से ही दो ज़रूरी डिपेंडेंसी मौजूद हैं: Cloud Functions के लिए 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.

हम ज़रूरी मॉड्यूल इंपोर्ट करेंगे. इसके बाद, TODOs की जगह तीन फ़ंक्शन लिखेंगे. आइए, ज़रूरी Node मॉड्यूल इंपोर्ट करने से शुरू करते हैं.

7. Cloud Functions और Firebase एडमिन मॉड्यूल इंपोर्ट करना

इस कोडलैब के दौरान दो मॉड्यूल की ज़रूरत होगी: firebase-functions, Cloud Functions के ट्रिगर और लॉग लिखने की सुविधा देता है. वहीं, firebase-admin, एडमिन ऐक्सेस वाले सर्वर पर Firebase प्लैटफ़ॉर्म का इस्तेमाल करने की सुविधा देता है. इससे, Cloud Firestore में डेटा लिखने या 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.

Cloud Functions के एनवायरमेंट या Google Cloud Platform के अन्य कंटेनर में डिप्लॉय करने पर, Firebase Admin SDK टूल अपने-आप कॉन्फ़िगर हो सकता है. ऐसा तब होता है, जब हम बिना किसी आर्ग्युमेंट के admin.initializeApp() को कॉल करते हैं.

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

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

चैट मैसेज का स्ट्रक्चर

FriendlyChat के चैट फ़ीड में पोस्ट किए गए मैसेज, Cloud Firestore में सेव किए जाते हैं. आइए, मैसेज के लिए इस्तेमाल किए जाने वाले डेटा स्ट्रक्चर पर नज़र डालते हैं. इसके लिए, चैट में "नमस्ते दुनिया" लिखकर नया मैसेज पोस्ट करें:

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

Firebase कंसोल में, बिल्ड सेक्शन में जाकर Firestore डेटाबेस पर क्लिक करें. आपको मैसेज का कलेक्शन और एक दस्तावेज़ दिखेगा, जिसमें आपका लिखा मैसेज होगा:

जैसा कि आप देख सकते हैं, चैट मैसेज को Cloud Firestore में दस्तावेज़ के तौर पर सेव किया जाता है. इसमें messages कलेक्शन में जोड़े गए name, profilePicUrl, text, और timestamp एट्रिब्यूट होते हैं.

वेलकम मैसेज जोड़ना

पहला क्लाउड फ़ंक्शन, चैट में नए उपयोगकर्ताओं का स्वागत करने वाला मैसेज जोड़ता है. इसके लिए, हम ट्रिगर 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 ऑब्जेक्ट में जोड़ने से, Node फ़ंक्शन को मौजूदा फ़ाइल के बाहर से ऐक्सेस किया जा सकता है. यह Cloud Functions के लिए ज़रूरी है.

ऊपर दिए गए फ़ंक्शन में, हम चैट मैसेज की सूची में "Firebase बॉट" से पोस्ट किया गया नया वेलकम मैसेज जोड़ रहे हैं. हम Cloud Firestore में messages कलेक्शन पर add तरीके का इस्तेमाल करके ऐसा कर रहे हैं. इस कलेक्शन में चैट के मैसेज सेव किए जाते हैं.

यह एक असाइनोक्रोनस ऑपरेशन है. इसलिए, हमें Promise दिखाना होगा, ताकि यह पता चल सके कि Cloud Firestore में डेटा लिखने की प्रोसेस कब पूरी हुई. इससे Cloud Functions जल्दी से जल्दी लागू नहीं होंगे.

Cloud Functions को डिप्लॉय करना

Cloud Functions को डिप्लॉय करने के बाद ही वे चालू होंगे. ऐसा करने के लिए, कमांड लाइन पर यह चलाएं:

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

अहम जानकारी: किसी प्रोजेक्ट के लिए पहली बार फ़ंक्शन डिप्लॉय करने में सामान्य से ज़्यादा समय लगेगा. इसकी वजह यह है कि Google Cloud प्रोजेक्ट पर एपीआई चालू हो रहे हैं. डिप्लॉय होने में लगने वाला समय, डिप्लॉय किए जा रहे फ़ंक्शन की संख्या पर भी निर्भर करता है. साथ ही, समय के साथ ज़्यादा फ़ंक्शन जोड़ने पर, यह समय बढ़ जाएगा.

फ़ंक्शन की जांच करना

फ़ंक्शन के डिप्लॉय हो जाने के बाद, आपको कोई ऐसा उपयोगकर्ता चाहिए जो पहली बार साइन इन करे.

https://<project-id>.firebaseapp.com के तौर पर होस्टिंग यूआरएल का इस्तेमाल करके, अपने ब्राउज़र में अपना ऐप्लिकेशन खोलें.
किसी नए उपयोगकर्ता के तौर पर, साइन इन करें बटन का इस्तेमाल करके, अपने ऐप्लिकेशन में पहली बार साइन इन करें.

अगर आपने ऐप्लिकेशन में पहले ही साइन इन कर लिया है, तो Firebase कंसोल की पुष्टि करने की सुविधा खोलें और उपयोगकर्ताओं की सूची से अपना खाता मिटाएं. इसके बाद, फिर से साइन इन करें.

साइन इन करने के बाद, आपको वेलकम मैसेज अपने-आप दिखेगा:

लॉग: अगर वेलकम मैसेज नहीं दिखता है या आपको आगे कोई और समस्या आती है, तो डिप्लॉय करने के दौरान गड़बड़ियों के लिए कमांड लाइन आउटपुट की दोबारा जांच करें. अगर ऐसा हो जाता है, तो Cloud Functions के लॉग पर जाएं और देखें कि क्या आपको गड़बड़ी का कोई मैसेज मिला है. DASHBOARD टैब पर स्विच करके, यह भी देखा जा सकता है कि फ़ंक्शन सही तरीके से डिप्लॉय हुआ है या नहीं. साथ ही, यह भी देखा जा सकता है कि फ़ंक्शन को कितनी बार चलाया गया है.

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

उपयोगकर्ता चैट में सभी तरह की इमेज अपलोड कर सकते हैं. इसलिए, आपत्तिजनक इमेज को मॉडरेट करना ज़रूरी है. खास तौर पर, सार्वजनिक सोशल प्लैटफ़ॉर्म पर ऐसा करना ज़रूरी है. FriendlyChat में, चैट में पब्लिश की जा रही इमेज को Cloud Storage बकेट में सेव किया जाता है.

Cloud Functions की मदद से, functions.storage().onFinalize ट्रिगर का इस्तेमाल करके, नई इमेज अपलोड होने का पता लगाया जा सकता है. यह हर बार तब चलेगा, जब Cloud Storage में कोई नई फ़ाइल अपलोड की जाएगी या किसी मौजूदा फ़ाइल में बदलाव किया जाएगा.

इमेज को मॉडरेट करने के लिए, हम यह तरीका अपनाएंगे:

Cloud Vision API का इस्तेमाल करके देखें कि इमेज को 'सेक्शुअल ऐक्ट दिखाने वाली' या 'हिंसा दिखाने वाली' के तौर पर फ़्लैग किया गया है या नहीं.
अगर इमेज को फ़्लैग किया गया है, तो उसे चल रहे Functions इंस्टेंस पर डाउनलोड करें.
ImageMagick का इस्तेमाल करके, इमेज को धुंधला करें.
धुंधली की गई इमेज को Cloud Storage में अपलोड करें.

Cloud Vision API को चालू करना

इस फ़ंक्शन में, हम Google Cloud Vision API का इस्तेमाल करेंगे. इसलिए, आपको अपने Firebase प्रोजेक्ट पर एपीआई चालू करना होगा. इस लिंक पर जाएं. इसके बाद, अपना Firebase प्रोजेक्ट चुनें और एपीआई चालू करें:

ध्यान दें: इस एपीआई का इस्तेमाल करने के लिए, आपको बिलिंग की सुविधा चालू करनी होगी. इस कोडलैब में ज़्यादातर काम बिना किसी शुल्क के किए जा सकते हैं. हालांकि, आपके इस्तेमाल के हिसाब से आपसे शुल्क लिया जा सकता है. ऐसा होने से बचने के लिए, इस कोडलैब के आखिर में बिलिंग की सुविधा बंद करना न भूलें.

अगर आपको बिलिंग की सुविधा चालू करने में कोई परेशानी है, तो इस सेक्शन को छोड़ें और नए मैसेज की सूचनाओं पर जाएं.

डिपेंडेंसी इंस्टॉल करना

हम Node.js के लिए Google Cloud Vision क्लाइंट लाइब्रेरी, @google-cloud/vision का इस्तेमाल करके, इमेज को मॉडरेट करेंगे. इससे, Cloud Vision API की मदद से इमेज को चलाकर, आपत्तिजनक इमेज का पता लगाया जा सकेगा.

इस पैकेज को अपने Cloud Functions ऐप्लिकेशन में इंस्टॉल करने के लिए, यह 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 Cloud के एनवायरमेंट में चलेगा. इसलिए, Cloud Storage और Cloud Vision लाइब्रेरी को कॉन्फ़िगर करने की ज़रूरत नहीं है: ये आपके प्रोजेक्ट का इस्तेमाल करने के लिए अपने-आप कॉन्फ़िगर हो जाएंगी.

आपत्तिजनक इमेज का पता लगाना

आपको functions.storage.onChange Cloud Functions ट्रिगर का इस्तेमाल करना होगा. यह ट्रिगर, Cloud Storage की किसी बकेट में फ़ाइल या फ़ोल्डर बनने या उसमें बदलाव होने पर, आपका कोड चलाता है. अपनी 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.');
    });

ध्यान दें कि हमने उस Cloud Functions इंस्टेंस का कुछ कॉन्फ़िगरेशन जोड़ा है जो फ़ंक्शन को चलाएगा. .runWith({memory: '2GB'}) का इस्तेमाल करके, हम अनुरोध कर रहे हैं कि इंस्टेंस को डिफ़ॉल्ट के बजाय 2 जीबी मेमोरी मिले, क्योंकि यह फ़ंक्शन ज़्यादा मेमोरी का इस्तेमाल करता है.

फ़ंक्शन ट्रिगर होने पर, इमेज को Cloud Vision 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.');
}

ऊपर दिए गए फ़ंक्शन में, इमेज बाइनरी को Cloud Storage से डाउनलोड किया जाता है. इसके बाद, ImageMagick के convert टूल का इस्तेमाल करके इमेज को धुंधला किया जाता है. इसके बाद, धुंधला किए गए वर्शन को स्टोरेज बकेट में फिर से अपलोड किया जाता है. इसके बाद, हम डिस्क में जगह खाली करने के लिए, Cloud Functions इंस्टेंस पर फ़ाइल मिटा देते हैं. ऐसा इसलिए किया जाता है, क्योंकि उसी Cloud Functions इंस्टेंस का फिर से इस्तेमाल किया जा सकता है. अगर फ़ाइलों को मिटाया नहीं जाता है, तो डिस्क में जगह खत्म हो सकती है. आखिर में, हम चैट मैसेज में एक बूलियन जोड़ते हैं, जिससे पता चलता है कि इमेज को मॉडरेट किया गया था. इससे क्लाइंट पर मैसेज रीफ़्रेश हो जाएगा.

फ़ंक्शन को डिप्लॉय करना

फ़ंक्शन को डिप्लॉय करने के बाद ही वह चालू होगा. कमांड लाइन पर, 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

फ़ंक्शन की जांच करना

फ़ंक्शन डिप्लॉय होने के बाद:

https://<project-id>.firebaseapp.com के तौर पर होस्टिंग यूआरएल का इस्तेमाल करके, अपने ब्राउज़र में अपना ऐप्लिकेशन खोलें.
ऐप्लिकेशन में साइन इन करने के बाद, कोई इमेज अपलोड करें:
अपलोड करने के लिए, आपत्तिजनक इमेज चुनें. इसके अलावा, मांस खाने वाले ज़ोंबी की इस इमेज का इस्तेमाल भी किया जा सकता है! कुछ देर बाद, आपको अपनी पोस्ट रीफ़्रेश करके दिखेगी. इसमें इमेज धुंधली हो जाएगी:

10. नए मैसेज की सूचनाएं

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

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

अगर आपको वेब ऐप्लिकेशन पर FCM डिवाइस टोकन पाने का तरीका जानना है, तो Firebase वेब कोडलैब पर जाएं.

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

नए मैसेज पोस्ट होने का पता लगाने के लिए, आपको functions.firestore.document().onCreate Cloud Functions ट्रिगर का इस्तेमाल करना होगा. यह ट्रिगर, Cloud Firestore के किसी दिए गए पाथ पर नया ऑब्जेक्ट बनने पर आपका कोड चलाता है. अपनी 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.');
    }
  });

ऊपर दिए गए फ़ंक्शन में, हम Cloud Firestore डेटाबेस से सभी उपयोगकर्ताओं के डिवाइस टोकन इकट्ठा कर रहे हैं. साथ ही, 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

फ़ंक्शन की जांच करना

फ़ंक्शन के डिप्लॉय होने के बाद, होस्टिंग यूआरएल (https://<project-id>.firebaseapp.com के तौर पर) का इस्तेमाल करके, अपने ब्राउज़र में ऐप्लिकेशन खोलें.
अगर आपने ऐप्लिकेशन में पहली बार साइन इन किया है, तो अनुरोध किए जाने पर सूचनाएं पाने की अनुमति दें:
चैट ऐप्लिकेशन का टैब बंद करें या कोई दूसरा टैब दिखाएं: सूचनाएं सिर्फ़ तब दिखती हैं, जब ऐप्लिकेशन बैकग्राउंड में हो. अगर आपको यह जानना है कि ऐप्लिकेशन फ़ोरग्राउंड में होने पर मैसेज कैसे मिलते हैं, तो हमारा दस्तावेज़ देखें.
किसी दूसरे ब्राउज़र (या गुप्त विंडो) का इस्तेमाल करके, ऐप्लिकेशन में साइन इन करें और कोई मैसेज पोस्ट करें. आपको पहले ब्राउज़र से एक सूचना दिखेगी:

11. बधाई हो!

आपने Cloud Functions के लिए Firebase SDK टूल का इस्तेमाल किया है और चैट ऐप्लिकेशन में सर्वर-साइड कॉम्पोनेंट जोड़े हैं.

हमने क्या-क्या शामिल किया है

Cloud Functions के लिए Firebase SDK टूल का इस्तेमाल करके, Cloud Functions को लिखना.
पुष्टि करने की सुविधा, Cloud Storage, और Cloud Firestore इवेंट के आधार पर Cloud Functions ट्रिगर करना.
अपने वेब ऐप्लिकेशन में Firebase Cloud Messaging की सहायता जोड़ें.
Firebase CLI का इस्तेमाल करके, Cloud Functions डिप्लॉय करें.

अगले चरण

Cloud फ़ंक्शन के अन्य ट्रिगर टाइप के बारे में जानें.
अपने ऐप्लिकेशन के साथ Firebase और Cloud Functions का इस्तेमाल करें.