Jak „Vibe Coding” napisać niewielką aplikację mobilną jako początkujący

„Vibe coding” oznacza pozwolenie, by potężna SI wzięła na siebie ciężar pracy, podczas gdy ty prowadzisz, testujesz i iterujesz, używając prostego angielskiego. To coś nowego, na fali trendu — i tak, w ten weekend możesz z jego pomocą zbudować malutką aplikację mobilną.

Dla nietechnicznego początkującego to złoty bilet. Nie musisz już spędzać sześciu miesięcy na nauce różnicy między „float” a „string”. Jeśli potrafisz opisać, czego chcesz, potrafisz to zbudować. Ten przewodnik przeprowadzi cię przez najnowsze informacje o tym ruchu i da profesjonalną, krok po kroku ścieżkę do zbudowania twojej pierwszej małej aplikacji mobilnej.

Czym jest vibe coding i dlaczego wszyscy o nim mówią?

„Vibe coding” to nie tylko slang; to fundamentalna zmiana w tym, jak ludzie współpracują z komputerami, aby tworzyć oprogramowanie. Termin ukuty przez badacza SI Andreja Karpathy’ego na początku 2025 roku oznacza prostą filozofię: Ty skupiasz się na intencji („vibe”), a SI zajmuje się składnią (kodem).

W tradycyjnym programowaniu działasz jak robotnik budowlany, kładąc każdą cegłę (linię kodu) ręcznie. W vibe coding jesteś architektem. Mówisz SI: „Chcę nowoczesnego salonu z widokiem na ocean”, a ona natychmiast go buduje. Jeśli nie podoba ci się sofa, nie przerabiasz jej sam — po prostu mówisz: „Zrób sofę niebieską”.

Czym vibe coding różni się od „no-code” i „low-code”?

• No-code: kreatory typu przeciągnij-i-upuść, predefiniowane bloki, bardzo przyjazne dla początkujących, ale ograniczone przy niestandardowych zachowaniach.
• Low-code: mieszanka narzędzi wizualnych i kodu; dla power userów, którzy chcą szybkości i możliwości dostosowania.
• Vibe coding: język naturalny → kod generowany przez SI (potencjalnie bez ograniczeń), ale musisz weryfikować i testować wyniki. To jeszcze nie zastępstwo inżynierii oprogramowania — to kolejne potężne narzędzie w zestawie.

Czy to bezpieczne dla zupełnych początkujących?

Tak — do prototypowania, nauki i wysyłania małych aplikacji — ale z zastrzeżeniami:

• Szybko uzyskasz działającą aplikację, co świetnie motywuje.
• Musisz testować funkcjonalność i rozumieć ograniczenia: SI może wprowadzać luki w zabezpieczeniach, niechlujną architekturę i zaskakujące koszty, jeśli używasz ciężkich obliczeń.

Jakich narzędzi użyć do vibe coding — i ile to będzie kosztować?

Jakie są narzędzia rdzeniowe (i dlaczego)?

Narzędzia: asystenci LLM (ChatGPT / Gemini / Claude / modele open-source) + Expo (React Native) lub Flutter + backend Supabase/Firebase.

Dlaczego warto wybrać to podejście: Zyskujesz możliwość specyfikowania czegokolwiek, a jednocześnie polegasz na SI, która pisze działający kod. Ta ścieżka jest idealna, jeśli chcesz poznać odrobinę kodu, pozostając w większości przy rozmowie z LLM. Użyj LLM do generowania małych modułów, testuj je lokalnie i iteruj. Na mobile Expo (React Native) to przyjazny wybór, bo ułatwia testowanie na urządzeniu. Jeśli chcesz wizualne przeciągnij-i-upuść plus eksport kodu, połącz z FlutterFlow.

Oto minimalny, praktyczny łańcuch narzędzi dla nietechnicznego początkującego, który chce „vibe code’ować” aplikację mobilną:

1. Cursor — lokalne/chmurowe IDE AI z agentami i podpowiedziami po naciśnięciu Tab. Świetne do interaktywnych, agentskich przepływów; darmowy plan pozwala spróbować; istnieją plany Pro, jeśli chcesz więcej użycia.
2. Claude Code (Anthropic) — agentski asystent kodowania/CLI i doświadczenie webowe, dobre do wyższopoziomowej, ustrukturyzowanej generacji kodu i iteracyjnych promptów. Przydatne jako alternatywa dla Cursor lub uzupełnienie.
3. Expo (React Native) — najłatwiejsza ścieżka do aplikacji mobilnej cross‑platform dla początkujących. Expo ogarnia buildy, testowanie na telefonie przez Expo Go i ma hojny darmowy plan.
4. Firebase (opcjonalny backend) — proste uwierzytelnianie / baza danych / storage. Darmowy plan Spark dla małych prototypów; Blaze pay‑as‑you‑go, jeśli rośniesz.

A co z kosztami?

Rekomendowany stack startowy (najszybsza droga do małej aplikacji mobilnej):

