Trang này được dịch bởi Cloud Translation API.

Thêm chức năng mới vào ứng dụng web của bạn một cách nhanh chóng với Tiện ích mở rộng Firebase

1. Giới thiệu

Bàn thắng

Trong lớp học lập trình này, bạn sẽ thêm chức năng vào ứng dụng thị trường trực tuyến với sự trợ giúp của Tiện ích mở rộng Firebase . Thông qua lớp học lập trình này, bạn sẽ hiểu cách tiện ích mở rộng có thể giúp bạn dành ít thời gian hơn cho các nhiệm vụ quản lý và phát triển ứng dụng.

Những gì bạn sẽ xây dựng

Trong lớp học lập trình này, bạn sẽ thêm các tính năng sau vào ứng dụng web thị trường trực tuyến:

Tải hình ảnh nhanh hơn để tăng khả năng giữ chân người dùng
Giới hạn các mục trong cơ sở dữ liệu của bạn để cải thiện hiệu suất và giảm hóa đơn của bạn
Thực hiện tự động xóa dữ liệu người dùng cũ để tăng cường bảo vệ dữ liệu người dùng

Bạn sẽ học được gì

Cách khám phá tiện ích mở rộng cho các trường hợp sử dụng phổ biến
Cách cài đặt và định cấu hình tiện ích mở rộng trong dự án của bạn
Cách duy trì (giám sát, cập nhật và gỡ cài đặt) tiện ích mở rộng trong dự án của bạn

Lớp học lập trình này tập trung vào Tiện ích mở rộng Firebase. Để biết thông tin chi tiết về các sản phẩm Firebase khác được đề cập trong lớp học lập trình này, hãy tham khảo tài liệu về Firebase và các lớp học lập trình khác.

Những gì bạn cần

Máy tính đã cài đặt trình duyệt web hiện đại (khuyên dùng Chrome)
Tài khoản Google

2. Tạo và thiết lập dự án Firebase

Tạo dự án Firebase

Trong bảng điều khiển Firebase , hãy nhấp vào Thêm dự án và đặt tên cho dự án Firebase là FriendlyMarket .
Nhấp vào các tùy chọn tạo dự án. Chấp nhận các điều khoản của Firebase. Bỏ qua việc thiết lập Google Analytics vì bạn sẽ không sử dụng Analytics trong ứng dụng này.
Đợi dự án được cung cấp rồi nhấp vào Tiếp tục .

Ứng dụng bạn sẽ xây dựng sử dụng một số sản phẩm Firebase có sẵn cho ứng dụng web:

Xác thực Firebase để dễ dàng xác định người dùng của bạn
Cơ sở dữ liệu thời gian thực Firebase để lưu dữ liệu có cấu trúc trên đám mây và nhận thông báo ngay lập tức khi dữ liệu cập nhật
Cloud Storage cho Firebase để lưu hình ảnh trên đám mây

Bây giờ, bạn sẽ kích hoạt và định cấu hình các sản phẩm Firebase đó bằng bảng điều khiển Firebase.

Mặc dù xác thực không phải là trọng tâm của lớp học lập trình này nhưng điều quan trọng là phải có một số hình thức xác thực trong ứng dụng của bạn để nhận dạng duy nhất tất cả những người sử dụng nó. Bạn sẽ sử dụng email đăng nhập.

Trong bảng điều khiển Firebase, nhấp vào Phát triển ở bảng điều khiển bên trái.
Nhấp vào Xác thực rồi nhấp vào tab Phương thức đăng nhập (hoặc nhấp vào đây để chuyển trực tiếp đến tab Phương thức đăng nhập ).
Nhấp vào Email/Mật khẩu trong danh sách Nhà cung cấp dịch vụ đăng nhập , đặt nút Bật sang vị trí bật rồi nhấp vào Lưu .

Kích hoạt cơ sở dữ liệu thời gian thực

Ứng dụng sử dụng Cơ sở dữ liệu thời gian thực Firebase để lưu các mặt hàng để bán.

Trong phần Phát triển ở bảng điều khiển bên trái của bảng điều khiển Firebase, hãy nhấp vào Cơ sở dữ liệu .
Cuộn trang xuống qua ngăn Cloud Firestore và nhấp vào Tạo cơ sở dữ liệu trong ngăn Cơ sở dữ liệu thời gian thực .

Chọn Bắt đầu ở chế độ khóa , sau đó bấm Bật .

Đặt quy tắc bảo mật

