4Developers 2015: Wykorzystanie technologii webowych w aplikacjach desktopowych na przykładzie...

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


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 WEBSITEGALAXY SDK

GALAXY CLIENT GALAXY BACKEND

desktop web


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


Wydzielenie współdzielonych funkcjonalności

do dedykowanych mikro-‐web-‐serwisów


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


USERSLOGINAUTH

GOG.COM WEBSITE

GALAXY CLIENT


AUTH

GOG.COM WEBSITE

GALAXY CLIENT

USERSLOGIN

OAuth2

OAuth2


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



Embed już istniejącej i działającej web aplikacji

GOG.com w desktopowej aplikacji Galaxy Client

+

OAuth Tokens


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

http://GOG.com


Technologia: C++, Chromium (CEF)

(wkrótce możliwa przesiadka na QT)



naave ui

naave ui

naave ui

naave ui

naave ui

naave ui

naave ui

naave ui

naave ui naave ui naave ui naave ui

http://GOG.com


Jednolity UI/UX aplikacji desktopowej Galaxy Client

i web aplikacji GOG.com


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


UI aplikacji dektopowej wykoany w całości

w technologiach webowych



http://GOG.com


Technologie desktop:

• C++

• Chromium (CEF)

Technologie web:

• HTML5 + CSS3 (Compass)

• Angular JS + CoffeeScript

• PHP / Symfony2


Dwustronna komunikacja pomiędzy webowym UI

a desktopową aplikacją


GALAXY CLIENT APP HTML UI

kontroler widok

przesyłanie zmiany stanu aplikacji

Chromium injected JavaScript object


var message = { action: ‘game.install’, data: {…} };

sendToClient(message); // injected function

Wysyłanie wiadomości z UI do aplikacji


function receiveFromClient(message) { // hook into Angular service to route the message }

Wysyłanie wiadomości z aplikacji do UI


Aplikacja mulaplaFormowa

Windows + Mac OS X + Linux


Bieżący stos technologinczny:

• C++

• CEF (lub QT)

• HTML/CSS/JS

• Minimalny kontener natywny dla każdego systemu


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Ę

4Developers 2015: Wykorzystanie technologii webowych w aplikacjach desktopowych na przykładzie...

Software

Transcript of 4Developers 2015: Wykorzystanie technologii webowych w aplikacjach desktopowych na przykładzie...