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

1 440 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
0 commentaire
0 j’aime
Statistiques
Remarques
  • Soyez le premier à commenter

  • Soyez le premier à aimer ceci

Aucun téléchargement
Vues
Nombre de vues
1 440
Sur SlideShare
0
Issues des intégrations
0
Intégrations
5
Actions
Partages
0
Téléchargements
12
Commentaires
0
J’aime
0
Intégrations 0
Aucune incorporation

Aucune remarque pour cette diapositive

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

×