Bây giờ, bạn sẽ đặt các quy tắc bảo mật cần thiết cho ứng dụng này. Đây là một số quy tắc ví dụ cơ bản để giúp bảo mật ứng dụng của bạn. Các quy tắc này cho phép mọi người xem các mặt hàng để bán nhưng những quy tắc này chỉ cho phép người dùng đã đăng nhập thực hiện các thao tác đọc và ghi khác. Đừng lo lắng về chi tiết cụ thể của những quy tắc này; bạn chỉ cần sao chép và dán chúng để thiết lập và chạy ứng dụng của mình.

Ở đầu bảng thông tin Cơ sở dữ liệu thời gian thực, hãy nhấp vào tab Quy tắc .

Sao chép và dán bộ quy tắc sau vào trường quy tắc trong tab Quy tắc :

{
  "rules": {
    ".read": false,
    ".write": false,
      "drafts": {
        ".indexOn": "seller",
        ".read": "auth.uid !== null",
        ".write": "auth.uid !== null"
    },
    "sellers": {
        ".read": "auth.uid !== null",
        ".write": "auth.uid !== null"
    },
      "forsale": {
        ".read": true,
        ".write": "auth.uid !== null"
      }
  }
}

Nhấp vào Xuất bản .

Kích hoạt bộ nhớ đám mây

Ứng dụng sử dụng Cloud Storage for Firebase để lưu hình ảnh các mặt hàng đang rao bán.

Trong phần Phát triển ở bảng điều khiển bên trái của bảng điều khiển Firebase, hãy nhấp vào Bộ nhớ .
Nhấp vào Bắt đầu .

Chấp nhận các giá trị mặc định để tạo vùng lưu trữ mặc định của bạn (nhấp Tiếp theo , giữ nguyên vị trí mặc định và nhấp vào Xong ).

Bây giờ, bạn sẽ đặt các quy tắc bảo mật cần thiết cho ứng dụng này. Các quy tắc này chỉ cho phép người dùng được xác thực đăng hình ảnh mới nhưng chúng cho phép bất kỳ ai xem hình ảnh của một mục được liệt kê.

Ở đầu bảng điều khiển Bộ nhớ , hãy nhấp vào tab Quy tắc .

Sao chép và dán bộ quy tắc sau vào trường quy tắc trong tab Quy tắc :

rules_version = '2';
service firebase.storage {
  match /b/{bucket}/o {
    
    match /{allPaths=**} {
      allow read, write: if request.auth != null;
    }
    
    match /friendlymarket/{ImageId} {
      allow read;
      allow write: if request.auth != null;
    }
    
  }
}

Nhấp vào Xuất bản .

3. Chạy ứng dụng mẫu

Phân nhánh dự án StackBlitz

Trong lớp học lập trình này, bạn xây dựng và triển khai một ứng dụng bằng StackBlitz , một trình chỉnh sửa trực tuyến được tích hợp một số quy trình làm việc của Firebase. Stackblitz không yêu cầu cài đặt phần mềm hoặc tài khoản StackBlitz đặc biệt.

StackBlitz cho phép bạn chia sẻ dự án với người khác. Những người khác có URL dự án StackBlitz của bạn có thể xem mã và phân nhánh dự án của bạn, nhưng họ không thể chỉnh sửa dự án StackBlitz của bạn.

Truy cập URL này để lấy mã bắt đầu: https://stackblitz.com/edit/friendmarket-codelab .
Ở đầu trang StackBlitz, nhấp vào Fork .

Bây giờ bạn đã có bản sao mã khởi đầu làm dự án StackBlitz của riêng mình. Vì bạn chưa đăng nhập nên "tài khoản" của bạn được gọi là @anonymous nhưng không sao cả. Dự án có một tên duy nhất, cùng với một URL duy nhất. Tất cả các tệp và thay đổi của bạn đều được lưu trong dự án StackBlitz này.

Thêm ứng dụng web Firebase vào dự án

Trong StackBlitz, xem tệp src/firebase-config.js của bạn. Đây là nơi bạn sẽ thêm đối tượng cấu hình Firebase.
Quay lại bảng điều khiển Firebase, điều hướng đến trang tổng quan về dự án của bạn bằng cách nhấp vào Tổng quan về dự án ở trên cùng bên trái.
Ở giữa trang tổng quan về dự án của bạn, hãy nhấp vào biểu tượng web để tạo Ứng dụng web Firebase mới.
Đăng ký ứng dụng với biệt danh FriendlyMarket Codelab .
Đối với lớp học lập trình này, đừng chọn hộp bên cạnh Đồng thời thiết lập dịch vụ lưu trữ Firebase cho ứng dụng này . Thay vào đó, bạn sẽ sử dụng khung xem trước StackBlitz.
Nhấn vào Đăng ký ứng dụng .
Sao chép đối tượng cấu hình Firebase của ứng dụng vào khay nhớ tạm của bạn. Đừng sao chép thẻ <script> . Lưu ý: Sau này nếu cần tìm cấu hình thì làm theo hướng dẫn tại đây .

