Anticode Mở trình soạn thảo

Tạo prototype ứng dụng chạy được bằng AI và đưa cho người dùng thử

Một prototype đáng làm khi nó trả lời được câu hỏi mà bản mockup không trả lời được: người dùng có thật sự hiểu luồng thao tác khi phải tự dùng không? Anticode viết một ứng dụng chạy được từ mô tả của bạn, điền sẵn dữ liệu mẫu được đánh dấu rõ là dữ liệu mẫu, để người thử có thể mở ngay trên điện thoại của họ. Trang này nói về việc nên làm prototype cho phần nào, cách mô tả nó, và giới hạn của một prototype chỉ chạy trong một trình duyệt.

Cập nhật · Đội ngũ Anticode

Vì sao prototype chạy được cho bạn biết nhiều hơn mockup

Các màn hình tĩnh kiểm tra xem người ta có thích giao diện không. Chúng hiếm khi kiểm tra được người ta có dùng được hay không, vì người thử phải tự tưởng tượng điều gì xảy ra sau mỗi lần chạm, và người điều phối buổi thử cuối cùng phải thuyết minh thay cho sản phẩm. Một prototype ứng dụng bấm thử được và phản hồi thật sẽ bỏ được phần thuyết minh đó. Người thử gõ vào một ô nhập thật, thấy tổng số thay đổi thật, gặp trạng thái trống thật khi xóa mục cuối cùng. Sự bối rối của họ là về thiết kế của bạn, chứ không phải về những chỗ còn thiếu của prototype.

Nó cũng thay đổi những câu hỏi bạn có thể đặt ra. Với mockup, bạn hỏi "bạn có dùng cái này không?", và người ta trả lời cho lịch sự. Với thứ chạy được, bạn có thể giao một nhiệm vụ ("thêm ca làm thứ Ba tuần sau và xem tổng giờ làm trong tuần thay đổi thế nào") rồi quan sát họ ngập ngừng ở đâu.

Xác định prototype cần chứng minh điều gì

Trước khi mô tả bất cứ thứ gì, hãy viết ra một hoặc hai câu hỏi mà buổi thử cần trả lời. Như vậy bản dựng sẽ gọn và các buổi thử tập trung hơn. Những câu hỏi thường gặp:

  • Mức độ hiểu: người dùng có biết màn hình chính dùng để làm gì trong vài giây không?
  • Nhiệm vụ cốt lõi: họ có tự hoàn thành được việc chính mà sản phẩm sinh ra để làm không?
  • Khoảnh khắc khó xử: chuyện gì xảy ra ở những tình huống biên bạn chưa chắc chắn: danh sách trống, một thao tác nhầm cần hoàn tác, một cái tên dài bị xuống dòng?
  • Mức độ sẵn lòng: sau khi dùng, họ có chịu bỏ bảng tính, sổ tay hay ứng dụng hiện tại để chuyển sang không?

Bất cứ thứ gì không phục vụ các câu hỏi đó đều có thể bỏ đi hoặc làm giả. Một trang cài đặt mà không ai mở trong buổi thử hai mươi phút là công sức phí phạm, dù nó dễ tạo đến đâu.

Cách mô tả cho Anticode

Hãy mô tả người dùng, nhiệm vụ và các màn hình trong vài câu, và nói rõ dữ liệu mẫu nên trông thế nào. Ví dụ: "Prototype ứng dụng đổi ca cho nhân viên một quán cà phê. Các màn hình: lịch làm tuần này, yêu cầu đổi một ca, và danh sách các yêu cầu đổi ca đang mở. Dùng tám nhân viên mẫu và một tuần làm việc sát thực tế. Đánh dấu mọi thứ là dữ liệu mẫu." Architect trả lời bằng một kế hoạch ngắn (tên, các màn hình, phong cách, tính năng) và có thể hỏi tối đa ba câu ở những chỗ câu trả lời làm thay đổi bản dựng, mỗi câu có sẵn đáp án gợi ý để bạn chọn.

Khi bạn chọn Build it, mô hình viết toàn bộ ứng dụng thành một tài liệu HTML duy nhất, và bạn có thể xem mã được viết ra theo thời gian thực. Khi dịch vụ đánh giá này khả dụng, các bản dựng ứng dụng mới còn có thể được mở trong một trình duyệt không giao diện ở chiều rộng điện thoại và laptop, chụp màn hình và bấm thử, rồi gửi lỗi ngược lại để sửa.

Làm phần giả một cách trung thực

