O ile ostatnio w artykułach skupiałem się głównie na portalu Feedybacky, o tyle wtyczka, która w ogóle wprowadziła tę nazwę własną do ekosystemu internetowego, ostatnio była w "centrum wydarzeń" 14 marca zeszłego roku, a więc prawie15 miesięcy temu. Faktem jest, że plugin JS do stron WWW przez ten czas był delikatnie przesunięty na dalszy plan ze względu na inną część całego projektu, ale to nie oznacza, że nie działo się z nim kompletnie nic. Dzisiaj omówimy sobie wersję 2.0, która pojawiła się w zeszły czwartek na Githubie oraz w repozytorium NPM.
Najpierw krótkie wyjaśnienie tego, czym jest rzeczona wtyczka dla osób, które wcześniej nie zetknęły się z tym projektem. Jest to pakiet javascriptowy, który można wdrożyć na swoją stronę WWW i tym samym umożliwić użytkownikowi zgłaszanie sugestii oraz problemów podczas użytkowania aplikacji. Cechą szczególną jest to, że wtyczka na stronie nie zajmuje dużo miejsca (także graficznie), a jednocześnie, oprócz wiadomości od klienta, pozwala automatycznie dołączyć takie informacje jak zrzut aktualnego ekranu, rodzaj i wersja przeglądarki, system operacyjny, rozdzielczość ekranu i kilka innych danych, które mogą pomóc w diagnozowaniu zgłoszenia. Jest to zatem taki formularz kontaktowy “na sterydach”, przeznaczony do zgłoszeń serwisowych dot. oprogramowania webowego.
Bardziej dociekliwi mogą zauważyć, że tak naprawdę dostępna jest już wersja 2.0.1, a więc z dodatkową "jedynką" na końcu - cóż, wiele gier AAA (w tym Cyberpunk 2077) też miały "day 0 patch", prawda? :) A tak poważnie, ta dodatkowa malutka aktualizacja od razu nieco "wyczyściła" pewne drobnostki i stąd jej wręcz natychmiastowa publikacja.
Zajmijmy się najpierw mniejszymi zmianami. Przede wszystkim, wiele osób zwracało uwagę na to, że od momentu, kiedy użytkownik zatwierdzi swoją wiadomość do momentu pojawienia się informacji o sukcesie bądź porażce wysyłki, może upłynąć spora chwila i nie wiadomo, czy coś się dzieje i w ogóle operacja jest przetwarzana. Oczywiście, długość tego okresu zależy od szybkości łącza, rozmiaru przesyłanych danych (głównie ze względu na zrzut ekranu) oraz poprawności konfiguracji. Ta wersja wprowadza dodatkowy komunikat, który ogranicza "nerwowość" oczekiwania. Samą wiadomość można modyfikować poprzez klucz "requestPending".
Drugą drobniejszą zmianą (a raczej ich zestawem) jest poprawienie interpretacji parametrów "emailField" oraz "expandMessageLink", a także zaniechanie przewinięcia strony do góry po wykonaniu zrzutu ekranu i wysłaniu zgłoszenia. To małe modyfikacje, ale wierzę, że poprawią komfort korzystania z wtyczki.
Przejdźmy zatem do poważniejszych zmian, które w dużej mierze łączą się z pojawieniem się portalu.
Parametry API i dodatkowe checkboxy
Jak pewnie pamiętacie, do tej pory inicjalizacja wtyczki wyglądała mniej więcej tak (w minimalnej wersji):
var feedybacky = new Feedybacky('feedybacky-container', {
onSubmitUrl: 'https://myendpointforrequest.com',
});
Kod prosty i elegancki, natomiast widzimy, że programista musi zapewnić odbiór wysyłanego POST-a pod danym adresem i prawdopodobnie przetworzenie zgłoszenia. Do tej pory wiadomość z danymi można było albo wysłać na żądany endpoint, albo obsłużyć je wewnętrznie za pomocą napisanej przez siebie funkcji javascriptowej. Natomiast wraz z koleżankami i kolegami z zespołu byliśmy świadomi, że wiele osób chciałoby wszystko w "pakiecie", a więc nie tylko wtyczkę, ale też miejsce, do którego zgłoszenia będą trafiać i którego nie trzeba będzie przygotowywać samemu, a jedynie potraktować jako swoistą usługę typu "serverless". I w tym miejscu wchodzi portal Feedybacky - https://feedybacky.com.
Serwis, o którym wspominałem już kilka razy w artykułach na LinkedInie oraz Twitterze, stał się faktem i o ile jest na razie dostępny w formie zamkniętej bety, o tyle już został z sukcesami sprawdzony w boju na projektach Wilda Software oraz kilku innych firm, a także jest stale dopieszczany. Aplikacja nie tylko zapewnia miejsce dla wysyłanych zgłoszeń, ale też ułatwia zarządzanie tymi informacjami, śledzenie ich statusu i dyskusję wewnątrz zespołu oraz na linii klient-wykonawca. Zatem połączenie wtyczki oraz portalu już teraz powinno zapewnić satysfakcjonujące środowisko dla zespołów wsparcia, help desków czy całych działów IT, szczególnie w okresie wdrożeń nowej wersji oprogramowania. A system będzie rozszerzany i rozwijany, także na podstawie sugestii od użytkowników.
Dlaczego o tym wszystkim wspominam? A mianowicie dlatego, że obecnie, jeżeli będziecie chcieli zintegrować wtyczkę z portalem, to możecie to zrobić w następujący sposób:
var feedybacky = new Feedybacky('feedybacky-container', {
apiKey: 'Twój klucz API',
projectSymbol: 'Symbol Twojego projektu w Feedybacky',
termsUrl: 'Link do regulaminu Twojej strony',
privacyPolicyUrl: 'Link do polityki prywatności Twojej strony'
});
Jak widać, doszło trochę parametrów, ale nie trzeba podawać już adresu, który jest "zaszyty" we wtyczce. Co więcej, zintegrowanie się z portalem w poprzednich wersjach wtyczki też jest możliwe, ale wymaga trochę innego podejścia:
var feedybacky = new Feedybacky('fyby-container', {
onSubmitUrl: 'https://api.feedybacky.com/issue',
beforeSubmit: (payload) => {
payload.add('apiKey', 'Twój klucz API');
payload.add('projectSymbol', 'Symbol Twojego projektu w Feedybacky');
payload.add('termsUrl', 'Link do regulaminu Twojej strony');
payload.add('privacyPolicyUrl', 'Link do polityki prywatności Twojej strony');
},
});
Klucz API oraz symbol utworzonego projektu to informacje, które można uzyskać ze swojego konta w portalu Feedybacky. Cały proces jest dość intuicyjny i został opisany w swoistym "Quick Start Guide", natomiast zastanawiać mogą dwa ostatnie parametry. Otóż, pamiętajmy, że użytkownik w zgłoszeniu może przesyłać materiały zawierające dane osobowe. W związku z tym, jeśli wiadomość jest kierowana do portalu, zgłaszający musi zapoznać się z dwiema dodatkowymi zgodami dając tym samym znać, że rozumie co robi i zgadza się. I właśnie w tych zgodach pojawią się linki do strony WWW, na której wtyczka została zainstalowana.
Jest to zatem zabieg związany tylko i wyłącznie z przetwarzaniem danych osobowych i tym samym - niestety - konieczny. Jeśli jednak nadal chcecie kierować zgłoszenia na inny, wybrany przez siebie adres, to dodatkowe checkboxy się nie pojawią.
Last but not least, niektórzy pewnie od razu zauważyli, że zmieniło się logo Feedybacky'ego. Obecnie wygląda ono następująco.
Oczywiście, nadal możecie je zmienić w swojej instancji wtyczki za pomocą dyrektyw CSS, jeśli widzicie taką potrzebę.
Czy muszę integrować wtyczkę z portalem Feedybacky?
Mimo że - jak pewnie zauważyliście - polecam to rozwiązanie, to w żadnym wypadku nie jest to wymagane. Nadal honorowane są parametry "onSubmitUrl" oraz "onSubmit", za pomocą których ze zgłoszeniem można zrobić to, co uzna się za stosowne i nic nie blokuje programisty przed napisaniem swojej usługi sieciowej od odbioru wysyłanych POST-ów. Także jeśli stosowaliście do tej pory takie rozwiązanie, to jak najbardziej możecie przy nim zostać. Choć nadal zachęcam do zainteresowania się portalem Feedybacky w przyszłości, gdyż integracja będzie rozwijana.
Jaką drogą mogę zainstalować wtyczkę na stronie?
Podobnie, jak to było do tej pory, wtyczkę można zainstalować na co najmniej dwa sposoby:
- bezpośrednio pobrać ZIP-a z Githuba i skopiować do folderu z własną stroną
- zainstalować z repozytorium NPM za pomocą polecenia "npm install --save feedybacky"
Natomiast, jeśli nie w smak jest Wam dokładać dodatkowe pliki do kodu strony, możecie skorzystać z serwera CDN, co można uczynić w następujący sposób:
<script src="https://cdn.jsdelivr.net/npm/feedybacky@2.0.1/js/feedybacky.min.js" integrity="sha384-84KGD4yOPhNpd8TJbjKeVll5+VcpF7Ezt+cuN6WCCeDQPs4SwxyO2SHt9Xuqsz+4" crossorigin="anonymous"></script>
Cała instrukcja instalacji jest dostępna na wcześniej przywołanej stronie z pierwszymi krokami oraz - już bardziej technicznie - w oficjalnej dokumentacji wtyczki.
Serdecznie zapraszam do zapoznania się z nową wersją wtyczki i samym portalem. W przypadku jakichkolwiek pytań lub wątpliwości - sekcja komentarzy oraz oficjalny mail feedybacky@wildasoftware.pl są do Waszej dyspozycji.
Pozdrawiam - Jakub Rojek