Zbuduj swoją pierwszą funkcję wspomaganą przez AI

Implementowanie funkcji z AI - kompletny przepływ pracy

Teraz gdy skonfigurowałeś Cursor i rozumiesz jego podstawowe koncepcje, zbudujmy prawdziwą funkcję od początku do końca. Zaimplementujemy system uwierzytelniania użytkownika z funkcjonalnością resetowania hasła, demonstrując jak pomoc AI transformuje proces rozwoju.

Wskazówka

Wybierz odpowiednią złożoność
Dla swojej pierwszej funkcji wspomaganej przez AI wybierz coś z:

• Jasnymi wymaganiami (3-5 historii użytkownika)
• Zmianami w wielu plikach (ale < 10 plików)
• Testowalnym zachowaniem
• Bez złożonych zewnętrznych zależności

Przepływ pracy rozwoju funkcji

1. Zdefiniuj wymagania

Zacznij od jasnych historii użytkownika i kryteriów akceptacji w swoim PRD

2. Planuj w trybie Ask

Rozbij funkcję na zadania techniczne używając analizy AI

3. Implementuj z Agentem

Pozwól Agentowi zająć się ciężką pracą podczas gdy ty kierujesz i weryfikujesz

4. Testuj i iteruj

Używaj AI do generowania testów i automatycznego naprawiania problemów

Przykład: Budowanie funkcji resetowania hasła

Przejdźmy przez implementację funkcji resetowania hasła dla aplikacji webowej. To dotyka wielu warstw (baza danych, backend API, frontend UI, email) czyniąc to idealnym do demonstracji możliwości Cursor.

Krok 1: Stwórz wymagania

Najpierw utwórz prosty PRD w swoim projekcie:

# Funkcja: Resetowanie hasła

## Historie użytkownika
- Jako użytkownik chcę zresetować swoje hasło jeśli je zapomnę
- Jako użytkownik chcę otrzymać bezpieczny link resetujący przez email
- Jako użytkownik chcę żeby link resetujący wygasał po 1 godzinie

## Wymagania techniczne
- Bezpieczne generowanie tokenów
- Integracja email
- Aktualizacje schematu bazy danych
- Endpointy API
- Formularze frontend
- Zautomatyzowane testy

Krok 2: Wygeneruj plan techniczny

Przełącz na tryb Ask i dołącz swój PRD:

@docs/password-reset-prd.md
Wygeneruj plan implementacji technicznej dla tej funkcji resetowania hasła.
Rozważ najlepsze praktyki bezpieczeństwa i nasz istniejący system auth.

Cursor przeanalizuje twoją bazę kodu i stworzy szczegółowy plan:

## Plan implementacji

1. **Zmiany bazy danych**
   - Dodaj password_reset_token do tabeli users
   - Dodaj pole timestamp token_expires_at

2. **Backend API (2 endpointy)**
   - POST /auth/forgot-password
   - POST /auth/reset-password

3. **Serwis email**
   - Utwórz szablon email resetującego
   - Integracja z SendGrid/SMTP

4. **Komponenty frontend**
   - Formularz zapomniałem hasła
   - Formularz resetowania hasła
   - Wiadomości sukcesu/błędu

5. **Środki bezpieczeństwa**
   - Hashowanie tokenów przed przechowywaniem
   - Ograniczenia częstości
   - Bezpieczne generowanie losowych tokenów

Krok 3: Implementacja w trybie Agent

Teraz przełącz na tryb Agent do implementacji. Tu dzieje się magia:

Schemat bazy danych

Agent: Dodaj pola resetowania hasła do tabeli users

Agent wykona:

• Otworzy twój plik schematu bazy danych
• Doda niezbędne pola
• Stworzy skrypt migracji
• Zaktualizuje modele ORM

-- Wygenerowana migracja
ALTER TABLE users
ADD COLUMN password_reset_token VARCHAR(255),
ADD COLUMN token_expires_at TIMESTAMP;

Endpointy API

Agent: Implementuj endpoint zapomniałem hasła z ograniczeniami częstości

Agent tworzy kompletny endpoint z bezpieczeństwem:

// Endpoint zapomniałem hasła
app.post('/auth/forgot-password',
  rateLimiter({ max: 3, windowMs: 15 * 60 * 1000 }),
  async (req, res) => {
    const { email } = req.body;

    const user = await User.findByEmail(email);
    if (!user) {
      // Nie ujawniaj czy email istnieje
      return res.json({ message: 'Jeśli email istnieje, link resetujący został wysłany' });
    }

    const token = crypto.randomBytes(32).toString('hex');
    const hashedToken = await bcrypt.hash(token, 10);

    await user.update({
      password_reset_token: hashedToken,
      token_expires_at: new Date(Date.now() + 3600000) // 1 godzina
    });

    await emailService.sendResetEmail(email, token);

    res.json({ message: 'Jeśli email istnieje, link resetujący został wysłany' });
  }
);

