Chương 18. Vibe Code qua điện thoại hoặc tablet

Suốt cuốn sách này, bạn đã quen với việc ngồi trước máy tính, mở VS Code, gõ prompt cho AI. Nhưng nếu một ý tưởng chợt đến lúc đang ngồi cà phê, đang trên xe buýt, hay đơn giản là bạn chỉ có sẵn chiếc điện thoại trong tay thì sao? Chương này sẽ chỉ cho bạn cách vibe coding trọn vẹn — từ mở dự án, gõ prompt, đến xuất bản — chỉ bằng trình duyệt trên điện thoại hoặc tablet, không cần cài đặt bất cứ thứ gì.

Vì sao cần vibe coding trên điện thoại?

Không phải lúc nào bạn cũng có máy tính bên cạnh. Một vài tình huống thực tế mà việc vibe coding trên điện thoại hoặc tablet trở nên hữu ích:

• Phát hiện một lỗi nhỏ trên website — sai chính tả, lệch giao diện — và muốn sửa ngay thay vì đợi về nhà mở máy tính.
• Chợt nảy ra một ý tưởng và muốn dựng thử một trang demo ngay lập tức để không quên mất mạch cảm hứng.
• Đang di chuyển, chỉ mang theo điện thoại hoặc tablet, nhưng vẫn muốn tranh thủ thời gian rảnh để làm việc.
• Muốn cho khách hàng hoặc đối tác xem nhanh một bản chỉnh sửa ngay trong buổi gặp mặt, không có laptop bên cạnh.

Bí quyết để làm được điều này nằm ở một dịch vụ có tên GitHub Codespaces.

GitHub Codespaces là gì?

GitHub Codespaces là một "máy tính lập trình" chạy trên đám mây, được GitHub cung cấp sẵn cho mỗi tài khoản. Thay vì cài VS Code, cài Node, cài Git lên máy, bạn chỉ cần mở trình duyệt, bấm một nút, và toàn bộ môi trường lập trình — bao gồm VS Code, terminal, các phần mở rộng bạn đã cài — sẽ được dựng sẵn từ xa và hiển thị ngay trên màn hình điện thoại.

Vì Codespaces khởi chạy trực tiếp từ một kho mã nguồn (repository) trên GitHub, dự án của bạn phải được đẩy lên GitHub từ trước — đây chính là bước khởi tạo Git mà bạn đã làm ở Chương 6. Nếu đã có bước đó, bạn đã sẵn sàng để mở dự án từ bất kỳ đâu, trên bất kỳ thiết bị nào có trình duyệt.

Bước 1 — Truy cập GitHub Codespaces từ điện thoại

Mở trình duyệt trên điện thoại hoặc tablet, truy cập github.com và đăng nhập bằng tài khoản đã dùng để đẩy code lên trước đó. Mở menu điều hướng và chọn mục Codespaces.

Bước 2 — Tạo mới hoặc mở lại Codespace đã tạo

Trang Codespaces liệt kê tất cả các Codespace bạn đã từng tạo, nhóm theo từng kho mã nguồn (ví dụ tvd12/freestyle-html). Nếu đã có sẵn một Codespace cho dự án cần chỉnh sửa, chỉ cần chạm vào để mở lại — mọi thay đổi trước đó vẫn còn nguyên. Nếu chưa có, bấm New codespace để tạo mới từ kho mã nguồn mong muốn.

Bước 3 — Mọi thứ vẫn quen thuộc như trên máy tính

Sau vài chục giây khởi tạo, trình duyệt sẽ mở ra VS Code for Web — phiên bản VS Code chạy hoàn toàn trong trình duyệt, gần như giống hệt giao diện VS Code trên máy tính. Nếu bạn đã bật đồng bộ cài đặt (Settings Sync) trên tài khoản GitHub, các phần mở rộng quen thuộc như Claude Code và EzyArticle sẽ tự động xuất hiện, không cần cài lại từ đầu.

Bước 4 — Cấu trúc dự án và environment.json vẫn giữ nguyên

Vì Codespaces mở ra chính kho mã nguồn Git của bạn, cấu trúc thư mục — api, pages, environment.json, AGENTS.md — hoàn toàn giống với những gì bạn thấy trên máy tính. Không có gì bị thiếu, không có gì cần tạo lại.

