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

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

3b1284f5144b54f6.png

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

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

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

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

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

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

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

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

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

ใน 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 ของคุณส่วนการจัดเก็บและคลิกที่ปุ่มเริ่มต้น จากนั้นคลิ๊กได้มันเมื่อคุณได้รับการปฏิเสธเกี่ยวกับกฎการรักษาความปลอดภัย

842ad84821323ef5.png

อินเทอร์เฟซบรรทัดคำสั่งของ 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

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

เมื่อคุณนำเข้าและกำหนดค่าโครงการของคุณแล้ว คุณก็พร้อมที่จะเรียกใช้เว็บแอปเป็นครั้งแรก เปิดคอนโซลที่ cloud-functions-start โฟลเดอร์และเรียก firebase deploy --except functions นี้จะทำให้แอปใช้เว็บเพื่อ 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

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

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

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

cd functions
ls

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

แฟ้ม package.json แล้วแสดงรายการสองอ้างอิงจำเป็นที่: Firebase SDK สำหรับฟังก์ชั่นคลาวด์ และ Firebase SDK ผู้ดูแลระบบ การติดตั้งพวกเขาทำงานในประเทศ npm install จาก 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.

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

สองโมดูลจะต้องระหว่าง 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 Admin SDK สามารถกำหนดค่าได้โดยอัตโนมัติเมื่อทำให้ใช้งานได้ในสภาพแวดล้อม Cloud Functions หรือคอนเทนเนอร์ Google Cloud Platform อื่นๆ นี่คือสิ่งที่เราทำข้างต้นเมื่อโทร admin.initializeApp();

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

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

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

11f5a676fbb1a69a.png

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

fe6d1c020d0744cf.png

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

442c9c10b5e2b245.png

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

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

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

index.js

// Adds a message that welcomes new users into the chat.
exports.addWelcomeMessages = functions.auth.user().onCreate(async (user) => {
  console.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(),
  });
  console.log('Welcome message written to database.');
});

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

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

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

ปรับใช้ฟังก์ชัน

ฟังก์ชันนี้จะใช้งานได้หลังจากที่คุณปรับใช้แล้วเท่านั้น On The Run บรรทัดคำสั่ง firebase deploy --only 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. ด้วยผู้ใช้ใหม่ลงชื่อเข้าใช้เป็นครั้งแรกในแอปโดยใช้ปุ่มลงชื่อเข้าใช้

262535d1b1223c65.png

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

1c70e0d64b23525b.png

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

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

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

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

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

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

5c77fee51ec5de49.png

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

ในการกลั่นกรองรูปภาพ เราจำเป็นต้องมีแพ็คเกจ Node.js สองสามตัว:

  • ห้องสมุดไคลเอ็นต์ Google Cloud วิสัยทัศน์สำหรับ Node.js: @ google เมฆ / วิสัยทัศน์ ที่จะเรียกใช้ภาพผ่านเมฆวิสัยทัศน์ API เพื่อตรวจสอบภาพที่ไม่เหมาะสม
  • ห้องสมุด Node.js ช่วยให้เราสามารถดำเนินการกระบวนการ: เด็กที่กระบวนการสัญญา ที่จะเรียกใช้ ImageMagick ตั้งแต่ ImageMagick เครื่องมือบรรทัดคำสั่งมาติดตั้งในทุกฟังก์ชั่นอินสแตนซ์

การติดตั้งทั้งสองแพคเกจเข้าสู่ระบบคลาวด์แอพพลิเคฟังก์ชั่นของคุณทำงานต่อไป npm install --save คำสั่ง ตรวจสอบให้แน่ใจว่าคุณทำเช่นนี้จาก functions ไดเรกทอรี

npm install --save @google-cloud/vision@0.12.0 child-process-promise@2.2.1

นี้จะติดตั้งสองแพคเกจทั้งในประเทศและเพิ่มพวกเขาเป็นอ้างอิงประกาศของคุณ package.json ไฟล์

