Dùng AI viết app: (P4) Công cụ này viết ra 95% code của sản phẩm

Bạn có thể đọc các phần trước tại đây:

- P1: Lý do ngại bắt đầu

- P2: Chrome Extension đầu tiên

- P3: Sử dụng ChatGPT API

---

Khi đã xây dựng xong một Chrome Extension có thể dùng được, mình vẫn chưa thoả mãn. Mình muốn ai cũng có thể dùng và cài đặt một cách dễ dàng thay vì chỉ mình xài như hiện tại.

Do đó, mình quyết định sẽ xây dựng một web app hẳn hoi cho xịn. Mặc dù biết sản phẩm sẽ không to được tuy nhiên mình chắc chắn sẽ học được nhiều qua quá trình xây dựng app, thêm nữa thời gian tối mình khá rảnh nên ngại gì không làm?

Đây là quá trình mình dùng AI để code ra FastAI Rewrite, bạn có thể truy cập tại fastairewrite.com.

Trước khi bắt tay vào học và làm thì mình cần quyết định ngôn ngữ lập trình và thư viện mà mình sẽ sử dụng là gì. Mình có 3 lựa chọn:

Ở công ty mình có thực hiện một số đầu việc liên quan tới Data Analysis và có sử dụng Python nên cú pháp các thứ mình nắm khá rõ. Ngoài ra mình cũng có biết trước cơ bản về thư viện Flask nên nếu chọn Python thì sẽ không khó để bắt đầu.

Tuy nhiên Python Flask không phổ biến lắm nên mình không chọn.

Trước đây mình có làm một số plugin game bằng Java và có học qua 1 khoá full-stack xây web bằng Java Spring Boot. Tuy nhiên đã 3 năm kể từ lần cuối mình code Java với Sprint Boot cũng lằng nhằng nên thôi không chọn phương án này.

Ở công ty thì các dev sử dụng Nodejs để code là chính. Ngoài ra mình cũng hay đọc code của dev để xem các chức năng được anh em làm như nào với cũng để hiểu rõ logic hơn. Do đó, mình cũng có hình dung cơ bản về cấu trúc một project web app sẽ gồm những gì khi xây dựng.

Bên cạnh đó, Nodejs cũng rất phổ biến, nó khiến việc tìm hiểu dễ dàng hơn vì có nhiều tài liệu và mình cũng có thể hỏi anh em trên công ty nếu cần giúp đỡ nữa.

Ok đấy chứ nhỉ, mình quyết định sẽ sử dụng Nodejs và Nextjs cho project cá nhân này của mình.

Hiện nay đã có AI giúp mình code. Tuy nhiên, mình không muốn chỉ copy code mà còn muốn hiểu code nữa. Khi hiểu được code AI viết thì việc thay đổi hay fix bug sẽ dễ hơn rất nhiều.

Do đó, mình quyết định học bài bản Nextjs.

Phương pháp mình chọn là xem và thực hành hết 1 series Nextjs ở youtube. Đó là một series gồm 71 videos, không quá nhiều nhưng đủ cung cấp cho mình nền tảng để có thể tự build một app cơ bản

Sau khi học xong nền tảng cơ bản Nextjs, mình tìm hiểu tiếp về Oauth2. Oauth2 là một phương pháp giúp người dùng có thể đăng nhập qua tài khoản khác của họ ví dụ như Google, Facebook, Github,..

Vì mình xác định app sẽ có Chrome Extension nên chắc 99% user đều có Gmail nên làm chức năng login bằng Gmail thì sẽ ok nhất. User log in dễ và mình code cũng dễ luôn. Bớt đoạn xử lý register, forgot password,...

Phần authenticate (định danh user) phải tương tác với database với config, set up với Google các thứ. Mình thấy phần này khó vờ lờ mặc dù document các thứ cũng có hết rồi, chỉ việc làm theo.

Về database thì mình sử dụng SQLite cho đỡ phải set up vì lượng data mình cũng không phải lớn. Khác với MySQL, SQL Server, MongoDB,... phải set up các thứ thì SQLite chỉ cần 1 file là có thể bắt đầu lưu trữ data rồi, quá đơn giản.

Để thao tác với database dễ dàng và đảm bảo sau chuyển sang hệ quản trị database khác không cần thay đổi nhiều thì mình chọn Prisma. Prisma khá dễ dùng, ngoài ra mình cũng có chút kinh nghiệm với nó khi vọc làm Shopify app.

Khi đã nắm được những nền tảng và hình dung được mình sẽ xây dựng app như nào thì đó là lúc phù hợp để bắt tay vào làm.

Công cụ AI mình sử dụng để viết ra app là v0.dev. Đây là công cụ được phát triển bởi đội đứng sau Nextjs - Vercel. Do đó các code Nextjs được AI này gen ra đều rất chất lượng và hợp lý, đúng thế mạnh của Vercel.

Lương trả cho v0.dev là $20 một tháng, khoảng hơn 500 cành.

Mình chỉ mất 2 tuần để hoàn thiện Frontend và Backend cho FastAI Rewrite. Nếu tự code chắc phải mất ít nhất 2 tháng.

Và đương nhiên, 95% code là do v0.dev gen ra. Đa số thời gian của mình là viết prompt để v0.dev gen code theo đúng ý mình muốn. Ngoài ra cũng phải mày mò fix 1 số bug nữa.

Phần dễ nhất là khi bảo AI gen code cho phần API cho vì các quy tắc cũng có hết rồi với logic cũng đơn giản như là get, create, update, delete,... API phần khó nhất là request tới ChatGPT để rewrite thì cũng đã được lên ý tưởng từ hồi làm Chrome Extension nên mình cũng không khó để xây dựng tiếp.

Khó nhất chính là phần UI với những giao diện phức tạp. Với mình, căng nhất là trang Chat này vì cần design đảm bảo phần khung chat luôn full chiều cao màn hình.

Nhiều lúc bảo AI fix cái này xong tự dưng lại lòi ra lỗi khác hoặc lỗi cũ xuất hiện. Để tối ưu phần này, mình có tips tricks là:

- Code đến đoạn nào cảm giác hài lòng thì commit xong push luôn, ver mới mà không hài lòng thì reset về commit cuối

- Nếu code AI gen không vừa ý hoặc làm hỏng phần trước thì bảo AI revert lại code cũ và coi như chưa nhắn gì :v

Cứ vậy tầm 2 tuần, mình đã hoàn thành một phần dễ khi làm app là xây dựng thành công phiên bản của web app ở trên local.

Phần khó nhất cũng là phần khiến mình tốn nhiều tiền và công sức nhất chính là phần tiếp theo:

Thiết lập máy chủ cho FastAI Rewrite để ai cũng có thể dùng được tại fastairewrite.com.

Mời bạn đọc tại: Dùng AI viết app: (P5) Thiết lập server, domain cho app