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 một ứ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 dành cho các tác vụ phát triển và quản lý ứ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 của 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 cũ của người dùng để 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 một tiện ích trong dự án
• Cách duy trì (giám sát, 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 khác của Firebase đượ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 mộ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 một dự án Firebase

1. Đăng nhập vào bảng điều khiển của Firebase bằng Tài khoản Google của bạn.
2. Nhấp vào nút này để tạo một dự án mới, rồi nhập tên dự án (ví dụ: FriendlyMarket).
   
3. Nhấp vào Tiếp tục.
4. Nếu được nhắc, hãy xem xét và chấp nhận các điều khoản của Firebase, rồi nhấp vào Tiếp tục.
5. (Không bắt buộc) Bật tính năng hỗ trợ của AI trong bảng điều khiển của Firebase (còn gọi là "Gemini trong Firebase").
6. Đối với lớp học lập trình này, bạn không cần Google Analytics, vì vậy hãy tắt lựa chọn Google Analytics.
7. Nhấp vào Tạo dự án, đợi 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 cập nhật
• Cloud Storage cho Firebase để lưu hình ảnh trên đám mây

Giờ đây, 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á của Firebase

Để sử dụng Tiện ích Firebase và các dịch vụ đám mây cơ bản cũng như Cloud Storage 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 thanh toán trên Cloud yêu cầu bạn phải 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 trị giá 300 USD và Tài khoản thanh toán trên đám mây dùng thử miễn phí hay không.
• Nếu bạn đang thực hiện 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ó tín dụng 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:

1. Trong bảng điều khiển của Firebase, hãy chọn nâng cấp gói.
2. Chọn gói Blaze. Làm theo hướng dẫn trên màn hình để liên kết một tài khoản thanh toán trên Cloud với dự án của bạn.
   Nếu cần tạo một tài khoản thanh toán trên Cloud 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.

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

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 bạn cần có một số hình thức xác thực trong ứng dụng để xác định danh tính riêng biệt của mọi người dùng ứng dụng. Bạn sẽ sử dụng thông tin đăng nhập bằng email.

1. Trong bảng điều khiển của Firebase, hãy nhấp vào Phát triển ở bảng điều khiển bên trái.
2. 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).
3. 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 này 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 bán.

1. Trong bảng điều khiển bên trái của bảng điều khiển 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.
2. Nhấp vào Tạo cơ sở dữ liệu.
3. Chọn một vị trí cho cơ sở dữ liệu của bạn, rồi 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 của mình.
4. 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. Không phân phối hoặc công khai một ứ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.
5. 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. Đâ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 được 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ề các quy tắc cụ thể này; bạn chỉ cần sao chép và dán chúng để ứng dụng của bạn hoạt động.

1. Ở đầu trang tổng quan về Realtime Database, hãy nhấp vào thẻ Quy tắc.

2. 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"
         }
     }
   }
   

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

Thiết lập Cloud Storage cho Firebase

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

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

1. Trong bảng điều khiển bên trái của bảng điều khiển Firebase, hãy mở rộng Tạo rồi chọn Bộ nhớ.
2. Nhấp vào Bắt đầu.
3. Chọn một vị trí cho bộ chứa lưu trữ mặc định.
   Các bộ chứa ở US-WEST1, US-CENTRAL1 và US-EAST1 có thể tận dụng cấp"Luôn miễn phí" của Google Cloud Storage. Các bộ chứa ở tất cả những vị trí khác đều tuân theo mức giá và mức sử dụng của Google Cloud Storage.
4. 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. Khô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 Nhóm lưu trữ.
5. Nhấp vào Tạo.

Thiết lập các quy tắc bảo mật cho nhóm lưu trữ

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 hình ảnh mới, nhưng cho phép mọi người xem hình ảnh của một mặt hàng được niêm yết.

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

2. 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 /friendlymarket/{ImageId} {
         allow read;
         allow write: if request.auth != null;
       }
     }
   }
   

3. 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 sẽ tạo 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 bạn cài đặt phần mềm hoặc 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.

