### Create Shortcut Examples

Source: https://docs.zaloplatforms.com/docs/MA/api/zalo/createShortcut

Examples demonstrating how to trigger shortcut creation with and without custom parameters.

```ts
await createShortcut();
```

```ts
await createShortcut({
  params: {
    utm_source: "shortcut",
  },
});
```

--------------------------------

### Open Webview Examples

Source: https://docs.zaloplatforms.com/docs/MA/api/routing/openWebview

Examples demonstrating how to open a URL in a standard view or a full-screen normal view.

```ts
openWebview({
  url: "https://mini.zalo.me",
});
```

```ts
openWebview({
  url: "https://mini.zalo.me",
  config: {
    style: "normal",
  },
});
```

--------------------------------

### Verify CLI Installation

Source: https://docs.zaloplatforms.com/docs/MA/devtools/cli/intro

Displays the help menu to confirm the CLI is installed and accessible.

```sh
zmp --help
```

--------------------------------

### Install ZaUI Tokens

Source: https://docs.zaloplatforms.com/docs/MA/zaui/foundation/Colors

Install the package to access color tokens in your project.

```sh
npm install zaui-tokens
```

--------------------------------

### Start Camera Stream in JavaScript

Source: https://docs.zaloplatforms.com/docs/MA/api/media/camera/cameraContext/start

Demonstrates initializing a camera context and triggering the start method within a React component.

```js
import React, { useEffect, useRef } from "react";
import { Box, Button, Page } from "zmp-ui";
import { createCameraContext, FacingMode } from "zmp-sdk/apis";

const HomePage = () => {
  const cameraRef = useRef(null);
  const videoRef = useRef(null);
  useEffect(() => {
    const videoElement = videoRef.current;
    if (!videoElement) {
      console.log("Media component not ready");
      return;
    }
    if (!cameraRef.current) {
      cameraRef.current = createCameraContext({
        videoElement: videoElement,
        mediaConstraints: {
          width: 640,
          height: 480,
          facingMode: FacingMode.BACK,
          audio: false,
        },
      });
    }
  }, []);

  return (
    <Page>
      <Box>
        
      </Box>

      <Box mt={5} flex alignContent={"center"}>
        <Button
          size={"small"}
          className="mb-2"
          variant="primary"
          onClick={async () => {
            const camera = cameraRef.current;
            await camera?.start();
          }}
        >
          Start Stream
        </Button>
      </Box>
    </Page>
  );
};

export default HomePage;
```

--------------------------------

### Install Zalo Bot SDK

Source: https://docs.zaloplatforms.com/docs/BOT

Install the Node.js package for Zalo Bot development.

```bash
npm install node-zalo-bot
```

--------------------------------

### Open Chat Examples

Source: https://docs.zaloplatforms.com/docs/MA/api/zalo/openChat

Examples demonstrating how to open a chat window with a user, an Official Account, or with pre-filled message content.

```ts
await openChat({
  type: "user",
  id: "xxx",
});
```

```ts
await openChat({
  type: "oa",
  id: "xxx",
});
```

```ts
await openChat({
  type: "oa",
  id: "xxx",
  message: `Xin chào, tôi muốn mua sản phẩm này: ${productName}`,
});
```

--------------------------------

### Start Camera Stream in TypeScript

Source: https://docs.zaloplatforms.com/docs/MA/api/media/camera/cameraContext/start

Demonstrates initializing a camera context with TypeScript types and triggering the start method.

```ts
import React, { useEffect, useRef } from "react";
import { Box, Button, Page } from "zmp-ui";
import { createCameraContext, FacingMode, MediaDevice, ZMACamera } from "zmp-sdk/apis";

const HomePage = () => {
  const cameraRef = useRef<ZMACamera | null>(null);
  const videoRef = useRef<HTMLVideoElement>(null);
  const [cameraList, setCameraList] = useState<MediaDevice[]>([]);
  useEffect(() => {
    const videoElement = videoRef.current;
    if (!videoElement) {
      console.log("Media component not ready");
      return;
    }
    if (!cameraRef.current) {
      cameraRef.current = createCameraContext({
        videoElement: videoElement,
        mediaConstraints: {
          width: 640,
          height: 480,
          facingMode: FacingMode.BACK,
          audio: false,
        },
      });
    }
  }, []);

  return (
    <Page>
      <Box>
        
      </Box>

      <Box mt={5} flex alignContent={"center"}>
        <Button
          size={"small"}
          className="mb-2"
          variant="primary"
          onClick={async () => {
            const camera = cameraRef.current;
            await camera?.start();
          }}
        >
          Start Stream
        </Button>
      </Box>
    </Page>
  );
};

export default HomePage;
```

