Case Study: Interaktywna Baza Win

Case Study: Interaktywna Baza Win

1. Wprowadzenie

Celem projektu było stworzenie interfejsu webowego do przeglądania, filtrowania i sortowania bazy danych win. Projekt rozpoczął się od statycznego pliku HTML zawierającego dane o winach włoskich oraz osobnego katalogu PDF z szerszą ofertą. Kluczowym założeniem była dynamiczna interakcja użytkownika z danymi i możliwość eksportu wyników.

2. Wyzwanie

Pierwotny plik HTML (index.txt) zawierał listę win włoskich i podstawowe funkcje filtrowania. Głównym wyzwaniem było:

• Integracja Danych: Połączenie danych z istniejącego pliku HTML z nowymi danymi o winach z Francji, Hiszpanii i Portugalii, zawartymi w katalogu PDF (katalogDetaliczny.pdf).
• Rozbudowa Funkcjonalności: Dodanie nowych kryteriów filtrowania (kraj) i sortowania.
• Dynamiczny Interfejs: Zapewnienie płynnego działania filtrów i sortowania bez przeładowywania strony oraz dynamiczne aktualizowanie widoku (lista win, licznik wyników).
• Eksport Danych: Implementacja mechanizmu eksportu przefiltrowanych wyników do pliku zewnętrznego (początkowo PDF, ostatecznie TXT).
• Iteracyjne Wprowadzanie Poprawek: Reagowanie na bieżące prośby użytkownika dotyczące zmian w funkcjonalności i wyglądzie.

3. Zastosowane Podejście i Techniki

Projekt został zrealizowany jako jednostronicowa aplikacja webowa (Single Page Application – SPA) przy użyciu następujących technik:

• Technologie Podstawowe:
  • HTML: Struktura strony.
  • CSS (Tailwind CSS): Stylizacja interfejsu użytkownika, zapewniająca nowoczesny wygląd i responsywność.
  • JavaScript (Vanilla JS): Logika aplikacji, obsługa zdarzeń, manipulacja DOM, filtrowanie, sortowanie i eksport danych.
• Przechowywanie Danych: Wszystkie dane o winach (połączone z HTML i PDF) zostały zintegrowane i przechowywane w klienckiej tablicy obiektów JavaScript (wines). Każdy obiekt reprezentował jedno wino i zawierał kluczowe atrybuty (nazwa, kraj, producent, region, typ, słodycz, opis, cena itp.). Dodano pole country dla ułatwienia filtrowania.
• Interfejs Użytkownika (UI):
  • Filtry zrealizowano za pomocą elementów <select> (dla kraju, regionu, typu, słodyczy, producenta) oraz <input type="text"> (dla szczepu), co umożliwiło intuicyjny wybór kryteriów.
  • Lista win była dynamicznie generowana i renderowana w kontenerze <section id="wine-list"> za pomocą manipulacji DOM w JavaScript. Każde wino przedstawiono jako „kartę” z kluczowymi informacjami.
  • Dodano wskaźniki kraju (flagi emoji) na kartach win dla szybszej identyfikacji.
  • Wprowadzono licznik (<p id="wine-count">) pokazujący liczbę win pasujących do aktywnych filtrów, aktualizowany po każdej zmianie kryteriów.
  • Zastosowano stylizację Tailwind CSS dla spójnego i estetycznego wyglądu, w tym responsywności.

• Filtrowanie i Sortowanie:
  • Logika filtrowania została zaimplementowana w funkcji applyFiltersAndSort(). Wykorzystano metodę Array.prototype.filter() do iteracji po tablicy wines i sprawdzania zgodności każdego wina z aktywnymi wartościami filtrów.
  • Obsłużono filtrowanie po wielu kryteriach jednocześnie (AND).
  • Logika sortowania również znalazła się w applyFiltersAndSort(), używając metody Array.prototype.sort() z funkcjami porównującymi dla różnych kryteriów (nazwa, cena, kraj) i kierunków (rosnąco/malejąco). Zastosowano localeCompare dla poprawnego sortowania polskich nazw.
  • Obsługa zdarzeń (change, input) na elementach filtrów i sortowania wywoływała funkcję applyFiltersAndSort(), co zapewniało natychmiastową aktualizację wyników.
