Mode offline : Notre application mobile fonctionne au niveau -5 d’un parking

Votre application mobile fonctionne-t-elle parfaitement en mode offline ?

Pour Virtuo, c’est indispensable. Virtuo est la startup française qui propose une nouvelle expérience de location de voiture. Tout se fait depuis un mobile : la création de compte, la réservation, l’état des lieux et l’ouverture de la voiture. Grâce à ça, plus de file au guichet pour récupérer sa clé. Parce qu’on n’a pas peur des challenges, nos clients n’ont jamais de clé et utilisent leur smartphone ou leur smartwatch pour ouvrir et démarrer leur véhicule pendant toute la durée de la location. Et ça fonctionne, puisque Virtuo totalise déjà plus de 7.000 jours de locations qui commencent toujours de la même manière : dans le sous-sol d’un parking, sans accès à la 3G.

Au programme : BLE : La seule solution rapide et vraiment offline Cache HTTP : Connaissez vous le header max-stale Synchronisation et conflits : Quelle stratégie adopter Programmation réactive : Pourquoi elle nous a aidé à nous améliorer UX/Design : Comment un bandeau permet d’améliorer l'expérience Stratégie de cache en fonction du contexte : Pourquoi ne peut-on pas appliquer la même stratégie avant, pendant ou après une réservation

Transcript