--------------------------------

### Open Profile Picker Example

Source: https://docs.zaloplatforms.com/docs/MA/api/zalo/openProfilePicker

Example demonstrating how to open the profile picker with a maximum selection limit of 2 friends.

```ts
const { users } = await openProfilePicker({
  maxProfile: 2,
});
console.log(users);
```

--------------------------------

### Install Zalo Mini App CLI

Source: https://docs.zaloplatforms.com/docs/MA/devtools/cli/intro

Installs the Zalo Mini App CLI globally using npm. Requires Node.js to be installed on the system.

```sh
npm install -g zmp-cli
```

--------------------------------

### Example request

Source: https://docs.zaloplatforms.com/docs/ZBS/gui-tin-template-qua-sdt/api-truy-xuat-thong-tin-gui-tin-qua-sdt/api-lay-thong-tin-chat-luong-gui-tin-qua-sdt-hien-tai-cua-oa

Sử dụng cURL để thực hiện yêu cầu GET tới endpoint chất lượng gửi tin.

```bash
curl
-X GET
-H "Content-Type: application/json" "https://business.openapi.zalo.me/quality"
```

--------------------------------

### Initialize setupAd in app.ts

Source: https://docs.zaloplatforms.com/docs/MA/api/advertising/setupAd

Example of calling setupAd during the application initialization process within app.ts.

```typescript
import React from "react";  

import { createRoot } from "react-dom/client";  

import { setupAd } from "zmp-sdk/apis";  

  

import "zmp-ui/zaui.css";  

import "./css/app.scss";  

  

  

// Setup advertising  

setupAd();  

  

const root = createRoot(document.getElementById("app"));  

root.render(React.createElement(App));
```

--------------------------------

### Sample getMe Response

Source: https://docs.zaloplatforms.com/docs/BOT/apis/getMe

Example JSON response returned upon a successful getMe request.

```json
{
  "ok": true,
  "result": {
    "id": "1459232241454765289",
    "account_name": "bot.VDKyGxQvc",
    "account_type": "BASIC",
    "can_join_groups": false
  }
}
```

--------------------------------

### Client-side Media Picker Usage

Source: https://docs.zaloplatforms.com/docs/MA/api/media/file/openMediaPicker

Examples of using openMediaPicker with a serverUploadUrl, shown in both callback and async/await patterns.

```javascript
import { openMediaPicker } from "zmp-sdk/apis";

openMediaPicker({
  type: "photo",
  serverUploadUrl: "https://<your-domain-api>/upload/media",
  compressLevel: 2, //Tùy chọn nếu cần nén ảnh
  success: (res) => {
    // xử lý khi gọi api thành công
    const { data } = res;
    const result = JSON.parse(data);
    console.log(result);
  },
  fail: (error) => {
    // xử lý khi gọi api thất bại
    console.log(error);
  },
});
```

```javascript
import { openMediaPicker } from "zmp-sdk/apis";

const pickMedia = async () => {
  try {
    const { data } = await openMediaPicker({
      type: "photo",
      serverUploadUrl: "https://<your-domain-api>/upload/media",
      compressLevel: 2, //Tùy chọn nếu cần nén ảnh
    });
    const result = JSON.parse(data);
    console.log(result);
  } catch (error) {
    // xử lý khi gọi api thất bại
    console.log(error);
  }
};
```

--------------------------------

### sendChatAction cURL Example

Source: https://docs.zaloplatforms.com/docs/BOT/apis/sendChatAction

Demonstrates the API request using a standard cURL command.

```bash
curl -X POST "https://bot-api.zaloplatforms.com/bot<BOT_TOKEN>/sendChatAction" \
  -H "Content-Type: application/json" \
  -d '{
    "chat_id": "abc.xyz",
    "action": "typing"
  }'
```

