Lovable AI: Hướng dẫn kèm dự án demo

Lovable là một dịch vụ chuyển văn bản thành ứng dụng (text-to-app) cho phép bất kỳ ai tạo ra các ứng dụng hoạt động mà không cần kỹ năng lập trình. Chúng ta có thể mô tả ý tưởng ứng dụng qua giao diện chat, và nền tảng sẽ biến những mô tả đó thành một ứng dụng thực sự, có thể chạy được.

Trong hướng dẫn này, tôi sẽ cho bạn thấy cách dùng Lovable bằng cách xây dựng một thứ mang tính thực tiễn—tôi sẽ hướng dẫn từng bước để tạo và xuất bản một ứng dụng di động danh sách việc cần làm (to-do) đơn giản nhưng hoàn chỉnh với lưu trữ dữ liệu, xác thực người dùng, nhắc việc qua email và đăng ký trả phí.

Cuối cùng, tôi cũng sẽ bàn về một số hạn chế của Lovable, bao gồm các vấn đề bảo mật, khả năng thiếu tốc độ đối với lập trình viên đã có sẵn công cụ và thư viện của riêng mình, cũng như những khó khăn mà người không biết lập trình có thể gặp khi gỡ lỗi.

Lovable AI là gì?

Nhờ AI, Lovable cho phép chúng ta biến ý tưởng thành ứng dụng hoạt động đầy đủ chỉ bằng cách mô tả chúng. Điều này giúp dễ dàng vượt qua sự phức tạp của cách viết mã truyền thống, khiến việc tạo ứng dụng trở nên dễ tiếp cận và hiệu quả cho cả người không phải lập trình viên lẫn lập trình viên muốn tạo nguyên mẫu nhanh hơn.

Lovable dùng React và Vite cho frontend. React là thư viện JavaScript phổ biến để xây dựng giao diện người dùng, nổi tiếng về tính linh hoạt và hiệu quả. Vite là công cụ build mang lại trải nghiệm phát triển nhanh và gọn nhẹ. Những framework này hỗ trợ việc tạo ứng dụng bằng cách xử lý logic UI phức tạp, đảm bảo ứng dụng không chỉ hoạt động tốt mà còn mượt mà và phản hồi nhanh.

Về backend, Lovable sử dụng Supabase, một lựa chọn mã nguồn mở thay thế các giải pháp backend truyền thống. Về bản chất, Supabase là tập hợp công cụ tạo nên hệ thống backend, gồm lưu trữ cơ sở dữ liệu, xác thực và hàm đám mây. Nó phối hợp với ứng dụng để quản lý dữ liệu và kích hoạt các tính năng thời gian thực.

Lovable không cho phép chúng ta chỉnh sửa trực tiếp mã mà nó tạo ra trong giao diện của nó. Tuy nhiên, chúng ta có thể liên kết mã của ứng dụng với một kho GitHub. Nhờ kết nối này, mọi thay đổi trên GitHub sẽ phản ánh trực tiếp vào ứng dụng, cho phép cộng tác phát triển và quản lý phiên bản.

Thiết lập này kết hợp sự tiện lợi của giao diện no-code với tính linh hoạt và khả năng kiểm soát mà GitHub mang lại. Tuy vậy, tôi thường ước có thể chỉnh mã trực tiếp để thực hiện các thay đổi nhỏ.

Xây dựng dự án đầu tiên với Lovable

Bắt đầu

Để bắt đầu với Lovable, trước tiên chúng ta truy cập trang web của họ và tạo một tài khoản miễn phí.

Sau khi tạo tài khoản miễn phí, mỗi ngày chúng ta có thể gửi năm tin nhắn cho trợ lý AI của nền tảng. Đây là một thử thách thú vị để xem chúng ta có thể tiến xa đến đâu trong giới hạn này.

Trong tin nhắn đầu tiên, chúng ta đưa ra mô tả ngắn gọn về dự án. 

