Chuyển tới nội dung chính

V-MiniApp Extension

Giới thiệu

V-MiniApp Extension là tiện ích mở rộng trên Visual Studio Code dành cho nhà phát triển (Developer) hệ sinh thái V-MiniApp. Công cụ này cung cấp môi trường phát triển liền mạch với các tính năng:

  • Khởi tạo, mở và quản lý thư mục dự án.
  • Tích hợp trình giả lập (Simulator) và công cụ gỡ lỗi (DevTools).
  • Biên dịch và tải mã nguồn (Deploy) lên hệ thống V-Console.
  • Hỗ trợ kiểm thử trực tiếp trên thiết bị thật.

Cài đặt

thông tin

V-MiniApp Extension hiện chỉ hỗ trợ trên CursorAntigravity thông qua Open VSX Registry.

  1. Mở Cursor hoặc Antigravity.
  2. Truy cập menu Extensions (hoặc nhấn Ctrl+Shift+X / Cmd+Shift+X).
  3. Tìm kiếm từ khóa V-MiniApp trên Marketplace.
  4. Nhấn Install để cài đặt.

Cài đặt MiniApp Extension từ Marketplace

Sau khi cài đặt, biểu tượng V-MiniApp sẽ xuất hiện trên sidebar. Nhấn vào để bắt đầu sử dụng.

Hướng dẫn sử dụng

Để sử dụng đầy đủ các tính năng, bạn cần có tài khoản V-ID đã đăng ký trên V-Console.

1. Đăng nhập

Tại tab Home của extension, nhấn nút Login. Trình duyệt sẽ tự động mở ra để bạn xác thực tài khoản V-ID. Sau khi đăng nhập thành công, thông tin tài khoản sẽ hiển thị trực tiếp trên extension.

ghi chú

Nếu bạn là đối tác bên ngoài, vui lòng chỉ chọn môi trường Production hoặc UAT.

Đăng nhập V-MiniApp Extension

2. Khởi tạo dự án

Tại mục Recent projects, nhấn Create new để tạo dự án mới. Extension hiện hỗ trợ các mẫu dự án (template) như React hoặc React kèm Tailwind CSS.

Tạo dự án mới

Bạn có thể mở những dự án gần đây trong mục Recent projects hoặc mở một thư mục dự án khác thông qua nút Open.

Mở dự án

3. Khởi chạy Trình giả lập (Simulator)

Trước khi chạy giả lập, hãy đảm bảo bạn đã cài đặt các thư viện (dependencies) cần thiết.

Cài đặt dependencies

Sau đó, chuyển sang tab Development và nhấn nút Start để khởi chạy trình giả lập.

Khởi chạy Simulator Trình giả lập đang chạy

4. Gỡ lỗi (Debug)

Khi trình giả lập hoạt động, V-APP DEVTOOLS sẽ tự động được bật. Tại đây, bạn có thể kiểm tra console, theo dõi network và gỡ lỗi mini app trực tiếp.

DevTools

5. Cấu hình App ID

Để sử dụng tính năng Remote Debug hoặc chuẩn bị đẩy ứng dụng lên hệ thống, bạn cần cấu hình appIdentifier bằng cách chỉnh sửa file app-config.json trong thư mục dự án.

Cấu hình App ID

6. Đưa dự án lên hệ thống (Deploy)

Để kiểm thử trên thiết bị thật hoặc gửi ứng dụng đi kiểm duyệt, bạn cần tải bản build lên V-Console. Đi tới tab Deploy, điền thông tin và nhấn Submit.

Deploy

7. Kiểm thử trên thiết bị thật

Sau khi deploy thành công, vào mục Version History và nhấn View ở bản build vừa tải lên. Mã QR code sẽ xuất hiện để bạn quét và kiểm thử.

ghi chú

Thiết bị điện thoại của bạn cần phải cài đặt sẵn ứng dụng V-App để có thể quét mã QR và mở mini app.

Version History QR Code kiểm thử