Accentsconagua

Comment utiliser l'API Behance pour créer une page Web Portfolio personnalisée

Création de sites web
Share

Behance est un excellent lieu de partage pour les créatifs et leur permet de montrer leur travail et leurs projets en cours. Contrairement à Dribbble ou Forrst qui, comme je le vois personnellement, sont principalement peuplés d’illustrateurs et de concepteurs d’interfaces utilisateur, Behance englobe un plus large éventail de domaines créatifs, notamment l’architecture, les graphiques animés, le design automobile et la mode. En plus de cela, Behance fournit également un ensemble d’API permettant d’accéder au contenu..

Au cours de cette courte série, nous allons utiliser l’API Behance pour créer un site Web de portefeuille personnel. Nous allons extraire efficacement le contenu de Behance et l'afficher sur notre propre page Web externe. Mais avant de poursuivre la construction du site Web, nous devons d'abord examiner comment Behance gère son contenu et voir comment fonctionne l'API..

Explorer Behance et l'API

Behance divise son contenu en modules; nommément image, intégration, vidéo, audio et texte. Les données extraites de l'API comprendront non seulement des URL d'image, mais également des URL vidéo, audio et du texte brut. L'affichage de tous ces types de contenu sur notre site Web pourrait toutefois compliquer les choses. Par conséquent, dans ce tutoriel, nous allons nous concentrer sur les images et exclure le reste afin de simplifier notre code..

Remarque: Ce tutoriel suppose que vous ayez un compte Adobe et un portefeuille Behance avec lequel travailler. Pour les besoins de notre démonstration, nous utiliserons le superbe portfolio de Mike "Creativemints", qui a gentiment accepté de nous laisser utiliser son travail dans ce cas..

Écran d'édition de projet Behance.

Lorsque vous travaillez sur vos propres projets, Behance affiche une fenêtre de dialogue après le téléchargement de votre contenu pour vous permettre de télécharger l'image de couverture. Cela revient à configurer une image en vedette dans WordPress. L'image que nous mettons en ligne ici sera affichée en tant qu'aperçu de l'intégralité du projet. Sur notre site Web, nous utiliserons également l'image de couverture..

La fenêtre de dialogue pour télécharger une image de couverture dans Behance.

Une fois que l'image de couverture est définie, des options vous sont proposées pour attribuer plusieurs attributs, tels que des champs de création, des tags et une description du contenu. Nous ne submergerons pas notre site Web de trop nombreux attributs. Dans ce didacticiel, à part l'image de couverture et le titre, nous ne montrerons que les attributs du champ de création.

Sélection de champs créatifs à Behance.

Behance API Key

Nous avons besoin d'une clé API / ID client unique pour avoir accès à l'API Behance. Pour en obtenir un, allez sur Behance Dev, enregistrez votre application, remplissez le nom de l'application, le site Web et la description. le champ Redirect URI (for OAuth) est facultatif, sauf si vous allez créer une application nécessitant une authentification de l'utilisateur..

Clé API Behance.

Une fois que nous avons la clé API, accédez aux points de terminaison des API Behance où vous trouverez une liste de toutes les manières d'obtenir un accès à l'API. Un Point de terminaison de l'API est l'adresse d'un service Web, généralement une simple chaîne d'URL HTTP.

Dans ce tutoriel, nous devrons avoir accès à Informations de l'utilisateur, les projets de l'utilisateur. Voici les points de terminaison de l'API pour demander ces informations:

Obtenir les informations d'un utilisateur

http://www.behance.net/v2/users/user_id?api_key=the_api_key

Les informations utilisateur comprennent le numéro d’identification de l’utilisateur, son nom, son emplacement, l’URL de l’avatar de l’utilisateur et un tas d’autres données..

Obtenir les projets d'un utilisateur

http://www.behance.net/v2/users/user_id/projects?api_key=the_api_key

Nous aurons la liste des projets publiés du donné identifiant d'utilisateur. La liste peut être limitée avec par page paramètre.

Obtenir le contenu d'un projet

http://www.behance.net/v2/projects/project_id?api_key=the_api_key

L'API renvoie les informations du projet, y compris modules de la donnée project_id.

Étant donné que l'API Behance est accessible via HTTP, nous pouvons voir les données immédiatement dans le navigateur. Si vous utilisez Chrome ou Firefox, je vous suggère d'installer un plug-in de navigateur appelé JSONview pour afficher les données JSON dans un format plus lisible..

