DuoBarber Shop to projekt demonstracyjny, czyli strona fikcyjnego barbershopu, na której pokazuję, jak może działać asystent AI na stronie salonu. Za nazwą nie stoi prawdziwa firma, a ceny i godziny są przykładowe. Powstała jednostronicowa wizytówka z zespołem i usługami, a do niej chatbot, który umawia wizyty i odpowiada na pytania klientów.

Kluczowe funkcje

Najważniejszy element to asystent w prawym dolnym rogu, z którym możesz porozmawiać tak jak z recepcją salonu.

• Umawianie wizyty w rozmowie. Asystent pyta po kolei o usługę, barbera, dzień i godzinę, a na koniec pokazuje podsumowanie do potwierdzenia.
• Pilnowanie godzin otwarcia. Nie zapisze nikogo na niedzielę ani na godzinę, w której usługa nie zdążyłaby się skończyć przed zamknięciem.
• Odpowiedzi na pytania o każdej porze. Cennik, czas trwania usług, kto strzyże włosy, a kto brodę, zasady odwoływania wizyt. Klient nie musi dzwonić ani czekać na odpowiedź.
• Przyciski zamiast pisania. Usługę, barbera i termin wybiera się jednym kliknięciem, co na telefonie oszczędza sporo stukania w klawiaturę.
• Uczciwy start rozmowy. Asystent od razu mówi, że jest AI i że to wersja demonstracyjna, a przed rozmową prosi o akceptację zasad z linkiem do polityki prywatności.

Sama strona jest prosta i lekka, bo wszystko mieści się na jednej podstronie.

• Układ jednostronicowy. Kliknięcie w menu przewija do wybranej sekcji bez przeładowania strony.
• Dopasowanie do ekranu. Ten sam kod obsługuje telefon, tablet i komputer, a na telefonie menu chowa się pod ikoną z trzema kreskami.

Technologie

Przy tak małej stronie nie użyłem żadnego gotowego systemu ani frameworka, bo kosztowałby więcej pracy i wagi, niż dałby pożytku. Chatbot działa na osobnej platformie, więc strona nie musi mieć własnego serwera.

• HTML. Szkielet strony. Ustala, co jest nagłówkiem, co listą, a co formularzem.
• CSS i SASS. CSS odpowiada za wygląd, a SASS pozwala trzymać kolory i odstępy w jednym miejscu i zmieniać je jedną poprawką.
• JavaScript. Bez żadnej biblioteki. Obsługuje menu, przewijanie i sprawdzanie formularza.
• Platforma do budowy asystentów AI. Na niej działa chatbot: zna ofertę salonu z bazy wiedzy, prowadzi rozmowę o rezerwacji krok po kroku i ma ustawiony limit, żeby jedna rozmowa nie wymknęła się spod kontroli.
• GitHub Pages. Darmowy hosting stron statycznych. Wgrany kod od razu staje się działającą stroną w internecie.

Efekt

To jeden z moich wcześniejszych projektów i nie udaję, że jest czymś innym. Firma nie istnieje, grafiki są stockowe, a część komponentów pochodzi z kursów, na których się uczyłem. Teraz strona dostała drugie życie jako miejsce, gdzie właściciel salonu może sam sprawdzić, jak w praktyce wygląda rozmowa z asystentem AI, zanim zdecyduje się na takie rozwiązanie u siebie.

W prawdziwym salonie taki asystent przejmuje część telefonów, które odrywają barbera od klienta na fotelu. Ludzie piszą wieczorem i w weekend, kiedy nikt nie odbierze, a asystent odpowiada od razu. Przy okazji uporządkowałem kod strony: poprawiłem strukturę sekcji, etykiety formularza i opisy obrazków dla osób korzystających z czytników ekranu.

Kursy, z których korzystałem przy budowie strony, prowadzi MMC School i polecam je każdemu, kto chce nauczyć się robić strony od podstaw:
mmcschool.pl

Zobacz stronę na żywo i porozmawiaj z asystentem:
rado9206.github.io/barberduoshop