Сегодня я научу вас, как получить доступ к National Geographic API (потому что кто не любит National Geographic, верно?). Так что же такое интерфейс прикладных программ (API)? Это приложение, которое позволяет двум веб-сайтам обмениваться информацией. В нашем случае мы будем использовать National Geographic API для отображения их статей на нашем сайте!
Чтобы получить доступ к API, вы должны запросить ключ. Чтобы получить ключ API National Geographic, перейдите по ссылке https://newsapi.org/s/national-geographic-api.
Как только вы доберетесь туда, нажмите синюю кнопку с надписью «Получить ключ API, чтобы начать поиск в National Geographic». Вы перейдете на страницу настройки своей учетной записи, где вы должны ввести свое имя, адрес электронной почты и пароль. Затем он назначит вам ключ; ключ будет представлять собой длинную строку цифр и букв. Скопируйте этот ключ и вставьте его в безопасное место (он понадобится вам позже).
Хорошо, создайте новую папку на рабочем столе. Назовите вашу новую папку «national_geographic» и перейдите к нашему терминалу. Как только вы окажетесь в своем терминале, убедитесь, что вы находитесь в национальном географическом каталоге. Теперь создайте два новых файла, index.js и index.html. Там вы можете ввести команду atom ., и она откроет ваш каталог с двумя новыми включенными файлами.
Я не буду сейчас вдаваться в подробности о том, что происходит в файле HTML, но скопируйте и вставьте его.
(скопируйте и вставьте приведенный ниже код в файл index.html)
‹!DOCTYPE HTML›
‹html lang=’ru’›
‹голова›
‹мета-кодировка=’utf-8’›
‹/голова›
‹title›Учебное пособие по National Geographic API‹/title›
‹тело›
‹div id=’content’›‹/div›
‹script src=’index.js’›‹/script›
‹/тело›
‹/html›
Теперь давайте перейдем к файлу index.js.
(скопируйте и вставьте приведенный ниже код в файлindex.js)
var request = new XMLHttpRequest();
request.open('GET', 'https://newsapi.org/v2/top-headlines?sources=national-geographic&apiKey=THIS_IS_WHERE_YOU_WILL_PUT_YOUR_API_KEY', true);
request.onload = функция () {
};
запрос.send();
Теперь давайте посмотрим, что происходит в коде index.js.
Во-первых, мы создаем переменную с именем request, которая будет содержать наш объект XMLHttpRequest. Этот новый объект создаст новый HTTP-запрос.
Затем мы используем request.open для получения нашего URL-адреса (здесь мы сообщаем нашему объекту запроса, что мы ищем).
Затем мы устанавливаем в request.onload функцию, которая позволит нам видеть и манипулировать ответом HTTP, который мы получаем.
Наконец, мы завершаем наш запрос с помощью request.send(). И это почти все! На данный момент вы получили доступ к National Geographic API. Поздравляю!
Но нет никакого удовольствия в доступе к API, если мы не можем манипулировать данными, играть с ними и видеть их. Итак, давайте сделаем это сейчас.
(скопируйте и вставьте приведенный ниже код в request.onload функциюв файлеindex.js.)
const arrayOfObjs = JSON.parse(this.response);
if (request.status ›= 200 && request.status ‹ 400){
const articleArray = arrayOfObjs.articles;
for(var i = 0; i ‹ articleArray.length; i++){
//это позволит нам увидеть наши статьи и изображения позже
const article = document.createElement(‘div’);
article.setAttribute('класс', 'статья');
// название статьи
const h1 = document.createElement('h1');
h1.textContent = articleArray[i].title;
console.log(h1);
}
}еще{
console.log("Произошла ошибка");
}
Теперь давайте рассмотрим код выше. Первое, что мы сделали, это создали константную переменную с именем arrayOfObjs. Мы назначили ему нашу функцию разбора JSON, которая приняла наш ответ в качестве параметра. Затем функция парсера JSON вернет массив объектов, который нам и нужен.
Наша следующая строка кода — это оператор if-else, который проверяет, не возникла ли ошибка при выполнении запроса к API. Если мы не получили ответ об ошибке, мы перебираем переменную articleArray. В противном случае выводится сообщение «Произошла ошибка».
Нам не нужна вся информация, содержащаяся в нашей переменной arrayOfObjs. В нем полно информации, которая нам сейчас не нужна. Нам нужны только наши статьи. Итак, мы создали нашу переменную articleArray, в которой хранятся только статьи и ничего больше.
Теперь мы подошли к самой интересной части, фактически просмотрев наши данные. Мы пока не сможем видеть наши данные в браузере, но мы сможем увидеть их в нашей консоли Chrome.
Чтобы просмотреть консоль Chrome, выполните следующие действия.
1. Откройте Хром
2. Перейдите на вкладку «Файл».
3. Нажмите «Открыть файл».
4. Откройте папку «national_geographic».
5. Щелкните index.html.
Это откроет файл HTML в вашем браузере Chrome, и вы увидите пустую страницу. Не паникуйте! Щелкните правой кнопкой мыши и выберите «проверить» в раскрывающемся меню.
Вы также можете перейти в Chrome -> вид -> Разработчик -> Инструменты разработчика.
Перейдите на вкладку консоли, и вы увидите элементы h1 с заголовками статей. Как здорово!
Теперь мы собираемся получить доступ к изображениям статьи и URL-адресам, которые могут привести нас к полной статье.
(скопируйте код под строкой console.log(h1) в приведенном выше коде)
//ссылка на изображение статьи и создание нового элемента, чтобы мы могли видеть его в нашем браузере
const img = document.createElement(‘img’);
img.src = articleArray[i].urlToImage;
console.log(img);
//ссылка на содержание статьи и создание нового элемента, чтобы мы могли видеть его в браузере
const a = document.createElement('a');
a.href = articleArray[i].url;
console.log(a);
//код позволит нам просматривать наши заголовки, изображения
container.appendChild(статья);
статья.appendChild(h1);
article.appendChild(img);
article.appendChild(a);
//добавьте эту строку, чтобы при нажатии на изображение вы переходили к полной статье
a.appendChild(img);
На этом этапе вы можете обновить свой браузер, использовать «проверить» и перейти на вкладку консоли. Вы увидите переменные «h1», «img» и «a» на консоли.
Чтобы увидеть заголовки и изображения в браузере, скопируйте и вставьте приведенный ниже код.
(скопируйте и вставьте вверху файла index.js.)
const app = document.getElementById(‘content’);
const img = document.createElement(‘img’);
const container = document.createElement(‘div’);
const h1 = document.createElement('h1');
const a = document.createElement('a');
container.setAttribute('класс', 'контейнер');
app.appendChild(h1);
app.appendChild(a);
app.appendChild(img);
app.appendChild(контейнер);
Ты сделал это! Теперь вы можете пойти и обновить свой браузер. Теперь на вашем сайте есть актуальные статьи National Geographic. Если вы нажмете на изображение, оно даже перенаправит вас на их сайт, чтобы увидеть полную статью!
(Пожалуйста, ознакомьтесь с рекомендациями National Geographic API перед использованием API)
Первоначально опубликовано на mcelis13.github.io.
