Google is committed to advancing racial equity for Black communities. See how.
หน้านี้ได้รับการแปลโดย Cloud Translation API
Switch to English

Cloud Firestore Web Codelab

เป้าหมาย

ใน codelab นี้คุณจะสร้างเว็บแอปแนะนำร้านอาหารที่ขับเคลื่อนโดย Cloud Firestore

img5.png

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

  • อ่านและเขียนข้อมูลไปยัง Cloud Firestore จากเว็บแอป
  • รับฟังการเปลี่ยนแปลงข้อมูล Cloud Firestore แบบเรียลไทม์
  • ใช้ Firebase Authentication และกฎความปลอดภัยเพื่อรักษาความปลอดภัยข้อมูล Cloud Firestore
  • เขียนคำค้นหา Cloud Firestore ที่ซับซ้อน

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

ก่อนที่จะเริ่ม codelab นี้ตรวจสอบให้แน่ใจว่าคุณได้ติดตั้ง:

  • npm ซึ่งมักมาพร้อมกับ Node.js - แนะนำให้ใช้ Node v8
  • โปรแกรมแก้ไข IDE / ข้อความที่คุณเลือกเช่น WebStorm , Atom , VS Code หรือ Sublime

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

  1. ใน คอนโซล Firebase ให้คลิก เพิ่มโครงการ จากนั้นตั้งชื่อโครงการ Firebase ว่า FriendlyEats

จำรหัสโครงการสำหรับโครงการ Firebase ของคุณ

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

แอปพลิเคชันที่เรากำลังจะสร้างใช้บริการ Firebase บางอย่างที่มีอยู่บนเว็บ:

  • Firebase Authentication เพื่อระบุผู้ใช้ของคุณได้อย่างง่ายดาย
  • Cloud Firestore เพื่อบันทึกข้อมูลที่มีโครงสร้างบนคลาวด์และรับการแจ้งเตือนทันทีเมื่อข้อมูลได้รับการอัปเดต
  • Firebase Hosting เพื่อโฮสต์และให้บริการเนื้อหาคงที่ของคุณ

สำหรับ codelab เฉพาะนี้เราได้กำหนดค่า Firebase Hosting ไว้แล้ว อย่างไรก็ตามสำหรับ Firebase Auth และ Cloud Firestore เราจะแนะนำคุณตลอดขั้นตอนการกำหนดค่าและการเปิดใช้บริการโดยใช้คอนโซล Firebase

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

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

คุณจะต้องเปิดใช้งานการ เข้าสู่ระบบแบบไม่ระบุตัวตน

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

img7.png

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

เปิดใช้งาน Cloud Firestore

แอพนี้ใช้ Cloud Firestore เพื่อบันทึกและรับข้อมูลร้านอาหารและการให้คะแนน

คุณจะต้องเปิดใช้งาน Cloud Firestore ในส่วน การพัฒนา ของคอนโซล Firebase ให้คลิก Firestore คลิก สร้างฐานข้อมูล ในบานหน้าต่าง Cloud Firestore

การเข้าถึงข้อมูลใน Cloud Firestore ควบคุมโดยกฎความปลอดภัย เราจะพูดคุยเพิ่มเติมเกี่ยวกับกฎในโค้ดแล็บนี้ในภายหลัง แต่ก่อนอื่นเราต้องตั้งกฎพื้นฐานบางอย่างกับข้อมูลของเราเพื่อเริ่มต้น ใน แท็บกฎ ของคอนโซล Firebase ให้เพิ่มกฎต่อไปนี้แล้วคลิก เผยแพร่

service cloud.firestore {
  match /databases/{database}/documents {
    match /{document=**} {
      //
      // WARNING: These rules are insecure! We will replace them with
      // more secure rules later in the codelab
      //
      allow read, write: if request.auth != null;
    }
  }
}

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

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

git clone https://github.com/firebase/friendlyeats-web

โค้ดตัวอย่างควรถูกโคลนลงในไดเร็กทอรี📁 friendlyeats-web ตรวจสอบให้แน่ใจว่าบรรทัดคำสั่งของคุณถูกเรียกใช้จากไดเร็กทอรีนี้:

cd friendlyeats-web

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

