ฟังก์ชันระบบคลาวด์สำหรับ Firebase

1. ภาพรวม

ใน Codelab นี้ คุณจะได้เรียนรู้วิธีใช้ Firebase SDK สำหรับ Google Cloud Functions เพื่อปรับปรุงเว็บแอป Chat และวิธีใช้ Cloud Functions เพื่อส่งการแจ้งเตือนไปยังผู้ใช้แอป Chat

3b1284f5144b54f6.png

สิ่งที่คุณจะได้เรียนรู้

  • สร้างฟังก์ชัน Google Cloud โดยใช้ Firebase SDK
  • เรียกใช้ฟังก์ชันระบบคลาวด์ตามเหตุการณ์ Auth, Cloud Storage และ Cloud Firestore
  • เพิ่มการรองรับ Firebase Cloud Messaging ให้กับเว็บแอปของคุณ

สิ่งที่คุณต้องการ

  • บัตรเครดิต. Cloud Functions สำหรับ Firebase ต้องใช้แผน Firebase Blaze ซึ่งหมายความว่าคุณจะต้องเปิดใช้การเรียกเก็บเงินในโครงการ Firebase โดยใช้บัตรเครดิต
  • IDE ที่บรรณาธิการ / ข้อความที่คุณเลือกเช่น WebStorm , Atom หรือ Sublime
  • เทอร์มินัลสำหรับรันคำสั่งเชลล์โดยติดตั้ง NodeJS v9
  • เบราว์เซอร์เช่น Chrome
  • โค้ดตัวอย่าง. ดูขั้นตอนต่อไปสำหรับสิ่งนี้

2. รับโค้ดตัวอย่าง

โคลน ที่เก็บ GitHub จากบรรทัดคำสั่ง:

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

นำเข้าแอพเริ่มต้น

ใช้ IDE ของคุณ เปิดหรือนำเข้าไฟล์ android_studio_folder.png cloud-functions-start ไดเรกทอรีจากไดเรกทอรีโค้ดตัวอย่าง ไดเร็กทอรีนี้มีโค้ดเริ่มต้นสำหรับ codelab ซึ่งประกอบด้วย Chat Web App ที่ทำงานได้อย่างสมบูรณ์

3. สร้างโปรเจ็กต์ Firebase และตั้งค่าแอปของคุณ

สร้างโครงการ

ใน Firebase คอนโซล ให้คลิกเพิ่มโครงการและเรียกว่า FriendlyChat

คลิกสร้างโครงการ

อัปเกรดเป็นแผน Blaze

เพื่อที่จะใช้ฟังก์ชั่นคลาวด์สำหรับ Firebase คุณจะต้องอัปเกรดโครงการ Firebase ของคุณไปยัง แผนการเรียกเก็บเงิน Blaze คุณจะต้องเพิ่มบัตรเครดิตหรือเครื่องมือการเรียกเก็บเงินอื่นในบัญชี Google Cloud ของคุณ

โปรเจ็กต์ Firebase ทั้งหมด รวมถึงโปรเจ็กต์ในแผน Blaze ยังคงมีสิทธิ์เข้าถึงโควตาการใช้งานฟรีสำหรับ Cloud Functions ขั้นตอนที่ระบุไว้ใน Codelab นี้จะอยู่ภายในขีดจำกัดการใช้งาน Free Tier แต่คุณจะเห็นค่าใช้จ่ายขนาดเล็ก ( ประมาณ $ 0.03 ) จากการจัดเก็บเมฆที่ใช้ในการเป็นเจ้าภาพเมฆฟังก์ชั่นการสร้างภาพของคุณ

หากคุณไม่ได้มีการเข้าถึงบัตรเครดิตหรือไม่สบายใจต่อเนื่องกับแผน Blaze พิจารณาใช้ Firebase Emulator ห้องสวีท ซึ่งจะช่วยให้คุณสามารถที่จะเลียนแบบฟังก์ชั่นคลาวด์ฟรีบนเครื่องของคุณ

เปิดใช้งาน Google Auth

เพื่อให้ผู้ใช้ลงชื่อเข้าใช้แอป เราจะใช้การตรวจสอบสิทธิ์ของ Google ซึ่งจำเป็นต้องเปิดใช้งาน

