Niedawno, a dokładniej 12 lutego 2022 r., na Githubie oraz w repozytorium NPM pojawiła się nowa wersja wtyczki Feedybacky, tym razem opatrzona numerkiem wersji 2.3. Zaglądając do changelogu, można pomyśleć, że ta odsłona nie niesie za sobą dużych zmian, poprawek i udogodnień. Owszem, tak się może wydawać - rzeczywiście, punktów w pliku ze zmianami jest dość mało. Jednak te modyfikacje są znaczące, gdyż dodają dwie zupełnie nowe funkcje, które mogą wykorzystać zgłaszający, aby lepiej wyrazić to, co mają do przekazania.

W tym artykule omówimy sobie te dwa punkty i pokażemy sobie, jak je dobrze wykorzystać.

Modyfikacja zrzutu ekranu

Przesyłanie samego zrzutu ekranu wraz ze zgłoszeniem to fundamentalna cecha wtyczki Feedybacky i coś, co było jedną z głównych motywacji do stworzenia tego narzędzia. Bardzo często przy analizie zgłoszeń działa zasada "jeden obraz zastępuje tysiąc słów" i ten screenshot faktycznie w praktyce przyspiesza wyszukanie rozwiązania. Jednak cały czas jesteśmy świadomi, że nie zawsze sama "czysta" grafika będzie wystarczająca, szczególnie, gdy strona zawiera wiele elementów - w takim wypadku naturalne dla użytkownika wydaje się zaznaczenie miejsca, w którym widzi coś, co zwróciło jego uwagę. Faktycznie, wtyczce brakowało tej funkcji - aż do teraz.

W wersji 2.3 pojawił się boolowski parametr allowScreenshotModification, który pozwala aktywować link "Zaznacz miejsca" widoczny przy checkboxie włączającym robienie zrzutu ekranu. Zresztą, nie trzeba koniecznie podawać tego argumentu w konfiguracji - jego domyślną wartością jest true.

Po kliknięciu tego dodatkowego linku, zrzut ekranu już jest wykonywany - po chwili pojawia się okno modalne, w którym można zobaczyć aktualny widok i dodatkowy interfejs. Tutaj niektórzy mogą zwrócić uwagę na dość sciśnięty format obrazu i potencjalne problemy wówczas w rysowaniu - wiemy o tym i jest to coś, co będzie dopracowywane w trakcie dalszego rozwoju wtyczki.

Użytkownik ma do dyspozycji kilka kolorów i po wybraniu jakiegokolwiek może rysować po zrzucie ekranu, zaznaczając to, co uważa za istotne lub nawet coś napisać. Bardzo ważne jest to, że wprowadzone zmiany należy zapisać - służy do tego odpowiedni przycisk. Zaraz obok znajduje się opcja wyczyszczenia wszystkich zapisków i tutaj też istotne jest to, aby zapisać taką "czystkę". Zachowane zmiany można później modyfikować, gdy po zamknięciu okna modalnego zgłaszający jeszcze raz kliknie link "zaznacz miejsca". Dodatkowo, jeśli sytuacja na ekranie sie zmieni i jest to istotne do zawarcia w zgłoszeniu, zawsze można użyć opcji ponownego wygenerowania zrzutu ekranu.

Co z łatwością możemy zauważyć, po wejściu do zaznaczania miejsc na grafice, późniejsze wysłanie zgłoszenia będzie szybsze - wtyczka nie wykona ponownego zrzutu tuż przed wysyłką. Zrobi to tylko w normalnej sytuacji, czyli kiedy użytkownik nie otworzy wcześniej okna modalnego i postąpi tak, jak dotychczas (wpisze treść zgłoszenia i kliknie "Wyślij")

Właśnie - czy na pewno musi wpisywać?

Zgłaszanie za pomocą głosu

Oczywiście, brzmi to dość futurystycznie, ale formalnie jest to możliwe - od wersji 2.3 we wtyczce Feedybacky można włączyć możliwość wprowadzania zgłoszenia zarówno tekstem, jak i głosem, wykorzystując mikrofon wbudowany choćby w większości laptopów. Zanim opiszemy sobie metodę, jak to włączyć i w jaki sposób to działa, zastanówmy się, w jakich sytuacjach może się to przydać.

