# 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 promogame-game-component
   ``` 
   or
   ```bash
   pnpm install promogame-game-component
   ``` 
   or
   ```bash
   yarn install promogame-game-component
   ```

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


   ```tsx
   export default function MainApp() {
      const Loading = ({ progress }: { progress: number }) => {
         return (
                 <div className={'h-full w-full items-center justify-center text-center'}>
                    Loading {progress * 100}%
                 </div>
         );
      };
   
      return (
              <div className={'flex h-dvh w-screen flex-col items-center justify-center'}>
                 <PromogameGame loadingComponent={Loading} className={'h-full w-full'} apiUrl={import.meta.env.VITE_API_URL} />
              </div>
      );
   }
   ```