Serwis dla streamerów
Wprowadzenie
Czym jest Tipply?
Tipply jest serwisem dedykowanym streamerom, gamerom, vlogerom i innym głównym bohaterom internetowych transmisji na żywo, którzy zarabiają na udostępnianiu wideo na portalach streamingowych. To pierwsza w Polsce aplikacja do wypłat donejtów z tak rozwiniętym panelem streamera oraz możliwościami, które zwiększają szanse na zarobek. Premiera Tipply odbyła się w październiku 2019 roku, jednak intensywne prace nad aplikacją rozpoczęły się kilka miesięcy wcześniej.
My zajęliśmy się częścią programistyczną, na bieżąco monitorując, obsługując oraz rozwijając platformę. Początkowe zainteresowanie i entuzjazm przerodziły się w pełne zaangażowania wdrażanie innowacyjnych, a jednocześnie funkcjonalnych rozwiązań, przyczyniających się do rozwoju idei streamingu w Polsce.
Planowanie i odkrywanie
Wyzwanie
Stanęliśmy przed zadaniem stworzenia pełnej funkcjonalności, a przy tym intuicyjnej i prostej w obsłudze platformy, która umożliwiałaby przyjmowanie oraz wypłacanie środków zgromadzonych w ramach live streamingu.
Dotychczas dostępne dla streamerów serwisy do wypłacania środków oferowały różne możliwości, jednak brakowało na rynku platformy, która łączyłby wszystkie potrzeby oraz oczekiwania każdego prawdziwego steamera. Misją naszych Partnerów jest maksymalne osiągnięcie zadowolenia streamerów, a naszym zadaniem było wsparcie tego procesu od części programistycznej.
Podjęliśmy się wyzwania zakodowania kompleksowej aplikacji z licznymi narzędziami i funkcjonalnościami, m.in. wpłatami bankowymi, SMS-owymi i innymi popularnymi metodami płatności czy możliwością pokazywania spersonalizowanych alertów i widżetów w trakcie streamowania.
Kompleksowa
Prowadzimy całościowe działania: od kodowania, po testowanie. Takie podejście sprawia, że tworzymy kompletny serwis zawierający wszystko, czego potrzebują współcześni streamerzy.
Spersonalizowana
Platforma Tipply jest cały czas dostosowywana do oczekiwań i aktualnych potrzeb streamerów, którzy przedstawiają swoje zdanie między innymi w mediach społecznościowych.
Intuicyjna
Dzięki wykorzystanym rozwiązaniom użytkownik porusza się po aplikacji swobodnie. Na intuicyjność serwisu wpływa m.in. przyjazny interfejs, spójne elementy graficzne oraz czytelna nawigacja.
Rezultaty
Technologie, narzędzia i metodyka
Wiadomości glosowe
Niech Cię usłyszą!
Dodatkowym udogodnieniem i ciekawą funkcjonalnością zarówno dla widzów, jak i streamerów, są wiadomości głosowe - użytkownik, który wpłaca napiwek, może nagrać i wysłać wiadomość głosową do streamera.
Progressbar
Zbiórki na cel
Kontrolę nad donejtami usprawnia aktualizowany na bieżąco pasek z informacją o tym, jaka kwota została uzbierana i jak dużo pozostało jeszcze do realizacji założonego celu. W końcu cel uświęca środki - zwłaszcza w świecie streamingu!
525,00 zł / 3000,00 zł (18%)
Stworzyliśmy innowacyjną aplikację użyteczną zarówno dla samych streamerów, jak i ich widzów.
W Tipply zarejestrowanych jest ponad 24 500 użytkowników. Dotychczas odnotowano prawie 400 000 wpłaconych napiwków.
Po stronie back-endu użyliśmy PHP, Java i JavaScript (Node.js) do napisania wyspecjalizowanych mikroserwisów, z których każdy odpowiada za konkretną funkcję. Zalicza się do nich między innymi komunikację z API banku, delegowanie informacji o napiwkach w czasie rzeczywistym do widżetów oraz podpisywanie dokumentów podpisem elektronicznym w standardzie XAdES.
Z powyższych funkcjonalności korzysta główna aplikacja, w której zawarliśmy całą logikę biznesową serwisu. Udostępnia ona również REST API, z której korzystają aplikacje klienckie, jak na przykład panel użytkownika.
Użycie narzędzia Traefik, które przekierowuje ruch przychodzący do poszczególnych kontenerów dockera
Zabezpieczenia serwisu za pomocą szyfrowanego protokołu HTTPS
Generowanie certyfikatu Let’s Encrypt dla każdej z domen
Główna aplikacja została stworzona z wykorzystaniem frameworka Symfony 4 oraz jego komponentów. Platforma udostępnia REST API, do którego stworzenia wykorzystaliśmy pakiet Symfony FOSRestBundle. Dostęp do danych użytkownika jest możliwy z kolei dzięki standardowi OAuth2. Do przedstawiania zwracanych przez API obiektów używamy biblioteki JMS Serializer, dzięki której mamy pełną kontrolę nad tym, w jaki sposób obiekty języka PHP zostaną przekształcone do formatu XML lub JSON.
API jest dokładnie dokumentowane w formacie OpenAPI (Swagger). Proces dokumentacji jest częściowo zautomatyzowany dzięki pakietowi NelmioApiDocBundle, który potrafi zinterpretować kod źródłowy aplikacji. Na podstawie tego kodu pakiet tworzy definicje obiektów oraz pozwala na wygenerowanie strony, na której dokumentacja jest przedstawiona wizualnie i która umożliwia testowanie API w trybie sandbox.
Podczas transmisji streamer może korzystać z widżetu powiadamiającym go o wpłynięciu nowych napiwków w czasie rzeczywistym.
Są sytuacje, w których streamer nie włącza tego widoku
lub napiwków jest tak dużo, że nie można byłoby ich wszystkich wyświetlić w trakcie transmisji live. Informacja
o wpłaconym napiwku nie trafia zatem bezpośrednio
do widżetu,
ale pozostaje w kolejce dzięki oprogramowaniu RabbitMQ, które daje gwarancję, że każdy napiwek zostanie wyświetlony, a kolejność wyświetlania donejtów będzie dokładnie taka sama, jak kolejność ich wpłynięcia.
Każdy użytkownik posiada przy tym własny system kolejkowania napiwków.
Zadaniem architektury Event Sourcingu jest odtwarzanie, na podstawie zdarzeń, aktualnego stanu aplikacji, co dobrze sprawdza się między innymi w systemach bankowych. Wykorzystaliśmy Event Sourcing do realizacji operacji na rachunkach, stosując przy tym gotową implementację - Prooph.
Utrzymanie jakości i niezawodności tak dużego systemu nie byłoby możliwe bez testów jednostkowych. Są pisane z myślą o tym, by aplikacja działała zgodnie z założeniami. Gdy kod będzie się rozrastał i będą dopisywane nowe funkcjonalności, zadaniem testów jednostkowych jest ostrzeżenie programisty i wyjaśnienie, dlaczego konkretna, wcześniej napisana część, przestaje działać zgodnie z oczekiwaniami. Dobrze napisane testy pozwalają wykryć ewentualne błędy już na poziomie edytora kodu do repozytorium. Do przeprowadzania testów w backendzie używamy frameworku PHPUnit, natomiast od strony frontendu Testing Library, co pozwala nam cały czas udoskonalać architekturę, eliminować ewentualne błędy i sprawdzać, czy poszczególne komponenty działają zgodnie z założeniami i oczekiwaniami.
W pracy nad serwisem stosujemy narzędzia GitLab CI/CD, dzięki którym mamy pełną kontrolę nad procesami tworzenia oprogramowania, przenoszeniem aplikacji do środowiska testowego oraz nad dostarczaniem Partnerowi prawidłowo działającego serwisu. Żadna gałąź nie zostaje wdrożona bez przejścia pozytywnie wcześniej wspomnianych testów jednostkowych, sprawdzania przyjętych zasad organizacji kodu oraz innych automatycznych testów.
Zarówno aplikacja Tipply (app.tipply.pl), jak i widżety (widgets.tipply.pl) zostały oparte na bibliotece React. To uniwersalna i najpopularniejsza javascriptowa biblioteka, dzięki której można zbudować dowolną aplikację internetową. Jedynym ograniczeniem są umiejętności, których naszym deweloperom nie brakuje :) React odpowiada za renderowanie całego UI aplikacji. Do stworzenia komponentów reactowych wykorzystaliśmy bibliotekę styled-components. Pozwala na pisanie kodu CSS dla komponentów, koncentrując się na pojedynczym przypadku użycia. Biblioteka stworzona jest w taki sposób, żeby zoptymalizować i ułatwić stylowanie komponentów. Dzięki niej zarządzanie i utrzymanie takiego kodu jest prostsze. Komponenty posiadają unikalne klasy, dzięki czemu nie wpływają na siebie.
Dla wsparcia zarządzania lokalnym stanem aplikacji użyliśmy Redux, czyli pomocniczej biblioteki odpowiedzialnej za zarządzanie przepływem oraz przechowywaniem danych w całym serwisie. Dzięki niej jesteśmy w stanie przechowywać dane oraz optymalizować ich przepływ przez całą aplikację. Użyliśmy również kilku narzędzi rozszerzających funkcjonalność tej biblioteki. Były to m.in. redux-thunk (narzędzie odpowiadało za wykonanie asynchronicznych zmian w stanie aplikacji) oraz redux-logger (ułatwiło development oraz debugowanie tego stanu). Do routingu użyliśmy sprawdzonej i przetestowanej biblioteki React Router.
Istotnym punktem w stworzeniu tego funkcjonalnego konfiguratora było zastosowanie technologii WebSockets (Socket.IO), dzięki której aktualizacja widżetów działa w czasie rzeczywistym - streamer nie musi odświeżać okna przeglądarki, żeby zobaczyć zmiany. Za pomocą websocketów w czasie rzeczywistym odbierane są również powiadomienia o napiwkach. Wszystkie widoki można wyświetlić prostym kliknięciem URL widgetu.
Streamerzy korzystający z aplikacji Tipply mogą w dowolny sposób konfigurować wiadomości oraz dostosowywać ich wygląd do własnych preferencji. Mogą edytować i formatować tekst, wybrać animacje (Animate.css) dla wejścia i wyjścia komunikatu oraz efekty w trakcie wyświetlania tekstu, zmieniać tło animacji, a także wybrać dowolny font z bazy blisko 1000 krojów Google Fonts oraz unikalnych fontów Tipply.
Kolejnym ważnym udogodnieniem dla streamerów było skonfigurowanie różnych metod płatności, do których zalicza się zarówno przelewy bankowe, karty płatnicze, system BLIK, jak i Paysafecard, PayPal czy SMS. Dzięki naszym działaniom aplikacja Tipply, jako pierwsza tego typu platforma w Polsce, oferuje wypłaty natychmiastowe.
W aplikacji Tipply wprowadziliśmy również syntezator mowy Google, który pozwala odczytywać na głos tekst wyświetlany na ekranie. Syntezator jest dostępny w wersji damskiej oraz męskiej.
Ogromnym wyzwaniem stojącym przed nami było było dostarczenie użytkownikowi jak najlepszego doświadczenia z użytkowania, projektując serwis w taki sposób, żeby nie musiał oglądać ładujących się elementów, a skupił się na uwolnieniu swojej kreatywności przy tworzeniu zróżnicowanych szablonów, wyróżniając swoje transmisje czy personalizując ustawienia swojego konta. Udało nam się to dzięki wykorzystaniu najlepszych i najnowocześniejszych technologii ze świata front-endu, które nie ograniczały nas w programowaniu skomplikowanej logiki aplikacji.
PRZEMYSŁAW Front-end developer
Od początku wiedzieliśmy, że aplikacja będzie się dynamicznie rozwijała, więc musieliśmy tworzyć kod z myślą o tym, żeby był otwarty na dodawanie nowych funkcjonalności bez wprowadzania chaosu z każdą nową zmianą. Skala projektu zmusiła nas do wspięcia się na wyżyny w kontekście planowania architektury systemu, a także do użycia pełnej gamy różnych technologii back-endowych.
EMIL Back-end developer
Intuicyjny panel użytkownika, edytowalne szablony wiadomości wyświetlanych widzom, a do tego szybkie i bezpieczne wypłaty - to tylko niektóre funkcjonalności, które charakteryzują Tipply. Do dziś na bieżąco monitorujemy oraz udoskonalamy platformę, zapewniając naszym Partnerom stałą obsługę. Aplikacja jest odpowiedzią na oczekiwania osób rozwijających przygodę w świecie streamingu lub tych, którzy dopiero stawiają w nim pierwsze kroki. Wirtualna rzeczywistość, w której jednym z podstawowych źródeł zarobków są donacje, jest wspierana przez aplikację Tipply, którą stworzyli najlepsi front i back-end deweloperzy z naszej agencji.
cdn.
powrót do portfolio