Trang chủ
Vibe coding

Hướng dẫn bắt đầu Vibe Coding với Google Sheets, Google Appscript, Github

Edushare





Chào các bạn, vibe coding hiện đang được ưa chuộng và khá phổ biến vì giúp tiết kiệm thời gian triển khai một ứng dụng và dễ tiếp cận cho người có nhu cầu xây dựng website nhưng không cần biết quá sâu về lập trình.

Trong bài hướng dẫn này mình sẽ hướng dẫn từ việc chuẩn bị môi trường, thử làm một dự án mẫu và triển khai lên GitHub.

Bạn cần lưu ý rằng mỗi giải pháp sẽ có những ưu nhược điểm của nó, do đó bạn cần cân nhắc xem có phù hợp với nhu cầu của bản thân không nhé.

Ưu điểm: 

  1. Tiết kiệm chi phí (gần như là miễn phí): với nhu cầu tạo các website đơn giản bạn có thể dùng các công cụ AI miễn phí sẵn có như Chat GPT, Gemini,... để yêu cầu nó viết code theo nhu cầu của bạn, database mình sẽ dùng Google Sheets (miễn phí), phần back-end là Google Appscript (miễn phí) chỉ cần bạn có tài khoản Gmail là được, Front-end mình dùng Github Pages (miễn phí) và có thể custom theo domain tuỳ ý (bạn cần mua domain trước).
  2. Dễ triển khai: với dân không chuyên lập trình thì có thể sẽ có vài trở ngại, nhưng bạn có thể đọc và làm theo hướng dẫn bài viết này, nếu có lỗi có thể hỏi thêm Chat GPT, Gemini,... đểu có thể giúp bạn, còn đối với dân lập trình thì đây là giải pháp triển khai nhanh gọn cho nhu cầu quy mô nhỏ, làm bản demo,...
Nhược điểm:
  1. Tốc độ hiệu suất có giới hạn: miễn phí thì luôn có giới hạn, do sử dụng Google Sheets làm database và Google Appscript làm back-end do đó tốc độ xử lý của các request sẽ chậm hơn nhiều so với việc bạn đầu tư một server trả phí (tuy nhiên cũng không quá chậm đâu, trung bình sẽ khoảng 2-5s cho một request theo trải nghiệm của mình và còn tuỳ vào tốc độ internet của bạn).
  2. Sẽ gặp sự cố quá tải nếu có quá nhiều người truy cập cùng một lúc: trang web của bạn có thể sẽ không hiển thị hoặc xử lý rất chậm hay Time-out nếu có quá nhiều người cùng truy cập, do đó chỉ phù hợp nếu bạn muốn tạo ra website chỉ phục vụ cho cá nhân hoặc nhóm nhỏ người sử dụng.
  3. Dung lượng giới hạn theo tài khoản Gmail: dung lượng lưu trữ của các file/ảnh nếu bạn tạo website có nhu cầu upload các loại tệp thì sẽ bị giới hạn bởi dung lượng tài khoản Gmail của bạn (tài khoản Gmail miễn phí thường là 15GB)
Trên đây là một số ưu, nhược điểm chính để giúp bạn đánh giá xem có phù hợp với nhu cầu của bạn không trước khi bắt đầu đi sâu hơn giải pháp này nhé.

Trong giải pháp lần này mình sẽ hướng dẫn trên môi trường dành cho MacOS nhé.

1. Cấu trúc dự án mẫu

Dự án mẫu mình sẽ làm một trang đăng nhập đơn giản với cấu trúc như sau:

  • Database: dùng Google Sheets
  • Back-end: dùng Google Appscript
  • Front-end: dùng Github Pages

