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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

अपने IDE का इस्तेमाल करके, सैंपल कोड डायरेक्ट्री से android_studio_फ़ोल्डर.png cloud-functions-start डायरेक्ट्री खोलें या इंपोर्ट करें. इस डायरेक्ट्री में, कोडलैब के लिए शुरुआती कोड दिया गया है. इसमें, पूरी तरह से काम करने वाला Chat वेब ऐप्लिकेशन शामिल है.

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

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

Firebase कंसोल में, Add Project पर क्लिक करें और इसे AdaptiveChat नाम दें.

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

Baze प्लान में अपग्रेड करना

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

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

अगर आपके पास क्रेडिट कार्ड का ऐक्सेस नहीं है या आप Blaze प्लान को जारी रखने में असहज महसूस करते हैं, तो Firebase Emulator Suite का इस्तेमाल करें. इसकी मदद से आप अपनी स्थानीय मशीन पर Cloud Functions को मुफ़्त में एम्युलेट कर सकेंगे.

Google पुष्टि चालू करें

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

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

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

Cloud Storage चालू करना

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

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

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

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

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

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

npm -g install firebase-tools

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

firebase --version

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

इसे चलाकर Firebase सीएलआई को अनुमति दें:

firebase login

पक्का करें कि आप cloud-functions-start डायरेक्ट्री में हैं. इसके बाद, अपने Firebase प्रोजेक्ट का इस्तेमाल करने के लिए, Firebase सीएलआई सेट अप करें:

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, आपको सर्वर सेट अप किए बिना क्लाउड में चलने वाला कोड रखने की सुविधा देता है. हम इस बारे में जानकारी देंगे कि Firebase पर पुष्टि करने, Cloud Storage, और Firebase Firestore डेटाबेस इवेंट के हिसाब से प्रतिक्रिया देने वाले फ़ंक्शन कैसे बनाए जाते हैं. चलिए, पुष्टि करने से शुरुआत करते हैं.

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

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

cd functions
ls

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

package.json फ़ाइल में पहले से ही दो ज़रूरी डिपेंडेंसी शामिल हैं: Cloud Functions के लिए Firebase SDK और Firebase एडमिन SDK. उन्हें स्थानीय रूप से इंस्टॉल करने के लिए, functions फ़ोल्डर में जाएं और चलाएं:

npm install

आइए, अब index.js फ़ाइल पर एक नज़र डालें:

index.js

/**
 * Copyright 2017 Google Inc. All Rights Reserved.
 * ...
 */

// TODO(DEVELOPER): Import the Cloud Functions for Firebase and the Firebase Admin modules here.

// TODO(DEVELOPER): Write the addWelcomeMessage Function here.

// TODO(DEVELOPER): Write the blurImages Function here.

// TODO(DEVELOPER): Write the sendNotification Function here.

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

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

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

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

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

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

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

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

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

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

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

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

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

Cloud फ़ंक्शन डिप्लॉय करें

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. इमेज मॉडरेशन

उपयोगकर्ता, चैट में सभी तरह की इमेज अपलोड कर सकते हैं. इसके लिए, आपत्तिजनक इमेज को मॉडरेट करना ज़रूरी है. खास तौर पर, सार्वजनिक सोशल मीडिया प्लैटफ़ॉर्म पर ऐसा करना बेहद ज़रूरी है. फ़्रेंडली चैट में, चैट में पब्लिश होने वाली इमेज Google 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 क्लाउड से मैसेज (FCM) का इस्तेमाल करके, आप सभी प्लैटफ़ॉर्म पर उपयोगकर्ताओं को भरोसेमंद तरीके से सूचनाएं भेज सकते हैं. किसी उपयोगकर्ता को सूचना भेजने के लिए, आपको उसके FCM डिवाइस टोकन की ज़रूरत होगी. हम जिस चैट वेब ऐप्लिकेशन का इस्तेमाल कर रहे हैं वह पहले से ही, उपयोगकर्ताओं से डिवाइस टोकन इकट्ठा करता है. ऐसा तब होता है, जब उपयोगकर्ता किसी नए ब्राउज़र या डिवाइस पर उसे पहली बार खोलते हैं. ये टोकन, fcmTokens कलेक्शन में Cloud Firestore में सेव किए जाते हैं.

अगर आपको किसी वेब ऐप्लिकेशन पर 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 क्लाउड से मैसेज की सुविधा जोड़ें.
Firebase सीएलआई का इस्तेमाल करके Cloud Functions डिप्लॉय करें.

अगले चरण

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

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

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

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

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

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

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

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

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

Baze प्लान में अपग्रेड करना

Google पुष्टि चालू करें

Cloud Storage चालू करना

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

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

5. वेब ऐप्लिकेशन डिप्लॉय करें और चलाएं

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

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

index.js

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

index.js

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

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

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

index.js

Cloud फ़ंक्शन डिप्लॉय करें

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

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

Cloud Vision API चालू करना

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

डिपेंडेंसी इंपोर्ट और कॉन्फ़िगर करना

index.js

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

index.js

इमेज को धुंधला करना

index.js

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

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

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

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

index.js

टोकन हटाने का तरीका

index.js

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

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

11. बधाई हो!

इसमें हमने इन विषयों के बारे में बताया

अगले चरण

ज़्यादा जानें