Bấm vào Tiếp tục để điều khiển .

Thêm cấu hình dự án của bạn vào ứng dụng của bạn:

Quay lại StackBlitz, đi tới tệp src/firebase-config.js .
Dán đoạn cấu hình của bạn vào tệp. Sau khi bạn thực hiện, nó sẽ trông như thế này (nhưng với các giá trị của dự án của riêng bạn trong đối tượng cấu hình):

Điểm khởi đầu của ứng dụng này là gì?

Hãy xem bản xem trước tương tác ở phía bên phải màn hình StackBlitz:

Lớp học lập trình này giúp bạn bắt đầu bằng mã cho một ứng dụng thị trường cơ bản. Bất kỳ người dùng nào cũng có thể xem danh sách các mặt hàng để bán và nhấp vào liên kết để xem trang chi tiết của mặt hàng. Nếu người dùng đăng nhập, họ sẽ thấy thông tin liên hệ của người bán để có thể thương lượng giá và mua mặt hàng.

Hãy thử ứng dụng:

Đăng nhập bằng nút ở đầu màn hình chính. Bạn có thể sử dụng địa chỉ email, tên và mật khẩu giả.
Nhấp vào nút Bán thứ gì đó ở góc dưới cùng bên phải để tạo danh sách.
Đối với Tiêu đề , nhập Xylophone .
Đối với Giá chào bán , nhập 50 .
Đối với Mục Mô tả , hãy nhập thông tin sau: This high quality xylophone can be used to play music.
Tải hình ảnh xylophone này xuống máy tính của bạn và tải nó lên bằng nút HÌNH ẢNH CỦA MÓN HÀNG CỦA BẠN .

Sau khi bạn điền vào tất cả các trường và tải hình ảnh lên, hãy nhấp vào Đăng .
Tìm danh sách mới của bạn. Nhấp vào mặt hàng của bạn để xem màn hình chi tiết, sau đó mở rộng bảng thông tin liên hệ của Người bán .
Quay lại bảng điều khiển Firebase. Trong bảng điều khiển Cơ sở dữ liệu , bây giờ bạn sẽ thấy mục nhập cho mặt hàng bạn đã đăng trong nút forsale . Trong bảng điều khiển Bộ nhớ , bạn cũng sẽ tìm thấy hình ảnh bạn đã tải lên trong đường dẫn friendlymarket .

4. Tìm và cài đặt tiện ích mở rộng

Vấn đề

Sau khi thực hiện một số nghiên cứu về người dùng cho ứng dụng của mình, bạn phát hiện ra rằng hầu hết người dùng truy cập trang web của bạn từ điện thoại thông minh chứ không phải máy tính để bàn. Tuy nhiên, số liệu thống kê của bạn cũng cho thấy rằng người dùng thiết bị di động có xu hướng rời khỏi trang web của bạn ("rời") chỉ sau vài giây.

Tò mò, bạn kiểm tra trang web của mình với tốc độ kết nối di động. (Tìm hiểu cách thực hiện điều đó tại đây .) Bạn nhận thấy rằng hình ảnh mất rất nhiều thời gian để tải và hoàn toàn không được lưu vào bộ nhớ đệm trong trình duyệt. Thời gian tải lâu đó phát sinh trên mỗi lượt xem trang!

Giải pháp

Sau khi đọc về cách tối ưu hóa hình ảnh , bạn quyết định thực hiện hai bước để cải thiện hiệu suất tải hình ảnh:

Nén hình ảnh. Ngay cả điện thoại di động cũng chụp ảnh với độ phân giải cao hơn nhiều so với mức cần thiết cho nhu cầu của ứng dụng này. Việc giảm kích thước tệp sẽ tăng tốc thời gian tải mà không làm giảm độ phân giải trong ứng dụng một cách đáng chú ý.
Bộ nhớ đệm . Theo mặc định, các đối tượng Cloud Storage có các tiêu đề yêu cầu trình duyệt không lưu hình ảnh vào bộ nhớ đệm, nghĩa là trình duyệt của người dùng sẽ tải đi tải lại cùng một hình ảnh! May mắn thay, bạn có thể thay đổi các tiêu đề này để cho phép lưu vào bộ nhớ đệm. Cả SDK lưu trữ đám mây phía máy khách và SDK quản trị Firebase đều cho phép bạn đặt các tiêu đề này.

Để nén hình ảnh, bạn cần giới hạn chất lượng tải lên hoặc thực hiện quy trình phía máy chủ để thay đổi kích thước hình ảnh. Hãy xem xét sự đánh đổi:

