CHROME APPSDévelopper des applications natives

et offline avec Chrome

Qui suis-je?

• Bruno SOUFO• Développeur web• Fondateur de la startup Novazen

Novazen• http://www.novazen.net• http://campusinfos.net• http://www.novaweb.cm

PLAN DE LA PRESENTATION

• Présentation du concept « Chrome packaged Apps »

• Création d’une application « HelloWord »

• Déploiement d’une application Chrome Apps

C’est quoi encore ce truc de Google ?

Plus précisément

• Des applications développer en HTML/CSS JavaScripts

• Fonctionnent hors de la fenêtre du navigateur• Fonctionnent en mode offline• Fonctionnent comme des applications de

bureaux natives ( accès aux systèmes de fichiers, media…)

Plus précisément

• Accès aux APIs Chromes (http://developer.chrome.com/extensions/api_index.html)

• Accessible depuis un menu démarrer spécifique

• Lancement officile le 5 septembre 2013 (http://chrome.blogspot.com/2013/09/a-new-breed-of-chrome-apps.html)

Et si on passait à la pratique?• Etape1 : Création du fichier manifest

• Etape2 : Création du script de démarrage de l’application

• Etape 3 : Création de notre application web

• Etape 4 : Mise en place des icônes

• Etape 5 : Déploiement de notre application

Etape 1

• Créer dossier de travail un fichier json nommé « manifest.json» dont voici le contenu

{ "name": "Hello World!", "description": "Mon premier Chrome App.", "version": "0.1", "app": {

"background": { "scripts": ["background.js"] } },

"icons": { "16": "calculator-16.png", "128": "calculator-128.png" }}

Etape 2• Mise en place du fichier « background.js »

chrome.app.runtime.onLaunched.addListener(function() { chrome.app.window.create('window.html', {

'bounds': {

'width': 400, 'height': 500 } });

});

Etape 3• Création « window.html» dont voici le contenu

Etape 4• Déposer les icônes dans notre dossier de

travail– calculator-16.png– calculator-128.png

Etape 5• Déploiement de l’application– Activer les flags• Aller à chrome://flags.• Rechercher "API des extensions expérimentales “ et

activer• Redemarrer chrome.

– Chargée l’application• Aller à chrome://extensions• Activer le mode développeur• Charger l’application

Quelques Liens utiles• http://goo.gl/yeVIQt (code source du labs)• http://developer.chrome.com/apps/ • https://chrome.google.com/webstore

Merci pour votre attention