LET'S TAKE THIS OFFLINE

Comment faire une application qui fonctionne hors connexion ?
@ClaireReynaud

www.babelbytes.com
Et vous ?
Sujet de cette présentation

Des méthodes pour implémenter des applications
en mode déconnecté
Exemples:
iOS

REST API

Dj...
Le code de la démo
https://github.com/creynaud/notes-iphone-app
https://github.com/creynaud/notes-server
https://awesomeno...
Qu'est-ce que j'entends
par "fonctionner en mode
déconnecté" ?
Pas de réseau ou un réseau lent

Photo by Danka Peter
Pas de réseau ou un réseau lent

Photo by James Evans
Pas de réseau ou un réseau lent

Un utilisateur ne devrait pas attendre
pour relire du contenu auquel il a déjà
accédé
Pas de réseau ou un réseau lent

Un utilisateur devrait pouvoir poster du
contenu à tout moment
Pourquoi implémenter un
mode déconnecté ?
L'application Facebook il y a un an
Pas vraiment l'expérience
utilisateur qu'on souhaite
avoir...
On s'attend à toujours voir du contenu
Les réseaux mobiles sont différents
La latence est élevée

La vitesse est très variable, ce qui est le pire en
terme d'exp...
Comment se comporte mon app
en conditions réelles ?
Et si on réimplémentait
Evernote ?
Enfin, juste la partie notes de texte ;)
En 3 étapes

1. Lire des notes en mode déconnecté

2. Créer des notes en mode déconnecté

3. Mettre à jour des notes en mo...
Une seule chose à
retenir : versioner les
objets notes !
Architecture d'une application mobile
REST API

GET /notes

GET /notes/{uuid}
POST /notes

PUT /notes/{uuid}

DELETE /notes/{uuid}
Photo by Ilham Rahmansyah

1. Lire des notes en mode
déconnecté
Lire des notes en mode déconnecté

Lire les documents JSON depuis un
cache local côté client
HTTP a un mécanisme
de cache, non ?
On a besoin d'un cache de plus haut
niveau

Si on veut faire des recherches en mode déconnecté
Ou si on veut faire de l'éd...
Qu'est-ce qu'on garde du caching HTTP ?
Par exemple, je ne veux pas télécharger la même version
d'un document JSON si elle...
Le cache HTTP, en
pratique, ça donne quoi ?
Cache HTTP GET avec ETAG

Article de blog sur NSURLCache, les politiques de cache
HTTP et les ETAG
Photo by Ilham Rahmansyah

2. Créer des notes en
mode déconnecté
Créer des notes en mode déconnecté

1. Stocker le document JSON qui doit être posté (par
exemple dans SQLite)

2. Essayer ...
Photo by Ilham Rahmansyah

3. Résoudre des conflits
lors de l'édition de notes
Résoudre des conflits lors de l'édition
Si vous laissez la possibilité à l'utilisateur d'éditer en
mode déconnecté, des co...
La détection de conflit
devrait être intégrée à
l'API REST !
La *détection*, pas la
*résolution*
Ça donne quoi dans
l'API REST ?
Et la synchronisation dans
l'application ?
Deux mots sur le back-end et l'API REST
REST API

GET /notes-uuids
GET /notes

GET /notes/{uuid}
POST /notes

PUT /notes/{uuid}

DELETE /notes/{uuid}
Django REST framework

Ajouter un UUID et une révision dans les objets Note
Rejeter les requêtes PUT ou DELETE si la révis...
Résumé

Ajouter un UUID et une révision dans tous les
documents JSON

Lecture hors connexion: stocker les documents JSON
e...
Merci ! Questions ?
Prochain SlideShare
Chargement dans…5
×

CocoaHeads Lyon - Mode Déconnecté dans une app iOS

1 528 vues

Publié le

Présentation du 14/11/2013 à CocoaHeads Lyon.
Comment faire une application qui fonctionne hors connexion ?

Le code des exemples est sur github :
https://github.com/creynaud/notes-iphone-app
https://github.com/creynaud/notes-server

Le post de blog (en anglais) : https://www.clairereynaud.net/blog/adding-offline-mode-to-your-mobile-app/

0 commentaire
2 j’aime
Statistiques
Remarques
  • Soyez le premier à commenter

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

Aucune remarque pour cette diapositive

