zmp-cli

ZMP CLI

ZMP command line utility makes easier to create Zalo Mini Program (ZMP). CLI the most recommended way to start ZMP app development.

Guide

• Features
• Installation
• Usage
• Configuration
• APIs

Features

• Create a Zalo Mini Program with React Framework.
• Deploy the mini program to Zalo Server.

Installation

Install zmp-cli (may require "sudo"):

$ npm install -g zmp-cli

Usage

Run the following command to get usage helps:

$ zmp

Directly:

$ zmp <command> [options]

Create Zalo APP

1. Open Zalo for Developers and login with Zalo account.
2. Create new app with following step:
   1. Click on your avatar and choose Thêm ứng dụng mới
   2. Input your app information.
   3. Click Tạo ID ứng dụng
3. Active your app

Get Zalo APP Access Token

1. Open Zalo for Developers and login with Zalo account.
2. On Navigation Bar, choose Công cụ -> API Explorer
3. On API Explorer, select your app and click Lấy User Access Token

Create ZMP

To create ZMP app, create a Zalo app and run the following command in the directory where you want to create app:

$ mkdir mini-app && cd mini-app
$ zmp create

Program will prompt for few questions about Zalo App ID, Zalo access token, framework and template you want to start with.

Create ZMP with user interface

Run the following command in the directory where you want to create app:

$ zmp create --ui

It will launch UI where you will be able to configure the project. By default it launches server on localhost:3001 address. If you want to change the port then use --port <n> argument:

$ zmp create --ui --port 8080

Start ZMP

$ zmp start

Deploy ZMP

$ zmp deploy

To open your app, you must use Zalo App to scan QR code after deploy done

Configuration

Change file app.json to config your app when it is launched.

Example:

{
  "window": {
    "titleHeader": "My App",
    "orientation": 0,
    "color": "#15A6FB",
    "rightMenu": {
      "data": [],
      "supportToolBar": 0,
      "reset": 0
    },
    "leftMenu": {
      "buttonType": 1,
      "confirmToExit": 1,
      "dialogMessage": "Bạn có muốn đóng app này không?"
    }
  },
  "debug": false
}

APIs

Authentication Methods

• getAccessToken
• login

Basics Methods

• getVersion

Device Methods

• setDeviceOrientation

Navigation Bar Methods

• setNavigationBarColor
• setNavigationBarLeftButton
• setNavigationBarTitle

Authentication Methods

getAccessToken

▸ getAccessToken(): Promise<any>

Get Access Token.

async

function getAccessToken

example ZMP.apis.getAccessToken().then((res) => { console.log("Success"); }).catch((error) => { console.log("Fail"); });

Returns: Promise<any>

---

login

▸ login(): Promise<any>

Login to call more action.

async

function Login

example ZMP.apis.login().then((res) => { console.log("Success"); }).catch((error) => { console.log("Fail"); });

Returns: Promise<any>

---

Basics Methods

getVersion

▸ getVersion(): string

Get the current version of sdk.

Returns: string

Zalo Mini App version.

---

Device Methods

setDeviceOrientation

▸ setDeviceOrientation(object: DeviceOrientationType): Promise<any>

Sets the color of the navigation bar in the page.

async

function setDeviceOrientation

example ZMP.apis.setDeviceOrientation({ rotate: 0 }).then((res) => { console.log("Success"); }).catch((error) => { console.log("Fail"); });

Parameters:

Name	Type
object	DeviceOrientationType

Returns: Promise<any>

---

Navigation Bar Methods

setNavigationBarColor

▸ setNavigationBarColor(object: NavBarColorType): Promise<any>

Sets the color of the navigation bar in the page.

async

function setNavigationBarColor

example ZMP.apis.setNavigationBarColor({ color: "#000000" }).then((res) => { console.log("Success"); }).catch((error) => { console.log("Fail"); });

Parameters:

Name	Type
object	NavBarColorType

Returns: Promise<any>

---

setNavigationBarLeftButton

▸ setNavigationBarLeftButton(object: NavBarLeftMenuType): Promise<any>

Dynamically sets the left button of the current page.

async

function setNavigationBarLeftButton

example ZMP.apis.setNavigationBarLeftButton({ buttonType: 1, confirmToExit: 1, dialogMessage: 'Bạn có muốn đóng app này không?' }).then((res) => { console.log("Success"); }).catch((error) => { console.log("Fail"); });

Parameters:

Name	Type
object	NavBarLeftMenuType

Returns: Promise<any>

---

setNavigationBarTitle

▸ setNavigationBarTitle(object: NavBarTitleType): Promise<any>

Dynamically sets the title of the current page.

async

function setNavigationBarTitle

example

ZMP.apis.setNavigationBarTitle({ title: "Current Page" }).then((res) => { console.log("Success"); }).catch((error) => { console.log("Fail"); });

Parameters:

Name	Type
object	NavBarTitleType

Returns: Promise<any>