Unlimited Wordpress themes, plugins, graphics & courses! Unlimited asset downloads! From $16.50/m
Advertisement
  1. Web Design
  2. Complete Websites
Webdesign

Как использовать API Behance для создания пользовательской веб-страницы с портфолио

by
Difficulty:IntermediateLength:LongLanguages:
This post is part of a series called Build Your Own Behance-Powered Portfolio.
Styling Our Behance Portfolio Website Using LESS

Russian (Pусский) translation by AlexBioJS (you can also view the original English article)

Behance – отличное место для творческих людей, где они могут поделиться своими работами и показать их и текущие проекты. В отличие от Dribbble или Forrst, главными пользователями которых преимущественно, как мне кажется, являются художники-иллюстраторы и дизайнеры UI (* user interface – интерфейс пользователя), набор областей творческой деятельности на Behance более широк и включает также архитектуру, анимационный дизайн, автомобильный дизайн и моду. Помимо этого Behance также предоставляет набор API для получения доступа к его контенту.

В этой небольшой серии руководств мы воспользуемся API Behance для создания веб-сайта с личным портфолио (* образцы выполненных работ). Мы фактически получим контент с Behance и отобразим его на нашей отдельной веб-странице. Однако перед тем как рассмотреть создание веб-сайта более подробно, для начала нам необходимо взглянуть на то, как организуется контент на Behance и как работает API.

Изучаем Behance и его API

На Behance контент поделен на модули, а именно: изображения, встроенный контент, видео-, аудио-записи и текст. Полученные при помощи API данные будут содержать не только URL-адреса изображений, но также могли бы содержать URL-адреса видео-, аудио-записей, а также чистый текст (* текст без гиперссылок, информации о форматировании и других встроенных нетекстовых элементов). Отображение всех этих типов контента на нашем веб-сайте, тем не менее, усложнило бы нашу задачу. Поэтому в этом руководстве мы сосредоточимся на только использовании изображений для упрощения нашего кода.

Обратите внимание: для работы с данным руководством вам необходим аккаунт Adobe и портфолио Behance, с которым будете работать. Для достижения целей нашей демоверсии мы будем использовать великолепное портфолио Майка "Creativemints", который любезно разрешил нам воспользоваться его работой в этом случае.

Вкладка для редактирования проекта на Behance.

При работе с вашими проектами после закачивания вашего контента Behance предложит вам диалоговое окно для закачивания изображения с эскизом. Это подобно установлению контрольного изображения (* уменьшенная и упрощённая копия графического объекта, а также макета верстаемого документа) в WordPress. Закачиваемое нами туда изображение будет показываться в качестве превью целого проекта. На нашем веб-сайте мы также будем использовать это изображение.

Диалоговое окно для закачивания изображения с эскизом на Behance.

Сразу после выбора изображения с эскизом нам будут предложены опции для заполнения значений некоторых атрибутов, например области творческой деятельности (* Ccreative Fields), тегов и описания контента. Мы не будем переполнять наш веб-сайт слишком большим количеством этих атрибутов. В данном руководстве помимо изображения с эскизом и заголовка мы только добавим значения атрибута области творческой деятельности.

Раздел для указания областей творческой деятельности на Behance.

Ключ для API Behance

Нам необходим уникальный API key/Client ID (* ключ к API / ID (* identifier – идентификатор) клиента) для получения доступа к API Behance. Для того чтобы его получить, посетите Behance Dev, зарегистрируйте ваше приложение и заполните поля Application Name, Website и Description. Поле Redirect URI (для OAuth (* Open Authorization – открытый протокол авторизации, который позволяет предоставить третьей стороне ограниченный доступ к защищённым ресурсам пользователя без необходимости передавать ей (третьей стороне) логин и пароль)) заполнять необязательно, разве что вы хотите добавить в ваше приложение возможность выполнения аутентификации пользователя.

Ключ к API Behance.

После получения API key перейдите на Behance API Endpoints, где будут перечислены все способы получения доступа к API. API Endpoint (* конечная точка) – отдельная функция API, где указывается URL-адрес веб-сервиса..