Phía khách hàng . Đối với quy trình phía máy khách, bạn chỉ có thể giới hạn kích thước tệp cho hình ảnh được tải lên. Điều này có nghĩa là bạn không cần phải viết hoặc duy trì bất kỳ logic máy chủ mới nào. Tuy nhiên, điều đó cũng có nghĩa là người bán của bạn cần tìm ra cách thay đổi kích thước hình ảnh của chính họ, đây là một rào cản khó khăn và không trực quan trong việc tạo danh sách mới.
Phía máy chủ . Nếu sử dụng Chức năng đám mây cho Firebase, bạn có thể kích hoạt chức năng tự động thay đổi kích thước hình ảnh khi tải lên. Điều này có nghĩa là người bán có thể tải lên bất kỳ kích thước hình ảnh nào họ thích (không cần phải làm thêm gì) và chức năng phụ trợ của bạn có thể thay đổi kích thước hình ảnh một cách liền mạch. Thậm chí còn có sẵn một mẫu cho chức năng này!

Có vẻ như phía máy chủ là con đường để đi. Nhưng ý tưởng này vẫn liên quan đến việc sao chép mẫu , làm theo hướng dẫn thiết lập và sau đó triển khai chức năng với Firebase CLI. Thay đổi kích thước hình ảnh có vẻ giống như một trường hợp sử dụng phổ biến. Không có giải pháp nào dễ dàng hơn sao?

Một giải pháp dễ dàng hơn

Bạn may mắn. Có một giải pháp dễ dàng hơn: Tiện ích mở rộng Firebase! Hãy kiểm tra danh mục các tiện ích mở rộng có sẵn trên trang web Firebase .

Nhìn kìa! Có một tiện ích mở rộng có tên "Thay đổi kích thước hình ảnh". Điều đó có vẻ đầy hứa hẹn.

Hãy sử dụng tiện ích mở rộng này trong ứng dụng của bạn!

Cài đặt tiện ích mở rộng

Nhấp vào Xem chi tiết để xem thêm thông tin về tiện ích mở rộng này. Trong phần Những gì bạn có thể định cấu hình , tiện ích mở rộng cho phép bạn đặt kích thước mà bạn muốn thay đổi kích thước và thậm chí bạn có thể đặt tiêu đề bộ đệm. Hoàn hảo!
Nhấp vào nút Cài đặt trong bảng điều khiển trên trang chi tiết của tiện ích mở rộng . Bạn sẽ được đưa đến trang bảng điều khiển Firebase liệt kê tất cả các dự án của bạn.
Chọn dự án FriendlyMarket mà bạn đã tạo cho lớp học lập trình này.
Làm theo hướng dẫn trên màn hình cho đến khi bạn đạt đến bước Định cấu hình tiện ích mở rộng . Hướng dẫn sẽ hiển thị bản tóm tắt cơ bản về tiện ích mở rộng cũng như mọi tài nguyên mà tiện ích mở rộng sẽ tạo và truy cập các vai trò mà tiện ích mở rộng yêu cầu.
Trong trường ** Cache-Control **tiêu đề dành cho hình ảnh đã thay đổi kích thước, hãy nhập thông tin sau:

public, max-age=31536000

Để các tham số khác ở giá trị mặc định.
Nhấp vào Cài đặt tiện ích mở rộng .

Trong khi chờ quá trình cài đặt hoàn tất...

Cài đặt bằng giao diện dòng lệnh Firebase

Nếu bạn cảm thấy thoải mái hơn với các công cụ dòng lệnh, bạn cũng có thể cài đặt và quản lý các tiện ích mở rộng bằng Firebase CLI! Chỉ cần sử dụng lệnh firebase ext , có sẵn trong phiên bản CLI mới nhất. Thông tin chi tiết có thể được tìm thấy ở đây .

(Tùy chọn) Tìm hiểu thêm về tiêu đề Kiểm soát bộ đệm

Giá trị tiêu đề Kiểm soát bộ đệm public, max-age=31536000 có nghĩa là hình ảnh sẽ được lưu vào bộ nhớ đệm tối đa 1 năm. Để tìm hiểu thêm về tiêu đề Cache-Control, hãy xem tài liệu này .

Cập nhật mã khách hàng

Tiện ích mở rộng mà bạn đã cài đặt sẽ ghi một hình ảnh đã thay đổi kích thước vào cùng một nhóm với hình ảnh gốc. Hình ảnh đã thay đổi kích thước có kích thước được định cấu hình được thêm vào tên tệp của nó. Vì vậy, nếu đường dẫn tệp gốc trông giống như friendlymarket/user1234-car.png , thì đường dẫn tệp của hình ảnh đã thay đổi kích thước sẽ trông giống như friendlymarket/user1234-car_200x200.png .

