Så exporterar du en AI-byggd app till ett nativt iOS- och Android-projekt med Capacitor

Vad exporten faktiskt är

Capacitor lindar en webbapp i ett nativt skal. Skalet är ett riktigt iOS- eller Android-projekt som du öppnar i Xcode eller Android Studio, signerar med ditt eget utvecklarkonto och lämnar in till butikerna; inuti det laddar en WebView din HTML från appens paket i stället för från en server. Det är ingen översättning till Swift eller Kotlin, och det är ingen annans export heller. Att förstå den enda meningen förebygger det mesta av besvikelsen kring "nativ export" hos AI-appbyggare.

Vad NorthernGo ger dig är Capacitor-projektets stomme med din app redan på rätt plats, plus en liten men avgörande injicering som gör att appen fortsätter fungera när den körs från en enhet i stället för från en domän.

Här är hela arkivet:

capacitor.config.json
package.json
www/
  index.html
  manifest.json
  sw.js

Det är faktiskt allt. Fem filer, inget byggsteg, ingen bundlare, inget eget beroendeträd — eftersom appen är ett enda monolitiskt HTML-dokument med sin JavaScript inbakad och Tailwind hämtad från ett CDN. Den arkitekturen är skälet till att exporten är så liten, och den orsakar också en av begränsningarna längre ner.

Steg 1: Ladda ner arkivet

Gå till Mina projekt, klicka på Mer på projektkortet och välj Ladda ner ZIP. Filen kommer som ditt-projektnamn-native.zip.

Två noteringar om åtkomsten. Menyn märker valet Premium+, och gratisplanen öppnar uppgraderingsdialogen. Exportrutten på servern kontrollerar däremot Pro och svarar annars Denna funktion kräver Pro-plan — så om du ligger på Premium och nedladdningen misslyckas med det allmänna meddelandet om att ZIP-filen inte kunde skapas är det förklaringen. Pro är också den plan vars funktionslista utlovar ett ZIP-arkiv redo för App Store och Google Play.

Exporten använder alltid den senast sparade versionen av projektet, inte det som råkar ligga på skärmen i arbetsytan. Spara innan du laddar ner.

Steg 2: Packa upp och installera

Packa upp arkivet, öppna en terminal i mappen som innehåller capacitor.config.json och installera:

npm install

Det ger dig @capacitor/core och @capacitor/cli, båda låsta till version 5. Plattformspaketen ingår inte, och det är där de flesta kör fast, eftersom npx cap add ios vägrar köra utan dem. Installera dem uttryckligen, med samma huvudversion:

npm install @capacitor/ios@^5 @capacitor/android@^5

Vill du hellre ligga på Capacitor 6 eller senare uppgraderar du @capacitor/core, @capacitor/cli, @capacitor/ios och @capacitor/android tillsammans i samma steg. Att blanda huvudversioner ger byggfel som ser ut som problem i Xcode men inte är det.

Steg 3: Lägg till plattformarna

npx cap add ios
npx cap add android
npx cap sync

cap add genererar projektmapparna ios/ och android/. cap sync kopierar in www/ i båda och installerar de nativa beroendena — på macOS kör den CocoaPods åt dig, så CocoaPods behöver vara installerat. Arkivet definierar dessutom skriptet npm run cap:sync som gör samma sak, och det är kommandot att komma ihåg: varje gång du ändrar något i www/ kör du det igen, annars visar enheten fortfarande föregående bygge.

Öppna sedan de nativa verktygen:

npx cap open ios      # kräver macOS med Xcode
npx cap open android  # kräver Android Studio

Tryck på Kör och appen startar i en simulator, en emulator eller en ansluten enhet. Plattformskraven går inte att komma runt: ett iOS-bygge kräver en Mac, och inlämning till butikerna kräver ett betalt Apple Developer-konto och ett utvecklarkonto för Google Play.

Steg 4: Byt applikations-id innan du lämnar in

Konfigurationen som genereras är medvetet generisk:

{
  "appId": "com.northerngo.app.exported",
  "appName": "NorthernGoApp",
  "webDir": "www",
  "bundledWebRuntime": false
}

Varje export från varje konto bär samma appId. Det är en platshållare, inte en identitet. Byt den till din egen omvända domän — se.dittforetag.appnamn — och sätt appName till det namn du vill ha under ikonen, innan du kör npx cap add. Plattformsmapparna genereras utifrån de värdena, så att ändra dem efteråt innebär att du också måste ändra applicationId i android/app/build.gradle och PRODUCT_BUNDLE_IDENTIFIER i Xcode, och paketmapparna på Android stämmer inte längre med id:t. I rätt ordning tar det tio sekunder; i fel ordning tar det en eftermiddag.