• Cursor: Darmowy na start; Pro 20 USD/mies. jeśli chcesz więcej użycia agentów (istnieją plany Pro+ i Ultra).
• Claude: Ma plany Free/Pro/Max; intensywne użycie może wymagać płatnych planów (Max to nawet 100+ USD/mies.). Zwracaj też uwagę na tygodniowe limity dla ciężkich agentów.
• Expo: Uruchamia iOS i Android z jednej bazy JavaScript; doskonałe narzędzia deweloperskie i podgląd na urządzeniu przez Expo Go. Darmowy plan startowy; płatne plany dla CI/CD/kredytów buildów zaczynają się około 19 USD/mies.
• Firebase: Darmowy Spark do testów; Blaze do produkcji (płatność za jednostkę).
• Replit (opcjonalnie) — edytor w przeglądarce + hosting, przydatny, jeśli wolisz nic lokalnie nie instalować; ma darmowy plan i płatne od ok. 20 USD/mies.
• GitHub/GitHub Copilot (opcjonalnie) — kontrola wersji i asystent AI w edytorach (plany płatne Copilot od ok. 10 USD/mies.; istnieje darmowy plan).

Szacunek praktyczny: Możesz prototypować za 0 USD na darmowych planach. Spodziewaj się 0–50 USD/mies. przy umiarkowanym użyciu; 20 USD/mies., jeśli wykupisz Cursor Pro, lub 19 USD/mies. za Expo Starter, gdy potrzebujesz więcej buildów. Jeśli intensywnie używasz Claude Code, koszty mogą szybko rosnąć (pilnuj użycia tokenów/obliczeń).

Opłaty za publikację w sklepach (realnie)

• Apple Developer Program: 99 USD rocznie za publikację w App Store.
• Google Play Console: jednorazowa opłata rejestracyjna 25 USD za publikację w Google Play.

Orientacyjnie dla solo początkującego, który buduje małą aplikację i publikuje w obu sklepach: 0–200 USD w pierwszym roku, zależnie od tego, czy użyjesz płatnych funkcji LLM lub płatnych planów build/publish. Darmowe plany i triale wystarczą na wstępny rozwój.

Jaki jest proces krok po kroku budowy twojej pierwszej aplikacji mobilnej? 📱

Zbudujmy aplikację „Daily Vibe Check”. Pozwoli użytkownikom logować nastrój (emoji) i krótki wpis, zapisując je na liście.

Faza 1: Przygotowanie (bez kodowania)

1. Pobierz Cursor: Wejdź na cursor.com i zainstaluj. Wygląda jak VS Code (standardowy edytor kodu).
2. Zainstaluj Node.js: Potrzebne do uruchamiania kodu. Pobierz wersję „LTS” z nodejs.org.
3. Zainstaluj aplikację Expo: Pobierz „Expo Go” na swój fizyczny telefon (iOS lub Android).

Faza 2: „Vibowanie” projektu

Otwórz Cursor.

Zobaczysz po prawej panel „Chat” (zwykle Cmd+L lub Ctrl+L, aby otworzyć). Tu dzieje się magia. Nie piszesz kodu; piszesz prompt PRD (Product Requirements Document).

Skopiuj i wklej ten prompt do Cursor:

"I want to start a new React Native project using Expo.
The app is called 'DailyVibe'.App Goal: Prosty tracker nastroju, w którym użytkownicy mogą logować swój codzienny nastrój.**Features:**1) Ekran główny pokazujący listę wcześniejszych wpisów nastroju (Data + Emoji + Notatka).
2) Przycisk 'Log Mood', który otwiera modal lub nowy ekran.
3) Na ekranie logowania nastroju pozwól wybrać z 5 emoji (Szczęśliwy, Smutny, Neutralny, Podekscytowany, Zmęczony) i wpisać krótki tekst.
4) Na razie zapisuj dane lokalnie na urządzeniu, używając AsyncStorage.Design Vibe: Minimalistyczny, pastelowe kolory, miękkie zaokrąglenia rogów. Proszę prowadź mnie krok po kroku, jak zainicjować ten projekt i podaj kod pierwszego ekranu."

Faza 3: Pętla „kopiuj‑wklej”

Cursor prawdopodobnie poleci uruchomić komendę, by stworzyć projekt. Będzie wyglądać tak:

npx create-expo-app@latest DailyVibe

Co zrobić:

1. Otwórz „Terminal” w Cursor (Ctrl + ~ lub Terminal > New Terminal).
2. Wklej tę komendę i naciśnij Enter.
3. Poczekaj na zakończenie.
4. Otwórz nowy folder DailyVibe w Cursor.

Teraz Cursor da ci kod aplikacji.

Zwykle dostarczony będzie plik app/index.tsx lub App.js.

Twój workflow:

1. Read: Przejrzyj kod wygenerowany przez Cursor.
2. Apply: W czacie Cursor jest przycisk „Apply”. Kliknij go. Automatycznie zapisze kod do twojego pliku.
3. Run: W terminalu wpisz npx expo start.
4. See: Pojawi się kod QR. Zeskanuj go aplikacją Expo Go na telefonie. Boom. Twoja aplikacja jest na twoim telefonie.

