Wzorce rozwoju mobilnych aplikacji

Wzorce rozwoju mobilnych aplikacji

Opanuj rozwój aplikacji mobilnych asystowany przez AI z React Native i Flutter używając sprawdzonych wzorców i przepływów pracy.

Rewolucja w rozwoju mobilnych aplikacji

Asystenci kodowania AI przekształcili rozwój aplikacji mobilnych z kompleksowego, specyficznego dla platformy wyzwania w usprawnione doświadczenie wieloplatformowe. Naucz się wzorców, które wykorzystują AI do budowania gotowych do produkcji aplikacji mobilnych szybciej niż kiedykolwiek wcześniej.

Wzorce rozwoju React Native

Konfiguracja i architektura projektu

Optymalizowana konfiguracja React Native z AI

Wzorzec: Użyj AI do wygenerowania dobrze ustrukturyzowanego projektu React Native z właściwą nawigacją, zarządzaniem stanem i konfiguracją stylów od początku.

# W Cursor lub Claude Code
"Utwórz strukturę projektu React Native z:
- React Navigation do routingu
- Redux Toolkit do zarządzania stanem
- Styled Components do stylowania
- Konfiguracja TypeScript
- Właściwa struktura folderów (screens, components, utils, services)
- Konfiguracja ESLint i Prettier"

Dlaczego to działa: Rozpoczęcie od solidnych fundamentów zapobiega długowi technicznemu i zapewnia, że sugestie AI są zgodne ze spójnymi wzorcami w całym rozwoju.

Przepływ pracy rozwoju komponentów

Podejście Cursor

// Użyj trybu Agent Cursor z kontekstem
"@screens @components Utwórz wielokrotnego użytku komponent Card, który:
- Obsługuje motyw ciemny/jasny
- Ma animacje naciśnięcia używając Reanimated
- Akceptuje props title, description i image
- Podąża za tokenami naszego systemu projektowego
- Zawiera właściwe typy TypeScript"

Podejście Claude Code

# Użyj Claude Code z kontekstem projektu
claude --add-dir src/components src/theme

"Zbuduj komponent Card podążając za naszym istniejącym wzorcem Button
ale z obsługą obrazów i efektami naciśnięcia Reanimated"

Implementacja nawigacji

Wzorzec bezpiecznej nawigacji typów

// Poproś AI o wygenerowanie bezpiecznej nawigacji typów
"Utwórz bezpieczną struktur nawigacji typów dla:
- Auth Stack (Login, Register, ForgotPassword)
- Main Tab Navigator (Home, Profile, Settings)
- Modal Stack (EditProfile, Notifications)
Używając React Navigation v6 z TypeScript"

// AI wygeneruje:
export type RootStackParamList = {
  Auth: NavigatorScreenParams<AuthStackParamList>;
  Main: NavigatorScreenParams<MainTabParamList>;
  Modal: NavigatorScreenParams<ModalStackParamList>;
};

export type AuthStackParamList = {
  Login: undefined;
  Register: undefined;
  ForgotPassword: { email?: string };
};
// ... kompletne definicje typów i konfiguracja nawigacji

Wzorce zarządzania stanem

1. Definiuj strukturę stanu

   "Utwórz slice'y Redux dla:
   - Uwierzytelniania użytkownika (login, logout, zarządzanie tokenem)
   - Ustawień aplikacji (motyw, język, powiadomienia)
   - Cache danych z RTK Query
   Podążając za najlepszymi praktykami Redux Toolkit"

