Автор оригинала: Charles Mahler.
В этом руководстве вы создадите приложение, которое генерирует динамический анимированный текст с помощью API GIPHY с ReactJS.
После этого я пойду на некоторые другие функции API Giphy предоставляет, чтобы вы могли использовать другие интересные проекты.
Вы можете найти Код для учебника здесь Отказ
Видеоурок
Чтобы увидеть предварительный просмотр готового продукта в действии, вы можете посмотреть начало этого видео. Если вы предпочитаете следить за видеоуронением вместо чтения (или в дополнение к чтению), вы также можете следить за остальным видео.
Начиная
Чтобы начать, вам понадобится базовая среда разработки для реагирования. Я буду использовать приложение Create-raction-App в качестве исходного шаблона проекта.
Далее вам нужно посетить Страница разработчиков Giphy И создайте учетную запись, поэтому вы можете получить ключ API. Как только вы создали свою учетную запись, вы увидите такую приборную панель:
Вам нужно нажать «Создать приложение» и выберите опцию SDK для вашего приложения. Затем ваша приборная панель представит вам ключ API, который вы будете использовать, чтобы звонить в GIPHY API.
Как настроить файл приложения и папку
Структура для этого руководства будет стандартным для проектов REVENTJS. Внутри SRC каталог, создать Компоненты каталог и создать два файла, Error.js и TextList.js
Вам также нужно создать .env Файл в корне проекта, который вы будете использовать для хранения ключа API. Что бы вы ни называете вашу переменную, вам нужно добавить rage_app перед ним, как это:
Rage_app_giphy_key = apike_here.
Установите GiPhy JS-Fetch
Последняя вещь, которую вам нужно сделать, это установить библиотеку помощников API GIPHY, которую вы можете сделать, используя следующую команду:
NPM Установить @ giphy/js-fetch-api
GIPHY API Call.
Первая задача в создании этого приложения создает входную форму, чтобы принять текст, который вы хотите генерировать из GIPHY API. Затем вы будете использовать этот текстовый ввод и отправить его в качестве запроса API.
Перед отображением этого ответа давайте проверим ее, просто сделав запрос API, а затем ввение ответа. Напишите следующий код в вашем App.js файл:
import { GiphyFetch } from '@giphy/js-fetch-api'
import {useState} from 'react'
import TextList from './components/TextList'
import Error from './components/Error'
import './App.css';
const giphy = new GiphyFetch(process.env.REACT_APP_GIPHY_KEY)
function App() {
const [text, setText] = useState('')
const [results, setResults] = useState([])
const [err, setErr] = useState(false)
const handleInput = (e) => {
setText(e.target.value)
}
const handleSubmit = (e) => {
if(text.length === 0) {
//set error state to true
setErr(true)
return
}
console.log(text)
const apiCall = async () => {
const res = await giphy.animate(text, {limit: 20})
console.log(res.data)
setResults(res.data)
}
apiCall()
setText('')
setErr(false)
}
return (
Animated Text Generator
Type text into the form and hit submit
);
}
export default App;Давайте посмотрим, что происходит в этом коде:
const giphyfetch (process.env.reach_app_giphy_key) Если вы используете библиотеку Hiphy Helper для создания объекта, который вы будете использовать для взаимодействия с помощью GIPHY API.
process.env.reac_app_giphy_key Как ваш ключ API передан как аргумент из .env файл. Вы также можете пройти ключ API как строка, но вы не захотите делать это в производстве, потому что кто-то может украсть и использовать ваш ключ.
Внутри основного компонента приложения вы создаете три части состояния, используя крюки. 1-й это текст Что будет то, что хранит пользовательский ввод. Это то, что будет передано на API в качестве аргумента для генерации текста.
Err Будет использоваться для условной рендеринга погрешности позже, если пользователь пытается отправить пустую строку.
И Результаты является пустым массивом, который будет использоваться для хранения результатов от ответа API.
Если вы запускаете код и проверьте консоль разработчика, вы должны увидеть, что GIPHY API вернул массив с 20 объектами.
Как отобразить данные с реагированием
Теперь, когда данные правильно хранятся в состоянии, все, что вам нужно сделать, это отображать эти данные с JSX. Чтобы справиться с этим, мы закончим эти два компонента, которые мы создали ранее.
Сначала мы сделаем простой компонент ошибок, который может отображать пользовательское сообщение. Поместите следующий код в Error.js Внутри папки ваших компонентов:
const Error = (props) => {
if(!props.isError) {
return null
}
return (
{props.text}
)
}
export default Error Ошибка . Компонент очень прост. Требуется Err Состояние и текстовая строка в качестве реквизита, и если значение верно, он сделает текст. Если Err неверно, он возвращает null.
Далее – компонент TextList, который займет Результаты Состояние как опоры, а затем отобразите данные в своем приложении:
const TextList = (props) => {
const items = props.gifs.map((itemData) => {
return 
);
};
export default TextList;Этот компонент немного сложнее, поэтому вот что происходит:
Предмет Компонент принимает значение URL, которое находится внутри каждого значения, возвращаемого из API. Он использует этот URL в качестве источника для элемента изображения.
Результаты Состоянный массив из компонента приложения передается в компонент TextList AS GIFS Отказ Массив сопоставляется, чтобы генерировать все Предмет Компоненты для всех результатов и назначены Предметы Переменная, а затем возвращена внутри контейнера Div. Позже мы стимулируем этот контейнер, чтобы создать планировку сетки.
Как импортировать компоненты в основное приложение
Теперь вам просто нужно использовать эти готовые компоненты в вашем JSX. Последний код вашего App.js Файл должен выглядеть так:
import TextList from './components/TextList'
import Error from './components/Error'
import { GiphyFetch } from '@giphy/js-fetch-api'
import {useState} from 'react'
import './App.css';
const giphy = new GiphyFetch(process.env.REACT_APP_GIPHY_KEY)
function App() {
const [text, setText] = useState('')
const [results, setResults] = useState([])
const [err, setErr] = useState(false)
const handleInput = (e) => {
setText(e.target.value)
}
const handleSubmit = (e) => {
if(text.length === 0) {
//set error state to true
setErr(true)
return
}
console.log(text)
const apiCall = async () => {
const res = await giphy.animate(text, {limit: 20})
setResults(res.data)
}
apiCall()
//change error state back to false
setText('')
setErr(false)
}
return (
Animated Text Generator
Type text into the form and hit submit
Единственные изменения здесь – нижние две линии, добавленные в оператор возврата:
Ошибка . Компонент пропускается Err состояние и а текст Пропор, который будет отображаться только в случае возникновения ошибки.
В этом приложении есть только одно условие ошибки в случае пустого ввода, но вы можете добавить дополнительные проверки с пользовательскими сообщениями об ошибках.
Затем мы используем условный рендеринг с && логический оператор. Это вызывает TextList Компонент для визуализации только если массив результатов не пусты, что означает, что ответ API успешно возвращается с нашими GIFS.
Если вы запустите свой код в данный момент, вы должны увидеть безобразное, но функциональное приложение. Если вы используете поле ввода и щелкните кнопку «Отправить», GIFS должен быть возвращен и отображен в вашем приложении.
Как добавить стайлинг с CSS
Последнее, что нужно сделать, это сделать приложение выглядеть немного красивее. Не стесняйтесь настроить любой из этих стилей, если вы хотите настроить, как выглядят вещи. Поместите этот код в свой App.csss файл:
.App {
text-align: center;
}
.error {
color: #b50000;
font-size: 20px;
font-weight: 500;
}
.input-field {
font-size: 20px;
vertical-align: middle;
transition: .5s;
border-width: 2px;
margin: 5px;
}
.input-field:focus {
box-shadow: 0 14px 28px rgba(0,0,0,0.25), 0 10px 10px rgba(0,0,0,0.22);
outline: none;
}
.input-field:hover {
box-shadow: 0 14px 28px rgba(0,0,0,0.25), 0 10px 10px rgba(0,0,0,0.22);
}
.submit-btn {
background-color: rgb(19, 209, 235);
color: #fff;
padding: 6px 30px;
vertical-align: middle;
outline: none;
border: none;
font-size: 16px;
transition: .3s;
cursor: pointer;
}
.submit-btn:hover {
background-color: rgb(10, 130, 146);
}
.text-container {
display: flex;
flex-wrap: wrap;
justify-content: center;
}
.gif-item {
flex-basis: 19%;
}
img {
max-width: 100%;
}
@media screen and (max-width: 992px) {
.gif-item {
flex-basis: 31%;
}
}
@media screen and (max-width: 600px) {
.gif-item {
flex-basis: 48%;
}
}
Здесь ничего не происходит с CSS. Просто некоторое укладка для кнопки отправки и некоторая коробка тени для поля ввода.
Существует также несколько средств массовой информации для некоторой отзывчивой конструкции, которая изменяет количество столбцов в зависимости от размера экрана.
Другие функции giphy API
Анимированный текстовый API – это только одна функция, доступная в GIPHY API. Я пойду через несколько других функций, которые могут быть полезны как часть проекта или в качестве сольного проекта.
Анимированные эмоджи
Конечная точка Emoji очень простая с точки зрения использования. Он возвращает кучу анимированных эмоджи, как и анимированные текстовые API, которые вы использовали выше, за исключением того, что вам не нужно проходить эти аргументы. Пример API Call:
const gf.emoji ()
Эта конечная точка может быть полезна, если вы создаете приложение чата и хотите, чтобы пользователи могли использовать Emoji в их сообщениях.
Предварительно встроенные пользовательские интерфейсы
Если вам не хочется возиться с тонкой таможенного кода, как мы сделали в этом руководстве, GIPHY фактически предоставляет компоненты для inventjs, так и обычного JavaScript.
Вы можете сделать сетку очень похожей на то, что мы создали в этом руководстве только с несколькими строками кода:
import { Grid } from '@giphy/react-components'
import { GiphyFetch } from '@giphy/js-fetch-api'
// use @giphy/js-fetch-api to fetch gifs
// apply for a new Web SDK key. Use a separate key for every platform (Android, iOS, Web)
const gf = new GiphyFetch('your Web SDK key')
// fetch 10 gifs at a time as the user scrolls (offset is handled by the grid)
const fetchGifs = (offset: number) => gf.trending({ offset, limit: 10 })
// React Component
ReactDOM.render(Вы получаете некоторые дополнительные бонусные функции, такие как автоматические динамические обновления, чтобы получить больше контента, когда пользователи прокручиваются до нижней части сетки.
Вы можете выбрать между шаблонами, которые обрабатывают практически все или просто компонент сетки, который дает вам немного больше контроля.
Вот и Интерактивное демонстрация предоставляется GIPHY.
Trending API
Эта конечная точка возвращает список постоянно обновленных контента на основе участия пользователей и что в настоящее время популярно на GIPHY.
Поиск API.
Эта конечная точка аналогична конечной точке анимированного текста, вам просто нужно пройти поисковый запрос в качестве параметра, и вы получите массив GIFS, которые соответствует.
Доступны еще много конечных точек API. Вы можете увидеть остальные в Документация API Giphy Отказ
Заключение
Вот и это для этого учебника! Я надеюсь, что вы нашли это интересно, и вы делаете несколько прохладных проектов, используя GIPHY API.
Если вы заинтересованы в группе других крутых API, которые вы можете использовать для создания портфолио проектов, вы можете проверить это видео, а также более 8 API, которые я думаю, что я думаю, что действительно круто.