1. #DevoxxFR #VirtuoDevoxx Devoxx France 2017 Mathieu HAUSHERR @mhausherr Romain POTIER @potierromain 1
2. #DevoxxFR #VirtuoDevoxx 2 Mode offline Notre application fonctionne au niveau -5 d’un parking
3. #DevoxxFR #VirtuoDevoxx 3
4. #DevoxxFR #VirtuoDevoxx 4
5. #DevoxxFR #VirtuoDevoxx 5
6. #DevoxxFR #VirtuoDevoxx 6
7. #DevoxxFR #VirtuoDevoxx 7
8. #DevoxxFR #VirtuoDevoxx 8
9. #DevoxxFR #VirtuoDevoxx 9
10. #DevoxxFR #VirtuoDevoxx 10
11. #DevoxxFR #VirtuoDevoxx 11
12. #DevoxxFR #VirtuoDevoxx 12
13. #DevoxxFR #VirtuoDevoxx 13
14. #DevoxxFR #VirtuoDevoxx 14 version 0.0.1-alpha
15. #DevoxxFR #VirtuoDevoxx 15
16. #DevoxxFR #VirtuoDevoxx 16 Plus jamais ça !
17. #DevoxxFR #VirtuoDevoxx Cache Http 17 Connection: keep-alive Content-Encoding: gzip Content-Type: application/json; charset=utf-8 Date: Thu, 23 Feb 2017 16:31:56 GMT Cache-Control: max-age=600 Cache-Control: max-stale=2419200
18. #DevoxxFR #VirtuoDevoxx Cache Http 18 Connection: keep-alive Content-Encoding: gzip Content-Type: application/json; charset=utf-8 Date: Thu, 23 Feb 2017 16:31:56 GMT Cache-Control: max-age=600 Cache-Control: max-stale=2419200
19. #DevoxxFR #VirtuoDevoxx Cache Http 19 Connection: keep-alive Content-Encoding: gzip Content-Type: application/json; charset=utf-8 Date: Thu, 23 Feb 2017 16:31:56 GMT Cache-Control: max-age=600 Cache-Control: max-stale=2419200
20. #DevoxxFR #VirtuoDevoxx Cache Http 20 Download Cache Expiration max-age max-stale Real cache Expiration
21. #DevoxxFR #VirtuoDevoxx OkHttp Interceptor 21 public class VInterceptor implements Interceptor { @Override public Response intercept(Chain chain) throws IOException { Request.Builder builder = chain.request().newBuilder(); return chain.proceed(builder.build()); } }
22. #DevoxxFR #VirtuoDevoxx OkHttp Interceptor 22 if (isNetworkAvailable && !forceCache) { … } else { addCacheControl(builder); response = chain.proceed(builder.build()); }
23. #DevoxxFR #VirtuoDevoxx OkHttp Interceptor 23 if (isNetworkAvailable && !forceCache) { try { response = chain.proceed(builder.build()); } catch (Exception e) { if (GET.equals(chain.request().method()) { addCacheControl(builder); response = chain.proceed(builder.build()); } else { throw e; } } }
24. #DevoxxFR #VirtuoDevoxx OkHttp Interceptor 24 if (isNetworkAvailable && !forceCache) { try { response = chain.proceed(builder.build()); } catch (Exception e) { if (GET.equals(chain.request().method()) { addCacheControl(builder); response = chain.proceed(builder.build()); } else { throw e; } } }
25. #DevoxxFR #VirtuoDevoxx OkHttp Interceptor 25 if (isNetworkAvailable && !forceCache) { try { response = chain.proceed(builder.build()); } catch (Exception e) { if (GET.equals(chain.request().method()) { addCacheControl(builder); response = chain.proceed(builder.build()); } else { throw e; } } }
26. #DevoxxFR #VirtuoDevoxx OkHttp Interceptor 26 void addCacheControl(Request.Builder builder) { builder.cacheControl(new CacheControl.Builder() .onlyIfCached() .maxStale(28, TimeUnit.DAYS) .build()); }
27. #DevoxxFR #VirtuoDevoxx Cache Swift func getData() -> Data? { try? Data(contentsOf: cacheURL) } func set(data: Data) { try? data.write(to: cacheURL, options: [.atomic]) } var isCacheStillValid: Bool { guard let attributes = try? FileManager.default.attributesOfItem(atPath: pathForCacheFile) else { return false } guard let modificationDate = attributes[FileAttributeKey.modificationDate] as? Date else { return false } return self.cacheDuration - modificationDate.timeIntervalSinceNow > 0 } 27
28. #DevoxxFR #VirtuoDevoxx Cache Swift func getData() -> Data? { try? Data(contentsOf: cacheURL) } func set(data: Data) { try? data.write(to: cacheURL, options: [.atomic]) } var isCacheStillValid: Bool { guard let attributes = try? FileManager.default.attributesOfItem(atPath: pathForCacheFile) else { return false } guard let modificationDate = attributes[FileAttributeKey.modificationDate] as? Date else { return false } return self.cacheDuration - modificationDate.timeIntervalSinceNow > 0 } 28
29. #DevoxxFR #VirtuoDevoxx Cache Swift switch cacheMode { case .standard: if !isNetworkReachable && readFromCache(handler) { return } case .forceCache: _ = readFromCache(handler); return case .twoStepLoading: _ = readFromCache(handler) } 29
30. #DevoxxFR #VirtuoDevoxx Cache Swift switch cacheMode { case .standard: if !isNetworkReachable && readFromCache(handler) { return } case .forceCache: _ = readFromCache(handler); return case .twoStepLoading: _ = readFromCache(handler) } 30
31. #DevoxxFR #VirtuoDevoxx Cache Swift switch cacheMode { case .standard: if !isNetworkReachable && readFromCache(handler) { return } case .forceCache: _ = readFromCache(handler); return case .twoStepLoading: _ = readFromCache(handler) } 31
32. #DevoxxFR #VirtuoDevoxx 32
33. #DevoxxFR #VirtuoDevoxx Chuck Interceptor 33 OkHttpClient client = new OkHttpClient.Builder() .addInterceptor(new ChuckInterceptor(context)) .addInterceptor(new VInterceptor(context)) .build();
34. #DevoxxFR #VirtuoDevoxx God Eye #if DEBUG if !arguments.contains("-no-godeye") { GodEye.makeEye(with: window!) } #endif 34
35. #DevoxxFR #VirtuoDevoxx 35 Bien joué les gars !
36. #DevoxxFR #VirtuoDevoxx 36 version 1.0.0
37. #DevoxxFR #VirtuoDevoxx 37
38. #DevoxxFR #VirtuoDevoxx Déclaration la plus rapide possible, image avec sha1 38 POST /inspection [{
 "created_at": …,
 "zone_id": …,
 "image_sha1": …
 }]