Nếu đây là lần đầu mở Codespace cho dự án này, hãy mở terminal tích hợp sẵn ở phía dưới màn hình để kiểm tra tài nguyên được cấp phát (ví dụ lệnh nproc để xem số nhân CPU), sau đó mở tệp environment.json để khai báo lại thông tin kết nối tới website EzyPlatform của bạn — y hệt bước cấu hình ban đầu ở Chương 3.

Bước 5 — Gõ prompt cho Claude Code như thường lệ

Mở panel Claude Code và gõ prompt hệt như bạn vẫn làm trên máy tính. Bàn phím ảo trên điện thoại vẫn gõ tiếng Việt và ký tự đặc biệt bình thường.

Tạo giúp tôi trang độc lập cho trò chơi caro 9 ô đơn giản.

Claude Code sẽ đọc cấu trúc dự án, tự tạo thư mục trang mới cùng content.html và meta.json theo đúng quy ước đã học ở các chương trước — toàn bộ quá trình diễn ra ngay trên màn hình điện thoại, không khác gì đang ngồi trước máy tính.

Bước 6 — Các lệnh EzyArticle vẫn hoạt động qua thao tác chạm giữ

Trên máy tính, bạn click chuột phải vào tệp hoặc thư mục để mở menu ngữ cảnh chứa các lệnh của EzyArticle. Trên điện thoại hoặc tablet, chạm và giữ một chút vào tên tệp hoặc thư mục, menu tương tự sẽ hiện lên.

Ở gốc dự án, menu này cho lệnh Khởi Tạo Dự Án EzyArticle — dùng khi bạn tạo Codespace từ một kho mã nguồn còn trống, chưa có environment.json.

Còn khi chạm giữ vào một thư mục trang cụ thể (ví dụ pages/tic-tac-toe), menu hiện đầy đủ các lệnh quen thuộc: Lấy Admin URL Trang, Lấy Web URL Trang, Xem Trước Trang, Xuất Bản Nội Dung Lên Máy Chủ, Đồng Bộ Trang Từ Máy Chủ.

Bước 7 — Xuất bản và xem kết quả ngay trên điện thoại

Chạm vào Xuất Bản Nội Dung Lên Máy Chủ, chờ vài giây để EzyArticle đồng bộ trang mới lên website, rồi mở một tab trình duyệt mới trỏ tới đúng đường dẫn của trang. Kết quả hiển thị ngay lập tức, có thể chơi thử được luôn trên màn hình cảm ứng.

Toàn bộ hành trình — từ mở dự án, gõ prompt, đến xuất bản và kiểm tra kết quả — đã diễn ra chỉ trên một chiếc điện thoại, không cần chạm vào máy tính lấy một lần.

Những điều cần lưu ý

• Cần có repository trên GitHub từ trước: Codespaces luôn khởi chạy từ một kho mã nguồn đã tồn tại, nên bước khởi tạo Git ở Chương 6 là điều kiện bắt buộc để dùng được cách này.
• Tài khoản miễn phí có giới hạn giờ sử dụng: GitHub cấp khoảng 60 giờ Codespaces mỗi tháng cho cấu hình 2 lõi trên tài khoản cá nhân miễn phí — đủ dùng cho các tác vụ chỉnh sửa nhanh, không phù hợp để làm việc liên tục cả ngày.
• Dừng Codespace khi không dùng: chọn Stop thay vì để Codespace chạy nền, dữ liệu và thay đổi vẫn được giữ nguyên cho lần mở lại sau, giúp tiết kiệm giờ miễn phí.
• Bàn phím rời sẽ giúp ích nhiều: gõ tay trên màn hình cảm ứng phù hợp với các prompt ngắn hoặc sửa lỗi nhanh; nếu cần làm việc lâu trên tablet, một bàn phím Bluetooth sẽ giúp gõ nhanh và chính xác hơn nhiều.

Vibe coding trên điện thoại không nhằm thay thế hoàn toàn máy tính, mà mở ra thêm một lựa chọn: bất cứ khi nào có ý tưởng, bạn đều có thể bắt tay vào làm ngay, thay vì phải chờ đến khi ngồi được trước bàn làm việc.