Kompletny proces tworzenia oprogramowania

Połącz wszystko, czego się nauczyłeś, budując prawdziwą funkcjonalność z Claude Code. Ten przewodnik przeprowadzi cię przez kompletny proces tworzenia oprogramowania, od otrzymania wymagań do wdrożenia przetestowanego kodu.

Funkcjonalność: System profili użytkowników

Zbudujemy funkcjonalność profili użytkowników, która obejmuje:

• Stronę profilu z edytowalnymi polami
• Możliwość przesyłania awatara
• Endpointy API dla operacji na profilach
• Aktualizacje schematu bazy danych
• Pełne pokrycie testami

Co zbudujesz

• Frontend: Komponent React z obsługą formularzy
• Backend: RESTful endpointy API
• Baza danych: Migracje schematu i zapytania
• Testy: Testy jednostkowe, integracyjne i E2E
• Dokumentacja: Dokumentacja API i aktualizacje README

Faza 1: Wymagania i planowanie

Krok 1: Stwórz PRD

Uruchom Claude Code i stwórz dokument wymagań produktowych:

> Create a PRD for a user profile feature. Users should be able to:
> - View and edit their profile (name, bio, location)
> - Upload an avatar image
> - Make their profile public or private
> - See when their profile was last updated

Claude wygeneruje kompleksowy PRD. Przejrzyj i dopracuj:

> Add requirements for:
> - Avatar image size limits (max 5MB)
> - Bio character limit (500 chars)
> - Profile URL format (/users/{username})

Krok 2: Głębokie planowanie

Użyj rozszerzonego myślenia, aby stworzyć plan techniczny:

> Based on this PRD, think hard about the implementation approach.
> Consider database schema, API design, security, and testing strategy.
> We're using React, Node.js/Express, and PostgreSQL.

Wskazówka

Myślenie Claude pojawi się w szarym tekście kursywą. To tutaj rozważa kompromisy, przypadki brzegowe i decyzje architektoniczne.

Krok 3: Przekształć w listę zadań

Przekształć plan w wykonalne zadania:

> Convert your plan into a detailed todo list with subtasks.
> Organize by: Database, Backend API, Frontend, Tests, Documentation

Claude generuje coś takiego:

## Zadania funkcjonalności profilu użytkownika

### Baza danych
- [ ] Stwórz migrację dla aktualizacji tabeli users
  - [ ] Dodaj kolumny bio, location, avatar_url
  - [ ] Dodaj pole boolean is_public z domyślną wartością true
  - [ ] Dodaj timestamp updated_at
- [ ] Stwórz migrację dla tabeli avatar_metadata
  - [ ] Przechowuj rozmiar pliku, typ mime, datę przesłania

### Backend API
- [ ] Stwórz endpointy profilu
  - [ ] GET /api/users/:username/profile
  - [ ] PUT /api/users/profile (z uwierzytelnieniem)
  - [ ] POST /api/users/avatar (przesyłanie pliku)
  - [ ] DELETE /api/users/avatar
- [ ] Zaimplementuj middleware
  - [ ] Sprawdzenie uwierzytelniania
  - [ ] Walidacja przesyłania plików
  - [ ] Sprawdzenie widoczności profilu

### Frontend
- [ ] Stwórz komponent ProfilePage
  - [ ] Tryb wyświetlania dla profili publicznych
  - [ ] Tryb edycji dla własnego profilu
- [ ] Stwórz komponent ProfileForm
  - [ ] Walidacja formularza
  - [ ] Przesyłanie awatara z podglądem
- [ ] Dodaj routing
- [ ] Dodaj do nawigacji

### Testy
- [ ] Testy jednostkowe dla endpointów API
- [ ] Testy integracyjne dla przepływów profili
- [ ] Testy E2E dla interakcji z profilami
- [ ] Testuj przypadki brzegowe przesyłania plików

### Dokumentacja
- [ ] Dokumentacja API
- [ ] Aktualizuj README
- [ ] Dodaj przykład użycia

Faza 2: Konfiguracja bazy danych