В этом руководстве нам нужно будет получить доступ к информации о пользователе и его проекты. Ниже представлены конечные точки API для запроса данной информации:

Получение информации о пользователе

Информация о пользователе включает в себя ID пользователя, имя, расположение пользователя, URL-адрес, URL-адрес аватара пользователя и еще некоторые данные.

Получение проектов пользователя

Мы получим список опубликованных проектов данного user_id. Количество элементов списка может быть ограничено при помощи параметра per_page.

Получение контента проекта

API возвращает информацию о проекте, включая модули запрошенного project_id.

Поскольку доступ к API Behance осуществляется через HTTP, мы можем увидеть данные тут же в браузере. Если вы используете Chrome или Firefox, то я бы рекомендовал вам установить плагин для браузера под названием JSONview для просмотра данных в формате JSON (* JavaScript Object Notation – текстовый формат обмена данными, основанный на JavaScript) в более удобочитаемом виде.

Просмотр данных в формате JSON при помощи JSONview

Лимит API

Пожалуйста, учтите, что Behance накладывает ограничение на количество выполняемых за 1 час запросов к API – 150. Если выполнено слишком много запросов, то мы начнем получать пустые ответы и не получим никакого контента. Вот как описывается это ограничение в документации:

Количество запросов ограничено 150 в час и подсчитывается на основании публичного IP-адреса (* используется для идентификации узла в сети и для определения информации маршрутизации) сервера или устройства, выполняющего запрос. Если вы превысите норму, то начнете получать пустой ответ с кодом ответа 429 (Слишком много запросов).

Поэтому в этом руководстве мы воспользуемся оффлайн хранилищем HTML5 (* HTML5-хранилищем, Веб-хранилищем) для сохранения данных оффлайн, чтобы минимизировать количество запросов. Вместо того чтобы обращаться к API каждый раз, когда мы загружаем страницу, мы можем получить ее из хранилища. Пожалуйста, ознакомьтесь со следующими статьями для получения более детальной информации об оффлайн хранилище HTML5

План нашего веб-сайта

Перед созданием структуры нашего веб-сайта давайте взглянем на его план.

План нашего веб-сайта

Как вы видите, на нашем веб-сайте имеется три раздела:  Заголовок, Контент и Подвал (* Header, Content и Footer). В Заголовке содержатся аватар пользователя, его имя, области творческой деятельности и его местонахождение. В разделе Контент отображается портфолио пользователя, где указаны названия проектов и области творческой деятельности. В Подвале мы добавим логотип Behance, указывая таким образом, что веб-сайт работает на базе API Behance.

Создание структуры сайта и добавление контента

Давайте начнем с создания папки под названием personal-portfolio и файла index.html с базовой разметкой HTML5. В index.html мы подключим следующие библиотеки:

jQuery

В этом руководстве мы будем использовать jQuery главным образом для двух целей: выполнения манипуляций с DOM (* Document Object Model – объектная модель документа) и обращения к API Behance при помощи API $.getJSON().

Сегодня имеется две версии jQuery: 1.x и 2.x. Версия 1.x предназначена для поддержки более старых браузеров, а именно Internet Explorer 8 и и более ранних версий, в то время как версия 2.x ориентирована на более современные браузеры. Мы предположим, что живем сейчас в мире, где все используют современные браузеры (может я и ошибаюсь). Так что в данном руководстве мы можем с уверенностью использовать jQuery 2.x.

Handlebars.js

Handlebars – замечательный шаблонизатор (* программное обеспечение для комбинирования шаблонов с моделью данных для получения конечных документов), работающий на основе JavaScript. В данном руководстве мы будем использовать Handlebars для создания шаблона для отображения данных, полученных при помощи API Behance. На Tuts+ имеется два скринкаста (* цифровой файл, в котором хранится последовательность изображений с экрана монитора (screen output), зачастую с текстовыми и аудио-подсказками), которые могут помочь войти вам в курс дела:

Если вы еще не работали с Handlebars, мы бы вам рекомендовали тщательно ознакомиться с этими скринкастами или какими-либо другими руководствами, где рассматриваются основы работы с этим шаблонизатором, перед тем как идти далее.

В этом руководстве мы не будем добавлять библиотеки для работы с JavaScript и CSS в папку проекта, чтобы размер файлов нашего проекта был меньше. Вместо этого мы подключим их с CDN (* content delivery network – сеть доставки (распространения) контента) при помощи CDNJS.com. Откройте index.html в редакторе и добавьте следующие библиотеки внутри тега head.

Пожалуйста, обратите внимание, что если для размещения index.html вы используете локальный сервер, то вам необходимо добавить http:// в каждой ссылке, направляющей на CDNJS.com.

Создаем HTML-разметку для разделов

HTML-разметка для разделов нашего веб-сайта – Заголовка, Контента и Подвала – довольно проста. Мы используем элемент HTML5 header для Заголовка, элемент div в качестве обертки для Контента и элемент HTML5 footer для Подвала. Всем этим элементам присвоен уникальный ID и класс для добавления им стилевого оформления и обращения к ним в скриптах. Ниже представлена HTML-разметка внутри тега body, которую  имеем на данном этапе.

Создаем шаблоны Handlebars

В этом разделе мы создадим шаблоны Handlebars для отображения контента разделов нашего веб-сайта. И мы начнем с шаблона для Заголовка, в котором будут использоваться данные пользователя с конечной точки API со следующим адресом – www.behance.net/v2/users/{user_id}

Шаблон Handlebars оборачивается в тег script со специальным типом text/x-handlebars-template, для которого также желательно задать уникальный ID для упрощения обращения к шаблону, например так:

Внутри тега script мы добавим разметку для контента Заголовка с классами для добавления стилевого оформления. Также мы добавим класс из шрифтового набора иконок Foundation Icon Fonts 3, который начинается с fi-, для отображения иконок. И, наконец, мы добавим заполнители контента в виде выражений Handlebars.

Каждый из этих заполнителей соответствует ключу, пришедшему в составе данных в формате JSON с API. Например при помощи {{user.display_name}} будет выведено отображаемое имя пользователя. display_name – собственно свойство, в котором содержится значение имени. Но поскольку оно принадлежит объекту user, мы должны ссылаться на него как на user.display_name. Это справедливо и для остальных заполнителей в этом шаблоне и тех, что рассмотри далее.

Отображаемое имя пользователя в составе данных в формате JSON

Далее мы создадим шаблон для отображения портфолио, и это будет последний шаблон Handlebars, который мы создадим для нашего веб-сайта. Для начала мы создаем новый div с ID portfolio внутри раздела Контент. Мы создаем этот div для оборачивания портфолио на тот случай, если нам будет необходимо добавить в этот раздел дополнительный контент. Далее мы добавляем тег script, в котором будет располагаться шаблон. На данном этапе HTML-разметка нашего портфолио должна выглядеть следующим образом:

Ниже показано, что в полученных с www.behance.net/v2/users/{user_id}/projects данных имеется массив с портфолио пользователя. Для отображения данных массива в шаблоне нам необходимо будет обратиться к каждому его элементу при помощи хелпера Handlebars {{each}}.

Массив проектов, полученный с API Behance

