Encadreur est l'un des outils de prototypage d'applications les plus puissants du marché. Il peut être utilisé pour concevoir n'importe quel appareil mobile, d'iOS à Android. Si vous connaissez un peu la programmation, ses capacités sont pratiquement illimitées car il est basé sur CoffeeScript - un langage de programmation relativement simple. UNE designer Vous ne seriez limité que par votre imagination et vos compétences en codage.
Framer - Qu'est-ce que c'est?Pour suivre cet article, vous devez avoir au moins une compréhension de base de Framer. Nous utiliserons le mode conception et l'éditeur de code. Si vous souhaitez compléter vos connaissances, vous pouvez lire nos précédents articles de Framer: Comment créer des prototypes interactifs impressionnants , 7 micro-interactions simples pour améliorer vos prototypes
Pourquoi utiliser Framer avec des données réelles
Un problème courant dans le prototypage ou la conception est le manque de données réelles. Lorsque vous concevez une nouvelle fonctionnalité pour un produit existant, au lieu d'utiliser du contenu fictif, vous pouvez afficher un contenu logique, pertinent et réel. Il peut s'agir de tout type de données - des photos d'utilisateurs, par exemple. De cette façon, aucun temps n'est perdu à essayer de créer du faux contenu et les erreurs résultant de l'utilisation de données invalides seront évitées. Toutes les données disponibles sont visibles, et il peut être établi quel contenu peut être requis, par conséquent, la communication avec les parties prenantes et l'équipe de développement est plus efficace. Il est également possible de concevoir dans différents scénarios de cas d'utilisation.
Lorsque nous concevons une nouvelle fonctionnalité, nous oublions parfois que tous les profils d'utilisateurs ne sont pas complets, que toutes les catégories du magasin n'ont pas le même nombre de produits et que tous les produits ne présentent pas les mêmes données. Le prototypage avec des données réelles peut être comparé à la construction de blocs LEGO: au lieu de travailler avec des formes imaginaires et lâches, nous pouvons utiliser des composants existants de la boîte et construire quelque chose de réel.
Prototypons avec des données réelles!
Le vrai plaisir dans Framer commence lorsque vous utilisez des données réelles qui sont mises à jour en temps réel à partir d'une base de données. Tout type d'informations peut être appliqué, par exemple: profils d'utilisateurs avec photos, adresses, cours de bourse, taux de change, prévisions météorologiques, informations sur les transactions, toute information que les applications utilisent régulièrement. Une conception de produit vraiment puissante commence à se produire lorsque des prototypes en temps réel sont combinés avec des données réelles. Et vous n'avez plus besoin d'utiliser les fameux textes marqueurs de style latin «lorem ipsum».
Uber avec l'API Mapbox pour Bryant Jow pour Uber
L'API utilisant des données réelles: qu'est-ce que c'est? Comment l'utilisons-nous?
Ongle Interface de programmation d'applications (API) est l'interface à travers laquelle nous communiquons avec les applications. Imaginez une application comme un restaurant. La nourriture est une information et les serveurs sont des API. Vous demandez la nourriture aux serveurs, c'est tout ce que vous avez à faire. Les serveurs (API) et la cuisine (base de données) s'occupent du reste.
Il s'agit d'accéder à des données réelles qui vivent dans une certaine base de données.
Qu'est-ce qu'une API?
Chaque application dispose d'une API qui permet de capturer et d'afficher les données. Certaines API sont accessibles au public et certaines ne sont utilisées que dans des produits internes.
Les API accessibles au public sont largement utilisées pour créer de nouvelles applications. Par exemple, pour créer une application météo, certaines données météorologiques sont nécessaires. Avec l'aide de nombreux sites Web de prévisions météorologiques qui partagent leurs API publiques, c'est un jeu d'enfant. De plus, de nombreuses API différentes peuvent être combinées pour créer un produit complètement nouveau.
Où pouvons-nous obtenir des données réelles? Les listes d'API ouvertes
Il existe de nombreuses API accessibles au public qui fournissent diverses données. Voici une liste de cinq qui sont parfaits pour le prototypage avec des données réelles dans Framer. Chacune de ces API renvoie également des données au format JSON , qui peuvent être facilement gérés dans le framework.
Utilisateur aléatoire - Certainement la meilleure API pour les débutants. Générez des profils d'utilisateurs complets et aléatoires, d'un avatar à une adresse e-mail.
OpenWeatherMap - C'est une API très facile à utiliser. Il vous permet de vérifier la météo actuelle et les prévisions à n'importe quel endroit. En utilisant cette API, nous pouvons afficher des données telles que la température, l'humidité ou la vitesse du vent.
Pokéapi - l'une des meilleures API créées à des fins éducatives. Vous cherchez quelque chose sur Pokémon? Il peut être trouvé ici. Il s'agit d'une API RESTful complète liée à une vaste base de données détaillant tout ce qui concerne la principale série de jeux Pokémon.
quel langage de programmation utilise windows
Instagram - La première API de la liste qui nécessite une autorisation d'utilisation. Leur service, cependant, est très simple. Vous pouvez accéder à toutes les photos et utilisateurs Instagram et les afficher dans votre nouvelle application.
Mapbox - Fournit un nombre incroyable de services faciles à intégrer à une application, des cartes et des directions au géocodage et même à l'imagerie satellite. Foursquare, Evernote, Instacart, Pinterest, GitHub et Etsy ont une chose en commun: leurs cartes fonctionnent avec Mapbox.
Cette API est différente des précédentes car elle ne renvoie pas de fichiers JSON, mais elle donne accès à toutes les fonctions de Mapbox. Mapbox a également produit un excellent tutoriel sur l'utilisation de votre API dans Framer .
Tutoriel API RandomUser dans Framer avec des données réelles
Pour comprendre comment travailler avec les API dans Framer, commençons par le API utilisateur aléatoire . Nous aurons besoin d'un seul écran d'application - une liste d'utilisateurs.
meilleur site pour apprendre c
Étape 1: Mode de conception
Voici une liste d'utilisateurs contenant des prénoms, des noms et des avatars. C'est tout ce qui est nécessaire. La partie la plus importante de ce processus est de nommer et de regrouper correctement tous les éléments. Les avatars et les noms sont regroupés sur le calque d'image et tous les cadres sont regroupés dans la liste:
La dernière chose à faire en mode conception est de marquer le calque liste comme couche interactive. Pour ce faire, cliquez simplement sur l'icône de destination.
Étape 2: Comprendre JSON
Tout d'abord, vous devez comprendre ce qu'est JSON et comment l'obtenir en dehors de Framer. Dans Documents de l'API utilisateur aléatoire rechercher une demande de données API. Cela ressemble à ceci: https://randomuser.me/api/?results=20 . Comme vous pouvez le voir, c'est un lien normal qui ouvre un fichier JSON dans votre navigateur:
En l'état, rien n'est clair. Pour afficher les fichiers JSON correctement formatés, utilisez le plug-in Chrome appelé JSONview . Avec le plugin, le fichier ressemblera à ceci:
Beaucoup mieux. Il devrait maintenant être facile à lire. Le fichier contient le tableau de résultats avec les données utilisateur, qui a été reçu après la demande d'API. Alors, quel est le fichier JSON? Sans entrer dans les détails techniques, il s'agit d'un fichier texte basé sur la syntaxe JavaScript qui contient des données spécifiques d'une base de données. JSON peut être utilisé dans Framer pour en afficher les données.
Étape 3: Importez le fichier JSON dans Framer
Le fichier JSON peut maintenant être importé dans Framer avec une seule ligne de code:
data = JSON.parse Utils.domLoadDataSync 'https://randomuser.me/api/?results=20' Créez l'objet appelé Les données qui contiendra le fichier JSON. Utilisez la fonction impression pour voir si le fichier JSON a été importé avec succès:
print data 
Étape 4: Accéder à des données spécifiques à partir du fichier JSON
Revenez maintenant à la structure du fichier JSON:
Dans ce fichier JSON, resultados est un tableau qui contient plus d'objets. Chaque objet est un utilisateur différent. Premièrement, l'un de ces objets doit être objectif. Utilisez la fonction d'impression pour mieux comprendre ce qui se passe:
print data.results[1] Console Framer:
{gender:'male', name:{title:'mr', first:'benjamin', last:'petersen'}, location:{street:'2529 oddenvej', city:'sandved', state:'midtjylland', postcode:48654}, email:' [email protected] ', login:{username:'organicsnake771', password:'bauhaus', salt:'PohszyFx', md5:'b19140299c05e5e623c12fb94a7e19e6', sha1:'78d95ec718ef118d9c0762b3834fc7d492111ab2', sha256:'0a702949d5e066d70cde2b9997996575e4c3df61ff3751294033c6fc6cd37e54'}, dob:'1974-12-17 04:58:03', registered:'2009-04-08 16:50:59', phone:'76302979', cell:'41168605', id:{name:'CPR', value:'605218-6411'}, picture:{large:'https://randomuser.me/api/portraits/men/65.jpg', medium:'https://randomuser.me/api/portraits/med/men/65.jpg', thumbnail:'https://randomuser.me/api/portraits/thumb/men/65.jpg'}, nat:'DK'} Le chiffre entre parenthèses représente une quantité de l'objet dans le tableau. En utilisant data.results [1], vous avez accès à toutes les données du premier utilisateur dans le fichier JSON.
Ensuite, des éléments tels que le prénom ou le nom peuvent être affichés:
print data.results[1].name.first Framer répond avec: 'benjamin'. Et voilà! L'accès aux données API est terminé!
Étape 5: Affichage des données JSON
Finalement! La seule chose qui reste est d'afficher les données. Maintenant, une boucle simple doit être créée qui pointe vers toutes les couches du mode conception. En savoir plus sur le ciblage des couches avec une boucle dans ce article précédent .
Nous utilisons x = 0 pour pointer vers le premier objet du tableau à partir des données JSON. Puis pour chaque élément les enfants de la liste , nous mappons les données à partir des données JSON. À la fin de la boucle, nous ajoutons +1 pour utiliser les données de l'objet suivant dans le tableau:
x = 0 for i in list.children i.children[2].text = data.results[x].name.first i.children[1].text = data.results[x].name.last i.children[0].image = data.results[x].picture.large x++ Voilà! Vous pouvez maintenant revenir en mode conception et jouer avec la conception, et les données réelles seront affichées sur votre prototype!
Vous pouvez télécharger le fichier Framer ci-dessus ici: https://framer.cloud/djmvG
API Instagram: données en temps réel dans Framer
Instagram est un point de départ intéressant pour commencer un voyage avec des données en temps réel. Les instructions sont relativement faciles à suivre et l'API fournit des données intéressantes - vous obtenez un accès complet. Dans cette partie de l'article, l'API Instagram est utilisée pour créer un prototype simple qui affiche les données de mon profil Instagram: nom, photo la plus récente et nombre de `` j'aime ''.
Étape 1: obtenir un jeton d'accès
Pour utiliser l'API Instagram, un jeton d'accès est requis. Il peut être obtenu de deux manières différentes:
-
Le moyen le plus courant consiste à accéder au site Web de Instagram pour les développeurs et suivez les instructions. Ce processus peut être délicat pour les personnes non techniques.
-
Heureusement, il existe un moyen sûr et facile de l'obtenir. Pixel Union a développé un processus beaucoup plus simple en un clic: allez à votre site web et cliquez sur le bouton Obtenir le jeton d'accès.
Étape 2: activer les requêtes inter-domaines
Après avoir reçu un jeton d'accès, une petite astuce est requise. Instagram n'autorise pas les requêtes API de votre serveur local (Framer) et par conséquent, les requêtes côté serveur doivent être utilisées. L'un d'eux est JSONProxy . Allez sur leur site Web, collez-en un demande api instagram et appuyez sur GO.
Une fois cela fait, au lieu d'utiliser la liaison d'API Instagram, vous pouvez utiliser la liaison JSONProxy.
Étape 3: Concevoir une application simple dans Framer
Un écran d'application simple conçu dans Framer.
qu'est-ce que les données xml dans word
Il n'y a que trois éléments cruciaux dans cette mise en page: l'espace réservé au nom, un rectangle qui affichera la dernière photo et le nombre de 'j'aime' sous l'image. Tous ces éléments sont marqués comme des couches interactives à réutiliser dans l'éditeur de code.
Étape 4: Écrivez quatre lignes de code pour utiliser les données Instagram
Le flux ici est le même que dans l'API de l'utilisateur aléatoire. Toutes les informations utilisateur sont accessibles depuis Instagram:
yourAccessToken = 'YOUR-ACCESS-TOKEN' instagramJSON = JSON.parse Utils.domLoadDataSync 'http://jsonproxy.herokuapp.com/?callback=&url=https%3A%2F%2Fapi.instagram.com%2Fv1%2Fusers%2Fself%2Fmedia%2Frecent%2F%3Faccess_token%3D#{yourAccessToken}' likesCount.text = instagramJSON.data[1].likes.count name_1.text = instagramJSON.data[1].user.full_name photo.image = instagramJSON.data[1].images.standard_resolution.url Voilà! Cinq lignes de code et vous pouvez créer un prototype en utilisant des données réelles et réelles fournies par Instagram. Téléchargez un prototype fonctionnel ici: https://framer.cloud/iYAXl . (Notez que vous devez ajouter votre propre CLÉ D'ACCÈS pour exécuter ce prototype).
En résumé - Avantages et inconvénients
En prototypant à l'aide de données réelles obtenues via une API de base de données, de nouvelles possibilités créatives et la capacité de vérifier la conception du produit sont révélées. Des prototypes 100% cohérents avec le produit peuvent être construits et de nouvelles fonctions testées par de vrais utilisateurs avec un aperçu de toutes les données du système; il est plus difficile d'ignorer un élément qui doit être inclus dans la conception, et avec l'accès à des données réelles, les erreurs de conception qui proviennent de l'utilisation de fausses données sont évitées.
Cela dit, le prototypage haute fidélité dans Framer est assez coûteux. De nombreux ajustements sont nécessaires pour obtenir l'effet souhaité, ce qui prend du temps et de l'argent. Comme le montre l'exemple d'API utilisateur aléatoire, communiquer avec l'API n'est pas difficile, mais il faut encore beaucoup de temps pour créer un grand prototype à partir de celle-ci.
Cependant, lorsqu'il est entièrement adapté, il vaut certainement la peine d'être considéré. Bon prototypage avec des données réelles!
