Итак, это случилось! Наконец-то я закончил создание своего первого одностраничного приложения: Daily Journaling. Это приложение было создано как часть моего проекта портфолио для Flatiron School, Software Engineer Bootcamp. С помощью этого приложения цифрового журнала вы можете:
- получить доступ к случайной ежедневной цитате, чтобы поддерживать мотивацию и позитивный настрой
- как ежедневная цитата
- написать новую запись в журнале
- искать прошлую запись в журнале по дате
В этой статье мы рассмотрим, как получить доступ к данным из API, а затем как отобразить эти данные в вашем проекте. Я собираюсь использовать часть кода приложения Daily Journaling в качестве примера, чтобы вы могли следовать и использовать те же шаги для своего собственного приложения.
Давайте начнем!
ШАГ 1: выберите свой API
Существует множество бесплатных общедоступных API-интерфейсов, так что предела нет. Для этого проекта я выбрал API котировок, чтобы иметь возможность отображать случайные цитаты. API от Type Fit, доступ к нему можно получить здесь: https://type.fit/api/quotes.
ШАГ 2: изучите API
Убедитесь, что вы прочитали документацию по API, чтобы понять, как получить доступ к вашему API (проверьте, нужен ли вам ключ или нужно ли вам подписаться…) и как записываются данные.
В нашем случае мы видим, что каждая цитата представляет собой объект с двумя ключами:
- текст
- автор
Это пригодится позже, когда придет время манипулировать данными.
ШАГ 3: доступ к данным
Теперь, когда мы знаем, как выглядят наши данные, пришло время получить к ним доступ с помощью нашего приложения. В нашем файле index.js мы будем использовать запрос на выборку:
ПРИМЕЧАНИЕ: просто замените URL-адрес API для своего проекта
Мне нравится выводить данные в console.log, чтобы убедиться, что мы действительно получили то, что хотели. В этом случае да, наш запрос на выборку выполнен успешно!
При использовании консоли инструментов разработчика в браузере Chrome вот что было в console.log (см. рис. 3)
ШАГ 4: «отобразить» данные
Теперь, когда мы знаем, что у нас есть доступ к данным в API, пришло время «отобразить» их в нашем проекте. Для этого мы собираемся настроить наш запрос на выборку и добавить функцию для отображения данных. Мы собираемся вызвать эту функцию displayQuote().
ПРИМЕЧАНИЕ: поскольку я хочу отобразить случайную цитату, я собираюсь изменить свой код, чтобы выбрать случайную цитату вместо всего массива цитат. (см. рис. 5)
Если вы обратите внимание на название ШАГА 4, вы заметите, что «отображение» было в « ». Это потому, что, несмотря на то, что мы написали весь этот код, мы все равно не увидим ничего отображаемого в нашем приложении. Это потому, что нам еще нужно:
- создайте элементы HTML, где мы хотим, чтобы наша цитата отображалась
- написать код для displayQuote()
Давайте сделаем именно это!
ШАГ 5: создайте элементы HTML, где мы хотим, чтобы наши данные отображались
Если мы правильно помним ШАГ 2, каждая цитата представляла собой объект с ключами текст и автор (см. рис. 1 и рис. 3). Итак, я выбрал два разных элемента HTML для отображения этих двух ключей:
- ‹q› ‹/q› для текста цитаты
- ‹p› ‹/p› для автора цитаты
ПРИМЕЧАНИЕ: этот код находится в моем index.html
Я также дал каждому элементу идентификатор, чтобы я мог получить к ним доступ позже в своем index.js.
ШАГ 6: доступ к элементам HTML в index.js
Прежде чем мы начнем кодировать нашу функцию displayQuote(), мы должны иметь доступ к вновь созданным элементам html. Поскольку мы дали идентификатор этим элементам, вы можете сделать это, используя:
- .querySelector()
OR
- .getElementById()
ШАГ 7: кодирование нашей функции displayQuote()
Наконец-то мы можем написать код для displayQuote(). Когда мы это сделаем, давайте вспомним несколько вещей:
- когда мы вызывали displayQuote(), у нас была цитата в качестве параметра (см. рис. 5)
- цитата — это объект с двумя ключами: текст и автор (см. рис. 3)
- мы хотим, чтобы значение innerText каждого элемента html было значением соответствующего ключа нашего объекта цитаты
ПРИМЕЧАНИЕ. Я решил, что имя автора должно быть в верхнем регистре, поэтому я буду использовать .toUpperCase()
ШАГ 8: еще раз проверьте, все ли работает
Если вы заметили (см. рис. 9), я использовал console.log(quoteObj), чтобы убедиться, что параметр, с которым мы имеем дело, действительно является объектом кавычек. Вот что вернул console.log() в консоли инструментов разработчика:
Тогда вот как наша отображаемая цитата выглядит в нашем приложении:
ЗАКЛЮЧИТЕЛЬНЫЕ СЛОВА
В этой статье вы узнали пошаговый процесс доступа к данным из API и отображения этих данных в своем приложении.
Если у вас есть какие-либо вопросы, просто оставьте мне комментарий ниже, и я с радостью отвечу вам.
Если вы хотите проверить весь проект, вы можете сделать это здесь.