Lưu ý rằng mô tả của tôi khá ngắn. Tôi cũng đã thử đưa ra mô tả rất chi tiết ngay từ đầu, liệt kê tất cả chức năng, nhưng cách này không hoạt động tốt vì hầu hết chức năng đó cần backend. Khi dự án mới được tạo, nó không tự động kết nối với Supabase, nên prompt sẽ thất bại.

Đây là kết quả nhận được với prompt này:

Ở giai đoạn này, ứng dụng đã khá đầy đủ chức năng. Nó có thể tạo, xóa và đánh dấu mục đã hoàn thành trong danh sách to-do. Điều khiến tôi bất ngờ là dữ liệu vẫn được giữ lại khi làm mới ứng dụng!

Lovable làm điều này bằng local storage, lưu dữ liệu trong cơ sở dữ liệu của trình duyệt cục bộ. Cách này có ưu điểm là không cần kết nối internet nhưng nhược điểm là không đồng bộ dữ liệu giữa các thiết bị.

Hãy xem cách thay thế bằng cơ sở dữ liệu backend bằng cách kết nối dự án với Supabase.

Kết nối với Supabase

Supabase là nền tảng mã nguồn mở cung cấp hạ tầng backend cho ứng dụng. Nó cung cấp nhiều dịch vụ, bao gồm lưu trữ cơ sở dữ liệu, xác thực và API, trở thành giải pháp toàn diện để quản lý dữ liệu ứng dụng. 

Khi xây dựng ứng dụng to-do chẳng hạn, Supabase trở nên thiết yếu nếu chúng ta muốn dữ liệu ứng dụng tồn tại xuyên suốt nhiều thiết bị và người dùng. Khác với local storage chỉ lưu dữ liệu trong trình duyệt của một thiết bị, Supabase cho phép lưu dữ liệu trên đám mây. Điều này nghĩa là người dùng có thể truy cập danh sách to-do từ bất kỳ thiết bị nào và thấy cập nhật theo thời gian thực.

Ngoài ra, dịch vụ xác thực của Supabase giúp quản lý đăng ký và đăng nhập người dùng, đảm bảo dữ liệu của mỗi người dùng an toàn và riêng tư. Kết nối ứng dụng với Supabase giúp chúng ta khai mở trọn vẹn tiềm năng của ứng dụng.

Một ưu điểm của việc dùng Supabase để xây ứng dụng là tính mã nguồn mở. Vì mã nguồn mở, Supabase không khóa chúng ta vào một nhà cung cấp đám mây cụ thể, mang lại nhiều linh hoạt hơn trong cách quản trị backend. Dù có thể dùng dịch vụ Supabase được lưu trữ sẵn cho tiện lợi, chúng ta cũng có quyền tự lưu trữ ứng dụng bằng Docker nếu muốn. Sự linh hoạt này cho phép chọn môi trường lưu trữ phù hợp nhất với nhu cầu—dù là về chi phí, hiệu năng hay yêu cầu tuân thủ.

Để kết nối dự án với Supabase, hãy làm theo các bước sau:

1. Nhấp nút Supabase ở góc trên bên phải.

2. Một cửa sổ bật lên xuất hiện, yêu cầu chúng ta đăng ký Supabase.

3. Sau khi đăng ký, nhấp lại nút Supabase để ủy quyền cho Lovable truy cập tài khoản của chúng ta. Hệ thống sẽ yêu cầu tạo một tổ chức (organization).

4. Khi tổ chức đã được tạo, chọn tổ chức đó và ủy quyền cho Lovable truy cập tài khoản Supabase thông qua tổ chức này.

5. Nhấp nút Supabase lần nữa và tạo một dự án. Bạn sẽ được chuyển hướng đến trang Supabase để cấu hình dự án.

6. Cuối cùng, quay lại trang Lovable và nhấp nút Supabase thêm một lần. Chọn dự án vừa tạo. AI sẽ cập nhật mã để kết nối với dự án đó.

