Trường hợp 9) Blog cá nhân, từ ý tưởng đến phân phối

Cảnh

Sinh viên đại học Park Ji-ho muốn tạo một blog để viết các bài đánh giá về bia. Anh ấy có thể sử dụng Naver Blog hoặc Tistory, nhưng anh ấy muốn sở hữu một tên miền (domain, địa chỉ internet) của riêng mình. Một địa chỉ như beerlog.kr chẳng hạn. Tuy nhiên, anh ấy chưa từng tự tay tạo ra một trang web nào. Anh ấy đã từng nghe đến từ HTML, nhưng chưa bao giờ viết mã code cả.

Lệnh

mkdir ~/beerlog

cd ~/beerlog

git init

Mở Claude Code lên và ra lệnh như thế này.

"Hãy tạo cho tôi một blog review bia. Tên là 'Nhật ký một ly bia'. Trang chủ sẽ hiển thị danh sách các bài viết, và khi nhấp vào một bài viết thì nội dung review sẽ hiện ra. Trong mỗi bài review bao gồm: tên bia, nhà máy bia, đánh giá sao (thang điểm 5), một hình ảnh và nội dung chi tiết. Thiết kế theo phong cách tối giản và tông màu tối. Hãy thiết lập sao cho khi tôi viết bài bằng file markdown thì trang web sẽ tự động tạo bài viết mới."

Quá trình thực hiện

Claude Code thiết lập một trình tạo trang tĩnh (Static Site Generator, công cụ chuyển đổi các tệp Markdown thành trang web). Trong số nhiều công cụ khác nhau, nó sẽ chọn và cài đặt những cái như Hugo hoặc Eleventy.

Tạo cấu trúc thư mục, thiết lập giao diện (theme, theme, khung thiết kế) và tạo một bài viết đánh giá mẫu. Cấu trúc này bao gồm danh sách bài viết hiển thị ở trang chủ, và khi nhấp vào bài viết, nội dung chi tiết sẽ được hiển thị.

Hiển thị bản xem trước tại local (local, local, máy tính của tôi).

hugo server

Khi chạy lệnh này, bạn có thể xem blog tại địa chỉ http://localhost:1313 trên trình duyệt. Vì nó chỉ hiển thị bên trong máy tính của bạn nên người khác sẽ không thể nhìn thấy.

Đến đây là khoảng 15 phút.

Để thực hiện việc triển khai (deploy, đưa lên internet), hãy tiếp tục yêu cầu Claude Code thực hiện.

"Hãy triển khai blog này lên Vercel."

Vercel (Vercel, dịch vụ giúp đưa website lên internet) có thể được sử dụng miễn phí nếu là dự án cá nhân. Claude tạo một kho lưu trữ GitHub (GitHub, dịch vụ lưu trữ mã nguồn), tải mã lên và kết nối với Vercel.

Tính cả thời gian triển khai thì sẽ mất khoảng 25 đến 30 phút.

Kết quả

Blog được công khai trên internet. Bất kỳ ai cũng có thể truy cập thông qua các địa chỉ như beerlog.vercel.app. Nếu muốn kết nối tên miền riêng (beerlog.kr), bạn cần phải mua tên miền riêng biệt, chi phí khoảng 15.000 won mỗi năm.

Chi phí

Thời gian 30 phút, chi phí từ 3.000 đến 5.000 won. Chi phí vận hành máy chủ là miễn phí (Vercel gói miễn phí). Nếu mua tên miền sẽ thêm 15.000 won mỗi năm.

Nguy hiểm

Ngay khi bạn triển khai, hay nói cách khác là đăng lên internet, rủi ro sẽ phát sinh. Nếu mã nguồn có chứa thông tin cá nhân, nó sẽ bị công khai ra toàn thế giới. Sẽ là một vấn đề lớn nếu các API key, mật khẩu, hoặc email cá nhân được hard-coding (hard-coding, viết trực tiếp vào mã nguồn) trong code. Trường hợp này là blog cá nhân nên ít khi có thông tin bí mật, nhưng hãy luôn kiểm tra theo thói quen.

Trước khi triển khai, tôi thường yêu cầu Claude Code như thế này: "Hãy kiểm tra xem có thông tin nhạy cảm nào như mật khẩu, API key, hay token bị lộ trong tất cả các tệp tin thuộc thư mục này không." Claude Code sẽ rà soát từng tệp một để tìm các dòng có chứa các từ như password, secret, api_key, token. Nếu không có kết quả nào hiện ra, nghĩa là mọi thứ đều an toàn.

Nếu chúng ta cũng muốn làm theo