Krok 4: Stwórz migracje

Zacznij od schematu bazy danych:

> Create the database migration for the user profile fields.
> Use our standard migration format with up/down methods.

Plik migracji

Claude tworzy migrations/20250315_add_user_profile_fields.js:

exports.up = async (knex) => {
  await knex.schema.alterTable('users', (table) => {
    table.text('bio').nullable();
    table.string('location', 100).nullable();
    table.string('avatar_url', 255).nullable();
    table.boolean('is_public').defaultTo(true).notNullable();
    table.timestamp('profile_updated_at').defaultTo(knex.fn.now());
  });

  await knex.schema.createTable('avatar_metadata', (table) => {
    table.increments('id').primary();
    table.integer('user_id').unsigned().notNullable()
      .references('id').inTable('users').onDelete('CASCADE');
    table.integer('file_size').unsigned().notNullable();
    table.string('mime_type', 50).notNullable();
    table.timestamp('uploaded_at').defaultTo(knex.fn.now());
    table.index('user_id');
  });
};

exports.down = async (knex) => {
  await knex.schema.dropTableIfExists('avatar_metadata');

  await knex.schema.alterTable('users', (table) => {
    table.dropColumn('bio');
    table.dropColumn('location');
    table.dropColumn('avatar_url');
    table.dropColumn('is_public');
    table.dropColumn('profile_updated_at');
  });
};

Uruchom migrację

> Run the migration and verify the schema changes

Claude wykonuje:

npm run migrate:latest
npm run db:schema

Krok 5: Aktualizuj modele

> Update the User model to include the new profile fields.
> Add validation rules and any computed properties.

Faza 3: Implementacja backendu

Krok 6: Stwórz endpointy API

Zaimplementuj API profilu:

> Implement the GET /api/users/:username/profile endpoint.
> It should:
> - Return 404 if user doesn't exist
> - Return 403 if profile is private and requester isn't the owner
> - Include avatar metadata if available

Podejście Claude

Claude będzie:

1. Tworzyć obsługę tras
2. Dodawać walidację danych wejściowych
3. Implementować logikę biznesową
4. Dodawać obsługę błędów
5. Rozważać przypadki brzegowe

Krok 7: Obsługa przesyłania plików

> Implement avatar upload with:
> - Multer for file handling
> - Image validation (type and size)
> - Resize to standard dimensions
> - Store in local uploads directory
> - Save metadata to database

Krok 8: Przetestuj API

> Write comprehensive tests for the profile API endpoints.
> Include tests for:
> - Successful operations
> - Authentication failures
> - Validation errors
> - File upload edge cases

Faza 4: Tworzenie frontendu

Krok 9: Pobierz projekt z Figmy

Jeśli masz skonfigurowane Figma MCP:

> Get the user profile design from Figma and analyze the component structure

Krok 10: Zbuduj komponenty React

> Create the ProfilePage component based on the design.
> Include:
> - Conditional rendering for view/edit modes
> - Form validation with react-hook-form
> - Avatar upload with drag-and-drop
> - Loading and error states

Struktura komponentu

Claude tworzy dobrze ustrukturyzowany komponent:

ProfilePage.tsx

import React, { useState, useEffect } from 'react';
import { useParams } from 'react-router-dom';
import { useForm } from 'react-hook-form';
import { useAuth } from '../hooks/useAuth';
import AvatarUpload from './AvatarUpload';
import ProfileDisplay from './ProfileDisplay';
import ProfileForm from './ProfileForm';

const ProfilePage: React.FC = () => {
  const { username } = useParams<{ username: string }>();
  const { user: currentUser } = useAuth();
  const [profile, setProfile] = useState(null);
  const [isEditing, setIsEditing] = useState(false);
  const [loading, setLoading] = useState(true);

  // ... implementacja
};

Stylowanie

> Style the components to match the Figma design.
> Use our existing design system tokens.

Krok 11: Testowanie integracji

> Add the profile route to our router and test the full flow:
> - Navigate to profile
> - Edit own profile
> - Upload avatar
> - View another user's profile

