Le document présente une introduction à la création d'applications Chrome à l'aide d'AngularJS, soulignant les avantages d'une telle approche comme la capacité de fonctionner hors ligne et l'accès aux fonctionnalités matérielles de la plateforme. Il décrit également l'architecture d'une application Chrome, les différentes APIs disponibles et les raisons pour lesquelles AngularJS est un choix approprié pour ce type d'applications. Enfin, il fournit des références et des ressources supplémentaires pour les développeurs intéressés.

1. 1
© OCTO 2013
Créer une application Chrome avec AngularJS
Landry DEFO KUATE – Consultant Octo Technology
GDG Salé, Mai 2014

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
Pourquoi construire une application Chrome ?
Utilisation de AngularJs dans une application Chrome
Les avantages
Une démo pratique 
Agenda

4. 4
Démos!

5. 5
Pourquoi construire une application
Chrome ?

6. 6
Les applications Web sont bien !

7. 7
... Jusqu’à ce qu’ils ne le soient plus !

8. 8
Les jeux en ligne Web sont bien !

9. 9
... Jusqu’à ce qu’ils ne le soient plus !

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
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
Infrastructure
Structure d’une application Chrome
HTML
.CSS
.JS
manifest.json
main.js
Autre
Assets
Contenu App
Packaged’installation

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
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
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
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
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
Pourquoi utiliser AngularJs pour
apps Chromes ?

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
Explications dans le code 

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