Hãy cho tôi biết cụ thể mục đích và tông màu thiết kế của blog. Thay vì nói "Hãy tạo cho tôi một blog", kết quả sẽ tốt hơn nếu bạn nói "Blog review bia, tông màu tối, có bao gồm đánh giá sao". Về việc triển khai, hãy sử dụng các dịch vụ miễn phí như Vercel hoặc Netlify (Netlify). Bạn sẽ cần một tài khoản GitHub (miễn phí).

Trường hợp 10) Trang web lịch trình họp mặt khu phố

Cảnh

Bà Kim Young-sook là người dẫn dắt câu lạc bộ đọc sách tại khu chung cư. Mỗi tháng, bà đều đăng ngày họp và sách cần đọc lên nhóm chat KakaoTalk, nhưng mỗi khi có thành viên mới tham gia, bà lại phải gửi lại các thông tin cũ. Việc tìm lại các bản ghi cũ cũng rất khó khăn. Nếu có thể đăng lịch trình lên một trang web đơn giản thì chỉ cần một đường link là có thể giải quyết xong mọi việc.

Lệnh

"Hãy tạo giúp tôi một trang web lịch trình cho câu lạc bộ đọc sách. Chỉ cần một trang duy nhất thôi. Phía trên cùng là tên câu lạc bộ 'Chiều cùng đọc', bên dưới là thông tin buổi họp tới (ngày tháng, địa điểm, sách cần đọc), và bên dưới nữa là nhật ký các buổi họp trước. Hãy thiết lập để dữ liệu được đọc từ một tệp JSON. Tôi chỉ cần chỉnh sửa tệp JSON là trang web sẽ tự động thay đổi."

Quá trình thực hiện

Claude Code tạo ra các trang web bằng HTML và CSS (ngôn ngữ dùng để thiết kế giao diện trang web), đồng thời tạo ra một tệp dữ liệu có tên là schedule.json. Tệp JSON (JavaScript Object Notation, một định dạng dùng để lưu trữ dữ liệu) là một tệp văn bản mà con người có thể đọc được, vì vậy bạn có thể mở nó bằng Notepad để thay đổi ngày tháng và tên sách.

Chỉ mất 10 phút để hoàn thành. Nếu bạn đăng lên Vercel hoặc GitHub Pages, bạn sẽ có một địa chỉ internet. Bạn chỉ cần gửi địa chỉ này vào nhóm chat KakaoTalk là xong.

Kết quả

Một trang web lịch trình gọn gàng chỉ trong một trang duy nhất. Thông tin về buổi họp mặt tiếp theo được hiển thị nổi bật ở phía trên, và khi cuộn xuống dưới, các bản ghi chép cũ sẽ hiện ra.

Chi phí

Thời gian 10 phút, chi phí 500 won, phí vận hành máy chủ miễn phí.

Nguy hiểm

Vì trang web được công khai, bạn không được viết địa chỉ chi tiết của địa điểm họp mặt (như số căn hộ, số tầng). Hãy sử dụng những cách diễn đạt mà chỉ người trong nội bộ mới biết, chẳng hạn như "nhà văn hóa trong khu dân cư".

Nếu chúng ta cũng muốn làm theo

Hãy cho tôi biết tên buổi họp mặt, bầu không khí, và các thông tin cần thiết (ngày tháng, địa điểm, chủ đề, v.v.). Nếu bạn không biết cách chỉnh sửa tệp JSON, hãy hỏi Claude Code. Ví dụ: "Làm thế nào để thêm một buổi họp mặt vào tháng 7 trong file schedule.json?".

Trường hợp 11) Hệ thống đặt chỗ của một cửa hàng nhỏ

Cảnh

Một tiệm hoa nhỏ ở Yeonnam-dong, Seoul. Chủ tiệm đang nhận đặt hàng qua tin nhắn trực tiếp (DM) trên Instagram. Mỗi ngày có hơn mười tin nhắn kiểu như: "Bạn có thể làm giúp mình một bó hoa vào lúc 3 giờ chiều thứ Sáu được không?". Trả lời tin nhắn, ghi chép vào sổ tay, kiểm tra xem có bị trùng lịch hay không. Nếu tin nhắn bị dồn ứ, sẽ có những đơn đặt hàng bị bỏ lỡ.

Ước gì có một hệ thống đặt chỗ, nhưng Naver Booking hay Kakao Booking đều bị tính phí hoa hồng. Nếu tự làm thì sẽ không mất phí, nhưng nghe nói nếu thuê lập trình viên thì sẽ tốn khoảng 2 triệu won.

Lệnh

