Piotr Marzec Language: English Podczas wykładu zapoznamy się w jaki sposób technologie webowe (takie jak REST APIs lub interfejsy użytkownika w HTML/JS) są wykorzystywane w aplikacjach desktopowych i grach na platformie GOG.com Galaxy.

2. WYKORZYSTANIE TECHNOLOGII WEBOWYCH
W APLIKACJACH DESKTOPOWYCH
na przykładzie projektu GOG.com Galaxy
Piotr Marzec

3. O mnie
GOG.com
Galaxy Team Leader
Czym się zajmuję?
Projektowanie systemów
Koordynowanie ich implementacji przez
trzy odzielne zespoły programistyczne.
Od czasu do czasu kilka linijek w PHP ;)

4. GOG.com -­‐ plaForma cyfrowej dystrybucji gier
Historia Start w 2008 pod skrzydłami CD Projekt, zespół kilku osób
Obecnie zatrudnionych jest ponad 80 osób
Obecna pozycja #1 globalnej dystrybucji klasycznych gier na PC i Mac
#2 globalnej dystrybucji gier indie na PC i Mac
Partnerzy 220+ twórców i wydawców gier
Klienci Ponad 2.7 miliona unikalnych wejść miesięcznie z całego
świata
Gry Ponad 1000 tytułów w katalogu
Ponad 40 milionów gier na kontach użytkowników

5. Agenda
1. Założenia projektu GOG.com Galaxy
2. Analiza wybranych problemów
3. Wykorzystane rozwiązania

6. GOG.com Galaxy
Komponenty projektu
Galaxy Client Desktopowa aplikacja kliencka
Galaxy SDK Biblioteka dla twórców gier
Backend Wysoko dostępne, skalowalne mikro web serwisy
GOG.com Website PlaForma sprzedaży i dystrybucji elektronicznej

7. GOG.com Galaxy -­‐ komponenty
Galaxy Client
• Autoryzacja użytkownika
• Dostęp do sklepu wraz z możliwością kupowania gier
• Prosta instalacja i automatyczny update posiadanych gier
• Moje Achivementy, pozycja na leaderboardach
• Przyjaciele, ich aktywność i chat
• MulaplaFormowość: Windows, Mac OS X, Linux

8. GOG.com Galaxy -­‐ komponenty
Galaxy SDK
• Współdzielenie tożsamości użytkownika z Galaxy Client
• Mulaplayer -­‐ matchmaking, networking z NAT traversal, backend
• Achivementy, Leaderboardy, Statystyki
• Overlay -­‐ dostęp do funkcjonalności Galaxy Client w trakcie gry
• MulaplaFormowość: Windows, Mac OS X, Linux

9. GOG.com Galaxy -­‐ komponenty
GOG.COM WEBSITEGALAXY SDK
GALAXY CLIENT GALAXY BACKEND
desktop web

10. GOG.com Galaxy -­‐ komponenty
GOG.COMGALAXY SDK
GALAXY CLIENT GALAXY BACKEND
desktop web

11. GOG.com Galaxy
Analiza wybranych problemów

12. GOG.com Galaxy -­‐ problem #1
GOG.com -­‐ monolityczna web aplikacja
• Zintegrowany system kont użytkowników
• Brak API dla zewnętrznych aplikacji
• Utrudnione skalowanie
• Single point of failure

13. GOG.com Galaxy -­‐ problem #1
Wydzielenie współdzielonych funkcjonalności
do dedykowanych mikro-­‐web-­‐serwisów

14. GOG.com Galaxy -­‐ problem #1
Galaxy Accounts -­‐ system kont użytkowników:
• storage podstawowych danych użytkowników
• autoryzacja credenaali (wraz z UI)
• zarządzanie kontem (reset hasła, zmiana adresu email)
• key/value store dla każdej aplikacji/gry
• zarządzanie dostępem do pozostałych mikro serwisów

15. GOG.com Galaxy Accounts
USERS
• REST API
• storage danych
użytkowników
• storage credenNali
• key/value store
LOGIN
• UI web app
• formularze logowanie
i rejestracji
• UI zarządzania kontem
• password reset emails
AUTH
• OAuth 2.0 Server
• punkt startowy, jedyna
usługa znana klientom
• autoryzacja użytkowników
• autoryzacja i generowanie
tokenów OAuth

16. GOG.com Galaxy Accounts
USERSLOGINAUTH
GOG.COM WEBSITE
GALAXY CLIENT

