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