Hãy cập nhật ứng dụng để ứng dụng tìm nạp hình ảnh đã được thay đổi kích thước thay vì hình ảnh có kích thước đầy đủ.

Trong StackBlitz, mở tệp src/firebase-refs.js .
Thay thế hàm getImageRef hiện có bằng mã sau để tạo tham chiếu cho hình ảnh đã thay đổi kích thước:

export function getImageRef(storage, imagePath) {
  const xDimension = 200;
  const yDimension = 200;

  // find the '.' in 'file.jpg', 'file.png', etc
  const fileExtensionIndex = imagePath.lastIndexOf('.');

  const pathNameWithoutExtension = imagePath.substring(0, fileExtensionIndex);
  const dimensions = `${xDimension}x${yDimension}`;
  const fileExtension = imagePath.substring(fileExtensionIndex);

  return {
    resized: storage().ref(
      `${pathNameWithoutExtension}_${dimensions}${fileExtension}`
    ),
    original: storage().ref(imagePath)
  };
}

Kiểm tra nó

Vì tiện ích mở rộng này theo dõi các hình ảnh mới tải lên nên hình ảnh hiện tại của bạn sẽ không bị thay đổi kích thước.

Tạo một bài đăng mới để xem tiện ích mở rộng đang hoạt động:

Nhấp vào Chợ thân thiện ở thanh trên cùng của ứng dụng để điều hướng đến màn hình chính.
Nhấp vào nút Bán thứ gì đó ở góc dưới bên phải của ứng dụng để tạo danh sách.
Đối với Tiêu đề , nhập Coffee
Đối với Giá chào bán , nhập 1
Đối với Mô tả mặt hàng , hãy nhập thông tin sau: Selling one cafe latte. It has foam art in the shape of a bear .
Tải hình ảnh cốc cà phê này về máy tính và tải lên bằng nút HÌNH ẢNH CỦA MÓN HÀNG CỦA BẠN .
Sau khi bạn điền vào tất cả các trường và tải hình ảnh lên, hãy nhấp vào Đăng . Bạn sẽ thấy danh sách cà phê xuất hiện bên dưới Xylophone!
Trong bảng điều khiển Chức năng trong bảng điều khiển Firebase, hãy nhấp vào tab Nhật ký . Bạn sẽ thấy nhật ký từ hàm cho biết nó đã được thực thi.

Đi tới bảng điều khiển Lưu trữ để xem cả hình ảnh cà phê gốc và phiên bản đã thay đổi kích thước trong đường dẫn friendlymarket .
Trong ngăn xem trước StackBlitz, hãy tải lại màn hình chính ứng dụng của bạn một vài lần. Bạn sẽ nhận thấy hình ảnh cà phê tải nhanh hơn đáng kể so với hình ảnh xylophone.

Hình ảnh tải nhanh hơn trong lần tải trang đầu tiên vì nó nhỏ hơn và ở trang tiếp theo làm mới, hình ảnh sẽ tải từ bộ đệm của trình duyệt thay vì kích hoạt yêu cầu mạng.

5. Cấu hình lại tiện ích mở rộng

Vấn đề

Ứng dụng của bạn tự động lưu phiên bản nháp của danh sách người bán. Người dùng của bạn thích tính năng này, nhưng số liệu thống kê của bạn hơi đáng lo ngại. Báo cáo của bạn nói rằng chỉ có khoảng 10% bản nháp thực sự được đăng và 90% còn lại chỉ chiếm dung lượng trong cơ sở dữ liệu của bạn.

Giải pháp

Sau một số tính toán tổng thể, bạn nhận ra rằng bạn chỉ cần lưu khoảng năm bản nháp vào bất kỳ thời điểm nào.

Bạn có nhớ danh mục Tiện ích mở rộng Firebase không? Có lẽ đã có giải pháp được xây dựng cho tình huống này. Hãy cài đặt tiện ích mở rộng Limit Child Nodes để tự động giữ số lượng bản nháp đã lưu ở mức năm hoặc ít hơn. Tiện ích mở rộng sẽ xóa bản nháp cũ nhất bất cứ khi nào có bản nháp mới được thêm vào.

