Gần đây, nhiều bạn bè có nền tảng khoa học xã hội đã thử dùng Codex để phát triển sản phẩm riêng.
Hai bài viết trước đã hướng dẫn cách sử dụng Codex; bài này tập trung vào ứng dụng thực tế: cách dùng nó để xây dựng một Mini Program trên WeChat.
Trước tiên, hãy xem kết quả. Lần này, chúng tôi đã xây dựng một Mini Program đọc sách điểm danh có tên "One Page." Dưới đây là giao diện chạy của nó trong WeChat Developer Tools.
Toàn bộ quy trình từ ý tưởng đến một Mini Program có thể sử dụng được chia thành các bước sau:
Thiết kế nguyên mẫu Figma → Tạo mã Codex → Mô phỏng Developer Tools → Xem trước trên di động → Gửi kiểm duyệt & Xuất bản.
Figma chịu trách nhiệm xác định giao diện các trang và nút dẫn đến đâu; Codex viết thiết kế thành mã; WeChat Developer Tools dùng để chạy, kiểm tra và gửi Mini Program lên điện thoại để xem trước. Sau khi chuẩn bị tài khoản Mini Program của riêng bạn, bạn gửi nó đi kiểm duyệt và phát hành qua backend WeChat.
1. Figma là gì và tại sao nên dùng nó trước?
Figma là một công cụ thiết kế giao diện và cộng tác, thường được dùng để thiết kế trang cho ứng dụng, trang web và Mini Program. Nhà thiết kế dùng nó để bố trí, chọn màu sắc và nút bấm; quản lý sản phẩm dùng nó để thảo luận luồng thao tác; nhà phát triển xem kích thước thiết kế, khoảng cách và tài nguyên để triển khai các trang.
Nó cũng có thể tạo nguyên mẫu sản phẩm có thể nhấp được. Ví dụ: liên kết một nút trên trang chủ đến một trang khác để khi nhấp vào nó sẽ kích hoạt chuyển trang, cho phép bạn kiểm tra trước xem thao tác có mượt mà không.
Đây chính xác là những gì chúng tôi sử dụng lần này. Trước khi viết bất kỳ mã nào, bạn có thể xem nhiều trang cùng nhau và thảo luận xem một nút có được đặt tốt không hay một màn hình có quá chật không.
Trước đây, bản thiết kế này thường được giao cho nhà phát triển. Bây giờ, bạn có thể đưa bản thiết kế đã được xác nhận cho Codex để viết mã. Nhà thiết kế có thể bắt đầu từ Figma mà họ quen thuộc; những người đã dùng Codex có thể để nó tạo bản nháp trước rồi điều chỉnh trong Figma.
Đây là cách "One Page" được tạo ra. Đầu tiên, chúng tôi xác định ba trang chính—Kệ sách, Ghi chép và Thống kê—sau đó thống nhất bảng màu và bố cục.
Đây là phần trình diễn thiết kế. Màu trắng kem được dùng cho nền, xanh đậm cho văn bản và các nút chính, xanh nhạt để làm nổi bật thao tác hiện tại. Trang chủ đặt cuốn sách đang đọc ở vị trí nổi bật nhất, trong khi thông tin thống kê được đặt trên một trang riêng để tránh làm người dùng choáng ngợp với các con số khi mở ra.
Bước này là về hiệu ứng tổng thể. Khi bạn hài lòng với màu sắc, cỡ chữ và cách sắp xếp trang, bạn sẽ tiến hành bước tiếp theo.
2. Để Codex tạo bản nháp và hoàn thiện nguyên mẫu trong Figma
Ngay cả khi bạn không thể vẽ giao diện, bạn vẫn có thể bắt đầu với một yêu cầu rõ ràng. Ví dụ, lần này, tôi muốn một nhật ký đọc sách với nhiều khoảng trắng, nơi tôi có thể thấy cuốn sách mình đang đọc, dễ dàng ghi lại tiến độ và xem lại lịch sử đọc.
Hãy nói cho Codex biết yêu cầu và hướng trực quan của bạn cùng một lúc:
1Tôi muốn tạo một Mini Program WeChat có tên "One Page" để điểm danh đọc sách.2Trước tiên, hãy thiết kế ba trang: Trang chủ Kệ sách, Ghi chép Đọc sách và Thống kê Đọc sách. Chưa viết mã chức năng.34Phong cách trực quan nên giống như một nhật ký đọc sách yên tĩnh:5Nền trắng kem, văn bản xanh đậm, các khu vực chính xanh nhạt, với nhiều khoảng trắng.6Trang chủ nên làm nổi bật cuốn sách đang đọc và điểm vào để ghi chép. Các trang khác nên duy trì cùng phong cách trực quan.7Sử dụng đồ họa hình học gốc cho bìa sách; sử dụng nội dung hư cấu cho các sách mẫu.89Đầu tiên, hãy đưa cho tôi một hình ảnh xem trước của ba trang cạnh nhau.10Đồng thời, xuất ba tệp SVG độc lập 390×844, giữ nguyên văn bản, đồ họa và nhóm nút để có thể điều chỉnh thêm trong Figma. Vui lòng đặt tên riêng cho các nút chính.
Yêu cầu đầu ra SVG cho phép bạn đưa thiết kế vào Figma. SVG là định dạng đồ họa vector; trong trường hợp này, nhập nó sẽ cung cấp văn bản, đồ họa và các nhóm có thể được chọn và điều chỉnh riêng lẻ.
Sau khi có bản nháp, hãy sửa đổi cho đến khi bạn hài lòng. Hãy cụ thể nhất có thể với phản hồi, chẳng hạn như "thu nhỏ tiêu đề trang chủ một chút," "thống nhất các nút chính thành màu xanh đậm," hoặc "làm bìa sách lớn hơn." Khi cả ba trang đều ưng ý, hãy xử lý tương tác nguyên mẫu.
Đưa thiết kế vào Figma
Mở một tệp Figma Design, nhấp vào "+" bên cạnh Pages ở bên trái và tạo một trang mới.
Trong ví dụ này, việc nhập được hoàn thành bằng cách sao chép nội dung SVG và dán nó lên canvas Figma. Đặt tên cho ba artboard là "01-Trang chủ Kệ sách," "02-Ghi chép Đọc sách" và "03-Thống kê Đọc sách," và sắp xếp chúng theo chiều ngang. Sau khi chọn một artboard, hãy kiểm tra chiều rộng và chiều cao trong bảng Design ở bên phải.
Nếu bạn mở Figma lần đầu, hãy xác định các khu vực này: Danh sách Layers ở bên trái, Canvas ở giữa, bảng Design ở bên phải để chỉnh sửa giao diện và Prototype để thiết lập tương tác. Để thay đổi bất kỳ văn bản hoặc nút nào, trước tiên hãy chọn nó trong danh sách Layers.
Hãy nhớ kiểm tra phông chữ sau khi nhập. Phông chữ có thể bị thay thế tùy thuộc vào môi trường, điều này có thể thay đổi cách ngắt dòng tiêu đề và chiều rộng văn bản. Lần này, cách hiển thị phông chữ trong bản thiết kế và Mini Program khác nhau, vì vậy cần kiểm tra riêng.
Thêm chuyển trang cho các nút
Lấy thẻ "Tiếp tục Đọc" trên trang chủ làm ví dụ. Chọn nó, chuyển sang Prototype ở góc trên bên phải và nhấp vào "+" bên cạnh Interactions.
Trong bảng Interaction bật lên, hãy đặt ba tùy chọn này:
- Trigger: Chọn "On click."
- Action: Chọn "Navigate to."
- Destination: Chọn "02-Ghi chép Đọc sách" (artboard mục tiêu).
Nút lưu trên trang ghi chép liên kết trở lại trang chủ và biểu tượng thống kê trên trang chủ liên kết đến trang thống kê. Hình ảnh dưới đây cho thấy thiết lập cho mục nhập thống kê.
Nhấp vào biểu tượng "Present" hình tam giác ở góc trên bên phải để mở bản demo nguyên mẫu. Nhấp qua từ trang chủ và quay lại để kiểm tra các tuyến đường giữa các trang.
Nguyên mẫu Figma thể hiện các chuyển trang; việc nhập liệu thực tế, lưu và cập nhật dữ liệu sẽ được thực hiện bởi mã Mini Program tiếp theo.
3. Thiết kế đã sẵn sàng; tôi dùng MCP ở đâu?
MCP được sử dụng ở bước chuyển giao thiết kế Figma cho Codex. Sau khi kết nối, Codex có thể đọc cấu trúc thiết kế, kiểu dáng và tài nguyên của artboard đã chọn và tiếp tục triển khai dựa trên bản thiết kế.
Nếu bạn đã biết cách sử dụng Figma và đã có bản nháp sẵn sàng, bạn có thể bắt đầu trực tiếp từ đây. Chọn artboard bạn muốn triển khai, sao chép liên kết chứa thông tin nút của artboard đó và gửi nó cho Codex với kết nối Figma được bật.
1Vui lòng đọc ngữ cảnh thiết kế và ảnh chụp màn hình của artboard này qua Figma MCP.2Đầu tiên, hãy giải thích cấu trúc trang, cỡ chữ, màu sắc, khoảng cách và tài nguyên bạn đã đọc.3Hãy nói rõ nếu có phần nào bạn không thể đọc; đừng đoán.45Tiếp theo, chúng tôi sẽ tạo một Mini Program WeChat gốc bằng WXML, WXSS, JavaScript và JSON.6Vui lòng triển khai theo ngăn xếp công nghệ này, tái sử dụng các kiểu dáng và tài nguyên hiện có từ dự án.7Hoàn thành trang chủ trước và tiếp tục với các trang khác sau khi xác nhận.
Hãy chắc chắn chỉ rõ "Mini Program WeChat gốc." Thông tin thiết kế do Figma cung cấp cần được triển khai theo nền tảng mục tiêu; bạn không thể chỉ sử dụng mã web cho Mini Program.
Trong ví dụ này, thiết kế được nhập vào Figma qua SVG và mã tuân theo cùng một tệp thiết kế và tài nguyên; MCP là một cách để thu hẹp khoảng cách khi đã có bản thiết kế Figma. Bất kể phương pháp nào, những gì được chuyển cho Codex phải là một thiết kế đã được xác nhận.
4. Viết thiết kế thành Mini Program
Mở thư mục dự án trong Codex, đặt các tệp thiết kế và tài nguyên bìa sách và bạn có thể bắt đầu triển khai.
Trong bước này, ngoài việc chỉ định công nghệ, bạn phải nêu rõ những gì bạn muốn nhận: một dự án có thể được nhập trực tiếp vào WeChat Developer Tools.
1Vui lòng hoàn thành Mini Program WeChat gốc dựa trên thiết kế "One Page" đã được xác nhận.23Sử dụng WXML, WXSS, JavaScript và JSON.4Đặt mã trong thư mục miniprogram và cung cấp app.json và project.config.json để đảm bảo nó có thể được nhập trực tiếp vào WeChat Developer Tools.56Triển khai các trang Kệ sách, Ghi chép Đọc sách, Thống kê và Thêm sách.7Tuân theo bảng màu, bố cục và tài nguyên bìa sách gốc đã được xác nhận.8Lưu dữ liệu cục bộ bằng wx.setStorageSync tạm thời và đọc lại khi mở lại.9Thêm xác thực đầu vào, trạng thái trống và lời nhắc lưu thất bại.1011Kiểm tra mã sau khi hoàn thành và cho tôi biết thư mục nào để nhập và cách biên dịch.12Nếu có mục nào tôi cần cấu hình, vui lòng liệt kê riêng.
Trong dự án do Codex tạo, WXML xử lý cấu trúc trang, WXSS xử lý kiểu dáng, JavaScript xử lý các thao tác nhấp và lưu, và JSON cấu hình đường dẫn trang. Khi bạn nhận ra chức năng của từng tệp, bạn có thể hiểu thư mục được giao.
Đừng choáng ngợp ở đây; chỉ cần để Codex giải quyết cho bạn. Bạn không cần hiểu mã; chỉ cần sao chép lời nhắc, thả bản thiết kế của bạn vào và đổi thành tên của bạn.
5. Đưa nó vào WeChat Developer Tools và xem nó có chạy không
Sau khi cài đặt và đăng nhập vào WeChat Developer Tools, chọn "Import Project" từ menu "Project" và tìm thư mục miniprogram do Codex tạo.
Tên dự án có thể là bất cứ thứ gì bạn thích. AppID là danh tính của Mini Program này: bạn có thể sử dụng tài khoản thử nghiệm do công cụ cung cấp để học tập cục bộ, nhưng bạn phải chuyển sang AppID Mini Program của riêng mình khi chuẩn bị xuất bản. Trong ví dụ này, chọn "Do not use cloud services" cho backend.
Nhấp "Create," vào dự án và chờ biên dịch. Khi trình mô phỏng ở bên phải hiển thị trang, bạn có thể thao tác trực tiếp bằng chuột. Sau khi Codex sửa đổi mã, hãy biên dịch lại để xem kết quả.
Ở đây, chủ yếu kiểm tra ba điều: các trang có bị lệch không, các nút có dẫn đến đúng trang không và nội dung đã nhập có thể lưu được không. Ngoài ra, hãy chuyển đổi kích thước màn hình của trình mô phỏng để xem tiêu đề dài, hộp nhập liệu và điều hướng dưới cùng có bị chật không.
Nếu sự cố xảy ra, hãy gửi văn bản lỗi hoặc ảnh chụp màn hình cho Codex, cùng với những gì bạn vừa làm và những gì bạn mong đợi sẽ thấy. Ví dụ:
1Đây là ảnh chụp màn hình lỗi trong WeChat Developer Tools.2Khi tôi vào trang ghi chép từ trang chủ, bìa sách không hiển thị.3Vui lòng kiểm tra đường dẫn hình ảnh và thời điểm tải trang. Sửa lỗi trong khi giữ nguyên bố cục hiện tại.
Trong trường hợp này, chúng tôi thực sự gặp sự cố tải hình ảnh: mã bắt đầu nối địa chỉ hình ảnh trước khi dữ liệu trang sẵn sàng, dẫn đến thiếu tên bìa sách trong đường dẫn. Yêu cầu mã đợi dữ liệu sẵn sàng trước khi hiển thị hình ảnh đã giải quyết được vấn đề.
Các vấn đề tương tự không yêu cầu bạn phải nghiên cứu mã từ đầu, nhưng bạn phải nêu rõ chúng xảy ra ở đâu. Sau khi sửa, hãy quay lại trình mô phỏng, lặp lại thao tác và xác nhận nó đã trở lại bình thường.
6. Từ trình mô phỏng máy tính đến xem trước trên di động và xuất bản
Khi nó chạy trên máy tính, hãy kiểm tra nó trên điện thoại của bạn.
Sử dụng AppID có quyền thích hợp, nhấp "Preview" ở đầu developer tools, đợi mã QR được tạo, sau đó quét nó bằng tài khoản WeChat được phép. Tập trung vào cỡ chữ trên điện thoại, xem bàn phím có chặn vùng nhập liệu khi bật lên không và các nút dưới cùng có dễ chạm tới không.
Trong ví dụ này, dữ liệu được lưu cục bộ, vì vậy các bản ghi trong trình mô phỏng sẽ không tự động đồng bộ với điện thoại. Bạn cần nhập lại nội dung thử nghiệm trên điện thoại; nếu muốn giữ dữ liệu trên nhiều thiết bị trong tương lai, bạn có thể thêm chức năng đồng bộ hóa đám mây hoặc sao lưu.
Khi bạn sẵn sàng cho bạn bè dùng thử, hãy nhấp "Upload" ở đầu developer tools, sau đó vào backend Mini Program của WeChat Official Accounts Platform. Vào Version Management, tìm phiên bản phát triển tương ứng, đặt nó làm Trial Version và thêm thành viên dùng thử. Thành viên dùng thử cần có quyền thích hợp.
Sau khi xác nhận có thể sử dụng, hãy gửi kiểm duyệt trong backend và xuất bản sau khi được phê duyệt. Điền thông tin tài khoản và danh mục dịch vụ theo yêu cầu của backend; bạn không cần Codex để hoàn thành các thao tác tài khoản này cho bạn.
Ví dụ này đã đạt đến giai đoạn có thể chạy trong developer tools. Người đọc có thể tiến hành xem trước trên di động, tải lên và gửi kiểm duyệt bằng tài khoản Mini Program của riêng họ.
Kết nối toàn bộ quy trình
Đầu tiên, sử dụng Figma để xác định các trang và chuyển trang nút cho đến khi bạn hài lòng với thiết kế; sau đó chuyển tệp thiết kế hoặc liên kết artboard cho Codex để viết thành Mini Program WeChat; sau đó nhập nó vào developer tools để mô phỏng, chạy và kiểm tra lỗi; cuối cùng, xem trước trên điện thoại và tải lên, kiểm duyệt và xuất bản sau khi xác nhận.
Trong tương lai, cho dù bạn đang tạo một công cụ điểm danh, một ứng dụng công thức nấu ăn hay các tiện ích nhỏ khác, bạn vẫn có thể làm theo quy trình làm việc này. Nếu thiết kế không ưng ý, hãy quay lại Figma để điều chỉnh; nếu có vấn đề về chức năng, hãy chuyển thao tác cụ thể và lỗi cho Codex, sau đó xác nhận kết quả sửa đổi trong developer tools.
Tôi là Miles, một chuyên gia thuật toán AI đã chuyển từ một công ty công nghệ lớn sang FDE. Tôi đã làm việc về R&D, tối ưu hóa và triển khai thuật toán, cũng như đào tạo doanh nghiệp. Hãy theo dõi tôi @miles_mazy để cùng phát triển và cùng kiếm tiền.