• Iteracyjne Poprawki (Reakcja na Prośby Użytkownika):
  • Rozszerzenie bazy: Dodano wina z Francji, Hiszpanii i Portugalii do tablicy wines.
  • Nowy filtr: Dodano filtr „Kraj” i zaktualizowano logikę filtrowania.
  • Licznik wyników: Dodano element HTML i logikę JS do wyświetlania liczby znalezionych win.
  • Aktualizacja stopki: Wprowadzono informacje o wersji, dacie i realizacji zgodnie z życzeniem.
  • Próba eksportu PDF: Zaimplementowano eksport przy użyciu biblioteki jsPDF. Napotkano problemy z poprawnym wyświetlaniem polskich znaków i spójnością formatowania w generowanym pliku.
  • Zmiana na eksport TXT: W odpowiedzi na problemy z PDF i prośbę użytkownika, funkcjonalność eksportu została zmieniona na generowanie pliku .txt. Przycisk został odpowiednio zmieniony („Eksportuj wynik”).
  • Kontekst w eksporcie TXT: Dodano linię opisującą aktywne filtry na początku eksportowanego pliku tekstowego.
• Eksport Danych (TXT):
  • Funkcja exportToTxt() pobierała aktualnie przefiltrowane wina (currentFilteredWines).
  • Generowała sformatowany ciąg tekstowy zawierający nagłówek, opis aktywnych filtrów, listę win z ich szczegółami oraz stopkę.
  • Wykorzystano Blob API (new Blob(...)) i URL.createObjectURL() do stworzenia pliku po stronie klienta.
  • Utworzono tymczasowy element <a> z atrybutem download, aby zainicjować pobieranie pliku przez przeglądarkę.

4. Wyniki

Finalnym produktem jest w pełni funkcjonalna, jednostronicowa aplikacja webowa, która:

• Wyświetla obszerną bazę win z Włoch, Francji, Hiszpanii i Portugalii.
• Umożliwia użytkownikom dynamiczne filtrowanie win według kraju, regionu, typu, słodyczy, producenta i szczepu.
• Pozwala na sortowanie wyników według nazwy, ceny lub kraju.
• Wyświetla liczbę win pasujących do aktualnych filtrów.
• Umożliwia eksport przefiltrowanej listy win wraz z kontekstem filtrów do pliku tekstowego .txt.
• Posiada przejrzysty i responsywny interfejs użytkownika.

5. Wnioski i Dalszy Rozwój

Projekt pokazał skuteczność iteracyjnego podejścia do tworzenia oprogramowania, gdzie funkcjonalność była rozbudowywana i korygowana w odpowiedzi na bieżące potrzeby użytkownika. Kluczowe wnioski:

• Struktura Danych: Posiadanie dobrze ustrukturyzowanych danych (tablica obiektów JS) było fundamentalne dla łatwej implementacji filtrowania i sortowania.
• Client-Side Rendering: Wykorzystanie Vanilla JS do manipulacji DOM i renderowania danych po stronie klienta sprawdziło się w przypadku tej skali aplikacji, zapewniając szybką interakcję bez przeładowywania strony.
• Obsługa Ograniczeń: Problemy z generowaniem PDF po stronie klienta (zwłaszcza z niestandardowymi znakami i złożonym formatowaniem) podkreślają ograniczenia tej techniki. Przejście na eksport TXT było pragmatycznym rozwiązaniem.

Potencjalne kierunki dalszego rozwoju:

• Dynamiczne ładowanie opcji regionu w zależności od wybranego kraju.
• Implementacja paginacji dla obsługi bardzo dużych zbiorów danych.
• Ulepszenie interfejsu (np. bardziej zaawansowane komponenty filtrów).
• Wprowadzenie backendu i bazy danych dla lepszej skalowalności i zarządzania danymi.
• Ponowne podejście do eksportu PDF z wykorzystaniem bibliotek wspierających osadzanie czcionek (jeśli wymagane).

Wykonano za pomocą: Gemini 2.5 Pro