Nhấp vào nút Cài đặt trên trang chi tiết của tiện ích mở rộng .
Chọn dự án Firebase mà bạn đang sử dụng cho ứng dụng web thị trường của mình.
Làm theo hướng dẫn trên màn hình cho đến khi bạn đạt đến bước Định cấu hình tiện ích mở rộng .
Đối với đường dẫn Cơ sở dữ liệu thời gian thực , hãy nhập drafts . Đây là đường dẫn trong cơ sở dữ liệu nơi lưu bản nháp.
Đối với Số lượng nút tối đa cần giữ lại , hãy nhập 5 . Điều này có nghĩa là năm bản nháp cho danh sách của mỗi mặt hàng sẽ được lưu và nếu một bản nháp khác được thêm vào, bản nháp cũ nhất sẽ tự động bị xóa.
Nhấp vào Cài đặt tiện ích mở rộng .

Trong khi chờ quá trình cài đặt hoàn tất...

Tiện ích mở rộng giám sát

Khi bạn cài đặt một tiện ích mở rộng, quy trình sẽ tạo ra một số chức năng. Bạn có thể muốn kiểm tra tần suất chạy các chức năng này hoặc xem nhật ký và tỷ lệ lỗi. Để biết thông tin chi tiết về cách giám sát tiện ích mở rộng của bạn, hãy xem Quản lý tiện ích mở rộng đã cài đặt . Làm theo hướng dẫn trong tài liệu để xem các chức năng được tạo bởi tiện ích mở rộng Thay đổi kích thước hình ảnh ở bước trước.

Gỡ cài đặt tiện ích mở rộng

Để xóa tiện ích mở rộng khỏi dự án của bạn, bạn có thể muốn xóa các chức năng riêng lẻ mà tiện ích mở rộng tạo ra, nhưng điều này có thể dẫn đến hành vi không mong muốn vì một tiện ích mở rộng có thể tạo nhiều chức năng. Tìm hiểu cách gỡ cài đặt tiện ích mở rộng trong tài liệu.

Việc gỡ cài đặt sẽ xóa tất cả tài nguyên (như các chức năng của tiện ích mở rộng) và tài khoản dịch vụ được tạo cho phiên bản tiện ích mở rộng đó. Tuy nhiên, mọi tạo phẩm do tiện ích mở rộng tạo ra (như hình ảnh đã thay đổi kích thước) sẽ vẫn còn trong dự án của bạn sau khi gỡ cài đặt tiện ích mở rộng.

Cài đặt nhiều bản sao của tiện ích mở rộng trong một dự án

Bạn không bị giới hạn trong việc cài đặt một phiên bản duy nhất của tiện ích mở rộng nhất định trong một dự án. Nếu bạn muốn giới hạn các mục trong đường dẫn khác, bạn có thể cài đặt một phiên bản khác của tiện ích mở rộng này. Tuy nhiên, vì mục đích của lớp học lập trình này, bạn sẽ chỉ cài đặt tiện ích này một lần.

Xem nó hoạt động

Đảm bảo rằng bạn đã đăng nhập bằng tài khoản bạn đã sử dụng để đăng xylophone hoặc latte
Tạo một số bản nháp:
Nhấp vào nút Bán thứ gì đó ở góc dưới bên phải của ứng dụng
Chỉnh sửa Tiêu đề thành "Bản nháp 1".
Kéo xuống phần Bản nháp và xem số lượng bản nháp. Nên có ít nhất hai.
Nhấp vào nút THỊ TRƯỜNG THÂN THIỆN ở thanh ứng dụng trên cùng. Bằng cách này, bạn sẽ có bản nháp đã lưu nhưng không cần đăng nó.
Lặp lại cho "Bản nháp 2", "Bản nháp 3", v.v. cho "Bản nháp 6".
Khi bạn tạo "Bản nháp 6", hãy lưu ý rằng "Bản nháp 1 sẽ biến mất khỏi phần Bản nháp của bạn.
Như bạn đã làm với tiện ích mở rộng Thay đổi kích thước hình ảnh, bạn có thể kiểm tra nhật ký chức năng để xem chức năng nào được kích hoạt.

Rất tiếc, giới hạn số bản nháp cần giữ lại quá nhỏ

Nhóm hỗ trợ khách hàng của bạn liên hệ và cho bạn biết rằng một số người bán hàng hiệu quả nhất đang phàn nàn rằng bản nháp của họ đang bị xóa trước khi họ có thể đăng chúng. Bạn kiểm tra phép toán của mình với đồng đội và nhận ra rằng phép toán của bạn sai lệch tới 10.000!

Làm thế nào bạn có thể khắc phục điều này? Hãy cấu hình lại tiện ích mở rộng đã cài đặt!

Trong khung bên trái của bảng điều khiển Firebase, hãy nhấp vào Tiện ích mở rộng .
Trên thẻ của tiện ích đã cài đặt, nhấp vào Quản lý .
Ở góc trên bên phải, nhấp vào Định cấu hình lại tiện ích mở rộng .
Thay đổi số lượng nút tối đa để giữ thành 50000 .
Nhấp vào để lưu .

