# Zalo Mini App

## Development

### Using Zalo Mini App Extension

1. Install [Visual Studio Code](https://code.visualstudio.com/download) and [Zalo Mini App Extension](https://mini.zalo.me/docs/dev-tools).
1. In the **Home** tab, process **Config App ID** and **Install Dependencies**.
1. Navigate to the **Run** tab, select the suitable launcher, and click **Start**.

### Using Zalo Mini App CLI

1. [Install Node JS](https://nodejs.org/en/download/).
1. [Install Zalo Mini App CLI](https://mini.zalo.me/docs/dev-tools/cli/intro/).
1. **Install dependencies**:
   ```bash
   npm install
   ```
1. **Start** the dev server:
   ```bash
   zmp start
   ```
1. **Open** `localhost:3000` in your browser.

## Deployment

1. **Create** a mini program. For instructions on how to create a mini program, please refer to the [Coffee Shop Tutorial](https://mini.zalo.me/tutorial/coffee-shop/step-1/)

1. **Deploy** your mini program to Zalo using the mini app ID created.

    - **Using Zalo Mini App Extension**: navigate to the **Deploy** panel > **Login** > **Deploy**.
    - **Using Zalo Mini App CLI**:
      ```bash
      zmp login
      zmp deploy
      ```

1. Open the mini app in Zalo by scanning the QR code.

## Resources

- [Zalo Mini App Official Website](https://mini.zalo.me/)
- [ZaUI Documentation](https://mini.zalo.me/documents/zaui/)
- [ZMP SDK Documentation](https://mini.zalo.me/documents/api/)
- [DevTools Documentation](https://mini.zalo.me/docs/dev-tools/)
- [Ready-made Mini App Templates](https://mini.zalo.me/zaui-templates)
- [Community Support](https://mini.zalo.me/community)

# Unity Game

## Getting started

1. **Install dependencies**:

   ```bash
   npm install react-unity-webgl
   ``` 
   or
   ```bash
   pnpm install react-unity-webgl
   ``` 
   or
   ```bash
   yarn install react-unity-webgl
   ```

1. **Create** the game component:
   ```tsx
   import clsx from 'clsx';
   import { useEffect } from 'react';
   import { Unity, useUnityContext } from 'react-unity-webgl';
   import zmpSdk from 'zmp-sdk'; 
   
   export const UnityGame = () => {
        const gameLink = import.meta.env.VITE_GAME_LINK;
        const { unityProvider, isLoaded, loadingProgression, UNSAFE__unityInstance } = useUnityContext({
            loaderUrl: `${gameLink}/Build/Build.loader.js`,
            dataUrl: `${gameLink}/Build/Build.data.unityweb`,
            frameworkUrl: `${gameLink}/Build/Build.framework.js.unityweb`,
            codeUrl: `${gameLink}/Build/Build.wasm.unityweb`,
        });

        useEffect(() => {
            window.ZaloMiniAppSDK = zmpSdk;
            window.unityInstance = UNSAFE__unityInstance;
        }, [UNSAFE__unityInstance]);

        return (
            <>
            {!isLoaded && (
                <div className={'h-full w-full items-center justify-center text-center'}>
                    Loading {loadingProgression * 100 + 10}%
                </div>
            )}
                <Unity
                    id='unity-canvas'
                    unityProvider={unityProvider}
                    className={clsx('h-full w-full', !isLoaded && 'hidden')}
                    devicePixelRatio={window.devicePixelRatio}
                />
            </>
        );
    };
    ```

1. **Add** game link to env:


   ```
    APP_ID=
    ZMP_TOKEN=
    VITE_GAME_LINK=[your game link]
   ```

1. **Import** and use it anywhere:


   ```tsx
    export default function MainApp() {
        return (
            <div className={'flex h-dvh w-screen flex-col items-center justify-center'}>
                <UnityGame />
            </div>
        );
    }
   ```