Không biết code vẫn ra được app chạy data live

​

Mình vừa làm một thứ mà 1 năm trước chắc chắn mình nghĩ là bất khả thi: tự tay build một cái app dự đoán nhà vô địch World Cup 2026 — chạy data thật, tự cập nhật mỗi ngày, và ai cũng truy cập được qua internet.

Điều hay nhất? Mình không phải dân coding. Và sau email này, bạn cũng sẽ làm được điều tương tự.

Hôm nay mình sẽ đi qua trọn vẹn quy trình: từ lúc gõ câu lệnh đầu tiên trong Claude Code, đến lúc app chạy live trên một địa chỉ web thật. Quan trọng hơn cả cái app, mình muốn bạn hiểu được API là gì — vì đây là khái niệm sẽ mở khóa 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à khác gì với chat 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ế:

• 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 build app, build website thật sự.

Để dùng được tính năng Code, bạn cần hai thứ: tải Claude về laptop (trên web không có tính năng này), và đăng ký gói Pro — khoảng 20 đô/tháng, hoặc tầm 17 đô/tháng nếu trả theo năm.

Setup ban đầu: chọn folder, model và chế độ

Đầu tiên bạn chọn một folder — nơi chứa toàn bộ data và code của dự án. Mình đặt tên là "FIFA World Cup 2026".

Tiếp theo là chọn model:

• Haiku: trả lời rất nhanh nhưng kém thông minh nhất.
• Sonnet: cân bằng — chậm hơn chút nhưng thông minh hơn.
• Opus 4.8: thông minh nhất hiện tại, nhưng lâu hơn và tốn nhiều token hơn, đổi lại cho kết quả tốt nhất.

Trong dự án này mình chọn Sonnet cho nhanh gọn. Bạn cũng sẽ chọn mức effort (làm nhanh hay làm kỹ) và chế độ quyền:

• Ask permission: mỗi bước nó đều hỏi ý bạn.
• Plan mode (mình hay dùng): nó vạch sẵn kế hoạch, cho bạn xem trước, bạn bấm accept là nó tự chạy hết — an toàn hơn một chút.
• Auto mode: tự động chạy, lúc hỏi lúc không.

Câu lệnh tạo app

Mình đưa yêu cầu rất đơn giản: tạo một 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, kết quả hiển thị ngay màn hình chính. Vậy thôi — và để nó chạy.

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.

Một điều mình muốn bạn nhớ: API không chỉ để lấy data live. 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 mình. API là cách bạn "mượn" dịch vụ của bên khác.

Lấy API key miễn phí

Trong dự án này mình lấy data bóng đá từ football-data.org. Bạn đăng ký tài khoản, nó cho bạn một API key — một dãy số dài. Với lượng sử dụng nhỏ (cập nhật mỗi ngày 1 lần) thì gói free là đủ, không cần thẻ.

Lưu ý quan trọng cho sau này: khi app của bạn có nhiều người dùng, API sẽ bắt đầu tính tiền theo lượng sử dụng. Cập nhật mỗi phút một lần, cộng thêm hàng trăm khách hàng truy cập — chi phí sẽ khác hẳn so với cập nhật mỗi ngày một lần. Cứ để ý điều này.

Muốn lấy data khác? Có vô số nguồn cung cấp API tương tự — chứng khoán, crypto, gì cũng có.

Bảo mật API key — đừng bỏ qua bước này

Đây là phần nhiều người làm sai và trả giá đắt.

Để bảo vệ, mình tạo file .env (nơi lưu API key) và file .gitignore. Khi đẩy app lên GitHub, file .gitignore sẽ "chừa" file .env ra — tức là API key của bạn không bị upload công khai, không ai thấy được. Mình nhập API key vào, và Claude tự động chạy.

Kết quả? App lấy data từ football-data.org về và cho ra dự đoán: top 5 ứng cử viên, dẫn đầu là Germany, rồi United States, France, Argentina, Norway. Kèm theo tỷ số các trận trong ngày. App hoạt động đúng như mình muốn — chỉ có điều lúc này nó còn chạy local trên máy mình, chưa ai khác xem được.

Đẩy lên GitHub

Để người khác dùng được, bước tiếp theo là upload code lên GitHub.

Bạn 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:

• Vào dashboard Hostinger, chọn Node.js → thêm trang web → ứng dụng web Node.js trực tiếp từ GitHub.
• Kết nối tài khoản GitHub, chọn folder app (FIFA World Cup 2026).
• Phần quan trọng cần để ý: Biến môi trường — bấm "thêm", rồi nhập file .env. (Mẹo: file .env là file ẩn. Để hiện nó ra, bấm Cmd + Shift + dấu chấm.)

Chọn xong file .env, Hostinger nhận được API key của bạn, và chưa tới 1 phút sau — app đã live trên internet. Bạn bấm vào là thấy ngay trang web hiển thị kết quả dự đoán nhà vô địch, cập nhật mỗi ngày từ football-data.org qua API.

Vậy là xong: Claude Code để build → GitHub để lưu trữ → Hostinger để host. App dự đoán Germany sẽ vô địch. Còn nếu để mình đoán thì... vẫn là Ronaldo 🐐

Hẹn gặp bạn trong email tiếp theo,
Huy Dao