Exporten innehåller inte heller några nativa app-ikoner eller startbilder. Capacitor genererar platshållare, och dem byter du ut i Xcodes resurskatalog och Androids resursmappar, eller genererar hela uppsättningen från en kvadratisk källbild med Capacitors eget ikonverktyg. Den kvadratiska ikonen du laddade upp för din PWA är en bra källfil för det, men den följer inte med i arkivet.

Varför det ligger ett projekt-id i huvudet

Öppna www/index.html och du hittar det här direkt efter <head>:

<script>window.NG_PROJECT_ID = "abc123"; window.PRO_PROJECT_ID = "abc123";</script>

Ta inte bort det. Den injicerade SDK:n avgör vilket projekt den hör till i en bestämd ordning: först window.NG_PROJECT_ID, sedan en ?app=-parameter i adressen, sedan värdnamnets första led för appar som publicerats på en subdomän. I en Capacitor-WebView finns inget av de två sista — sidan laddas från localhost utan frågesträng — så utan den globala variabeln faller SDK:n tillbaka på ett platshållar-id och varje anrop för databas, inloggning och kontoradering pekar någon annanstans. Den enda raden är skillnaden mellan ett fungerande nativt bygge och ett där ingenting sparas.

window.NG_PROJECT_ID är den som SDK:n läser i dag; window.PRO_PROJECT_ID skrivs intill den för att vara bakåtkompatibel med appar som genererats av tidigare versioner av plattformen. Behåll båda. Bygger du om appen i arbetsytan och exporterar igen injiceras ett nytt par i det nya arkivet.

Vad exporten inte gör

Det här avsnittet är värt att läsa två gånger, eftersom uttrycket "exportera din källkod" får bära väldigt mycket i den här branschen.

• Det är ingen fristående backend. Den exporterade appen pratar fortfarande med NorthernGos backend för data, inloggning och AI, identifierad av just det projekt-id:t. Dina användares poster ligger kvar i plattformens Supabase-databas. Du äger och kan ändra varje rad i gränssnittet, vilket är verkligt, men om målet är riktigt oberoende måste du peka om lagringsanropen själv — avvägningarna finns i så undviker du inlåsning och API:ts form i databasguiden.
• Den fungerar inte offline. Filen www/sw.js i arkivet är en stump: den aktiveras direkt och släpper varje anrop rakt ut på nätet, och returnerar texten Offline när det misslyckas. Den förcachar ingenting. Den service worker som faktiskt gör en app användbar i flygplansläge levereras av plattformen på publicerade subdomäner och ingår inte i exporten.
• Tailwind hämtas fortfarande från ett CDN. Det genererade dokumentet laddar cdn.tailwindcss.com och kompilerar utseendet i webbläsaren vid varje sidladdning. En nativ app vars första start sker utan uppkoppling renderas därför helt ostylad. Ska du lämna in till en butik är det att lägga CSS:en lokalt i www/ den enskilt mest värdefulla ändringen du kan göra i den exporterade koden.
• window.NorthernGoPayments finns inte. Betalningsobjektet läggs till av plattformen när den servar en app på dess egen subdomän, inte av appens inbyggda SDK. I ett Capacitor-bygge anropar du kassa-endpointen med fetch i stället, som beskrivs i Stripe-guiden.
• Ingen <link rel="manifest"> läggs in i index.html. Arkivet innehåller www/manifest.json, men ingenting refererar till den, och värdena är generiska — namnet är NorthernGo Exported App och ikonen är en platshållarbokstav. Det spelar bara roll om du lägger upp www/ på ett webbhotell som webbapp, och då lägger du till länken och redigerar filen.
• Ingen README, ingen miljöfil, inga tester.

Felsökning

"Det finns ingen kod sparad i detta projekt än." Projektet har ingen sparad version. Öppna det, låt genereringen bli klar, spara och exportera sedan.

"Kunde inte skapa ZIP-filen." Servern nekade anropet. Den absolut vanligaste orsaken är plankontrollen som beskrivs i steg 1.

npx cap add ios säger att plattformen inte är installerad. Plattformspaketen finns inte bland arkivets beroenden. Installera @capacitor/ios och @capacitor/android först.

Simulatorn visar en vit skärm. Öppna konsolen för WebView:n. Två vanliga orsaker: ett JavaScript-fel i appen, eller att Tailwind-CDN:n inte går att nå, vilket lämnar en ostylad sida som mot vit bakgrund kan se tom ut.

Ingenting sparas i den nativa appen, men det fungerar på webben. Kontrollera att skriptet med NG_PROJECT_ID fortfarande är det första inuti <head>. Har det raderats eller hamnat under appens egen kod har SDK:n slagit i ett platshållar-id.

Ändringar i www/index.html syns inte på enheten. Kör npm run cap:sync (eller npx cap sync) och bygg om. Det nativa projektet har sin egen kopia.

Butiken nekar paket-id:t, eller så skriver en andra app över den första på testenheten. Båda byggdes med standardvärdet com.northerngo.app.exported. Ge varje projekt sitt eget appId och generera om plattformsmapparna.