Sådan udvikler du en lille mobilapp med “Vibe Coding” som nybegynder

“Vibe-kodning” betyder at lade kraftig AI tage det tunge arbejde, mens du guider, tester og itererer på almindeligt engelsk. Det er nyt, i vælten, og—ja—du kan bygge en lille mobilapp med det i weekenden.

For en ikke-teknisk begynder er dette guldbilletten. Du behøver ikke længere bruge seks måneder på at lære forskellen mellem en "float" og en "string." Hvis du kan beskrive, hvad du vil, kan du bygge det. Denne guide går dig igennem de nyeste nyheder i denne bevægelse og giver en professionel, trin-for-trin køreplan til at bygge din første lille mobilapp.

Hvad er vibe-kodning, og hvorfor taler alle om det?

"Vibe-kodning" er ikke bare slang; det er et fundamentalt skifte i, hvordan mennesker interagerer med computere for at skabe software. Opfundet af AI-forskeren Andrej Karpathy i begyndelsen af 2025 er filosofien enkel: Du fokuserer på intentionen (”viben”), og AI’en håndterer syntaksen (koden).

I traditionel programmering er du bygningsarbejderen, der lægger hver mursten (linje kode) med hånden. I vibe-kodning er du arkitekten. Du siger til AI’en: "Jeg vil have en moderne stue med udsigt til havet," og den bygger rummet med det samme. Kan du ikke lide sofaen, river du den ikke ned selv; du siger bare: "Gør sofaen blå."

Hvordan adskiller vibe-kodning sig fra “no-code” eller “low-code”?

• No-code: drag-and-drop builders, prædefinerede blokke, meget begynder-venligt men begrænset for skræddersyede funktioner.
• Low-code: mix af visuelle værktøjer + kode, for power-brugere der vil have fart plus tilpasning.
• Vibe-kodning: naturligt sprog → AI-genereret kode (potentielt ubegrænset), men du skal validere og teste resultaterne. Det er endnu ikke en erstatning for software engineering — det er et andet kraftfuldt værktøj i værktøjskassen.

Er det sikkert for absolutte begyndere?

Ja — til prototyper, læring og at udgive små apps — men med forbehold:

• Du kan få en fungerende app hurtigt, hvilket er godt for motivationen.
• Du skal teste funktionalitet og forstå begrænsninger: AI kan introducere sikkerhedsfejl, sjusket arkitektur og overraskende omkostninger, hvis du bruger tung compute.

Hvilke værktøjer bør jeg bruge til vibe-kodning — og hvad koster de?

Hvad er kerneværktøjerne (og hvorfor)?

Værktøjer: LLM-assistenter (ChatGPT / Gemini / Claude / open-source-modeller) + Expo (React Native) eller Flutter + Supabase/Firebase backend.

Hvorfor vælge dette: Du får kraften til at specificere alt, men kan stadig stole på, at AI skriver fungerende kode. Denne vej er ideel, hvis du vil lære lidt kode, mens du forbliver mest samtalende med en LLM. Brug LLM’en til at generere små moduler, test dem lokalt og iterer. Til mobil er Expo (React Native) et venligt valg, da det gør enhedstestning nem. Hvis du vil have drag-and-drop-visuals plus eksporteret kode, kombiner med FlutterFlow.

Her er en minimal, praktisk toolchain for en ikke-teknisk begynder, der vil “vibe-kode” en mobilapp:

1. Cursor — en lokal/cloud AI-kodnings-IDE med agenter og Tab-fuldførelse. God til interaktive, agentiske workflows; gratis tier lader dig prøve; Pro-planer findes, hvis du vil have udvidet brug.
2. Claude Code (Anthropic) — en agentisk kodningsassistent/CLI og weboplevelse, god til høj-niveau, struktureret kodegenerering og iterative prompts. Brugbar som alternativ til Cursor eller sammen med den.
3. Expo (React Native) — nemmeste vej til en cross-platform mobilapp for begyndere. Expo håndterer builds, test på din telefon via Expo Go, og har en generøs gratis tier.
4. Firebase (valgfri backend) — simpel autentificering / database / storage. Gratis Spark-tier til små prototyper; Blaze pay-as-you-go, hvis du skalerer.

