126 lines
3.5 KiB
Markdown
126 lines
3.5 KiB
Markdown
# 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>
|
|
);
|
|
}
|
|
``` |