ใช้ IDE ของคุณ (WebStorm, Atom, Sublime, Visual Studio Code ... ) เปิดหรือนำเข้าไดเร็กทอรี📁 friendlyeats-web ไดเร็กทอรีนี้มีรหัสเริ่มต้นสำหรับ codelab ซึ่งประกอบด้วยแอพแนะนำร้านอาหารที่ยังใช้งานไม่ได้ เราจะทำให้มันใช้งานได้ตลอด codelab นี้ดังนั้นคุณจะต้องแก้ไขโค้ดในไดเรกทอรีนั้นเร็ว ๆ นี้

Firebase Command Line Interface (CLI) ช่วยให้คุณสามารถให้บริการเว็บแอปในเครื่องและปรับใช้เว็บแอปของคุณกับ Firebase Hosting

  1. ติดตั้ง CLI โดยรันคำสั่ง npm ต่อไปนี้:
npm -g install firebase-tools
  1. ตรวจสอบว่า CLI ได้รับการติดตั้งอย่างถูกต้องโดยรันคำสั่งต่อไปนี้:
firebase --version

ตรวจสอบว่าเวอร์ชันของ Firebase CLI คือ v7.4.0 หรือใหม่กว่า

  1. ให้สิทธิ์ Firebase CLI โดยเรียกใช้คำสั่งต่อไปนี้:
firebase login

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

  1. ตรวจสอบให้แน่ใจว่าบรรทัดคำสั่งของคุณกำลังเข้าถึงไดเร็กทอรีภายในของแอพของคุณ
  2. เชื่อมโยงแอปของคุณกับโปรเจ็กต์ Firebase โดยเรียกใช้คำสั่งต่อไปนี้:
firebase use --add
  1. เมื่อได้รับแจ้งให้เลือก รหัสโครงการ ของคุณจากนั้นตั้งชื่อแทนโครงการ Firebase ของคุณ

นามแฝงมีประโยชน์หากคุณมีหลายสภาพแวดล้อม (การผลิตการแสดงละคร ฯลฯ ) อย่างไรก็ตามสำหรับ codelab นี้ให้ใช้นามแฝงของ default

  1. ทำตามคำแนะนำที่เหลือในบรรทัดคำสั่งของคุณ

เราพร้อมที่จะเริ่มใช้งานแอปของเราแล้ว! มาเปิดแอปของเราในพื้นที่กันเถอะ!

  1. เรียกใช้คำสั่ง Firebase CLI ต่อไปนี้:
firebase emulators:start --only hosting
  1. บรรทัดคำสั่งของคุณควรแสดงการตอบสนองต่อไปนี้:
hosting: Local server: http://localhost:5000

เรากำลังใช้โปรแกรมจำลอง โฮสติ้ง Firebase เพื่อให้บริการแอปของเราในพื้นที่ ตอนนี้เว็บแอปควรพร้อมใช้งานจาก http: // localhost: 5000

  1. เปิดแอปของคุณที่ http: // localhost: 5000

คุณควรเห็นสำเนาของ FriendlyEats ซึ่งเชื่อมต่อกับโครงการ Firebase ของคุณ

แอปได้เชื่อมต่อกับโครงการ Firebase ของคุณโดยอัตโนมัติและให้คุณลงชื่อเข้าใช้แบบไม่ระบุตัวตน

img2.png

ในส่วนนี้เราจะเขียนข้อมูลบางส่วนไปยัง Cloud Firestore เพื่อให้เราสามารถเติม UI ของแอปได้ ซึ่งสามารถทำได้ด้วยตนเองผ่าน คอนโซล Firebase แต่เราจะทำในแอปเองเพื่อสาธิตการเขียน Cloud Firestore ขั้นพื้นฐาน

แบบจำลองข้อมูล

ข้อมูล Firestore แบ่งออกเป็นคอลเล็กชันเอกสารฟิลด์และคอลเล็กชันย่อย เราจะจัดเก็บร้านอาหารแต่ละร้านไว้เป็นเอกสารในคอลเลคชันระดับบนสุดที่เรียกว่า restaurants

img3.png

หลังจากนั้นเราจะจัดเก็บบทวิจารณ์แต่ละรายการไว้ในคอลเล็กชันย่อยที่เรียกว่า ratings ในแต่ละร้านอาหาร

img4.png

เพิ่มร้านอาหารใน Firestore

