Depuis septembre 2013, google à rendu la création d'application d'un nouveau genre. Il s'agit des applications HTML/CSS/Javascript qui bénéficient des même avantages que les applications natives de bureaux (accès au système de fichier ...)

1. CHROME APPS
Développer des applications natives
et offline avec Chrome

2. 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

3. PLAN DE LA PRESENTATION
• Présentation du concept « Chrome packaged
Apps »
• Création d’une application « HelloWord »
• Déploiement d’une application Chrome Apps

4. C’est quoi encore ce truc de Google ?

5. 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…)

6. 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)

7. 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

8. 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" }
}

9. 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 }
});
});

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

11. Etape 4
• Déposer les icônes dans notre dossier de
travail
– calculator-16.png
– calculator-128.png

12. 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

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

14. Merci pour votre attention