texte cordova electron node · texte david delavennat • centre de mathématiques laurent schwartz...
TRANSCRIPT
![Page 1: Texte Cordova Electron Node · Texte David Delavennat • Centre de Mathématiques Laurent Schwartz Ecole Polytechnique / CNRS • Mathrice GDS CNRS 2754 Electron Développement d’Application](https://reader034.vdocuments.pub/reader034/viewer/2022042123/5e9dcb0113b93253c04cc786/html5/thumbnails/1.jpg)
Texte
David Delavennat • Centre de Mathématiques Laurent Schwartz
Ecole Polytechnique / CNRS • Mathrice GDS CNRS 2754
Electron
Développement d’Application Multi-Plateforme
Cordova
Node.js
![Page 2: Texte Cordova Electron Node · Texte David Delavennat • Centre de Mathématiques Laurent Schwartz Ecole Polytechnique / CNRS • Mathrice GDS CNRS 2754 Electron Développement d’Application](https://reader034.vdocuments.pub/reader034/viewer/2022042123/5e9dcb0113b93253c04cc786/html5/thumbnails/2.jpg)
Flight Plan
2
![Page 3: Texte Cordova Electron Node · Texte David Delavennat • Centre de Mathématiques Laurent Schwartz Ecole Polytechnique / CNRS • Mathrice GDS CNRS 2754 Electron Développement d’Application](https://reader034.vdocuments.pub/reader034/viewer/2022042123/5e9dcb0113b93253c04cc786/html5/thumbnails/3.jpg)
Licence
3
![Page 4: Texte Cordova Electron Node · Texte David Delavennat • Centre de Mathématiques Laurent Schwartz Ecole Polytechnique / CNRS • Mathrice GDS CNRS 2754 Electron Développement d’Application](https://reader034.vdocuments.pub/reader034/viewer/2022042123/5e9dcb0113b93253c04cc786/html5/thumbnails/4.jpg)
4
http://docs.sencha.com/extjs/6.2.0/guides/quick_start/introduction.html http://docs.sencha.com/extjs/6.2.0/index.html
http://docs.sencha.com/extjs/6.2.0/guides/application_architecture/developing_for_multiple_screens_and_environments.html
http://docs.sencha.com/extjs/6.2.0/guides/core_concepts/theming.html http://docs.sencha.com/extjs/6.2.0/guides/core_concepts/material_theme.html
http://docs.sencha.com/extjs/6.2.0/guides/core_concepts/accessibility.html http://docs.sencha.com/extjs/6.2.0/guides/backend_connectors/direct/specification.html
https://www.sencha.com/blog/creating-installable-desktop-applications-with-ext-js-and-electron
Documentation
![Page 5: Texte Cordova Electron Node · Texte David Delavennat • Centre de Mathématiques Laurent Schwartz Ecole Polytechnique / CNRS • Mathrice GDS CNRS 2754 Electron Développement d’Application](https://reader034.vdocuments.pub/reader034/viewer/2022042123/5e9dcb0113b93253c04cc786/html5/thumbnails/5.jpg)
5
Model / Schema
Serialized data
Store
Proxy
Record
}Abstract sources
}Modelized data
Terminology
![Page 6: Texte Cordova Electron Node · Texte David Delavennat • Centre de Mathématiques Laurent Schwartz Ecole Polytechnique / CNRS • Mathrice GDS CNRS 2754 Electron Développement d’Application](https://reader034.vdocuments.pub/reader034/viewer/2022042123/5e9dcb0113b93253c04cc786/html5/thumbnails/6.jpg)
6
Terminology
![Page 7: Texte Cordova Electron Node · Texte David Delavennat • Centre de Mathématiques Laurent Schwartz Ecole Polytechnique / CNRS • Mathrice GDS CNRS 2754 Electron Développement d’Application](https://reader034.vdocuments.pub/reader034/viewer/2022042123/5e9dcb0113b93253c04cc786/html5/thumbnails/7.jpg)
Design Pattern MVC
7
Model ViewController
Proxy
Storeload
AJAX
update
commit
WebUI
Web Service
ModelController Data
SQL LDAP noSQL
load
View
commit
![Page 8: Texte Cordova Electron Node · Texte David Delavennat • Centre de Mathématiques Laurent Schwartz Ecole Polytechnique / CNRS • Mathrice GDS CNRS 2754 Electron Développement d’Application](https://reader034.vdocuments.pub/reader034/viewer/2022042123/5e9dcb0113b93253c04cc786/html5/thumbnails/8.jpg)
Design Pattern MVVM
8
Model
View
ViewModelStoreload
AJAX
update
commit
WebUI
Web Service
ModelController Dataload
commit
ViewControllerevent
SQL LDAP noSQL
View
Proxy
![Page 9: Texte Cordova Electron Node · Texte David Delavennat • Centre de Mathématiques Laurent Schwartz Ecole Polytechnique / CNRS • Mathrice GDS CNRS 2754 Electron Développement d’Application](https://reader034.vdocuments.pub/reader034/viewer/2022042123/5e9dcb0113b93253c04cc786/html5/thumbnails/9.jpg)
Two-way Data-Binding
9
Model
ViewModel
View 1 View 2
http://docs.sencha.com/extjs/5.1/application_architecture/view_models_data_binding.htmlhttp://dev.sencha.com/ext/5.1.0/examples/kitchensink/?theme=crisp#data-binding
johnnamecivilityname john
M.
![Page 10: Texte Cordova Electron Node · Texte David Delavennat • Centre de Mathématiques Laurent Schwartz Ecole Polytechnique / CNRS • Mathrice GDS CNRS 2754 Electron Développement d’Application](https://reader034.vdocuments.pub/reader034/viewer/2022042123/5e9dcb0113b93253c04cc786/html5/thumbnails/10.jpg)
Architecture > Two-way Data-Binding
10
http://docs.sencha.com/extjs/5.1/5.1.0-apidocs/#!/api/Ext.app.ViewModel-cfg-stores http://docs.sencha.com/extjs/5.1/5.1.0-apidocs/#!/api/Ext.app.bind.Formula
![Page 11: Texte Cordova Electron Node · Texte David Delavennat • Centre de Mathématiques Laurent Schwartz Ecole Polytechnique / CNRS • Mathrice GDS CNRS 2754 Electron Développement d’Application](https://reader034.vdocuments.pub/reader034/viewer/2022042123/5e9dcb0113b93253c04cc786/html5/thumbnails/11.jpg)
Architecture > Routers
11http://docs.sencha.com/extjs/5.1/application_architecture/router.html
• Routes • before • action • conditions • after • unmatched • multi-route #service/email|calendar
![Page 12: Texte Cordova Electron Node · Texte David Delavennat • Centre de Mathématiques Laurent Schwartz Ecole Polytechnique / CNRS • Mathrice GDS CNRS 2754 Electron Développement d’Application](https://reader034.vdocuments.pub/reader034/viewer/2022042123/5e9dcb0113b93253c04cc786/html5/thumbnails/12.jpg)
Sencha cmd
12http://docs.sencha.com/extjs/5.1/application_architecture/application_architecture.htmlhttp://docs.sencha.com/extjs/5.1/getting_started/getting_started.html http://dev.sencha.com/ext/5.0.0/examples/ticket-app/index.html
![Page 13: Texte Cordova Electron Node · Texte David Delavennat • Centre de Mathématiques Laurent Schwartz Ecole Polytechnique / CNRS • Mathrice GDS CNRS 2754 Electron Développement d’Application](https://reader034.vdocuments.pub/reader034/viewer/2022042123/5e9dcb0113b93253c04cc786/html5/thumbnails/13.jpg)
Sencha cmd -> create app
13
![Page 14: Texte Cordova Electron Node · Texte David Delavennat • Centre de Mathématiques Laurent Schwartz Ecole Polytechnique / CNRS • Mathrice GDS CNRS 2754 Electron Développement d’Application](https://reader034.vdocuments.pub/reader034/viewer/2022042123/5e9dcb0113b93253c04cc786/html5/thumbnails/14.jpg)
Sencha cmd -> choose sdk
14
![Page 15: Texte Cordova Electron Node · Texte David Delavennat • Centre de Mathématiques Laurent Schwartz Ecole Polytechnique / CNRS • Mathrice GDS CNRS 2754 Electron Développement d’Application](https://reader034.vdocuments.pub/reader034/viewer/2022042123/5e9dcb0113b93253c04cc786/html5/thumbnails/15.jpg)
Sencha cmd -> code
15
CORS
http://www.sencha.com/blog/optimizing-the-development-process-with-sencha-cmd-5
![Page 16: Texte Cordova Electron Node · Texte David Delavennat • Centre de Mathématiques Laurent Schwartz Ecole Polytechnique / CNRS • Mathrice GDS CNRS 2754 Electron Développement d’Application](https://reader034.vdocuments.pub/reader034/viewer/2022042123/5e9dcb0113b93253c04cc786/html5/thumbnails/16.jpg)
Sencha cmd -> build app
16
![Page 17: Texte Cordova Electron Node · Texte David Delavennat • Centre de Mathématiques Laurent Schwartz Ecole Polytechnique / CNRS • Mathrice GDS CNRS 2754 Electron Développement d’Application](https://reader034.vdocuments.pub/reader034/viewer/2022042123/5e9dcb0113b93253c04cc786/html5/thumbnails/17.jpg)
Cordova
![Page 18: Texte Cordova Electron Node · Texte David Delavennat • Centre de Mathématiques Laurent Schwartz Ecole Polytechnique / CNRS • Mathrice GDS CNRS 2754 Electron Développement d’Application](https://reader034.vdocuments.pub/reader034/viewer/2022042123/5e9dcb0113b93253c04cc786/html5/thumbnails/18.jpg)
Cordova• Dependencies
• https://nodejs.org/en/download/ • Installation
• npm install -g cordova • Project creation
• cordova create hello com.example.hello HelloWorld • Project building
• cd hello && cordova platform add android —save • cordova build android
• Project running • cordova run android
• Use plugins • cordova plugin ls
• cordova-plugin-camera 2.1.0 "Camera" • cordova-plugin-whitelist 1.2.1 "Whitelist"
• Icon customization • http://cordova.apache.org/docs/en/latest/config_ref/images.html
![Page 19: Texte Cordova Electron Node · Texte David Delavennat • Centre de Mathématiques Laurent Schwartz Ecole Polytechnique / CNRS • Mathrice GDS CNRS 2754 Electron Développement d’Application](https://reader034.vdocuments.pub/reader034/viewer/2022042123/5e9dcb0113b93253c04cc786/html5/thumbnails/19.jpg)
Cordova
![Page 20: Texte Cordova Electron Node · Texte David Delavennat • Centre de Mathématiques Laurent Schwartz Ecole Polytechnique / CNRS • Mathrice GDS CNRS 2754 Electron Développement d’Application](https://reader034.vdocuments.pub/reader034/viewer/2022042123/5e9dcb0113b93253c04cc786/html5/thumbnails/20.jpg)
Electron
![Page 21: Texte Cordova Electron Node · Texte David Delavennat • Centre de Mathématiques Laurent Schwartz Ecole Polytechnique / CNRS • Mathrice GDS CNRS 2754 Electron Développement d’Application](https://reader034.vdocuments.pub/reader034/viewer/2022042123/5e9dcb0113b93253c04cc786/html5/thumbnails/21.jpg)
Electron
• Build cross platform desktop apps with JavaScript, HTML, and CSS • https://github.com/electron/electron
• Install electron • https://github.com/electron-userland/electron-prebuilt
• Package your apps • https://github.com/electron-userland/electron-packager
• Deploy your apps • https://github.com/electron-userland/electron-builder
![Page 22: Texte Cordova Electron Node · Texte David Delavennat • Centre de Mathématiques Laurent Schwartz Ecole Polytechnique / CNRS • Mathrice GDS CNRS 2754 Electron Développement d’Application](https://reader034.vdocuments.pub/reader034/viewer/2022042123/5e9dcb0113b93253c04cc786/html5/thumbnails/22.jpg)
Electron• Dependencies
• https://nodejs.org/en/download/ • Installation
• npm install electron -save • npm install electron-packager —save-dev • npm install electron-builder —save-dev
• Project loading • npm start
• Project building • npm run-script build
• Icon customization • http://cordova.apache.org/docs/en/latest/config_ref/images.html
}mutually exclusive
![Page 23: Texte Cordova Electron Node · Texte David Delavennat • Centre de Mathématiques Laurent Schwartz Ecole Polytechnique / CNRS • Mathrice GDS CNRS 2754 Electron Développement d’Application](https://reader034.vdocuments.pub/reader034/viewer/2022042123/5e9dcb0113b93253c04cc786/html5/thumbnails/23.jpg)
Electron
![Page 24: Texte Cordova Electron Node · Texte David Delavennat • Centre de Mathématiques Laurent Schwartz Ecole Polytechnique / CNRS • Mathrice GDS CNRS 2754 Electron Développement d’Application](https://reader034.vdocuments.pub/reader034/viewer/2022042123/5e9dcb0113b93253c04cc786/html5/thumbnails/24.jpg)
Electron
Ubuntu 14.04 - amd64
Scientific Linux 6.2 - x86
Centos 7 - amd64
![Page 25: Texte Cordova Electron Node · Texte David Delavennat • Centre de Mathématiques Laurent Schwartz Ecole Polytechnique / CNRS • Mathrice GDS CNRS 2754 Electron Développement d’Application](https://reader034.vdocuments.pub/reader034/viewer/2022042123/5e9dcb0113b93253c04cc786/html5/thumbnails/25.jpg)
Electron
![Page 26: Texte Cordova Electron Node · Texte David Delavennat • Centre de Mathématiques Laurent Schwartz Ecole Polytechnique / CNRS • Mathrice GDS CNRS 2754 Electron Développement d’Application](https://reader034.vdocuments.pub/reader034/viewer/2022042123/5e9dcb0113b93253c04cc786/html5/thumbnails/26.jpg)
Electron
![Page 27: Texte Cordova Electron Node · Texte David Delavennat • Centre de Mathématiques Laurent Schwartz Ecole Polytechnique / CNRS • Mathrice GDS CNRS 2754 Electron Développement d’Application](https://reader034.vdocuments.pub/reader034/viewer/2022042123/5e9dcb0113b93253c04cc786/html5/thumbnails/27.jpg)
Electron
![Page 28: Texte Cordova Electron Node · Texte David Delavennat • Centre de Mathématiques Laurent Schwartz Ecole Polytechnique / CNRS • Mathrice GDS CNRS 2754 Electron Développement d’Application](https://reader034.vdocuments.pub/reader034/viewer/2022042123/5e9dcb0113b93253c04cc786/html5/thumbnails/28.jpg)
Electron
![Page 29: Texte Cordova Electron Node · Texte David Delavennat • Centre de Mathématiques Laurent Schwartz Ecole Polytechnique / CNRS • Mathrice GDS CNRS 2754 Electron Développement d’Application](https://reader034.vdocuments.pub/reader034/viewer/2022042123/5e9dcb0113b93253c04cc786/html5/thumbnails/29.jpg)
29
Electron
![Page 30: Texte Cordova Electron Node · Texte David Delavennat • Centre de Mathématiques Laurent Schwartz Ecole Polytechnique / CNRS • Mathrice GDS CNRS 2754 Electron Développement d’Application](https://reader034.vdocuments.pub/reader034/viewer/2022042123/5e9dcb0113b93253c04cc786/html5/thumbnails/30.jpg)
30
Hack time! : micro service
anf2016 $ ruby bin/server.rb
anf2016 $ bundle
http://localhost:4567/indico/event/4http://localhost:4567/indico/event/4?start=1&limit=15
http://localhost:4567/indico/event/rawhttp://localhost:4567/indico/event
![Page 31: Texte Cordova Electron Node · Texte David Delavennat • Centre de Mathématiques Laurent Schwartz Ecole Polytechnique / CNRS • Mathrice GDS CNRS 2754 Electron Développement d’Application](https://reader034.vdocuments.pub/reader034/viewer/2022042123/5e9dcb0113b93253c04cc786/html5/thumbnails/31.jpg)
31
Hack time! : Applicationanf2016 $ rake electron:builder anf2016 $ cd src/starterapp anf2016/src/starterapp $ sencha app watch
anf2016 $ cp -Rv data/src/starterapp src/starterapp anf2016 $ cp -Rv data/stc/startapp src/
http://localhost:4567/dev/index.html
anf2016 $ ruby bin/server.rb
http://localhost:4567/index.htmlanf2016/src/starterapp $ sencha app build