--------------------------------

### Implement selectPaymentMethod

Source: https://docs.zaloplatforms.com/docs/MA/checkoutSdk/apis/selectPaymentMethod

Full implementation example for invoking the selectPaymentMethod API with channel configuration and callback handlers.

```jsx
import { CheckoutSDK } from "zmp-sdk/apis";

// Gọi API mở trang lựa chọn phương thức thanh toán
CheckoutSDK.selectPaymentMethod({
  channels: [
    { method: "ZALOPAY_SANDBOX", subInfo: "0123***789" },
    { method: "MOMO_SANDBOX" },
    {
      method: "BANK_SANDBOX",
      subMethod: "bank1",
      subInfo: "This is bank sandbox method 1"
    },
    {
      method: "BANK_SANDBOX",
      subMethod: "bank2",
      subInfo: "This is bank sandbox method 2"
    }
  ],
  success: (data) => {
    // Lựa chọn phương thức thành công
    const { method, isCustom, logo, displayName, subMethod } = data;
  },
  fail: (err) => {
    // Tắt trang lựa chọn phương thức hoặc xảy ra lỗi
    console.log(err);
  }
});
```

--------------------------------

### Install zmp-ui package

Source: https://docs.zaloplatforms.com/docs/MA/zaui/installation

Run this command in your terminal to add the zmp-ui library to your project dependencies.

```bash
npm install zmp-ui
```

--------------------------------

### Callback URL Example

Source: https://docs.zaloplatforms.com/docs/Social/social-api/tham-khao/user-access-token-v4

The format of the HTTP GET request received at your callback URL after the user grants permission.

```text
https://yourdomain.com/abc?code=<AUTHORIZATION_CODE>&state=xxxx&code_challenge=xxxx
```

--------------------------------

### Example Build index.html

Source: https://docs.zaloplatforms.com/docs/MA/intro/getting-started/convert-web-app-to-mini-app

A sample index.html file generated after a build process, showing the assets that need to be mapped to the app-config.json.

```html
<!doctype html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Vite + React</title>
    <script
      type="module"
      crossorigin
      src="./assets/index.cafa2549.module.js"
    ></script>
    <link rel="stylesheet" href="./assets/index.3fce1f81.css" />
  </head>
  <body>
    <div id="app">
  </body>
</html>
```

--------------------------------

### Example request for message status

Source: https://docs.zaloplatforms.com/docs/ZBS/gui-tin-template-qua-sdt/api-truy-xuat-thong-tin-gui-tin-qua-sdt/api-lay-thong-tin-trang-thai-gui-tin-qua-sdt

Sử dụng cURL để thực hiện yêu cầu GET tới endpoint trạng thái tin nhắn.

```bash
curl
-X GET
-H "Content-Type: application/json" 
"https://business.openapi.zalo.me/message/status?message_id=message_id&phone=phone"
```

--------------------------------

### Example app-config.json structure

Source: https://docs.zaloplatforms.com/docs/OA/extension/advanced/app-config-json

A sample configuration file demonstrating the structure for app settings, debug mode, zone definitions, and asset lists.

```json
{
    "app": {
        "title": "ProjectName"
    },
    "debug": false,
    "zones": {
        "admin-dashboard-primary-area-block": {
            "enable": true
        },
        "admin-profile-config-action": {
            "enable": true
        },
        "user-profile-config-block": {
            "enable": true
        },
        "admin-chat-message-profile-block": {
            "enable": true,
            "roles": [
                "MANAGER",
                "MODERATOR"
            ]
        },
        "admin-chat-message-toolbar-action": {
            "enable": true,
            "roles": [
                "MANAGER",
                "MODERATOR"
            ]
        }
    },
    "listCSS": [],
    "listSyncJS": [],
    "listAsyncJS": []
}
```

--------------------------------

### setupAd()

Source: https://docs.zaloplatforms.com/docs/MA/api/advertising/setupAd

Initializes the advertising configuration for the application. This method should be called during the app initialization phase.

```APIDOC
## setupAd()

### Description
Configures the necessary information for running advertisements. This API must be called when the application is initialized.

### Usage
```javascript
import { setupAd } from "zmp-sdk/apis";

