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

Thêm nhanh chức năng mới vào ứng dụng web của bạn bằng Tiện ích Firebase

1. Giới thiệu

Mục tiêu

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 trang web thương mại trực tuyến nhờ Tiện ích Firebase. Thông qua lớp học lập trình này, bạn sẽ hiểu được cách các tiện ích có thể giúp bạn giảm thời gian cho các nhiệm vụ quản lý và phát triển ứng dụng.

Sản phẩm bạn sẽ tạo ra

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 một ứng dụng web trang web thương mại trực tuyến:

Tải hình ảnh nhanh hơn để tăng tỷ lệ giữ chân người dùng
Giới hạn số mục nhập trong cơ sở dữ liệu để cải thiện hiệu suất và giảm hoá đơn
Triển khai tính năng tự động xoá dữ liệu người dùng cũ để tăng cường bảo vệ dữ liệu người dùng

Kiến thức bạn sẽ học được

Cách khám phá các tiện ích 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 trong dự án
Cách duy trì (theo dõi, cập nhật và gỡ cài đặt) các tiện ích trong dự án

Lớp học lập trình này tập trung vào Tiện ích 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.

Bạn cần có

Máy tính đã cài đặt trình duyệt web hiện đại (nê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 của Firebase, hãy nhấp vào Thêm dự án rồi đặt tên cho dự án Firebase là FriendlyMarket.
Nhấp vào các tuỳ chọn tạo dự án. Chấp nhận các điều khoản của Firebase. Bỏ qua bước thiết lập Google Analytics vì bạn sẽ không sử dụng Analytics trong ứng dụng này.
Chờ dự án được cấp phép, rồi nhấp vào Tiếp tục.

Ứng dụng mà bạn sẽ tạo sử dụng một số sản phẩm Firebase có sẵn cho các ứng dụng web:

Xác thực Firebase để dễ dàng xác định người dùng
Cơ sở dữ liệu theo thời gian thực của Firebase để lưu dữ liệu có cấu trúc trên đám mây và nhận thông báo tức thì 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ẽ bật và định cấu hình các sản phẩm Firebase đó bằng bảng điều khiển của Firebase.

Nâng cấp gói giá Firebase

Để sử dụng Tiện ích Firebase và các dịch vụ đám mây cơ bản của tiện ích cũng như Bộ nhớ trên đám mây cho Firebase, dự án Firebase của bạn cần phải sử dụng gói giá trả theo mức sử dụng (Blaze), tức là dự án được liên kết với một tài khoản Thanh toán trên đám mây.

Tài khoản Cloud Billing cần có một phương thức thanh toán, chẳng hạn như thẻ tín dụng.
Nếu bạn mới sử dụng Firebase và Google Cloud, hãy kiểm tra xem bạn có đủ điều kiện nhận khoản tín dụng 300 USD và tài khoản dùng thử miễn phí trên Cloud Billing hay không.
Nếu bạn tham gia lớp học lập trình này trong một sự kiện, hãy hỏi người tổ chức xem có khoản tín dụng Google Cloud nào không.

Để nâng cấp dự án lên gói Blaze, hãy làm theo các bước sau:

Trong bảng điều khiển của Firebase, hãy chọn nâng cấp gói.
Chọn gói Blaze. Làm theo hướng dẫn trên màn hình để liên kết tài khoản Cloud Billing với dự án của bạn.
Nếu cần tạo tài khoản Cloud Billing trong quá trình nâng cấp này, bạn có thể cần quay lại quy trình nâng cấp trong bảng điều khiển Firebase để hoàn tất quá trình nâng cấp.

Mặc dù việc 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 bạn cần có một số hình thức xác thực trong ứng dụng để xác định riêng từng người dùng ứng dụng. Bạn sẽ sử dụng phương thức đăng nhập bằng email.

Trong bảng điều khiển Firebase, hãy nhấp vào Phát triển trong bảng điều khiển bên trái.
Nhấp vào Xác thực, sau đó nhấp vào thẻ Phương thức đăng nhập (hoặc nhấp vào đây để chuyển thẳng đến thẻ 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 chuyển Bật sang vị trí bật rồi nhấp vào Lưu.

Bật Cơ sở dữ liệu theo thời gian thực

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

Trong bảng điều khiển bên trái của Firebase, hãy mở rộng mục Tạo rồi chọn Cơ sở dữ liệu theo thời gian thực.
Nhấp vào Tạo cơ sở dữ liệu.
Chọn một vị trí cho cơ sở dữ liệu, sau đó nhấp vào Tiếp theo.
Đối với một ứng dụng thực tế, bạn nên chọn một vị trí gần với người dùng.
Nhấp vào Bắt đầu ở chế độ thử nghiệm. Đọc tuyên bố từ chối trách nhiệm về các quy tắc bảo mật.
Trong các bước tiếp theo của lớp học lập trình này, bạn sẽ thêm Quy tắc bảo mật để bảo mật dữ liệu của mình. Đừng phân phối hoặc công khai ứng dụng mà không thêm Quy tắc bảo mật cho cơ sở dữ liệu của bạn.
Nhấp vào Tạo.

Đặt quy tắc bảo mật cho cơ sở dữ liệu

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. Dưới đây là một số quy tắc mẫu 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 đang bán, nhưng 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ề thông tin chi tiết của các quy tắc này; bạn chỉ cần sao chép và dán các quy tắc đó để ứng dụng của bạn hoạt động.

Ở đầu trang tổng quan về Cơ sở dữ liệu theo thời gian thực, hãy nhấp vào thẻ Quy tắc.

Sao chép và dán bộ quy tắc sau vào trường quy tắc trong thẻ 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.

Thiết lập Cloud Storage cho Firebase

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

Sau đây là cách thiết lập Cloud Storage cho Firebase trong dự án Firebase:

Trong bảng điều khiển bên trái của Firebase, hãy mở rộng mục Bản dựng rồi chọn Bộ nhớ.
Nhấp vào Bắt đầu.
Chọn vị trí cho bộ chứa Bộ nhớ mặc định.
Các bộ chứa trong US-WEST1, US-CENTRAL1 và US-EAST1 có thể tận dụng cấp"Luôn miễn phí" cho Google Cloud Storage. Các bộ chứa ở tất cả các vị trí khác tuân theo mức giá và mức sử dụng của Google Cloud Storage.
Nhấp vào Bắt đầu ở chế độ thử nghiệm. Đọc tuyên bố từ chối trách nhiệm về các quy tắc bảo mật.
Trong các bước tiếp theo của lớp học lập trình này, bạn sẽ thêm Quy tắc bảo mật để bảo mật dữ liệu của mình. Đừng phân phối hoặc hiển thị công khai ứng dụng mà không thêm Quy tắc bảo mật cho bộ nhớ.
Nhấp vào Tạo.

Thiết lập quy tắc bảo mật cho bộ nhớ

Bây giờ, bạn sẽ thiết lập 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 đã xác thực đăng ảnh mới, nhưng cho phép mọi người xem ảnh của một mặt hàng được đăng.

Ở đầu trang tổng quan Bộ nhớ, hãy nhấp vào thẻ Quy tắc.

Sao chép và dán bộ quy tắc sau vào trường quy tắc trong thẻ 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

Tạo nhánh dự án StackBlitz

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

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 vào URL này để xem mã khởi động: https://stackblitz.com/edit/friendlymarket-codelab.
Ở đầu trang StackBlitz, hãy nhấp vào Fork (Tạo nhánh).

Giờ đây, bạn có một bản sao của mã khởi động dưới dạng 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 điều đó không sao. Dự án có một tên riêng biệt cùng với một URL riêng biệt. Tất 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, hãy xem tệp src/firebase-config.js. Đâ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, hãy chuyển đến trang tổng quan của dự á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 của dự án, hãy nhấp vào biểu tượng web để tạo một Ứng dụng web Firebase mới.
Đăng ký ứng dụng bằng biệt hiệu FriendlyMarket Codelab.
Đối với lớp học lập trình này, đừng đánh dấu vào hộp bên cạnh Cũng thiết lập tính năng Lưu trữ Firebase cho ứng dụng này. Thay vào đó, bạn sẽ sử dụng ngăn xem trước StackBlitz.
Nhấp 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 bảng nhớ tạm. Đừng sao chép thẻ <script>. Lưu ý: Nếu sau này bạn cần tìm cấu hình, hãy làm theo hướng dẫn tại đây.

Nhấp vào Tiếp tục đến bảng điều khiển.

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

Quay lại StackBlitz, hãy chuyển đến tệp src/firebase-config.js.
Dán đoạn mã cấu hình vào tệp. Sau khi bạn thực hiện, cấu hình sẽ có dạng như sau (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 xuất phát của ứng dụng này là gì?

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

Lớp học lập trình này bắt đầu bằng mã cho một ứng dụng trang web thương mại cơ bản. Mọi người dùng đều có thể xem danh sách các mặt hàng đang bán và nhấp vào đường liên kết để xem trang chi tiết của một mặt hàng. Nếu đã đăng nhập, người dùng 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.

Dùng 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ả mạo.
Nhấp vào nút Bán hàng ở góc dưới cùng bên phải để tạo trang thông tin.
Nhập Xylophonecho Tiêu đề.
Đối với Giá yêu cầu, hãy nhập 50.
Đối với Nội dung mô tả mặt hàng, hãy nhập nội dung sau: This high quality xylophone can be used to play music.
Tải hình ảnh chiếc xilophon này xuống máy tính rồi tải hình ảnh đó lên bằng nút HÌNH ẢNH VỀ MẶT 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 trang thông tin 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 điều khiển Thông tin liên hệ của người bán.
Quay lại bảng điều khiển của Firebase. Trong trang tổng quan Database (Cơ sở dữ liệu), bạn sẽ thấy một mục nhập cho mục bạn đã đăng trong nút forsale. Trong trang tổng quan Bộ nhớ, bạn cũng sẽ thấy hình ảnh mà bạn đã tải lên trong đường dẫn friendlymarket.

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

Vấn đề

Sau khi nghiên cứu một số người dùng cho ứng dụng của mình, bạn nhận thấy rằng hầu hết người dùng truy cập vào trang web của bạn từ điện thoại thông minh chứ không phải máy tính. 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 ("chạy trốn") chỉ sau vài giây.

Bạn tò mò nên kiểm tra trang web của mình bằng tốc độ kết nối di động. (Tìm hiểu cách thực hiện tại đây.) Bạn nhận thấy 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 đó xảy ra trên mỗi lượt xem trang!

Giải pháp

Sau khi đọc về cách tối ưu hoá 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 có độ phân giải cao hơn nhiều so với nhu cầu của ứng dụng này. Việc giảm kích thước tệp sẽ giúp tăng tốc thời gian tải mà không làm giảm đáng kể độ phân giải trong ứng dụng.
Lưu vào bộ nhớ đệm. Theo mặc định, các đối tượng trên Bộ nhớ trên đám mây 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 lại cùng một hình ảnh nhiều lần! May mắn là bạn có thể thay đổi các tiêu đề này để cho phép lưu vào bộ nhớ đệm. Cả SDK Bộ nhớ trên đá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 có quy trình phía máy chủ để đổi kích thước hình ảnh. Hãy cân nhắc những điểm đánh đổi:

Phía máy khách. Đối với quy trình phía máy khách, bạn chỉ cần giới hạn kích thước tệp cho hình ảnh đã 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 này cũng có nghĩa là người bán của bạn cần tìm hiểu cách đổi kích thước hình ảnh của riêng họ. Đây là một rào cản khó khăn và không trực quan khi tạo trang thông tin mới.
Phía máy chủ. Nếu sử dụng Cloud Functions cho Firebase, bạn có thể kích hoạt một hàm tự động đổ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 hình ảnh lên theo kích thước bất kỳ mà họ muốn (không cần làm thêm việc gì) và hàm phụ trợ của bạn có thể đổi kích thước hình ảnh một cách liền mạch. Thậm chí, bạn còn có thể sử dụng mẫu cho hàm này!

Có vẻ như bạn nên sử dụng phía máy chủ. Tuy nhiên, ý tưởng này vẫn liên quan đến việc nhân bản mẫu, làm theo hướng dẫn thiết lập của mẫu đó, sau đó triển khai hàm bằng Firebase CLI. Việc đổi kích thước hình ảnh có vẻ như là một trường hợp sử dụng phổ biến. Có giải pháp nào dễ dàng hơn không?

Giải pháp dễ dàng hơn

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

Nhìn kìa! Có một tiện ích có tên là "Đổi kích thước hình ảnh". Điều đó có vẻ khả quan.

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

Cài đặt tiện ích

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

public, max-age=31536000

Giữ nguyên các tham số khác ở giá trị mặc định.
Nhấp vào Cài đặt tiện ích.

Trong khi bạn 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 bằng Giao diện dòng lệnh (CLI) của Firebase! Bạn chỉ cần sử dụng lệnh firebase ext có trong phiên bản mới nhất của CLI. Bạn có thể xem thêm thông tin tại đây.

(Không bắt buộc) Tìm hiểu thêm về tiêu đề Cache-Control

Giá trị tiêu đề Cache-Control (Kiểm soát bộ nhớ đệ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ã ứng dụng

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

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

Trong StackBlitz, hãy 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 đã đổ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)
  };
}

Thử nghiệm

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

Tạo một bài đăng mới để xem phần mở rộng hoạt động như thế nào:

Nhấp vào Friendly Market (Chợ thân thiện) trong thanh trên cùng của ứng dụng để chuyển đến màn hình chính.
Nhấp vào nút Bán hàng ở góc dưới bên phải của ứng dụng để tạo trang thông tin.
Nhập Coffee cho Tiêu đề
Nhập 1 cho Giá yêu cầu
Đối với Nội dung mô tả mặt hàng, hãy nhập nội dung sau: Selling one cafe latte. It has foam art in the shape of a bear.
Tải hình ảnh một tách cà phê này xuống máy tính rồi tải lên bằng nút HÌNH ẢNH VỀ MÓN BÁNH 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 trang thông tin về cà phê xuất hiện bên dưới Xylophone!
Trong trang tổng quan Hàm trên bảng điều khiển Firebase, hãy nhấp vào thẻ Nhật ký. Bạn sẽ thấy nhật ký từ hàm cho biết hàm đó đã thực thi.

Chuyển đến trang tổng quan Bộ nhớ để xem cả hình ảnh cà phê gốc và phiên bản đã đổ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 của ứng dụng 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 đàn xylophone.

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

5. Định cấu hình lại tiện ích

Vấn đề

Ứng dụng của bạn sẽ tự động lưu các phiên bản nháp của trang thông tin của người bán. Người dùng thích tính năng này, nhưng số liệu thống kê của bạn có chút đáng lo ngại. Báo cáo của bạn cho biết rằng chỉ khoảng 10% bản nháp đượ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 khi tính toán sơ bộ, bạn nhận thấy rằng bạn chỉ cần lưu khoảng 5 bản nháp tại một thời điểm bất kỳ.

Bạn còn nhớ danh mục Tiện ích Firebase đó không? Có thể đã có giải pháp cho trường hợp này. Hãy cài đặt tiện ích Giới hạn nút con để tự động giữ số lượng bản nháp đã lưu ở mức 5 trở xuống. Tiện ích này sẽ xoá bản nháp cũ nhất mỗi khi bạn thêm một bản nháp mới.

Nhấp vào nút Cài đặt trên trang chi tiết của tiện ích.
Chọn dự án Firebase mà bạn đang sử dụng cho ứng dụng web trang web thương mại.
Làm theo hướng dẫn trên màn hình cho đến khi bạn đến bước Định cấu hình tiện ích.
Đối với Đường dẫn Cơ sở dữ liệu theo 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 trữ các 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à 5 bản nháp cho mỗi trang thông tin của mặt hàng sẽ được lưu và nếu bạn thêm một bản nháp khác, thì bản nháp cũ nhất sẽ tự động bị xoá.
Nhấp vào Cài đặt tiện ích.

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

Phần mở rộng về việc giám sát

Khi bạn cài đặt một tiện ích, quá trình này sẽ tạo một số hàm. Bạn nên kiểm tra tần suất các hàm này chạy hoặc xem nhật ký và tỷ lệ lỗi. Để biết thông tin chi tiết về cách theo dõi tiện ích, hãy xem bài viết Quản lý tiện ích đã cài đặt. Làm theo hướng dẫn trong tài liệu để xem các hàm do tiện ích Resize Images (Đổi kích thước hình ảnh) tạo ở bước trước.

Gỡ cài đặt tiện ích

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

Thao tác gỡ cài đặt sẽ xoá tất cả tài nguyên (chẳng hạn như các hàm cho tiện ích) và tài khoản dịch vụ được tạo cho thực thể của tiện ích đó. Tuy nhiên, mọi cấu phần phần mềm do tiện ích tạo (chẳng hạn như hình ảnh được đổ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.

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

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

Xem ví dụ thực tế

Đảm bảo bạn đã đăng nhập bằng tài khoản mà bạn dùng để đăng hình ảnh cây đàn xylophon hoặc ly cà phê latte
Tạo một số bản nháp:
Nhấp vào nút Bán hàng ở góc dưới cùng bên phải của ứng dụng
Chỉnh sửa Tiêu đề thành "Bản nháp 1".
Di chuyển xuống phần Bản nháp để xem số lượng bản nháp. Phải có ít nhất hai.
Nhấp vào nút FRIENDLY MARKET (THỊ TRƯỜNG FRIENDLY) trong thanh ứng dụng ở trên cùng. Bằng cách này, bạn sẽ có một bản nháp đã lưu nhưng không cần đăng.
Lặp lại cho "Bản nháp 2", "Bản nháp 3", v.v. cho đến "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.
Như đã làm với tiện ích Đổi kích thước hình ảnh, bạn có thể kiểm tra nhật ký hàm để xem những hàm nào đã kích hoạt.

Rất tiếc, giới hạn giữ lại thư nháp 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 năng suất nhất của bạn đang phàn nàn rằng thư nháp của họ bị xoá trước khi họ có thể đăng. Bạn kiểm tra kết quả tính toán của mình với đồng đội và nhận ra rằng kết quả của bạn bị sai số 10.000!

Bạn có thể làm gì để khắc phục vấn đề này? Hãy định cấu hình lại tiện ích đã cài đặt!

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

Vậy là bạn đã hoàn tất! Trong thời gian chờ tiện ích cập nhật, bạn có thể trao đổi với nhóm hỗ trợ để cho họ biết rằng chúng tôi đang triển khai bản sửa lỗi.

6. Tự động xoá dữ liệu người dùng

Vấn đề

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

Hiện tại, nhóm hỗ trợ đang xoá dữ liệu của từng người dùng theo cách thủ công, nhưng chắc chắn phải có cách tốt hơn! Bạn suy nghĩ về điều này 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à xoá địa chỉ email khỏi các tài khoản đã xoá. Tuy nhiên, việc xoá dữ liệu người dùng có vẻ như là một vấn đề khá phổ biến. Có thể Tiện ích 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 Xoá dữ liệu người dùng để tự động xoá nút users/uid trong cơ sở dữ liệu khi người dùng xoá 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.
Chọn dự án Firebase mà bạn đang sử dụng cho ứng dụng web trang web thương mại.
Làm theo hướng dẫn trên màn hình cho đến khi bạn đến bước Định cấu hình tiện ích.
Đối với đường dẫn Cơ sở dữ liệu theo thời gian thực, hãy nhập sellers/{UID}. Phần sellers là nút có cá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 sẽ biết rằng khi người dùng có UID là 1234 xoá tài khoản của họ, tiện ích sẽ xoá sellers/1234 khỏi cơ sở dữ liệu.
Nhấp vào Cài đặt tiện ích.

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

Cùng nói về khả năng tuỳ chỉnh

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

Tuy nhiên, các tiện ích không thể giải quyết mọi vấn đề, và vấn đề xoá dữ liệu người dùng là một ví dụ điển hình. Mặc dù tiện ích Xoá dữ liệu người dùng giải quyết được khiếu nại hiện tại về việc email vẫn bị lộ sau khi người dùng xoá tài khoản, nhưng tiện ích này sẽ không xoá mọi thứ. Ví dụ: trang thông tin của mặt hàng vẫn còn và mọi hình ảnh trong Cloud Storage cũng sẽ vẫn còn. Tiện ích Xoá dữ liệu người dùng cho phép chúng ta định cấu hình một đường dẫn trên Bộ nhớ trên đám mây để xoá, nhưng vì người dùng có thể tải nhiều tệp có nhiều tên lên, nên bạn sẽ không thể định cấu hình tiện ích này để tự động xoá các cấu phần phần mềm này. Đối với những trường hợp như vậ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.

Tiện ích và thanh toán

Bản thân các tiện ích Firebase là miễn phí (bạn chỉ phải trả 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 cần đến có thể yêu cầu thanh toán. Lớp học lập trình này được thiết kế để bạn có thể hoàn thành mà không cần 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 nhiều tiện ích Firebase thực sự thú vị.

Ví dụ: bạn có thể rút gọn URL, kích hoạt email, xuất bộ sưu tập sang BigQuery và làm nhiều việc khác! Hãy xem toàn bộ danh mục tiện ích tại đây.

Nếu bạn muốn có một tiện ích nhưng hiện chưa có, hãy cho chúng tôi biết nhé! Gửi yêu cầu về tính năng cho Nhóm hỗ trợ Firebase để đề xuất một tiện ích mới.

Xem ví dụ thực tế

Sau khi cài đặt tiện ích xong, hãy xoá một người dùng và xem điều gì sẽ xảy ra:

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

Quay lại trang tổng quan Cơ sở dữ liệu theo thời gian thực. Thông tin của người bán sẽ bị xoá!

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 trang web thương mại.

Bạn đã tìm hiểu cách khám phá, định cấu hình, cài đặt và định cấu hình lại tiện ích. Ngoài ra, bạn đã tìm hiểu cách theo dõi các tiện ích đã cài đặt và cách gỡ cài đặt các tiện ích đó (nếu cần).

Bước tiếp theo là gì?

Hãy xem một số tiện ích khác sau đây:

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

Bạn cần thêm mã tuỳ chỉnh phía máy chủ?

Khám phá lớp học lập trình về Cloud Functions cho Firebase

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

Quản lý tiện ích:

Tìm hiểu thông tin chi tiết hơn về các phần mở rộng:

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

Thêm nhanh chức năng mới vào ứng dụng web của bạn bằng Tiện ích Firebase

1. Giới thiệu

Mục tiêu

Sản phẩm bạn sẽ tạo ra

Kiến thức bạn sẽ học được

Bạn cần có

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

Tạo dự án Firebase

Nâng cấp gói giá Firebase

Bật tính năng đăng nhập bằng email

Bật Cơ sở dữ liệu theo thời gian thực

Đặt quy tắc bảo mật cho cơ sở dữ liệu

Thiết lập Cloud Storage cho Firebase

Thiết lập quy tắc bảo mật cho bộ nhớ

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

Tạo nhánh dự án StackBlitz

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

Điểm xuất phát của ứng dụng này là gì?

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

Vấn đề

Giải pháp

Giải pháp dễ dàng hơn

Cài đặt tiện ích

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

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

(Không bắt buộc) Tìm hiểu thêm về tiêu đề Cache-Control

Cập nhật mã ứng dụng

Thử nghiệm

5. Định cấu hình lại tiện ích

Vấn đề

Giải pháp

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

Phần mở rộng về việc giám sát

Gỡ cài đặt tiện ích

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

Xem ví dụ thực tế

Rất tiếc, giới hạn giữ lại thư nháp quá nhỏ

6. Tự động xoá 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...

Cùng nói về khả năng tuỳ chỉnh

Tiện ích và thanh toán

Xem ví dụ thực tế

7. Xin chúc mừng!

Bước tiếp theo là gì?

Bạn cần thêm mã tuỳ chỉnh phía máy chủ?

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