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 KUATEConsultant Octo Technology

google.com/+ldefokuate

@defolandry

github.com/defus

perfug-morocco.github.io

3

Pourquoi construire une application Chrome ?

Utilisation de AngularJs dans une application ChromeLes avantages

Une démo pratique

Agenda

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

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

Infrastructure

Structure d’une application Chrome

HTML.CSS

.JS

manifest.json

main.js

AutreAssets

Contenu App

Pac

kage

d’in

stal

latio

n

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

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 ChromeUtiliser 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 utilisateurUne API pour les services Google, une autre pour les autres services tiers

Cloud par défaut

15

Utilise l’API chrome.app.window pour gérer la fenêtre de l’applicationUtiliser 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ésUtiliser “-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

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

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

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’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 vuesModel 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

Explications dans le code

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