ใน Firebase คอนโซลเปิดส่วนการสร้าง> ตรวจสอบ> การเข้าสู่ระบบในแท็บวิธีการ (หรือ คลิกที่นี่ เพื่อไปที่นั่น) จากนั้นเปิดใช้งาน Google เข้าสู่ระบบของผู้ให้บริการและคลิกบันทึก ซึ่งจะทำให้ผู้ใช้สามารถลงชื่อเข้าใช้เว็บแอปด้วยบัญชี Google ของตนได้

นอกจากนี้ยังให้ความรู้สึกอิสระที่จะตั้งชื่อหันสาธารณะของ app ของคุณเพื่อเป็นมิตรแชท:

8290061806aacb46.png

เปิดใช้งานที่เก็บข้อมูลบนคลาวด์

แอปนี้ใช้ Cloud Storage เพื่ออัปโหลดรูปภาพ ต้องการเปิดใช้งานการจัดเก็บเมฆในโครงการ Firebase ของคุณไปที่ส่วนจัดเก็บและการคลิกปุ่มเริ่มต้น ทำตามขั้นตอนต่างๆ ที่นั่น และสำหรับตำแหน่ง Cloud Storage จะมีค่าเริ่มต้นให้ใช้ คลิกที่เสร็จสิ้นหลังจากนั้น

เพิ่มเว็บแอป

บน Firebase Console ให้เพิ่มเว็บแอป ต้องการทำเช่นนั้นให้ไปที่ การตั้งค่าโครงการ และเลื่อนลงเพื่อเพิ่มแอป เลือกเว็บเป็นแพลตฟอร์มและตรวจสอบกล่องสำหรับการตั้งค่า Firebase โฮสติ้งแล้วลงทะเบียนตรวจสอบและคลิกถัดไปเวลาที่เหลือของขั้นตอนที่สุดท้ายคลิกที่ดำเนินการต่อไปยังคอนโซล

4. ติดตั้งอินเทอร์เฟซบรรทัดคำสั่ง Firebase

อินเทอร์เฟซบรรทัดคำสั่งของ Firebase (CLI) จะช่วยให้คุณให้บริการเว็บแอปในเครื่องและปรับใช้เว็บแอปและฟังก์ชันระบบคลาวด์ได้

ในการติดตั้งหรืออัพเกรด CLI ให้รันคำสั่ง npm ต่อไปนี้:

npm -g install firebase-tools

ในการตรวจสอบว่าติดตั้ง CLI อย่างถูกต้องหรือไม่ ให้เปิดคอนโซลและเรียกใช้:

firebase --version

ตรวจสอบให้แน่ใจรุ่นของ Firebase CLI อยู่เหนือ 4.0.0 เพื่อให้มีคุณสมบัติล่าสุดทั้งหมดที่จำเป็นสำหรับฟังก์ชั่นคลาวด์ ถ้าไม่ได้เรียกใช้ npm install -g firebase-tools ในการอัพเกรดที่แสดงข้างต้น

อนุญาต Firebase CLI โดยเรียกใช้:

firebase login

ให้แน่ใจว่าคุณอยู่ใน cloud-functions-start ไดเรกทอรีแล้วตั้งค่า Firebase CLI ใช้โครงการ Firebase ของคุณ:

firebase use --add

จากนั้นเลือก ID โปรเจ็กต์ของคุณและทำตามคำแนะนำ เมื่อได้รับแจ้งคุณสามารถเลือกนามแฝงใด ๆ เช่น codelab

5. ปรับใช้และเรียกใช้เว็บแอป

เมื่อคุณนำเข้าและกำหนดค่าโครงการของคุณแล้ว คุณก็พร้อมที่จะเรียกใช้เว็บแอปเป็นครั้งแรก! เปิดหน้าต่าง terminal นำทางไปยัง 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

เปิดเว็บแอป

บรรทัดสุดท้ายควรจะแสดง URL ของโฮสติ้ง เว็บแอปควรให้บริการจาก URL นี้ ซึ่งควรอยู่ในรูปแบบ https://<project-id>.firebaseapp.com เปิด. คุณควรเห็น UI ที่ใช้งานได้ของแอปแชท

ลงชื่อเข้าใช้ app โดยใช้ปุ่มเข้าสู่ระบบกับ Google และรู้สึกฟรีเพื่อเพิ่มบางข้อความและภาพที่โพสต์:

3b1284f5144b54f6.png

หากคุณลงชื่อเข้าใช้แอพเป็นครั้งแรกบนเบราว์เซอร์ใหม่ ตรวจสอบให้แน่ใจว่าคุณอนุญาตการแจ้งเตือนเมื่อได้รับแจ้ง: 8b9d0c66dc36153d.png

เราจำเป็นต้องเปิดใช้งานการแจ้งเตือนในภายหลัง

หากคุณคลิกตั้งใจบล็อกคุณสามารถเปลี่ยนการตั้งค่านี้ได้โดยคลิกที่ปุ่ม🔒การรักษาความปลอดภัยทางด้านซ้ายของ URL ใน Chrome แถบอเนกประสงค์และสลับแถบที่อยู่ถัดจากการแจ้งเตือน:

e926868b0546ed71.png

ตอนนี้ เราจะเพิ่มฟังก์ชันบางอย่างโดยใช้ Firebase SDK สำหรับ Cloud Functions

6. ไดเรกทอรีฟังก์ชัน

Cloud Functions ช่วยให้คุณมีโค้ดที่รันใน Cloud ได้อย่างง่ายดายโดยไม่ต้องตั้งค่าเซิร์ฟเวอร์ เราจะอธิบายวิธีการสร้างฟังก์ชันที่ตอบสนองต่อเหตุการณ์ฐานข้อมูล Firebase Auth, Cloud Storage และ Firebase Firestore มาเริ่มกันที่การรับรองความถูกต้อง

เมื่อใช้ Firebase SDK สำหรับฟังก์ชั่นคลาวด์รหัสฟังก์ชั่นของคุณจะมีชีวิตอยู่ภายใต้ functions ไดเรกทอรี (ค่าเริ่มต้น) รหัสฟังก์ชั่นของคุณยังเป็น Node.js แอปและดังนั้นจึงจำเป็นต้องมีการ package.json ที่ให้ข้อมูลบางอย่างเกี่ยวกับแอปและรายการอ้างอิงของคุณ

ที่จะทำให้มันง่ายสำหรับคุณที่เราได้สร้างแล้ว functions/index.js ไฟล์ที่รหัสของคุณจะไป โปรดตรวจสอบไฟล์นี้ก่อนดำเนินการต่อ

cd functions
ls

ถ้าคุณไม่คุ้นเคยกับ Node.js , การเรียนรู้เพิ่มเติมเกี่ยวกับเรื่องนี้ก่อนดำเนินการต่อ codelab จะเป็นประโยชน์

package.json ไฟล์แล้วแสดงรายการสองอ้างอิงจำเป็นที่: 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.

เราจะนำเข้าโมดูลที่จำเป็นแล้วเขียนสามฟังก์ชันแทนสิ่งที่ต้องทำ เริ่มต้นด้วยการนำเข้าโมดูลโหนดที่จำเป็น

7. นำเข้า Cloud Functions และ Firebase Admin modules

สองโมดูลจะต้องระหว่าง codelab นี้: firebase-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.

Firebase SDK ผู้ดูแลระบบสามารถกำหนดค่าโดยอัตโนมัติเมื่อนำไปใช้กับสภาพแวดล้อมที่มีฟังก์ชั่นคลาวด์หรือภาชนะอื่น ๆ ของ Google Cloud Platform และสิ่งนี้จะเกิดขึ้นเมื่อเราเรียก admin.initializeApp() มีข้อโต้แย้งใด ๆ

ตอนนี้ มาเพิ่มฟังก์ชันที่ทำงานเมื่อผู้ใช้ลงชื่อเข้าใช้เป็นครั้งแรกในแอปแชท และเราจะเพิ่มข้อความแชทเพื่อต้อนรับผู้ใช้

8. ยินดีต้อนรับผู้ใช้ใหม่

โครงสร้างข้อความแชท

ข้อความที่โพสต์ไปยังฟีดแชท FriendlyChat จะถูกเก็บไว้ใน Cloud Firestore มาดูโครงสร้างข้อมูลที่เราใช้สำหรับข้อความกัน ในการดำเนินการนี้ ให้โพสต์ข้อความใหม่ในแชทที่เขียนว่า "สวัสดีชาวโลก":

11f5a676fbb1a69a.png

สิ่งนี้ควรปรากฏเป็น:

fe6d1c020d0744cf.png

ใน Firebase คอนโซลคลิก FireStore ฐานข้อมูลตามมาตราการการสร้าง คุณควรเห็นคอลเล็กชันข้อความและเอกสารหนึ่งฉบับที่มีข้อความที่คุณเขียน:

442c9c10b5e2b245.png

ที่คุณสามารถดูข้อความแชทจะถูกเก็บไว้ในระบบคลาวด์ FireStore เป็นเอกสารที่มี name , profilePicUrl , text และ timestamp แอตทริบิวต์เพิ่มไปยัง messages คอลเลกชัน

เพิ่มข้อความต้อนรับ

ครั้งแรกที่ฟังก์ชั่นคลาวด์เพิ่มข้อความที่ยินดีต้อนรับผู้ใช้ใหม่แชท สำหรับเรื่องนี้เราสามารถใช้ทริกเกอร์ functions.auth().onCreate ซึ่งไหลฟังก์ชั่นทุกครั้งที่ผู้ใช้สัญญาณในเป็นครั้งแรกในแอป Firebase เพิ่ม addWelcomeMessages ทำงานของคุณลงใน index.js ไฟล์:

index.js

// Adds a message that welcomes new users into the chat.
exports.addWelcomeMessages = functions.auth.user().onCreate(async (user) => {
  functions.logger.log('A new user signed in for the first time.');
  const fullName = user.displayName || 'Anonymous';

  // Saves the new welcome message into the database
  // which then displays it in the FriendlyChat clients.
  await admin.firestore().collection('messages').add({
    name: 'Firebase Bot',
    profilePicUrl: '/images/firebase-logo.png', // Firebase logo
    text: `${fullName} signed in for the first time! Welcome!`,
    timestamp: admin.firestore.FieldValue.serverTimestamp(),
  });
  functions.logger.log('Welcome message written to database.');
});

เพิ่มฟังก์ชั่นนี้พิเศษ exports วัตถุเป็นวิธีโหนดของฟังก์ชั่นการทำนอกสามารถเข้าถึงไฟล์ในปัจจุบันและเป็นสิ่งจำเป็นสำหรับฟังก์ชั่นคลาวด์

ในฟังก์ชันข้างต้น เรากำลังเพิ่มข้อความต้อนรับใหม่ที่โพสต์โดย "Firebase Bot" ในรายการข้อความแชท เราจะทำเช่นนี้โดยใช้การ add วิธีการใน messages คอลเลกชันในระบบคลาวด์ FireStore ซึ่งเป็นที่ที่ข้อความของการแชทจะถูกเก็บไว้

เนื่องจากนี่คือการดำเนินการไม่ตรงกันเราต้องกลับ สัญญา ที่ระบุเมื่อเมฆ FireStore มีการเขียนเสร็จแล้วดังนั้นฟังก์ชั่นคลาวด์ไม่ดำเนินการเร็วเกินไป

ปรับใช้ฟังก์ชั่นคลาวด์

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

ทดสอบการทำงาน

