Wzorce rozwoju Expo

Superchargeruj swój przepływ pracy z Expo używając Cursor i Claude Code. Te wzorce obejmują managed workflow, EAS Build, Expo Router i unikalne zalety budowania aplikacji React Native z kompleksowym zestawem narzędzi Expo.

Szybka konfiguracja projektów Expo

Inicjalizacja aplikacji Expo z AI

Cursor

1. Otwórz Cursor w folderze projektów
2. Aktywuj tryb Agent (Cmd/Ctrl + I)
3. Prompt: “Stwórz nową aplikację Expo z:
   • Expo Router do nawigacji
   • Konfiguracją TypeScript
   • NativeWind do stylowania
   • Expo SDK 50+
   • Konfiguracją EAS Build”
4. Agent obsłuży cały proces konfiguracji

Claude Code

1. Otwórz terminal w katalogu projektu
2. Uruchom: claude "Zainicjalizuj Expo managed workflow z szablonem autoryzacji"
3. Claude ustawi strukturę projektu
4. Postępuj zgodnie z wygenerowanymi instrukcjami konfiguracji

Wzorce Expo Router

Routing oparty na plikach

// Cursor prompt dla struktury aplikacji:
"Ustaw Expo Router z:
- Nawigacją zakładek z (tabs) layout
- Nawigacją stack w każdej zakładce
- Trasami modalnymi
- Dynamicznymi trasami z [id]
- Chronionymi trasami z kontrolą autoryzacji
- Konfiguracją deep linking"

// Wygenerowana struktura:
app/
  (tabs)/
    _layout.tsx
    index.tsx
    profile.tsx
    settings.tsx
  (auth)/
    login.tsx
    register.tsx
  post/
    [id].tsx
  modal.tsx
  _layout.tsx

Wzorce nawigacji

Nawigacja zakładek

// Cursor Agent prompt:
"Stwórz layout zakładek z:
- Komponentem niestandardowego paska zakładek
- Animacjami ikon
- Powiadomieniami odznaki
- Stylowaniem specyficznym dla platformy"

Nawigacja stosu

// Prompt: "Zaimplementuj nawigację stosu z:
// - Niestandardowym nagłówkiem
// - Obsługą gestów
// - Przejściami ekranów
// - Nadpisaniem przycisku wstecz"

Stylowanie z NativeWind

Konfiguracja i ustawienia

// Kompleksowy prompt stylowania:
"Skonfiguruj NativeWind z:
1. Konfiguracją Tailwind dla mobile
2. Niestandardowymi kolorami motywu
3. Wsparciem dark mode
4. Klasami specyficznymi dla platformy
5. Responsiwnymi punktami przerwania"

Stylowanie komponentów

Stylowane komponenty

// Prompt: "Stwórz stylowany przycisk z:
// - Wieloma wariantami
// - Animacjami naciśnięcia
// - Stanami ładowania
// - Klasami NativeWind"

System motywów

// Prompt: "Zaimplementuj motyw z:
// - Schematami kolorów
// - Skalą typografii
// - System rozstawień
// - Wariantami komponentów"

Integracja Expo SDK

Kamera i media

// Prompt implementacji kamery:
"Zaimplementuj funkcję kamery używając Expo Camera z:
- Przechwytywaniem zdjęć i wideo
- Przełączaniem kamery
- Kontrolą lampy błyskowej
- Zapisywaniem do biblioteki mediów
- Obsługą uprawnień
- Stanami błędów"

Usługi lokalizacji

1. Konfiguracja: “Skonfiguruj expo-location z uprawnieniami”
2. Śledzenie: “Zaimplementuj śledzenie lokalizacji w czasie rzeczywistym”
3. Geofencing: “Dodaj monitorowanie regionu”
4. Tło: “Ustaw zadania lokalizacji w tle”

Powiadomienia push

// Prompt konfiguracji powiadomień:
"Skonfiguruj powiadomienia push z:
- Konfiguracją Expo Notifications
- Konfiguracją FCM/APNs
- Powiadomieniami lokalnymi
- Handlerami powiadomień
- Deep linking z powiadomień
- Śledzeniem analitycznym"

Wskazówka

Implementując funkcje Expo SDK, zawsze określ wersję SDK w swoich promptach, aby zapewnić kompatybilność z najnowszymi API.

Zarządzanie stanem

Zustand z Expo

// Prompt zarządzania stanem:
"Ustaw Zustand dla aplikacji Expo z:
- Trwałym przechowywaniem używając SecureStore
- Stanem autoryzacji
- Ustawieniami aplikacji
- Kolejką danych offline
- Integracją DevTools"

Integracja React Query

// Zarządzanie stanem API:
"Skonfiguruj React Query z:
- Trwałością Expo SQLite
- Wsparciem offline
- Odświeżaniem w tle
- Optymistycznymi aktualizacjami
- Granicami błędów"

EAS Build & Deploy

Konfiguracja budowania

Build rozwojowy

// Cursor prompt: "Skonfiguruj EAS Build dla rozwoju z:
// - Buildem dla symulatora iOS
// - Buildem dla emulatora Android
// - Klientem rozwojowym
// - Zmiennymi środowiskowymi"

Build produkcyjny

// Prompt: "Ustaw buildy produkcyjne z:
// - Podpisywaniem aplikacji
// - Konfiguracją store
// - Aktualizacjami OTA
// - Wersjonowaniem buildów"

Ciągłe wdrażanie

// Prompt konfiguracji CI/CD:
"Stwórz workflow GitHub Actions dla:
- Zautomatyzowanych buildów EAS
- Buildów podglądu na PR
- Wdrożenia produkcyjnego
- Triggerów aktualizacji OTA
- Zarządzania wersjami"