วัตถุโมเดลหลักในแอพของเราคือร้านอาหาร มาเขียนโค้ดที่เพิ่มเอกสารร้านอาหารลงในคอลเลคชัน restaurants

  1. จากไฟล์ที่คุณดาวน์โหลดมาให้เปิด scripts/FriendlyEats.Data.js
  2. ค้นหาฟังก์ชัน FriendlyEats.prototype.addRestaurant
  3. แทนที่ฟังก์ชันทั้งหมดด้วยรหัสต่อไปนี้

FriendlyEats.Data.js

FriendlyEats.prototype.addRestaurant = function(data) {
  var collection = firebase.firestore().collection('restaurants');
  return collection.add(data);
};

โค้ดด้านบนจะเพิ่มเอกสารใหม่ในคอลเล็กชัน restaurants ข้อมูลเอกสารมาจากออบเจ็กต์ JavaScript ธรรมดา เราดำเนินการนี้โดยการอ้างอิงถึง restaurants คอลเลกชัน Cloud Firestore ก่อนจากนั้นจึง add ข้อมูลเข้าไป

เพิ่มร้านอาหารกันเถอะ!

  1. กลับไปที่แอพ FriendlyEats ในเบราว์เซอร์ของคุณแล้วรีเฟรช
  2. คลิก เพิ่มข้อมูลจำลอง

แอปจะสร้างชุดวัตถุร้านอาหารแบบสุ่มโดยอัตโนมัติจากนั้นเรียกใช้ฟังก์ชัน addRestaurant ของคุณ อย่างไรก็ตาม คุณจะยังไม่เห็นข้อมูลในเว็บแอปจริงของคุณ เนื่องจากเรายังต้องใช้การ ดึง ข้อมูล (ส่วนถัดไปของ codelab)

หากคุณไปที่ แท็บ Cloud Firestore ในคอนโซล Firebase ตอนนี้คุณควรเห็นเอกสารใหม่ในคอลเล็กชัน restaurants !

img6.png

ขอแสดงความยินดีคุณเพิ่งเขียนข้อมูลไปยัง Cloud Firestore จากเว็บแอป!

ในส่วนถัดไปคุณจะได้เรียนรู้วิธีดึงข้อมูลจาก Cloud Firestore และแสดงในแอปของคุณ

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

ขั้นแรกให้สร้างแบบสอบถามที่จะแสดงรายการร้านอาหารเริ่มต้นที่ไม่มีการกรอง

  1. กลับไปที่ scripts/FriendlyEats.Data.js ไฟล์ scripts/FriendlyEats.Data.js
  2. ค้นหาฟังก์ชัน FriendlyEats.prototype.getAllRestaurants
  3. แทนที่ฟังก์ชันทั้งหมดด้วยรหัสต่อไปนี้

FriendlyEats.Data.js

FriendlyEats.prototype.getAllRestaurants = function(renderer) {
  var query = firebase.firestore()
      .collection('restaurants')
      .orderBy('avgRating', 'desc')
      .limit(50);

  this.getDocumentsInQuery(query, renderer);
};

ในโค้ดด้านบนเราสร้างข้อความค้นหาซึ่งจะดึงข้อมูลร้านอาหารมากถึง 50 ร้านจากคอลเลคชันระดับบนสุดที่มีชื่อ restaurants ซึ่งเรียงลำดับตามคะแนนเฉลี่ย (ปัจจุบันทั้งหมดเป็นศูนย์) หลังจากที่เราประกาศแบบสอบถามนี้เราจะส่งต่อไปยัง getDocumentsInQuery() ซึ่งรับผิดชอบในการโหลดและแสดงผลข้อมูล

เราจะทำสิ่งนี้โดยเพิ่มตัวฟังสแนปชอต

  1. กลับไปที่ scripts/FriendlyEats.Data.js ไฟล์ scripts/FriendlyEats.Data.js
  2. ค้นหาฟังก์ชัน FriendlyEats.prototype.getDocumentsInQuery
  3. แทนที่ฟังก์ชันทั้งหมดด้วยรหัสต่อไปนี้

FriendlyEats.Data.js