Và đó là tất cả những gì bạn cần làm! Trong thời gian tiện ích mở rộng cập nhật, bạn có thể nói chuyện với nhóm hỗ trợ của mình và cho họ biết rằng bản sửa lỗi đã được triển khai.

6. Tự động xóa dữ liệu người dùng

Vấn đề

Nhóm hỗ trợ khách hàng của bạn đã liên hệ lại với bạn. Những người bán đã xóa tài khoản của họ vẫn nhận được email từ những người dùng khác và họ rất tức giận! Những người bán này mong đợi rằng địa chỉ email của họ sẽ bị xóa khỏi hệ thống của bạn khi họ xóa tài khoản của mình.

Hiện tại, bộ phận hỗ trợ đã xóa dữ liệu của từng người dùng theo cách thủ công, nhưng phải có cách tốt hơn! Bạn nghĩ về điều đó và cân nhắc việc viết công việc hàng loạt của riêng mình chạy định kỳ và xóa địa chỉ email khỏi các tài khoản đã xóa. Nhưng việc xóa dữ liệu người dùng có vẻ như là một vấn đề khá phổ biến. Có lẽ Tiện ích mở rộng Firebase cũng có thể giúp giải quyết vấn đề này.

Giải pháp

Bạn sẽ định cấu hình tiện ích mở rộng Xóa dữ liệu người dùng để tự động xóa nút users/uid trong cơ sở dữ liệu khi người dùng xóa tài khoản của họ.

Nhấp vào nút Cài đặt trên trang chi tiết của tiện ích mở rộng .
Chọn dự án Firebase mà bạn đang sử dụng cho ứng dụng web thị trường của mình.
Làm theo hướng dẫn trên màn hình cho đến khi bạn đạt đến bước Định cấu hình tiện ích mở rộng .
Đối với đường dẫn Cơ sở dữ liệu thời gian thực , hãy nhập sellers/{UID} . Phần sellers là nút có nút con chứa địa chỉ email của người dùng và {UID} là ký tự đại diện. Với cấu hình này, tiện ích mở rộng sẽ biết rằng khi người dùng có UID là 1234 xóa tài khoản của họ, tiện ích mở rộng sẽ xóa sellers/1234 khỏi cơ sở dữ liệu.
Nhấp vào Cài đặt tiện ích mở rộng .

Trong khi chờ quá trình cài đặt hoàn tất...

Hãy nói về khả năng tùy chỉnh

Trong lớp học lập trình này, bạn đã thấy rằng Tiện ích mở rộng Firebase có thể giúp giải quyết các trường hợp sử dụng phổ biến và các tiện ích mở rộng đó có thể định cấu hình để phù hợp với nhu cầu của ứng dụng.

Tuy nhiên, tiện ích mở rộng không thể giải quyết mọi vấn đề và vấn đề xóa dữ liệu người dùng là một ví dụ điển hình cho điều đó. Mặc dù tiện ích mở rộng Xóa dữ liệu người dùng giải quyết khiếu nại hiện tại rằng các email vẫn bị lộ sau khi người dùng xóa tài khoản của họ nhưng tiện ích mở rộng sẽ không xóa mọi thứ. Ví dụ: danh sách mặt hàng vẫn có sẵn và mọi hình ảnh trong Cloud Storage cũng sẽ được giữ nguyên. Tiện ích mở rộng Xóa dữ liệu người dùng cho phép chúng tôi định cấu hình đường dẫn Cloud Storage để xóa nhưng vì người dùng có thể tải lên nhiều tệp khác nhau với nhiều tên khác nhau nên bạn sẽ không thể định cấu hình tiện ích mở rộng này để tự động xóa các tạo phẩm này. Đối với những tình huống như thế này, Cloud Functions cho Firebase có thể phù hợp hơn để bạn có thể viết mã dành riêng cho mô hình dữ liệu của ứng dụng của mình.

Tiện ích mở rộng và thanh toán

Bản thân tiện ích mở rộng Firebase không mất phí sử dụng (bạn chỉ bị tính phí cho các tài nguyên cơ bản mà bạn sử dụng), nhưng một số tài nguyên cơ bản mà tiện ích mở rộng cần có có thể yêu cầu thanh toán. Lớp học lập trình này được thiết kế để hoàn thành mà không cần có tài khoản thanh toán. Tuy nhiên, việc thiết lập gói Flame hoặc Blaze sẽ mở ra rất nhiều tiện ích mở rộng Firebase thực sự thú vị.

