API и DOM: ЧТО это?!

Этот модуль научил меня многому об API (интерфейс прикладного программирования) и DOM (объектная модель документа). Для своего проекта я решил создать веб-сайт, используя данные с сайта PokeApi, как дань уважения Pokemon 151, который выйдет в следующем месяце! Финальную версию можно найти здесь. https://djricky808.github.io/Pokemon151API/

WTH — это API

API — это сокращение от Интерфейс прикладного программирования. Это набор команд/функций/протоколов/объектов, которые программисты могут использовать для создания своего программного обеспечения или веб-страниц с использованием внешних данных. Например, все данные о покемонах, которые я собрал: изображения, имена, типы, номер покедекса. Все это пришло из API. Точнее, PokeAPI https://pokeapi.co/.

Данные API можно получить с помощью так называемого обещания. Обещание — это то, что произойдет между настоящим моментом и когда-нибудь в будущем. При этом я получаю необходимые мне данные с веб-сайта API и ожидаю, что данные вернутся ко мне после завершения. Прежде чем двигаться дальше, я хотел убедиться, что все данные о покемонах, которые мне нужны, получены (все 151 из них).

const url = 'https://pokeapi.co/api/v2/pokemon/';

function fetchAllPokemon() {
  let promises = []
  for (let n = 1; n < 152; n++) {
    let promise = fetch(`${url}${n}`);
    promises.push(promise);
  }
  return Promise.all(promises);
}

fetchAllPokemon().then((response) => {
    return Promise.all(response.map((res) => res.json()))

Promise.all() помогает мне разобраться со всеми 151 покемоном еще до создания карточных данных. Это также помогло мне избежать проблем с циклами, когда я впервые создавал этот код в проекте.

Привет, мистер почтальон!

Самая большая проблема, с которой я столкнулся при выполнении этого задания, это… хорошо, я имею представление о том, что такое API и какова его цель, но как мне его использовать, не говоря уже о том, чтобы понять его.

Таким образом, мы можем получить определенные фрагменты данных в API, такие как объекты, одно полезное приложение, которое мне представили, под названием Postman (спасибо доктору Анжеле Ю за это представление, иначе я бы все еще ломал над этим голову).

Postman принимает данные API и отображает их в формате JSON (нотация объектов JavaScript). Это помогает мне определить, где я могу получить объект с именем покемона, какого он типа и где можно найти изображения.

Здесь я создаю каждую карточку на основе данных, которые получаю от API. В примере получения изображения покемона я вызываю объекты-спрайты, а затем другие вложенные объекты между ними.

Примечание: мне пришлось поставить в скобках «official-artwork» вместо «.official-artwork» из-за тире «-». Без out JS подумает, что это означает минус, и нарушит код. Каждый раз, когда вы вызываете вложенный объект с «-» в имени, вам нужно вместо этого поместить его в скобки.

Есть очень много других вещей, которые вы можете извлечь из этого API, например, какие движения они изучают, каковы их способности и т. д. Но ради этого проекта я сосредотачиваюсь только на названии, их типах и изображениях.

Теперь, чтобы собрать все это воедино.

const pokedex = document.getElementById('mainPokemon');

Вот тут-то и пригодится DOM. DOM означает объектную модель документа. Здесь мы берем наш JavaScript и используем его для подключения к элементам на нашей веб-странице, что дает нам возможность манипулировать им без необходимости редактировать HTML-файл. Представьте, что вам придется написать этот фрагмент кода 151 раз для каждого покемона. Gen 10, вероятно, выйдет раньше, чем я закончу.

Используя DOM, я могу настроить свой элемент div (который я дал «mainPokemon») и заставить JavaScript конструировать каждую карту, которая добавляется в div.

.innerHTML позволяет вам создавать элементы в JavaScript для добавления на ваш веб-сайт (а с помощью цикла вы можете создать столько, сколько вам нужно). Я использую переменные, созданные на основе данных, полученных от API. С помощью комбинации CSS я также могу использовать данные API для создания классов на основе объекта типа, чтобы я мог изменить цвет фона карты, чтобы он соответствовал основному типу каждого покемона. Мне не нужно искать каждого из этих покемонов, чтобы узнать, какой тип и цвет использовать, DOM и API уже делают это за меня.

DOM также может помочь вам редактировать элементы и удалять элементы и классы, чтобы вы могли сортировать эти элементы или перемещать их в другой раздел, например, для ваших любимых покемонов.

Заключение

Этот проект помог мне лучше понять, как работают API и как можно использовать их данные для включения их на свой веб-сайт с помощью объектной модели документа.