39. #DevoxxFR #VirtuoDevoxx 39
40. #DevoxxFR #VirtuoDevoxx JobScheduler sur Android 40 @RequiresApi(api = Build.VERSION_CODES.LOLLIPOP) public class InspectionJobService extends JobService { @Override public boolean onStartJob(final JobParameters params) {} @Override public boolean onStopJob(JobParameters params) {} }
41. #DevoxxFR #VirtuoDevoxx JobScheduler sur Android 41 @RequiresApi(api = Build.VERSION_CODES.LOLLIPOP) public class InspectionJobService extends JobService { @Override public boolean onStartJob(final JobParameters params) {} @Override public boolean onStopJob(JobParameters params) {} }
42. #DevoxxFR #VirtuoDevoxx JobScheduler sur Android, Notation de la location 42 @Override public boolean onStartJob(final JobParameters params) { inspectionService.sendReport(map).subscribeOn(…).observeOn(…) .subscribe((Action1) (bookingResult) -> { jobFinished(params, false); }, (throwable) -> { jobFinished(params, NetworkUtil.noNetworkError(throwable)); } );
43. #DevoxxFR #VirtuoDevoxx JobScheduler sur Android, Notation de la location 43 @Override public boolean onStartJob(final JobParameters params) { inspectionService.sendReport(map).subscribeOn(…).observeOn(…) .subscribe((Action1) (bookingResult) -> { jobFinished(params, false); }, (throwable) -> { jobFinished(params, NetworkUtil.noNetworkError(throwable)); } );
44. #DevoxxFR #VirtuoDevoxx JobScheduler sur Android, Notation de la location 44 @Override public boolean onStartJob(final JobParameters params) { inspectionService.sendReport(map).subscribeOn(…).observeOn(…) .subscribe((Action1) (bookingResult) -> { jobFinished(params, false); }, (throwable) -> { jobFinished(params, NetworkUtil.noNetworkError(throwable)); } );
45. #DevoxxFR #VirtuoDevoxx JobScheduler sur Android, Ajout dans le scheduler 45 PersistableBundle persistableBundle = new PersistableBundle(); persistableBundle.putString(…); JobScheduler scheduler = (JobScheduler) getActivity().getSystemService(Context.JOB_SCHED ULER_SERVICE);
46. #DevoxxFR #VirtuoDevoxx JobScheduler sur Android, Ajout dans le scheduler 46 PersistableBundle persistableBundle = new PersistableBundle(); persistableBundle.putString(…); JobScheduler scheduler = (JobScheduler) getActivity().getSystemService(Context.JOB_SCHED ULER_SERVICE);
47. #DevoxxFR #VirtuoDevoxx JobScheduler sur Android, Ajout dans le scheduler 47 JobInfo jobInfo = new JobInfo.Builder(99, new ComponentName(context, InspectionJobService.class)) .setRequiredNetworkType(JobInfo.NETWORK_TYPE_ANY) .setPersisted(true) .setExtras(persistableBundle) .build(); scheduler.schedule(jobInfo);
48. #DevoxxFR #VirtuoDevoxx JobScheduler sur Android, Ajout dans le scheduler 48 JobInfo jobInfo = new JobInfo.Builder(99, new ComponentName(context, InspectionJobService.class)) .setRequiredNetworkType(JobInfo.NETWORK_TYPE_ANY) .setPersisted(true) .setExtras(persistableBundle) .build(); scheduler.schedule(jobInfo);
49. #DevoxxFR #VirtuoDevoxx JobScheduler sur Android, Ajout dans le scheduler 49 JobInfo jobInfo = new JobInfo.Builder(99, new ComponentName(context, InspectionJobService.class)) .setRequiredNetworkType(JobInfo.NETWORK_TYPE_ANY) .setPersisted(true) .setExtras(persistableBundle) .build(); scheduler.schedule(jobInfo);
50. #DevoxxFR #VirtuoDevoxx JobScheduler sur Android, Ajout dans le scheduler 50 JobInfo jobInfo = new JobInfo.Builder(99, new ComponentName(context, InspectionJobService.class)) .setRequiredNetworkType(JobInfo.NETWORK_TYPE_ANY) .setPersisted(true) .setExtras(persistableBundle) .build(); scheduler.schedule(jobInfo);
51. #DevoxxFR #VirtuoDevoxx Notifications silencieuses iOS 51 <key>UIBackgroundModes</key> <array> <string>remote-notification</string> </array>
52. #DevoxxFR #VirtuoDevoxx 52 version 1.1.0
53. #DevoxxFR #VirtuoDevoxx 53
54. #DevoxxFR #VirtuoDevoxx 54
55. #DevoxxFR #VirtuoDevoxx 55
56. #DevoxxFR #VirtuoDevoxx 56
57. #DevoxxFR #VirtuoDevoxx Fetch de Picasso 57 new Picasso.Builder(context) .build() .load(imageUrl) .fetch(callback);
58. #DevoxxFR #VirtuoDevoxx Image cache Swift class ImageCache { var inMemoryCache: [URL: UIImage] = [:] func image(forURL url: URL) -> UIImage? { if let image = inMemoryCache[url] { return image } if let image = readImageFromCache(url) { inMemoryCache[urlString] = image; return image } else { return nil } } } 58
59. #DevoxxFR #VirtuoDevoxx 59
60. #DevoxxFR #VirtuoDevoxx 60 Premiers retours utilisateurs
61. #DevoxxFR #VirtuoDevoxx 61
62. #DevoxxFR #VirtuoDevoxx 62
63. #DevoxxFR #VirtuoDevoxx 63
64. #DevoxxFR #VirtuoDevoxx 64
65. #DevoxxFR #VirtuoDevoxx 65
66. #DevoxxFR #VirtuoDevoxx 66
67. #DevoxxFR #VirtuoDevoxx 67 Optimiser le code
68. #DevoxxFR #VirtuoDevoxx Programmation réactive, transfert depuis le badge 68 Mise à jour du serveur Mise à jour du cache Téléchargement de la clé 1 seul feedback utilisateur
69. #DevoxxFR #VirtuoDevoxx Programmation réactive, transfert depuis le badge 69 bookingService.update(params).subscribeOn(…).observeOn(…) .flatMap((Func1) (bookingResult) -> { return bookingService.list();}) .flatMap((Func1) (bookingListResult) -> { return carConnector.downloadKey(…); }) .subscribe( (Action1) (aVoid) -> {okTransfert();}, (throwable) -> {manageErrors(throwable);} );
70. #DevoxxFR #VirtuoDevoxx Programmation réactive, transfert depuis le badge 70 bookingService.update(params).subscribeOn(…).observeOn(…) .flatMap((Func1) (bookingResult) -> { return bookingService.list();}) .flatMap((Func1) (bookingListResult) -> { return carConnector.downloadKey(…); }) .subscribe( (Action1) (aVoid) -> {okTransfert();}, (throwable) -> {manageErrors(throwable);} );
71. #DevoxxFR #VirtuoDevoxx Programmation réactive, transfert depuis le badge 71 bookingService.update(params).subscribeOn(…).observeOn(…) .flatMap((Func1) (bookingResult) -> { return bookingService.list();}) .flatMap((Func1) (bookingListResult) -> { return carConnector.downloadKey(…); }) .subscribe( (Action1) (aVoid) -> {okTransfert();}, (throwable) -> {manageErrors(throwable);} );
72. #DevoxxFR #VirtuoDevoxx Programmation réactive, transfert depuis le badge 72 bookingService.update(params).subscribeOn(…).observeOn(…) .flatMap((Func1) (bookingResult) -> { return bookingService.list();}) .flatMap((Func1) (bookingListResult) -> { return carConnector.downloadKey(…); }) .subscribe( (Action1) (aVoid) -> {okTransfert();}, (throwable) -> {manageErrors(throwable);} );
73. #DevoxxFR #VirtuoDevoxx Programmation réactive, transfert depuis le badge 73 bookingService.update(params).subscribeOn(…).observeOn(…) .flatMap((Func1) (bookingResult) -> { return bookingService.list();}) .flatMap((Func1) (bookingListResult) -> { return carConnector.downloadKey(…); }) .subscribe( (Action1) (aVoid) -> {okTransfert();}, (throwable) -> {manageErrors(throwable);} );
74. #DevoxxFR #VirtuoDevoxx Programmation réactive, clés partenaire 74 Mise à jour du serveur Téléchargement des photos Téléchargement de la clé Mise à jour d’un compteur
75. #DevoxxFR #VirtuoDevoxx Programmation réactive, clés partenaire 75 Mise à jour du serveur Téléchargement des photos Téléchargement de la clé Mise à jour d’un compteur Mise à jour du serveur Téléchargement des photos Téléchargement de la clé Mise à jour d’un compteur Mise à jour du serveur Téléchargement des photos Téléchargement de la clé Mise à jour d’un compteur
76. #DevoxxFR #VirtuoDevoxx Programmation réactive, clés partenaire 76 Observable.from(Lists.newArrayList(id1, id2, id3)).subscribeOn(…) .flatMap((Func1) (interventionId) -> { return interventionService.create(param); }) .flatMap((Func1) (interventionResult) -> { return downloadDamagesPictures(interventionResult.damages);}) .flatMap((Func1) (result) -> { return carConnector.downloadKey(…); })
77. #DevoxxFR #VirtuoDevoxx Programmation réactive, clés partenaire 77 Observable.from(Lists.newArrayList(id1, id2, id3)).subscribeOn(…) .flatMap((Func1) (interventionId) -> { return interventionService.create(param); }) .flatMap((Func1) (interventionResult) -> { return downloadDamagesPictures(interventionResult.damages);}) .flatMap((Func1) (result) -> { return carConnector.downloadKey(…); })
78. #DevoxxFR #VirtuoDevoxx Programmation réactive, clés partenaire 78 Observable.from(Lists.newArrayList(id1, id2, id3)).subscribeOn(…) .flatMap((Func1) (interventionId) -> { return interventionService.create(param); }) .flatMap((Func1) (interventionResult) -> { return downloadDamagesPictures(interventionResult.damages);}) .flatMap((Func1) (result) -> { return carConnector.downloadKey(…); })
79. #DevoxxFR #VirtuoDevoxx Programmation réactive, clés partenaire 79 Observable.from(Lists.newArrayList(id1, id2, id3)).subscribeOn(…) .flatMap((Func1) (interventionId) -> { return interventionService.create(param); }) .flatMap((Func1) (interventionResult) -> { return downloadDamagesPictures(interventionResult.damages);}) .flatMap((Func1) (result) -> { return carConnector.downloadKey(…); })
80. #DevoxxFR #VirtuoDevoxx Programmation réactive, clés partenaire 80 Observable.from(Lists.newArrayList(id1, id2, id3)).subscribeOn(…) .flatMap((Func1) (interventionId) -> { return interventionService.create(param); }) .flatMap((Func1) (interventionResult) -> { return downloadDamagesPictures(interventionResult.damages);}) .flatMap((Func1) (result) -> { return carConnector.downloadKey(…); })
81. #DevoxxFR #VirtuoDevoxx Programmation réactive, clés partenaire 81 .doOnNext((Action1) (aVoid) -> { updateView(++index); }) .toList() .subscribe( (Action1) (aVoid) -> {okTransfert();}, (throwable) -> {manageErrors(throwable);} );
82. #DevoxxFR #VirtuoDevoxx Programmation réactive, clés partenaire 82 .doOnNext((Action1) (aVoid) -> { updateView(++index); }) .toList() .subscribe( (Action1) (aVoid) -> {okTransfert();}, (throwable) -> {manageErrors(throwable);} );
83. #DevoxxFR #VirtuoDevoxx Programmation réactive, clés partenaire 83 .doOnNext((Action1) (aVoid) -> { updateView(++index); }) .toList() .subscribe( (Action1) (aVoid) -> {okTransfert();}, (throwable) -> {manageErrors(throwable);} );
84. #DevoxxFR #VirtuoDevoxx 84 version 2.0.0
85. #DevoxxFR #VirtuoDevoxx Work in progress 85 Firebase
86. #DevoxxFR #VirtuoDevoxx Pour tester 86
87. #DevoxxFR #VirtuoDevoxx Code promo 87 DEVOXX15
88. #DevoxxFR #VirtuoDevoxx 88 THANKS