Lovable là công cụ AI giúp tạo website và ứng dụng web từ những mô tả bằng ngôn ngữ thông thường. Bạn giải thích điều mình muốn, Lovable tạo mã nguồn và bản xem trước, rồi bạn yêu cầu chỉnh sửa ngay trong cuộc trò chuyện đó. Bạn không cần tự viết mã để bắt đầu. Trang giới thiệu sản phẩm của Lovable mô tả đây là cách tạo ứng dụng có thể hoạt động thông qua giao diện trò chuyện.
Lần đầu, hãy làm một website đủ đơn giản để tự kiểm tra: một trang có vài dịch vụ, giờ mở cửa và đường dẫn liên hệ. Bài hướng dẫn này cung cấp một prompt thực hành riêng, một yêu cầu chỉnh sửa tiếp theo và vài bước kiểm tra trước khi xuất bản. Bạn vẫn cần đọc nội dung được tạo ra, thử các nút và đường dẫn, rồi sửa những gì AI hiểu sai.
Có thể tạo những gì bằng Lovable?
Bạn có thể bắt đầu với website cho một cơ sở kinh doanh dịch vụ, trang giới thiệu một ý tưởng hoặc công cụ nhỏ để sắp xếp thông tin. Những ứng dụng phức tạp hơn có thể lưu dữ liệu, có tài khoản người dùng và kết nối với các dịch vụ khác. Tuy nhiên, mỗi tính năng thêm vào đều có cách hoạt động riêng cần kiểm tra.
Trong bài tập này, hãy chọn website chỉ có một trang. Khách truy cập cần tìm được câu trả lời cho ba câu hỏi: cơ sở này cung cấp dịch vụ gì, mở cửa khi nào và liên hệ bằng cách nào?
Nếu bạn vẫn đang chọn công cụ, hãy đọc bài so sánh Lovable, Replit và Bolt. Nếu đã muốn thử Lovable, hãy bắt đầu với dự án nhỏ dưới đây.
Cần chuẩn bị gì trước khi bắt đầu?
- Tài khoản Lovable còn hạn mức để tạo hoặc chỉnh sửa dự án. Bạn có thể bắt đầu với gói miễn phí, nhưng mức sử dụng có giới hạn; không có bảo đảm rằng một hạn mức cụ thể sẽ đủ để hoàn thành bài tập. Nếu chạm giới hạn, hãy xem các gói và hạn mức hiện tại. Bài giải thích giá và credit Lovable giúp bạn hiểu số dư, thời điểm cấp lại credit và các lựa chọn nâng cấp.
- Một ý tưởng kinh doanh hoặc thực hành mà bạn hiểu rõ. Chúng ta sẽ dùng Mend Studio, một cơ sở sửa chữa thiết bị giả định.
- Địa chỉ email do bạn quản lý để thử đường dẫn liên hệ. Nếu xuất bản trang có địa chỉ này, khách truy cập sẽ nhìn thấy nó.
Bạn không cần tên miền riêng, tài khoản thanh toán hay cơ sở dữ liệu cho bài tập này. Hãy dùng thông tin thực hành có sẵn trước. Khi điều chỉnh trang cho một cơ sở kinh doanh thật, hãy thay bằng dịch vụ và giờ mở cửa thực tế của cơ sở đó.
1. Mô tả website đầu tiên của bạn
Mở Lovable, đăng nhập và tìm ô nhập yêu cầu chính. Hướng dẫn bắt đầu nhanh chính thức gọi ô này là Ask Lovable to create… (yêu cầu Lovable tạo…). Nhập yêu cầu vào đó để bắt đầu dự án.
Prompt là yêu cầu bạn đưa cho AI. Một prompt đầu tiên hữu ích cần nêu rõ khách truy cập là ai, trang có nội dung gì và bạn muốn họ thực hiện thao tác nào. “Hãy tạo một website đẹp” để AI tự quyết định cả ba điều này.
Trước khi gửi prompt dưới đây, hãy thay cả hai chỗ có YOUR_EMAIL_ADDRESS bằng địa chỉ email bạn dùng để thử. Prompt yêu cầu Lovable tạo website và trả lời bạn bằng tiếng Việt để bạn dễ đọc, kiểm tra và tiếp tục chỉnh sửa.
Hãy tạo website một trang bằng tiếng Việt cho Mend Studio, một cơ sở sửa chữa thiết bị giả định dùng để thực hành. Hãy trả lời tôi bằng tiếng Việt trong cuộc trò chuyện.
Khách truy cập muốn xem các dịch vụ và giờ mở cửa rồi liên hệ với chúng tôi qua email.
Trang cần có:
- Tiêu đề rõ ràng: "Chăm sóc thiết bị thật đơn giản."
- Ba dịch vụ: Cài đặt laptop, Thay màn hình và Vệ sinh thiết bị.
- Giờ mở cửa: thứ Hai đến thứ Sáu: 09:00-18:00; thứ Bảy: 09:00-13:00; Chủ nhật: nghỉ.
- Một đường dẫn liên hệ chính có nhãn "Gửi email", mở mailto:YOUR_EMAIL_ADDRESS.
- Hiển thị địa chỉ email YOUR_EMAIL_ADDRESS gần đường dẫn đó.
- Một thông báo nhỏ: "Website thực hành cho một cơ sở kinh doanh giả định."
Thiết kế nhẹ nhàng, dễ đọc, với nền sáng, chữ tối màu và một màu nhấn. Trang phải hiển thị và hoạt động tốt trên điện thoại lẫn màn hình máy tính.
Không tự bịa giá, địa chỉ, số điện thoại, đánh giá hoặc chứng nhận. Không thêm biểu mẫu đặt lịch, tài khoản, thanh toán hay cơ sở dữ liệu.Giải thích: prompt này yêu cầu tạo trang cho cơ sở sửa chữa giả định, với nội dung website và câu trả lời trong cuộc trò chuyện đều bằng tiếng Việt. Dịch vụ, giờ mở cửa và đường dẫn mở email được nêu rõ để bạn kiểm tra; các giới hạn ở cuối giúp AI không tự thêm thông tin chưa có hoặc tính năng ngoài phạm vi bài tập.
Chờ Lovable hoàn thành phiên bản đầu tiên. Bố cục có thể khác với hình dung của bạn. Vì vậy, ngoài định hướng thiết kế, prompt còn nêu rõ nội dung và cách hoạt động để bạn có cơ sở kiểm tra.
2. Kiểm tra phiên bản đầu tiên
Trình chỉnh sửa của Lovable đặt cuộc trò chuyện cạnh bản xem trước của dự án. Hãy đọc trang được tạo ra trước khi yêu cầu thêm tính năng. Dùng các yêu cầu sau để xem phiên bản đầu tiên đã đáp ứng đúng đề bài chưa:
| Mục kiểm tra | Nội dung cần có |
|---|---|
| Mục đích | Trang mô tả rõ các dịch vụ sửa chữa thiết bị |
| Dịch vụ | Cài đặt laptop, Thay màn hình và Vệ sinh thiết bị |
| Giờ mở cửa | Thứ Hai đến thứ Sáu: 09:00-18:00; thứ Bảy: 09:00-13:00; Chủ nhật: nghỉ |
| Liên hệ | Đường dẫn Gửi email và địa chỉ bạn đã cung cấp |
| Phạm vi | Có thông báo "Website thực hành cho một cơ sở kinh doanh giả định."; không có thông tin tự bịa thêm hay biểu mẫu ngoài yêu cầu |
Nếu thiếu nội dung nào, hãy yêu cầu bổ sung phần đó trước khi thêm thứ khác. Ví dụ: “Thêm dòng Chủ nhật nghỉ vào phần giờ mở cửa. Giữ nguyên các giờ mở cửa khác và các dịch vụ.”
Bản xem trước giúp bạn kiểm tra trang, nhưng việc nhìn thấy một nút chưa chứng minh rằng nút đó mở đúng nơi cần đến. Bạn sẽ kiểm tra điều này ở bước riêng.
3. Yêu cầu một thay đổi cụ thể
Bây giờ, hãy đổi giờ mở cửa ngày thứ Bảy. Đây là bài tập nhỏ về cách hướng dẫn AI: nói rõ điều cần đổi và những gì phải giữ nguyên.
Đổi giờ mở cửa thứ Bảy từ 09:00-13:00 thành 10:00-14:00 ở mọi nơi hiển thị giờ thứ Bảy trên trang.
Giữ nguyên giờ mở cửa từ thứ Hai đến thứ Sáu, thông tin nghỉ Chủ nhật, các dịch vụ, địa chỉ email, đường dẫn liên hệ và thiết kế. Không thêm tính năng mới.Giải thích: prompt này đổi giờ mở cửa thứ Bảy ở mọi nơi trên trang, đồng thời yêu cầu giữ nguyên các chi tiết còn lại. Nêu rõ cả phần cần đổi lẫn phần cần giữ giúp giới hạn việc chỉnh sửa vào đúng yêu cầu.
Sau khi Lovable hoàn tất, hãy đọc lại trang. Giờ thứ Bảy lúc này phải là 10:00-14:00, giờ từ thứ Hai đến thứ Sáu vẫn là 09:00-18:00 và Chủ nhật vẫn nghỉ. Kiểm tra lại cả tên dịch vụ và địa chỉ liên hệ.
Nếu Lovable cũng sửa điều bạn muốn giữ, hãy nêu rõ điều đó trong tin nhắn tiếp theo. Một yêu cầu sửa hữu ích cần mô tả vấn đề nhìn thấy được: “Dịch vụ Thay màn hình đã biến mất. Hãy khôi phục dịch vụ này mà không thay đổi giờ mở cửa thứ Bảy vừa cập nhật.”
4. Kiểm tra đường dẫn liên hệ và bố cục trên điện thoại
Thử nhấn Gửi email. Đường dẫn này cần mở ứng dụng hoặc dịch vụ xử lý email đã được thiết lập trên thiết bị, với đúng địa chỉ người nhận. Mở thư nháp chưa phải là gửi thư. Nếu muốn gửi email thử, hãy kiểm tra người nhận trước khi gửi.
Nếu không có gì mở ra, thiết bị của bạn có thể chưa thiết lập ứng dụng xử lý đường dẫn email. Hãy kiểm tra cả địa chỉ đích của đường dẫn lẫn địa chỉ hiển thị: chữ trên trang có thể đúng nhưng đường dẫn lại trỏ đến nơi khác. Thử lại trên trang đã xuất bản bằng thiết bị có thiết lập email.
Dùng nút chọn kích thước màn hình phía trên bản xem trước của Lovable để kiểm tra bố cục trên màn hình hẹp. Kiểm tra để chắc chắn rằng:
- tiêu đề và tên dịch vụ hiển thị đủ, không bị cắt mất chữ;
- tất cả giờ mở cửa đều dễ đọc;
- đường dẫn liên hệ dễ nhấn;
- trang không bị cuộn ngang;
- thông báo đây là website thực hành vẫn hiển thị.
Nếu có lỗi, hãy mô tả vị trí và những gì bạn thấy. “Ở bố cục điện thoại, các thẻ dịch vụ tràn ra ngoài mép phải” giúp công cụ hiểu vấn đề rõ hơn “Sửa giao diện trên điện thoại”.
5. Xuất bản và mở phiên bản dành cho khách truy cập
Khi nội dung đã sẵn sàng và bạn đã kiểm tra xong, hãy làm theo quy trình xuất bản của Lovable:
- Chọn Publish ở góc trên bên phải của trình chỉnh sửa.
- Kiểm tra địa chỉ
lovable.appđược gợi ý, rồi chọn Publish trong hộp thoại. - Chờ thông báo Your website is live, rồi mở đường dẫn vừa nhận được.
- Mở đường dẫn đó trên điện thoại và trong một cửa sổ trình duyệt chưa đăng nhập Lovable. Kiểm tra lại giờ mở cửa, liên hệ và bố cục.
Địa chỉ được cung cấp là đủ cho bài tập này. Bạn có thể quyết định kết nối tên miền riêng sau. Bất kỳ ai có đường dẫn đều truy cập được website đã xuất bản trên gói Free. Vì vậy, hãy giữ thông báo về cơ sở kinh doanh giả định và chỉ đăng địa chỉ email mà bạn sẵn sàng công khai.
Bản xem trước trong trình chỉnh sửa và website đã xuất bản là hai phiên bản riêng. Sau khi chỉnh sửa tiếp, chọn Publish → Publish changes để cập nhật website đang công khai, rồi kiểm tra lại đường dẫn đó. Việc xuất bản không bảo đảm rằng công cụ tìm kiếm sẽ lập chỉ mục trang hoặc mang khách truy cập đến.
Những lỗi thường gặp ở dự án đầu tiên
| Lỗi thường gặp | Bước tiếp theo nên làm |
|---|---|
| Yêu cầu tạo cùng lúc website, hệ thống đặt lịch, cửa hàng và bảng điều khiển | Hoàn thành một hành trình của khách truy cập trước: dịch vụ → giờ mở cửa → liên hệ |
| Cho rằng nội dung viết trau chuốt luôn chứa thông tin đúng | Đối chiếu trang với thông tin bạn đã cung cấp |
| Yêu cầu nhiều chỉnh sửa không liên quan trong một tin nhắn | Thay đổi từng việc rồi kiểm tra tác động |
| Xem đường dẫn email như thao tác đặt lịch hoặc lưu yêu cầu liên hệ | Mô tả đúng chức năng: mở thư trong ứng dụng email của khách truy cập |
| Sửa bản xem trước rồi cho rằng khách truy cập đã thấy nội dung mới | Xuất bản các thay đổi, rồi mở URL công khai |
Nên học gì sau website đầu tiên?
Giờ bạn đã có một quy trình thực hành để lặp lại: mô tả một kết quả nhỏ → xem xét kết quả → yêu cầu thay đổi cụ thể → kiểm tra → xuất bản. Hoàn thành các bước kiểm tra quan trọng hơn việc viết prompt đầu tiên sao cho có vẻ phức tạp.
Nếu ý tưởng tiếp theo cần lưu thông tin, có tài khoản người dùng hoặc cách hoạt động phức tạp hơn, hãy đọc Vibe coding cho người mới bắt đầu để hiểu điều gì thay đổi khi một bản mẫu trở thành sản phẩm dành cho người dùng thật. Để tính ngân sách tổng thể, hãy đọc bài về chi phí xây dựng và vận hành ứng dụng bằng AI.
Nếu muốn thực hành theo lộ trình, khóa học Xây dựng sản phẩm số đầu tiên của bạn với AI của RianVibe dùng ứng dụng Todo để hướng dẫn cách xây dựng, chỉnh sửa, kiểm tra kết quả và từng bước tiến tới sản phẩm của riêng bạn. Phần giới thiệu miễn phí; toàn bộ khóa học có phí. Chi phí của các nhà cung cấp được tính riêng, không nằm trong học phí.
Câu hỏi thường gặp
Có cần biết lập trình để dùng Lovable không?
Bạn có thể bắt đầu bằng cách mô tả một trang và yêu cầu chỉnh sửa bằng ngôn ngữ thông thường. Bạn vẫn cần quyết định trang phải làm được gì và kiểm tra cách nó hoạt động. Dự án có tài khoản, dữ liệu nhạy cảm hoặc kết nối phức tạp với dịch vụ khác đòi hỏi nhiều kiến thức và kiểm thử hơn bài tập tạo trang đầu tiên này.
Có thể dùng thử Lovable miễn phí không?
Có. Lovable có gói miễn phí với mức sử dụng giới hạn. Số lần chỉnh sửa phụ thuộc vào hạn mức còn lại và công việc bạn yêu cầu. Hãy xem thông tin gói hiện tại thay vì cho rằng một prompt hay một website hoàn chỉnh luôn tiêu tốn một số credit cố định.
Có thể viết prompt bằng ngôn ngữ của mình không?
Có. Trong bài tập này, các prompt đều bằng tiếng Việt và yêu cầu Lovable dùng tiếng Việt cho cả website lẫn câu trả lời trong cuộc trò chuyện. Nếu muốn dùng ngôn ngữ khác, hãy nêu rõ ngôn ngữ của website và ngôn ngữ bạn muốn Lovable trả lời. Sau đó đọc lại nội dung được tạo ra để kiểm tra.
Website của tôi có cần theo một bố cục cụ thể không?
Không. Bố cục do AI tạo ra có thể khác nhau. Với bài tập này, điều cần kiểm tra là trang có đủ dịch vụ và giờ mở cửa theo yêu cầu, đường dẫn liên hệ hoạt động và nội dung dễ đọc.
Các thay đổi có tự xuất hiện trên website công khai không?
Không. Sau khi chỉnh sửa, hãy xuất bản các thay đổi từ hộp thoại xuất bản của Lovable. Sau đó mở URL công khai để xác nhận nội dung mà khách truy cập thực sự nhìn thấy.
Nguồn hướng dẫn quy trình được kiểm tra ngày 7 tháng 9 năm 2026: giới thiệu Lovable, hướng dẫn bắt đầu nhanh, bảng giá và xuất bản. Bài hướng dẫn này dựa trên tài liệu chính thức và sử dụng ví dụ thực hành riêng.