FriendlyEats.prototype.getDocumentsInQuery = function(query, renderer) {
  query.onSnapshot(function(snapshot) {
    if (!snapshot.size) return renderer.empty(); // Display "There are no restaurants".

    snapshot.docChanges().forEach(function(change) {
      if (change.type === 'removed') {
        renderer.remove(change.doc);
      } else {
        renderer.display(change.doc);
      }
    });
  });
};

ในโค้ดด้านบน query.onSnapshot จะเรียกการเรียกกลับทุกครั้งที่มีการเปลี่ยนแปลงผลลัพธ์ของแบบสอบถาม

  • ในครั้งแรกการโทรกลับจะถูกเรียกด้วยชุดผลลัพธ์ทั้งหมดของข้อความค้นหาซึ่งหมายถึงคอลเล็กชัน restaurants ทั้งหมดจาก Cloud Firestore จากนั้นจะส่งผ่านเอกสารทั้งหมดไปยังฟังก์ชัน renderer.display
  • เมื่อเอกสารถูกลบ change.type เท่ากับ removed ดังนั้นในกรณีนี้เราจะเรียกใช้ฟังก์ชันที่ลบร้านอาหารออกจาก UI

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

เมื่อรายชื่อร้านอาหารของคุณเปลี่ยนไปผู้ฟังรายนี้จะอัปเดตโดยอัตโนมัติ ลองไปที่คอนโซล Firebase แล้วลบร้านอาหารด้วยตนเองหรือเปลี่ยนชื่อคุณจะเห็นการเปลี่ยนแปลงปรากฏบนไซต์ของคุณทันที!

img5.png

จนถึงตอนนี้เราได้แสดงวิธีใช้ onSnapshot เพื่อดึงข้อมูลอัปเดตแบบเรียลไทม์ อย่างไรก็ตามนั่นไม่ใช่สิ่งที่เราต้องการเสมอไป บางครั้งการดึงข้อมูลเพียงครั้งเดียวก็สมเหตุสมผลกว่า

เราต้องการใช้วิธีการที่เกิดขึ้นเมื่อผู้ใช้คลิกเข้าไปในร้านอาหารที่ต้องการในแอปของคุณ

  1. กลับไปที่ scripts/FriendlyEats.Data.js ไฟล์ของคุณ scripts/FriendlyEats.Data.js
  2. ค้นหาฟังก์ชัน FriendlyEats.prototype.getRestaurant
  3. แทนที่ฟังก์ชันทั้งหมดด้วยรหัสต่อไปนี้

FriendlyEats.Data.js

FriendlyEats.prototype.getRestaurant = function(id) {
  return firebase.firestore().collection('restaurants').doc(id).get();
};

หลังจากใช้วิธีนี้แล้วคุณจะสามารถดูหน้าสำหรับร้านอาหารแต่ละแห่งได้ เพียงคลิกที่ร้านอาหารในรายการคุณจะเห็นหน้ารายละเอียดของร้านอาหาร:

img1.png

ในตอนนี้คุณไม่สามารถเพิ่มการให้คะแนนได้เนื่องจากเรายังต้องใช้การเพิ่มการให้คะแนนในภายหลังใน codelab

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

นี่คือตัวอย่างคำถามง่ายๆในการดึงข้อมูลร้าน Dim Sum ทั้งหมด:

var filteredQuery = query.where('category', '==', 'Dim Sum')

ตามความหมายของชื่อเมธอด where() จะทำให้คิวรีของเราดาวน์โหลดเฉพาะสมาชิกของคอลเล็กชันที่มีฟิลด์ตรงตามข้อ จำกัด ที่เราตั้งไว้ ในกรณีนี้จะดาวน์โหลดเฉพาะร้านอาหารที่เป็น category Dim Sum เท่านั้น

ในแอปของเราผู้ใช้สามารถเชื่อมโยงตัวกรองหลายตัวเพื่อสร้างข้อความค้นหาเฉพาะเช่น "Pizza in San Francisco" หรือ "Seafood in Los Angeles order by Popularity"

เราจะสร้างวิธีการสร้างแบบสอบถามซึ่งจะกรองร้านอาหารของเราตามเกณฑ์ต่างๆที่ผู้ใช้เลือก

  1. กลับไปที่ scripts/FriendlyEats.Data.js ไฟล์ของคุณ scripts/FriendlyEats.Data.js
  2. ค้นหาฟังก์ชัน FriendlyEats.prototype.getFilteredRestaurants
  3. แทนที่ฟังก์ชันทั้งหมดด้วยรหัสต่อไปนี้