// Setup advertising
setupAd();
```

### Note
This feature is currently in the testing phase and is only available to selected partners.
```

--------------------------------

### Retrieve camera list in JavaScript

Source: https://docs.zaloplatforms.com/docs/MA/api/media/camera/cameraContext/getCameraList

Demonstrates how to initialize a camera context and fetch the device list upon starting the stream.

```js
import React, { useEffect, useRef, useState } from "react";
import { Box, Button, Page, Select } from "zmp-ui";
const { Option } = Select;
import { createCameraContext, FacingMode } from "zmp-sdk/apis";

const HomePage = () => {
  const cameraRef = useRef(null);
  const videoRef = useRef(null);
  const [cameraList, setCameraList] = useState([]);
  const [deviceId, setDeviceId] = useState("");
  useEffect(() => {
    const videoElement = videoRef.current;
    if (!videoElement) {
      console.log("Media component not ready");
      return;
    }
    if (!cameraRef.current) {
      cameraRef.current = createCameraContext({
        videoElement: videoElement,
        mediaConstraints: {
          width: 640,
          height: 480,
          facingMode: FacingMode.BACK,
          audio: false,
        },
      });
    }
  }, []);

  return (
    <Page>
      <Box>
        
      </Box>

      <Box mt={5} flex alignContent={"center"}>
        <Button
          size={"small"}
          className="mb-2"
          variant="primary"
          onClick={async () => {
            const camera = cameraRef.current;
            await camera?.start();
            const list = camera?.getCameraList();
            if (list) {
              setCameraList(list);
            }
          }}
        >
          Start Stream
        </Button>
      </Box>
      {
        <Box className="mb-2" flex alignContent={"center"}>
          <Select
            label="Danh sách camera"
            value={deviceId}
            defaultValue={deviceId}
            onChange={(e) => {
              setDeviceId(String(e));
            }}
          >
            {cameraList.map((item, index) => {
              return (
                
              );
            })}
          </Select>
        </Box>
      }
    </Page>
  );
};

export default HomePage;
```

--------------------------------

### Verify ADB installation

Source: https://docs.zaloplatforms.com/docs/MA/intro/getting-started/frequently-solved-issues

Check if the Android Debug Bridge is correctly installed and accessible in the system path.

```bash
$ adb
Android Debug Bridge version 1.0.41
Version 35.0.1-11580240
...
```

--------------------------------

### Open a Zalo Mini App

Source: https://docs.zaloplatforms.com/docs/MA/api/routing/openMiniApp

Examples demonstrating how to open a Mini App, navigate to a specific path, or pass tracking parameters.

```ts
openMiniApp({
  appId: "194839900003483517",
});
```

```ts
openMiniApp({
  appId: "194839900003483517",
  path: "/profile",
});
```

```ts
openMiniApp({
  appId: "194839900003483517",
  params: {
    utm_campaign: "spring_promo",
  },
});
```

--------------------------------

### Refresh Token Response Example

Source: https://docs.zaloplatforms.com/docs/Social/social-api/tham-khao/dpop

Example JSON response received after successfully refreshing an access token.

```json
{
  "access_token":"E5sPAxHWmF9aYZeZzPczEcNRtdVIPCD3XyGXw1uLBZ3npsF-MUW",
  "refresh_token": "DCcFKjWctu458dAU2FRbaNRPCcQGZ34zCmUF9aYEcNRtdVIaq",
  "expires_in": "3600",
        "refresh_token_expires_in: string
}
```

--------------------------------

### Create Mini App in Java

Source: https://docs.zaloplatforms.com/docs/MA/openApis/partner/apis/createMiniApp

Sử dụng SDK Java để khởi tạo đối tượng CreateMiniAppRequest và thực hiện yêu cầu tạo Mini App.

