CHROME APPS
Dé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://c...
PLAN DE LA PRESENTATION
• Présentation du concept « Chrome packaged
Apps »
• Création d’une application « HelloWord »
• Dé...
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
• F...
Plus précisément
• Accès aux APIs Chromes
(http://developer.chrome.com/extensions/api
_index.html)
• Accessible depuis un ...
Et si on passait à la pratique?
• Etape1 : Création du fichier manifest
• Etape2 : Création du script de démarrage de
l’ap...
Etape 1
• Créer dossier de travail un fichier json nommé
« manifest.json» dont voici le contenu
{
"name": "Hello World!",
...
Etape 2
• Mise en place du fichier « background.js »
chrome.app.runtime.onLaunched.addListener(function() {
chrome.app.win...
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é...
Quelques Liens utiles
• http://goo.gl/yeVIQt (code source du labs)
• http://developer.chrome.com/apps/
• https://chrome.go...
Merci pour votre attention
Prochain SlideShare
Chargement dans…5
×

Comment créer des Chrome Apps ou Packaged Chrome Apps

2 238 vues

Publié le

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

Publié dans : Technologie
  • Soyez le premier à commenter

  • Soyez le premier à aimer ceci

Comment créer des Chrome Apps ou Packaged Chrome Apps

  1. 1. CHROME APPS Développer des applications natives et offline avec Chrome
  2. 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. 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. 4. C’est quoi encore ce truc de Google ?
  5. 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. 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. 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. 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. 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. 10. Etape 3 • Création « window.html» dont voici le contenu
  11. 11. Etape 4 • Déposer les icônes dans notre dossier de travail – calculator-16.png – calculator-128.png
  12. 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. 13. Quelques Liens utiles • http://goo.gl/yeVIQt (code source du labs) • http://developer.chrome.com/apps/ • https://chrome.google.com/webstore
  14. 14. Merci pour votre attention

×