12d • YouTube 🔴
Mình tự build app dự đoán World Cup 2026 bằng Claude 🟠
Mình vừa làm được một điều mà một năm trước mình nghĩ là không thể: tự tay tạo ra một ứng dụng dự đoán nhà vô địch World Cup 2026! Ứng dụng này chạy dữ liệu thực tế, tự động cập nhật mỗi ngày và ai cũng có thể truy cập được qua internet.
Điều thú vị nhất là mình không phải dân lập trình. Và sau email này, bạn cũng sẽ làm được điều tương tự.
Hôm nay mình sẽ chia sẻ chi tiết quy trình: từ lúc bắt đầu gõ câu lệnh đầu tiên trong Claude Code, đến lúc ứng dụng chạy live trên một địa chỉ web thật. Quan trọng hơn cả ứng dụng, mình muốn bạn hiểu được API là gì — vì đây là khái niệm sẽ mở ra cho bạn cả một thế giới ứng dụng, không chỉ riêng bóng đá.
🍀 Trước tiên: Claude Code là gì và nó khác gì với chat thông thường?
Nhiều bạn dùng Claude trên trình duyệt (Chrome, Safari) và chỉ thấy ô chat — giống như ChatGPT hay Gemini, hỏi gì đáp nấy. Nhưng Claude còn nhiều hơn thế nữa:
- Chat (trên web): Chỉ hỏi đáp thông thường.
- Cowork: Làm được nhiều hơn — tạo file Word, Excel, PowerPoint và xuất ra cho bạn.
- Code: nơi bạn có thể thỏa sức sáng tạo app và website! Để bắt đầu, bạn cần hai thứ: tải Claude về máy tính (trên web chưa có tính năng này) và đăng ký gói Pro. Gói này có giá khoảng 20 đô/tháng, hoặc tiết kiệm hơn nếu bạn trả theo năm, tầm 17 đô/tháng.
🍀 Setup ban đầu: Chọn folder, model và chế độ
Đầu tiên, hãy chọn một folder để lưu trữ tất cả dữ liệu và code của dự án. Mình đã đặt tên cho dự án của mình là “FIFA World Cup 2026”.
Tiếp theo, bạn sẽ chọn model phù hợp với nhu cầu của mình:
- Haiku: Đây là model trả lời nhanh nhất, nhưng cũng là model ít thông minh nhất.
- Sonnet: Một lựa chọn cân bằng, chậm hơn một chút so với Haiku nhưng thông minh hơn.
- Opus 4.8: Model thông minh nhất hiện tại, tuy nhiên nó sẽ mất nhiều thời gian hơn và tốn nhiều token hơn, nhưng đổi lại bạn sẽ nhận được kết quả tốt nhất.
Mình đã chọn Sonnet cho dự án này vì nó nhanh và hiệu quả. Bạn cũng sẽ cần chọn mức effort (làm nhanh hay làm kỹ) và chế độ quyền:
- Ask permission: Model sẽ hỏi ý kiến bạn ở mỗi bước.
- Plan mode: Đây là chế độ mình hay dùng. Nó sẽ vạch sẵn kế hoạch, cho bạn xem trước, và sau khi bạn bấm accept, nó sẽ tự động chạy hết. Chế độ này an toàn hơn một chút.
- Auto mode: Chế độ này cho phép model tự động chạy, lúc hỏi lúc không.
Và thế là bạn đã sẵn sàng để bắt đầu tạo app với Code!
🧠 Mình có một yêu cầu khá đơn giản cho app dự đoán nhà vô địch World Cup 2026: cập nhật kết quả trận đấu live mỗi ngày, dựa trên một công thức đơn giản để tính xem đội nào sẽ vô địch, và hiển thị ngay trên màn hình chính. Vậy thôi — và để nó chạy mượt mà.
🍀 API là gì? (phần quan trọng nhất)
Đây là điểm khác biệt lớn so với mấy app mình từng hướng dẫn (như app quản lý kho hàng). Với app quản lý kho, data là do bạn nhập tay — khách order ly cà phê, bạn vào app gõ vào.
Nhưng kết quả trận đấu live thì khác. Sáng nay bạn ngủ dậy, không xem trận đấu, làm sao biết tỷ số? Làm sao biết phong độ cầu thủ? Bạn không thể ngồi gõ tay “Ronaldo hôm nay đá hay” được. Data này phải đến từ một nguồn bên ngoài. Và đó chính là lúc API xuất hiện.
API giống như một cây cầu — nối app của bạn với một bên khác để lấy dữ liệu hoặc dùng dịch vụ của họ. Nó giúp app của bạn luôn cập nhật thông tin mới nhất mà không cần bạn phải làm gì cả.
Một điều mình muốn bạn nhớ: API không chỉ để lấy dữ liệu trực tiếp. Ví dụ, nếu bạn muốn app tạo ảnh cầu thủ kiểu anime mà model của bạn không làm được, bạn có thể dùng API của một AI khác để kết nối tính năng đó vào app của mình. API giống như cách bạn “mượn” dịch vụ của bên khác vậy.
🍀 Lấy API key miễn phí
Trong dự án này, mình lấy dữ liệu bóng đá từ football-data.org. Bạn chỉ cần đăng ký tài khoản là sẽ nhận được một API key — một dãy số dài. Với lượng sử dụng nhỏ, chẳng hạn như cập nhật mỗi ngày một lần, thì gói miễn phí là đủ rồi, không cần phải dùng thẻ đâu.
Một lưu ý nhỏ cho sau này: khi app của bạn có nhiều người dùng hơn, API sẽ bắt đầu tính phí dựa trên lượng sử dụng. Nếu bạn cập nhật dữ liệu mỗi phút một lần và có hàng trăm khách hàng truy cập, chi phí sẽ khác hẳn so với việc cập nhật mỗi ngày một lần. Cứ để ý điều này nhé.
Muốn lấy dữ liệu khác? Có vô số nguồn cung cấp API tương tự — chứng khoán, crypto, gì cũng có cả.
🍀 Bảo mật API key — đừng bỏ qua bước này nhé
Đây là phần mà nhiều người làm sai và phải trả giá đắt.
API key giống như số thẻ tín dụng của bạn vậy. Nếu để lộ ra ngoài, người khác có thể dùng để truy cập dữ liệu, và bạn sẽ là người bị tính phí.
Để bảo vệ thông tin này, mình tạo một file .env để lưu API key và một file .gitignore. Khi đẩy ứng dụng lên GitHub, file .gitignore sẽ đảm bảo file .env không bị upload công khai, nghĩa là API key của bạn sẽ được giữ bí mật và không ai có thể xem được. Mình chỉ cần nhập API key vào, và Claude sẽ tự động chạy.
Kết quả là ứng dụng lấy dữ liệu từ football-data.org và đưa ra dự đoán: top 5 ứng cử viên, dẫn đầu là Germany, tiếp theo là United States, France, Argentina và Norway. Ứng dụng cũng hiển thị tỷ số của các trận đấu trong ngày. Mọi thứ hoạt động đúng như mình mong muốn — chỉ có điều hiện tại nó vẫn đang chạy trên máy tính của mình, chưa ai khác có thể xem được.
🍀 Đẩy lên GitHub
Để người khác có thể sử dụng ứng dụng, bước tiếp theo là upload code lên GitHub.
Hiểu một cách đơn giản, GitHub giống như Google Drive dành cho code. File trên máy tính của bạn thì chỉ mình bạn mới xem được; khi upload lên GitHub, các bên khác mới có thể đọc được code và đưa ứng dụng lên internet.
Tạo tài khoản GitHub, tạo một repository mới (đặt private), copy đường link rồi nói với Claude “push to GitHub repository”. Lần đầu push, nó sẽ yêu cầu vài bước xác thực — nếu không biết làm, cứ nói “hướng dẫn tao từng bước”, Claude sẽ chỉ tận tay. Lúc mình làm, nó cho 6 dòng code để nhập vào và kết nối. Push thành công là toàn bộ code đã lên GitHub.
🍀 Host lên internet với Hostinger
Bước cuối: đưa app ra internet bằng Hostinger — một bên hosting uy tín mà mình tin dùng. Gói Business chỉ từ 75.900 đồng.
Điều mình thích nhất ở Hostinger: khi bạn kết nối nó với GitHub, mỗi lần bạn chỉnh sửa trên Claude Code và GitHub, Hostinger tự động deploy thay đổi đó lên web ngay lập tức — không cần update thủ công.
Các bước:
1. Vào dashboard Hostinger.
2. Chọn Node.js.
3. Thêm trang web.
4. Chọn ứng dụng web Node.js trực tiếp từ GitHub.
5. Kết nối tài khoản GitHub.
6. Chọn folder app (FIFA World Cup 2026).
Chào mọi người!
Hôm nay mình sẽ hướng dẫn các bạn cách đưa app dự đoán nhà vô địch của chúng ta lên mạng, thật dễ dàng và nhanh chóng! Đầu tiên, chúng ta cần biến môi trường. Chỉ cần bấm “thêm”, rồi nhập file .env của bạn vào. (Mẹo nhỏ: file .env là file ẩn, nên để hiện nó ra, bạn bấm Cmd + Shift + dấu chấm nhé.)
Sau khi chọn xong file .env, Hostinger sẽ nhận được API key của bạn, và chưa đầy một phút sau, app của chúng ta đã live trên internet rồi! Bấm vào là thấy ngay trang web hiển thị kết quả dự đoán nhà vô địch, được cập nhật mỗi ngày từ football-data.org qua API.
Nếu bạn muốn tự host app của mình, hãy dùng link này để được giá tốt nhất (kèm mã HUYDAO giảm 10%) 🔥
(Từ gói 12 tháng trở lên còn được tặng kèm tên miền miễn phí nữa chứ!)
Vậy là xong: dùng Claude Code để build, GitHub để lưu trữ, và Hostinger để host. App của chúng ta dự đoán Germany sẽ vô địch. Còn nếu để mình đoán thì… vẫn là Ronaldo 🐐
Hẹn gặp lại các bạn trong post tiếp theo!
1
0 comments
Mình tự build app dự đoán World Cup 2026 bằng Claude 🟠
Suggested communities
Powered by