Naqua App

Idea

Aplikacja przyśpiesza proces rezerwacji produktów przez gabinety beauty oraz ułatwia bezpośredni kontakt z gabinetami. Dzięki niej klienci mogą w prosty sposób znaleźć i zamówić interesujące ich produkty, a w razie potrzeby skontaktować się z biurem obsługi za pomocą czatu na żywo.

Problemy do rozwiązania

Nasi klienci zamawiają dużo i często. Wiedzą czego dokładnie szukają. Dotychczasowy proces był powolny i nieefektywny, ponieważ realizowany był telefonicznie i mailowo. Aplikacja rozwiązuje ten problem minimalizując czas rezerwacji produktów do minimum jednocześnie usprawniając komunikacje z biurem obsługi klienta.

Wyzwanie 1 - czat na żywo

Projekt rozpocząłem od analizy wymagań oraz zaplanowania zależności w całym systemie.

Jednym z nich okazał się czat na żywo z klientami. Pomysł był prosty - dać użytkownikowi poczucie korzystania z komunikatora z którego korzysta na codzień. Problemem było zaprojektowanie synchronizacji i wysyłanie do klienta wiadomości natychmiast jak tylko taka się pojawi. Odpytywanie serwera co kilka sekund w celu sprawdzenia, czy są nowe wiadomości nie wchodziło w grę.

Zdecydowałem się wykorzystać technologie SSE i jej implementacje za pomocą Mercure, ponieważ integracja z Symfony zapewniała proste zarządzanie autoryzacją kanałów. To rozwiązanie pozwoliło mi na publikowanie wiadomości w kanale konkretnego użytkownika. W momencie pojawienia się nowej wiadomości hub Mercure wysyłał event na konkretny kanał, który subskrybował użytkownik. Następnie za pomocą JavaScript obsługiwałem informowanie użytkownika o nowej nieodczytanej wiadomości i wstawianie nowej wiadomości na stronie czatu.

Dodatkowo zaimplementowałem możliwość wysyłania załączników.

Wyzwanie 2 - powiadomienia push

Drugim wyzwaniem była integracja powiadomień Push. Do tego celu wykorzystałem Push API oraz Notification API dostępne w przeglądarkach. Użytkownik w momencie włączenia powiadomień subskrybuje przeglądarkę do powiadomień za pomocą publicznego klucza VAPID. Informacje o subskrypcji zapisuję w bazie danych. W kolejnym kroku wysyłam powiadomienia do przeglądarki klienta wykorzystując bibliotekę web-push-php.

Problem pojawił się w momencie gdy użytkownik włączył powiadomienia na różnych urządzeniach i po wykonanej akcji (np. zmianie statusu zamówienia) powinien otrzymać powiadomienie na każdym urządzeniu. To rozwiązanie blokowało główny wątek PHP.

Z pomocą przyszło wykorzystanie kolejek. Za pomocą messages i handlerów wysyłałem i przetwarzałem powiadomienia za pomocą kolejki. Do przetwarzania kolejek wykorzystałem drugą instancję kontenera aplikacji w dockerze, który po starcie konsumował nowe wiadomości. W celu zapobiegnięciu wyciekania pamięci kontener uruchamia się ponownie po 60 sekundach lub gdy osiągnie limit przetworzonych wiadomości.

Kluczowe funkcje

Zaimplementowałem wiele rozwiązań, które wpływają na różne aspekty działania i korzystania z aplikacji.

Najważniejsze z nich to:

• Sklep - wyszukiwanie produktów, składanie i śledzenie statusu zamówień.
• Reels - krótkie treści video.
• Real-time chat - natychmiastowy kontakt z obsługą klienta.
• Pwa - możliwość instalacji aplikacji na urządzeniu.
• Powiadomienia push - informowanie użytkowników o nowych wiadomościach czy zmianach w zamówieniu.
• Panel administracyjny - administracja może w tym miejscu przeglądać zamówienia, edytować produkty, dodawać nowe reels, odpowiadać na wiadomości klientów i zarządzać licencjami użytkowników.

Technologie

Osiągnięcia

Samodzielnie zaprojektowałem i wdrożyłem całą aplikację z której każdego dnia korzysta ponad 200 użytkowników. Projekt ten pozwolił na skrócenie czasu obsługi klienta, ustandaryzowanie kanału składania zamówień, zwiększenie zaangażowania oraz doświadczenia klientów.

Podsumowanie

Projekt ten pozwolił mi rozwinąć się w zakresie projektowania i budowania kompleksowych aplikacji webowych od szkicu po wdrożenie. Wyciągnąłem wiele lekcji na przyszłość z zakresu optymalizacji wydajności, identyfikowania i naprawie błędów. Było to cenne doświadczenie, które pomogło mi lepiej zrozumieć proces łączenia różnych technologii w celu wyprodukowania faktycznej wartości.