Wzorce testowania

Testowanie komponentów

// Prompt generowania testów:
"Napisz testy dla komponentów Expo używając:
- Jest i React Native Testing Library
- Mockowania modułów Expo
- Testowania nawigacji
- Testowania gestów
- Testów snapshot"

Testowanie E2E z Maestro

1. Konfiguracja: “Skonfiguruj Maestro dla aplikacji Expo”
2. Pisanie przepływów: “Stwórz test E2E dla onboardingu”
3. Integracja CI: “Dodaj testy Maestro do EAS Build”

Optymalizacja wydajności

Optymalizacje specyficzne dla Expo

Wzorce wydajności

AI może zaimplementować:

• Optymalizację zasobów
• Redukcję rozmiaru bundle
• Optymalizację splash screen
• Zarządzanie pamięcią
• Optymalizacje FlatList

Monitorowanie i analityka

// Prompt konfiguracji analityki:
"Zaimplementuj analitykę z:
- Expo Analytics
- Śledzeniem niestandardowych zdarzeń
- Monitorowaniem wydajności
- Raportowaniem crashy
- Właściwościami użytkowników"

Wspólne wzorce Expo

Przepływ autoryzacji

// Kompleksowy prompt autoryzacji:
"Zaimplementuj autoryzację używając:
- Expo AuthSession
- Dostawców społecznościowych (Google, Apple, Facebook)
- Bezpiecznego przechowywania tokenów
- Autoryzacji biometrycznej
- Zarządzania sesją"

Zarządzanie plikami

// Prompt obsługi plików:
"Stwórz system zarządzania plikami z:
- Document picker
- Image picker z edycją
- Upload plików z postępem
- Zarządzaniem pobierania
- Kontrolą cache"

Architektura offline-first

1. Lokalna baza danych: “Ustaw Expo SQLite ze schematem”
2. Logika synchronizacji: “Zaimplementuj synchronizację danych”
3. Rozwiązanie konfliktów: “Obsłuż konflikty merge”
4. Zarządzanie kolejką: “Stwórz kolejkę akcji offline”

Zaawansowane wzorce Expo Router

Trasy dynamiczne

// Prompt zaawansowanego routingu:
"Zaimplementuj routing dynamiczny z:
- Trasami catch-all
- Opcjonalnymi parametrami
- Grupami tras
- Trasami layout
- Trasami API"

Ochrona tras

// Implementacja auth guard:
"Stwórz ochronę tras z:
- Kontrolami autoryzacji
- Dostępem opartym na rolach
- Logiką przekierowania
- Stanami ładowania
- Zachowaniem deep link"

Rozwój modułów natywnych

Niestandardowe moduły Expo

// Prompt tworzenia modułu:
"Stwórz niestandardowy moduł Expo dla:
- Funkcjonalności natywnej spoza SDK
- Implementacji iOS i Android
- Definicji TypeScript
- Przykładowej aplikacji
- Dokumentacji"

Uwaga

Tworząc niestandardowe moduły natywne, będziesz musiał używać development builds zamiast Expo Go. Upewnij się, że określisz to w swoich promptach AI.

Przepływy debugowania

Narzędzia Expo Dev

// Konfiguracja debugowania:
"Skonfiguruj środowisko debugowania z:
- React DevTools
- Expo Dev Tools
- Monitorem wydajności
- Inspektorem sieci
- Redux DevTools"

Obsługa błędów

Kompleksowa strategia błędów

Zaimplementuj z AI:

• Granice błędów
• Integrację Sentry
• Formularze opinii użytkowników
• Mechanizmy odzyskiwania
• Zbieranie informacji debug

Najlepsze praktyki z AI

Efektywne prompty Expo

// Strukturyzuj prompty tak:
"Stwórz [funkcję] dla Expo używając:
- Wersja SDK: [wersja]
- Platformy: [iOS/Android/Web]
- Kluczowe wymagania: [lista]
- Potrzebne moduły Expo: [lista]
- Uwzględnij obsługę błędów i stany ładowania"

Uwagi specyficzne dla Expo

Kompatybilność SDK

Zawsze wspominaj wersję SDK i wymagane moduły Expo

Managed vs Bare

Określ typ workflow dla dokładnych implementacji

Różnice platform

Poproś o obsługę specyficzną dla platform gdy potrzeba

Wydajność

Proś o rozwiązania zoptymalizowane dla Expo

Zaawansowane wzorce

Wsparcie Web

// Prompt kompatybilności web:
"Dodaj wsparcie web do aplikacji Expo z:
- Responsywnym designem
- Optymalizacją SEO
- Konfiguracją PWA
- Komponentami specyficznymi dla platformy
- Adaptacją nawigacji"

Konfiguracja Monorepo

// Konfiguracja monorepo:
"Ustaw Expo w monorepo z:
- Wspólnymi pakietami
- Wieloma aplikacjami
- Wspólnymi komponentami
- Konfiguracją buildowania
- Konfiguracją workspace"

Wzorce migracji

Z React Native CLI

1. Analiza: “Przeskanuj istniejący projekt RN pod kątem kompatybilności”
2. Planowanie: “Stwórz strategię migracji”
3. Migracja: “Konwertuj do Expo managed workflow”
4. Testowanie: “Zweryfikuj, że wszystkie funkcje działają”

Następne kroki

• Eksploruj wzorce React Native dla bare workflow
• Ucz się integracji Backend dla rozwoju API
• Opanuj strategie testowania dla zapewnienia jakości