Skip to main content

ShopCloud

info

Gitlab: https://gitlab.winds.vn/shop-cloud/shop-cloud-mini-app

Requirements​

Trước khi chạy project, cần cài đặt các công cụ sau:

Node.js​

Cài đặt Node.js version 16 trở lên.

Tải tại:

https://nodejs.org/en/download/

Kiểm tra version:

node -v

Khuyến nghị sử dụng nvm để quản lý nhiều version Node.js trên cùng một máy.

Yarn​

Cài đặt Yarn version 1.22.19.

Kiểm tra version:

yarn -v

Tài liệu cài đặt:

https://classic.yarnpkg.com/lang/en/docs/install/#mac-stable

Running the development server

1. Cấu hình biến môi trường​

Chỉnh sửa file .env trong project.

Khi chạy mini-app local, hệ thống sẽ sử dụng các biến môi trường này.

APP_ID=2755983158715529005
VITE_APP_ID=2755983158715529005
VITE_DEEPLINK_APP=https://zalo.me/s/2755983158715529005/
VITE_SECRET_KEY_APP=1GL7c4V4uMQRnHBONsB8
VITE_APP_NAME=ShopCloud
VITE_BASE_API_URL=https://api.shopcloud.vn
VITE_BASE_API_STAG_URL=https://api.shopcloud.vn
VITE_SHOW_CUSTOMER_DEB=1
VITE_LOKA_COIN=false
VITE_APP_VERSION=2.6
VITE_MIN_ZALO_VER_IOS=626
VITE_MIN_ZALO_VER_ANDROID=12100747
VITE_BASE_DEV_URl=https://api.shopcloud.vn
VITE_PRIVET_KEY_CHECKOUT=9ce767d0f63d1c583be33fe1950aa42e
ZMP_TOKEN=eyJ0eXAiOiJKV1QiLCJhbGciOiJIUzI1NiJ9...

Giải thích các biến môi trường quan trọng​

APP_ID / VITE_APP_ID​

Dùng để xác định Mini App trên hệ thống Zalo Mini App.

Có thể lấy tại:

https://miniapp.zaloplatforms.com/miniapp/2755983158715529005/statistic/overview

VITE_SECRET_KEY_APP​

Secret key của ứng dụng, dùng cho một số chức năng xác thực.

Có thể lấy tại:

https://developers.zalo.me/app/842407967173129371/settings

VITE_PRIVET_KEY_CHECKOUT​

Key dùng để tích hợp SDK thanh toán của Zalo Mini App.

Có thể lấy tại:

https://miniapp.zaloplatforms.com/miniapp/2755983158715529005/payment/settings

2. Cài đặt dependencies​

Trong thư mục chứa file package.json, chạy lệnh:

yarn install

3. Chạy project local​

yarn start

Khi chạy bằng lệnh yarn start, ứng dụng sẽ sử dụng API từ biến môi trường:

VITE_BASE_DEV_URl

Sau khi chạy thành công, trình duyệt sẽ mở tại:

http://localhost:3000

Deploy

Trước khi deploy mini-app, cần đăng nhập Zalo Mini App CLI bằng lệnh:

zmp login

Lệnh này dùng để xác thực tài khoản trước khi thực hiện deploy.

Deploy bản testing​

Để đẩy app lên môi trường testing, chạy lệnh:

yarn deploy testing

Khi deploy testing, ứng dụng sẽ sử dụng API từ biến môi trường:

VITE_BASE_API_STAG_URL

Build QR để test​

Khi build QR để test thông thường, chọn môi trường:

development

Môi trường này phù hợp để kiểm tra app trong quá trình phát triển và test nội bộ.

Build

Quá trình build đã được cấu hình thông qua CI/CD.

Mini-app sẽ sử dụng API khác nhau tùy theo môi trường chạy.

Chạy local​

yarn start

Sử dụng API:

VITE_BASE_DEV_URl

Deploy testing​

yarn deploy testing

Sử dụng API:

VITE_BASE_API_STAG_URL

Sau khi Mini App được duyệt​

Khi mini-app đã được duyệt và phát hành chính thức, ứng dụng sẽ gọi API production:

VITE_BASE_API_URL

Lưu ý

Đảm bảo các biến môi trường được cấu hình chính xác trước khi chạy hoặc deploy project, đặc biệt là:

  • APP_ID
  • VITE_SECRET_KEY_APP
  • VITE_PRIVET_KEY_CHECKOUT

Nếu cấu hình sai, mini-app có thể không kết nối được API hoặc SDK thanh toán.

Ngoài ra, trước khi deploy cần chắc chắn đã đăng nhập CLI bằng lệnh:

zmp login

Nếu chưa đăng nhập, quá trình deploy có thể thất bại.