Xong, giờ ứng dụng của chúng ta đã có backend!

Như đã đề cập, tốt hơn nên kết nối với dự án Supabase trước khi yêu cầu Lovable triển khai bất kỳ chức năng nào cần backend, vì có vẻ nó không thích viết mã trước khi kết nối. Lưu ý đây không hẳn là cách kỹ sư làm việc—kỹ sư frontend có thể viết mã frontend ngay cả khi backend chưa được triển khai.

Thêm xác thực người dùng

Khi ứng dụng đã kết nối với dự án Supabase, giờ chúng ta có thể nhờ Lovable thêm xác thực người dùng.

Trước tiên, AI sẽ tạo các bảng cơ sở dữ liệu cho ứng dụng. Khi hoàn tất, chúng ta cần phê duyệt thủ công bằng cách nhấp nút "Apply Changes" trên cửa sổ chat.

Không phải lúc nào chúng ta cũng được yêu cầu chấp nhận thay đổi của AI, nhưng trong một số trường hợp, điều này là cần thiết vì một số thay đổi (như cập nhật cơ sở dữ liệu) có thể ảnh hưởng đến ứng dụng đang chạy ngay cả khi chưa xuất bản.

Sau khi cơ sở dữ liệu được cập nhật, hệ thống sẽ bắt đầu cập nhật mã để xác thực người dùng và lưu thay đổi to-do vào cơ sở dữ liệu.

Tuy nhiên, lần này xảy ra lỗi: "Build unsuccessful". Khi gặp tình huống này, chúng ta có thể xem lỗi và nhấn nút "Try to fix it" ở trên cùng để thử tự động sửa lỗi.

Trong trường hợp này, nhấp nút đã khắc phục được vấn đề, và ứng dụng giờ hoạt động đầy đủ với xác thực người dùng và lưu trữ dữ liệu trong cơ sở dữ liệu, nên nếu dùng ứng dụng trên nhiều thiết bị, chúng ta vẫn có thể truy cập danh sách to-do.

Xuất bản ứng dụng

Để xuất bản ứng dụng, chúng ta có thể dùng nút "Publish" ở góc trên bên phải.

Sau khi xuất bản, chúng ta có thể truy cập qua liên kết ở cuối menu.

Liên kết này có thể được truy cập công khai trực tuyến và cho phép bất kỳ ai sử dụng ứng dụng. Chúng ta cũng có thể cấu hình tên miền tùy chỉnh nếu có.

Lưu ý rằng cần nhấp nút “Redeploy” mỗi khi thay đổi ứng dụng. Nếu không, các thay đổi chỉ hiển thị trong giao diện Lovable mà không hiển thị cho người dùng truy cập qua URL ứng dụng.

Các khả năng nâng cao trong Lovable

Kết nối với GitHub

Lovable không cho phép chúng ta trực tiếp thay đổi mã, mà chỉ cho phép xem mã và các thay đổi nó thực hiện.

Để có thể chỉnh sửa mã, chúng ta cần kết nối dự án với GitHub, nền tảng phổ biến để lưu trữ và cộng tác trên các dự án mã bằng quản lý phiên bản. Điều này cho phép nhiều người dùng đóng góp, rà soát và quản lý thay đổi hiệu quả.

Để kết nối với GitHub:

1. Đăng nhập tài khoản GitHub và tạo một tổ chức miễn phí.

2. Trong Lovable, nhấp nút "Edit Code" ở góc trên bên phải.

3. Sau đó nhấp "Connect to GitHub".

4. Chọn tổ chức đã tạo ở bước đầu tiên.

Khi kết nối GitHub, mã sẽ luôn được đồng bộ với kho GitHub. Điều này nghĩa là chúng ta có thể dùng các công cụ như VSCode để làm việc cục bộ với dự án. Lưu ý Lovable sẽ mất một lúc để lấy các thay đổi sau khi được đẩy lên kho.

