Kiểm tra API với front-end

Sau khi kiểm tra các API hoạt động đúng với Postman, chúng ta sẽ kiểm tra các API được gọi với front-end xây dựng từ bước 2.

Cấu hình Front-end

  1. Mở API Gateway console và vào Stages, sao chép Invoke URL StagesInvokeURL

  2. Mở tệp config.js trong thư mục fcj-serverless-frontend

    • Thay giá trị cho APP_API_URL bằng Invoke URL của bạn

ConfigAPI

  1. Mở tệp App.js trong thư mục fcj-serverless-frontend/src/

    • Sửa giá trị của biến isAdmin thành true

AppIsAdmin

  1. Chạy các dòng lệnh dưới đây để build và deploy lên S3:

    npm run build
aws s3 cp build s3://fcj-book-shop-tranvix --recursive

  2. Kiểm tra S3 bucket, các file build đã được tải lên S3BucketFiles

  3. Dán endpoint của S3 static web vào browser của bạn. Ứng dụng đã hiện thông tin sách, nhưng vẫn chưa có ảnh vì chúng ta chưa tải ảnh lên FrontEndNoImages

Vậy API đọc dữ liệu đã hoạt động đúng.

Kiểm tra API Ghi (POST/Update)

  1. Ấn sang tab Management và ấn nút Update của một cuốn sách ManagementTab

  2. Trong form Update:

    • Sửa bất kỳ thông tin gì bạn muốn trừ id
    • Ấn nút Choose file để chọn ảnh
    • Ấn nút Update UpdateForm

  3. Hiển thị thông báo Book update successful! UpdateSuccess

  4. Ảnh và thông tin được cập nhật thành công ImageUpdated

Tạo Sách Mới

  1. Ấn sang tab Create new book để ghi dữ liệu mới vào cơ sở dữ liệu:

    • Nhập id: 5
    • Nhập tên: Amazon Web Services in Action
    • Nhập tác giả: Andreas Wittig
    • Nhập thể loại: IT
    • Nhập giá: 59.99
    • Nhập mô tả: Amazon Web Services in Action, Second Edition is a comprehensive introduction to computing, storing, and networking in the AWS cloud. You’ll find clear, relevant coverage of all the essential AWS services you to know, emphasizing best practices for security, high availability and scalability.
    • Ấn nút Choose File để tải ảnh lên
    • Ấn nút Create CreateNewBook

  2. Hiển thị thông báo Book upload successful! CreateSuccess

  3. Sách mới đã được hiển thị trên trang Home NewBookDisplayed

Kiểm tra API Xoá (DELETE)

  1. Ấn sang tab Management và ấn nút Update của cuốn sách muốn xoá ManagementUpdate

  2. Ấn nút Delete DeleteButton

  3. Ấn nút OK để xác nhận xoá DeleteConfirm

  4. Hiển thị thông báo Book delete successful! DeleteSuccess

  5. Xem kết quả sau khi xoá: không còn xuất hiện thông tin sách nữa AfterDelete

Chúng ta đã hoàn thành việc xây dựng một ứng dụng web đơn giản theo mô hình serverless. Để xây dựng ứng dụng serverless nhanh hơn, trong phần tiếp theo chúng ta sẽ sử dụng AWS Serverless Application Model (SAM). SAM cung cấp cú pháp để diễn đạt các hàm, API, cơ sở dữ liệu và event source mappings.