Zadanie 5: Interaktywna Książka Telefoniczna

Wstęp

Każda aplikacja, od społecznościowej po bankową, opiera się na zarządzaniu danymi użytkowników. Książka telefoniczna to klasyczny przykład, który pozwala przećwiczyć fundamenty tworzenia oprogramowania: operacje CRUD (Create, Read, Update, Delete), relacje między danymi oraz obsługę mediów (zdjęcia). To nie tylko lista nazwisk – to poligon doświadczalny dla dobrego UX i struktury danych.

Cel zadania

Zaprojektowanie i wdrożenie aplikacji typu "Contact Manager", obsługującej relacje (Grupy kontaktów), walidację danych oraz przesyłanie plików (zdjęcia profilowe).

Wymagania techniczne

Stack Technologiczny: Czysty HTML, CSS i JavaScript (Vanilla JS). Żadnych frameworków ani backendu.
Przechowywanie Danych: Przeglądarkowy localStorage (jako string JSON).
Model Danych: Tablica obiektów w pamięci przeglądarki.
Interfejs: Jedna strona (Single Page Application - symulowana) lub dynamiczne podmienianie treści.
Interfejs: Przejrzysta lista z wyszukiwarką, formularz edycji/dodawania, widok szczegółów.
Funkcje:
- Wyszukiwanie "live" (filtrowanie w czasie rzeczywistym).
- Walidacja formatu email i numeru telefonu.
- Upload i wyświetlanie awatara kontaktu.
- Responsive Web Design (RWD) – aplikacja musi działać na telefonie.

Kroki do wykonania

1. Struktura Danych (State)

Będziesz przechowywać dane w localStorage pod kluczem np. phonebook_data. Struktura powinna wyglądać tak:

const initialData = {
    groups: [
        { id: 1, name: "Rodzina", color: "#e74c3c" },
        { id: 2, name: "Praca", color: "#3498db" }
    ],
    contacts: [
        // id: unikalne ID (np. timestamp lub random)
        // avatar: Base64 string zdjęcia
    ]
};

[!TIP] Stwórz klasę lub obiekt StorageManager, który będzie miał metody save(), load(), addContact(contact), removeContact(id). Odseparuj logikę zapisu od logiki wyświetlania (DOM)!

2. Obsługa Zdjęć (Base64)

W czystym JS bez backendu nie możemy zapisać pliku na dysku serwera. Musimy skonwertować zdjęcie na ciąg znaków (Base64), aby zapisać je w tekstowym localStorage.

Użyj FileReader:

const reader = new FileReader();
reader.onload = function(e) {
    const base64String = e.target.result;
    // Zapisz base64String w obiekcie kontaktu
};
reader.readAsDataURL(fileInput.files[0]);

[!CAUTION] localStorage ma limit (zazwyczaj ok. 5MB). Kompresuj zdjęcia (np. na canvas) lub ostrzegaj użytkownika przed wrzucaniem dużych plików!

3. Modułowość kodu (ES6 Modules)

Nie pisz wszystkiego w jednym pliku script.js. Podziel kod na moduły (pamiętaj o <script type="module"> w HTML):

store.js – zarządzanie danymi (state, localStorage).
dom.js – funkcje renderujące HTML (np. createContactRow(contact)).
app.js – główna logika, event listenery.

4. Frontend - Lista i Wyszukiwanie

Stwórz widok główny aplikacji.

W lewej kolumnie (desktop) lub na górze (mobile): Lista grup do filtrowania.
Na górze: Pasek wyszukiwania. Wpisanie frazy powinno od razu filtrować listę (JavaScript keyup event).
Lista kontaktów: Wyświetl miniaturkę (avatar), imię, nazwisko i przycisk akcji (Edytuj/Usuń).

5. Formularz Kontaktu (Dodawanie/Edycja)

To najtrudniejszy element interfejsu.

Zadbaj o walidację (HTML5 type="email", pattern dla telefonu).
Podgląd zdjęcia przed wysłaniem (JavaScript FileReader).
Obsługa błędów (np. "Ten numer telefonu już istnieje").

[!TIP] Użyj placeholder i label, aby formularz był czytelny. W przypadku numeru telefonu warto dodać maskę wprowadzania (np. automatyczne spacje: XXX XXX XXX).

Zadanie dla chętnych

Stwórz funkcję Eksport do vCard. Dodaj przycisk "Pobierz wizytówkę", który wygeneruje plik tekstowy .vcf zgodny ze standardem vCard 3.0 lub 4.0. Pozwoli to na zaimportowanie kontaktu bezpośrednio do telefonu lub Outlooka. Wymaga to odpowiedniego sformatowania tekstu, np.:

BEGIN:VCARD
VERSION:3.0
FN:Jan Kowalski
TEL;TYPE=CELL:123456789
EMAIL:[email protected]
END:VCARD

Aplikacja Frontend: Książka Telefoniczna (LocalStorage)