Kiểm tra API với front-end

Sau khi đã xác nhận cả ba API hoạt động đúng qua Postman, chúng ta sẽ kết nối front-end React FCJ Book Store với API Gateway đã triển khai và kiểm tra toàn bộ luồng end-to-end qua trình duyệt.

1. Sao chép Invoke URL từ API Gateway

1. Mở API Gateway console.

   • Điều hướng đến fcaj-serverless-api → Stages → staging.
   • Sao chép Invoke URL hiển thị trong panel Stage details, ví dụ:

     https://1bupjnr42d.execute-api.ap-southeast-1.amazonaws.com/staging
     

   

2. Cập nhật cấu hình front-end

2. Trong dự án front-end FCAJ_Workshop-Serverless, mở tệp src/config.js.

   • Đặt giá trị của APP_API_URL thành Invoke URL vừa sao chép.

   export default {
     APP_API_URL: "https://1bupjnr42d.execute-api.ap-southeast-1.amazonaws.com/staging",
     DEFAULT_REGION: "ap-southeast-1"
   };
   

   

3. Mở tệp src/App.js.

   • Trong this.state của constructor, đặt isAdmin thành true để bật các tính năng quản trị (Tạo, Cập nhật, Xóa) trên giao diện.

   

3. Build và triển khai front-end lên S3

4. Trong terminal, điều hướng đến thư mục gốc dự án front-end và chạy các lệnh sau:

   npm run build
   aws s3 rm s3://fcaj-book-shop-by-tranvix --recursive
   aws s3 cp build s3://fcaj-book-shop-by-tranvix --recursive
   

   • npm run build biên dịch bundle production được tối ưu vào thư mục build/.
   • aws s3 rm xóa toàn bộ tệp cũ trong S3 bucket hosting.
   • aws s3 cp tải lên bản build mới nhất.

   

   

5. Mở S3 console, điều hướng đến bucket fcaj-book-shop-by-tranvix → tab Properties → kéo xuống phần Static website hosting.

   • Sao chép Bucket website endpoint URL.

   

4. Kiểm tra GET API (Đọc danh sách sách)

6. Dán URL endpoint của S3 vào trình duyệt. Trang chủ FCJ Book Store tải lên và hiển thị danh sách sách từ DynamoDB.

   

5. Kiểm tra POST API (Cập nhật sách)

7. Nhấp vào tab Management trên thanh điều hướng.

   • Trang hiển thị tất cả sách kèm nút Update cho mỗi cuốn.

   

8. Nhấp Update trên bất kỳ cuốn sách nào (ví dụ: Docker in Action).

   • Form cập nhật mở ra, điền sẵn dữ liệu hiện tại của sách.
   • Nhấp Choose file và chọn ảnh bìa muốn tải lên (ví dụ: DockerInAction.jpeg).
   • Download ảnh DockerInAction.jpeg tại Link và chọn tệp ảnh này.
   • Nhấp nút Update.

   

9. Hộp thoại trình duyệt xuất hiện: “Book update successfull”. Nhấp OK.

   

10. Quay lại màn hình Management. Thẻ sách Docker in Action giờ hiển thị ảnh bìa mới đã tải lên.

    

6. Kiểm tra POST API (Tạo sách mới)

11. Nhấp tab Create new book.

    • Điền vào form với các giá trị sau:

      Trường	Giá trị
      ID	5
      Name	Amazon Web Services in Action
      Author	Andreas Wittig
      Category	IT
      Price	59.99
      Description	Amazon Web Services in Action, Second Edition is a comprehensive introduction to computing, storing, and networking in the AWS cloud.
      Image	(chọn ảnh từ máy, ví dụ: aws.jpg)

    • Download ảnh aws.jpg tại Link và chọn tệp ảnh này.

    • Nhấp Create.

    

12. Hộp thoại xuất hiện: “Book upload successfull”. Nhấp OK.

    

13. Chuyển sang tab Home. Sách mới Amazon Web Services in Action của Andreas Wittig xuất hiện trong danh sách — kèm ảnh bìa — và phân trang giờ hiển thị Trang 2.

    

7. Kiểm tra DELETE API (Xóa sách)

14. Nhấp tab Management. Tìm thẻ Amazon Web Services in Action (id = 5) và nhấp nút Update của nó.

    

15. Trong form cập nhật, nhấp nút Delete.

    

16. Hộp thoại xuất hiện: “Are you sure you wish to delete this item?”. Nhấp OK để xác nhận.

    

17. Hộp thoại thứ hai xuất hiện: “Book delete successfull”. Nhấp OK.

    

18. Quay lại màn hình Management. Sách id = 5 (Amazon Web Services in Action) không còn xuất hiện. Phân trang trở về một trang duy nhất.