Zadanie Laboratoryjne (Termin 2)

Temat: Aktywna Galeria Podróżnika (TravelTracker)

Cel zadania: Zaprojektowanie i implementacja wieloekranowej aplikacji mobilnej służącej do rejestrowania punktów podróży, pobierania danych z zewnętrznego API, robienia zdjęć oraz monitorowania potrząśnięć urządzenia w celu wyczyszczenia lokalnego stanu.

Wymagania Funkcjonalne i Architektura Aplikacji

1. Architektura Stanu i Kontekst (Context API + useState)

• Utwórz TravelContext wraz z TravelProvider, który owija całą aplikację.
• Kontekst ma zarządzać globalnym stanem aplikacji:
• places: lista obiektów reprezentujących odwiedzone miejsca (każde miejsce ma mieć: id, title, description, photoUri, timestamp).
• theme: motyw aplikacji ('light' | 'dark') wraz z funkcją dynamicznej zmiany motywu (toggleTheme).
• Wszystkie ekrany aplikacji muszą dynamicznie dostosowywać kolory tła i tekstów do aktualnego stanu theme z kontekstu.

2. Nawigacja (React Navigation - Native Stack)

Skonfiguruj NavigationContainer oraz stos ekranów (Native Stack) zawierający trzy główne widoki:

• Ekran Główny (HomeScreen): Wyświetla listę dodanych miejsc podróży (FlatList) pobieraną z globalnego kontekstu, przycisk zmiany motywu aplikacji oraz dwa przyciski nawigacyjne prowadzące do pozostałych ekranów.
• Ekran Odkryć (ExplorationScreen): Odpowiada za pobieranie zewnętrznych danych przez Axios.
• Ekran Aparatu (CaptureScreen): Służy do rejestrowania nowego punktu podróży przy użyciu aparatu.

Szczegółowy Opis Ekranów

Ekran 1: HomeScreen (Zarządzanie Stanem i Listą)

• Wyświetl nagłówek z aktualną liczbą zapisanych miejsc (wykorzystaj prosty licznik bazujący na długości tablicy z kontekstu).
• Lista FlatList powinna renderować dedykowane komponenty wizytówek miejsc. Każdy element listy powinien wyświetlać miniaturkę zdjęcia (<Image>), tytuł oraz datę dodania.
• Dodaj przycisk, który wywołuje funkcję toggleTheme() z kontekstu, natychmiastowo zmieniając paletę barw interfejsu.

Ekran 2: ExplorationScreen (Asynchroniczny Axios)

• Wykorzystując bibliotekę Axios, pobierz listę przykładowych inspiracji podróżniczych z publicznego API: https://jsonplaceholder.typicode.com/users (w kontekście zadania potraktuj ich jako "Przewodników/Inspiratorów").
• Aplikacja musi prawidłowo obsługiwać i renderować 3 stany asynchroniczne:

1. Loading: Komponent <ActivityIndicator> podczas pobierania danych.
2. Success: Wyświetlenie pobranych danych (np. imię i e-mail inspiratora) na czytelnej liście.
3. Error: Komponent <Text> z komunikatem o błędzie, jeśli zapytanie się nie powiedzie.

Ekran 3: CaptureScreen (Aparat i Sensory sprzętowe)

• Uprawnienia: Przy wejściu na ekran sprawdź i obsłuż uprawnienia do aparatu przy użyciu useCameraPermissions(). Jeśli brak zgody, wyświetl komunikat i przycisk umożliwiający jej przyznanie.
• Obsługa Aparatu: Zaimplementuj komponent <CameraView> oraz referencję cameraRef. Po naciśnięciu przycisku "Zrób zdjęcie", wykonaj je asynchronicznie (takePictureAsync) i zapisz jego lokalny URI do stanu useState.
• Zapis punktu: Dodaj pole tekstowe (<TextInput>) na tytuł miejsca. Po zatwierdzeniu, dodaj obiekt do globalnego stanu places w kontekście (wraz z zapisanym URI zdjęcia) i cofnij użytkownika do HomeScreen za pomocą navigation.goBack().
• Integracja z Sensorem (Akcelerometr): * Zasubskrybuj dane z akcelerometru (Accelerometer.addListener) z interwałem odświeżania 100ms.
• Zaimplementuj logikę wykrywania potrząśnięcia
• Efekt potrząśnięcia: Wykrycie gwałtownego ruchu na tym ekranie ma automatycznie resetować aktualnie zrobione zdjęcie w stanie komponentu (czyszczenie podglądu przed zapisem).