Formularz frontend

Agent: Utwórz komponent formularza zapomniałem hasła z walidacją

Agent generuje kompletny komponent React:

const ForgotPasswordForm = () => {
  const [email, setEmail] = useState('');
  const [status, setStatus] = useState({ type: '', message: '' });
  const [loading, setLoading] = useState(false);

  const handleSubmit = async (e) => {
    e.preventDefault();
    setLoading(true);

    try {
      const response = await fetch('/api/auth/forgot-password', {
        method: 'POST',
        headers: { 'Content-Type': 'application/json' },
        body: JSON.stringify({ email })
      });

      const data = await response.json();
      setStatus({
        type: 'success',
        message: 'Sprawdź swój email po instrukcje resetowania'
      });
    } catch (error) {
      setStatus({
        type: 'error',
        message: 'Coś poszło nie tak. Spróbuj ponownie.'
      });
    } finally {
      setLoading(false);
    }
  };

  return (
    <form onSubmit={handleSubmit}>
      {/* Pola formularza i UI */}
    </form>
  );
};

Krok 4: Udoskonalenie oparte na testach

Włącz tryb YOLO i poproś Agenta o stworzenie i uruchomienie testów:

Agent: Napisz testy dla funkcji resetowania hasła, następnie je uruchom
i napraw wszelkie problemy aż wszystkie testy przejdą

Notatka

Z włączonym trybem YOLO Agent:

1. Stworzy kompleksowe pliki testowe
2. Uruchomi testy automatycznie
3. Naprawi wszelkie zawodzące testy aktualizując kod
4. Będzie iterować aż wszystkie testy przejdą

Przykład generowania testów:

// Wygenerowany plik testowy
describe('Resetowanie hasła', () => {
  it('powinien wysłać email resetujący dla ważnego użytkownika', async () => {
    const user = await createTestUser();

    const response = await request(app)
      .post('/auth/forgot-password')
      .send({ email: user.email });

    expect(response.status).toBe(200);
    expect(emailService.sendResetEmail).toHaveBeenCalled();
  });

  it('nie powinien ujawniać czy email istnieje', async () => {
    const response = await request(app)
      .post('/auth/forgot-password')
      .send({ email: 'nieistniejacy@example.com' });

    expect(response.body.message).toBe('Jeśli email istnieje, link resetujący został wysłany');
  });

  it('powinien egzekwować ograniczenia częstości', async () => {
    // Testuj logikę ograniczeń częstości
  });
});

Zaawansowane wzorce implementacji

Używanie MCP do ulepszenia rozwoju

Wykorzystaj serwery MCP podczas implementacji:

Context7 dla dokumentacji

Użyj context7: Jak implementować bezpieczne resetowanie hasła
w Express.js?

Puppeteer do testów E2E

Użyj puppeteer do przetestowania przepływu resetowania hasła
end-to-end na localhost:3000

Database MCP dla schematu

Użyj postgres aby zweryfikować że pole password_reset_token
zostało dodane poprawnie

Iteracyjny przepływ rozwoju

Prawdziwy rozwój rzadko następuje linearnie. Oto jak radzić sobie z iteracjami:

Implementacja początkowa → Test → Odkrycie przypadku brzegowego → Udoskonalenie

Przykład iteracji:
1. Agent implementuje podstawowy przepływ ✓
2. Testy ujawniają że token nie jest czyszczony
3. "Agent: Dodaj zadanie czyszczące dla wygasłych tokenów"
4. Agent dodaje zaplanowane zadanie
5. Testy przechodzą ✓

Obsługa złożonych wymagań

Dla funkcji ze złożoną logiką biznesową:

1. Rozbij na pod-funkcje

   Agent: Najpierw zaimplementuj tylko logikę generowania
   i przechowywania tokenów

2. Weryfikuj każdy element

   Przetestujmy tę część przed przejściem do integracji email

3. Dodawaj złożoność stopniowo

   Teraz dodaj ograniczenia częstości do endpointu który właśnie stworzyliśmy

4. Refaktoryzuj z pewnością

   Agent: Wyodrębnij logikę tokenów do serwisu wielokrotnego użytku

Wspólne wzorce rozwoju funkcji

Wzorzec 1: Rozwój endpointu API

# Skuteczna struktura promptu:
Agent: Utwórz endpoint [METHOD] /api/[resource] który:
- Waliduje input używając [biblioteka walidacji]
- Obsługuje te przypadki brzegowe: [lista przypadków]
- Zwraca odpowiednie kody statusu HTTP
- Zawiera obsługę błędów i logowanie
Napisz testy najpierw, potem implementację