Données JSON visualisées avec JSONview

Limite API

Sachez que Behance limite l'API à 150 requêtes par heure. S'il y a trop de demandes, nous aurons des réponses vides et nous n'obtiendrons rien. Voici comment la limite est décrite dans la documentation:

Les demandes sont limitées à 150 par heure et sont comparées à l'adresse IP du serveur ou du périphérique à l'origine de la demande. Si vous faites trop de demandes, vous recevrez une réponse vide avec un code d'état 429 (Trop de demandes)..

Ainsi, dans ce didacticiel, nous utiliserons HTML5 Offline Storage pour stocker les données hors connexion afin de minimiser les demandes. Au lieu d'appeler l'API chaque fois que nous chargeons la page, nous pouvons la récupérer à partir du stockage. Veuillez vous reporter aux articles suivants pour en savoir plus sur le stockage hors ligne HTML5:

  • Astuce: En savoir plus sur le stockage local HTML5
  • Le passé, le présent et l'avenir du stockage local pour les applications Web

Le plan directeur du site

Avant de construire la structure de notre site Web, examinons le plan directeur du site Web..

Le plan directeur du site

Comme vous pouvez le voir ci-dessus, notre site Web comporte trois sections: en-tête, contenu et pied de page. L'en-tête contient l'avatar de l'image de l'utilisateur, son nom, ses champs de création et son emplacement. La section Contenu affiche le portefeuille de l'utilisateur avec le nom et les champs de création. Dans le pied de page, nous afficherons le logo Behance, illustrant le fait que le site Web est alimenté par l'API Behance..

Construire le contenu et la structure du site Web

Commençons notre projet en créant un répertoire nommé portefeuille personnel et un index.html avec un balisage HTML5 de base. Dans le fichier index.html, nous allons créer un lien vers les bibliothèques suivantes:

jQuery

Dans ce tutoriel, nous utiliserons principalement jQuery pour deux choses: la manipulation du DOM et l'appel de l'API Behance via son $ .getJSON () API.

Aujourd'hui, jQuery est divisé en deux versions, 1.x et 2.x. La version 1.x vise à prendre en charge les anciens navigateurs, à savoir Internet Explorer 8 et les versions antérieures, tandis que la version 2.x ne s’adresse qu'aux navigateurs plus modernes. Nous supposerons que nous vivons maintenant dans un monde où tout le monde utilise des navigateurs modernes (je me sens risqué). Donc, dans ce tutoriel, nous pouvons utiliser jQuery 2.x en toute sécurité.

Guidon.js

Handlebars est un excellent moteur de templates basé sur JavaScript. Dans ce didacticiel, nous utiliserons les guidons pour construire le modèle qui affichera les données extraites de l’API Behance. Tuts + propose deux screencasts gratuits qui peuvent vous aider à démarrer avec le guidon:

  • Dites bonjour au guidon
  • Outils du développeur Web moderne - Guidons

Si vous n'avez pas encore utilisé le guidon, nous vous suggérons de prendre votre temps pour terminer ces screencasts ou pour lire des tutoriels de base avant de continuer..

Dans ce didacticiel, nous n'inclurons pas les bibliothèques JavaScript et CSS dans notre répertoire de projet afin de réduire la taille de fichier de notre projet. Au lieu de cela, nous les lierons à partir d’une source CDN par CDNJS.com. Ouvrons notre index.html dans un éditeur de code et ajoutons les bibliothèques suivantes dans le répertoire tête étiquette.

Veuillez noter que si vous servez index.html via un serveur local, vous devez ajouter http: // dans chacun des liens pointant vers CDNJS.com.

Division de sections de site Web en HTML

Le balisage HTML qui définit les sections de notre site Web - En-tête, Contenu et Pied de page - est assez simple. Nous utilisons le HTML5 entête élément pour l'en-tête, un div pour envelopper le contenu et le HTML5 bas de page élément pour le pied de page. Chacun de ces éléments se voit attribuer un ID unique et une classe à des fins de style et de script. Voici notre balise HTML dans le corps tag à ce stade.

Création de modèles de guidons

Dans cette section, nous allons créer les modèles de guidon pour afficher le contenu de nos sections de site Web. Et nous commencerons par le modèle pour l'en-tête, qui sera rempli avec les données des utilisateurs de ce noeud final d'API. www.behance.net/v2/users/user_id.

