Share
Ce que vous allez créerL'interfaçage avec une API est une partie importante du développement et de la conception Web de nos jours. Les API aident à fournir une expérience riche et dynamique dans le navigateur. Plutôt que des balises et des images statiques, vous pouvez transférer et extraire dynamiquement les données d'un serveur et les restituer dans le navigateur en fonction de l'expérience que vous souhaitez fournir à l'utilisateur..
Dans ce tutoriel, nous allons construire un exemple de base d'une application basée sur une API. À l'aide de l'API iTunes, nous prenons l'URL de n'importe quelle application iOS ou Mac et rendons son icône de résolution complète directement dans le navigateur. Cette application spécifique ne vous sera peut-être pas immédiatement utile, mais ce que vous apprendrez en cours de route peut être appliqué à toutes sortes de scénarios..
La plupart des applications iOS et OSX correctement conçues fournissent des ressources haute résolution pour leurs illustrations d'icônes. Bien sûr, ces icônes peuvent sembler avoir une taille de 150 × 150 pixels sur votre tremplin iPhone ou votre station d'accueil OSX, mais pour tenir compte des écrans Retina et des exigences de dimensionnement différentes sur l'ensemble du système d'exploitation, Apple demande aux concepteurs d'applications de fournir une icône haute résolution. atouts, jusqu’à 1024 × 1024 pixels! Par exemple, sur la gauche, vous verrez l'icône Tweetbot pour Mac telle qu'elle apparaîtrait approximativement dans votre dock OSX. Alors que sur la droite est l'image en pleine résolution:
Apple rend ces ressources accessibles via l'API iTunes. Donc, si vous souhaitez obtenir des illustrations en haute résolution et en taille réelle, vous le pouvez! Tout ce dont vous avez besoin est l'identifiant de l'application. Ensuite, en faisant une demande à l'API, vous recevrez un tas d'informations sur l'application, y compris un lien vers la maquette la plus haute résolution disponible dans la boutique..
Ce didacticiel ne concerne pas tant l'apprentissage de l'API iTunes que l'apprentissage de certains des concepts de base de la création d'une application Web dynamique qui restitue le contenu renvoyé par une API. Une fois que vous maîtriserez les bases de l'interface avec une API, vous pourrez créer vos propres sites Web personnalisés à l'aide d'API tierces, telles que Dribbble ou Twitter..
Pour vous donner un aperçu rapide, voici les concepts que nous allons couvrir dans ce didacticiel afin de parvenir au produit final:
Afin de comprendre ce que nous allons construire, commençons par détailler l'expérience de base de notre petite application. Une fois que cela est terminé, nous pouvons obtenir un peu plus précis en listant ses composants.
Pour commencer à encadrer les composants de l'application, nous avons besoin d'une liste des fonctionnalités et de l'expérience de base de l'application:
Maintenant que nous avons une compréhension de base de ce que nous souhaitons que l’application accomplisse, nous pouvons commencer à encadrer ses différentes parties. N'oubliez pas que nous souhaitons que cette application Web soit réactive. Nous allons donc veiller à concevoir nos pièces de manière à leur permettre de dimensionner en hauteur de façon réactive..
Entête: En haut de la page, nous aurons un texte stylisé qui représente le nom de l'application, avec une brève description de ce qu'elle fait. "Gimmie Dat iCon" est le nom idiot que j'ai créé pour notre application.
Contribution: Nous devons fournir à l'utilisateur un moyen de saisir un lien vers l'application dont il souhaite créer l'illustration. Pour cela, nous ajouterons un simple champ de saisie et un bouton d'envoi directement sous l'en-tête..
Sortie: Une fois qu'un lien valide a été récupéré par l'utilisateur, nous avons besoin d'un espace pour afficher les illustrations d'icône extraites d'iTunes. Nous allons donc créer une place pour ce droit sous le champ de saisie.
C'est à peu près ça. Nous avons maintenant tous les composants de base dont nous avons besoin pour récupérer un lien de l'utilisateur et afficher des informations provenant de l'API iTunes..
Il existe un autre facteur important dont nous devons tenir compte dans notre phase de structure filaire: les différents états de nos composants. Notre petite application va être dans différents états à des moments différents. Par exemple, nous savons que nous devons afficher les illustrations d'icône renvoyées par l'API iTunes, nous en avons déjà rendu compte. Mais que se passe-t-il si l'API renvoie une erreur, alors que faisons-nous? Ou que se passe-t-il si l'utilisateur entre un mauvais lien? Nous devons tenir compte des différents états dans lesquels notre application peut se trouver, en fonction de son état d'exécution. Comme notre application est assez simple, nous n’avons que quelques cas d’utilisation à couvrir:
Etat zéro: Que se passe-t-il lorsque l'utilisateur accède pour la première fois à notre page Web? Aucune icône d'illustration à afficher car ils n'ont pas encore entré d'URL. Nous aurons donc besoin d’un type d’état «zéro» convivial indiquant «hé, vous n’avez pas encore entré de lien. Allez-y et entrez-en un, puis nous afficherons l'icône ici. ”
les erreurs: Il est très possible que quelques erreurs se produisent lors de l'exécution de notre application. Par exemple, l'utilisateur peut entrer une URL invalide. Ou bien, l'API iTunes peut renvoyer des données incorrectes, voire aucune. Nous devons tenir compte de ces cas dans la conception de notre application pour que l'utilisateur ne se demande pas ce qui ne va pas. Nous allons donc concevoir un moyen d'afficher un message d'erreur (dont le texte changera en fonction de l'erreur).
Chargement: Parce que nous travaillons avec une API, tout ne se passera pas instantanément. L'ordinateur de l'utilisateur doit adresser une requête à un serveur tiers, qui doit alors calculer la requête et renvoyer les informations. Cela peut prendre quelques secondes. Nous allons donc nous assurer que la conception de notre application fournit un moyen de communiquer le chargement du contenu. De cette façon, l'utilisateur ne sera pas frustré et troublé par un écran statique où rien ne se passe (même si le contenu se charge en arrière-plan).
C'est tout! Nous avons couvert tous nos différents composants et leurs différents états. Dans le prochain tutoriel, nous allons passer à la conception visuelle de l'application avec des structures filaires plus détaillées..
Accentsconagua