Kiểm tra APIs với front-end

Sau khi kiểm tra rằng 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 được xây dựng từ phần 2.

  1. Mở config.js trong thư mục fcj-serverless-frontend đã tải xuống từ phần 2.

    • Thay đổi giá trị của APP_API_URL bằng URL của bạn. CreateRestAPI CreateRestAPI

  2. Mở App.js trong fcj-serverless-frontend/src/, thay đổi giá trị của isAdmin thành true. CreateRestAPI

  3. Chạy các lệnh dưới đây trong terminal của bạn.

    yarn build
aws s3 rm s3://fcj-book-shop-by-myself --recursive
aws s3 cp build s3://fcj-book-shop-by-myself --recursive

  4. Dán endpoint của S3 static web vào trình duyệt của bạn. Ứng dụng đã hiển thị thông tin sách, nhưng vẫn chưa có hình ảnh vì chúng ta chưa tải lên hình ảnh. CreateRestAPI Vì vậy, API liệt kê đang hoạt động đúng.

  5. Kiểm tra API ghi.

    • Nhấp vào tab Management.
    • Nhấp vào Update. CreateRestAPI
    • Chỉnh sửa bất cứ điều gì bạn muốn ngoại trừ id.
    • Nhấp vào Choose image.
    • Tải lên hình ảnh dưới đây vào bucket:
    • DockerInAction.jpeg (33 ko)
    • Nhấp vào Update.
    • Nhấp vào OK. CreateRestAPI
    • Hình ảnh và thông tin đã được cập nhật. CreateRestAPI
    • Nhấn vào tab Create new book để viết dữ liệu mới vào cơ sở dữ liệu.
    • Enter id with 5
    • Enter name: Amazon Web Services in Action
    • Enter the author: Andreas Wittig
    • Enter category: IT
    • Enter price: 59.99
    • Enter a description: 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.
  6. aws.jpg (24 ko)
    • Nhấn nút Choose File để tải lên hình ảnh.
    • Nhấn nút Create.
    • Nhấp vào OK. CreateRestAPI
    • Hiển thị thông tin mới tạo. CreateRestAPI

  7. Kiểm tra API xóa.

    • Nhấp vào tab Management.
    • Nhấp vào Update. CreateRestAPI
    • Nhấp vào Delete.
    • Nhấp vào OK để xác nhận xóa. CreateRestAPI
    • Xem kết quả sau khi xóa: không có thông tin sách xuất hiện. CreateRestAPI

Chúng ta đã hoàn thành việc xây dựng một ứng dụng web đơn giản dựa trên SAM theo mô hình serverless.