```java
import java.util.Arrays;

import com.vng.zalo.miniapp.openapi.sdk.models.CreateMiniAppRequest;
import com.vng.zalo.miniapp.openapi.sdk.models.CreateMiniAppResponse;

CreateMiniAppRequest request = new CreateMiniAppRequest();
request.setAppName("Mini App Name");
request.setAppDescription("Mini App Description");
request.setAppCategory(AppCategory.ECOMMERCE);
request.setSubCateIds(Arrays.asList(1126, 1121));
request.setAppLogoUrl("https://logo-mapps.zdn.vn/default?v=2.0");
request.setCoverUrl("https://logo-mapps.zdn.vn/default?v=2.0");
request.setBrowsable(true);
request.setTypeOfBusiness("COMPANY");
request.setZaloAppId("Your Zalo App Id"); // if needed
CreateMiniAppResponse response = client.createMiniApp(request);
```

--------------------------------

### Import setupAd

Source: https://docs.zaloplatforms.com/docs/MA/api/advertising/setupAd

Basic import statement for the setupAd function from the ZMP SDK.

```typescript
import { setupAd } from "zmp-sdk";
```

--------------------------------

### camera.start()

Source: https://docs.zaloplatforms.com/docs/MA/api/media/camera/cameraContext/start

Initiates the camera streaming process. This method is asynchronous and should be awaited.

```APIDOC
## camera.start()

### Description
Starts the camera stream. To include audio, ensure the MediaConstraints are configured with `audio: true` during context creation or use the resume method.

### Signature
`camera.start(): Promise<void>`

### Usage
```javascript
const camera = createCameraContext({ ... });
await camera.start();
```
```

--------------------------------

### Webhook Test Response Examples

Source: https://docs.zaloplatforms.com/docs/BOT/apis/testWebhook

Examples of JSON responses returned by the API, indicating either a successful delivery or a specific rejection reason.

```json
{
  "ok": true,
  "result": {
    "ok": true,
    "url": "https://your-webhookurl.com",
    "status_code": 200,
    "outcome": "webhook.ok",
    "latency_ms": 214,
    "hint": "Your endpoint responded successfully."
  }
}
```

```json
{
  "ok": true,
  "result": {
    "ok": false,
    "url": "https://your-webhookurl.com",
    "status_code": 403,
    "outcome": "webhook.http.403",
    "latency_ms": 189,
    "hint": "Your server or CDN rejected the request with 403. Check WAF / Cloudflare rules, any IP allowlist, and that the User-Agent \"Java/<version>\" is permitted."
  }
}
```

--------------------------------

### Truy vấn thông tin người dùng qua HTTP GET

Source: https://docs.zaloplatforms.com/docs/Social/social-api/tai-lieu/tong-quan

Ví dụ về cấu trúc yêu cầu HTTP GET để lấy thông tin người dùng hiện tại.

```http
https://graph.zalo.me/v2.0/me?accesstoken={...}&fields=[...]
```

--------------------------------

### Initialize Zalo Bot

Source: https://docs.zaloplatforms.com/docs/BOT

Create a bot instance and set up a basic message listener to echo user input.

```javascript
const ZaloBot = require("node-zalo-bot");  

  

const bot = new ZaloBot("YOUR_BOT_TOKEN", {  

  polling: true,  

});  

  

// Xử lý tin nhắn đến  

bot.on("message", (msg) => {  

  const chatId = msg.chat.id;  

  

  // Phản hồi lại tin nhắn  

  bot.sendMessage(chatId, `Bạn vừa nói: ${msg.text}`);  

});
```

--------------------------------

### GET https://business.openapi.zalo.me/journey/check-token

Source: https://docs.zaloplatforms.com/docs/ZBS/gui-tin-template-qua-sdt/api-gui-tin-qua-sdt/api-gui-tin-journey

Validates a journey token.

```APIDOC
## GET https://business.openapi.zalo.me/journey/check-token

### Description
Validates the provided journey token to ensure it is active and valid.

### Method
GET

### Endpoint
https://business.openapi.zalo.me/journey/check-token

### Parameters
#### Header Parameters
- **access_token** (string) - Required - Token for API authentication.
- **journey_token** (string) - Required - The journey token to validate.
```

--------------------------------

### OnStartCallback

Source: https://docs.zaloplatforms.com/docs/MA/api/media/camera/cameraContext/CameraEvents

Registers a callback triggered when the camera starts streaming.

```APIDOC
## OnStartCallback

### Description
Registers a listener that is triggered when the camera begins streaming.

### Signature
`camera.on(CameraEvents.OnStartCallback, () => { ... })`
```

--------------------------------

