WYKORZYSTANIE TECHNOLOGII WEBOWYCH W APLIKACJACH DESKTOPOWYCH
na przykładzie projektu GOG.com Galaxy
Piotr Marzec
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 ;)
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
Agenda
1. Założenia projektu GOG.com Galaxy
2. Analiza wybranych problemów
3. Wykorzystane rozwiązania
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
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
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
GOG.com Galaxy -‐ komponenty
GOG.COM WEBSITEGALAXY SDK
GALAXY CLIENT GALAXY BACKEND
desktop web
GOG.com Galaxy -‐ komponenty
GOG.COMGALAXY SDK
GALAXY CLIENT GALAXY BACKEND
desktop web
GOG.com Galaxy
Analiza wybranych problemów
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
GOG.com Galaxy -‐ problem #1
Wydzielenie współdzielonych funkcjonalności
do dedykowanych mikro-‐web-‐serwisów
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
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, jedynausługa znana klientom
• autoryzacja użytkowników
• autoryzacja i generowanietokenów OAuth
GOG.com Galaxy Accounts
USERSLOGINAUTH
GOG.COM WEBSITE
GALAXY CLIENT
GOG.com Galaxy Accounts
AUTH
GOG.COM WEBSITE
GALAXY CLIENT
USERSLOGIN
OAuth2
OAuth2
GOG.com Galaxy Accounts
Technologia: PHP / Symfony2
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
GOG.com Galaxy -‐ problem #2
Embed już istniejącej i działającej web aplikacji
GOG.com w desktopowej aplikacji Galaxy Client
+
OAuth Tokens
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
GOG.com Galaxy -‐ problem #2
Technologia: C++, Chromium (CEF)
(wkrótce możliwa przesiadka na QT)
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
GOG.com Galaxy -‐ problem #3
Jednolity UI/UX aplikacji desktopowej Galaxy Client
i web aplikacji GOG.com
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
GOG.com Galaxy -‐ problem #3
UI aplikacji dektopowej wykoany w całości
w technologiach webowych
GOG.com Galaxy -‐ problem #3
Technologie desktop:
• C++
• Chromium (CEF)
Technologie web:
• HTML5 + CSS3 (Compass)
• Angular JS + CoffeeScript
• PHP / Symfony2
GOG.com Galaxy -‐ problem #4
Dwustronna komunikacja pomiędzy webowym UI
a desktopową aplikacją
GOG.com Galaxy -‐ problem #4
GALAXY CLIENT APP HTML UI
kontroler widok
przesyłanie zmiany stanu aplikacji
Chromium injected JavaScript object
GOG.com Galaxy -‐ problem #4
var message = { action: ‘game.install’, data: {…} };
sendToClient(message); // injected function
Wysyłanie wiadomości z UI do aplikacji
GOG.com Galaxy -‐ problem #4
function receiveFromClient(message) { // hook into Angular service to route the message }
Wysyłanie wiadomości z aplikacji do UI
GOG.com Galaxy -‐ problem #5
Aplikacja mulaplaFormowa
Windows + Mac OS X + Linux
GOG.com Galaxy -‐ problem #5
Bieżący stos technologinczny:
• C++
• CEF (lub QT)
• HTML/CSS/JS
• Minimalny kontener natywny dla każdego systemu
GOG.com Galaxy Client
Efekt końcowy?
Galaxy SDK
Mulaplayer i matchmaking
Galaxy SDK
Mulaplayer:
• P2P FCM
• NAT Punch through
• NAT Proxy
• mulaplayer servers (uczestnik FCM)
• wewnętrzne technologie GOG.com
Galaxy SDK
Matchmaking:
• REST WEB API
• persystentny storage lobby i ich uczestników
• wyszukiwanie aktywnych lobby wg dowolnych kryteriów
• garbage collecang
Galaxy SDK
Achievementy, Leaderboardy
GALAXY CLIENT
• lista odblokowanychachievementów
• pozycja na leaderboarch
GALAXY BACKEND
• REST API
• persystentny storage
GALAXY SDK
• zintegrowane z logiką gry
• odblokowuje achievementy
• wpisuje wyniki do leaderboardów
PYTANIA?
SZUKAMY WEBDEVÓW Więcej informacji u mnie lub na stronie GOG.com/work
DZIĘKUJĘ ZA UWAGĘ