La Duck Conf 2018 : "How to make your mobile happy?"

HOW TO
MAKE YOUR
MOBILE API
HAPPY ?

>
Frédéric MILLARD
Architecte practice mobile
fmillard@octo.com
Nicolas LAURENT
Delivery manager Practice mobile
nlaurent@octo.com

72% des désinstalls liées à
des problèmes de perf
25% d’utilisateurs perdus
au delà de 4 secondes
40% au delà de 10
secondes
Sur 30 à 40 apps en
moyenne, seulement 10
sont utilisées
77% des nouvelles apps
installées ne sont pas
utilisées plus de 3 jours
26% sont
désinstallées
au premier
lancement
Près de
3 millions
d’apps
EXIGENCEUTILISATEURS
COMPÉTITION

Les 4 APIs disponibles :
●  Vérification de la non existence d’un utilisateur en base
●  Validation du couple de mot de passe
●  Création du compte
●  Connexion
Nom
Prénom
Email
NEXT
Mot de passe
Répétez mot de passe
NEXT
Félicitations Bob !
LOGIN
Email
Mot de passe
NEXT
Bonjour Bob !
Action 1
Action 2
Exemple : Tunnel d’enrôlement API driven
Vérification du user Validation mot de passe
Création du compte
Connexion

Nom
Prénom
Email
Mot de passe
NEXT
Félicitations Bob !
Action 1
Action 2
Exemple : Tunnel d’enrôlement UX driven
Création du user
1 seule API POST /api/users qui réalise :
1.  La vérification des données,
2.  La création de compte
3.  Le login
Requête
POST /api/users
{
name: 'bob',
firstname: 'mauranne',
email: 'bob@maurane.fr',
password: 'duck@conf'
}
Réponse
201 Created
+  token d’authentification en header http

Exemple : Afficher une liste de contacts
Depuis un référentiel d’organisation interne
●  Nom, prénom, photo
●  Date d’entrée dans la société
●  Intitulé du poste, niveau, type de contrat
●  Équipe de rattachement, manager, collaborateurs
●  Pays, site géographique
●  Coordonnées : email, téléphones
●  Compétences
●  Projets en cours et passés
Prénom Nom, job
Equipe
Nom du manager
Photo

{
id: '654'
name: 'Lebowsky',
firstname: 'Jeffrey',
picture: 'http://pics.com/jeff.png',
entry_date: '2013-04-22T06:00:00Z',
site: '23',
country: 'California'
email: 'bob.mauranne@duckcorp.com',
mobile_phone_number: '0605030402',
landline_phone_number: '0102030405',
team: '2344',
manager: '231',
managed: ['476', '378', '666'],
job: 'Senior architect',
job_type: 'permanent',
skills: {...}, projects: {...}
}
Jeffrey LEBOWSKY, Senior architect
Central office
Helen RIPLEY

Jeffrey LEBOWSKY, Senior architect
Central office
Helen RIPLEY
{
id: '654'
name: 'Lebowsky',
entry_date: '2013-04-22T06:00:00Z',
site: '23',
team: '2344',
manager: '231',
managed: ['476', '378', '666'],
}

{
id: '654'
name: 'Lebowsky',
first_name: 'Jeffrey',
site_coordinates: '33.9192233, -118.4061577',
email: 'jeff.lebowsky@duckcorp.com',
team: 'Central Office',
manager: '231',
manager_name: 'Helen RIPLEY',
}
{
id: '654'
name: 'Lebowsky',
entry_date: '2013-04-22T06:00:00Z',
site: '23',
team: '2344',
manager: '231',
managed: ['476', '378', '666'],
}

{
id: '654'
name: 'Lebowsky',
first_name: 'Jeffrey',
site_coordinates: '33.9192233, -118.4061577',
email: 'jeff.lebowsky@duckcorp.com',
team: 'Central Office',
manager: '231',
manager_name: 'Helen RIPLEY',
}
N’exposez que les données
réellement utilisées
Privilégiez des APIs
pragmatiques qui limitent
le nombre d’appels réseau

Mais encore ...
Prenez l’usage et les contraintes mobile en considération :
-  En limitant le nombre d’objets, et en conséquence la taille du payload renvoyé par le serveur ...
-  … voire même en incitant le client à filtrer encore plus ses recherches en amont
-  En utilisant des formats compressés
Requête
GET /api/employees?range=0-25
Réponse
206 Partial Content
Content-Range: 0-25/2347
Accept-Range: employees 50
[
{...},
{...},
{...},
]
Requête
GET /api/search?name=fr*
Accept-Encoding: gzip, deflate
Paginez Autorisez les formats
d’échanges compressés (zip,
protobuf...)
Forcez l’utilisateur à affiner sa
recherche en renvoyant un
code d’erreur applicatif
Requête
GET /api/employees?name=F*
Réponse
400 Bad request
412 Precondition failed
413 Request entity too large

#3
Permettre au
mobile
d’exploiter le
cache HTTP

Non cacheable Non cacheable Cacheable
{
}
GET /api/mix-cache-and-nocache
{
}
GET /api/nocache
{
}
GET /api/cache

Response header HTTP
Cache-Control
-  max-age=86400
-  private, max-age=600
-  no-store
-  no-cache
ETag
-  hash de la ressource
Request header HTTP
If-None-Match
Utiliser les bonnes entêtes HTTP
=> le client HTTP fait le reste

<soapenv:Envelope
xmlns:soapenv="http://schemas.xmlsoap.org/soap/envelope/"
xmlns:m="http://www.mymeteo.com/meteo">
<soapenv:Header>
</soapenv:Header>
<soapenv:Body>
<m:releve>
<m:temperature>
<m:valeur>6.0</m:valeur>
<m:unite>celsius</m:unite>
</m:temperature>
<m:lieu>
<m:ville>Bordeaux</m:ville>
</m:lieu>
</m:releve>
</soapenv:Body>
</soapenv:Envelope>
{
"city": "bordeaux"
"value": 6.0,
"unit": "celsius",
}
Enveloppe SOAP/XML Payload REST/Json
Size matters...

#5
Et comment
mettre en
place tout
ça ?

“Mon enseigne” 4,4/5
“Le nom du magasin”
Commentaire 1
Commentaire 2
Commentaire 3
Commentaire 4
BE 1
BE 2
Exemple : Fiche magasin

BE 1 BE 2
Perte de
réseau ?
Rollback
context
transactionnel
?
2 plateformes
?
Roadmaps
?

BE 1 BE 2API
MOB
Designer vos
ressources
Filtrer et
alléger les
payloads
Mutualiser du
code métier
Décorréler les
roadmaps
....
ex : cache
applicatif
server

#6
Et toutes les
autres
bonnes
pratiques API

●  Ne pas propager la complexité du SI dans une app
●  Avoir des APIs dédiées pour les applications
○  Limiter les appels réseaux
○  Driver le design de l’API mobile par l’UX
○  Exploiter les mécanismes de cache
○  Ne garder que le nécessaire dans vos payloads
○  ...
Take away

La Duck Conf 2018 : "How to make your mobile happy?"

Recommandé

Recommandé

Contenu connexe

Tendances

Tendances (19)

Similaire à La Duck Conf 2018 : "How to make your mobile happy?"

Similaire à La Duck Conf 2018 : "How to make your mobile happy?" (20)

Plus de OCTO Technology

Plus de OCTO Technology (20)

La Duck Conf 2018 : "How to make your mobile happy?"