Hãy nhớ rằng bản thân ứng dụng không tự động triển khai lại. Để thấy thay đổi trong ứng dụng, chúng ta cần xuất bản lại.

Hàm đám mây

Những gì ta đã học cho tới giờ cho phép tạo một ứng dụng có thể duy trì cơ sở dữ liệu trực tuyến và giao diện người dùng phía trước để tạo, đọc, cập nhật và xóa dữ liệu—thường được gọi là ứng dụng CRUD.

Cloud functions mang đến cách mạnh mẽ để bổ sung logic tùy chỉnh và các thao tác phức tạp cho ứng dụng mà không cần quản lý máy chủ vật lý. Chúng cho phép chạy mã backend để phản hồi các sự kiện như thay đổi cơ sở dữ liệu, yêu cầu HTTP hoặc các trình kích hoạt khác. Điều này đặc biệt hữu ích cho các tác vụ như gửi email thông báo, xử lý dữ liệu hoặc chạy công việc theo lịch.

Bằng cách dùng hàm đám mây, chúng ta có được sự linh hoạt để xử lý các chức năng phức tạp một cách hiệu quả và mở rộng khi cần, đồng thời đảm bảo trải nghiệm người dùng liền mạch và phản hồi nhanh. Về bản chất, chúng cho phép mở rộng khả năng của ứng dụng vượt ra ngoài quản lý dữ liệu đơn thuần, khiến ứng dụng linh hoạt và hữu ích hơn.

Một ví dụ hay khi dùng hàm đám mây trong ứng dụng to-do là gửi email nhắc việc cho các nhiệm vụ sắp đến hạn. Giả sử chúng ta muốn nhắc người dùng về các nhiệm vụ sắp đến hạn. Ta có thể viết một hàm đám mây kiểm tra cơ sở dữ liệu để tìm các nhiệm vụ gần đến hạn và tự động gửi email nhắc nhở cho người dùng.

Chúng ta có thể yêu cầu Lovable triển khai việc này cho mình:

Một số hàm cần truy cập API bên ngoài và yêu cầu API key để hoạt động. Trong trường hợp này, giải pháp triển khai dùng Resend API, vì vậy Lovable yêu cầu API key để hoàn tất cấu hình dịch vụ. 

Thêm đăng ký trả phí với Stripe

Sẽ không có nhiều ý nghĩa nếu tạo ứng dụng mà người dùng không thể đăng ký sử dụng. Hãy nhờ Lovable triển khai đăng ký trong ứng dụng bằng Stripe.

Chúng ta có thể dùng prompt sau:

Nó yêu cầu tôi cung cấp khóa Stripe, tương tự ví dụ trước. Chúng ta có thể lấy khóa này từ tài khoản Stripe của mình.

Cuối cùng, hệ thống báo thiếu ID giá của gói đăng ký. Với việc này, chúng ta vào Stripe, tạo sản phẩm đăng ký và sao chép price ID. Vì Lovable không có nút yêu cầu price ID như với API key, chúng ta có thể cung cấp nó ngay trong khung chat:

Để hoàn tất triển khai, chúng ta có thể yêu cầu chỉ cho phép người dùng đã đăng ký tạo to-do và xuất bản phiên bản cập nhật của ứng dụng.

Mọi thứ hoạt động ngay từ lần thử đầu tiên!

Tạo ứng dụng di động có thể cài đặt

Ứng dụng Lovable tạo ra không phải là progressive web app (PWA) ngay từ đầu. Nó chỉ là một website và điều này có nghĩa chúng ta không thể cài đặt nó trên thiết bị di động để dùng như một ứng dụng điện thoại thực thụ thay vì một trang web.

Tuy nhiên, việc này rất dễ xử lý chỉ với một prompt:

Với những thay đổi này, nếu mở liên kết ứng dụng trên thiết bị di động, chúng ta có thể cài đặt và dùng nó như một ứng dụng cài đặt gốc.