Un modèle de guidon est enveloppé avec un scénario tag avec un type spécial text / x-handlebars-template et de préférence avec un ID unique pour faciliter la sélection du modèle, comme si.

Dans le scénario tag nous allons mettre en forme le balisage pour le contenu de l'en-tête avec les classes à des fins de style. Nous incluons également la classe de Foundation Icon Fonts 3, qui est initialisée avec Fi-, pour afficher les icônes. Enfin, l’espace réservé au contenu sous la forme d’une expression Handlebars.

 
user.display_name
 
 
     #each user.fields 
  • ce
    •  /chaque 
 
 
user.city, user.country

Chacun de ces espaces réservés correspond aux clés JSON extraites de l'API. le user.display_name, par exemple, affichera le nom d'affichage de l'utilisateur. le Afficher un nom est la clé réelle qui contient la valeur du nom. Mais comme il est niché sous le utilisateur objet, nous nous référons à lui comme nom d'utilisateur.display. Il en va de même pour les autres espaces réservés de ce modèle ainsi que pour les modèles suivants..

Nom d'affichage de l'utilisateur en JSON

Ensuite, nous construirons le modèle pour afficher le portefeuille. Il s'agit du dernier modèle de Guidon que nous allons créer pour notre site Web. Pour commencer, nous créons un nouveau div avec un identifiant portefeuille dans la section Contenu. Nous créons ce div pour envelopper le portefeuille, juste au cas où nous aurions besoin d'ajouter plus de contenu dans le futur. Ensuite, nous ajoutons la balise de script qui contiendra le modèle. À ce stade, la structure HTML du contenu de notre portefeuille doit apparaître comme suit:

Ici, vous pouvez voir que les données extraites de www.behance.net/v2/users/user_id/projects renvoie un tableau contenant le portefeuille de l'utilisateur. Pour afficher un tableau, nous devrons parcourir chaque élément du tableau à l’aide de Handlebars ' chaque pour l'afficher dans le modèle.

Un tableau de projet extrait de l'API Behance

Nous allons dresser le portefeuille dans une liste non ordonnée. Alors ajoutons un ul élément et envelopper chacun  li élément avec #each… / each, comme suit:

Ensuite, nous exposerons le contenu de chaque élément. Comme nous l'avons mentionné précédemment, nous allons afficher la couverture de l'image, le nom et les champs de création. Nous allons les contenir à l'intérieur du li avec un nouveau div avec la classe, contenu du portefeuille.

… 
 
 #if this.covers. [404]  else #if this.covers. [230]  autre  /si si 
 
Ce nom
 
 
     #each this.fields 
  • ce
    •  /chaque 
 
 
…

Notez qu’il existe quelques aides conditionnelles du guidon, comme #if this.covers. [404], dans ce modèle. Nous utilisons l'assistant conditionnel pour nous aider à faire référence à la bonne taille de l'image de couverture. Il se peut que l'image ne soit pas toujours à 404 pixels (la taille la plus élevée définie pour l'image de couverture), elle ne peut être disponible qu'en taille inférieure. Ici, vous pouvez voir que Behance a découpé l'image dans ces tailles: 404 pixels, 230 pixels, 202 pixels et 115 pixels.

Taille de l'image de couverture

Le balisage HTML dans le pied de page est très simple. Nous ajouterons deux balises de paragraphe: l'une contiendra "Powered by" et la dernière un lien pointant vers Behance. Nous ajoutons fi-social-behance classe dans le une balise pour afficher le logo Behance de Foundation Icon Fonts.

… 
 
Alimenté par
 
Behance

À ce stade, nous avons terminé la construction des structures HTML qui présentent le contenu de notre site Web. Cependant, lorsque nous l'ouvrirons dans le navigateur, nous ne verrons rien apparaître pour l'instant! En effet, nous devons faire une demande à l’API, puis compiler les données avec le modèle Handlebars..

Appel de l'API Behance et compilation du modèle

Créons un scénario balise pour contenir notre JavaScript. Nous allons également créer deux variables pour contenir la clé d’API Behance et l’ID utilisateur. Comme mentionné précédemment, nous utiliserons le portefeuille de "Creativemints".

var apiKey = 'ZLBxK9rEfHwJf9K0rmseNr2fS2gS2HJW'; var userID = 'creativemints';