17. GOG.com Galaxy Accounts
AUTH
GOG.COM WEBSITE
GALAXY CLIENT
USERSLOGIN
OAuth2
OAuth2

18. GOG.com Galaxy Accounts
Technologia: PHP / Symfony2

19. Dostęp do sklepu GOG.com w aplikacji Galaxy Client:
• współdzielenie tożsamości użytkownika
• wykorzystanie jak największej ilości już działających mechanizmów
• unikanie duplikowania implementacji
GOG.com Galaxy -­‐ problem #2

20. GOG.com Galaxy -­‐ problem #2
Embed już istniejącej i działającej web aplikacji
GOG.com w desktopowej aplikacji Galaxy Client
+
OAuth Tokens

21. GOG.com Galaxy -­‐ problem #2
GOG.com Galaxy Client
naave ui
naave ui
naave ui
naave ui
naave ui
naave ui
naave ui
naave ui
naave ui naave ui naave ui naave ui

22. GOG.com Galaxy -­‐ problem #2
Technologia: C++, Chromium (CEF)
(wkrótce możliwa przesiadka na QT)

23. GOG.com Galaxy -­‐ problem #3
GOG.com Galaxy Client
naave ui
naave ui
naave ui
naave ui
naave ui
naave ui
naave ui
naave ui
naave ui naave ui naave ui naave ui

24. GOG.com Galaxy -­‐ problem #3
Jednolity UI/UX aplikacji desktopowej Galaxy Client
i web aplikacji GOG.com

25. GOG.com Galaxy -­‐ problem #3
Próby stylowania natywnych kontrolek systemowych:
• natywne kontrolki są… brzydkie
• natywne kontrolki są niespójne z designem GOG.com
• natywne kontrolki są niespójne między systemami operacyjnymi
• robienie własnych natywnych kontrolek to ślepa uliczka
• konieczność stylowania natywnych kontrolek na każdym systemie
Webdesign jest w DNA zespołu GOG.com

26. GOG.com Galaxy -­‐ problem #3
UI aplikacji dektopowej wykoany w całości
w technologiach webowych

27. GOG.com Galaxy -­‐ problem #3
GOG.com Galaxy Client

28. GOG.com Galaxy -­‐ problem #3
Technologie desktop:
• C++
• Chromium (CEF)
Technologie web:
• HTML5 + CSS3 (Compass)
• Angular JS + CoffeeScript
• PHP / Symfony2

29. GOG.com Galaxy -­‐ problem #4
Dwustronna komunikacja pomiędzy webowym UI
a desktopową aplikacją

30. GOG.com Galaxy -­‐ problem #4
GALAXY CLIENT APP HTML UI
kontroler widok
przesyłanie zmiany
stanu aplikacji
Chromium injected
JavaScript object

31. GOG.com Galaxy -­‐ problem #4
var message = {
action: ‘game.install’,
data: {…}
};
sendToClient(message); // injected function
Wysyłanie wiadomości z UI do aplikacji

32. GOG.com Galaxy -­‐ problem #4
function receiveFromClient(message)
{
// hook into Angular service to route the message
}
Wysyłanie wiadomości z aplikacji do UI

33. GOG.com Galaxy -­‐ problem #5
Aplikacja mulaplaFormowa
Windows + Mac OS X + Linux

34. GOG.com Galaxy -­‐ problem #5
Bieżący stos technologinczny:
• C++
• CEF (lub QT)
• HTML/CSS/JS
• Minimalny kontener natywny dla każdego systemu

35. GOG.com Galaxy Client
Efekt końcowy?

41. Galaxy SDK
Mulaplayer i matchmaking

42. Galaxy SDK
Mulaplayer:
• P2P FCM
• NAT Punch through
• NAT Proxy
• mulaplayer servers (uczestnik FCM)
• wewnętrzne technologie GOG.com

43. Galaxy SDK
Matchmaking:
• REST WEB API
• persystentny storage lobby i ich uczestników
• wyszukiwanie aktywnych lobby wg dowolnych kryteriów
• garbage collecang

44. Galaxy SDK
Achievementy, Leaderboardy
GALAXY CLIENT
• lista odblokowanych
achievementów
• pozycja na
leaderboarch
GALAXY BACKEND
• REST API
• persystentny storage
GALAXY SDK
• zintegrowane z logiką gry
• odblokowuje achievementy
• wpisuje wyniki do
leaderboardów

45. PYTANIA?

46. SZUKAMY WEBDEVÓW
Więcej informacji u mnie lub na stronie GOG.com/work

47. DZIĘKUJĘ ZA UWAGĘ