1
© OCTO 2013
Créer une application Chrome avec AngularJS
Landry DEFO KUATE – Consultant Octo Technology
GDG Salé, Mai 2014
2
A propos de moi
Landry DEFO KUATE
Consultant Octo Technology
google.com/+ldefokuate
@defolandry
github.com/defus
perfug-...
3
Pourquoi construire une application Chrome ?
Utilisation de AngularJs dans une application Chrome
Les avantages
Une démo...
4
Démos!
5
Pourquoi construire une application
Chrome ?
6
Les applications Web sont bien !
7
... Jusqu’à ce qu’ils ne le soient plus !
8
Les jeux en ligne Web sont bien !
9
... Jusqu’à ce qu’ils ne le soient plus !
10
Pourquoi construire une application Chrome ?
Les Apps Chromes tournent offline par défaut
Accès aux possibilités et har...
11
Que signifie Offline concrètement ?
Aucune connexion : aéroport, tramway, désert, Mars, etc.
Mauvaise connexion : café,...
12
Infrastructure
Structure d’une application Chrome
HTML
.CSS
.JS
manifest.json
main.js
Autre
Assets
Contenu App
Packaged...
13
function saveChanges() {
// Récupérer une valeur sauvegardée dans un formulaire.
var theValue = textarea.value ;
// Enr...
14
Les utilisateurs souhaitent que leurs données soient disponible partout,
et vos applications souhaitent adresser ce bes...
15
Utilise l’API chrome.app.window pour gérer la fenêtre de l’application
Utiliser la taille de la fenêtre pour déterminer...
16
Les apps Chrome implémentent le Content Security Policy, qui a un
impact direct sur les patterns Web classiques
Ne pas ...
17
Construit en utilisant le Framework Apache Cordova
Ensemble d’API principales de Chrome supportées initialement :
Mobil...
18
Pourquoi utiliser AngularJs pour
apps Chromes ?
19
AngularJs est un Framework qui permet d’écrire du
code JavaScript de qualité
Architecture JS MVC
Possibilité d’effectue...
20
Explications dans le code 
21
github.com/defus/gContacts
github.com/GoogleChrome/chrome-app-samples
github.com/MobileChromeApps/mobile-chrome-apps
de...
Prochain SlideShare
Chargement dans…5
×

Développer une application Chrome avec AngularJs (Google Développers Group Salé 2014)

1 750 vues

Publié le

La présentation que j'ai donné lors des GDG Salé 2014.

J'introduits l'importance des développements sur la plateforme Chrome.

Ensuite j'explique pourquoi selon moi c'est mieux d'utiliser AngularJs pour réaliser es types d'application.

Je termine en montrant sur l'exemple gContacts (https://github.com/defus/gcontacts) comment faire !

Publié dans : Logiciels
0 commentaire
1 j’aime
Statistiques
Remarques
  • Soyez le premier à commenter

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

Aucune remarque pour cette diapositive

Développer une application Chrome avec AngularJs (Google Développers Group Salé 2014)

  1. 1. 1 © OCTO 2013 Créer une application Chrome avec AngularJS Landry DEFO KUATE – Consultant Octo Technology GDG Salé, Mai 2014
  2. 2. 2 A propos de moi Landry DEFO KUATE Consultant Octo Technology google.com/+ldefokuate @defolandry github.com/defus perfug-morocco.github.io
  3. 3. 3 Pourquoi construire une application Chrome ? Utilisation de AngularJs dans une application Chrome Les avantages Une démo pratique  Agenda
  4. 4. 4 Démos!
  5. 5. 5 Pourquoi construire une application Chrome ?
  6. 6. 6 Les applications Web sont bien !
  7. 7. 7 ... Jusqu’à ce qu’ils ne le soient plus !
  8. 8. 8 Les jeux en ligne Web sont bien !
  9. 9. 9 ... Jusqu’à ce qu’ils ne le soient plus !
  10. 10. 10 Pourquoi construire une application Chrome ? Les Apps Chromes tournent offline par défaut Accès aux possibilités et hardware de la plateforme Expérience utilisateur riche, immersive, engagée Distribution & Auto-updates via la Web Store Chrome Les Apps Chromes tournent sur toutes les plateformes
  11. 11. 11 Que signifie Offline concrètement ? Aucune connexion : aéroport, tramway, désert, Mars, etc. Mauvaise connexion : café, cette sale actuellement Les Apps natives Chromes peuvent fonctionner parce que l’UI est complètement offline et les données mises en cache local Offline par défaut
  12. 12. 12 Infrastructure Structure d’une application Chrome HTML .CSS .JS manifest.json main.js Autre Assets Contenu App Packaged’installation
  13. 13. 13 function saveChanges() { // Récupérer une valeur sauvegardée dans un formulaire. var theValue = textarea.value ; // Enregistrer la valeur en utilisant l’API Chrome storage. chrome.storage.local.set({'value': theValue}, function() { // Notifier que la valeur a été enregistrée message('Settings saved'); }); } Exemple offline : API chrome.storage
  14. 14. 14 Les utilisateurs souhaitent que leurs données soient disponible partout, et vos applications souhaitent adresser ce besoin Faciliter l’utilisation les fonctionnalités cloud de Chrome Utiliser l’API chrome.storage.sync pour sync petits items de données Utiliser l’API SyncFilesystem pour sync gros fichiers de données Utiliser l’API Google Drive comme backend, est extensible Utiliser l’API Cloud Push Messaging pour envoyer des messages à partir de votre serveur Utiliser l’API Identity pour identifier les utilisateur Une API pour les services Google, une autre pour les autres services tiers Cloud par défaut
  15. 15. 15 Utilise l’API chrome.app.window pour gérer la fenêtre de l’application Utiliser la taille de la fenêtre pour déterminer la taille/position initiale de la fenêtre Se rappeler de l’emplacement/taille de la fenêtre pour la prochaine fois que l’application s’exécute Vous pouvez contrôler si la barre de titre par défaut de l’OS / contrôles sont utilisés Utiliser “-webkit-app-region: drag” pour définir les régions personnalisées de drag Utiliser l’API chrome.contextMenus pour implémenter les menu contextuels Utiliser l’API chrome.alarms pour implémenter les évènements systèmes planifiés Utiliser l’API chrome.mediaGalleries pour accéder aux répertoires media de l’utilisateur Utiliser l’API URL Handlers pour intercepter les requêtes avec votre application Expérience utilisateur immersive
  16. 16. 16 Les apps Chrome implémentent le Content Security Policy, qui a un impact direct sur les patterns Web classiques Ne pas utiliser eval() Ne pas utiliser new function() Tous le code JavaScript doit-être dans des fichiers .js séparés Pas de gestionnaire d’évènements inline Les <iframe> doivent renvoyer au même domaine que le contenu initial !! Il faut déclarer d’où provient le contenu si non local !! Sécurité applicative et CSP
  17. 17. 17 Construit en utilisant le Framework Apache Cordova Ensemble d’API principales de Chrome supportées initialement : Mobile Chrome Apps Identity Payments TCP/UDP Sockets Notifications Storage Sync Filesystem Alarms
  18. 18. 18 Pourquoi utiliser AngularJs pour apps Chromes ?
  19. 19. 19 AngularJs est un Framework qui permet d’écrire du code JavaScript de qualité Architecture JS MVC Possibilité d’effectuer les tests unitaires et end-to- end Protractor (basé sur sélénium) Injection des dépendances (DI) Possibilité pour des designers et les développeurs de travailler sur le même projet HTML déclaratif sans JS embarqué Contrôles utilisateurs riches KendoUI, Angular.UI (boostrap, …) Facilité de réalisation des applications à page unique Partage facile de données entre plusieurs vues Model dans le MVC Support du Content Security Policy (CSP) Obligatoire pour les apps Chrome Même code source applicatif pour le Web et Chrome Forte communauté d’utilisateurs drivé par Google Existence d’outils de développement Pourquoi AngularJs pour les apps Chrome ?
  20. 20. 20 Explications dans le code 
  21. 21. 21 github.com/defus/gContacts github.com/GoogleChrome/chrome-app-samples github.com/MobileChromeApps/mobile-chrome-apps developer.chrome.com/apps < Merci ! > google.com/+ldefokuate @defolandry github.com/defus perfug-morocco.github.io

×