Wiemy dobrze, że mimo chęci posiadania wszystkiego "na papierze" (choćby elektronicznym), nadal są osoby, które zdecydowanie wolą dzwonić niż pisać maile. Często tak jest dla nich szybciej lub faktycznie sprawa, którą chcą omówić, jest łatwiejsza do wyjaśnienia głosowo niż poprzez pisanie. W takich wypadkach te osoby mogą chcieć wybrać tryb wprowadzania zgłoszenia oparty o wykorzystanie mikrofonu. Jednak istnieje jeszcze drugi przypadek, w którym może to być przydatne - wyobraźmy sobie sytuację, że rozmyślamy o tym, w jaki sposób rozwinąć swoją aplikację bądź szukamy inspiracji dla nowych funkcji. Nowe pomysły przychodzą do głowy zwykle w niespodziewanych momentach - czasami w takich, w których nie mamy możliwości wygodnego zapisania ich za pomocą klawiatury fizycznej lub ekranowej. Dużo prościej jest wówczas nagrać się i w ten sposób zachować swoją myśl, którą być może później, w wolnej chwili, przelejemy na tekst pisany.

Widzimy zatem, że są sytuacje, w których opcja nagrania się może być przydatna. Oczywiście, pozostaje kwestia odbioru tego po stronie działu wsparcia - dużo łatwiej wyszukuje się i przetwarza zgłoszenia tekstowe, jednak najważniejsze jest to, aby użytkownik zgłaszający miał możliwość jasnego przekazania swoich myśli.

Tyle wprowadzenia, a teraz przejdźmy do konkretów - jak można skorzystać z tej funkcji?

Domyślnie forma głosowa jest wyłączona. Dlatego należy użyć jednego lub obu nowych parametrów dla naszej wtyczki:

const feedybacky = new Feedybacky('feedybacky-container', {
    ...
    availableMessageTypes: ['text', 'voice'],
    activeMessageType: 'text',
    ...
});

Pierwszy z nich, availableMessageTypes, zawiera tablicę metod wprowadzania zgłoszenia. Domyślną wartością jest tutaj jedynie "text", jednak - jak widać - możemy dodać również "voice", co odblokuje zakładki widoczne w oknie wtyczki. Pozostaje jeszcze możliwość wybrania domyślnego sposobu komunikacji - zazwyczaj będzie to również "text", ale nic nie stoi na przeszkodzie, aby to zmienić na "voice".

Po wybraniu omawianej formy, zgłaszający zobaczy przycisk pozwalający rozpocząć nagrywanie. Po jego wciśnięciu zostanie odblokowany mikrofon (użytkownik może zostać poproszony przez przeglądarkę internetowa o udzielenie zezwolenia), a następnie zacznie być rejestrowany głos. Ten proces można zakończyć poprzez naciśnięcie przycisku z kwadratem, a także później możliwe jest odsłuchanie swojego nagrania. Rozpoczynając nowy zapis, stary zostanie usunięty - warto o tym pamiętać. Maksymalna długość nagrania to 10 sekund i przy próbie wysłania dłuższego fragmentu wtyczka zgłosi odpowiedni błąd. Interesujące może też być to, że nawet, kiedy zgłaszający się nagrał, a później przemyślał sprawę i uznał, że jednak woli wysłać tekst, jak najbardziej może to zrobić - wystarczy zmienić zakładkę, wpisać zgłoszenie z ręki i wysłać.

W momencie wysyłki zostanie przekazana zarówno wiadomość (plik WAV zakodowany za pomocą Base64), jak i jej typ. Jest to potrzebne do późniejszego wykrycia, w jaki sposób wyświetlić wiadomość. W portalu Feedybacky przy zgłoszeniach głosowycy pojawia się odpowiednia adnotacja oraz możliwość odegrania nagranego dźwięku.

Jak pobrać zmiany

Jak zawsze, nową wersję wtyczki możecie pobrać z Githuba lub NPM. Nie musicie też w ogóle ściągać paczek na swój dysk - zawsze istnieje możliwość skorzystania z CDN:

<script src="https://cdn.jsdelivr.net/npm/feedybacky@2.3/js/feedybacky.min.js" integrity="sha384-tUHIX3ubCIE93RkTwrdKx2o1bJBcW0ws3b1EwLuU3FdI/5DLaeOdrdkcxHCW3b7H" crossorigin="anonymous"></script>

Podsumowanie

Jak widać, zmian faktycznie nie ma dużo, jednak są znaczące i pozwalają zgłaszającemu na bardziej precyzyjne przekazanie swojej uwagi. Nie są to nasze ostatnie słowa jeśli chodzi o te funkcje - będą one rozwijane, a my będziemy obserwować, na ile rzeczywiście staną się wykorzystywane przez zgłaszających.

Jak Wam się podobają nowe zmiany? Jesteśmy bardzo ciekawi Waszych uwag - możecie zgłaszać nam swoje komentarze poprzez FEF na Feedybacky.com lub poprzez maila. Jeśli będziecie mieli jakiekolwiek pytania dotyczące korzystania z wtyczki - również się nie wahajcie.

Pozdrawiam i dziękuję - Jakub Rojek.