FriendlyEats.Data.js

FriendlyEats.prototype.getFilteredRestaurants = function(filters, renderer) {
  var query = firebase.firestore().collection('restaurants');

  if (filters.category !== 'Any') {
    query = query.where('category', '==', filters.category);
  }

  if (filters.city !== 'Any') {
    query = query.where('city', '==', filters.city);
  }

  if (filters.price !== 'Any') {
    query = query.where('price', '==', filters.price.length);
  }

  if (filters.sort === 'Rating') {
    query = query.orderBy('avgRating', 'desc');
  } else if (filters.sort === 'Reviews') {
    query = query.orderBy('numRatings', 'desc');
  }

  this.getDocumentsInQuery(query, renderer);
};

โค้ดข้างต้นเพิ่มหลาย where กรองและเป็นหนึ่งเดียว orderBy ข้อในการสร้างแบบสอบถามสารประกอบบนพื้นฐานของข้อมูลของผู้ใช้ การสืบค้นของเราจะแสดงเฉพาะร้านอาหารที่ตรงกับความต้องการของผู้ใช้เท่านั้น

รีเฟรชแอป FriendlyEats ในเบราว์เซอร์ของคุณจากนั้นตรวจสอบว่าคุณสามารถกรองตามราคาเมืองและหมวดหมู่ได้ ขณะทดสอบคุณจะเห็นข้อผิดพลาดในคอนโซล JavaScript ของเบราว์เซอร์ของคุณที่มีลักษณะดังนี้:

The query requires an index. You can create it here: https://console.firebase.google.com/project/.../database/firestore/indexes?create_index=...

ข้อผิดพลาดเหล่านี้เป็นเพราะ Cloud Firestore ต้องการดัชนีสำหรับการสืบค้นแบบผสมส่วนใหญ่ การกำหนดดัชนีในการสืบค้นช่วยให้ Cloud Firestore ทำงานได้อย่างรวดเร็วตามขนาด

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

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

  1. ในไดเรกทอรีภายในที่ดาวน์โหลดของแอปคุณจะพบไฟล์ firestore.indexes.json

ไฟล์นี้อธิบายดัชนีทั้งหมดที่จำเป็นสำหรับชุดตัวกรองที่เป็นไปได้ทั้งหมด

firestore.indexes.json

03924bff 20
  1. ปรับใช้ดัชนีเหล่านี้ด้วยคำสั่งต่อไปนี้:
firebase deploy --only firestore:indexes

หลังจากนั้นไม่กี่นาทีดัชนีของคุณจะพร้อมใช้งานและข้อความแสดงข้อผิดพลาดจะหายไป

ในส่วนนี้เราจะเพิ่มความสามารถให้ผู้ใช้ส่งรีวิวร้านอาหารได้ จนถึงตอนนี้งานเขียนทั้งหมดของเราเป็นแบบปรมาณูและค่อนข้างเรียบง่าย หากมีข้อผิดพลาดเราอาจเพียงแจ้งให้ผู้ใช้ลองอีกครั้งมิฉะนั้นแอปของเราจะลองเขียนใหม่โดยอัตโนมัติ

แอปของเราจะมีผู้ใช้จำนวนมากที่ต้องการให้คะแนนร้านอาหารดังนั้นเราจึงต้องประสานการอ่านและเขียนหลาย ๆ ก่อนอื่นต้องส่งบทวิจารณ์จากนั้นจึงต้องอัปเดต count คะแนนของร้านอาหารและ average rating หากข้อใดข้อหนึ่งล้มเหลว แต่ไม่เป็นเช่นนั้นเราจะอยู่ในสถานะที่ไม่สอดคล้องกันซึ่งข้อมูลในส่วนหนึ่งของฐานข้อมูลของเราไม่ตรงกับข้อมูลในอีกส่วนหนึ่ง

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

  1. กลับไปที่ scripts/FriendlyEats.Data.js ไฟล์ของคุณ scripts/FriendlyEats.Data.js
  2. ค้นหาฟังก์ชัน FriendlyEats.prototype.addRating
  3. แทนที่ฟังก์ชันทั้งหมดด้วยรหัสต่อไปนี้