เมื่อฟังก์ชันใช้งานได้สำเร็จ คุณจะต้องมีผู้ใช้ที่ลงชื่อเข้าใช้เป็นครั้งแรก

  1. เปิดแอปของคุณในเบราว์เซอร์ของคุณโดยใช้ URL โฮสติ้ง (ในรูปแบบของ https://<project-id>.firebaseapp.com )
  2. ด้วยผู้ใช้ใหม่ลงชื่อเข้าใช้เป็นครั้งแรกในแอปโดยใช้ปุ่มลงชื่อเข้าใช้
  • หากคุณได้ลงนามแล้วเข้าไปที่แอปที่คุณสามารถเปิด การตรวจสอบสิทธิ์คอนโซล Firebase และลบบัญชีของคุณจากรายการของผู้ใช้ จากนั้นลงชื่อเข้าใช้อีกครั้ง

262535d1b1223c65.png

  1. หลังจากที่คุณลงชื่อเข้าใช้ ข้อความต้อนรับควรแสดงโดยอัตโนมัติ:

1c70e0d64b23525b.png

9. การดูแลรูปภาพ

ผู้ใช้สามารถอัปโหลดรูปภาพทุกประเภทในการแชท และเป็นสิ่งสำคัญเสมอที่จะกลั่นกรองรูปภาพที่ไม่เหมาะสม โดยเฉพาะอย่างยิ่งในแพลตฟอร์มโซเชียลสาธารณะ ใน FriendlyChat ภาพที่ถูกตีพิมพ์ในการแชทจะถูกเก็บไว้ใน Google Cloud Storage ได้

ด้วยฟังก์ชั่เมฆคุณสามารถตรวจสอบการอัปโหลดภาพใหม่โดยใช้ functions.storage().onFinalize ทริกเกอร์ สิ่งนี้จะทำงานทุกครั้งที่มีการอัปโหลดหรือแก้ไขไฟล์ใหม่ใน Cloud Storage

ในการกลั่นกรองรูปภาพ เราจะดำเนินการตามขั้นตอนต่อไปนี้:

  1. ตรวจสอบว่าภาพจะถูกตั้งค่าสถานะเป็นผู้ใหญ่ที่มีความรุนแรงหรือใช้ ระบบคลาวด์วิสัยทัศน์ API
  2. หากรูปภาพถูกตั้งค่าสถานะ ให้ดาวน์โหลดบนอินสแตนซ์ Functions ที่ทำงานอยู่
  3. เบลอภาพโดยใช้ ImageMagick
  4. อัปโหลดภาพเบลอไปยัง Cloud Storage

เปิดใช้งาน Cloud Vision API

เนื่องจากเราจะใช้ Google Cloud Vision API ในฟังก์ชันนี้ คุณต้องเปิดใช้งาน API ในโครงการ firebase ของคุณ ทำตาม ลิงค์นี้ แล้วเลือกโครงการ Firebase ของคุณและเปิดใช้งาน API:

5c77fee51ec5de49.png

ติดตั้งการพึ่งพา

กับภาพปานกลางเราจะใช้ลูกค้าห้องสมุด Google Cloud วิสัยทัศน์สำหรับ Node.js, @ google เมฆ / วิสัยทัศน์ เพื่อใช้ภาพผ่านเมฆวิสัยทัศน์ API เพื่อตรวจสอบภาพที่ไม่เหมาะสม

การติดตั้งแพคเกจนี้เข้าสู่ระบบคลาวด์แอพพลิเคฟังก์ชั่นของคุณทำงานต่อไป 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 Storage เพิ่ม blurOffensiveImages ฟังก์ชั่นของคุณลงใน index.js ไฟล์:

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'}) เรากำลังขอให้อินสแตนซ์ที่ได้รับหน่วยความจำ 2GB แทนที่จะเริ่มต้นเพราะฟังก์ชั่นนี้เป็นหน่วยความจำมาก

เมื่อฟังก์ชันทำงาน รูปภาพจะถูกเรียกใช้ผ่าน Cloud Vision API เพื่อตรวจจับว่าถูกตั้งค่าสถานะว่าเป็นผู้ใหญ่หรือมีความรุนแรง ถ้าภาพจะถูกตรวจพบว่าเป็นที่ไม่เหมาะสมขึ้นอยู่กับเกณฑ์เหล่านี้เรากำลังทำให้เปรอะเปื้อนภาพซึ่งจะทำใน blurImage ฟังก์ชั่นที่เราจะเห็นต่อไป

ทำให้ภาพเบลอ

เพิ่มต่อไปนี้ blurImage ฟังก์ชั่นในของคุณ index.js ไฟล์:

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

ทดสอบการทำงาน

เมื่อใช้งานฟังก์ชันสำเร็จแล้ว:

  1. เปิดแอปของคุณในเบราว์เซอร์ของคุณโดยใช้ URL โฮสติ้ง (ในรูปแบบของ https://<project-id>.firebaseapp.com )
  2. เมื่อลงชื่อเข้าใช้แอปแล้ว ให้อัปโหลดรูปภาพ: 4db9fdab56703e4a.png
  3. เลือกภาพที่น่ารังเกียจที่ดีที่สุดของคุณเพื่ออัปโหลด (หรือคุณสามารถใช้นี้ กินเนื้อผีดิบ !) และหลังจากนั้นสักครู่คุณจะเห็นการฟื้นฟูการโพสต์ของคุณกับรุ่นเบลอของภาพ: 83dd904fbaf97d2b.png

10. การแจ้งเตือนข้อความใหม่

ในส่วนนี้ คุณจะเพิ่ม Cloud Function ที่จะส่งการแจ้งเตือนไปยังผู้เข้าร่วมแชทเมื่อมีการโพสต์ข้อความใหม่

ใช้ Firebase Cloud Messaging (FCM) คุณสามารถเชื่อถือได้ส่งการแจ้งเตือนไปยังผู้ใช้ข้ามแพลตฟอร์ม หากต้องการส่งการแจ้งเตือนไปยังผู้ใช้ คุณต้องมีโทเค็นอุปกรณ์ FCM เว็บแอปแชทที่เราใช้ได้รวบรวมโทเค็นอุปกรณ์จากผู้ใช้แล้ว เมื่อเปิดแอปเป็นครั้งแรกบนเบราว์เซอร์หรืออุปกรณ์ใหม่ ราชสกุลเหล่านี้จะถูกเก็บไว้ในระบบคลาวด์ FireStore ใน fcmTokens คอลเลกชัน

หากคุณต้องการที่จะเรียนรู้วิธีที่จะได้รับ FCM ราชสกุลอุปกรณ์บน app เว็บคุณสามารถไปผ่าน Firebase เว็บ Codelab

ส่งการแจ้งเตือน

ในการตรวจสอบเมื่อมีข้อความใหม่ที่มีการโพสต์คุณจะใช้ functions.firestore.document().onCreate ฟังก์ชั่นคลาวด์ทริกเกอร์ซึ่งไหลรหัสของคุณเมื่อมีวัตถุใหม่จะถูกสร้างขึ้นในเส้นทางที่กำหนดของเมฆ 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.');
    }
  });

