— Неделя 2 курса Software Engineering BootCamp в школе Flatiron (Нью-Йорк) —

На этой неделе я узнал следующее:

  • Как использовать метод «fetch» ​​для получения данных из локальных и внешних API
  • Как разместить локальный db.json и что такое http://localhost:3000/
  • Создать, прочитать, обновить, удалить (CRUD)/GET, POST, PATCH, DELETE

Я решил применить некоторые из них при создании очень простого веб-приложения — получить данные из общедоступного API, который предоставляет текущее местоположение Международной космической станции (МКС), отобразить их на веб-странице, переместив значок МКС на карту мира, храните данные в локальной базе данных. Полный код на github: https://github.com/chris-t-li/project-iss-api

[Обратите внимание: это очень короткий пост для моего обучения. Я не вдавался в подробности каждого фрагмента кода и необходимых методов. Если что-то непонятно, обращайтесь]

Первоначальная настройка

  1. Создайте каталоги и файлы, которые мне понадобятся, с помощью Терминала:
$ mkdir project-iss-api
$ cd project-iss-api
$ touch index.html
$ touch index.js
$ touch styles.css
$ touch db.json
$ code .

2. Код в index.html — связывание CSS, откладывание JS до загрузки HTML и добавление заголовка, кнопки и ‹div› для карты мира и значка ISS.

3. Стили — я просто устанавливаю размеры карты мира и добавляю изображения в качестве фоновых изображений к своим тегам ‹div›. Я загрузил изображения для карты мира и МКС из Google Images и сохранил их в каталоге с именем «активы» в папке моего проекта.

3.a Давайте посмотрим, что у нас есть. Загрузите index.html в браузере, и мы увидим наш фон карты мира и значок МКС, наложенный сверху. Большой!

4. Получить

Публичный API, который я буду использовать, — это open-notify, который не требует ключа API и отправляет обратно долготу, широту и временную метку текущего местоположения ISS в формате JSON. В MDN есть простой пример использования метода Fetch.

Что касается моего кода index.js, я хочу получить данные из API, когда я нажимаю кнопку «Отследить ISS», поэтому я использую прослушиватель событий на этой кнопке, который затем запускает функцию «startFetch».

Затем я объявляю функцию startFetch

Во втором методе «.then» я хочу сделать несколько вещей:

  1. Изменяет местоположение изображения МКС на карте

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

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

Много часов спустя… (Я не думаю, что это идеально, но пока достаточно)

2. Запишите координаты долготы и широты, а также отметку времени в DOM в виде элемента списка

3. Отправить информацию в мой локальный файл db.json

Наконец, я хочу хранить информацию, извлеченную из API, в локальной базе данных — db.json.

Давайте откроем db.json с помощью нашего терминала с помощью следующей команды: «json-server — смотреть db.json». Я вижу следующее в своем терминале, который подтверждает, что он успешно открыт:

В моем файле db.json я создаю нужную мне структуру данных:

И, наконец, я добавляю метод POST в свой файл index.js:

Я тестирую готовый продукт, нажимаю «Отследить ISS» и вижу, как изображение ISS перемещается, а координаты и метка времени загружаются в DOM в виде элемента списка. Я также проверяю свой локальный хост: 3000 и вижу, что координаты были сохранены в базе данных, и все готово!

Мой полный код можно найти здесь на github. Удачного кодирования!

Использованная литература: