Mobile Development Guide

Build native mobile applications for iOS and Android from your Appivo web application.

What You Get

When you build for mobile, Appivo provides:

Mobile UI

Creating a Mobile Interface

1. Navigate to User Interfaces
2. Click Add Interface
3. Select Mobile as the type
4. Design your mobile views

Mobile vs Desktop

Mobile Widgets

Appivo provides 28 mobile-optimized widgets:

Touch Input

Mobile Layout

Mobile Navigation

Mobile Features

Device Capabilities

Camera Access

Access device camera:

MCamera widget
  - Take photo
  - Select from gallery
  - Video recording
  - Photo editing

GPS Location

Get user location:

MLocation widget
  - Current position
  - Location tracking
  - Map integration

Push Notifications

Send push notifications:

1. Configure push settings
2. Create SENDPUSH action
3. Target users or devices
4. Customize notification content

Offline Storage

Work without internet:

Offline Configuration:
  - Cache models: Customer, Product
  - Sync on connect: Automatic
  - Conflict resolution: Server wins

Platform Configuration

iOS Settings

Android Settings

Building Your App

Step 1: Design Mobile UI

Create mobile-specific views:

1. Keep layouts simple and single-column
2. Use large touch targets (44px minimum)
3. Design for thumb-reachable navigation
4. Consider portrait and landscape

Step 2: Configure Settings

Set up your mobile app:

1. App name and bundle ID
2. Icons for all required sizes
3. Splash screen
4. Orientation preferences
5. Required permissions

Step 3: Test on Devices

Test thoroughly:

1. Use preview mode on devices
2. Test on real iOS and Android devices
3. Check different screen sizes
4. Verify touch interactions
5. Test offline functionality

Step 4: Generate Build

Create app packages:

Step 5: Submit to Stores

Follow store guidelines:

App Store (iOS)

• Apple Developer account required
• App Store Connect submission
• Review process (1-7 days)

Play Store (Android)

• Google Play Developer account
• Play Console submission
• Review process (hours to days)

Navigation Patterns

Tab Bar Navigation

Bottom tab bar for main sections:

MTabBar
├── Tab: Home (icon: home)
├── Tab: Search (icon: search)
├── Tab: Orders (icon: list)
├── Tab: Profile (icon: user)

Stack Navigation

Push/pop navigation:

Home Screen
  → Customer List (push)
    → Customer Detail (push)
      → Edit Customer (push)
    ← Back (pop)

Drawer Navigation

Side menu for additional options:

MDrawer
├── Settings
├── Help
├── About
└── Logout

Mobile Forms

Touch-Friendly Forms

Design forms for mobile:

1. Stack fields vertically
2. Use full-width inputs
3. Add spacing between fields
4. Use native pickers (date, time)
5. Large submit buttons

Keyboard Handling

Consider keyboard behavior:

• Move content above keyboard
• Use appropriate keyboard types
• Next/Done button navigation
• Auto-focus management

Offline Support

Configuring Offline Mode

Select which data to cache:

Offline Models:
  - Customer (full sync)
  - Product (read-only cache)
  - Order (create offline, sync later)

Sync Strategy

Handle data synchronization:

Conflict Resolution

Handle edit conflicts:

Best Practices

Performance

• Minimize data fetched
• Use pagination for lists
• Lazy load images
• Cache appropriately
• Optimize for network latency

User Experience

• Provide visual feedback
• Handle loading states
• Show offline indicators
• Use native patterns
• Support gestures

Design

• Follow platform guidelines
• Use platform-appropriate navigation
• Design for touch
• Consider accessibility
• Test on real devices

Security

• Secure local storage
• Handle session expiry
• Protect sensitive data
• Use biometric authentication
• Implement SSL pinning

Troubleshooting

Common Issues

App crashes on launch

• Check minimum OS version
• Verify permissions configured
• Review crash logs

Push notifications not working

• Verify push certificates
• Check device token registration
• Test with debug tools

Offline sync fails

• Check conflict resolution
• Verify data size limits
• Review sync logs

Next Steps

• User Interfaces - UI design patterns
• Rules and Actions - Push notification setup
• Localization - Multi-language mobile apps