Xây Game Đánh Vần (Spelling Game) "Thần Kỳ" với AWS Serverless và GenAI: Một Chuyến Phiêu Lưu Đầy Bất Ngờ!
Lê Lân0
Xây Dựng Trò Chơi Đánh Vần Đơn Giản Với AWS Serverless và GenAI
Mở Đầu
Dự án trò chơi đánh vần này là một minh chứng tuyệt vời cho khả năng kết hợp giữa công nghệ Serverless AWS và dịch vụ Trí tuệ nhân tạo (GenAI), đặc biệt là Amazon Bedrock, để tạo ra trải nghiệm học tập hấp dẫn và tương tác.
Vào tháng 12 năm 2024, trong khuôn khổ cuộc thi AWS Game Builder Challenge , tôi đã phát triển một trò chơi đánh vần đơn giản. Trò chơi này sử dụng các dịch vụ Serverless của AWS và GenAI, đồng thời sử dụng AWS CDK làm công cụ hạ tầng dưới dạng mã (Infrastructure as Code). Đây cũng là lần đầu tiên tôi áp dụng GenAI trong một ứng dụng thực tế, đặc biệt là với Amazon Bedrock.
Bài viết này sẽ chia sẻ chi tiết về dự án, cách xây dựng, cũng như những kinh nghiệm thu được trong quá trình phát triển. Bạn có thể trải nghiệm trò chơi hoàn chỉnh tại https://spelling-game.pubudu.dev/ .
Cách Chơi
Lựa Chọn Ngôn Ngữ
Người chơi có thể chọn giữa hai ngôn ngữ hiện có: English (US) và Dutch.
Luật Chơi
- Khi lựa chọn ngôn ngữ, tối đa 5 từ sẽ được tạo ngẫu nhiên kèm theo:
- Âm thanh phát âm
- Ý nghĩa ngắn gọn của từ
- Số lượng ký tự của từ đó
- Người chơi cần điền chính xác từ vào ô nhập liệu kèm theo chỉ báo số ký tự đã nhập được so với yêu cầu, màu đỏ khi chưa đủ và chuyển sang màu xanh khi đủ.
- Một đồng hồ đếm ngược bắt đầu chạy ngay sau khi từ được tạo. Khi còn dưới 30 giây, nền trang và màu nền đồng hồ chuyển sang đỏ để cảnh báo.
- Người chơi có thể nộp đáp án trước khi đồng hồ hết giờ, hoặc hệ thống sẽ tự động gửi khi hết thời gian.
- Sau khi nộp, kết quả được đánh giá và hiển thị trong một cửa sổ bật lên (popup). Nếu toàn bộ đáp án đúng, hiệu ứng pháo hoa "Confetti" sẽ xuất hiện.
- Người chơi có thể xem chi tiết kết quả bằng cách nhấn nút "Show Results" để biết từ nào trả lời đúng/sai và từ đúng.
Hãy thử trải nghiệm ngay để nâng cao kỹ năng đánh vần của bạn!
Triển Khai Ứng Dụng
Kiến Trúc Ứng Dụng
Ứng dụng gồm hai phần chính:
- Backend: Chịu trách nhiệm tạo từ và cung cấp API cho frontend.
- Frontend: Ứng dụng Vue.js nơi người chơi tương tác.
Mã Nguồn
Bạn có thể tham khảo mã nguồn ở hai kho sau:
Thành phần | Repository |
|---|---|
Backend | |
Frontend |
Hướng Dẫn Triển Khai
- Backend được triển khai bằng AWS CDK, cần truyền URL Cloudfront phục vụ frontend để hoạt động.
- Trong frontend, cấu hình biến môi trường
VITE_API_BASE_URLtrỏ đến API Cloudfront.
- Chạy
npm installđể cài đặt phụ thuộc, rồinpm run devđể chạy chế độ phát triển hoặcnpm run buildđể đóng gói.
- Frontend được xây dựng sẽ được tải lên S3 hosting bucket do CDK tạo ra để hosting qua Cloudfront.
Lưu ý: Backend khi triển khai sẽ xuất ra tên bucket S3 hosting.
Backend Chi Tiết
Thành Phần Tạo Từ (Words Generator Component)
Sử dụng AWS Step Functions để triển khai workflow sinh từ với các bước chính:
- Nhận mã ngôn ngữ (
en-US,nl-NL, ...) làm input.
- Gọi Amazon Bedrock model Anthropic Claude 3 Haiku để sinh 5 từ độc đáo (số ký tự từ 5 đến 9), kèm mô tả ngắn tiếng Anh dưới dạng JSON tối giản.
- Dùng AWS Polly
StartSpeechSynthesisTaskđể tổng hợp âm thanh phát âm từ.
- Polly lưu file mp3 vào bucket S3 tương ứng theo ngôn ngữ.
- Kiểm tra quá trình tổng hợp âm thanh hoàn tất, sau đó lưu dữ liệu từ (word, mô tả, mp3 link, độ dài từ,...) vào DynamoDB.
- Chạy song song cho mỗi từ trong Map state, đảm bảo tối đa 5 từ được tạo mới.
Quá trình sử dụng StartSpeechSynthesisTask và GetSpeechSynthesisTask giúp tổng hợp âm thanh bất đồng bộ, lưu trực tiếp lên S3.
Có hai lịch trình EventBridge chạy mỗi 5 phút kích hoạt state machine cho hai ngôn ngữ khác nhau để luôn cập nhật từ mới.
Thành Phần API
Có hai API chính phục vụ frontend:
- POST /questions: Khởi chạy State Machine sinh câu hỏi và trả về 5 từ với dữ liệu kèm theo.
- POST /answers: Nhận câu trả lời từ frontend, kiểm tra với database và trả kết quả đúng/sai.
Chi tiết API /questions
- Nhận
languagelàm tham số.
- Bắt đầu biểu đồ Step Functions kiểu Express khởi tạo đồng bộ.
- Step Functions lấy tối đa 50 item từ DynamoDB lọc theo ngôn ngữ, chọn ngẫu nhiên 5 từ.
- Mỗi từ được tạo URL presigned để frontend có thể phát nhạc mp3 từ S3.
- Kết quả trùng lặp được loại bỏ qua Lambda cuối cùng (GetUniqueResultsLambda).
Chi tiết API /answers
- Nhận payload gồm câu trả lời.
- Gọi DynamoDB batch_get_item kiểm tra từng câu trả lời với từ gốc.
- Trả về kết quả đúng/sai cùng từ gốc.
Những Bài Học Được Rút Ra
- Amazon Bedrock đôi khi không trả về JSON chuẩn mặc dù trong prompt đã yêu cầu.
- Polly không hỗ trợ lưu file âm thanh trực tiếp theo đường dẫn trên S3, phải dùng
OutputS3KeyPrefix.
- Việc lấy ngẫu nhiên dữ liệu từ DynamoDB khá phức tạp, cần dùng kỹ thuật lựa chọn khóa bắt đầu và lọc thủ công.
- Triển khai Step Functions qua Lambda proxy ổn định hơn so với tích hợp trực tiếp API Gateway do phức tạp ở mapping template.
- Việc chuyển từ Amplify sang S3 + Cloudfront giúp giới hạn truy cập API một cách tốt hơn.
- Amazon Q Developer hỗ trợ rất tốt cho phát triển frontend bằng Vue.js, tuy nhiên có giới hạn khi xử lý bố cục phức tạp.
Frontend
Frontend được xây dựng bằng Vue.js và phần lớn code được hỗ trợ tự động bởi công cụ Amazon Q Developer .
Quá Trình Phát Triển
- Phát triển theo kiểu từng chức năng riêng biệt, từng bước yêu cầu Amazon Q viết code.
- Một số lỗi nhỏ khi chỉnh sửa bố cục chưa được tự động fix hoàn toàn.
- Giao diện đơn giản, trực quan với chỉ báo thời gian, số ký tự, bảng kết quả và hiệu ứng pháo hoa khi trả lời đúng.
Các Cải Tiến Có Thể Thực Hiện
- Thêm chức năng lịch sử chơi và lưu trạng thái người chơi qua đăng nhập.
- Mở rộng hỗ trợ nhiều ngôn ngữ khác (tuỳ thuộc Polly hỗ trợ).
- Ghi nhận điểm số và bảng xếp hạng so với người chơi khác.
- Tối ưu giao diện, tăng trải nghiệm người dùng.
Bạn có ý tưởng cải tiến nào cho dự án này? Đừng ngần ngại chia sẻ để cùng phát triển!
Kết Luận
Trò chơi đánh vần đơn giản này không chỉ giúp tôi khám phá và sử dụng thành công các dịch vụ tiên tiến của AWS như Amazon Bedrock, Polly, Step Functions, mà còn trải nghiệm phát triển frontend với sự hỗ trợ của AI qua Amazon Q Developer. Dù không giành chiến thắng cuộc thi, đây là một dự án rất thú vị và giá trị để học hỏi.
Hãy thử ngay trò chơi và cảm nhận trải nghiệm này!
Tham Khảo
- LinkedIn: https://www.linkedin.com/in/pubudusj
- Twitter/X: https://x.com/pubudusj
- Blog cá nhân: https://pubudu.dev
Loading...