### Displaying an Advertisement

Source: https://docs.zaloplatforms.com/docs/MA/api/advertising/displayAd

Example demonstrating the full lifecycle of setting up, loading, and displaying an ad within a React component.

```javascript
import React from "react";  

import { createRoot } from "react-dom/client";  

import { setupAd, loadAd, displayAd } from "zmp-sdk/apis";  

  

function App() {  

  useEffect(() => {  

    displayAd({ id: "ZMA_Middle" });  

  }, []);  

  

  return (  

    <>  

      ...  

      <div id='ZMA_Middle' />  

      ...  

    </>  

  );  

}  

  

setupAd();  

loadAd({  

  ids: ["ZMA_Middle"],  

  config: {  

    display: false  

  }  

});  

  

const root = createRoot(document.getElementById("app"));  

root.render(React.createElement(App));
```

--------------------------------

### GET https://graph.zalo.me/v2.0/me

Source: https://docs.zaloplatforms.com/docs/Social

Retrieves the profile information of the authenticated user.

```APIDOC
## GET https://graph.zalo.me/v2.0/me

### Description
Retrieves the profile information of the currently authenticated user, including ID, name, picture, gender, and birthday.

### Method
GET

### Endpoint
https://graph.zalo.me/v2.0/me

### Parameters
#### Query Parameters
- **access_token** (string) - Required - The access token obtained from the OAuth 2.0 flow.

### Response
#### Success Response (200)
- **id** (string) - User unique identifier
- **name** (string) - User full name
- **picture** (object) - User profile picture data
- **gender** (string) - User gender
- **birthday** (string) - User birthday

### Response Example
{
  "id": "1234567890",
  "name": "Nguyen Van A",
  "picture": {
    "data": {
      "url": "https://..."
    }
  },
  "gender": "male",
  "birthday": "01/01/1990"
}
```

--------------------------------

### Install Zalo SDK via CocoaPods

Source: https://docs.zaloplatforms.com/docs/Social/sdk/ios-sdk/tich-hop/xcode

Add the ZaloSDK dependency to your Podfile.

```ruby
pod 'ZaloSDK'
```

--------------------------------

### Create Mini App in Node.js

Source: https://docs.zaloplatforms.com/docs/MA/openApis/partner/apis/createMiniApp

Sử dụng thư viện Node.js để gọi phương thức createMiniApp với các tham số cấu hình cần thiết.

```javascript
import { AppCategory } from "zmp-openapi-nodejs";

const { appId, appName, error, message } = await client.createMiniApp({
  appName: "Mini App Name",
  appDescription: "Mini App Description",
  appCategory: AppCategory.ECOMMERCE,
  appLogoUrl: "https://logo-mapps.zdn.vn/default?v=2.0",
  coverUrl: "https://logo-mapps.zdn.vn/default?v=2.0",
  browsable: true,
  subCateIds: [1126, 1121],
  typeOfBusiness: "COMPANY",
  zaloAppId: "Your Zalo App Id",
});
```

--------------------------------

### Complete DPoP Token Example

Source: https://docs.zaloplatforms.com/docs/Social/social-api/tham-khao/dpop

A fully constructed DPoP token string.