Faza 5: Testowanie i jakość

Krok 12: Napisz testy E2E

Używając Playwright MCP:

> Write E2E tests for the profile feature:
> - User can view their own profile
> - User can edit and save changes
> - Avatar upload works correctly
> - Privacy settings are enforced

Krok 13: Sprawdzenie wydajności

> Analyze the profile page performance:
> - Check database query efficiency
> - Verify image optimization
> - Test loading times
> - Run lighthouse if available

Faza 6: Dokumentacja i wdrożenie

Krok 14: Aktualizuj dokumentację

> Update our API documentation with the new profile endpoints.
> Include request/response examples and error codes.

Krok 15: Stwórz PR

> Review all changes and create a pull request:
> - Generate a comprehensive PR description
> - Link to the original requirements
> - Include testing instructions
> - Add screenshots of the UI

Claude będzie:

1. Uruchamiać git status, aby zobaczyć wszystkie zmiany
2. Tworzyć branch funkcjonalności, jeśli nie jest już na nim
3. Dodawać do staging i commitować ze szczegółowym komunikatem
4. Wypychać na remote
5. Generować opis PR z całym kontekstem

Krok 16: Wdrażanie

Po zatwierdzeniu PR:

> Create a deployment plan for the profile feature.
> Include:
> - Database migration steps
> - Environment variable updates
> - Feature flag configuration
> - Rollback procedure

Najlepsze praktyki procesu

Ciągła walidacja

Podczas całego procesu Claude automatycznie:

• Uruchamia testy po zmianach kodu
• Sprawdza linting i formatowanie
• Waliduje względem wymagań
• Sugeruje ulepszenia

Zarządzanie kontekstem

Utrzymywanie skupienia Claude

• Używaj /clear między głównymi fazami
• Odwołuj się do CLAUDE.md dla standardów
• Utrzymuj dostępność PRD do walidacji
• Używaj subagentów do równoległych zadań

Odzyskiwanie po błędach

Gdy coś pójdzie nie tak:

# Claude popełnił błąd
> Undo the last change

# Testy nie przechodzą
> Debug why the profile update test is failing

# Trzeba zacząć od nowa
> Revert all changes since the last commit

Kompletny przykład sesji

Oto skrócona sesja z rzeczywistego świata:

# Zacznij od wymagań
> Let's build a user profile feature. Think about what we need.

# Claude analizuje i planuje...

> Great plan. Create the database migration first.

# Claude tworzy plik migracji...

> Run the migration and verify it worked.

# Claude uruchamia migrację...

> Now implement the GET profile endpoint with tests.

# Claude implementuje endpoint i testy...

> The tests are failing. Debug and fix.

# Claude bada i naprawia...

> Perfect. Now build the React component.

# Claude tworzy komponent...

> Add E2E tests for the complete flow.

# Claude pisze testy Playwright...

> All tests passing! Create a PR with a good description.

# Claude tworzy kompleksowy PR...

Mierzenie sukcesu

Lista kontrolna ukończenia funkcjonalności

✅ Wszystkie wymagania z PRD zaimplementowane

✅ Migracje bazy danych uruchomione pomyślnie

✅ Endpointy API przetestowane i udokumentowane

✅ Frontend pasuje do specyfikacji projektu

✅ Pokrycie testów jednostkowych > 80%

✅ Testy E2E obejmują główną ścieżkę + przypadki brzegowe

✅ Dokumentacja zaktualizowana

✅ PR przejrzany i zatwierdzony

✅ Wdrożono pomyślnie

Następne kroki

Gratulacje! Zbudowałeś kompletną funkcjonalność z Claude Code. Kontynuuj naukę z:

Zaawansowane techniki Techniki i wzorce na poziomie mistrzowskim

Współpraca zespołowa Praca z Claude Code w zespołach

Strategie dużych baz kodu Skalowanie do projektów enterprise

Pamiętaj: Claude Code to twój programista parujący. Im więcej kontekstu i jasności zapewnisz, tym lepiej może ci pomóc budować solidne, dobrze przetestowane funkcjonalności efektywnie.