Zalo Mini App

Development

Using Zalo Mini App Extension

1. Install Visual Studio Code and Zalo Mini App Extension.
2. In the Home tab, process Config App ID and Install Dependencies.
3. Navigate to the Run tab, select the suitable launcher, and click Start.

Using Zalo Mini App CLI

1. Install Node JS.
2. Install Zalo Mini App CLI.
3. Install dependencies:

   npm install
   

4. Start the dev server:

   zmp start
   

5. 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

2. 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:

     zmp login
     zmp deploy
     

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

Resources

• Zalo Mini App Official Website
• ZaUI Documentation
• ZMP SDK Documentation
• DevTools Documentation
• Ready-made Mini App Templates
• Community Support

Unity Game

Getting started

1. Install dependencies:

   npm install promogame-game-component
   

   or

   pnpm install promogame-game-component
   

   or

   yarn install promogame-game-component
   

2. Import and use it anywhere:

   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>
      );
   }