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/

1. LET'S TAKE THIS OFFLINE
Comment faire une application qui fonctionne hors connexion ?

2. @ClaireReynaud
www.babelbytes.com

3. Et vous ?

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. 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. Qu'est-ce que j'entends
par "fonctionner en mode
déconnecté" ?

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

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

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. Pas de réseau ou un réseau lent
Un utilisateur devrait pouvoir poster du
contenu à tout moment

11. Pourquoi implémenter un
mode déconnecté ?

12. L'application Facebook il y a un an

13. Pas vraiment l'expérience
utilisateur qu'on souhaite
avoir...

14. On s'attend à toujours voir du contenu

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. Comment se comporte mon app
en conditions réelles ?

17. Et si on réimplémentait
Evernote ?
Enfin, juste la partie notes de texte ;)

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. Une seule chose à
retenir : versioner les
objets notes !

20. Architecture d'une application mobile

21. REST API
GET /notes
GET /notes/{uuid}
POST /notes
PUT /notes/{uuid}
DELETE /notes/{uuid}

22. Photo by Ilham Rahmansyah
1. Lire des notes en mode
déconnecté

23. Lire des notes en mode déconnecté
Lire les documents JSON depuis un
cache local côté client

24. HTTP a un mécanisme
de cache, non ?

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. 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. Le cache HTTP, en
pratique, ça donne quoi ?

28. Cache HTTP GET avec ETAG
Article de blog sur NSURLCache, les politiques de cache
HTTP et les ETAG

29. Photo by Ilham Rahmansyah
2. Créer des notes en
mode déconnecté

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. Photo by Ilham Rahmansyah
3. Résoudre des conflits
lors de l'édition de notes

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. La détection de conflit
devrait être intégrée à
l'API REST !

34. La *détection*, pas la
*résolution*

35. Ça donne quoi dans
l'API REST ?

36. Et la synchronisation dans
l'application ?

37. Deux mots sur le back-end et l'API REST

38. REST API
GET /notes-uuids
GET /notes
GET /notes/{uuid}
POST /notes
PUT /notes/{uuid}
DELETE /notes/{uuid}

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. 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. Merci ! Questions ?