Hvad med omkostninger?

Anbefalet startstack (hurtigste vej til en lille mobilapp):

• Cursor: Gratis at starte; Pro $20/md., hvis du vil have mere agent-brug (Pro+- og Ultra-tiers findes).
• Claude: Har Free/Pro/Max tiers; tung brug kan kræve betalte planer (Max-tiers kan være $100+/md.). Hold også øje med ugentlige grænser for tunge agenter.
• Expo: Kører iOS & Android fra samme JavaScript-kodebase, fremragende dev-tooling og enheds-preview via Expo Go. Gratis starttier; betalte planer for CI/CD/build-kreditter starter omkring $19/md.
• Firebase: Gratis Spark-tier til test; Blaze til produktionsbrug (betal per enhed).
• Replit (valgfri) — browserbaseret editor + hosting, nyttig hvis du foretrækker ikke at installere noget lokalt; har gratis tier og betalte planer fra ~$20/md.
• GitHub/GitHub Copilot (valgfri) — versionsstyring og AI-kodningsassistent i editorer (Copilot-betalingsplaner starter omkring $10/md.; en gratis tier findes).

Praktisk estimat: Du kan prototypere for $0 på gratis tiers. Forvent $0–$50/md. for moderat brug; $20/md. hvis du abonnerer på Cursor Pro eller $19/md. for Expo Starter, når du har brug for flere builds. Hvis du bruger Claude Code tungt, kan omkostningerne stige hurtigt (hold øje med token/compute-forbrug).

App store-udgivelsesgebyrer (virkeligheden)

• Apple Developer Program: $99 USD pr. år for at udgive til App Store.
• Google Play Console: $25 USD engangsregistreringsgebyr for at udgive på Google Play.

Overslag for en solo-begynder, der bygger en lille app og udgiver til begge butikker: $0–$200 det første år, afhængigt af om du bruger betalte LLM-funktioner eller betalte build/publish-tiers. Gratis tiers og trials kan få dig gennem den indledende udvikling.

Hvad er den trin-for-trin proces for at bygge din første mobilapp? 📱

Lad os bygge en "Daily Vibe Check"-app. Denne app lader brugere logge deres humør (emoji) og en kort note, som gemmes i en liste.

Fase 1: Opsætningen (ingen kodning endnu)

1. Download Cursor: Gå til cursor.com og installer den. Den ligner VS Code (en standard kodeditor).
2. Installér Node.js: Du skal bruge dette for at køre kode. Download "LTS"-versionen fra nodejs.org.
3. Installér Expo App: Download "Expo Go"-appen på din rigtige fysiske telefon (iOS eller Android).

Fase 2: "Vibing" af projektet

Åbn Cursor.

Du vil se et "Chat"-panel til højre (normalt Cmd+L eller Ctrl+L for at åbne). Det er her magien sker. Du skriver ikke kode; du skriver en PRD (Product Requirements Document)-prompt.

Kopiér og indsæt denne prompt i Cursor:

"I want to start a new React Native project using Expo.
The app is called 'DailyVibe'.App Goal: A simple mood tracker where users can log their daily mood.**Features:**1) A home screen showing a list of past mood logs (Date + Emoji + Note).
2) A 'Log Mood' button that opens a modal or new screen.
3) In the logging screen, let me pick from 5 emojis (Happy, Sad, Neutral, Excited, Tired) and type a short text note.
4) Save the data locally on the device for now using AsyncStorage.Design Vibe: Minimalist, pastel colors, soft rounded corners.Please guide me step-by-step on how to initialize this project and give me the code for the first screen."

Fase 3: “Copy-paste”-løkken

Cursor vil sandsynligvis bede dig køre en kommando for at oprette projektet. Den vil se sådan ud:

npx create-expo-app@latest DailyVibe

Hvad du skal gøre:

1. Åbn "Terminal" i Cursor (Ctrl + ~ eller Terminal > New Terminal).
2. Indsæt kommandoen og tryk Enter.
3. Vent på, at den bliver færdig.
4. Åbn den nye mappe DailyVibe i Cursor.

Nu vil Cursor give dig koden til appen.

Den vil typisk levere en fil kaldet app/index.tsx eller App.js.

Din arbejdsgang:

1. Læs: Kig på den kode, Cursor har genereret.
2. Anvend: Cursor har en "Apply"-knap i chatten. Klik på den. Den skriver automatisk koden ind i din fil.
3. Kør: Skriv npx expo start i terminalen.
4. Se: En QR-kode vises. Scan den med din telefons Expo Go-app. Boom. Din app er på din telefon.

Fase 4: Finpudsning af vibet (den “kodende” del)

Det er her "vibe-kodning" brillierer.

Du kigger på din telefon og ser appen.

Måske er knapperne for små.

Prøv ikke at ændre pixelværdien manuelt. Sig bare til Cursor:

"Knapperne på hjemmeskærmen er for små og ser grimme ud. Kan du gøre dem store, i fuld bredde, og give dem en blød lilla skygge? Tilføj også en titel 'Min vibe-log' øverst."

Cursor opdaterer koden. Du trykker "Apply". Appen på din telefon genindlæser straks med det nye design.

Fase 5: Tilføjelse af kompleksitet

Nu vil du gemme data.

Du kunne spørge:

"Jeg vil gemme disse logs, så de ikke forsvinder, når jeg lukker appen. Opret en storage-helper-fil med AsyncStorage og opdater hjemmeskærmen til at indlæse data derfra."

Cursor genererer en ny fil (fx storage.ts) og ændrer din hovedskærm.

Eksempel App.js (ren, begynder-testet)

Nedenfor er et lille, selvstændigt eksempel, du kan indsætte i et Expo-projekt. Det er bevidst simpelt, så du kan forstå hver linje. (Jeg anbefaler at bruge dette og derefter bede LLM’en om at udvide eller refaktorere det efter behov.)

import React, { useState, useEffect } from 'react';
import { SafeAreaView, View, TextInput, Button, FlatList, Text, TouchableOpacity, StyleSheet } from 'react-native';
import AsyncStorage from '@react-native-async-storage/async-storage';

export default function App() {
  const [text, setText] = useState('');
  const [notes, setNotes] = useState([]);

  useEffect(() => {
    (async () => {
      try {
        const saved = await AsyncStorage.getItem('@mood_notes');
        if (saved) setNotes(JSON.parse(saved));
      } catch (e) { console.warn('Load failed', e); }
    })();
  }, []);

  const saveNotes = async (newNotes) => {
    setNotes(newNotes);
    try {
      await AsyncStorage.setItem('@mood_notes', JSON.stringify(newNotes));
    } catch (e) { console.warn('Save failed', e); }
  };

  const addNote = () => {
    if (!text.trim()) return;
    const newNotes = [{ id: Date.now().toString(), text: text.trim() }, ...notes];
    saveNotes(newNotes);
    setText('');
  };

  const deleteNote = (id) => {
    saveNotes(notes.filter(n => n.id !== id));
  };

  return (
    <SafeAreaView style={styles.container}>
      <View style={styles.inputRow}>
        <TextInput
          style={styles.input}
          placeholder="How are you feeling?"
          value={text}
          onChangeText={setText}
        />
        <Button title="Add" onPress={addNote} />
      </View>
      <FlatList
        data={notes}
        keyExtractor={(item) => item.id}
        renderItem={({ item }) => (
          <View style={styles.note}>
            <Text style={styles.noteText}>{item.text}</Text>
            <TouchableOpacity onPress={() => deleteNote(item.id)}>
              <Text style={styles.delete}>Delete</Text>
            </TouchableOpacity>
          </View>
        )}
        ListEmptyComponent={() => <Text style={styles.empty}>No notes yet — add one!</Text>}
      />
    </SafeAreaView>
  );
}