Ứng dụng Anticode chạy trong sandbox không có mạng, nên mọi thứ thường cần đến máy chủ sẽ được mô phỏng ngay trong trang: người dùng khác là người mẫu, tin nhắn "đã gửi" chỉ nằm trong một danh sách cục bộ, và màn hình đăng nhập chấp nhận mọi thông tin. Ứng dụng ghi chú những chỗ này là dữ liệu mẫu ở nơi cần thiết. Hãy để những ghi chú đó hiển thị trong suốt buổi thử. Người thử nghĩ mình đang dùng hệ thống thật sẽ đưa ra lựa chọn khác, liều lĩnh hơn so với người biết đó chỉ là mô hình, và ở giai đoạn này bạn cần kiểu phản hồi thứ hai.

Những gì được giữ lại là mọi thứ ứng dụng lưu vào trình duyệt của chính người thử. Nếu ai đó thêm ba mục, đóng tab và ngày mai quay lại, các mục vẫn còn trên thiết bị đó. Như vậy là đủ cho một nghiên cứu nhật ký kéo dài một tuần, miễn là mỗi người thử chỉ dùng một điện thoại hoặc một laptop.

Tổ chức buổi thử và chỉnh sửa bản dựng

  1. Xuất bản prototype lên địa chỉ anticode.dev của nó và gửi link cho người thử. Không cần cài đặt gì.
  2. Với các bên liên quan, hãy gửi link duyệt cho khách hàng: họ có thể mở bản xem trước hiện tại mà không cần tài khoản và để lại bình luận gắn với từng phần. Link mặc định hết hạn sau 14 ngày và bạn có thể thu hồi.
  3. Sau mỗi vòng, yêu cầu thay đổi bằng lời thường ("chuyển nút đổi ca vào từng thẻ ca làm"). Các lần lưu gần đây được giữ trong lịch sử phiên bản (số lượng tùy theo gói của bạn), nên bạn có thể đặt vòng một và vòng ba cạnh nhau hoặc quay lại bản cũ.

Những gì prototype một trình duyệt không kiểm tra được

Hãy rõ ràng với chính mình về ranh giới này. Prototype chạy trong sandbox chỉ hoạt động trên một thiết bị mỗi lúc, nên không thể kiểm tra:

  • Bất cứ thứ gì giữa nhiều người: thông báo thật, danh sách dùng chung, hai người thử nhìn thấy thay đổi của nhau.
  • Đăng nhập thật, phân quyền hay khôi phục tài khoản.
  • Dữ liệu bên ngoài theo thời gian thực, thanh toán, hoặc tính năng AI bên trong ứng dụng (chỉ có thể mô phỏng bằng các câu trả lời mẫu cố định).
  • Hiệu năng với lượng dữ liệu thật hoặc mạng chậm.

Khi ý tưởng vượt qua các buổi thử, bản xuất Next.js là bước tiến tới sản phẩm thật. Nó áp dụng cho các bản dựng ứng dụng và cho bạn một dự án App Router chuẩn bằng TypeScript với Postgres qua Prisma, đăng nhập bằng email, vai trò khách hàng và nhân viên cùng một khu vực quản trị. Đây là điểm khởi đầu để lập trình viên phát triển tiếp, không phải một ứng dụng nhiều người dùng hoàn chỉnh, và bạn có thể đẩy nó lên một repository GitHub do bạn chọn. Hướng dẫn xuất sang Next.js nói rõ bên trong có gì. Nếu bạn cần tính năng nhiều người dùng cho môi trường production mà không phải viết mã, một công cụ no-code có backend có thể hợp với bạn hơn cả hai lựa chọn trên.

Câu hỏi thường gặp

Đây là công cụ tạo prototype ứng dụng bằng AI hay công cụ thiết kế?

Nó tạo ra mã chạy được, không phải các khung hình trên canvas. Bạn có một ứng dụng thật trong trình duyệt, phù hợp cho kiểm thử khả năng sử dụng; nếu bạn cần file thiết kế chính xác đến từng pixel cho đội thiết kế, hãy dùng thêm một công cụ thiết kế.

Người thử có dùng được trên điện thoại không?

Có. Ứng dụng đã xuất bản là một trang web chạy được trên trình duyệt điện thoại, và mọi thứ nó lưu đều nằm lại trên điện thoại đó.

Tôi có xem được người thử đã nhập gì không?

Không xem được những gì họ lưu bên trong ứng dụng, vì dữ liệu đó nằm trên thiết bị của họ. Nếu bạn thêm form góp ý hoặc form liên hệ, các nội dung gửi qua đó sẽ đến bạn qua email và trong bảng điều khiển.

Prototype có trở thành ứng dụng thật không?

Nó có thể trở thành điểm khởi đầu. Bản xuất Next.js biến nó thành một dự án có cơ sở dữ liệu và đăng nhập để lập trình viên phát triển tiếp.