2. Generuj integrację API

   "@api Utwórz slice'y RTK Query API dla naszych endpointów backendu:
   - Endpointy /auth/*
   - Endpointy /user/*
   - Endpointy /posts/* z paginacją
   Zawieraj właściwą obsługę błędów i stany ładowania"

3. Połącz z komponentami

   "Aktualizuj HomeScreen aby:
   - Pobierał posty używając postsApi
   - Pokazywał szkielet ładowania
   - Obsługiwał pull-to-refresh
   - Wyświetlał stany błędów
   - Implementował nieskończone przewijanie"

Kod specyficzny dla platformy

Obsługa różnic platform

// Wzorzec dla implementacji specyficznych dla platform
"Utwórz PlatformService, który obsługuje:
- Uwierzytelnianie biometryczne (Touch ID/Face ID na iOS, Fingerprint na Android)
- Konfiguracja powiadomień push
- Konfiguracja deep linking
- Dostęp do systemu plików
Z właściwymi sprawdzeniami platform i fallbackami"

// AI generuje czyste abstrakcje:
export const BiometricService = {
  isAvailable: async () => {
    if (Platform.OS === 'ios') {
      return await TouchID.isSupported();
    } else {
      return await FingerprintScanner.isSensorAvailable();
    }
  },
  // ... reszta implementacji
};

Wzorce rozwoju Flutter

Architektura projektu z AI

Konfiguracja czystej architektury

// Żądaj kompleksowej architektury
"Skonfiguruj projekt Flutter z czystą architekturą:
- Warstwa prezentacji (pages, widgets, controllers)
- Warstwa domeny (entities, use cases, repositories)
- Warstwa danych (models, data sources, repositories impl)
- Moduł podstawowy (errors, utils, constants)
- Wstrzykiwanie zależności z get_it
- Zarządzanie stanem z Riverpod"

Wynik: AI generuje skalowalną, testowalną architekturę, która prawidłowo oddziela zagadnienia.

Wzorce rozwoju widgetów

Widgety bezstanowe

// Generuj widgety wielokrotnego użytku
"Utwórz widget CustomButton, który:
- Obsługuje warianty primary, secondary i danger
- Ma stan ładowania z CircularProgressIndicator
- Obsługuje stan wyłączony
- Używa kolorów naszego motywu
- Ma właściwe efekty splash"

Widgety stanowe

// Złożone widgety stanowe
"Zbuduj widget AnimatedCounter, który:
- Płynnie animuje zmiany liczb
- Obsługuje formatowanie walut
- Ma konfigurowalny czas trwania animacji
- Używa AnimationController właściwie
- Prawidłowo zwalnia zasoby"

Zarządzanie stanem z Riverpod

Wzorzec Riverpod

// Nowoczesne podejście do zarządzania stanem
"Utwórz przepływ uwierzytelniania oparty na Riverpod:
1. AuthState ze stanami user, token i loading
2. AuthNotifier rozszerzający StateNotifier
3. Providery dla login, logout i odświeżania tokenu
4. Auto-odświeżanie tokenu przed wygaśnięciem
5. Persist stan auth z shared_preferences"

// AI generuje kompletną implementację:
@freezed
class AuthState with _$AuthState {
  const factory AuthState({
    User? user,
    String? token,
    @Default(false) bool isLoading,
    String? error,
  }) = _AuthState;
}

class AuthNotifier extends StateNotifier<AuthState> {
  // Kompletna implementacja ze wszystkimi metodami
}

Wzorzec Navigation 2.0

1. Definiuj strukturę tras

   "Implementuj Navigator 2.0 z go_router:
   - Splash → Auth flow → Main app
   - Zagnieżdżona nawigacja w zakładkach
   - Obsługa deep linking
   - Route guards dla uwierzytelniania
   - Właściwa obsługa przycisku wstecz"

2. Generuj route guards

   "Utwórz route guards, które:
   - Sprawdzają stan uwierzytelniania
   - Przekierowują do loginu w razie potrzeby
   - Zachowują deep link po loginie
   - Obsługują dostęp oparty na rolach"

3. Dodaj animacje przejść

   "Dodaj niestandardowe przejścia stron:
   - Slide dla nawigacji push
   - Fade dla przełączania zakładek
   - Scale dla modali
   - Niestandardowe animacje hero"

Wzorce wieloplatformowe

Wspólna logika biznesowa

Strategia udostępniania kodu

// Dla React Native ze wspólnym kodem web
"Utwórz pakiet wspólnych narzędzi, który działa zarówno w React Native, jak i React web:
- Narzędzia formatowania dat
- Funkcje walidacji
- Wrapper klienta API
- Wspólne typy i interfejsy
- Pomocniki logiki biznesowej
Upewnij się, że nie ma importów specyficznych dla platformy"

// Dla Flutter z kanałami platform
"Utwórz PlatformService, który:
- Komunikuje się z natywnym kodem iOS/Android
- Obsługuje kanały metod właściwie
- Ma mockową implementację do testowania
- Zawiera obsługę błędów
- Dokumentuje wszystkie metody platform"

Implementacja systemu projektowego

React Native

// Kompleksowy system projektowy
"Utwórz system projektowy z:
- Theme provider obsługujący tryby ciemny/jasny
- Skala typografii (heading1-6, body, caption)
- Tokeny kolorów (primary, secondary, kolory semantyczne)
- Skala odstępów (xs, sm, md, lg, xl)
- Wspólne komponenty (Button, Input, Card, Modal)
- Presety animacji
Podążając za wytycznymi Material Design 3"

Flutter

// System projektowy Flutter
"Zbuduj system projektowy używając Material 3:
- Niestandardowe ThemeData ze schematami kolorów
- TextTheme z niestandardowymi czcionkami
- Biblioteka widgetów wielokrotnego użytku
- Responsywne breakpointy
- Komponenty adaptujące się do platform
- Obsługa dostępności"

Wzorce optymalizacji wydajności

Wydajność React Native

Monitorowanie wydajności

// Implementuj śledzenie wydajności
"Dodaj monitorowanie wydajności do naszej aplikacji:
1. Skonfiguruj integrację Flipper
2. Dodaj niestandardowe markery wydajności
3. Śledź użycie wątku JS
4. Monitoruj użycie pamięci
5. Identyfikuj i napraw problemy re-render
6. Optymalizuj FlatList z właściwymi props"

// AI dostarcza konkretne implementacje:
const PerformanceMonitor = {
  mark: (name: string) => {
    if (__DEV__) {
      Performance.mark(name);
    }
  },
  measure: (name: string, startMark: string, endMark: string) => {
    if (__DEV__) {
      Performance.measure(name, startMark, endMark);
    }
  }
};

Wydajność Flutter

Optymalizacja Flutter

// Najlepsze praktyki wydajności
"Optymalizuj wydajność naszej aplikacji Flutter:
1. Implementuj konstruktory const wszędzie gdzie możliwe
2. Używaj ListView.builder dla długich list
3. Dodaj RepaintBoundary do kosztownych widgetów
4. Implementuj strategię cache'owania obrazów
5. Minimalizuj wywołania setState
6. Używaj keys właściwie dla drzew widgetów"

// AI generuje zoptymalizowany kod:
class OptimizedListView extends StatelessWidget {
  const OptimizedListView({Key? key}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return ListView.builder(
      itemExtent: 80.0, // Stała wysokość dla wydajności
      cacheExtent: 200.0, // Optymalizacja prebuild
      itemBuilder: (context, index) {
        return RepaintBoundary(
          child: const ListItem(index: index),
        );
      },
    );
  }
}

Wzorce testowania

Automatyczne generowanie testów

Testowanie React Native

// Generuj kompleksowe testy
"@components/Button Wygeneruj testy dla komponentu Button:
- Testy renderowania dla wszystkich wariantów
- Testy obsługi onPress
- Testy stanu wyłączonego
- Testy stanu ładowania
- Testy dostępności
- Testy snapshot"

Testowanie Flutter

// Testy widgetów Flutter
"@lib/widgets/custom_button Wygeneruj testy widgetów:
- Golden tests dla wszystkich stanów
- Testy interakcji tap
- Testy animacji
- Testy adaptacji motywu
- Testy dostępności"

Wzorce wdrożenia

Konfiguracja CI/CD

Automatyczne wdrożenie

# Żądaj konfiguracji CI/CD
"Utwórz workflow GitHub Actions dla:
- Buildów React Native iOS i Android
- Automatycznego testowania na PR
- Podpisywania kodu dla iOS
- Generowania APK/AAB dla Android
- Wdrożenia do TestFlight i Play Store
- Aktualizacji wersji
- Generowania notatek wydania"

AI generuje kompletne pliki workflow z właściwą obsługą sekretów i optymalizacją.

Typowe pułapki i rozwiązania

Utrata stanu nawigacji

Problem: Stan tracony podczas nawigacji Rozwiązanie: “Implementuj persistencję stanu nawigacji używając react-navigation persistence lub RestorationMixin Flutter”

Wycieki pamięci

Problem: Subskrypcje nie są czyszczone Rozwiązanie: “Dodaj wzorce czyszczenia do wszystkich hooków useEffect i metod dispose w StatefulWidgets”

Wolna wydajność list

Problem: Opóźnienia FlatList/ListView Rozwiązanie: “Optymalizuj z getItemLayout, keyExtractor i removeClippedSubviews”

Niespójności platform

Problem: Różne zachowanie na iOS/Android Rozwiązanie: “Utwórz komponenty specyficzne dla platform ze spójnymi API”

Następne kroki

Zaawansowane wzorce mobilne

Gotowy na głębsze zanurzenie? Eksploruj:

• Deep linking: Uniwersalne linki i linki aplikacji
• Powiadomienia push: Integracja FCM i APNs
• Obsługa offline: Persistencja i synchronizacja danych
• Uwierzytelnianie biometryczne: Bezpieczne przepływy uwierzytelniania
• Zakupy in-app: Strategie monetyzacji

Poproś swojego asystenta AI o pomoc w implementacji tych zaawansowanych funkcji ze wzorcami gotowymi do produkcji.

Rozwój mobilny z AI na pierwszym miejscu

Kluczem do udanego rozwoju mobilnego z AI jest dostarczenie jasnego kontekstu o ograniczeniach platform, wymaganiach user experience i względach wydajności. Zawsze określ swoje platformy docelowe i minimalne wersje OS podczas żądania generowania kodu.