"Hãy tạo cho tôi một hệ thống đặt lịch cho cửa hàng hoa. Hãy để khách hàng có thể chọn ngày và giờ trên trang web, sau đó nhập tên và số điện thoại để lưu thông tin đặt lịch. Nếu có hai người cùng đặt vào một khung giờ, hãy thông báo 'Khung giờ này đã được đặt rồi'. Danh sách đặt lịch phải có thể xem được tại trang quản trị. Hãy thiết lập mật khẩu quản trị là flower2025."

Quá trình thực hiện

Trường hợp này phức tạp hơn các trường hợp trước đó. Bởi vì chúng ta cần phải lưu trữ và tải dữ liệu. Claude Code sẽ tạo ra cả frontend (frontend, giao diện người dùng nhìn thấy) và backend (backend, phần xử lý dữ liệu phía sau).

Frontend: Màn hình chọn ngày trên lịch, hiển thị các khung giờ còn trống, và nhập tên cùng số điện thoại.

Backend: Logic lưu trữ thông tin đặt chỗ vào cơ sở dữ liệu và ngăn chặn việc đặt trùng vào cùng một thời điểm.

Trang quản trị: Màn hình hiển thị danh sách đặt chỗ của ngày hôm nay sau khi nhập mật khẩu.

Bạn có thể tạo ra mã Claude bằng cách kết hợp Next.js (Next.js, Next.js, web framework) và Supabase (Supabase, Supabase, dịch vụ cơ sở dữ liệu miễn phí). Cả hai đều có gói miễn phí nên sẽ không tốn chi phí cho các cửa hàng quy mô nhỏ.

Toàn bộ quá trình mất khoảng 40 phút đến 1 tiếng. Tuy mất nhiều thời gian hơn so với các trường hợp khác, nhưng nếu thuê ngoài bên nhà phát triển thì sẽ mất vài ngày và chi phí dao động từ vài trăm nghìn đến vài triệu won.

Kết quả

Trang đặt lịch được công khai trên internet. Nếu bạn gắn link này vào hồ sơ Instagram, khách hàng sẽ tự trực tiếp đặt lịch. Chủ cửa hàng có thể kiểm tra danh sách đặt lịch tại trang quản trị.

Chi phí

Thời gian 1 giờ, chi phí API từ 5.000 won đến 8.000 won. Chi phí vận hành máy chủ 0 won/tháng (trong phạm vi gói miễn phí). Nếu mua tên miền là 15.000 won/năm.

Nguy hiểm

Cần phải thực sự thận trọng với rủi ro trong trường hợp này. Hệ thống đặt chỗ lưu trữ tên và số điện thoại của khách hàng. Đó là thông tin cá nhân. Nếu dữ liệu này bị rò rỉ, các vấn đề pháp lý có thể phát sinh.

Về cơ bản, Supabase lưu trữ dữ liệu dưới dạng mã hóa, nhưng nếu mật khẩu trang quản trị quá dễ đoán như "flower2025", ai đó có thể xâm nhập được. Hãy thay đổi mật khẩu thành một chuỗi dài và phức tạp hơn, ví dụ như "Fl0w3r!2025#SeouL".

Hãy kiểm tra xem mật khẩu có được viết trực tiếp trong mã nguồn hay không. Bạn phải đưa chúng vào biến môi trường (environment variable, phương pháp lưu trữ thông tin bảo mật bên ngoài mã nguồn). Nội dung này sẽ được trình bày chi tiết trong phần các trường hợp thất bại ở cuối Chương 16.

Nếu chúng ta cũng muốn làm theo

Khi tạo hệ thống đặt chỗ, bạn không cần phải biết cách sử dụng các dịch vụ bên ngoài như Supabase. Claude Code sẽ thực hiện toàn bộ phần thiết lập cho bạn. Tuy nhiên, trước tiên bạn cần phải tạo một tài khoản miễn phí trên trang web của Supabase. Sau khi tạo tài khoản, bạn sẽ nhận được API key; chỉ cần cung cấp key này cho Claude Code, nó sẽ thực hiện kết nối. Trong quá trình vận hành dịch vụ, nếu số lượng đặt chỗ vượt quá 100 lượt mỗi ngày, bạn có thể sẽ cần phải nâng cấp lên gói trả phí.

Trường hợp 12) AI có khả năng tự mở trình duyệt và thực hiện kiểm thử trực tiếp

Cảnh

Tôi đã tạo xong một trang web. Có vẻ như nó đang hoạt động tốt, nhưng tôi muốn kiểm tra xem khi nhấn vào nút thì nó có thực sự hoạt động không, và chữ có bị cắt mất trên màn hình điện thoại hay không. Việc để con người đi kiểm tra bằng cách nhấn vào từng thứ một thì thật là phiền phức.

