Lovable AI: How to Build an App & Upload to App Store (Tutorial)

Overview

This tutorial walks through building and deploying an AI-powered iOS app (“Fish Identifier,” similar to Picture Fish) with minimal/no coding. It uses a prompt-driven workflow across multiple tools to go from UI creation to OpenAI-powered image recognition and ultimately iOS publishing.

---

Core Product Idea & AI Features

The app allows users to:

• Upload a fish photo (camera or file upload)
• Use OpenAI image recognition to identify the fish species
• Receive rich, structured results including:
  • Biological characteristics
  • Behavior patterns
  • Diet
  • Breeding information
  • Environmental impact / notes
  • Comparison to similar species
• Save identified fish into a personal in-app collection (library)

---

App UX / Structure (Lovable)

The app is generated with a mobile-first UI using mock data first.

It includes four main sections:

• Home
• Identify
• Library
• Profile

Development flow (high level)

1. Prompt Lovable to generate the UI and app structure using mock data.
2. Expand functionality with subsequent prompts (OpenAI integration, tools, community, monetization, etc.).

---

OpenAI Integration (Lovable)

The tutorial’s OpenAI workflow includes:

1. Create an OpenAI project and generate a secret API key
2. In Lovable, enable “cloud” / external API access
3. Provide a structured prompt instructing Lovable to:
   • Enable cloud access
   • Integrate OpenAI for image recognition
   • Return detailed fish information (the structured fields listed above)
4. Test by uploading a fish photo and confirming results appear in the app UI

---

Expanding Features: “Fishing Companion Tools”

A follow-up Lovable prompt adds a tools area containing organized fishing-support content, such as:

• Fishing season recommendations
• Local fishing regulations
• Size and weight guidelines
• Catch and release recommendations
• Marine ecosystem insights

---

Community / Social Features (Lovable)

The tutorial adds a community section with features including:

• User-submitted fish sightings
• Tags
• Community-based verification implemented via a badge
• A private fishing journal (private by default)
• Social sharing using a generic share mechanism

Interactive UI behaviors

• A journal widget on the dashboard shows entries immediately after saving
• Users can open posts, use the verify badge, view comments, and interact

---

Publishing: Web Build → iOS Build (Lovable → Despia)

Lovable “publish” generates a deployable web app link.

Then Despia converts that web build into a native iOS app by:

• Uploading app icon
• Uploading splash screen
• Connecting Apple systems using:
  • Apple Developer Team ID
  • App Store Connect account issuer ID
  • Creating an App Store Connect API key:
    • Download the .p8 file
    • Upload it into Despia

---

Apple Developer Configuration (Bundle IDs & Capabilities)

The tutorial emphasizes fully registering the app and related identifiers in Apple’s ecosystem, including wiring capabilities and related bundle IDs.

Key requirements include creating and connecting:

• Main app Bundle ID with required capabilities, such as:
  • App Attest
  • App Groups
  • Associated Domains
  • iCloud with CloudKit
  • Push notifications (broadcast)
• OneSignal target bundle ID for push notifications
• Corresponding app groups for OneSignal
• App Clip identifier + app group
• Share target identifier + app group
• Widget identifier + app group
• Linking all created app groups back to the main bundle identifier

App Store Connect registration

The tutorial also covers setting the app details in App Store Connect, including:

• Language
• SKU
• Bundle ID
• Writing back the assigned Apple ID into Despia

---

Monetization: Subscriptions via RevenueCat

The app uses RevenueCat to manage:

• In-app purchases
• Recurring subscriptions
• Paywalls
• Purchase lifecycle logic

Setup steps (described in the tutorial)

1. Create a RevenueCat project for native Apple
2. Connect App Store credentials:
   • Upload the App Store Connect API key (issuer ID + .p8)
   • Provider linking using bundle ID
   • Vendor number
3. Create an App Store Connect subscription:
   • Group: pro_access
   • Product: monthly_paywall
   • Region: worldwide
   • Price: $9.99/month
4. In RevenueCat:
   • Import the product from App Store Connect
   • Create an entitlement tied to pro_access
   • Create an offering named default with package monthly
   • Build and publish a paywall (template-based), including customization (e.g., header text “scan everything” and removing extra buttons)

---

Connect Despia / Lovable to RevenueCat (SDK + Webhooks)

Despia ↔ RevenueCat

• Paste RevenueCat API key and RevenueCat project ID into Despia
• Publish the Despia project so the iOS build can use subscriptions

Lovable integration

• Prompt to install RevenueCat packages
• Add a dashboard button to open the default offering
• Configure with:
  • External user ID = logged-in user ID
  • Entitlement = pro_access
  • Listen for purchase lifecycle events (initial purchases, renewals, cancellations, plan changes)
• Secret handling:
  • Avoid entering the RevenueCat secret key directly; let Despia handle it

Webhook flow

• Retrieve the RevenueCat webhook URL from Lovable (create if needed)
• Create a webhook password/secret

• Configure RevenueCat webhook with: Authorization: Bearer <password>

• Test the webhook; the tutorial expects HTTP 200 success

---

App Store Submission Checklist (App Store Connect)

The tutorial covers pre-review tasks, including:

• Generate a privacy policy (using privacypolicygenerator.info); the demo may simplify answers
• Upload screenshots:
  • 3 iPhone screenshots
  • iPad screenshot set
• Fill metadata:
  • Promotional text
  • Short description: “Fish identifier is an advanced AI-powered fish collecting tool.”
  • Keywords (e.g., identification, fishes, hobbies)
  • Support URL
  • Version number set to 1.0.0
  • Copyright string (fish identifier 2025)
• Build selection from Despia output
• App review settings:
  • Uncheck sign-in required for the demo

App information page

• Subtitle: “fish identifier, scan fish”
• Category: utilities
• Content rights: no
• Age rating questionnaire:
  • Answer “no” to each item

Pricing & availability

• $0.00 (free)
• Worldwide availability

App privacy questionnaire

• Privacy policy URL inserted
• Even with no personal data, the form requires completion:
  • Answers marked “yes” for data collection
  • Type set to “others”

Final step

• Add for review → app enters Apple’s review queue

---

Main Speakers / Sources

• Primary speaker (presenter): the tutorial narrator (“I” throughout the video)
• Tools/platforms used:
  • Lovable: UI generation + OpenAI integration + feature prompts
  • OpenAI: image recognition via API
  • Despia: web-to-iOS build + App Store submission preparation
  • Apple Developer / App Store Connect: identifiers, bundle IDs, review/submission
  • RevenueCat: subscriptions, paywalls, SDK/webhooks