# Så exporterar du en AI-byggd app till ett nativt iOS- och Android-projekt med Capacitor
> Ladda ner din NorthernGo-app som ett Capacitor-färdigt ZIP-arkiv, lägg till iOS och Android och öppna det i Xcode eller Android Studio — plus vad som saknas.
Source: https://northerngo.com/sv/guider/exportera-till-ios-och-android/
Language: sv
Updated: 2026-08-15
---
**Gå till Mina projekt, klicka på Mer på projektkortet och välj Ladda ner ZIP. Du får ett Capacitor-projekt: capacitor.config.json, package.json och en www-mapp med din app, ett manifest och en service worker. Kör npm install, lägg till plattformspaketen för iOS och Android och därefter npx cap add ios. Exporten kräver en betalplan.**
### 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:
```bash
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:
```bash
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
```bash
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:
```bash
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:
```json
{
"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](/sv/guider/create-pwa-app-icons/) ä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 ``:
```html
```
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](/sv/guider/avoid-vendor-lock-in-ai-builders/) och API:ts form i [databasguiden](/sv/guider/connect-supabase/).
- **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](/sv/guider/integrate-stripe-payments-saas/).
- **Ingen `` 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 ``. 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.
## Vanliga frågor
### Kan jag publicera en app byggd med AI i App Store och Google Play?
Ja, genom att exportera projektet som ett Capacitor-ZIP och bygga det lokalt. Du lägger till iOS och Android, öppnar projektet i Xcode eller Android Studio, sätter ditt eget applikations-id och lämnar in med dina egna utvecklarkonton. NorthernGo lämnar inte in åt dig, och ett iOS-bygge kräver fortfarande en Mac.
### Är den exporterade koden verkligen min, eller beror den fortfarande på NorthernGo?
Gränssnittet är helt ditt: en HTML-fil med all uppmärkning, formgivning och logik, som du kan ändra fritt. Datalagret är det inte. Anrop för databas, inloggning och AI går fortfarande till NorthernGos backend med projekt-id:t som injicerats i sidan, så posterna ligger kvar i plattformens databas till dess att du pekar om anropen till en egen backend.
### Varför visar den exporterade appen en vit skärm i simulatorn?
Oftast en av två saker. Antingen stoppade ett JavaScript-fel appen innan den renderades, vilket syns i konsolen för WebView:n, eller så gick Tailwind-CDN:n inte att nå, vilket lämnar sidan helt ostylad och ofta ser tom ut. Att lägga CSS:en lokalt i www-mappen tar bort den andra orsaken för gott.
### Vad gör window.NG_PROJECT_ID i den exporterade HTML-koden?
Den talar om för den injicerade SDK:n vilket projekt den hör till. Normalt läser SDK:n det ur adressen, antingen en ?app=-parameter eller subdomänen, men en Capacitor-WebView laddar sidan från localhost utan frågesträng. Exporten skriver därför in id:t i huvudet, och tar du bort raden slutar varje anrop för databas och inloggning att fungera i det nativa bygget.
### Vilken plan behöver jag för att ladda ner ZIP-exporten?
En betald. Gratisplanen öppnar uppgraderingsdialogen i stället för att ladda ner. Menyn märker valet Premium+, men exportrutten på servern kontrollerar Pro, vilket också är den plan som listar ett ZIP-arkiv redo för App Store och Google Play — så om en nedladdning misslyckas med ett allmänt fel på Premium är plankontrollen förklaringen.
---
## Related
- [Så undviker du inlåsning när du bygger med en AI-appbyggare](https://northerngo.com/sv/guider/undvik-inlasning-ai-verktyg/)
- [Så gör du en AI-byggd app till en installerbar PWA med egen ikon](https://northerngo.com/sv/guider/skapa-appikoner-for-pwa/)
- [Så lagrar du data i en AI-byggd app med Supabase](https://northerngo.com/sv/guider/lagra-data-med-supabase/)
- [Så tar du betalt i en AI-byggd app med dina egna Stripe-nycklar](https://northerngo.com/sv/guider/ta-betalt-med-stripe/)
---
NorthernGo är en AI-driven plattform för att bygga produktionsklara webbappar utan kod. Lokal AI-generering via WebGPU är obegränsad och gratis, och du äger all genererad källkod. https://northerngo.com/