2. Chuẩn bị môi trường

  1. Cài đặt VS Code (Visual Code) trên máy, tải tại đây: https://code.visualstudio.com
  2. Cài đặt Node JS lên máy, tải tại đây: https://nodejs.org/en/download
    • Sau khi tải xong thì mởi file có đuôi .pkg để khởi chạy cài đặt
    • Sau khi cài đặt xong mở Terminal của MacOS lên để kiểm tra bằng cách 
      • Gõ vào node -v (Lệnh này sẽ trả về phiên bản Node.js, ví dụ: v20.x.x)
      • Gõ vào npm -v (Lệnh này sẽ trả về phiên bản npm, ví dụ: 10.x.x)
      • Nếu màn hình hiển thị ra các dãy số phiên bản nghĩa là bạn đã cài đặt thành công.
  3. Cài đặt Google Appscript lên máy
    • Từ Terminal của MacOS gõ mkdir ~/.npm-global (Tạo một thư mục chứa các gói global trong thư mục cá nhân)
    • Tiếp tục gõ npm config set prefix '~/.npm-global' (Cấu hình lại npm để sử dụng thư mục mới này)
    • Tiếp tục gõ echo 'export PATH=~/.npm-global/bin:$PATH' >> ~/.zshrc (Thêm đường dẫn vào biến môi trường của hệ thống Mac, để máy tính biết tìm lệnh clasp ở đâu)
    • Sau khi chạy xong, áp dụng ngay thay đổi bằng lệnh source ~/.zshrc
    • Bây giờ bạn có thể chạy lệnh cài đặt: npm install -g @google/clasp
    • Sau khi chạy xong lệnh cài đặt trên, bạn có thể kiểm tra xem clasp đã nhận chưa bằng cách gõ clasp -v
    • Nếu máy hiển thị ra số phiên bản của clasp (ví dụ: v2.4.x), nghĩa là bạn đã cài đặt thành công
    • Đăng nhập tài khoản Google của bạn, tiếp tục gõ lệnh: clasp login (Lệnh này sẽ mở trình duyệt để bạn cấp quyền cho phép clasp thao tác với tài khoản Google)
  4. Cài đặt xcode
    • Mở VS Code lên, sau đó mở Terminal của VS Code (trên thanh menu Termianl > New Terminal)
    • Gõ lệnh xcode-select --install. Trên màn hình máy Mac của bạn sẽ xuất hiện một hộp thoại nhỏ bật lên hỏi: "The git command requires the command line developer tools. Would you like to install the tools now?" (hoặc tương tự). Nhấn nút Install (Cài đặt) và đồng ý với các điều khoản. Ở bước này hộp thoại có thể nằm dưới các window do đó bạn kiểm tra kỹ nhé.
    • Nhấn nút Install (Cài đặt) và đồng ý với các điều khoản. Chờ vài phút để hệ thống tải và cài đặt xong (quá trình này nhanh hay chậm tùy thuộc vào tốc độ mạng của bạn). Mình mất khoảng 30 phút cho bước này.

Như vậy bạn đã chuẩn bị xong môi trường cần thiết để bắt đầu.

3. Chuẩn bị Database với Google Sheets

  1. Mở Google Drive và tạo 1 Google Sheets đặt tên là DB_Users với các cột như sau:
    • Email, Password, FullName
    • Thêm sẵn 1 dòng dữ liệu mẫu để test:
      Email: test@gmail.com | Password: 123456 | FullName: Nguyễn Văn Test
  2. Đổi tên Sheet1 là Users