Sous ces deux variables, nous ajoutons la fonction suivante. Cette fonction appellera l’API utilisateur Behance et compilera le modèle Handlebars pour l’en-tête..

(function () var behanceUserAPI = 'http://www.behance.net/v2/users/'+ userID +'? callback =? & api_key = '+ apiKey; fonction setUserTemplate () var userData = JSON.parse ( sessionStorage.getItem ('behanceUser')), getTemplate = $ ('# profile-template'). html (), template = Handlebars.compile (getTemplate), result = template (userData); $ ('# en-tête'). html (result);; if (sessionStorage.getItem ('behanceUser')) setUserTemplate (); else $ .getJSON (behanceUserAPI, function (utilisateur) var data = JSON.stringify (utilisateur); sessionStorage.setItem ('behanceUser', data); setUserTemplate (););;) ();

Examinons ce code plus en détail. Premièrement, nous avons stocké l’API utilisateur Behance dans un behanceUserAPI variable. Notez que nous avons inséré le rappel = paramètre en son sein. Cet ajout évite la Accès non autorisé erreur causée par la politique de même origine.

Un mot sur sessionStorage

Plus tôt dans ce tutoriel, nous avions mentionné que l'API Behance était limitée à 150 demandes par heure. Nous avons donc décidé d'utiliser HTML5 Offline Storage pour stocker les données. Dans cette fonction, nous avons utilisé sessionStorage. L'utilisation de sessionStorage pour stocker les données de profil utilisateur s'explique par le fait que l'utilisateur peut modifier son profil à tout moment, mais nous ne pouvons le prédire. quand. Donc, au lieu d'utiliser stockage local qui stockera les données de manière persistante, nous utilisons sessionStorage qui les supprimera une fois que nous aurons quitté l'onglet ou le navigateur. De cette façon, une fois que nous aurons ouvert le navigateur et consulté le site Web, les nouvelles données de l’API Behance seront récupérées..

SessionStorage, cependant, ne peut contenir que de la chaîne ou du texte brut. Donc, comme vous pouvez le voir à partir de la fonction ci-dessus, nous avons utilisé JSON.stringify (); transformer JSON en chaîne avant de le stocker dans sessionStorage. Ensuite, nous allons extraire les données avec JSON.parse () pour le reformater en JSON.

Nous avons également créé une fonction appelée setUserTemplate () pour compiler le modèle Guidons et ajouter le contenu à l'aide de jQuery .html (). Nous exécutons cette fonction sous cette condition: si les données dans sessionStorage est disponible, nous exécutons immédiatement la fonction, sinon nous devrons appeler l'API à l'aide de $ .getJSON () d'abord et ensuite exécuter.

En plus, vous pouvez voir sessionStorage sous l'onglet Ressources du navigateur Chrome DevTools et Webkit.

sessionStorage dans Chrome DevTools

 Compiler le contenu

Nous ajoutons ensuite la fonction ci-dessous pour compiler le modèle de portefeuille dans le contenu. Cette fonction est très semblable à la fonction ci-dessus pour l'en-tête, à l'exception du par page variable et per_page = paramètre que nous utiliserons pour limiter le nombre d'éléments de contenu extraits de l'API.

(function () var perPage = 12; var behanceProjectAPI = 'http://www.behance.net/v2/users/'+ userID +' / projects? callback =? & api_key = '+ apiKey +' & per_page = '+ setPortfolioTemplate () var projectData = JSON.parse (sessionStorage.getItem ('behanceProject')), getTemplate = $ ('# portfolio-template'). html (), template = Handlebars.compile (getTemplate), résultat = template (projectData); $ ('# portfolio'). html (result);; if (sessionStorage.getItem ('behanceProject')) setPortfolioTemplate (); else $ .getJSON (behanceProjectAPI, fonction (projet) var data = JSON.stringify (projet); sessionStorage.setItem ('behanceProject', données); setPortfolioTemplate (););;) ();

Maintenant, lorsque nous voyons le navigateur, nous devrions déjà voir le profil de l'utilisateur ainsi que le portefeuille. Mais ils ne sont pas encore stylés.

La prochaine fois…

Dans la suite de cette série, nous modéliserons le contenu de notre portefeuille, ce qui nous donnera une page de portefeuille dynamique et réactive. À plus tard!

Création de sites web
×