Lệnh

"Hãy mở trang web vừa mới tạo trên trình duyệt và nhấn thử vào tất cả các nút cũng như các liên kết. Nếu có chỗ nào xảy ra lỗi, hãy báo cho tôi và sửa lại nhé. Hãy kiểm tra cả trên kích thước màn hình di động (375px) nữa."

Quá trình thực hiện

Tại đây, một tính năng có tên là Browser Use (Browser Use, công cụ cho phép AI trực tiếp điều khiển trình duyệt) sẽ xuất hiện. AI sẽ thực sự mở trình duyệt, di chuyển chuột, nhấp vào các nút và nhập văn bản giống như một con người.

Claude Code sử dụng Playwright (Playwright, công cụ tự động hóa trình duyệt) để mở trình duyệt. Nó tải các trang web và nhấp vào từng nút một. Nếu phát hiện liên kết bị hỏng, nó sẽ báo cáo: "Khi nhấn vào nút Liên hệ, lỗi 404 xảy ra." Và sau đó, nó sẽ tự mình sửa lỗi.

Kiểm tra cả khi thu nhỏ màn hình về kích thước di động. Nếu chữ bị tràn ra khỏi màn hình, hãy chỉnh sửa CSS.

Toàn bộ quá trình mất từ 5 đến 10 phút.

Kết quả

Website đã hoàn tất kiểm tra. Các nút bấm đều hoạt động bình thường và bố cục không bị lỗi trên cả thiết bị di động. Danh sách các nội dung đã được AI chỉnh sửa sẽ được hiển thị trên terminal.

Chi phí

Thời gian 10 phút, chi phí từ 1.000 đến 2.000 won.

Nguy hiểm

Browser Use là tính năng cho phép AI truy cập vào internet. Tương tự như ví dụ về tóm tắt tin tức ở chương 12, việc chạy nó trong Docker sẽ an toàn hơn. AI có thể truy cập vào các trang web bên ngoài hoặc mở các trang không mong muốn trong quá trình thử nghiệm.

Nếu chúng ta cũng muốn làm theo

Ngay sau khi tạo xong website, bạn chỉ cần yêu cầu "Hãy kiểm tra trên trình duyệt giúp tôi". Playwright sẽ được tự động cài đặt. Hãy cho biết phạm vi kiểm tra một cách cụ thể. Ví dụ như: "Tất cả các nút, tất cả các liên kết, kích thước di động".

Trường hợp thất bại: Đã triển khai nhưng mật khẩu vẫn bị lộ nguyên văn trong mã nguồn

Đây là câu chuyện của chủ tiệm hoa (hậu truyện của trường hợp 11). Tôi đã tạo một hệ thống đặt lịch, đẩy mã nguồn lên GitHub và triển khai lên Vercel. Mọi thứ đã hoạt động trơn tru. Tôi đã nhận được các đơn đặt lịch mà không gặp bất kỳ vấn đề nào trong suốt 2 tuần qua.

Thế nhưng một ngày nọ, khi tôi đăng nhập vào trang quản trị, danh sách đặt chỗ đã trống trơn. Có ai đó đã truy cập vào trang quản trị và xóa sạch toàn bộ dữ liệu đặt chỗ.

Nguyên nhân là thế này. Mật khẩu quản trị viên "flower2025" đã bị viết trực tiếp trong mã nguồn. Bất kỳ ai cũng có thể xem được mã nguồn được tải lên GitHub (vì đó là kho lưu trữ công khai). Ai đó đã xem mã nguồn trên GitHub, tìm thấy mật khẩu và truy cập vào trang quản trị.

Vì đã yêu cầu AI rằng "Hãy thiết lập mật khẩu quản trị viên là flower2025", nên AI đã viết mật khẩu đó vào trong mã nguồn. Đó không phải lỗi của AI. Nó chỉ làm theo những gì được yêu cầu. Đó là lỗi của người đã không hướng dẫn rằng nên lưu trữ mật khẩu bên ngoài mã nguồn.

Những thông tin bảo mật như thế này nên được lưu trữ trong tệp biến môi trường (.env), và không được tải tệp này lên GitHub. Bạn chỉ cần thêm .env vào tệp .gitignore (danh sách các tệp mà Git sẽ bỏ qua).

Cách phòng tránh: Khi yêu cầu AI, hãy thêm dòng này vào. "Hãy để mật khẩu và API key vào file .env, và thêm .env vào .gitignore giúp tôi."