Zakres:
- Service design
- Development
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.
Integralność
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.
Personalizacja
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.
Intuicyjność
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.
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.
Rezultaty
Rozwiązania dla świata streamingu
Stworzyliśmy innowacyjną aplikację użyteczną zarówno dla samych streamerów, jak i ich widzów.
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!
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.
Web Design
Homepage
Back-end
Back-end
Development
Architektura oprogramowania
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.
W ramach infrastruktury i bezpieczeństwa zastosowaliśmy narzędzie Traefik, które przekierowuje ruch przychodzący do poszczególnych kontenerów dockera. Zabezpieczenia serwisu wykonaliśmy za pomocą szyfrowanego protokołu HTTPS. Ponadto, dla każdej z domen generowane są certyfikaty SSL za pomocą Let’s Encrypt.
Development
REST API
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.
DevOps
Event Sourcing
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.
CI
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.
Development
RabbitMQ – system kolejkowania napiwków
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.
Development
Testy jednostkowe
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.
Front-end
Front-end
Development
React
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.
Development
React
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.
Development
Konfiguracja i aktualizacja widżetów – WebSockets (Socket.IO)
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.
Funkcjonalności
Metody płatności
Skonfigurowaliśmy metody płatności, do których zaliczają się 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.
Syntezator mowy
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. Syntezator mowy zwiększa dostępność aplikacji.
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.
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 Developerzy z naszej agencji.
Chcesz otrzymać indywidualną wycenę naszych usług?
Wypełnij i prześlij krótki brief. Wrócimy z wyceną najszybciej, jak to możliwe.
