Getting Started with Aeion Mobile Builder

Navigate: Mobile Builder → Apps → New App

Option A — Start from a template (recommended):

Templates Gallery → Select an industry template (Fleet Driver, Hotel Guest, etc.) → App name: "Acme Fleet Driver" → Bundle ID: "com.acme.fleetdriver" → Branding: primary color, logo → Create App → All screens, navigation, and data bindings pre-loaded

Option B — Start from scratch:

Blank App → Name → Bundle ID (iOS) + Application ID (Android) → Start with empty canvas → Manually add screens and components

App configuration:

json { "name": "Acme Fleet Driver", "bundleId": "com.acme.fleetdriver", "version": "1.0.0", "buildNumber": 1, "otaEnabled": true, "branding": { "primaryColor": "#4f46e5", "darkModeEnabled": false }, "features": { "location": true, "pushNotifications": true } }

Template pre-loads: Navigation (tab bar), default screens (dashboard, list, detail, settings), component trees, Aeion module data bindings, permissions (location for GPS tracking).

Navigate: Mobile Builder → [App] → Screens → New Screen

Using the visual canvas:

Screen Builder Canvas → Drag components from the library (right panel) → Snap to grid (8px spacing) → Configure props in the property panel (right side) → Preview on device mockup (iPhone 15 / Galaxy S24 / iPad) → Change device frame in the toolbar

Add components:

Search Bar → Drag from "Inputs" category List → Drag from "Data Display" category (virtualized, renders one row per record) Product Card → Drag from "Commerce" category Map View → Drag from "Maps & Location" category Signature Pad → Drag from "Inputs" category

Component props (configured in right panel):

```typescript // Search Bar { placeholder: "Search products...", fieldName: "q" }

// List { dataBinding: { collectionSlug: "fleet_tasks" }, emptyText: "No tasks yet", numColumns: 1 }

// Product Card { dataBinding: { collectionSlug: "products" }, nameField: "title", priceField: "price", onAddToCart: "add_to_cart" }

// Map View { showUserLocation: true, mapType: "standard" } // vehicle/task locations render through the component's "markers" slot, bound separately ```

Connect components to Aeion OS data (no code):

typescript // In the canvas, select a component → Data Binding panel // Collection: products // Filters: { status: { equals: "active" } } { type: "collection", collectionSlug: "products", filters: { status: { equals: "active" } }, limit: 50, sort: [{ field: "createdAt", direction: "desc" }], fieldMapping: { name: "title", price: "price" } }

Collection bindings available:

• CRM: contacts, deals, activities
• Commerce: products, orders, customers
• Fleet: vehicles, drivers, tasks, geofences
• Hospitality: reservations, rooms, services
• Health: patients, appointments, medications
• Events: attendees, sessions, check-ins
• Any custom collection

How binding resolves at runtime:

Component tree → JSON tree stored on the screen Runtime API → serves the tree to the app on launch Expo native renderer → renders native components with bound data

Navigate: Mobile Builder → [App] → AI Copilot

Describe what you want:

"I want a product listing screen with a search bar, category filter chips at the top, and a grid of product cards with image, name, price, and add-to-cart button"

The AI Copilot generates a base layout (it's constrained to a known set of generic components for reliability — it lays out structure, not data bindings):

typescript { name: "Product Listing", componentTree: [ { componentId: "text-input", props: { placeholder: "Search products..." } }, { componentId: "select", props: { options: ["All", "Electronics", "Clothing", "Home"] } }, { componentId: "list", children: [ { componentId: "card", children: [ { componentId: "image" }, { componentId: "text", props: { text: "Product name" } }, { componentId: "text", props: { text: "$0.00" } }, { componentId: "button", props: { label: "Add to Cart" } } ] } // ... AI repeats the card template; you wire it to real product data in Step 3 ] } ], suggestedIcon: "ph:shopping-bag" }

Review → customize → publish. AI generates the structure, you customize the details and swap in the real "Product Card" component + data binding from Step 2/3.

Navigate: Mobile Builder → [App] → Builds → New Build

Trigger a build → EAS compiles in the cloud:

``` Platform: iOS (or Android) Profile: development (or preview, production) Build Target: full_app

→ Build record created (status: "pending") → Submitted to EAS Build (cloud compile servers) → EAS provisions a macOS or Linux build VM → React Native compiles to .ipa (iOS) / .aab (Android) → Webhook + polling update status: "success" → download URL stored ```

Before you build — configure signing credentials:

json // iOS: provisioning profile + .p12 certificate // Android: keystore file + key alias + store password { "platform": "ios", "label": "development", "encryptedData": "...base64, encrypted at rest...", "expiresAt": "2026-08-15" }

Expiry alert: you'll get notified 30 days before any credential expires, so you renew proactively — never during a release crunch.

Build time: 10-20 minutes per platform. Progress shown in the Builds panel.

Navigate: Mobile Builder → [App] → Beta Programs

Create a beta program:

```json // Create the program { "name": "Acme Fleet Beta", "platform": "ios", // or "android" or "both" "maxTesters": 25, "feedbackFormUrl": "https://acme.com/beta-feedback" } // → Aeion generates an invite code testers use to join

// Invite testers one at a time (or let them self-join with the invite code) { "email": "tester@acme.com", "name": "Jordan", "platform": "ios" } ```

TestFlight (iOS): Beta testers receive TestFlight invite. Install the app. Test OTA updates without App Store.

Play Console (Android): Beta track in Google Play Console. Internal testing track for your team.

Feedback collection: Aeion tracks who installed, which build, and any crash reports or feedback submitted.

Navigate: Mobile Builder → [App] → Publish

Publish flow:

``` Click "Publish" → Select channel (production / beta / development) → Creates a new version snapshot → The runtime API now serves the new component tree → All devices with the app update on next launch

Change a button color → Publish → 5 minutes → All devices updated Add a new screen → Publish → 10 minutes → All devices see new screen Update data binding → Publish → All devices reflect new data ```

Version management — every publish creates an immutable snapshot:

Publish → snapshot of all screens + navigation + theme stored as a new version Rollback → click any prior version → Runtime API serves the old tree → all devices revert on next launch Staged → publish to "beta" channel first → promote to "production" when ready

One-click rollback to any previous version. The snapshots are immutable — no accidental overwrites.