const styles = StyleSheet.create({
  container: { flex: 1, padding: 16 },
  inputRow: { flexDirection: 'row', gap: 8, marginBottom: 12 },
  input: { flex: 1, borderWidth: 1, borderColor: '#ccc', padding: 8, borderRadius: 6 },
  note: { padding: 12, borderBottomWidth: 1, borderColor: '#eee', flexDirection: 'row', justifyContent: 'space-between' },
  noteText: { flex: 1 },
  delete: { color: 'red', marginLeft: 12 },
  empty: { textAlign: 'center', marginTop: 40, color: '#666' }
});

Noter:

• For at installere AsyncStorage: npx expo install @react-native-async-storage/async-storage.
• Efter indsætning af koden, kør npx expo start og scan med Expo Go. Expo-dokumentationen viser de præcise trin.

Hvordan itererer jeg med vibe-kodning?

• Hvis noget går i stykker, kopiér fejlmeddelelsen og indsæt den i LLM’en med kontekst: “I ran App.js and got this error: [paste error]. Here’s my package.json and node version.” Bed LLM’en foreslå rettelser.
• Bed LLM’en refaktorere: “Make the note rows a separate file NoteRow.js and use PropTypes.”
• Bed om tests eller QA-trin: “Give me 5 manual test steps I should run on Android and iOS for this app.”

Bedste praksis for at undgå at fare vild?

Selv med vibe-kodning er det nemt at "hallucinere" eller løbe ind i fejl. Sådan holder du dit projekt på sporet:

1. Tal til AI'en som en juniorudvikler

Sig ikke bare "lav en app." Vær specifik. I stedet for "gør den pæn," sig "brug et typografi-tungt layout med masser af whitespace og en San Francisco-font."

2. Reglen “én funktion ad gangen”

Bed aldrig om fem ting på én gang.

• Dårligt: "Tilføj en login-skærm, en indstillingsside og en database."
• Godt: "Lad os starte med at tilføje en basal login-skærm med et email- og password-felt."

3. Brug “Error Paste”-metoden

Hvis appen crasher, så forsøg ikke at fikse koden selv. Kopiér hele fejlmeddelelsen fra terminalen, indsæt den i Cursor, og sig: "I got this error. What happened and how do we fix it?"

4. Versionskontrol (”Save Point”)

Tænk på din app som et videospil. Brug Git (eller Cursors indbyggede versionering) til at oprette "Save Points." Hvis du tilføjer en ny funktion, der ødelægger alt, kan du blot "rollback" til dengang, viben stadig var god.

Afsluttende tanker: Skal du starte i dag?

Vinduet mellem "ikke at kunne kode" og "at bygge din egen startup" har aldrig været mindre. Vibe-kodning lader dig fokusere på det problem, du løser, frem for syntaksen i løsningen.

Hvis du har en idé til en "lille" mobilapp—en plantevander, en trænings-tracker eller en personlig dagbog—er tiden inde til at starte. Bekymr dig ikke om at være "teknisk." Begynd bare at vibe.

Hvordan kan CometAPI hjælpe dig? CometAPI er en one-stop aggregeringsplatform for LLM-model-API’er. Den understøtter kald til forskellige mainstream AI-modeller. Du kan tilgå Gemini API, Claude API og chat GPT til en lavere pris, end du finder hos andre udbydere. Du kan bruge CometAPI med Cursor eller Claude Code for at få fordel af det. Før adgang, sørg for at du er logget ind på CometAPI og har fået API-nøglen. CometAPI tilbyder en pris langt under den officielle pris for at hjælpe dig med integration.

Klar til at gå?→ Tilmeld dig vibe-kodning via CometAPI i dag !

Hvis du vil kende flere tips, guides og nyheder om AI, følg os på VK, X og Discord!