Ví dụ: bạn có thể rút ngắn URL , kích hoạt email , xuất bộ sưu tập sang BigQuery và hơn thế nữa! Xem danh mục đầy đủ các tiện ích mở rộng tại đây .

Nếu có tiện ích mở rộng mà bạn muốn có nhưng hiện tại nó không có sẵn, chúng tôi rất muốn biết về tiện ích đó! Gửi yêu cầu tính năng với Hỗ trợ Firebase để đề xuất tiện ích mở rộng mới.

Xem nó hoạt động

Sau khi quá trình cài đặt tiện ích mở rộng của bạn hoàn tất, hãy xóa người dùng và xem điều gì sẽ xảy ra:

Trong bảng điều khiển Firebase, hãy đi tới bảng điều khiển Cơ sở dữ liệu thời gian thực của bạn.
Mở rộng nút sellers .
Thông tin của mỗi người bán được khóa trên UID người dùng của họ. Chọn UID của người dùng.
Trong bảng điều khiển Firebase, hãy truy cập trang tổng quan Xác thực của bạn và tìm UID người dùng đó.
Mở rộng menu bên phải UID và chọn Xóa tài khoản .

Quay lại bảng điều khiển Cơ sở dữ liệu thời gian thực của bạn. Thông tin của người bán sẽ biến mất!

7. Xin chúc mừng!

Mặc dù không viết nhiều mã trong lớp học lập trình này nhưng bạn đã thêm các tính năng quan trọng vào ứng dụng Marketplace của mình.

Bạn đã học cách khám phá, định cấu hình, cài đặt và định cấu hình lại các tiện ích mở rộng. Ngoài ra, bạn đã tìm hiểu về cách giám sát các tiện ích mở rộng đã cài đặt và cách gỡ cài đặt chúng nếu cần.

Cái gì tiếp theo?

Kiểm tra một số tiện ích mở rộng khác:

Dịch chuỗi văn bản trong Cloud Firestore (yêu cầu tài khoản thanh toán)
Thêm người dùng mới vào danh sách email Mailchimp (yêu cầu tài khoản thanh toán)
Rút ngắn URL (yêu cầu tài khoản thanh toán)

Cần thêm mã phía máy chủ tùy chỉnh?

Hãy xem lớp học lập trình Chức năng đám mây cho Firebase

Các tài liệu hữu ích khác

Quản lý tiện ích mở rộng:

Tìm hiểu chi tiết hơn về tiện ích mở rộng:

Xem mã nguồn và tài liệu của từng tiện ích mở rộng trên GitHub
Tìm hiểu về các quyền và quyền truy cập được cấp cho tiện ích mở rộng

Thêm chức năng mới vào ứng dụng web của bạn một cách nhanh chóng với Tiện ích mở rộng Firebase

1. Giới thiệu

Bàn thắng

Những gì bạn sẽ xây dựng

Bạn sẽ học được gì

Những gì bạn cần

2. Tạo và thiết lập dự án Firebase

Tạo dự án Firebase

Kích hoạt đăng nhập email

Kích hoạt cơ sở dữ liệu thời gian thực

Đặt quy tắc bảo mật

Kích hoạt bộ nhớ đám mây

3. Chạy ứng dụng mẫu

Phân nhánh dự án StackBlitz

Thêm ứng dụng web Firebase vào dự án

Điểm khởi đầu của ứng dụng này là gì?

4. Tìm và cài đặt tiện ích mở rộng

Vấn đề

Giải pháp

Một giải pháp dễ dàng hơn

Cài đặt tiện ích mở rộng

Trong khi chờ quá trình cài đặt hoàn tất...

Cài đặt bằng giao diện dòng lệnh Firebase

(Tùy chọn) Tìm hiểu thêm về tiêu đề Kiểm soát bộ đệm

Cập nhật mã khách hàng

Kiểm tra nó

5. Cấu hình lại tiện ích mở rộng

Vấn đề

Giải pháp

Trong khi chờ quá trình cài đặt hoàn tất...

Tiện ích mở rộng giám sát

Gỡ cài đặt tiện ích mở rộng

Cài đặt nhiều bản sao của tiện ích mở rộng trong một dự án

Xem nó hoạt động

Rất tiếc, giới hạn số bản nháp cần giữ lại quá nhỏ

6. Tự động xóa dữ liệu người dùng

Vấn đề

Giải pháp

Trong khi chờ quá trình cài đặt hoàn tất...

Hãy nói về khả năng tùy chỉnh

Tiện ích mở rộng và thanh toán

Xem nó hoạt động

7. Xin chúc mừng!

Cái gì tiếp theo?

Cần thêm mã phía máy chủ tùy chỉnh?

Các tài liệu hữu ích khác