comment créer des chrome apps ou packaged chrome apps
DESCRIPTION
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 ...)TRANSCRIPT
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