27
O Electronie słów kilka Aplikacje desktopowe w JavaScript Bartosz Tkaczewski email: [email protected] twitter: @btkaczewski github: tkaczu 1

O Electronie słów kilka

Embed Size (px)

Citation preview

Page 1: O Electronie słów kilka

O Electronie słów kilka

Aplikacje desktopowe w JavaScript

Bartosz Tkaczewskiemail: [email protected] twitter: @btkaczewski github: tkaczu1

Page 2: O Electronie słów kilka

Plan prezentacjiElectron - 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

Page 3: O Electronie słów kilka

Electron - co to?

Framework który daje możliwość tworzenia wieloplatformowych aplikacji desktopowych, pisanych

przy użyciu JavaScript/HTML/CSS.

3

Page 4: O Electronie słów kilka

Electron - jak działa?

Electron działa w oparciu o io.js oraz Chromium

4

Page 5: O Electronie słów kilka

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

Page 6: O Electronie słów kilka

Electron - możliwości

- Wieloplatformowość (Mac, Linux, Windows)

- Automatyczne aktualizacje

- Raportowanie błędów

- Okienkowe instalatory

- Natywne menu & systemowe notyfikacji

6

Page 7: O Electronie słów kilka

Instalacja

7

Page 8: O Electronie słów kilka

Przykład #1

http://electron.atom.io/docs/latest/tutorial/quick-start/

8

Page 9: O Electronie słów kilka

Przykład #1 - struktura

9

Page 10: O Electronie słów kilka

Przykład #1 - package.json

10

Page 11: O Electronie słów kilka

Przykład #1 - main.js

11

Page 12: O Electronie słów kilka

Przykład #1 - index.html

12

Page 13: O Electronie słów kilka

Przykład #1 - start

13

Page 14: O Electronie słów kilka

Przykład #1 - rezultat

14

Page 15: O Electronie słów kilka

Case Study - Przykład #2

Utworzenie aplikacji wspomagającej pracę recepcji klubu fitness.

15

Page 16: O Electronie słów kilka

Przykład #2 - wymagania

- możliwość potwierdzania rezerwacji,

- możliwość przeglądania niepotwierdzonych i potwierdzonych rezerwacji,

- możliwość usuwania rezerwacji.

16

Page 17: O Electronie słów kilka

Przykład #2 - użyte technologie

- Electron,

- Bootstrap 3 - framework UI,

- jQuery - renderer UI,

- superagent (pakiet nodejs) - łączność z api

17

Page 18: O Electronie słów kilka

Przykład #2 - struktura

18

Page 19: O Electronie słów kilka

Przykład #2 - main.js

19

Page 20: O Electronie słów kilka

Przykład #2 - main.js cd.

20

Page 21: O Electronie słów kilka

Przykład #2 - index.js

21

Page 22: O Electronie słów kilka

Przykład #2 - rezultat

22

Page 23: O Electronie słów kilka

Przykład #2 - rezultat

23

Page 24: O Electronie słów kilka

Przykład #2 - rezultat

24

Page 25: O Electronie słów kilka

Przykład #2 - rezultat

25

Page 26: O Electronie słów kilka

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

Page 27: O Electronie słów kilka

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

27