Jak zbudowałem Gabito.eu od zera – integracja AI, wielojęzyczność i dostępność

Dlaczego porzuciłem WordPress i poszedłem w autorski kod?

W mojej historii z WordPressem – od pierwszej strony Shen-ti.pl/poczytaj po bardziej złożone wdrożenia – wielokrotnie przekonałem się, że platforma ta świetnie sprawdza się przy prostych witrynach, ale przy integracji z zewnętrznymi systemami zaczyna uwierać. Konflikty wtyczek, narastająca złożoność i spadek wydajności towarzyszyły mi przy każdym większym projekcie. Dlatego przy gabito.eu postawiłem na model: samodzielny frontend napisany w HTML, CSS i JavaScript (SPA), który komunikuje się bezpośrednio z API systemu salonowego.

To podejście nie jest całkiem nowe – już wcześniej testowałem hybrydy, na przykład w realizacji Familia Czeladź, gdzie lekka strona SPA pobierała treści z WordPressa. Ale tutaj udało mi się całkowicie odciąć od CMS-a: wszystkie dane (cennik, opisy, tłumaczenia) pochodzą z systemu zarządzania salonem. Dzięki temu uniknąłem dublowania treści i zyskałem gwarancję, że informacje na stronie są zawsze aktualne.

Architektura: SPA + API – jak to działa?

Strona gabito.eu to wizytówka systemu s.gabito.eu. Na pierwszy rzut oka wygląda jak klasyczna strona firmowa, ale pod maską pracuje mechanizm pobierania danych z API. Przykładowo:

• Cennik – wyświetlane na stronie pakiety i ceny są pobierane w czasie rzeczywistym z bazy systemowej. Jeśli zmieniam stawkę w panelu administracyjnym, natychmiast odzwierciedla się ona na witrynie.
• Tłumaczenia – wszystkie etykiety, przyciski i opisy pochodzą z centralnego słownika systemu. Dzięki temu strona może być wyświetlana w wielu językach bez ręcznego zarządzania plikami .po/.mo.

Frontend to praktycznie pojedynczy plik HTML z minimalną ilością JavaScriptu (vanilla JS, bez frameworków). Wszystko renderuje się po stronie klienta na podstawie odpowiedzi z API. To daje niesamowitą szybkość – pierwsze pomalowanie strony jest praktycznie natychmiastowe.

Z mojej praktyki: przy podobnych integracjach klienci często skarżą się, że „strona zaciąga dane z zewnątrz i to spowalnia”. Rozwiązaniem jest agresywne cachowanie po stronie serwera oraz wykorzystanie Service Workerów, co wdrożyłem również tutaj.

AI, które tłumaczy semantycznie, a nie dosłownie

Prawdziwą perełką gabito.eu jest mechanizm wielojęzyczności. Zamiast tradycyjnych, statycznych tłumaczeń, postawiłem na modele językowe (LLM), które dokonują przekładu semantycznego. Oznacza to, że system nie tłumaczy słowo w słowo, ale rozumie kontekst i przekazuje sens wypowiedzi w języku docelowym.

Przykład? Frazę „system zarządzania salonem” w języku niemieckim można oddać jako „Salonverwaltungssystem”, ale kontekstowo lepiej brzmi „System zur Salonverwaltung”. Model AI analizuje całe zdanie i dobiera naturalne odpowiedniki.

Wdrożenie oparłem o autorskie workflow z agentami AI, podobne do tych omawianych w szkoleniu LLM w praktyce: prompt engineering, RAG i agenty. Każde żądanie tłumaczenia przechodzi przez potok: ekstrakcja kluczy → tłumaczenie z zachowaniem sensu → walidacja poprawności → cache'owanie. Dzięki temu strona ładuje się szybko nawet przy pierwszym uruchomieniu w nowym języku.

Information Gain: W topowych poradnikach o tłumaczeniach mówi się zwykle o pluginach WordPress, a rzadko o semantic AI. Tymczasem od 2025 roku Google coraz lepiej rozumie wielojęzyczne strony – wdrożenie tłumaczeń semantycznych może poprawić indeksację i CTR w wynikach wyszukiwania.

