cocoaheads lyon - mode déconnecté dans une app ios
DESCRIPTION
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/TRANSCRIPT
![Page 1: CocoaHeads Lyon - Mode Déconnecté dans une app iOS](https://reader034.vdocuments.mx/reader034/viewer/2022052600/5586e0a0d8b42a7f398b4669/html5/thumbnails/1.jpg)
LET'S TAKE THIS OFFLINEComment faire une application qui fonctionne hors connexion ?
![Page 2: CocoaHeads Lyon - Mode Déconnecté dans une app iOS](https://reader034.vdocuments.mx/reader034/viewer/2022052600/5586e0a0d8b42a7f398b4669/html5/thumbnails/2.jpg)
www.babelbytes.com
@ClaireReynaud
![Page 3: CocoaHeads Lyon - Mode Déconnecté dans une app iOS](https://reader034.vdocuments.mx/reader034/viewer/2022052600/5586e0a0d8b42a7f398b4669/html5/thumbnails/3.jpg)
Et vous ?
![Page 4: CocoaHeads Lyon - Mode Déconnecté dans une app iOS](https://reader034.vdocuments.mx/reader034/viewer/2022052600/5586e0a0d8b42a7f398b4669/html5/thumbnails/4.jpg)
Sujet de cette présentationDes méthodes pour implémenter des applicationsen mode déconnectéExemples:
iOSREST APIDjango REST Framework
![Page 5: CocoaHeads Lyon - Mode Déconnecté dans une app iOS](https://reader034.vdocuments.mx/reader034/viewer/2022052600/5586e0a0d8b42a7f398b4669/html5/thumbnails/5.jpg)
Le code de la démohttps://github.com/creynaud/notes-iphone-apphttps://github.com/creynaud/notes-serverhttps://awesomenotes.herokuapp.com/api/
![Page 6: CocoaHeads Lyon - Mode Déconnecté dans une app iOS](https://reader034.vdocuments.mx/reader034/viewer/2022052600/5586e0a0d8b42a7f398b4669/html5/thumbnails/6.jpg)
Qu'est-ce que j'entendspar "fonctionner en mode
déconnecté" ?
![Page 7: CocoaHeads Lyon - Mode Déconnecté dans une app iOS](https://reader034.vdocuments.mx/reader034/viewer/2022052600/5586e0a0d8b42a7f398b4669/html5/thumbnails/7.jpg)
Photo by Danka PeterPas de réseau ou un réseau lent
![Page 8: CocoaHeads Lyon - Mode Déconnecté dans une app iOS](https://reader034.vdocuments.mx/reader034/viewer/2022052600/5586e0a0d8b42a7f398b4669/html5/thumbnails/8.jpg)
Photo by James EvansPas de réseau ou un réseau lent
![Page 9: CocoaHeads Lyon - Mode Déconnecté dans une app iOS](https://reader034.vdocuments.mx/reader034/viewer/2022052600/5586e0a0d8b42a7f398b4669/html5/thumbnails/9.jpg)
Pas de réseau ou un réseau lent
Un utilisateur ne devrait pas attendrepour relire du contenu auquel il a déjà
accédé
![Page 10: CocoaHeads Lyon - Mode Déconnecté dans une app iOS](https://reader034.vdocuments.mx/reader034/viewer/2022052600/5586e0a0d8b42a7f398b4669/html5/thumbnails/10.jpg)
Pas de réseau ou un réseau lent
Un utilisateur devrait pouvoir poster ducontenu à tout moment
![Page 11: CocoaHeads Lyon - Mode Déconnecté dans une app iOS](https://reader034.vdocuments.mx/reader034/viewer/2022052600/5586e0a0d8b42a7f398b4669/html5/thumbnails/11.jpg)
Pourquoi implémenter unmode déconnecté ?
![Page 12: CocoaHeads Lyon - Mode Déconnecté dans une app iOS](https://reader034.vdocuments.mx/reader034/viewer/2022052600/5586e0a0d8b42a7f398b4669/html5/thumbnails/12.jpg)
L'application Facebook il y a un an
![Page 13: CocoaHeads Lyon - Mode Déconnecté dans une app iOS](https://reader034.vdocuments.mx/reader034/viewer/2022052600/5586e0a0d8b42a7f398b4669/html5/thumbnails/13.jpg)
Pas vraiment l'expérienceutilisateur qu'on souhaite
avoir...
![Page 14: CocoaHeads Lyon - Mode Déconnecté dans une app iOS](https://reader034.vdocuments.mx/reader034/viewer/2022052600/5586e0a0d8b42a7f398b4669/html5/thumbnails/14.jpg)
On s'attend à toujours voir du contenu
![Page 15: CocoaHeads Lyon - Mode Déconnecté dans une app iOS](https://reader034.vdocuments.mx/reader034/viewer/2022052600/5586e0a0d8b42a7f398b4669/html5/thumbnails/15.jpg)
Les réseaux mobiles sont différentsLa latence est élevéeLa vitesse est très variable, ce qui est le pire enterme d'expérience utilisateur"Faster Websites: Crash Course on FrontendPerformance (Part 1/2)", Devoxx 2012
![Page 16: CocoaHeads Lyon - Mode Déconnecté dans une app iOS](https://reader034.vdocuments.mx/reader034/viewer/2022052600/5586e0a0d8b42a7f398b4669/html5/thumbnails/16.jpg)
Comment se comporte mon appen conditions réelles ?
![Page 17: CocoaHeads Lyon - Mode Déconnecté dans une app iOS](https://reader034.vdocuments.mx/reader034/viewer/2022052600/5586e0a0d8b42a7f398b4669/html5/thumbnails/17.jpg)
Et si on réimplémentaitEvernote ?
Enfin, juste la partie notes de texte ;)
![Page 18: CocoaHeads Lyon - Mode Déconnecté dans une app iOS](https://reader034.vdocuments.mx/reader034/viewer/2022052600/5586e0a0d8b42a7f398b4669/html5/thumbnails/18.jpg)
En 3 étapesLire des notes en mode déconnecté1.Créer des notes en mode déconnecté2.Mettre à jour des notes en mode déconnecté etrésoudre des conflits
3.
![Page 19: CocoaHeads Lyon - Mode Déconnecté dans une app iOS](https://reader034.vdocuments.mx/reader034/viewer/2022052600/5586e0a0d8b42a7f398b4669/html5/thumbnails/19.jpg)
Une seule chose àretenir : versioner les
objets notes !
![Page 20: CocoaHeads Lyon - Mode Déconnecté dans une app iOS](https://reader034.vdocuments.mx/reader034/viewer/2022052600/5586e0a0d8b42a7f398b4669/html5/thumbnails/20.jpg)
Architecture d'une application mobile
![Page 21: CocoaHeads Lyon - Mode Déconnecté dans une app iOS](https://reader034.vdocuments.mx/reader034/viewer/2022052600/5586e0a0d8b42a7f398b4669/html5/thumbnails/21.jpg)
REST APIGET /notesGET /notes/{uuid}POST /notesPUT /notes/{uuid}DELETE /notes/{uuid}
![Page 22: CocoaHeads Lyon - Mode Déconnecté dans une app iOS](https://reader034.vdocuments.mx/reader034/viewer/2022052600/5586e0a0d8b42a7f398b4669/html5/thumbnails/22.jpg)
1. Lire des notes en modedéconnecté
Photo by Ilham Rahmansyah
![Page 23: CocoaHeads Lyon - Mode Déconnecté dans une app iOS](https://reader034.vdocuments.mx/reader034/viewer/2022052600/5586e0a0d8b42a7f398b4669/html5/thumbnails/23.jpg)
Lire des notes en mode déconnecté
Lire les documents JSON depuis uncache local côté client
![Page 24: CocoaHeads Lyon - Mode Déconnecté dans une app iOS](https://reader034.vdocuments.mx/reader034/viewer/2022052600/5586e0a0d8b42a7f398b4669/html5/thumbnails/24.jpg)
HTTP a un mécanismede cache, non ?
![Page 25: CocoaHeads Lyon - Mode Déconnecté dans une app iOS](https://reader034.vdocuments.mx/reader034/viewer/2022052600/5586e0a0d8b42a7f398b4669/html5/thumbnails/25.jpg)
On a besoin d'un cache de plus hautniveau
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 SQLitepour mon app d'exemple.Selon les besoins, stocker le document JSON "brut"dans un store clé/valeur peut suffir.
![Page 26: CocoaHeads Lyon - Mode Déconnecté dans une app iOS](https://reader034.vdocuments.mx/reader034/viewer/2022052600/5586e0a0d8b42a7f398b4669/html5/thumbnails/26.jpg)
Qu'est-ce qu'on garde du caching HTTP ?Par exemple, je ne veux pas télécharger la même versiond'un document JSON si elle est déjà dans mon cacheHTTP.C'est possible avec les headers HTTP suivants :
Cache-ControlEtag et If-None-Matchou Last-Modified et If-Modified-Since
![Page 27: CocoaHeads Lyon - Mode Déconnecté dans une app iOS](https://reader034.vdocuments.mx/reader034/viewer/2022052600/5586e0a0d8b42a7f398b4669/html5/thumbnails/27.jpg)
Le cache HTTP, enpratique, ça donne quoi ?
![Page 28: CocoaHeads Lyon - Mode Déconnecté dans une app iOS](https://reader034.vdocuments.mx/reader034/viewer/2022052600/5586e0a0d8b42a7f398b4669/html5/thumbnails/28.jpg)
Cache HTTP GET avec ETAG
Article de blog sur NSURLCache, les politiques de cacheHTTP et les ETAG
![Page 29: CocoaHeads Lyon - Mode Déconnecté dans une app iOS](https://reader034.vdocuments.mx/reader034/viewer/2022052600/5586e0a0d8b42a7f398b4669/html5/thumbnails/29.jpg)
2. Créer des notes enmode déconnecté
Photo by Ilham Rahmansyah
![Page 30: CocoaHeads Lyon - Mode Déconnecté dans une app iOS](https://reader034.vdocuments.mx/reader034/viewer/2022052600/5586e0a0d8b42a7f398b4669/html5/thumbnails/30.jpg)
Créer des notes en mode déconnectéStocker le document JSON qui doit être posté (parexemple dans SQLite)
1.
Essayer de poster le document JSON vers le serveren tâche de fond
2.
Marquer le document JSON comme posté avecsuccès seulement si le POST retourne OK
3.
En cas d'échec du POST, essayer à nouveau deposter le document JSON à la prochainesynchronization avec le serveur
4.
![Page 31: CocoaHeads Lyon - Mode Déconnecté dans une app iOS](https://reader034.vdocuments.mx/reader034/viewer/2022052600/5586e0a0d8b42a7f398b4669/html5/thumbnails/31.jpg)
3. Résoudre des conflitslors de l'édition de notes
Photo by Ilham Rahmansyah
![Page 32: CocoaHeads Lyon - Mode Déconnecté dans une app iOS](https://reader034.vdocuments.mx/reader034/viewer/2022052600/5586e0a0d8b42a7f398b4669/html5/thumbnails/32.jpg)
Résoudre des conflits lors de l'éditionSi vous laissez la possibilité à l'utilisateur d'éditer enmode déconnecté, des conflits vont se produire (mêmes'il n'y a pas d'édition multi-utilisateur).
![Page 33: CocoaHeads Lyon - Mode Déconnecté dans une app iOS](https://reader034.vdocuments.mx/reader034/viewer/2022052600/5586e0a0d8b42a7f398b4669/html5/thumbnails/33.jpg)
La détection de conflitdevrait être intégrée à
l'API REST !
![Page 34: CocoaHeads Lyon - Mode Déconnecté dans une app iOS](https://reader034.vdocuments.mx/reader034/viewer/2022052600/5586e0a0d8b42a7f398b4669/html5/thumbnails/34.jpg)
La *détection*, pas la*résolution*
![Page 35: CocoaHeads Lyon - Mode Déconnecté dans une app iOS](https://reader034.vdocuments.mx/reader034/viewer/2022052600/5586e0a0d8b42a7f398b4669/html5/thumbnails/35.jpg)
Ça donne quoi dansl'API REST ?
![Page 36: CocoaHeads Lyon - Mode Déconnecté dans une app iOS](https://reader034.vdocuments.mx/reader034/viewer/2022052600/5586e0a0d8b42a7f398b4669/html5/thumbnails/36.jpg)
Et la synchronisation dansl'application ?
![Page 37: CocoaHeads Lyon - Mode Déconnecté dans une app iOS](https://reader034.vdocuments.mx/reader034/viewer/2022052600/5586e0a0d8b42a7f398b4669/html5/thumbnails/37.jpg)
Deux mots sur le back-end et l'API REST
![Page 38: CocoaHeads Lyon - Mode Déconnecté dans une app iOS](https://reader034.vdocuments.mx/reader034/viewer/2022052600/5586e0a0d8b42a7f398b4669/html5/thumbnails/38.jpg)
REST APIGET /notes-uuidsGET /notesGET /notes/{uuid}POST /notesPUT /notes/{uuid}DELETE /notes/{uuid}
![Page 39: CocoaHeads Lyon - Mode Déconnecté dans une app iOS](https://reader034.vdocuments.mx/reader034/viewer/2022052600/5586e0a0d8b42a7f398b4669/html5/thumbnails/39.jpg)
Django REST frameworkAjouter un UUID et une révision dans les objets NoteRejeter les requêtes PUT ou DELETE si la révisionn'est pas spécifiée (400 Bad request)Rejeter les requêtes PUT ou DELETE si la révisionn'est pas la révision courante (409 Conflict)Ajouter le header ETAGTout le reste est déjà fourni !https://github.com/creynaud/notes-server
![Page 40: CocoaHeads Lyon - Mode Déconnecté dans une app iOS](https://reader034.vdocuments.mx/reader034/viewer/2022052600/5586e0a0d8b42a7f398b4669/html5/thumbnails/40.jpg)
RésuméAjouter un UUID et une révision dans tous lesdocuments JSONLecture hors connexion: stocker les documents JSONen local côté clientCréation hors connexion: poster vers le serveur enbackground et re-essayer en cas d'échecMise à jour hors connexion: gérer les conflitsEssayer de tirer profit du cache HTTP (headersCache-Control, Etag et If-None-Match)
![Page 41: CocoaHeads Lyon - Mode Déconnecté dans une app iOS](https://reader034.vdocuments.mx/reader034/viewer/2022052600/5586e0a0d8b42a7f398b4669/html5/thumbnails/41.jpg)
Merci ! Questions ?