4. Chuẩn bị back-end với Google Appscript

  1. Tạo một thư mục trên máy tính cho dự án, ví dụ: login-google-sheet
  2. Từ VS Code, mở thư mục này bằng VS Code
  3. Trong terminal của VS Code, khởi tạo dự án Apps Script dạng standalone bằng cách gõ: clasp create --type standalone --title "LoginBackend" (Lệnh này sẽ tạo file .clasp.json kết nối VS Code với một Project Apps Script trên tài khoản của bạn).
  4. Tạo file Code.js trong thư mục dự án và dán đoạn mã xử lý API đăng nhập sau đây:
    Hãy lấy ID của Google Sheet (đoạn nằm giữa /d/ và /edit trên thanh URL của trình duyệt) thay vào biến sheetId trong code trên (đoạn "ĐIỀN_GOOGLE_SHEET_ID_CỦA_BẠN_VÀO_ĐÂY").
    Lấy code tại đây: https://drive.google.com/file/d/18sg74u1d0ahCO4LackJd3_7NPRtxHRit
  5. Đẩy code lên Google Apps Script và Deploy Web App
    • Push code từ VS Code lên Google gõ lênh từ Terminal của VS Code: clasp push
    • Mở giao diện Apps Script trên trình duyệt bằng lệnh: clasp open
    • Trên trang web Apps Script vừa mở: Nhấn Deploy > New deployment. 
      Chọn loại: Web app
      Execute as: Me
      Who has access: Anyone

      Nhấn Deploy và cấp quyền
    • Sau đó Copy lại Web App URL dạng [https://script.google.com/macros/s/.../exec] Đây là API Endpoint của bạn!

5. Triển khai front-end với Github Pages

  1. Tại thư mục dự án trên VS Code, bạn tạo giao diện trang đăng nhập bằng HTML tĩnh.
    Tạo file index.html
  2. Copy code tại đây: https://drive.google.com/file/d/1Zd0Rn83cJr09Jlcm9sH5ZGDFqU08W6RM
  3. Thay thế đoạn "DÁN_WEB_APP_URL_CỦA_BẠN_VÀO_ĐÂY" bằng URL Web App bạn vừa nhận được ở Phần 4 (dạng https://script.google.com/macros/s/.../exec)
  4. Đưa mã nguồn lên GitHub
    • Tạo một Repository mới trên GitHub (ví dụ: my-login-app).
    • Khởi tạo git tại thư mục dự án trên VS Code và đẩy code lên, gõ lệnh trong Terminal của VS Code:
      git init
      git add .
      git commit -m "Initial commit - Login app"
      git branch -M main
      git remote add origin https://github.com/TÊN_TÀI_KHOẢN_CỦA_BẠN/my-login-app.git
      git push -u origin main
    • Phần TÊN_TÀI_KHOẢN_CỦA_BẠN chính là username Github của bạn
  5. Deploy Website lên GitHub Pages
    • Vào trang GitHub Repository của bạn > chọn tab Settings. Ở cột bên trái, chọn Pages
    • Phần Build and deployment > mục Branch, chọn main và thư mục / (root), sau đó nhấn Save.
    • Chờ khoảng 1-2 phút, GitHub sẽ cung cấp cho bạn một đường link website trực tuyến dạng https://username.github.io/my-login-app/
  6. Lúc này bạn có thể mở trên trình duyệt link trên sẽ hiển thị giao diện website, thử đăng nhập bằng tài khoản test lúc đầu đã tạo trong Google Sheets nhé.

6. Các hiển thị bản xem trước, trước khi push code lên Github

Trong quá trình bạn thực hiện dự án chắc chắn sẽ muốn xem thử trước kết quả trước khi đẩy code lên Github cách chuyên nghiệp và nhanh nhất là sử dụng extension Live Server.

  1. Cài đặt Extension Live Server trên VS Code
    • Từ VS Code, nhấn vào biểu tượng Extensions ở thanh menu bên trái
    • Tại ô tìm kiếm, gõ từ khóa: Live Server (do Ritwick Dey phát triển, là extension phổ biến nhất).
    • Nhấn nút Install để cài đặt.
  2. Chạy Live Server để Preview
    • Mở file index.html của bạn trong VS Code
    • Nhìn xuống góc dưới cùng bên phải của thanh trạng thái (Status Bar) trong VS Code, bạn sẽ thấy một nút nhỏ có chữ: Go Live. Click vào nút Go Live đó.
    • Ngay lập tức, VS Code sẽ tự động mở trình duyệt web (Chrome, Edge, Safari...) hiển thị trang đăng nhập của bạn theo một địa chỉ local, ví dụ: http://127.0.0.1:5500/index.html

7. Tuỳ chỉnh tên miền (domain)

Github cho phép bạn custom domain của riêng bạn thay vì để link mặc định dạng https://username.github.io/my-login-app/ như trên. Nhưng trước hết bạn cần sở hữu một tên miền trước nhé.

  1. Khai báo Custom Domain trên GitHub Pages
    • Truy cập vào Repository của bạn trên GitHub
    • Chọn tab Settings ở thanh menu trên cùng, Ở cột bên trái, tìm và chọn mục Pages.
    • Tại phần Custom domain, bạn nhập vào donain, mình ví dụ test.edushare.vn và bấm nút Save
    • GitHub sẽ tự động tạo một file tên là CNAME chứa nội dung test.edushare.vn đẩy vào nhánh main của bạn. Lưu ý: Ô "Enforce HTTPS" sẽ có thể bị mờ lúc đầu, hãy đợi vài phút sau khi DNS cập nhật xong thì quay lại tích chọn để bật chứng chỉ bảo mật SSL miễn phí cho tên miền.
  2. Cấu hình DNS tại nhà quản lý tên miền
    • Bạn cần đăng nhập vào nơi bạn đã mua tên miền (ví dụ: P.A Vietnam, Mắt Bão, GoDaddy, Cloudflare...) và trỏ bản ghi (DNS Records) về máy chủ của GitHub.\
    • Bạn cần tạo một bản ghi CNAME:
      Tên / Host / Name: test
      Giá trị / Points to / Target: USERNAME-GITHUB-CỦA-BẠN.github.io
      TTL: Mặc định (hoặc 3600)
    • Sau khi lưu cấu hình DNS, quá trình lan truyền mạng (DNS Propagation) sẽ mất từ 5 phút đến tối đa 24 giờ (thường thì rất nhanh, khoảng 5-10 phút).
    • Bạn mở trình duyệt và truy cập vào domain đã setup.
    • Bước cuối cùng: Quay lại mục Settings > Pages trên GitHub, lúc này ô Enforce HTTPS đã sáng lên, hãy bấm tích chọn vào đó để GitHub cấp phát chứng chỉ SSL giúp website chạy giao thức https:// an toàn tuyệt đối.

Trên đây là những trải nghiệm của bản thân mình trong quá trình tìm hiểu vibe coding và mình hướng dẫn lại các bạn bằng cách đơn giản nhất theo cách của mình, do đó nếu có đóng góp gì để bài viết hoàn thiện hơn các bạn có thể để lại comment nhé.

Trong các bài viết tiếp theo mình sẽ hướng dẫn bắt đầu sử dụng AI để vide coding dựa trên dự án mẫu  này nhé.

Đăng nhận xét