Dostępność – nie tylko dlatego, że wymaga tego prawo

Od samego początku zależało mi, aby strona była przyjazna dla osób z niepełnosprawnościami. Wbudowałem dwa podstawowe mechanizmy:

• Powiększanie czcionki – użytkownik może płynnie zwiększać rozmiar tekstu bez utraty układu.
• Zmiana kontrastu – przełącznik trybu wysokiego kontrastu pomaga osobom słabowidzącym.

Te funkcje to nie wtyczki – napisałem je samodzielnie, w kilkunastu linijkach JavaScriptu, co gwarantuje zero konfliktów i niskie obciążenie. Pamiętajmy, że od 2025 roku Google kładzie silny nacisk na dostępność (Core Web Vitals, sygnały rankingowe UX). W moich analizach, strony z podstawowymi ulepszeniami dostępności zauważalnie częściej pojawiają się w tzw. snippetach.

Jeśli interesuje Cię szersze zastosowanie AI w obsłudze użytkownika, polecam zajrzeć do artykułu o Inteligentnych Asystentach AI – tam pokazuję, jak chatboty i asystenci głosowi mogą jeszcze bardziej zniwelować bariery.

Dokumentacja techniczna – bo strona to nie tylko wizytówka

Gabito.eu pełni też funkcję hubu deweloperskiego. W zakładce „Dla programistów” umieściłem szczegółową dokumentację API systemu zarządzania salonem. Dzięki temu niezależni twórcy mogą budować własne integracje, widgety czy strony oparte o dane z systemu.

To było dla mnie nowe wyzwanie: jak w przejrzysty sposób opisać endpointy, parametry i przykładowe odpowiedzi, nie zanudzając odbiorcy. Postawiłem na czytelne listingi JSON, podświetlanie składni i interaktywne przykłady – wszystko napisane ręcznie, bez generatorów. Efekt? Już w pierwszym miesiącu od publikacji otrzymałem kilka zapytań od firm chcących zintegrować swoje strony z Gabito – to najlepsza walidacja.

Wyzwania i czego się nauczyłem

1. Bezpieczeństwo API – udostępnienie dokumentacji publicznie wymagało solidnego zabezpieczenia endpointów. Wprowadziłem autoryzację opartą o tokeny JWT oraz limitowanie zapytań (rate limiting). Błąd, który popełniłem na początku: nie cachowałem odpowiedzi dla niezalogowanych użytkowników – dopiero po tygodniu zauważyłem wzrost obciążenia serwera. Szybka lekcja: każdy publiczny zasób musi być cache'owany.

2. SEO dla SPA – rendering po stronie klienta nie jest przyjazny botom. Rozwiązałem to dynamicznym pre-renderingiem po stronie serwera dla Googlebota (korzystam z Puppeteer). Dodatkowo wdrożyłem dane strukturalne JSON-LD dla każdej podstrony – cennika, funkcjonalności, dokumentacji. Dzięki temu indeksacja ruszyła z miejsca, a fragmenty z opisami (rich results) pojawiły się po 3 tygodniach.

3. Testy dostępności – samodzielnie przetestowałem stronę czytnikiem NVDA i okazało się, że przełącznik kontrastu nie ogłasza zmiany stanu. Poprawiłem to dodając atrybuty ARIA. Warto zawsze testować z prawdziwymi użytkownikami lub przynajmniej narzędziami symulującymi niepełnosprawność.

Podsumowanie: kiedy warto pisać od zera?

Zbudowanie gabito.eu od podstaw zajęło mi nieco więcej czasu niż postawienie kolejnej instancji WordPressa, ale zyskałem:

• Pełną kontrolę nad każdym aspektem wydajnościowym,
• Natywną integrację z systemem bez wtyczek,
• Lekkość – strona ładuje się w mniej niż 1 sekundę (First Contentful Paint),
• Unikalne funkcje – tłumaczenia semantyczne i dokumentacja deweloperska.

Jeśli prowadzisz serwis silnie zintegrowany z własnym backendem, rozważ podobną ścieżkę. Więcej o narzędziach, które ułatwiają taką pracę, znajdziesz w sekcji Praktyka Content AI – zapraszam do testowania.