"Vibe-koding" betyr å la kraftig AI gjøre det tunge arbeidet mens du veileder, tester og itererer på enkel engelsk. Det er nytt, i vinden, og—ja—du kan bygge en liten mobilapp med det denne helgen.
For en ikke-teknisk nybegynner er dette gullbilletten. Du trenger ikke lenger å bruke seks måneder på å lære forskjellen mellom en "float" og en "string." Hvis du kan beskrive hva du vil, kan du bygge det. Denne guiden tar deg gjennom siste nytt i denne bevegelsen og gir en profesjonell, trinnvis veikart til å bygge din første lille mobilapp.
Hva er vibe-koding, og hvorfor snakker alle om det?
"Vibe-koding" er ikke bare slang; det er et grunnleggende skifte i hvordan mennesker samhandler med datamaskiner for å skape programvare. Myntet av AI-forskeren Andrej Karpathy tidlig i 2025, er filosofien enkel: Du fokuserer på intensjonen (den "viben"), og AI håndterer syntaksen (koden).
I tradisjonell programmering opptrer du som byggearbeideren som legger hver murstein (kode-linje) for hånd. I vibe-koding er du arkitekten. Du sier til AI-en: "Jeg vil ha en moderne stue med utsikt mot havet", og den bygger rommet umiddelbart. Liker du ikke sofaen, river du den ikke selv; du sier bare: "Gjør sofaen blå."
Hvordan skiller vibe-koding seg fra "no-code" eller "low-code"?
- No-code: dra-og-slipp-byggere, forhåndsdefinerte blokker, svært nybegynnervennlig men begrenset for tilpasset atferd.
- Low-code: blanding av visuelle verktøy + kode, for avanserte brukere som vil ha fart og skreddersøm.
- Vibe-koding: naturlig språk → AI-generert kode (potensielt uten grenser), men du må validere og teste resultatene. Det er ikke en erstatning for programvareingeniørfaget ennå — det er et annet kraftig verktøy i verktøykassen.
Er det trygt for helt ferske nybegynnere?
Ja — for prototyping, læring og utrulling av små apper — men med forbehold:
- Du kan få en fungerende app raskt, noe som er bra for motivasjonen.
- Du må teste funksjonalitet og forstå begrensningene: AI kan introdusere sikkerhetsfeil, slapp arkitektur og overraskende kostnader hvis du bruker tung beregning.
Hvilke verktøy bør jeg bruke til å vibe-kode— og hva koster de?
Hva er kjerneverktøyene (og hvorfor)?
Verktøy: LLM-assistenter (ChatGPT / Gemini / Claude / åpen kildekode-modeller) + Expo (React Native) eller Flutter + Supabase/Firebase-backend.
Hvorfor velge dette: Du får kraften til å spesifisere hva som helst, og likevel kan du lene deg på AI for å skrive fungerende kode. Denne veien er ideell hvis du vil lære litt kode mens du forblir mest mulig samtalebasert med en LLM. Bruk LLM til å generere små moduler, test dem lokalt, og iterer. For mobil er Expo (React Native) et vennlig valg fordi det gjør testing på enheten enkelt. Hvis du vil ha dra-og-slipp-visuelt pluss eksportert kode, kombiner med FlutterFlow.
Her er en minimal, praktisk verktøykjede for en ikke-teknisk nybegynner som vil "vibe-kode" en mobilapp:
- Cursor — et lokal-/skybasert AI-kode-IDE med agenter og Tab-fullføringer. Flott for interaktive, agentiske arbeidsflyter; gratistier lar deg prøve; Pro-planer finnes hvis du vil ha utvidet bruk.
- Claude Code (Anthropic) — en agentisk kodeassistent/CLI og nettopplevelse som er god for høy-nivå, strukturert kodegenerering og iterative prompt-tekster. Nyttig som et alternativ til Cursor eller ved siden av.
- Expo (React Native) — den enkleste veien til en kryssplattform mobilapp for nybegynnere. Expo håndterer bygg, testing på telefonen via Expo Go, og har en raus gratistier.
- Firebase (valgfri backend) — enkel autentisering / database / lagring. Gratis Spark-nivå for små prototyper; Blaze betal-etter-forbruk hvis du skalerer.
Hva med kostnader?
Anbefalt startstack (raskeste vei til en liten mobilapp):
- Cursor: Gratis å starte; Pro 20 USD/mnd hvis du vil ha mer agentbruk (Pro+ og Ultra-tiers finnes).
- Claude: Har Free/Pro/Max-nivåer; tung bruk kan kreve betalte planer (Max-nivåer kan være 100+ USD/mnd). Vær også obs på ukentlige grenser for tunge agenter.
- Expo: Kjører iOS og Android fra samme JavaScript-kodebase, utmerket utviklerverktøy og forhåndsvisning på enhet via Expo Go. Gratis startnivå; betalte planer for CI/CD/byggkreditter starter rundt 19 USD/mnd.
- Firebase: Gratis Spark-nivå for testing; Blaze for produksjonsbruk (betal per enhet).
- Replit (valgfritt) — nettleserbasert editor + hosting, nyttig hvis du ikke vil installere noe lokalt; har gratistier og betalte planer fra ~20 USD/mnd.
- GitHub/GitHub Copilot (valgfritt) — kildekontroll og AI-kodeassistent i editorer (Copilot-betalplaner starter rundt 10 USD/mnd; en gratistier finnes).
Praktisk anslag: Du kan lage prototyper for 0 USD på gratistier. Forvent 0–50 USD/mnd for moderat bruk; 20 USD/mnd hvis du abonnerer på Cursor Pro eller 19 USD/mnd for Expo Starter når du trenger flere bygg. Hvis du bruker Claude Code mye, kan kostnadene stige raskt (følg med på token-/beregningsbruk).
Publiseringsavgifter for app-butikker (i virkeligheten)
- Apple Developer Program: 99 USD per år for å publisere til App Store.
- Google Play Console: Engangsregistrering på 25 USD for å publisere på Google Play.
Omtrentlig for en solo nybegynner som bygger en liten app og publiserer til begge butikkene: 0–200 USD det første året, avhengig av om du bruker betalte LLM-funksjoner eller betalte bygg-/publiseringsnivåer. Gratisnivåer og prøveperioder kan få deg gjennom den første utviklingen.
Hva er trinn-for-trinn-prosessen for å bygge din første mobilapp? 📱
La oss bygge en "Daily Vibe Check"-app. Denne appen lar brukere loggføre humøret sitt (emoji) og en kort notat, som lagres i en liste.
Fase 1: Oppsettet (ingen koding ennå)
- Last ned Cursor: Gå til cursor.com og installer det. Det ser ut som VS Code (en standard kodeeditor).
- Installer Node.js: Du trenger dette for å kjøre kode. Last ned "LTS"-versjonen fra nodejs.org.
- Installer Expo-appen: Last ned "Expo Go"-appen på din fysiske telefon (iOS eller Android).
Fase 2: "Vibing" av prosjektet
Åpne Cursor.
Du vil se et "Chat"-panel på høyre side (vanligvis Cmd+L eller Ctrl+L for å åpne). Her skjer magien. Du skriver ikke kode; du skriver en PRD (Product Requirements Document)-prompt.
Kopier og lim inn denne prompten i Cursor:
"I want to start a new React Native project using Expo.
The app is called 'DailyVibe'.App Goal: En enkel humørsporingsapp der brukere kan loggføre sitt daglige humør.**Features:**1) En startskjerm som viser en liste over tidligere humørlogger (Dato + Emoji + Notat).
2) En 'Logg humør'-knapp som åpner en modal eller ny skjerm.
3) På loggeskjermen, la meg velge blant 5 emojier (Glad, Trist, Nøytral, Spent, Trøtt) og skrive en kort tekstnote.
4) Lagre data lokalt på enheten foreløpig ved å bruke AsyncStorage.Design Vibe: Minimalistisk, pastellfarger, myke avrundede hjørner. Vennligst veiled meg trinnvis i hvordan jeg initialiserer dette prosjektet og gi meg koden for den første skjermen."
Fase 3: "Kopier-og-lim-inn"-sløyfen
Cursor vil sannsynligvis be deg kjøre en kommando for å opprette prosjektet. Den vil se slik ut:
npx create-expo-app@latest DailyVibe
Hva du skal gjøre:
- Åpne "Terminal" i Cursor (
Ctrl + ~ellerTerminal > New Terminal). - Lim inn kommandoen og trykk Enter.
- Vent til det er ferdig.
- Åpne den nye mappen
DailyVibei Cursor.
Nå vil Cursor gi deg koden for appen.
Den vil vanligvis levere en fil som heter app/index.tsx eller App.js.
Arbeidsflyten din:
- Les: Se på koden Cursor har generert.
- Bruk: Cursor har en "Apply"-knapp i chatten. Klikk den. Den skriver automatisk koden inn i filen din.
- Kjør: Skriv
npx expo starti terminalen. - Se: En QR-kode vises. Skann den med telefonens Expo Go-app. Boom. Appen din er på telefonen.
Fase 4: Finpusse viben (den "kodende" delen)
Det er her "vibe-koding" virkelig skinner.
Du vil se appen på telefonen.
Kanskje knappene er for små.
Ikke prøv å endre pikselverdien manuelt. Bare si til Cursor:
"Knappene på hjemmeskjermen er for små og ser stygge ut. Kan du gjøre dem store, i full bredde, og gi dem en myk lilla skygge? Legg også til tittelen 'Min vibe-logg' øverst."
Cursor oppdaterer koden. Du trykker "Apply". Appen på telefonen lastes inn på nytt umiddelbart med den nye designen.
Fase 5: Legge til kompleksitet
Nå vil du lagre data.
Du kan be om:
"Jeg vil lagre disse loggene slik at de ikke forsvinner når jeg lukker appen. Lag en hjelpefil for lagring ved hjelp av AsyncStorage og oppdater hjemmeskjermen til å laste data derfra."
Cursor vil generere en ny fil (f.eks. storage.ts) og endre hovedskjermen din.
Eksempel App.js (ren, nybegynnertestet)
Nedenfor er et lite, frittstående eksempel du kan lime inn i et Expo-prosjekt. Det er bevisst enkelt slik at du kan forstå hver linje. (Jeg anbefaler å bruke dette og deretter be LLM-en utvide eller refaktorisere etter 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' }
});
Notater:
- For å installere AsyncStorage, kjør:
npx expo install @react-native-async-storage/async-storage. - Etter å ha limt inn koden, kjør
npx expo startog skann med Expo Go. Expo-dokumentasjonen viser de nøyaktige trinnene.
Hvordan itererer jeg med vibe-koding?
- Hvis noe går i stykker, kopier feilmeldingen og lim den inn til LLM med kontekst: "Jeg kjørte App.js og fikk denne feilen: [lim inn feilen]. Her er min
package.jsonog Node-versjon." Be LLM foreslå rettelser. - Be LLM om å refaktorisere: "Gjør noteradene til en egen fil
NoteRow.jsog bruk PropTypes." - Be om tester eller QA-trinn: "Gi meg 5 manuelle testtrinn jeg bør kjøre på Android og iOS for denne appen."
Beste praksis for å unngå å gå deg vill?
Selv med vibe-koding er det lett å "hallusinere" eller møte feil. Slik holder du prosjektet på sporet:
1. Snakk til AI-en som til en juniorutvikler
Ikke si bare "lag en app." Vær spesifikk. I stedet for "gjør den pen," si "bruk et typografi-tungt oppsett med mye luft og en San Francisco-skrift."
2. "Én funksjon om gangen"-regelen
Be aldri om fem ting samtidig.
- Dårlig: "Legg til en innloggingsskjerm, en innstillingsside og en database."
- Bra: "La oss starte med å legge til en grunnleggende innloggingsskjerm med e-post- og passordfelt."
3. Bruk "Error Paste"-metoden
Hvis appen krasjer, ikke prøv å fikse koden selv. Kopier hele feilmeldingen fra terminalen, lim den inn i Cursor, og si: "Jeg fikk denne feilen. Hva skjedde og hvordan fikser vi det?"
4. Versjonskontroll ("Save Point")
Tenk på appen din som et videospill. Bruk Git (eller Cursors innebygde versjonering) til å lage "Save Points." Hvis du legger til en ny funksjon som ødelegger alt, kan du enkelt "rulle tilbake" til da viben fortsatt var god.
Avsluttende tanker: Bør du starte i dag?
Vinduet mellom "ikke vite hvordan man koder" og "bygge sin egen startup" har aldri vært mindre. Vibe-koding lar deg fokusere på problemet du løser snarere enn syntaksen til løsningen.
Hvis du har en "liten" mobilapp-idé — en plantevanner, en treningssporer eller en personlig dagbok — er tiden inne for å starte. Ikke bekymre deg for å være "teknisk." Bare begynn å vibe.
Hvordan kan CometAPI hjelpe deg? CometAPI er en alt-i-ett aggregasjonsplattform for LLM-modell-API-er. Den støtter kall til ulike ledende AI-modeller. Du kan få tilgang til Gemini API, Claude API og ChatGPT til en lavere pris enn hos andre leverandører. Du kan bruke CometAPI med Cursor eller Claude Code for å dra nytte av det. Før tilgang, sørg for at du har logget inn på CometAPI og hentet API-nøkkelen. CometAPI tilbyr priser som er langt lavere enn den offisielle prisen for å hjelpe deg med integrering.
Klar til å sette i gang?→ Sign up for Vibe Coding via CometAPI today !
Hvis du vil ha flere tips, guider og nyheter om AI, følg oss på VK, X og Discord!