ในฟังก์ชั่นข้างต้นเราจะมีการรวบรวมของผู้ใช้ทั้งหมดราชสกุลอุปกรณ์จากฐานข้อมูลระบบคลาวด์ FireStore และส่งการแจ้งเตือนไปยังแต่ละเหล่านี้โดยใช้ admin.messaging().sendToDevice ฟังก์ชั่น

ล้างโทเค็น

สุดท้ายนี้ เราต้องการลบโทเค็นที่ใช้ไม่ได้อีกต่อไป สิ่งนี้จะเกิดขึ้นเมื่อโทเค็นที่เราเคยได้รับจากผู้ใช้ไม่ได้ถูกใช้โดยเบราว์เซอร์หรืออุปกรณ์อีกต่อไป ตัวอย่างเช่น สิ่งนี้จะเกิดขึ้นหากผู้ใช้เพิกถอนการอนุญาตการแจ้งเตือนสำหรับเซสชันของเบราว์เซอร์ การทำเช่นนี้ต่อไปเพิ่ม cleanupTokens ทำงานของคุณใน index.js ไฟล์:

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. ปิดแท็บแอปแชทหรือแสดงแท็บอื่น: การแจ้งเตือนจะปรากฏเฉพาะเมื่อแอปอยู่ในพื้นหลัง หากคุณต้องการที่จะเรียนรู้วิธีการที่จะได้รับข้อความในขณะที่ app ของคุณอยู่ในเบื้องหน้ามีลักษณะที่ เอกสารของเรา
  4. ใช้เบราว์เซอร์อื่น (หรือหน้าต่างที่ไม่ระบุตัวตน) ลงชื่อเข้าใช้แอปและโพสต์ข้อความ คุณควรเห็นการแจ้งเตือนที่แสดงโดยเบราว์เซอร์แรก: 45282ab12b28b926.png

11. ขอแสดงความยินดี!

คุณได้ใช้ Firebase SDK สำหรับ Cloud Functions และเพิ่มส่วนประกอบฝั่งเซิร์ฟเวอร์ลงในแอปแชท

สิ่งที่เราได้กล่าวถึง

  • การเขียนฟังก์ชันระบบคลาวด์โดยใช้ Firebase SDK สำหรับฟังก์ชันระบบคลาวด์
  • เรียกใช้ฟังก์ชันระบบคลาวด์ตามเหตุการณ์ Auth, Cloud Storage และ Cloud Firestore
  • เพิ่มการรองรับ Firebase Cloud Messaging ให้กับเว็บแอปของคุณ
  • ปรับใช้ Cloud Functions โดยใช้ Firebase CLI

ขั้นตอนถัดไป

เรียนรู้เพิ่มเติม