Tutorial

Créer avec de la vraie data sur Sketch, Figma et XD

Bonjour à tous !

Dans ce tutorial nous allons apprendre à importer de la data, que vous aurez auparavant sélectionnée à partir de Dashblock et d'un fichier .json.

En effet travailler avec de la "vraie"' data vous permet de rendre vos mockups encore plus réalistes.

Grace à ce tutorial vous saurez manipuler les fichiers .json afin de les importer dans votre logiciel favori !

No items found.
45min
⚡️
Intermediaire
Télécharger les fichiers

Avant de commencer !

Pour ce tutorial vous aurez besoin de télécharger un plugin afin de pouvoir importer vos fchiers .json

➡️ Pour XD et Sketch nous allons utiliser le plugin Data Populator que vous pouvez télécharger ici

➡️
Pour Figma, vous pouvez télécharger le plugin Json Populate (il faudra héberger le fichier .json sur un serveur pour avoir une url)

Vous aurez également besoin d'un éditeur de texte, ou de code. Dans ce tutorial nous utilisons Sublime Text

1 - Télécharger Dashblock et importer le site dans l'app

Dashblock est une application disponible sur Mac OSX et Windows, qui permet de créer très facilement des API  et capter la data de vos sites favoris.

Rendez-vous sur www.dashblock.com pour le télécharger.

Installez l'application et lancez-la, l'interface de démarrage devrait ressembler à la capture d'écran ci-dessous ⬇️

Télécharger l'application Dashblock

Dashblock est utilisé dans ce cas pour créer des fichiers .json mais rien de vous empêche de passer par une autre solution ou bien de les créer vous même !

Apeï ?

API est l’acronyme de « Application Programming Interface » ou bien « Interface de programmation applicative dans la langue de Molière.
Les API permettent de connecter les applications entre elles, afin qu’elles puissent s’échanger des données de manière sécurisée. Ce sont des « ponts » entre les applications.

Une fois Dashblock installé, l’interface vous permet de renseigner une URL afin de charger la page sur l’application.


Pour ce tutorial, nous allons créer une application de petites annonces de vente de voiture et nous allons piocher de la data réelle afin d’obtenir un résultat plus qualitatif et proche de ce que sera vraiment le design final.

Nous allons utiliser le site https://www.autoscout24.fr/ pour récupérer des données.

Vous pouvez cherchez le modèle que vous voulez, la seule chose qui compte est d’avoir une liste de résultats similaire à l’image ci-dessous 😉

La requête
https://www.autoscout24.fr/lst/mercedes-benz?sort=standard&desc=0&ustate=N%2CU&cy=F&atype=C&ac=0

Importer une URL dans Dashblock

2 - Taguer la data pour préparer le .json

Une fois l'URL importée, il s'agit de ne pas se précipiter !

Voyons tout d'abord la data que nous voulons extraire, et comment la nommer

Voici donc les informations que nous voulons récupérer:

  • auto_title ▶️ Nom de la voiture
  • auto_model ▶️ Modèle de la voiture
  • auto_equipements ▶️ Options
  • auto_cover_pic ▶️ Photo principale
  • auto_price ▶️ prix de la voiture en euros
  • auto_localisation ▶️ Code Pays + CP + Ville
  • auto_mileage ▶️ Kilométrage
  • auto_state ▶️ Neuf ou Occasion

Taguer la data sur Dashblock

Dashblock vous permet d'un simple clic droit sur un élément de lui attribuer une classe que vous pourrez réutiliser plus tard.

Dashblock se base sur le Machine Learning pour reconnaître les datas similaires. Si vous taguez un title il sera normalement capable de reconnaître tous les Titles identiques sur la page.

⛔️ Attention

Sur certains sites donc les résultats sont chargés de manière asynchrone (Infinite scroll typiquement) il vous faudra scroller pour récupérer la data au delà du viewport car Dashblock n'est pas capable de la "voir".

Vérifiez que vous avez bien tagué tous les éléments. Pour les images en faisant un clic droit vous saurez si l'élément à bien été pris en compte ce n'est pas toujours évident.

Une fois que vous avez tous vos éléments il est temps de préparer le Json 😎