Các hạn chế của Lovable

Dù có nhiều tiềm năng, điều quan trọng là cần cân nhắc các hạn chế của Lovable.

Quan ngại về bảo mật

Mặc dù Lovable mang đến cách thức hấp dẫn để xây ứng dụng mà không cần viết mã, nó đặt ra lo ngại về bảo mật ứng dụng, đặc biệt với những người không có kinh nghiệm lập trình. Làm sao người dùng có thể chắc chắn cơ sở dữ liệu của ứng dụng có đủ biện pháp bảo mật để ngăn truy cập trái phép, ví dụ như một người dùng thêm nhiệm vụ vào danh sách của người khác?

Khía cạnh then chốt này không được đề cập trong các prompt trong quá trình tạo ứng dụng, để ngỏ khả năng tồn tại lỗ hổng chưa được xem xét. Người dùng không có nền tảng kỹ thuật có thể thấy khó khăn khi đánh giá và quản lý các vấn đề bảo mật này.

Lovable có thực sự nhanh hơn cho lập trình viên?

Đối với các lập trình viên đã có bộ công cụ và thư viện mã riêng, câu hỏi đặt ra: Lovable có thực sự nhanh hơn không?

Nhiều lập trình viên đã rèn giũa tay nghề bằng cách tạo thư viện nội bộ gồm các đoạn mã và module họ tin tưởng và quen thuộc, thường bao gồm tính năng thanh toán, xác thực và CRUD. Những thứ này được tinh chỉnh theo phong cách và công nghệ ưa thích của họ.

Lovable có thể không mang lại cùng mức độ kiểm soát với công nghệ sử dụng, điều này có thể bất lợi cho những người quen với hệ thống và quy trình làm việc nhất định. Dù nền tảng cung cấp cách dựng nguyên mẫu nhanh, các lập trình viên có thể thấy hiệu quả hơn nếu gắn bó với công cụ và cách làm hiện có, đặc biệt khi xét đến sự tích hợp liền mạch và mức độ quen thuộc mà chúng mang lại.

Gỡ lỗi cho người không biết lập trình

Dù Lovable giúp việc xây ứng dụng không cần viết mã trở nên dễ dàng, một mối lo lớn là người không biết lập trình sẽ xử lý thế nào khi các giải pháp tự động không đáp ứng và cần can thiệp thủ công. Điều gì xảy ra khi nền tảng gặp vấn đề mà nó không thể tự giải quyết? Ai sẽ xử lý các điểm nghẽn khi người dùng mục tiêu không có kỹ năng lập trình?

Khi không thể đi sâu vào mã nguồn, người không biết lập trình có thể cảm thấy bế tắc và không biết bước tiếp theo là gì. Sự phụ thuộc này có thể khiến dự án đình trệ và gây thất vọng, buộc họ phải thuê lập trình viên hoặc tìm trợ giúp bên ngoài, có thể phát sinh thêm chi phí và chậm trễ.

Kết luận

Tựu trung, dù Lovable giúp việc phát triển ứng dụng trở nên dễ tiếp cận, mức độ thành công đối với người không biết lập trình phụ thuộc lớn vào cách nền tảng hỗ trợ khi mọi thứ trở nên phức tạp vượt quá vài prompt đơn giản.

Tôi tin rằng Lovable thực sự hiện thực hóa lời hứa đưa phát triển ứng dụng đến với mọi người. Dù bị giới hạn chỉ gửi năm prompt mỗi ngày, chúng ta vẫn có thể xây một ứng dụng hoạt động hiệu quả.

Nền tảng cho thấy năng lực mạnh trong việc quản lý các quy trình phức tạp hơn, cho phép chúng ta tùy biến ứng dụng chi tiết. Điều đó có nghĩa là ngay cả trong số lần tương tác hạn chế, chúng ta vẫn có thể biến ý tưởng ứng dụng sáng tạo thành sản phẩm hoạt động.