Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.
WYKORZYSTANIE  TECHNOLOGII  WEBOWYCH  
W  APLIKACJACH  DESKTOPOWYCH  
na  przykładzie  projektu  GOG.com  Galaxy
Piotr  Ma...
O  mnie
GOG.com  
Galaxy  Team  Leader  
Czym  się  zajmuję?  
Projektowanie  systemów  
Koordynowanie  ich  implementacji...
GOG.com  -­‐  plaForma  cyfrowej  dystrybucji  gier
Historia Start  w  2008  pod  skrzydłami  CD  Projekt,  zespół  kilku ...
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...
GOG.com  Galaxy  -­‐  komponenty
Galaxy  Client  
• Autoryzacja  użytkownika  
• Dostęp  do  sklepu  wraz  z  możliwością ...
GOG.com  Galaxy  -­‐  komponenty
Galaxy  SDK  
• Współdzielenie  tożsamości  użytkownika  z  Galaxy  Client  
• Mulaplayer...
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 ...
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ż...
GOG.com  Galaxy  Accounts
USERS
• REST  API  
• storage  danych  

użytkowników  
• storage  credenNali  
• key/value  sto...
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  ...
GOG.com  Galaxy  -­‐  problem  #2
Embed  już  istniejącej  i  działającej  web  aplikacji  
GOG.com  w  desktopowej  aplik...
GOG.com  Galaxy  -­‐  problem  #2
GOG.com  Galaxy  Client
naave  ui
naave  ui
naave  ui
naave  ui
naave  ui
naave  ui
naav...
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
naav...
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ą…  brzyd...
GOG.com  Galaxy  -­‐  problem  #3
UI  aplikacji  dektopowej  wykoany  w  całości  
w  technologiach  webowych
GOG.com  Galaxy  -­‐  problem  #3
GOG.com  Galaxy  Client
GOG.com  Galaxy  -­‐  problem  #3
Technologie  desktop:  
• C++  
• Chromium  (CEF)
Technologie  web:  
• HTML5  +  CSS3  ...
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
Chro...
GOG.com  Galaxy  -­‐  problem  #4
var message = {
action: ‘game.install’,
data: {…}
};
sendToClient(message); // injected ...
GOG.com  Galaxy  -­‐  problem  #4
function receiveFromClient(message)
{
// hook into Angular service to route the message
...
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...
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)  
• ...
Galaxy  SDK
Matchmaking:  
• REST  WEB  API  
• persystentny  storage  lobby  i  ich  uczestników  
• wyszukiwanie  aktywn...
Galaxy  SDK
Achievementy,  Leaderboardy
GALAXY  CLIENT
• lista  odblokowanych

achievementów  
• pozycja  na  

leaderboar...
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 projektu GOG.com Galaxy - P...
4Developers 2015: Wykorzystanie technologii webowych w aplikacjach desktopowych na przykładzie projektu GOG.com Galaxy - P...
4Developers 2015: Wykorzystanie technologii webowych w aplikacjach desktopowych na przykładzie projektu GOG.com Galaxy - P...
4Developers 2015: Wykorzystanie technologii webowych w aplikacjach desktopowych na przykładzie projektu GOG.com Galaxy - P...
4Developers 2015: Wykorzystanie technologii webowych w aplikacjach desktopowych na przykładzie projektu GOG.com Galaxy - P...
4Developers 2015: Wykorzystanie technologii webowych w aplikacjach desktopowych na przykładzie projektu GOG.com Galaxy - P...
Upcoming SlideShare
Loading in …5
×

4Developers 2015: Wykorzystanie technologii webowych w aplikacjach desktopowych na przykładzie projektu GOG.com Galaxy - Piotr Marzec

332 views

Published on

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.

Published in: Software
  • Be the first to comment

  • Be the first to like this

4Developers 2015: Wykorzystanie technologii webowych w aplikacjach desktopowych na przykładzie projektu GOG.com Galaxy - Piotr Marzec

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

×