Чтобы увидеть готовый результат в действии, посмотрите видео. Можете смело им пользоваться, если вы предпочитаете изучать материал по ролику вместо чтения (или в дополнение к чтению):
Начало
В первую очередь вам понадобится среда разработки для ReactJS. В качестве стартового шаблона проекта в статье будет использоваться create-react-app. После необходимо будет посетить страницу разработчиков Giphy и создать учетную запись, чтобы получить ключ API. Как только вы это сделаете, сразу увидите подобный дашборд:
Вам нужно нажать кнопку «create an App» и выбрать опцию SDK для приложения. Затем дашборд предоставит ключ API, который вы будете использовать для выполнения вызовов API Giphy.
Настройка файла и папки приложения
Структура этого туториала будет стандартной для проектов ReactJS. Внутри каталога src создайте каталог компонентов и два файла, Error.js и TextList.js. Вам также необходимо создать файл .env в корне проекта, который будет использоваться для хранения ключа API. Как бы вы ни назвали переменную, нужно добавить REACT_APP перед ней:
Установка Giphy JS-fetch
Последнее, что необходимо сделать – установку вспомогательной библиотеки API Giphy с помощью следующей команды:
Вызов APIGiphy
Прежде чем отображать данные ответа, проверим их с помощью запроса API . Внесите следующий код в файл App . js :
Посмотрим, что происходит в этом коде:
- const giphy=new GiphyFetch(process.env.REACT_APP_GIPHY_KEY) – это место, где используется вспомогательная библиотека Giphy для создания объекта, который будет применяться для взаимодействия с API Giphy.
- process.env.REACT_APP_GIPHY_KEY – способ передачи ключа API в качестве аргумента из файла .env. Вы также можете передать свой ключ API в виде строки, но лучше этого в продакшене не делать, потому что кто-то может украсть его и использовать.
Внутри основного компонента приложения создается три фрагмента состояния с помощью хуков:
- text – в нем будет храниться пользовательский ввод. Данные будут переданы API в качестве аргумента для создания текста.
- err будет использоваться для условного отображения ошибки позже, если пользователь попытается отправить пустую строку.
- results – это пустой массив, который будет использоваться для хранения результатов ответа API.
Если запустить код и проверить консоль разработчика, можно увидеть, что API Giphy вернул массив с 20 объектами.
Отображение данных
Сначала создадим простой компонент ошибок, который может отображать пользовательское сообщение. Поместите следующий код в Error.js внутри папки компонентов:
Компонент Error очень прост. Он принимает состояние err и текстовую строку в качестве props. Если значение равно true, а если false – вернет значение null.
Далее идет компонент TextList, который примет состояние results в качестве props, а затем отобразит данные в вашем приложении:
Этот компонент немного сложнее:
- Компонент Item принимает значение URL, которое находится внутри каждого возвращаемого из API значения. Он использует этот URL в качестве источника для элемента изображения.
- Массив состояний results из компонента приложения передается в компонент TextList в виде GIF-файлов. Массив сопоставляется для создания всех компонентов Item и всех результатов, присваивается переменной items, а затем возвращается в div. Позже этот контейнер будет оформлен, чтобы создать макет сетки.
Импорт компонентов в Main App
Теперь нужно использовать готовые компоненты в нашем JSX. Окончательный код в файле App.js должен выглядеть так:
Единственными изменениями здесь являются две нижние строки, добавленные в оператор return.
Компоненту Error передается состояния err и text prop, которые будут отображаться только в случае возникновения ошибки. В этом приложении есть только одно условие для ошибки – если входные данные пусты. Вы можете добавить дополнительные проверки с кастомными сообщениями об ошибках.
Затем мы используем условный рендеринг с логическим оператором &&. Это приводит к тому, что компонент TextList отображается только если массив результатов не пуст, что означает – ответ API успешно возвращен с нашими gif-файлами.
Если запустить код на этом этапе, мы увидим практически готовое и функциональное приложение. Если использовать поле input и нажать « S ubmit », GIF-файлы должны быть отображены в приложении.
Добавляем стиль с помощью CSS
Последнее, что нужно – сделать приложение немного красивее. Не стесняйтесь настраивать любой из этих стилей, если хотите изменить его внешний вид. Поместите следующий код в файл App.css:
Здесь не происходит ничего сложного – немного стиля для кнопки отправки и немного тени для поля ввода.
Можно воспользоваться медиа-запросами для адаптивного дизайна, которые изменяют количество столбцов в зависимости от размера экрана.
Другие возможности API Giphy
Анимированные смайлики
Emoji возвращает кучу анимированных смайликов, как и API анимированного текста, который мы использовали выше, за исключением того, что не нужно передавать ему какие-либо аргументы. Пример вызова API:
Эта штука может быть полезна, если вы создаете приложение для чата и хотите, чтобы пользователям было легко использовать смайлики в сообщениях.
Готовые UI-компоненты
Можно создать сетку, похожую на то, что было создано ранее, всего несколькими строками кода:
Вы получаете некоторые дополнительные функции, вроде автоматического динамического обновления, чтобы подгружать контент, когда пользователи прокрутят экран до нижней части сетки.
Можете выбирать между шаблонами, которые обрабатывают почти все, или просто компонентом сетки, который дает больше контроля и свободы.
Вот здесь выложена интерактивная демка, предоставленная Giphy.
Trending API
Эта фича возвращает список постоянно обновляемого контента на основе вовлеченности пользователей и того, что в настоящее время популярно в Giphy.
Search API
Данный инструмент похож на анимированный текст – вам просто нужно передать поисковый запрос в качестве параметра, и вы получите массив соответствующих GIF-файлов.
Существует еще много доступных дополнений API, которые можно найти в документации по API Giphy.
Заключение
Надеемся, вам было интересно, и вы используете описанное API в своих проектах. Если вы заинтересованы и в других расширяющих возможности API фишках, которые можно использовать для создания портфолийных проектов, стоит посмотреть видео, включающее в себя еще 8 классных API.