Faza 4: Doszlifowanie vibe’u (część „kodowania”)

Tu vibe coding błyszczy.

Zobaczysz aplikację na telefonie.

Może przyciski są za małe.

Nie próbuj samodzielnie zmieniać wartości pikseli. Po prostu powiedz Cursor:

"Przyciski na ekranie głównym są za małe i brzydko wyglądają. Zrób je duże, na pełną szerokość i dodaj delikatny fioletowy cień. Dodaj też tytuł „Mój dziennik nastroju” na górze."

Cursor zaktualizuje kod. Klikasz „Apply”. Aplikacja na telefonie przeładowuje się z nowym wyglądem.

Faza 5: Dodawanie złożoności

Teraz chcesz zapisywać dane.

Możesz poprosić:

"Chcę zapisywać te wpisy, żeby nie znikały po zamknięciu aplikacji. Utwórz plik pomocniczy do storage z użyciem AsyncStorage i zaktualizuj ekran główny, by ładował dane stamtąd."

Cursor wygeneruje nowy plik (np. storage.ts) i zmodyfikuje główny ekran.

Przykładowy App.js (czysty, przetestowany przez początkujących)

Poniżej znajduje się mały, samodzielny przykład, który możesz wkleić do projektu Expo. Jest celowo prosty, byś mógł zrozumieć każdą linię. (Polecam użyć go, a potem poprosić LLM o rozbudowę lub refaktoryzację w razie potrzeby.)

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' }
});

Uwagi:

• Aby zainstalować AsyncStorage uruchom: npx expo install @react-native-async-storage/async-storage.
• Po wklejeniu kodu uruchom npx expo start i zeskanuj w Expo Go. Dokumentacja Expo pokazuje dokładne kroki.

Jak iterować z użyciem vibe coding?

• Jeśli coś się psuje, skopiuj komunikat błędu i wklej go do LLM z kontekstem: „Uruchomiłem App.js i dostałem ten błąd: [wklej błąd]. Oto mój package.json i wersja node.” Poproś LLM o propozycje poprawek.
• Poproś LLM o refaktoryzację: „Wydziel wiersze notatek do osobnego pliku NoteRow.js i użyj PropTypes.”
• Poproś o testy lub kroki QA: „Podaj 5 kroków testów manualnych, które powinienem wykonać na Androidzie i iOS dla tej aplikacji.”

Dobre praktyki, by się nie pogubić

Nawet przy vibe coding łatwo „zahalałucynować” lub wpaść w błędy. Oto jak utrzymać projekt na kursie:

1. Rozmawiaj z SI jak z juniorem deweloperem

Nie mów po prostu „zrób aplikację”. Bądź konkretny. Zamiast „zrób ładnie” powiedz „użyj layoutu mocno typograficznego, dużo białej przestrzeni i czcionki San Francisco”.

2. Zasada „jedna funkcja na raz”

Nigdy nie proś o pięć rzeczy naraz.

• Źle: „Dodaj ekran logowania, stronę ustawień i bazę danych.”
• Dobrze: „Zacznijmy od dodania podstawowego ekranu logowania z polami e‑mail i hasło.”

3. Metoda „wklej błąd”

Jeśli aplikacja się wykrzaczy, nie próbuj samodzielnie naprawiać kodu. Skopiuj cały komunikat błędu z terminala, wklej do Cursor i powiedz: „Mam ten błąd. Co się stało i jak to naprawić?”

4. Kontrola wersji („punkt zapisu”)

Traktuj aplikację jak grę wideo. Użyj Gita (lub wbudowanego wersjonowania w Cursor), aby tworzyć „punkty zapisu”. Jeśli dodasz funkcję, która wszystko psuje, możesz po prostu „cofnąć się” do momentu, gdy vibe’y były wciąż dobre.

Ostatnie myśli: czy warto zacząć dziś?

Okno między „nie umiem kodować” a „buduję własny startup” nigdy nie było mniejsze. Vibe coding pozwala ci skupić się na problemie, który rozwiązujesz, a nie na składni rozwiązania.

Jeśli masz pomysł na „małą” aplikację mobilną — nawadniacz roślin, tracker treningów czy osobisty dziennik — teraz jest czas, by zacząć. Nie martw się byciem „technicznym”. Po prostu zacznij vibować.

Jak CometAPI może ci pomóc? CometAPI to jednolita platforma agregująca API modeli LLM. Obsługuje wywołania różnych mainstreamowych modeli SI. Uzyskasz dostęp do Gemini API, Claude API i ChatGPT w cenach niższych niż u innych dostawców. Możesz używać CometAPI z Cursor lub Claude Code, aby z tego skorzystać. Przed dostępem upewnij się, że zalogowałeś(-aś) się do CometAPI i uzyskałeś(-aś) klucz API. CometAPI oferuje ceny znacznie niższe niż oficjalne, aby ułatwić integrację.

Gotowy do startu? → Zapisz się do Vibe Coding za pośrednictwem CometAPI już dziś !

Jeśli chcesz więcej porad, przewodników i nowości o AI, śledź nas na VK, X i Discord!