Wzorzec 2: Tworzenie komponentów UI

# Dla komponentów React/Vue/Angular:
Agent: Utwórz [NazwaKomponentu] który:
- Akceptuje te propsy: [lista propsów]
- Obsługuje te interakcje użytkownika: [lista interakcji]
- Pokazuje stany ładowania/błędu
- Jest dostępny (etykiety ARIA, nawigacja klawiaturą)
- Zawiera testy jednostkowe

Wzorzec 3: Operacje bazy danych

# Dla zmian bazy danych:
Agent: Zaktualizuj bazę danych aby wspierać [funkcję]:
- Dodaj migrację dla zmian schematu
- Zaktualizuj modele ORM
- Dodaj indeksy dla wydajności
- Dołącz migrację rollback
- Testuj z przykładowymi danymi

Debugowanie i rozwiązywanie problemów

Gdy rzeczy nie działają jak oczekiwano:

Błędy build

Agent: Uruchom tsc i napraw wszystkie błędy TypeScript

Z trybem YOLO Agent:

• Uruchomi komendę build
• Zobaczy wszystkie błędy
• Naprawi je we wszystkich plikach
• Będzie powtarzać aż build przejdzie

Awarie testów

Agent: Debuguj dlaczego test resetowania hasła zawodzi.
Dodaj console.logs jeśli potrzeba, następnie napraw problem.

Problemy runtime

Agent: Aplikacja crashuje przy kliknięciu reset.
Sprawdź konsolę przeglądarki i zakładkę network,
następnie napraw problem.

Lista kontrolna jakości

Przed uznaniem funkcji za kompletną:

• Wszystkie testy przechodzą (jednostkowe, integracyjne, E2E)
• Obsługa błędów dla wszystkich przypadków brzegowych
• Przegląd bezpieczeństwa (brak ujawnionych sekretów, SQL injection, itp.)
• Sprawdzenie wydajności (brak zapytań N+1, odpowiednie indeksy)
• Dostępność (nawigacja klawiaturą, czytniki ekranu)
• Dokumentacja zaktualizowana (dokumenty API, README)
• Przegląd kodu od Agenta: “Przejrzyj tę funkcję pod kątem najlepszych praktyk”

Wskazówki pro dla rozwoju funkcji

Zacznij małe

Zacznij od najprostszej wersji, potem iteruj. AI świetnie radzi sobie z przyrostowymi ulepszeniami.

Testuj wcześnie

Pisz testy wraz z implementacją. Testy generowane przez AI wykrywają przypadki brzegowe które możesz przegapić.

Używaj checkpointów

Twórz checkpointy przed większymi zmianami. Łatwy rollback jeśli AI zejdzie z kursu.

Weryfikuj zrozumienie

Pytaj “Wyjaśnij co właśnie zrobiłeś” aby upewnić się że zmiany AI są zgodne z twoją intencją.

Przykłady funkcji z rzeczywistego świata

Funkcja koszyka e-commerce Wieloetapowa implementacja z zarządzaniem stanem, API i UI

Powiadomienia w czasie rzeczywistym Integracja WebSocket z fallback polling

System upload plików UI drag-and-drop ze śledzeniem postępu i integracją S3

Następne kroki

Teraz gdy zbudowałeś swoją pierwszą funkcję wspomaganą przez AI:

1. Spróbuj bardziej złożonej funkcji - wieloetapowe przepływy pracy lub integracje
2. Eksploruj specjalistyczne wzorce - GraphQL, mikroserwisy, funkcje czasu rzeczywistego
3. Optymalizuj swój przepływ pracy - twórz niestandardowe zasady dla swoich wzorców
4. Dziel się naukami - dokumentuj wzorce które działają dobrze dla twojego zespołu

Wskazówka

Gratulacje! 🎉
Pomyślnie zaimplementowałeś kompletną funkcję używając pomocy AI. Każda funkcja którą budujesz sprawi że będziesz bardziej efektywny w orkiestrowaniu AI do obsługi rutynowych zadań podczas gdy ty skupiasz się na architekturze i doświadczeniu użytkownika.

Częste pułapki których należy unikać

• Nadmierne poleganie na AI - zawsze przeglądaj wygenerowany kod pod kątem bezpieczeństwa i logiki
• Pomijanie testów - AI świeci gdy ma testy do walidacji
• Ogromne zmiany - rozbijaj duże funkcje na mniejsze, testowalne fragmenty
• Ignorowanie kontekstu - daj AI odpowiednie pliki i dokumentację dla lepszych rezultatów
• Brak iteracji - pierwsze próby rzadko są idealne; udoskonalaj z AI