```text
eyJ0eXAiOiAiZHBvcCtqd3QiLCJhbGciOiAiUlMyNTYiLCJqd2siOiB7ImFsZyI6ICJSUzI1NiIsImt0eSI6ICJSU0EiLCJuIjogIndGczhHcXJYb0t3OHdvZy1EM1VscG9yd04wUnBRYTVOY1BkdGVKX2ZGcFpST3ZQcm4zbktycUp1dDhTNmZfVzc1V296V3NsbVpaQ1NzcWtZTldsaTg3R1hab1BMZXlFQllxeGdJUkZObUpRTi1kWXo2dUY5NVhTUHRibjF0ZFNCWWp6Z1pwQktwWVhhT2VzYUwyWk9laDJoX24xZnp0OEk0N1BFcExvS2FmdVc4SWhZazlXWTZ5MDRaaE1XRmZEcHRiR2xDSjhRZUhhal9UbTFrQ1NnRXZXZ3Q0WjlKUldOc2ZRams5YXRxaVJQOWNlVV9icWtfaTNBSzVNcUZtaVhxeWlWbi1FVjJFME9fS3hHNjM4OUhlbHB6aWJJZFVTbkhLcEVmaEh5eUp5MndybkZWdnl1MDJWb1VhaXhaTHVqNW5aUU9Kc2Rya09Hb3h5OWdncXREdyIsImUiOiAiQVFBQiJ9fQ.eyJodHUiOiAiaHR0cHM6Ly9vYXV0aC56YWxvYXBwLmNvbS92NC9hY2Nlc3NfdG9rZW4iLCJodG0iOiAiUE9TVCIsImlhdCI6IDE3NTE4NzcxMDN9.E3yg0zXbZg-dJDtGJ3YXsrMlgCbe5CS0s57UoQ-0R7nJTnuX4UZZQS9icW3-ZChFwkf-Njit_lR_LE4TtFZJ441EIAP1QXcRHvHtKmVgFfDWo7k_mJQuEApnasKXA3qS6iPFpztuqgE-lf6JZxt7jJDGig5Q6Q86IflnbuLL1F2DsSEuXOp6qPKGDjYFICtafBDW6ZPeAMBrkMqjUdj1OtBsZZ8mNP-FghfRVn1crtJI0waLcIt2h2_jAo7Xx0rPKY4oU2It5UWCz2lO03vixlHDWx5st56POt4cmn1FLKHdtnfm1Nl548bdvsWzDyGqUyEP87znCyUxv4Xxf1sO3A
```

--------------------------------

### Deploy Mini App in Java

Source: https://docs.zaloplatforms.com/docs/MA/openApis/partner/apis/deployMiniApp

Uses the SDK's DeployMiniAppRequest model to configure the deployment and the client to execute the request.

```java
import com.vng.zalo.miniapp.openapi.sdk.models.DeployMiniAppRequest;
import com.vng.zalo.miniapp.openapi.sdk.models.DeployMiniAppResponse;
import java.io.File;

DeployMiniAppRequest request = new DeployMiniAppRequest();
request.setMiniAppId({Your Mini App's Id});
request.setName("Mini App Name");
request.setDescription("Mini App Description");
File file = new File("/path/to/your/file"); // Please use compressed file and handle read file by yourself
request.setFile(file);
DeployMiniAppResponse response = client.deployMiniApp(request);
```

--------------------------------

### Display a success toast

Source: https://docs.zaloplatforms.com/docs/MA/api/user-interface/interative/showToast

Example of triggering a toast notification with a success message.

```ts
showToast({
  message: "Đặt hàng thành công!",
});
```

--------------------------------

### Remove item from cache

Source: https://docs.zaloplatforms.com/docs/MA/api/native-storage/removeItem

Example demonstrating how to remove a specific key from the cache.

```ts
nativeStorage.removeItem("recentSearch");
```

--------------------------------

### Retrieve file information using callback and async/await

Source: https://docs.zaloplatforms.com/docs/MA/api/lfs/getFileInfo

Examples demonstrating how to fetch file metadata using either the success/fail callback pattern or the Promise-based async/await pattern.

```jsx
import { LFSStorage } from 'zmp-sdk/apis';

LFSStorage.getFileInfo({
  filePath: "[Đường dẫn tới file]",
  digestAlgorithm: "md5",
  success: (data) => {
    // xử lý khi gọi api thành công
    const { size, digest, type } = data;
  },
  fail: (error) => {
    // xử lý khi gọi api thất bại
    console.log(error);
  },
});
```

```jsx
import { LFSStorage } from 'zmp-sdk/apis';

const getFileInfo = async () => {
  try {
    const { size, digest, type } = await LFSStorage.getFileInfo({
      filePath: "[Đường dẫn tới file]",
      digestAlgorithm: "md5",
    });
  } catch (error) {
    // xử lý khi gọi api thất bại
    console.log(error);
  }
};
```

--------------------------------

### Define Ad Container

Source: https://docs.zaloplatforms.com/docs/MA/api/advertising/loadAd

Example of a div element used as a container for an advertisement.

```html
<div id="ZMA_Masthead">
```

--------------------------------

### Initiate payment request with Checkout SDK

Source: https://docs.zaloplatforms.com/docs/MA/checkoutSdk/apis/purchase

