création d’application facile en html via node-webkit

27
Création d’une application avec Node-Webkit 1

Upload: isendev

Post on 24-May-2015

345 views

Category:

Technology


6 download

DESCRIPTION

Réaliser des applications portables sur les différents systèmes d’exploitation peut sembler difficile. En effet, il peut y avoir des différences entre les divers codes. Une solution web permet une homogénéité du résultat, mais nous prive du mode complètement hors-ligne et des fonctionnalités apportées par un code natif. Node-webkit nous permet de combiner au maximum les avantages de chaque type. Présentation réalisé par SAEZ Jonathan.

TRANSCRIPT

Page 1: Création d’application facile en html via node-webkit

1

Création d’une application avec Node-

Webkit

Page 2: Création d’application facile en html via node-webkit

Application Web

Mise en place facile

Centralisé

Multi-plateforme Code de base unique

2

Page 3: Création d’application facile en html via node-webkit

Application native

Pas de serveurInstallation

rapide

Aucune connexion

internet requise

Fonctionnalité native

3

Page 4: Création d’application facile en html via node-webkit

Application native

4

Page 5: Création d’application facile en html via node-webkit

Pong

5

Web ? Natif ?

Page 6: Création d’application facile en html via node-webkit

Node-webkit

6

Page 7: Création d’application facile en html via node-webkit

Node-webkit

7

Page 8: Création d’application facile en html via node-webkit

Node-webkit

8

Page 9: Création d’application facile en html via node-webkit

Node-Webkit

Webkit-engineNode.js

9

Page 10: Création d’application facile en html via node-webkit

Node.js

10

Page 11: Création d’application facile en html via node-webkit

Node.js

Système de module NMP

(Node Package Manager)

Utilisation du JavaScript

11

Page 12: Création d’application facile en html via node-webkit

Webkit

CSSHTML JS

12

Page 13: Création d’application facile en html via node-webkit

Node-Webkit

Package.jsonApplication Run

13

Page 14: Création d’application facile en html via node-webkit

Node-Webkit : application

JavascriptHTML/CSS media

14

Page 15: Création d’application facile en html via node-webkit

Node-Webkit : package.json

Configuration de l’application

15

Page 16: Création d’application facile en html via node-webkit

Node-Webkit : package.json

16

Page 17: Création d’application facile en html via node-webkit

Node-Webkit : package.json

plugin (boolean)java (boolean)

page-cache (boolean)

title (string)width/height

(int)toolbar

(boolean)icon (string)

position (string)fullscreen –(boolean)

frame (boolean)

versionkeywords

maintainerscontributors

bugslicenses

repositories

17

Page 18: Création d’application facile en html via node-webkit

Node-Webkit : Executable

18

Renommer en app.nw

Zipper vos fichiers (app.zip)

Page 19: Création d’application facile en html via node-webkit

Node-Webkit : Executable

cat /usr/bin/nw app.nw > app && chmod +x

app

copy /b nw.exe+app.nw

app.exe

cp app.nw nw/Contents/Res

ources/

19

Page 20: Création d’application facile en html via node-webkit

Node-Webkit : Executable

20

Page 21: Création d’application facile en html via node-webkit

Phaser

21

Page 22: Création d’application facile en html via node-webkit

Phaser

MobileFramework de

jeu 2DMoteur physique

inclus

22

Page 23: Création d’application facile en html via node-webkit

Phaser : game state

createpreload

update render

23

Page 24: Création d’application facile en html via node-webkit

Phaser

TitlespriteSprite

Titlemap Collision

24

Page 25: Création d’application facile en html via node-webkit

Phaser : input

SourisClavier

Multi-touch Manette

25

Page 26: Création d’application facile en html via node-webkit

Références

http://phaser.io/

https://github.com/rogerwang/node-webkit

26

https://github.com/

kandran/pong

Page 27: Création d’application facile en html via node-webkit

27

Merci de votre attention