Celem prezentacji będzie pokazanie jak przy pomocy JS zbudować prostą desktopową aplikację wykorzystującą webowe API.

1. O Electronie słów kilka
Aplikacje desktopowe w JavaScript
Bartosz Tkaczewski
email: tkaczu@tsh.io twitter: @btkaczewski github: tkaczu1

2. Plan prezentacji
Electron - co to?
Electron - jak działa?
Electron - kto używa?
Electron - możliwości
Instalacja
Przykład #1
Case Study - Przykład #2
Przykład #2
Zasoby
2

3. Electron - co to?
Framework który daje możliwość tworzenia
wieloplatformowych aplikacji desktopowych, pisanych
przy użyciu JavaScript/HTML/CSS.
3

4. Electron - jak działa?
Electron działa w oparciu o io.js oraz Chromium
4

5. Electron - kto używa?
Electron już teraz został użyty do kilku ciekawych aplikacji
m.in:
- Atom - GitHub IDE - atom.io
- Slack - IM - slack.com
- Visual Studio Code - Microsoft IDE - code.visualstudio.com
- Nuclide - Facebook IDE - nuclide.io
- Pixate - UX/UI Mobile prototyping - pixate.com
5

6. Electron - możliwości
- Wieloplatformowość (Mac, Linux, Windows)
- Automatyczne aktualizacje
- Raportowanie błędów
- Okienkowe instalatory
- Natywne menu & systemowe notyfikacji
6

7. Instalacja
7

8. Przykład #1
http://electron.atom.io/docs/latest/tutorial/quick-
start/
8

9. Przykład #1 - struktura
9

10. Przykład #1 - package.json
10

11. Przykład #1 - main.js
11

12. Przykład #1 - index.html
12

13. Przykład #1 - start
13

14. Przykład #1 - rezultat
14

15. Case Study - Przykład #2
Utworzenie aplikacji wspomagającej pracę recepcji klubu
fitness.
15

16. Przykład #2 - wymagania
- możliwość potwierdzania rezerwacji,
- możliwość przeglądania niepotwierdzonych i
potwierdzonych rezerwacji,
- możliwość usuwania rezerwacji.
16

17. Przykład #2 - użyte
technologie
- Electron,
- Bootstrap 3 - framework UI,
- jQuery - renderer UI,
- superagent (pakiet nodejs) - łączność z api
17

18. Przykład #2 - struktura
18

19. Przykład #2 - main.js
19

20. Przykład #2 - main.js cd.
20

21. Przykład #2 - index.js
21

22. Przykład #2 - rezultat
22

23. Przykład #2 - rezultat
23

24. Przykład #2 - rezultat
24

25. Przykład #2 - rezultat
25

26. Zasoby
- https://github.com/tkaczu/up7-electron-app
- https://github.com/tkaczu/up7-electron-api
- https://github.com/atom/electron
- http://electron.atom.io/docs/latest/tutorial/quick-
start/
- https://github.com/mafintosh/electron-prebuilt
- https://github.com/sindresorhus/awesome-electron
26

27. Dziękuje za uwagę :)
Zapraszam do dyskusji.
27