FriendlyEats.Data.js

0cec0aca 10

ในบล็อกด้านบนเราทริกเกอร์ธุรกรรมเพื่ออัปเดตค่าตัวเลขของ avgRating และ numRatings ในเอกสารร้านอาหาร ในขณะเดียวกันเราได้เพิ่มการ rating ใหม่ในชุดย่อย ratings

ในช่วงเริ่มต้นของ codelab นี้เราได้ตั้งกฎความปลอดภัยของแอปเพื่อเปิดฐานข้อมูลเพื่ออ่านหรือเขียนทั้งหมด ในแอปพลิเคชันจริงเราต้องการตั้งกฎที่ละเอียดกว่านี้เพื่อป้องกันการเข้าถึงหรือแก้ไขข้อมูลที่ไม่พึงปรารถนา

  1. ในส่วน การพัฒนา ของคอนโซล Firebase ให้คลิก ฐานข้อมูล
  2. คลิกแท็บ กฎ ในส่วน Cloud Firestore (หรือ คลิกที่นี่ เพื่อไปที่นั่นโดยตรง)
  3. แทนที่ค่าเริ่มต้นด้วยกฎต่อไปนี้จากนั้นคลิก เผยแพร่

firestore.rules

rules_version = '2';
service cloud.firestore {

  // Determine if the value of the field "key" is the same
  // before and after the request.
  function unchanged(key) {
    return (key in resource.data) 
      && (key in request.resource.data) 
      && (resource.data[key] == request.resource.data[key]);
  }

  match /databases/{database}/documents {
    // Restaurants:
    //   - Authenticated user can read
    //   - Authenticated user can create/update (for demo purposes only)
    //   - Updates are allowed if no fields are added and name is unchanged
    //   - Deletes are not allowed (default)
    match /restaurants/{restaurantId} {
      allow read: if request.auth != null;
      allow create: if request.auth != null;
      allow update: if request.auth != null
                    && (request.resource.data.keys() == resource.data.keys()) 
                    && unchanged("name");
      
      // Ratings:
      //   - Authenticated user can read
      //   - Authenticated user can create if userId matches
      //   - Deletes and updates are not allowed (default)
      match /ratings/{ratingId} {
        allow read: if request.auth != null;
        allow create: if request.auth != null
                      && request.resource.data.userId == request.auth.uid;
      }
    }
  }
}

กฎเหล่านี้ จำกัด การเข้าถึงเพื่อให้แน่ใจว่าลูกค้าทำการเปลี่ยนแปลงที่ปลอดภัยเท่านั้น ตัวอย่างเช่น:

  • การอัปเดตเอกสารร้านอาหารสามารถเปลี่ยนการให้คะแนนเท่านั้นไม่ใช่ชื่อหรือข้อมูลอื่น ๆ ที่ไม่เปลี่ยนรูป
  • สามารถสร้างการให้คะแนนได้ก็ต่อเมื่อ ID ผู้ใช้ตรงกับผู้ใช้ที่ลงชื่อเข้าใช้ซึ่งป้องกันการปลอมแปลง

อีกทางเลือกหนึ่งในการใช้คอนโซล Firebase คุณสามารถใช้ Firebase CLI เพื่อปรับใช้กฎกับโครงการ Firebase ของคุณ ไฟล์ firestore.rules ในไดเร็กทอรีการทำงานของคุณมีกฎจากด้านบนอยู่แล้ว ในการปรับใช้กฎเหล่านี้จากระบบไฟล์ในเครื่องของคุณ (แทนที่จะใช้คอนโซล Firebase) คุณต้องเรียกใช้คำสั่งต่อไปนี้:

firebase deploy --only firestore:rules

ใน codelab นี้คุณได้เรียนรู้วิธีดำเนินการอ่านและเขียนขั้นพื้นฐานและขั้นสูงด้วย Cloud Firestore ตลอดจนวิธีรักษาความปลอดภัยการเข้าถึงข้อมูลด้วยกฎความปลอดภัย คุณสามารถค้นหาโซลูชันทั้งหมดได้ในที่ เก็บ Quickstarts-js

หากต้องการเรียนรู้เพิ่มเติมเกี่ยวกับ Cloud Firestore โปรดไปที่แหล่งข้อมูลต่อไปนี้: