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

За всю историю на Марсе было шесть марсоходов:

  • Соджорнер
  • Дух
  • Любопытство
  • Упорство
  • Чжуронг
  • Возможность

Из этих марсоходов активны только последние три.

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

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

https://api.nasa.gov/

Одним из таких API является Mars Rover Photos, репозиторий изображений, собранных марсоходами Curiosity, Opportunity и Spirit. на протяжении всего пребывания на Марсе. Эти изображения отсортированы по дате в формате SOL (повороты Марса), земной дате и по различным камерам, которые есть у каждого из этих марсоходов.

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

Запросы в этих наборах изображений ограничены 25 изображениями, если какой-либо из этих наборов превысит этот предел, они будут разделены на разные страницы.

Прежде чем мы начнем делать запросы к этому API, давайте посмотрим, какие параметры и свойства мы можем из него получить:

Камеры вездехода:

  • FHAZ: Передняя камера для предотвращения опасностей
  • RHAZ: Задняя камера для предотвращения опасностей
  • МАЧТА: Мачта камеры
  • CHEMCAM: комплекс химии и камеры
  • MAHLI: тепловизор с ручным объективом Mars
  • МАРДИ: тепловизор спуска на Марс
  • NAVCAM: навигационная камера
  • PANCAM: Панорамная камера
  • MINITES: Миниатюрный термоэмиссионный спектрометр (Mini-TES)

Даты запроса по SOL:

  • sol | тип int | от 0 до максимального найдено
  • камера | строка | камера ровера
  • page | int | 25 элементов на странице
  • api_key | string | ключ api.nasa.gov

Даты запроса по земной дате:

  • дата_земли | ГГГГ-ММ-ДД | земная дата
  • камера | строка | камера ровера
  • page | int | 25 элементов на странице
  • api_key | string | ключ api.nasa.gov

Манифест миссии:

  • имя | название вездехода
  • landing_date | дата посадки марсохода на Марс
  • дата_запуска | дата запуска марсохода с Земли
  • статус | статус миссии марсохода
  • max_sol | максимальная доступная дата марсианского солнца
  • max_date| максимальная доступная дата Земли
  • всего_фото | количество фотографий, сделанных марсоходом
  • соль| Марсианский золь миссии
  • камеры | камеры марсохода доступны

Пример запроса:

Теперь, когда мы знаем все свойства, значения и доступные детали этого API, давайте попробуем сделать пример запроса, чтобы увидеть, что возвращает вызов:

https://api.nasa.gov/mars-photos/api/v1/rovers/curiosity/photos?sol=1000&api_key=DEMO_KEY

Как видите, у нас есть следующая конфигурация в запросе:

  • В поле rovers указываем марсоход «Curiosity».
  • В поле фотографии указываем дату в формате sol с «1000».
  • В поле api_key указываем наш API Key, в этом случае платформа позволяет делать серию запросов с DEMO_KEY, но не все.

Посмотрим, что возвращает вызов:

Каждая из фотографий, возвращаемых запросом, имеет свой уникальный идентификатор, дату в обоих форматах (сол и земля), камеру, которая ее сделала, со всеми ее свойствами, марсоход со всеми его свойствами и саму фотографию.

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

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

Реагировать + Аксиос

В этом проекте мы будем использовать библиотеку React и, как дополнение, библиотеку axios для выполнения асинхронных запросов. Эти запросы можно сделать нативно без проблем, но в этот раз я считаю это гораздо более оптимальным.

https://axios-http.com/docs/intro

npm install axios

Мы собираемся создать файл с именем API.js, в котором мы создадим шлюз для остальных запросов, которые мы собираемся сделать в нашем приложении, настроив все заголовки так, чтобы они могли выполняться. их с помощью axios, указав входной URL. В этом API, если мы проверим запросы, «изменяющиеся» маршруты начнутся в «ровере», поэтому оттуда мы сможем изменить, какой вызов сделать в соответствии с параметрами запроса:

В моем сценарии я решил использовать в качестве ссылки на дату формат sol, который, как я упоминал ранее, представляет собой солнечный день на Марсе, принимая за 1 первый день, когда марсоход приземлился на поверхность планеты.

Так как я не хочу иметь избыток запросов, и я не думаю, что пользователи приложения будут использовать весь диапазон дат, я собираюсь инициализировать стандартный запрос со 100. Моя цель - иметь возможность для выбора дат с шагом от 100 до 100 и до 3.200. Исходя из этого числа и после изучения API в течение нескольких часов, я обнаружил, что роверы перестают возвращать изображения, поэтому я решил, что это хороший предел: от 100 до 3.200.

Чтобы выбрать дату, я буду использовать компонент Sol.jsx, который будет устанавливать значение ввода типа range во внешней переменной состояния. Этот ввод будет иметь, как мы сказали, некоторые ограничения и несколько шагов, чтобы он вел себя так, как мы определили:

Этот компонент получает как функцию установки переменной состояния sol, так и саму переменную, чтобы иметь возможность рисовать ее в компоненте, отражая выбранное значение.

Давайте посмотрим, кто получает эту информацию, в данном случае это страница компонента с именем Rover.jsx, которая содержит всю функциональность и вызовы API, включая компонент, который мы создали ранее:

В начальной настройке этого компонента у нас есть разные части:

  • Переменная состояния с именем curiosityPhotos с функцией установки и начальным состоянием пустого массива. В функции, которая собирает данные API, мы установим в качестве значения массив photos внутри.
  • Переменная состояния с именем rover и ее функция установки с начальным состоянием null. Здесь мы выгрузим 3 разных имени ровера, чтобы сделать запрос к каждому из них.
  • Переменная состояния с именем sol и ее функция установки с начальным состоянием 100. Таким образом, первый запрос всегда будет на дату 100 сол.
  • Переменная состояния с именем camera и ее функция установки с начальным состоянием пустой строки, с помощью которой мы укажем, какую камеру показывать. Эта переменная состояния будет использоваться для фильтрации различных камер после сохранения данных.
  • Внутри вложенного вызова в функции getPhotos мы объединили буквенные строки с различными переменными, чтобы сделать вызов динамически в зависимости от ранее упомянутых различных состояний.
`/${rover}/photos?sol=${sol}&api_key=API_KEY`

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

Если мы изменим значение солнца между 100 и 3200, он выполнит запрос для этой даты. Я также сделал безопасным выполнение вызова, которое возможно только после того, как ровер перестанет быть нулевым.

Эффект, который будет иметь этот компонент, будет заключаться в том, чтобы сделать вызов, и благодаря массиву зависимостей хука useEffect он будет перезапущен всякий раз, когда солнце или ровер меняют состояние:

Чтобы отфильтровать различные камеры API, я использовал метод filter, который извлекает значение переменной состояния «камера»:

Поэтому единственное, что нам нужно сделать, чтобы нарисовать изображения, — это сопоставить эту новую константу с именем filteredPhotos, которая будет включать только совпадающие. В начале эта переменная состояния «камера» не указывает, какая именно, поэтому она будет рисовать их все, а через некоторые кнопки, содержащие имя камеры, мы будем варьировать ее значение:

Таким же образом, с помощью некоторых кнопок, например, мы можем изменить значение переменной состояния ровер и, таким образом, установить одно из трех возможных значений:

Все это будет состоять из компонентов и, как мы видели ранее, приведет к перезапуску запроса, если и когда ровер или sol изменит состояние.

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

Заключение:

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

Дайте мне знать, что вы думаете в комментариях!