Bạn có tin được không, một dự án game đố vui siêu chất, sử dụng cả trí tuệ nhân tạo (AI) mà lại được "thai nghén" ngay trong lòng thách thức <a href="https://truyentranh.letranglan.top/api/v1/proxy?url=https://int.alibabacloud.com/m/1000402443/">Alibaba Cloud Challenge: Build a Web Game</a> đó! Đây không chỉ là một game thông thường đâu, mà là cả một hành trình khám phá thế giới công nghệ, nơi AI và sức mạnh đám mây "song kiếm hợp bích".<br/><br/><b>🎮 Mình đã "xây" được gì nè?</b><br/>Và đây là "đứa con tinh thần" của mình: một ứng dụng đố vui tương tác cực kỳ độc đáo! Tưởng tượng mà xem, bạn chỉ cần chọn bất kỳ chủ đề nào mình thích, ví dụ như 'Lịch sử cổ đại' hay 'Vật lý lượng tử', lập tức một 'bộ não' AI siêu thông minh sẽ tự động 'biến hóa' ra hàng loạt câu hỏi liên quan. Hay ho chưa? Không chỉ dừng lại ở đó, bạn còn có thể "khoe" kiến thức bằng cách chia sẻ những bộ câu hỏi do chính mình tạo ra với bạn bè, cùng nhau tranh tài trên bảng xếp hạng để xem ai mới là 'thánh' của những màn đố vui đỉnh cao!<br/><img src="https://truyentranh.letranglan.top/api/v1/proxy?url=https://dev-to-uploads.s3.amazonaws.com/uploads/articles/0xb2uqeo4skq5urs34tg.png" alt="Giao diện chính của game đố vui AI"><br/><img src="https://truyentranh.letranglan.top/api/v1/proxy?url=https://dev-to-uploads.s3.amazonaws.com/uploads/articles/yvs0kw1t1s4du57n0c7k.png" alt="Giao diện tạo câu đố hoặc bảng xếp hạng"><br/><br/><b>🚀 Trải nghiệm thử ngay thôi!</b><br/>Muốn tận mắt chứng kiến 'siêu phẩm' này hoạt động ra sao? Nhấn vào đây nhé: <a href="https://truyentranh.letranglan.top/api/v1/proxy?url=http://47.242.186.192:3000/">http://47.242.186.192:3000/</a>.<br/><br/><b>☁️ Alibaba Cloud đã "giúp sức" thế nào?</b><br/>Giờ thì bật mí 'hậu trường' một chút nhé! Để tạo ra 'siêu phẩm' này, mình đã xây dựng nó như một ứng dụng web Fullstack (nghĩa là có cả phần giao diện người dùng và phần xử lý phía máy chủ) dùng <a href="https://truyentranh.letranglan.top/api/v1/proxy?url=https://remix.run/">RemixJS</a>. Và tất nhiên, 'linh hồn' của phần tạo câu hỏi chính là các hệ thống AI 'xịn xò' như <a href="https://truyentranh.letranglan.top/api/v1/proxy?url=https://mistral.ai/">Mistral.AI</a> và <a href="https://truyentranh.letranglan.top/api/v1/proxy?url=https://www.deepseek.com/">Deepseek</a>. Toàn bộ 'động cơ' này được vận hành trơn tru trên các máy chủ 'ảo' <a href="https://truyentranh.letranglan.top/api/v1/proxy?url=https://www.alibabacloud.com/product/ecs">Alibaba ECS</a>. Phải nói thật là, đây là lần đầu tiên mình 'mon men' đến thế giới của AI, và bất ngờ chưa, nó hoạt động ngon lành cành đào luôn! (Cười lớn)<br/><img src="https://truyentranh.letranglan.top/api/v1/proxy?url=https://i.imgur.com/AI_quiz_generation.png" alt="Hệ thống AI tạo câu hỏi"><br/>Cũng là lần đầu 'chơi' với <a href="https://truyentranh.letranglan.top/api/v1/proxy?url=https://www.alibabacloud.com/">Alibaba Cloud</a>, và phải công nhận là mình cực kỳ ưng cái bụng với sự đơn giản của nền tảng này. Đặc biệt là khoản điều chỉnh 'nhóm bảo mật' (Security Groups) á, nó trực quan hơn hẳn so với mấy dịch vụ đám mây khác mà mình từng dùng – đỡ phải 'mò mẫm' hay bấm linh tinh đủ chỗ. À, còn khoản cấu hình tài nguyên thì thôi rồi, từ RAM, CPU đến ổ cứng, đủ thứ lựa chọn tha hồ mà 'mix & match', lại còn cài đặt được thời gian chạy định sẵn cho mấy 'em' máy chủ nữa chứ. Quá tiện!<br/><img src="https://truyentranh.letranglan.top/api/v1/proxy?url=https://i.imgur.com/alibaba_cloud_ecs_concept.png" alt="Alibaba Cloud ECS và các máy chủ ảo"><br/>Tuy nhiên, nói đi cũng phải nói lại, vẫn có chút xíu 'hạt sạn' nhỏ cần cải thiện ở khoản hỗ trợ khách hàng và quy trình xác minh KYC. Mình chờ mãi mấy ngày mà vẫn chưa thấy duyệt, hơi sốt ruột tí xíu à.<br/><br/><b>🛠️ Những "điểm sáng" trong quá trình phát triển game:</b><br/>Về phần 'xây nhà' cho game, mình đã dùng <a href="https://truyentranh.letranglan.top/api/v1/proxy?url=https://remix.run/">Remix.js</a> làm nền tảng full-stack – đây cũng là lần đầu tiên mình thử sức với Remix, trước đó toàn 'quấn quýt' với Next.js thôi. Nhưng mà mê ngay từ cái nhìn đầu tiên! Giao diện 'xinh xẻo' được 'phù phép' bằng <a href="https://truyentranh.letranglan.top/api/v1/proxy?url=https://tailwindcss.com/">Tailwind CSS</a> và <a href="https://truyentranh.letranglan.top/api/v1/proxy?url=https://ui.shadcn.com/">shadcn/ui</a>.<br/><img src="https://truyentranh.letranglan.top/api/v1/proxy?url=https://i.imgur.com/fullstack_remixjs.png" alt="Kiến trúc Fullstack Remix.js"><br/>Mấy 'em' AI agent (tức là các phần mềm AI đứng sau xử lý) chạy ngon ơ trên <a href="https://truyentranh.letranglan.top/api/v1/proxy?url=https://mistral.ai/">Mistral.AI</a>, và phải kể đến 'công thần' <a href="https://truyentranh.letranglan.top/api/v1/proxy?url=https://zod.dev/">Zod</a> – nó giúp mình định nghĩa định dạng phản hồi của AI mượt mà cực kỳ, cứ như 'đặt hàng' AI phải trả lời đúng ý mình vậy đó. Còn 'anh bạn' cơ sở dữ liệu thì mình tin dùng <a href="https://truyentranh.letranglan.top/api/v1/proxy?url=https://github.com/grizzle-js/grizzle">Grizzle</a>, phải nói là 'tuyệt cú mèo'!<br/>Có thể là vẫn có nhiều cách hay hơn để phát triển cái này bằng Remix.js, nhưng nhìn chung thì mình thấy cách này hiệu quả 'kinh khủng khiếp' rồi đó.<br/>Đừng quên theo dõi <a href="https://truyentranh.letranglan.top/api/v1/proxy?url=https://dev.to/cocodrino">@cocodrino</a> để cập nhật thêm nhiều dự án hay ho nhé!

Lê Lân

18/06/2025