Getting Started
Build your first BooApp in under 10 minutes. This guide walks you through the entire process from setup to submission.
Prerequisites
What is a BooApp?
A BooApp is a mini web application that runs inside the Peqaboo mobile app. Think of it like a WeChat Mini Program or a LINE LIFF app — lightweight, instantly available, no separate installation required.
┌─────────────────────────────────┐
│ Peqaboo Mobile App (Flutter) │
│ ┌───────────────────────────┐ │
│ │ Native Bridge (v2) │ │
│ └──────────┬────────────────┘ │
│ ┌──────────▼────────────────┐ │
│ │ WebView (Your BooApp) │ │
│ │ HTML + CSS + JavaScript │ │
│ │ + BooApp SDK │ │
│ └───────────────────────────┘ │
└─────────────────────────────────┘Why Build for the Pet Community?
- Access existing pet profiles and user data — no sign-up friction
- Reach pet lovers across 20+ countries — Hong Kong, Taiwan, Japan, Korea, Southeast Asia, Europe, and the Americas
- 30+ native APIs — camera, GPS, biometrics, and more
- Instant release, instant updates — publish and iterate rapidly, reaching users worldwide in days, not months
Build with AI
Quick Start
Create your project structure
Create a new directory for your BooApp with the following structure:
mkdir my-booapp && cd my-booapp
mkdir assets
# Create required files
touch booapp.json index.html assets/icon.pngSet up the manifest
Every BooApp requires a booapp.json manifest file. This describes your app's metadata, permissions, and display configuration.
booapp.json Example
{
"name": "My Pet Tracker",
"slug": "my-pet-tracker",
"version": "1.0.0",
"description": "Track your pet's daily activities",
"author": {
"name": "Developer Name",
"email": "dev@example.com"
},
"main": "index.html",
"icon": "assets/icon.png",
"category": "health",
"permissions": ["auth", "pet_info", "camera", "location"],
"minBridgeVersion": 1,
"display": {
"orientation": "portrait",
"backgroundColor": "#FFFFFF",
"fullscreen": false
},
"navigation": {
"showBackButton": true,
"title": "My Pet Tracker"
},
"privacy": {
"dataCollection": ["user_profile", "pet_data"],
"privacyPolicyUrl": "https://example.com/privacy"
}
}Include the BooApp SDK
Add the BooApp SDK to your HTML file. You can use the CDN or download it.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>My BooApp</title>
<script src="https://peqaboo.com/sdk/v1/booapp-sdk.min.js"></script>
</head>
<body>
<div id="app">
<h1>Hello, Peqaboo!</h1>
<button id="greet-btn">Greet User</button>
</div>
<script src="assets/app.js"></script>
</body>
</html>Use Bridge APIs
Use the SDK to access native features:
// Wait for the bridge to be ready
BooAppSDK.whenReady().then(async (appInfo) => {
console.log('Running on', appInfo.platform);
// Get user info
const user = await BooAppSDK.getUserInfo();
document.getElementById('app').innerHTML = `
<h1>Hello, ${user.userName}!</h1>
<p>Welcome to My BooApp</p>
`;
});
// Greet button handler
document.getElementById('greet-btn').addEventListener('click', async () => {
const pet = await BooAppSDK.getPetInfo();
if (pet) {
await BooAppSDK.showToast(`Hi ${pet.petName}! 🐾`);
}
});Package your BooApp
Create a zip archive containing all your files. The zip must include booapp.json and your entry point at the root level.
# Package your BooApp
zip -r my-booapp.zip booapp.json index.html assets/Size Limit
Submit for review
Go to the Developer Console, fill in your app details, upload the zip package, and submit for review. Our team will review your BooApp within 2-3 business days.
Local Testing
Open your index.html in a browser to test the layout. SDK calls will fail outside the Peqaboo app — use try/catch blocks and mock data for development.
// Add this to your HTML for local development
// Remove before packaging!
if (!window.__PEQABOO_APP__) {
window.BooAppSDK = {
whenReady: () => Promise.resolve({
platform: 'web', bridgeVersion: 1, isLoggedIn: true,
uid: 'test-user', lang: 'en', regionCode: 'HK', actions: []
}),
getUserInfo: () => Promise.resolve({
uid: 'test', userName: 'Test User', userEmail: 'test@example.com'
}),
getPetInfo: () => Promise.resolve({
petId: 'pet1', petName: 'Buddy', petBreed: 'Golden Retriever',
petType: 'dog', age: 3, weight: 30
}),
getAllPets: () => Promise.resolve([]),
showToast: (msg) => { alert(msg); return Promise.resolve(true); },
getStorageItem: () => Promise.resolve(null),
setStorageItem: () => Promise.resolve(true),
};
}Troubleshooting
Bridge not ready
BooAppSDK.whenReady(). Calling SDK methods before the bridge is initialized will throw an error.Permission denied
booapp.json permissions array. The bridge will reject calls to actions not covered by your declared permissions.Manifest validation failed
Complete Example: Pet Profile Viewer
A complete BooApp that displays pet profile cards with share functionality.
{
"name": "Pet Profile Viewer",
"slug": "pet-profile-viewer",
"version": "1.0.0",
"description": "View your pet's profile with beautiful cards",
"main": "index.html",
"icon": "assets/icon.png",
"category": "tools",
"permissions": ["auth", "pet_info", "ui_dialogs", "share"],
"minBridgeVersion": 1,
"display": {
"orientation": "portrait",
"backgroundColor": "#F8F9FA"
},
"navigation": {
"showBackButton": true,
"showTitle": true,
"title": "Pet Profile"
}
}