Getting Started

Build your first BooApp in under 10 minutes. This guide walks you through the entire process from setup to submission.

Prerequisites

You need a Peqaboo account and a registered developer profile. Developer Console

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.

Architecture
text
┌─────────────────────────────────┐
│  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

Don't know how to code? No problem! You can use AI tools to build your BooApp. Build with AI

Quick Start

1

Create your project structure

Create a new directory for your BooApp with the following structure:

bash
mkdir my-booapp && cd my-booapp
mkdir assets

# Create required files
touch booapp.json index.html assets/icon.png
2

Set up the manifest

Every BooApp requires a booapp.json manifest file. This describes your app's metadata, permissions, and display configuration.

booapp.json Example

booapp.json
json
{
  "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"
  }
}
3

Include the BooApp SDK

Add the BooApp SDK to your HTML file. You can use the CDN or download it.

index.html
html
<!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>
4

Use Bridge APIs

Use the SDK to access native features:

assets/app.js
javascript
// 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}! 🐾`);
  }
});
5

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.

bash
# Package your BooApp
zip -r my-booapp.zip booapp.json index.html assets/

Size Limit

The maximum zip size is 10MB. Optimize images and minify your code for the best experience.
6

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.

Mock bridge for local testing
javascript
// 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

Always wrap SDK calls in BooAppSDK.whenReady(). Calling SDK methods before the bridge is initialized will throw an error.

Permission denied

Make sure all required permissions are listed in your booapp.json permissions array. The bridge will reject calls to actions not covered by your declared permissions.

Manifest validation failed

Check that all required fields are present and valid. Common issues: missing slug, invalid version format (must be x.y.z), description over 120 characters.

Complete Example: Pet Profile Viewer

A complete BooApp that displays pet profile cards with share functionality.

json
{
  "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"
  }
}

What's Next?