นำเข้าและกำหนดค่าการพึ่งพา

ที่จะนำเข้าทั้งสองอ้างอิงที่ถูกติดตั้งและบางโมดูล Node.js หลัก ( path , os และ fs ) ที่เราจะต้องอยู่ในส่วนนี้เพิ่มบรรทัดต่อไปยังด้านบนของคุณ index.js ไฟล์:

index.js

const Vision = require('@google-cloud/vision');
const vision = new Vision();
const spawn = require('child-process-promise').spawn;

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 image = {
        source: {imageUri: `gs://${object.bucket}/${object.name}`},
      };

      // Check the image content using the Cloud Vision API.
      const batchAnnotateImagesResponse = await vision.safeSearchDetection(image);
      const safeSearchResult = batchAnnotateImagesResponse[0].safeSearchAnnotation;
      const Likelihood = Vision.types.Likelihood;
      if (Likelihood[safeSearchResult.adult] >= Likelihood.LIKELY ||
          Likelihood[safeSearchResult.violence] >= Likelihood.LIKELY) {
        console.log('The image', object.name, 'has been detected as inappropriate.');
        return blurImage(object.name);
      }
      console.log('The image', object.name, 'has been detected as OK.');
    });

โปรดทราบว่าเราได้เพิ่มการกำหนดค่าบางส่วนของอินสแตนซ์ฟังก์ชั่นคลาวด์ที่จะเรียกใช้ฟังก์ชั่นที่มี .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});
  console.log('Image has been downloaded to', tempLocalFile);
  // Blur the image using ImageMagick.
  await spawn('convert', [tempLocalFile, '-channel', 'RGBA', '-blur', '0x24', tempLocalFile]);
  console.log('Image has been blurred');
  // Uploading the Blurred image back into the bucket.
  await bucket.upload(tempLocalFile, {destination: filePath});
  console.log('Blurred image has been uploaded to', filePath);
  // Deleting the local file to free up disk space.
  fs.unlinkSync(tempLocalFile);
  console.log('Deleted local file.');
  // Indicate that the message has been moderated.
  await admin.firestore().collection('messages').doc(messageId).update({moderated: true});
  console.log('Marked the image as moderated in the database.');
}

ในฟังก์ชันข้างต้น ไบนารีของรูปภาพจะถูกดาวน์โหลดจาก Cloud Storage จากนั้นภาพจะเบลอใช้ ImageMagick ของ convert เครื่องมือและรุ่นเบลอเป็นอีกครั้งที่อัปโหลดในการจัดเก็บถัง จากนั้น เราลบไฟล์บนอินสแตนซ์ Cloud Functions เพื่อเพิ่มพื้นที่ว่างในดิสก์ เราทำสิ่งนี้เพราะอินสแตนซ์ Cloud Functions เดียวกันนั้นสามารถนำกลับมาใช้ใหม่ได้ และหากไฟล์ไม่ถูกล้าง ดิสก์อาจหมดได้ สุดท้าย เราเพิ่มบูลีนในข้อความแชทเพื่อระบุว่ารูปภาพได้รับการตรวจสอบแล้ว ซึ่งจะทริกเกอร์การรีเฟรชข้อความบนไคลเอ็นต์

ปรับใช้ฟังก์ชัน

ฟังก์ชันนี้จะใช้งานได้หลังจากที่คุณปรับใช้แล้วเท่านั้น On The Run บรรทัดคำสั่ง 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

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

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

หากคุณต้องการที่จะเรียนรู้วิธีที่จะได้รับ FCM ราชสกุลอุปกรณ์บนเว็บแอปที่คุณสามารถไปผ่าน 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);
      console.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) {
     console.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);
}

ปรับใช้ฟังก์ชัน

ฟังก์ชันนี้จะใช้งานได้หลังจากที่คุณปรับใช้แล้วเท่านั้น On The Run บรรทัดคำสั่ง 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: 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

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

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

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

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

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