1. Truy cập vào URL này để xem mã bắt đầu: https://stackblitz.com/edit/friendlymarket-codelab.
2. Ở đầu trang StackBlitz, hãy nhấp vào Fork (Tạo bản sao).

Giờ đây, bạn đã có một bản sao của mã khởi đầu 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ó tên là @anonymous, nhưng không sao cả. 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à nội dung thay đổi của bạn đều được lưu trong dự án StackBlitz này.

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

1. 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.
2. Trong bảng điều khiển của Firebase, hãy chuyển đến trang tổng quan về dự án bằng cách nhấp vào Tổng quan về dự án ở trên cùng bên trái.
3. Ở giữa trang tổng quan về dự án, hãy nhấp vào biểu tượng web để tạo một Ứng dụng web Firebase mới.
4. Đăng ký ứng dụng bằng biệt hiệu FriendlyMarket Codelab.
5. Trong lớp học lập trình này, đừng đánh dấu vào hộp bên cạnh Thiết lập cả Firebase Hosting cho ứng dụng này. Thay vào đó, bạn sẽ sử dụng ngăn xem trước StackBlitz.
6. Nhấp vào Đăng ký ứng dụng.
7. 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.

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

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

1. Quay lại StackBlitz, chuyển đến tệp src/firebase-config.js.
2. 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 có các giá trị của dự án riêng trong đối tượng cấu hình):

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

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

Lớp học lập trình này sẽ giúp bạn bắt đầu với mã cho một ứng dụng cơ bản của trang web thương mại. Mọi người dùng đều có thể xem danh sách các mặt hàng được bán và nhấp vào một đườ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:

1. Đă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ả.
2. 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.
3. Đối với Tiêu đề, hãy nhập Xylophone.
4. Đối với Giá chào bán, hãy nhập 50.
5. Đố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.
6. Tải hình ảnh đàn xylophone này xuống máy tính rồi tải lên bằng nút HÌNH ẢNH VỀ MẶT HÀNG CỦA BẠN.

file_downloadTải hình ảnh xuống

7. Sau khi bạn điền tất cả các trường và tải hình ảnh lên, hãy nhấp vào Đăng.
8. 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 Thông tin liên hệ của người bán.
9. Quay lại bảng điều khiển của Firebase. Trong trang tổng quan Cơ sở dữ liệu, giờ đây, bạn sẽ thấy một mục cho mặt hàng mà 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 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 bằng đ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ũng cho thấy 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 bỏ") 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 trên thiết bị di động. (Tìm hiểu cách thực hiện 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 như vậy sẽ xảy ra trong 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 2 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ẽ 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 trong Cloud Storage có tiêu đề cho biết trình duyệt không lưu hình ảnh vào bộ nhớ đệm, tức 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! Rất may 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 Cloud Storage phía máy khách và Firebase Admin SDK đề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ó một quy trình phía máy chủ giúp đổi kích thước hình ảnh. Hãy cân nhắc các ưu và nhược điểm:

• 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 được tải lên. Điều này có nghĩa là bạn không cần 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ần phải tìm cách thay đổ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 bất kỳ kích thước hình ảnh nào họ muốn lên (không cần làm thêm việc), và hàm phụ trợ của bạn có thể điều chỉnh kích thước hình ảnh một cách liền mạch. Thậm chí còn có một 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 sao chép mẫu, làm theo hướng dẫn thiết lập rồi triển khai hàm bằng Firebase CLI. Đổi kích thước hình ả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?

Một 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 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 tên là "Resize Images" (Đổi kích thước hình ảnh). Có vẻ hứa hẹn đấy.

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

Cài đặt tiện ích

1. Nhấp vào Xem chi tiết để xem thêm thông tin về tiện ích này. Trong mục Những nội dung 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 thay đổi và thậm chí bạn có thể đặt tiêu đề của bộ nhớ đệm. Tuyệt lắm!
2. 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 một trang bảng điều khiển của Firebase liệt kê tất cả các dự án của bạn.
3. Chọn dự án FriendlyMarket mà bạn đã tạo cho lớp học lập trình này.
4. Làm theo hướng dẫn trên màn hình cho đến khi bạn thấy bước Định cấu hình tiện ích. Hướng dẫn sẽ cho thấy 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.
5. Trong trường **Cache-Control** tiêu đề cho hình ảnh được đổi kích thước, hãy nhập nội dung sau:

public, max-age=31536000

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

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 của Firebase

Nếu bạn quen dùng các công cụ dòng lệnh, thì bạn cũng có thể cài đặt và quản lý các tiện ích bằng Firebase CLI! Bạn chỉ cần 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 public, max-age=31536000 có nghĩa là hình ảnh sẽ được lưu vào bộ nhớ đệm trong 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 một hình ảnh đã đổi kích thước vào cùng một nhóm với hình ảnh gốc. Hình ảnh được đổi kích thước sẽ có kích thướ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 gốc có dạng friendlymarket/user1234-car.png, thì đường dẫn tệp của hình ảnh được đổ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 đủ.

1. Trong StackBlitz, hãy mở tệp src/firebase-refs.js.
2. Thay thế hàm getImageRef hiện có bằng mã sau để tạo một ref cho hình ảnh được đổ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)
  };
}

Dùng thử

Vì tiện ích này theo dõi các hình ảnh mới được tải lên, 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 tiện ích hoạt động:

1. Nhấp vào Friendly Market trong thanh trên cùng của ứng dụng để chuyển đến màn hình chính.
2. Nhấp vào nút Bán một mặt hàng ở góc dưới cùng bên phải của ứng dụng để tạo một trang thông tin.
3. Đối với Tiêu đề, hãy nhập Coffee
4. Đối với Giá chào bán, hãy nhập 1
5. Đố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.
6. Tải hình ảnh này về một tách cà phê xuống máy tính rồi tải lên bằng nút HÌNH ẢNH VỀ MẶT HÀNG CỦA BẠN. file_downloadTải hình ảnh xuống
7. Sau khi bạn điền 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!
8. Trong trang tổng quan Hàm trên bảng điều khiển của Firebase, hãy nhấp vào thẻ Nhật ký. Bạn sẽ thấy nhật ký của hàm cho biết hàm đã thực thi.

9. Chuyển đến trang tổng quan Bộ nhớ để xem cả hình ảnh gốc về cà phê và phiên bản được đổi kích thước trong đường dẫn friendlymarket.
10. Trong ngăn xem trước StackBlitz, hãy tải lại màn hình chính của ứng dụng 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 đàn xylophone.

Hình ảnh tải nhanh hơn trong lần tải trang đầu tiên vì có kích thước nhỏ hơn, và trong những 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 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 của bạn 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 thấy chỉ có khoảng 10% bản nháp được đăng, còn 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ó một giải pháp được xây dựng cho tình huống này. Hãy cài đặt tiện ích Limit Child Nodes (Giới hạn nút con) để tự động giữ số lượng bản nháp đã lưu ở mức 5 hoặc ít hơn. Tiện ích này sẽ xoá bản nháp cũ nhất bất cứ khi nào bạn thêm một bản nháp mới.

1. Nhấp vào nút Cài đặt trên trang chi tiết của tiện ích.
2. Chọn dự án Firebase mà bạn đang dùng cho ứng dụng web trang web thương mại.
3. Làm theo hướng dẫn trên màn hình cho đến khi bạn thấy bước Định cấu hình tiện ích.
4. Đố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 các bản nháp.
5. Đố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á.
6. Nhấp vào Cài đặt tiện ích.

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

Tiện ích giám sát

Khi bạn cài đặt một tiện ích, quy trình này sẽ tạo ra một số hàm. Bạn có thể muốn kiểm tra tần suất chạy các hàm nà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á các hàm riêng lẻ mà tiện ích 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 có thể tạo ra nhiều hàm. Tìm hiểu cách gỡ cài đặt tiện ích trong tài liệu.

