Công cụ sinh mã từ bản vẽ wireframe cực bá đạo

Hôm nay tôi sẽ giới thiệu cho các bạn một công cụ “bá đạo” hỗ trợ sinh mã html/css từ hình vẽ wireframe giao diện phần mềm.

Yêu cầu:

• Trên máy đã cài đặt NodeJs (Nếu máy của bạn chưa cài đặt thì có thể cài đặt theo hướng dẫn sau: https://hamanhtuyen.com/huong-dan-cai-dat-cong-cu-screenshot-to-code-chuyen-hinh-anh-sang-ma-code/
• Đã đăng ký subscription ChatGPT API và nạp tiền vào tối thiểu là 5$ (địa chỉ đăng ký API là: https://platform.openai.com, để đăng ký được bạn cần có thẻ tín dụng)

Chi tiết các bước thực hiện như sau:

Bước 1. Tạo API key của OpenAI, bạn hãy truy cập vào địa chỉ https://platform.openai.com/api-keys , nhấn vào “Create new secret key” > nhập tên key (ví dụ: make-real-app) và click vào nút “Create secret key”

Lưu lại mã key để sử dụng trong bước sau

Bước 2. Truy cập vào địa chỉ https://github.com/tldraw/make-real-starter, tải bộ mã nguồn ứng dụng về máy.

Giải nén file .zip vừa tải về ra thư mục trên máy

Bước 3: Mở cửa sổ command trên Windows, chuyển vào thư mục vừa giải nén

Chạy lệnh sau: npm install

Tiếp theo từ cửa sổ command chạy câu lệnh sau:

echo OPENAI_API_KEY=sk-your-key > .env.local (trong đó, sk-your-key: là đoạn mã API key vừa lấy được ở bước 1)

Bước 4: Từ cửa sổ command, chạy lệnh sau

npm run dev

Nếu thành công, sẽ có thông báo như sau

Sauau khi hoàn thành, bạn sẽ truy cập vào địa chỉ http://localhost:3000/ với màn hình như sau là thành công.

Để sử dụng, chương trình. Bạn hãy vẽ một màn hình giao diện phần mềm, sau đó click + giữ chuột để chọn các đối tượng cần sinh mã, rồi click vào nút [Make Real] để sinh mã.

Kết quả nhận được rất tuyệt vời

Từ kết quả thu được, bạn có thể tiếp tục yêu cầu hiệu chỉnh trực tiếp trên sản phẩm vừa tạo

Nếu thấy ưng sản phẩm, bạn click chuột vào ô này để copy code html

Qua thử nghiệm, tôi thấy công cụ này khá “bá đạo”, và khá trực quan. Dù công cụ này vẫn đang trong giai đoạn phát triển và hoàn thiện, xong với tính năng hiện có tôi thấy công cụ này có thể hỗ trợ khá tốt khi cần sinh code mẫu để trình bày demo.

Công cụ này vẫn đang trong giai đoạn hoàn thiện, nên không khuyến khích sử dụng công cụ này cho sản phẩm thực tế. Chúng ta hãy tiếp tục chờ đợi các phiên bản hoàn thiện, khi nào có bản chính thức thì bạn có thể áp dụng cho việc xây dựng sản phẩm thực tế của mình.

Hi vọng bài viết này hữu ích đối với bạn.

Để theo dõi các video hướng dẫn chi tiết, bạn hãy đăng ký kênh và truy cập vào kênh Youtube của tôi: https://www.youtube.com/channel/UCd3BHy2KUjBl1Z2cnrdLNFg/

HMT*