Demonstrates both callback and async/await patterns for creating a payment request.

```jsx
import { CheckoutSDK } from "zmp-sdk/apis";

// tạo yêu cầu thanh toán 50.000VNĐ
CheckoutSDK.purchase({
  desc: "Thanh toán 50.000",
  amount: 50000,
  method: "ZALOPAY_SANDBOX",
  success: (data) => {
    // Tạo đơn hàng thành công
    const { orderId } = data;
    console.log(orderId);
  },
  fail: (err) => {
    // Tạo đơn hàng lỗi
    console.log(err);
  },
});

// hoặc
const purchase = async () => {
  try {
    const { orderId } = await CheckoutSDK.purchase({
      desc: "Thanh toán 50.000",
      amount: 50000,
      method: "ZALOPAY_SANDBOX",
    });
  } catch (error) {
    // xử lý lỗi
    console.log(error);
  }
};
```

--------------------------------

### Run Zalo Bot

Source: https://docs.zaloplatforms.com/docs/BOT

Execute the bot script to start the polling process.

```bash
node index.js
```

--------------------------------

### Build dự án ZOA

Source: https://docs.zaloplatforms.com/docs/OA/extension/bat-dau/init-and-deploy

Biên dịch dự án sau khi thực hiện các thay đổi mã nguồn.

```bash
zoa build
```

--------------------------------

### DPoP Header Structure

Source: https://docs.zaloplatforms.com/docs/Social/social-api/tham-khao/dpop

Example of a complete DPoP header using the RS256 algorithm.

```json
{
  "typ": "dpop+jwt",
  "alg": "RS256",
  "jwk": {
    "kty": "RSA",
    "alg": "RS256",
    "n": "oahUIzC5WUUanYfYqzN-OTnUOjFqEAcUeRdrG5aWj3H...",
    "e": "AQAB"
  }
}
```

--------------------------------

### Private Key PEM Format

Source: https://docs.zaloplatforms.com/docs/Social/social-api/tham-khao/dpop

An example of a private key represented in PEM format.

```text
-----BEGIN PRIVATE KEY-----
MIGHAgEAMBMGByqGSM49AgEGCCqGSM49AwEHBG0wawIBAQQg...
-----END PRIVATE KEY-----
```

--------------------------------

### Cài đặt Node.js SDK qua npm

Source: https://docs.zaloplatforms.com/docs/MA/openApis/open/apis/setUpClient

Sử dụng lệnh npm để cài đặt thư viện zmp-openapi-nodejs.

```bash
npm install zmp-openapi-nodejs
```

--------------------------------

### Webhook Event Payload Example

Source: https://docs.zaloplatforms.com/docs/OA/webhook/tin-nhan/su-kien-official-account-gui-tin-nhan-cho-nguoi-dung-an-danh

The JSON structure of the event received at the Webhook URL.

```json
{
    "event_name":"oa_send_anonymous_text",
    "app_id":"4591324301967398637", 
    "sender": {
        "id":"4587655845403518947"
    },
    "recipient":{
        "id":"c89fa24b9b5772092b46"
    },
    "message":{
        "conversation_id":"fa8f3f8701c2e89cb1d3",
        "text":"hello",
        "msg_id":"76eef2edcba822f67bb9"
    },
    "timestamp":"1648018958278",
    "user_id_by_app":"260530994348645621"
}
```

--------------------------------

### Import zmp-ui component

Source: https://docs.zaloplatforms.com/docs/MA/zaui/installation

Example of importing a component from zmp-ui into a React functional component.

```jsx
import React from "react";  

import { Button } from "zmp-ui";  

  

const HomePage = (props) => {  

  return Button;  

};  

export default HomePage;
```

--------------------------------

### Manual CI/CD Testing Commands

Source: https://docs.zaloplatforms.com/docs/MA/intro/getting-started/frequently-solved-issues

Commands to test deployment and login locally on a personal machine.

```bash
NEW_ACCESS_TOKEN=<TOKEN> npx zmp-developer-token deploy <MINI_APP_ID>
npx zmp-developer-token login <ZALO_APP_ID> <ZALO_APP_SECRET> <ZALO_REFRESH_TOKEN>
```