Việ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 phiên bản tiện ích đó. Tuy nhiên, mọi cấu phần phần mềm do tiện ích này tạo ra (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 bạn gỡ cài đặt tiện ích này.

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 trong việc cài đặt một phiên bản duy nhất của một tiện ích nhất định trong một 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 phiên bản khác của tiện ích này. Tuy nhiên, cho 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 một lần.

Ví dụ thực tế

1. Hãy nhớ đăng nhập bằng tài khoản mà bạn đã dùng để đăng bài về đàn xylophone hoặc cà phê latte
2. Tạo một số bản nháp:
3. 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
4. Chỉnh sửa Tiêu đề thành "Bản nháp 1".
5. Di chuyển xuống phần Bản nháp rồi xem số lượng bản nháp. Phải có ít nhất 2.
6. Nhấp vào nút FRIENDLY MARKET 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 mà không cần đăng.
7. Lặp lại cho "Bản nháp 2", "Bản nháp 3", v.v. cho đến "Bản nháp 6".
8. 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.
9. Như bạn đã làm với tiện ích Resize Images (Đổ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 đã được kích hoạt.

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

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!

1. 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.
2. Trên thẻ của tiện ích đã cài đặt, hãy nhấp vào Quản lý.
3. Ở góc trên bên phải, hãy nhấp vào Định cấu hình lại tiện ích.
4. Thay đổi Số lượng nút tối đa cần giữ lại thành 50000.
5. Nhấp vào Lưu.

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

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

Vấn đề

Nhóm hỗ trợ khách hàng của chúng tôi đã 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ừ 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 muốn đị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 hiệu quả hơn! Bạn nghĩ về việc này và cân nhắc viết mộ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 đã bị xoá. Nhưng việc xoá dữ liệu người dùng có vẻ là một vấn đề khá phổ biến. Có lẽ Firebase Extensions 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ọ.

1. Nhấp vào nút Cài đặt trên trang chi tiết của tiện ích.
2. Chọn dự án Firebase mà bạn đang dùng cho ứng dụng web trang web thương mại.
3. Làm theo hướng dẫn trên màn hình cho đến khi bạn thấy bước Định cấu hình tiện ích.
4. Đố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.
5. 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 tìm hiểu 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 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 vấn đề hiện tại là email vẫn bị lộ sau khi người dùng xoá tài khoản của họ, nhưng tiện ích này sẽ không xoá mọi thứ. Ví dụ: trang thông tin mặt hàng vẫn có sẵn và mọi hình ảnh trong Cloud Storage cũng sẽ được giữ lại. Tiện ích Xoá dữ liệu người dùng cho phép chúng tôi định cấu hình đường dẫn Bộ nhớ đám mây để xoá, 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 này để tự động xoá các cấu phần phần mềm này. Trong những trường hợp 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.

Tiện ích và thanh toán

Bản thân các tiện ích Firebase không mất phí sử dụng (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 có thể yêu cầu tính phí. Lớp học lập trình này được thiết kế để bạn 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 rất nhiều tiện ích 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à nhiều thao tác khác! Xem toàn bộ danh mục tiện ích tại đây.

Nếu bạn muốn dùng một tiện ích nhưng hiện tại tiện ích đó chưa có, hãy cho chúng tôi biết! 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.

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:

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

6. Quay lại trang tổng quan Realtime Database. 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 trang web thương mại của mình.

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 cũng đã tìm hiểu về cách giám sát các tiện ích đã cài đặt và cách gỡ cài đặt các tiện ích đó nếu cần.

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ạn 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 (cần 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ủ?

• Hãy xem lớp học lập trình Cloud Functions cho Firebase

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

Quản lý tiện ích:

• Thử quản lý các tiện ích bằng Giao diện dòng lệnh (CLI) của Firebase
• Đặt cảnh báo về ngân sách
• Kiểm tra tần suất chạy của một tiện ích đã cài đặt
• Cập nhật một tiện ích đã cài đặt lên phiên bản mới
• Gỡ cài đặt tiện ích

Tìm hiểu 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ề các quyền và quyền truy cập được cấp cho một tiện ích