Мы разместим портфолио в неупорядоченном списке. Что же, давайте добавим элемент ul и обернем элемент li при помощи хелпера {{#each}}...{{/each}} следующим образом:

Далее мы создадим разметку для содержимого каждого элемента массива. Как упоминалось ранее, мы отобразим изображение с эскизом, имя и области творческой деятельности. Мы разместим их внутри тегов li, которые находятся внутри нового тега div, что располагается в теге с классом portfolio-content.

Обратите внимание на то, что в коде имеется несколько условных хелперов Handlebars вроде {{#if this.covers.[404]}}. Мы используем их для подбора изображения с эскизом необходимого размера. Размер изображения не всегда может быть 404px (наибольший размер для изображения с эскизом), может быть доступно только изображение меньших размеров. Ниже показано, что на Behance изображения обрезаются  до этих размеров: 404px, 230px, 202px и 115px.

Размеры изображения с эскизом

HTML-разметка для Подвала чрезвычайно проста. Мы добавим два тега р: в одном будет располагаться фраза "Powered by" (* «Работает на базе»), а в другом – ссылка на Behance. Мы добавляем класс fi-social-behance в теге а для отображения логотипа Behance из шрифтового набора иконок Foundation Icon Fonts.

На данном этапе мы завершили создание разметки HTML для контента нашего веб-сайта. Однако если мы откроем файл с ней в браузере, то ничего пока что не увидим! Это так, поскольку нам необходимо выполнить запрос к API и затем скомпилировать данные вместе с шаблоном Handlebars.

Вызов API Behance и компиляция шаблона

Давайте создадим тег script для размещения нашего кода JavaScript. Также мы создадим две переменные, в которых будут размещаться ключ к API Behance и ID пользователя. Как было упомянуто ранее, мы будем использовать портфолио "Creativemints".

Под этими двумя переменными мы добавляем следующую функцию. За счет этой функции будет вызвана конечная точка API Behance для получения данных пользователя и скомпилирован шаблон Handlebars для заголовка.

Давайте рассмотрим этот код подробнее. Вначале мы сохранили конечную точку API Behance для получения данных пользователя в переменной behanceUserAPI. Обратите внимание, что мы добавили параметр callback= в этот адрес. Благодаря этому мы предотвращаем появление ошибки Not Allowed Access, возникающей по причине правила ограничения домена.

Несколько слов о sessionStorage

Ранее в этом руководстве мы упомянули, что для API Behance существует ограничение, которое заключается в том, что к нему можно выполнять до 150 запросов в час, и поэтому мы решили использовать оффлайн хранилищем HTML5 для сохранения данных. В этой функции мы воспользовались sessionStorage. Причина, по которой мы используем sessionStorage для сохранения данных профиля пользователя, состоит в том, что пользователь мог бы изменить его/ее профиль в любое время, однако мы не можем предугадать это. Так что вместо localStorage, благодаря которому данные сохраняются постоянно, мы используем sessionStorage, за счет чего данные будут удалены сразу после закрытия вкладки браузера. Поэтому после повторного открытия браузера и обращения к веб-сайту будут использоваться обновленные данные с API Behance.

В sessionStorage, однако, могут храниться данные только в форме строки или чистого текста. Поэтому, как вы видите в вышеупомянутой функции, мы воспользовались JSON.stringify(); для преобразования данных в форме JSON-объекта в строку перед их сохранением в sessionStorage. Затем мы будем извлекать данные при помощи JSON.parse() для обратного преобразования данных в объект JSON.

Также мы создали функцию setUserTemplate() для компиляции шаблона Handlebars и добавления контента при помощи метода jQuery .html(). Функция выполняется согласно следующему условию: если данные доступны в sessionStorage, то мы сразу же выполняем функцию, в ином случае нам необходимо будет для начала отправить запрос к API при помощи $.getJSON() и позднее выполнить ее.

Также вы видите sessionStorage при переходе на вкладку Resources в Chrome DevTools и браузерах, работающих на основе Webkit.

sessionStorage в Chrome DevTools.

Компиляция контента

Затем мы добавляем ниже функцию для компиляции шаблона портфолио в содержимое раздела Контент. Эта функция очень похожа на вышеупомянутую для Заголовка, за исключением того, что тут имеются переменная perPage и параметр per_page=, который мы будем использовать для ограничения числа проектов, полученных с API.

Теперь в браузере мы уже должны будем увидеть профиль пользователя и портфолио. Однако для них еще не добавлено стилевое оформление.

В следующий раз ...

В следующей части этой серии мы добавим стилевое оформление для контента нашего портфолио, в результате чего получим динамическую и соответствующую требованиям отзывчивого веб-дизайна веб-страницу. Тогда и увидимся!

Advertisement
Advertisement
Advertisement
Advertisement
Looking for something to help kick start your next project?
Envato Market has a range of items for sale to help get you started.