— Неделя 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
[Обратите внимание: это очень короткий пост для моего обучения. Я не вдавался в подробности каждого фрагмента кода и необходимых методов. Если что-то непонятно, обращайтесь]
Первоначальная настройка
- Создайте каталоги и файлы, которые мне понадобятся, с помощью Терминала:
$ 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» я хочу сделать несколько вещей:
- Изменяет местоположение изображения МКС на карте
Во-первых, я проверяю объект, который я получаю из выборки, чтобы знать, как извлечь значения долготы, широты и метки времени.
Затем мне нужно выполнить некоторые арифметические действия, чтобы откалибровать изображение карты мира в соответствии с координатами долготы и широты, которые я получаю от 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. Удачного кодирования!
Использованная литература:
- API с открытым уведомлением: http://open-notify.org/Open-Notify-API/ISS-Location-Now/
- MDN с использованием Fetch: https://developer.mozilla.org/en-US/docs/Web/API/Fetch_API/Using_Fetch