ข้อมูลเบื้องต้น: สร้างเว็บแอปพลิเคชันแบบไร้เซิร์ฟเวอร์

ปฏิบัติตามคำแนะนำทีละขั้นตอนเพื่อสร้างเว็บแอปพลิเคชันแบบไร้เซิร์ฟเวอร์ที่เรียบง่ายที่ทำให้ผู้ใช้สามารถเรียกยูนิคอร์นจากกลุ่มรถโดยสารของ Wild Rydes ได้

ภาพรวม

ในบทแนะนำสอนการใช้งานนี้ คุณจะได้สร้างเว็บแอปพลิเคชันแบบไร้เซิร์ฟเวอร์ที่เรียบง่ายที่ทำให้ผู้ใช้สามารถเรียกยูนิคอร์นจากกลุ่มรถโดยสารของ Wild Rydes ได้ แอปพลิเคชันจะนำเสนออินเทอร์เฟซผู้ใช้งานแบบ HTML ให้กับผู้ใช้เพื่อระบุตำแหน่งที่ผู้ใช้ต้องการให้รับ และจะเชื่อมต่อบนแบ็คเอนด์กับบริการเว็บ RESTful เพื่อส่งคำขอและจัดส่งยูนิคอร์นที่อยู่ใกล้เคียง นอกจากนี้ แอปพลิเคชันยังมีเครื่องมืออำนวยความสะดวกให้ผู้ใช้สมัครใช้งานบริการและเข้าสู่ระบบก่อนเรียกยูนิคอร์นอีกด้วย

สถาปัตยกรรมของแอปพลิเคชัน

สถาปัตยกรรมของแอปพลิเคชันใช้ AWS Lambda, Amazon API Gateway, Amazon DynamoDB, Amazon Cognito และ AWS Amplify Console Amplify Console มีการปรับใช้และการโฮสต์ทรัพยากรเว็บแบบสแตติก เช่น HTML, CSS, JavaScript และรูปภาพที่ผู้ใช้โหลดไว้ในเบราว์เซอร์อย่างต่อเนื่อง JavaScript ที่ทำงานในเบราว์เซอร์จะส่งและรับข้อมูลจาก API แบ็คเอนด์สาธารณะที่สร้างโดยใช้เกตเวย์ Lambda และ API Amazon Cognito มีฟังก์ชันการจัดการและตรวจสอบผู้ใช้เพื่อรักษาความปลอดภัยให้กับ API แบ็คเอนด์ และท้ายสุด DynamoDB มีเลเยอร์แบบถาวรที่สามารถเก็บข้อมูลได้โดยใช้ฟังก์ชัน Lambda ของ API

การโฮสต์เว็บแบบสแตติก

AWS Amplify โฮสต์ทรัพยากรเว็บแบบสแตติก เช่น HTML, CSS, JavaScript และรูปภาพที่ผู้ใช้โหลดไว้ในเบราว์เซอร์

การจัดการผู้ใช้

Amazon Cognito มีฟังก์ชันการจัดการและตรวจสอบผู้ใช้เพื่อรักษาความปลอดภัยให้กับ API แบ็คเอนด์

แบ็คเอนด์แบบไร้เซิร์ฟเวอร์

Amazon DynamoDB มีเลเยอร์แบบถาวรที่สามารถเก็บข้อมูลได้โดยใช้ฟังก์ชัน Lambda ของ API

RESTful API

JavaScript ที่ทำงานในเบราว์เซอร์จะส่งและรับข้อมูลจาก API แบ็คเอนด์สาธารณะที่สร้างโดยใช้เกตเวย์ Lambda และ API

 ประสบการณ์การใช้งาน AWS

ผู้เริ่มต้น

 เวลาดำเนินการ

2 ชั่วโมง

 ค่าใช้จ่ายในการดำเนินการ

คุณสามารถใช้สิทธิ์ AWS Free Tier เพื่อใช้บริการต่าง ๆ ในสถาปัตยกรรมนี้ได้ แต่จะมีค่าใช้จ่ายสำหรับการดำเนินการบทแนะนำสอนการใช้งานนี้ให้เสร็จสิ้นเป็นเงินไม่เกิน 0.25 USD* หากคุณใช้งานเกินข้อจำกัดของ Free Tier

 ข้อกำหนดเบื้องต้นของบทแนะนำสอนการใช้งาน

เทคโนโลยีที่ใช้:


*การประมาณการนี้จะถือว่าคุณทำตามการกำหนดค่าที่แนะนำตลอดบทแนะนำสอนการใช้งานและยกเลิกทรัพยากรทั้งหมดภายใน 24 ชั่วโมง
**บัญชีที่สร้างขึ้นภายใน 24 ชั่วโมงที่ผ่านมาอาจยังไม่สามารถเข้าถึงทรัพยากรที่จำเป็นสำหรับบทแนะนำสอนการใช้งานนี้

โมดูล

เวิร์กช็อปนี้จะแบ่งออกเป็น 5 โมดูล แต่ละโมดูลจะอธิบายสถานการณ์สมมติของสิ่งที่เราจะสร้างขึ้นและให้คำแนะนำแบบทีละขั้นตอนเพื่อช่วยให้คุณนำสถาปัตยกรรมไปใช้และตรวจสอบยืนยันผลงานของคุณ 

  1. โฮสต์เว็บไซต์แบบคงที่ (15 นาที): กำหนดค่า AWS Amplify เพื่อโฮสต์ทรัพยากรแบบสแตติกสำหรับเว็บแอปพลิเคชันของคุณพร้อมการปรับใช้แบบต่อเนื่องในตัว
  2. จัดการผู้ใช้ (30 นาที): สร้างกลุ่มผู้ใช้ Amazon Cognito เพื่อจัดการบัญชีของผู้ใช้ของคุณ
  3. สร้างแบ็คเอนด์แบบไร้เซิร์ฟเวอร์ (30 นาที): สร้างกระบวนการแบ็คเอนด์สำหรับการจัดการคำขอสำหรับเว็บแอปพลิเคชันของคุณ
  4. ปรับใช้ RESTful API (15 นาที): ใช้ Amazon API Gateway เพื่อแสดงฟังก์ชัน Lambda ที่คุณสร้างไว้ในโมดูลที่แล้วเป็น RESTful API
  5. ยกเลิกทรัพยากร (10 นาที):  ยกเลิกทรัพยากรทั้งหมดที่คุณสร้างขึ้นตลอดบทแนะนำสอนการใช้งานนี้

โฮสต์เว็บไซต์แบบคงที่