cliquez sur le l'icone enregistrer en haut à droite de l'interface et attendez un petit peu le temps que le code apparaisse.

3 - Créer le fichier .json

Cette étape est particulièrement rapide, vous n'aurez besoin que d'un simple éditeur de texte (ou de code).

Voici à quoi devrait ressembler votre code .json (le début)

{
  "entities": [
    {
      "auto_title": "Mercedes-Benz E 200",
      "auto_title:link": "https://www.autoscout24.fr/offres/mercedes-benz-e-200-classe-cdi-elegance-a-diesel-gris-2da8595a-6f75-4e51-b405-5a02e051327f",
      "auto_equipements": "Volant en cuir, Climatisation automatique, Airbags latéraux, ESP, Sièges électriques, Feux anti-brouillard, Détecteur de pluie, Détecteur de lumière",
      "auto_equipements:link": "https://www.autoscout24.fr/offres/mercedes-benz-e-200-classe-cdi-elegance-a-diesel-gris-2da8595a-6f75-4e51-b405-5a02e051327f",
      "auto_price": "€ 2.500,-",
      "auto_mileage": "542.000 km",
      "auto_state": "Occasion",
      "auto_motor": "Diesel"
    },

Copiez le code affiché dans Dashblock et collez-le dans votre éditeur.

le .json

JavaScript Object Notation (JSON) est un format de données textuelles dérivé de la notation des objets du langage JavaScript.
Il permet de représenter de l’information structurée comme le permet XML par exemple.

Source Wikipedia

🛑Nettoyer le fichier .json

Il arrive parfois que la data ne remonte pas correctement dans votre code sur Dashblock. Vous apercevrez parfois des "trous" ou biens des lignes manquantes dans certains items.

Les images notamment sont très mal prises en compte car assez difficile à cibler en raison du code hérité, n'hésitez pas à les rajouter à la main ou les traiter dans un dossier à part.

Le but de ce tutorial étant de se familiariser avec l'import de .json (Dashblock n'est q'un outil), prenez du temps d'analyser le fichier, voir comment il est construit afin de repérer les irrégularités et avoir un fichier cohérent.

À l'avenir, n'hésitez pas à vous rapprocher de vos développeurs préférés. L'export de data en .json est quelque chose de très simple pour eux et vous permettra de gagner un temps précieux !

💾 Enregistrez ensuite le fichier en lui ajoutant l'extension .json et le tour est joué !

Télécharger le fichier .json

4 - Préparer le fichier Sketch pour l'import ( ou Xd et Figma)

Bien s'équiper

Voici venu le moment que vous attendiez avec impatience, nous allons maintenant créer le fichier .sketch afin qu'il récupère les informations de notre .json

🎨 Créer le design pour la data

Nous allons créer un design de page web très simple qui contiendra le résultat de notre recherche sous forme de cards.

🛑Soyez très attentifs aux noms de vos calques c'est sur ce paramètre que le "matching" .json se fera.

Créez une card qui reprendra les éléments de notre .json.

Voici la structure proposée. (Les informations sont liées dans des groupes afin de profiter des fonctionnalités de smart layout de Sketch. Le design varie légèrement sur XD et Figma)

Vous pouvez maintenant utiliser le plugin "Data Populator" pour intégrer les données !

5 - Jeu, set et Match !

▶️ Si vous ne l'avez pas encore fait, téléchargez le plugin Data Populator pour Adobe XD et Sketch

▶️ Pour Figma vous pouvez utiliser le plugin Json Populate dont le fonctionnement est très similaire.

À ce stade vous pouvez passer votre card en symbole (cmd + K) 🎥

Une fois la première card crée, vous pouvez désormais dupliquer autant de fois votre symbole, Data Populator proposera de la data différente pour chaque item de votre page.

Ce tuorial est désormais terminé , vous savez maintenant intégrer de la vraie data dans votre logiciel et créer des fichiers .json exploitables !

6 -Télécharger les fichiers de démo

Merci d'avoir suivi ce tutorial !

Vous trouverez ci-dessous le fichier de démonstration pour Sketch ainsi que le fichier .json (Les versions XD et Figma arrivent très vite !)

Télécharger les fichiers