CocoaHeads Lyon - Mode Déconnecté dans une app iOS

  1. 1. LET'S TAKE THIS OFFLINE Comment faire une application qui fonctionne hors connexion ?
  2. 2. @ClaireReynaud www.babelbytes.com
  3. 3. Et vous ?
  4. 4. Sujet de cette présentation Des méthodes pour implémenter des applications en mode déconnecté Exemples: iOS REST API Django REST Framework
  5. 5. Le code de la démo https://github.com/creynaud/notes-iphone-app https://github.com/creynaud/notes-server https://awesomenotes.herokuapp.com/api/
  6. 6. Qu'est-ce que j'entends par "fonctionner en mode déconnecté" ?
  7. 7. Pas de réseau ou un réseau lent Photo by Danka Peter
  8. 8. Pas de réseau ou un réseau lent Photo by James Evans
  9. 9. Pas de réseau ou un réseau lent Un utilisateur ne devrait pas attendre pour relire du contenu auquel il a déjà accédé
  10. 10. Pas de réseau ou un réseau lent Un utilisateur devrait pouvoir poster du contenu à tout moment
  11. 11. Pourquoi implémenter un mode déconnecté ?
  12. 12. L'application Facebook il y a un an
  13. 13. Pas vraiment l'expérience utilisateur qu'on souhaite avoir...
  14. 14. On s'attend à toujours voir du contenu
  15. 15. Les réseaux mobiles sont différents La latence est élevée La vitesse est très variable, ce qui est le pire en terme d'expérience utilisateur "Faster Websites: Crash Course on Frontend Performance (Part 1/2)", Devoxx 2012
  16. 16. Comment se comporte mon app en conditions réelles ?
  17. 17. Et si on réimplémentait Evernote ? Enfin, juste la partie notes de texte ;)
  18. 18. En 3 étapes 1. Lire des notes en mode déconnecté 2. Créer des notes en mode déconnecté 3. Mettre à jour des notes en mode déconnecté et résoudre des conflits
  19. 19. Une seule chose à retenir : versioner les objets notes !
  20. 20. Architecture d'une application mobile
  21. 21. REST API GET /notes GET /notes/{uuid} POST /notes PUT /notes/{uuid} DELETE /notes/{uuid}
  22. 22. Photo by Ilham Rahmansyah 1. Lire des notes en mode déconnecté
  23. 23. Lire des notes en mode déconnecté Lire les documents JSON depuis un cache local côté client
  24. 24. HTTP a un mécanisme de cache, non ?
  25. 25. On a besoin d'un cache de plus haut niveau Si on veut faire des recherches en mode déconnecté Ou si on veut faire de l'édition en mode déconnecté J'ai choisi d'utiliser CoreData au-dessus de SQLite pour mon app d'exemple. Selon les besoins, stocker le document JSON "brut" dans un store clé/valeur peut suffir.
  26. 26. Qu'est-ce qu'on garde du caching HTTP ? Par exemple, je ne veux pas télécharger la même version d'un document JSON si elle est déjà dans mon cache HTTP. C'est possible avec les headers HTTP suivants : Cache-Control Etag et If-None-Match ou Last-Modified et If-Modified-Since
  27. 27. Le cache HTTP, en pratique, ça donne quoi ?
  28. 28. Cache HTTP GET avec ETAG Article de blog sur NSURLCache, les politiques de cache HTTP et les ETAG
  29. 29. Photo by Ilham Rahmansyah 2. Créer des notes en mode déconnecté
  30. 30. Créer des notes en mode déconnecté 1. Stocker le document JSON qui doit être posté (par exemple dans SQLite) 2. Essayer de poster le document JSON vers le server en tâche de fond 3. Marquer le document JSON comme posté avec succès seulement si le POST retourne OK 4. En cas d'échec du POST, essayer à nouveau de poster le document JSON à la prochaine synchronization avec le serveur
  31. 31. Photo by Ilham Rahmansyah 3. Résoudre des conflits lors de l'édition de notes
  32. 32. Résoudre des conflits lors de l'édition Si vous laissez la possibilité à l'utilisateur d'éditer en mode déconnecté, des conflits vont se produire (même s'il n'y a pas d'édition multi-utilisateur).
  33. 33. La détection de conflit devrait être intégrée à l'API REST !
  34. 34. La *détection*, pas la *résolution*
  35. 35. Ça donne quoi dans l'API REST ?
  36. 36. Et la synchronisation dans l'application ?
  37. 37. Deux mots sur le back-end et l'API REST
  38. 38. REST API GET /notes-uuids GET /notes GET /notes/{uuid} POST /notes PUT /notes/{uuid} DELETE /notes/{uuid}
  39. 39. Django REST framework Ajouter un UUID et une révision dans les objets Note Rejeter les requêtes PUT ou DELETE si la révision n'est pas spécifiée (400 Bad request) Rejeter les requêtes PUT ou DELETE si la révision n'est pas la révision courante (409 Conflict) Ajouter le header ETAG Tout le reste est déjà fourni ! https://github.com/creynaud/notes-server
  40. 40. Résumé Ajouter un UUID et une révision dans tous les documents JSON Lecture hors connexion: stocker les documents JSON en local côté client Création hors connexion: poster vers le serveur en background et re-essayer en cas d'échec Mise à jour hors connexion: gérer les conflits Essayer de tirer profit du cache HTTP (headers Cache-Control, Etag et If-None-Match)
  41. 41. Merci ! Questions ?

×