Expo React Native + API НАСА

Унести с собой зеленую прометеевую искру жизни в бесплодную пустоту и зажечь там огненную бурю живой материи - это сама судьба нашей расы.

Бледно-голубая точка • Карл Саган

Изучая что-то новое, я применяю технику Фейнмана:

(1) Выберите концепцию
(2) Научите этому малыша
(3) Выявите пробелы и вернитесь к исходному материалу
(4) Просмотрите и упростите (необязательно)

Ричард Фейнман понял, что, обучая, он укрепляет свои знания. Тщательное изучение предмета, достаточное для того, чтобы объяснить его кому-то еще, поможет выявить и закрыть пробелы в невежестве. Я надеюсь заполнить эти пробелы вместе со всеми, у кого есть аппетит к изучению интересных вещей.

Давайте перейдем к этому.

Пряжа

Yarn - это менеджер пакетов JavaScript, очень похожий на npm. Он был создан Facebook и может устанавливать пакеты из реестра npm. Это означает, что почти все, что вы можете делать с npm, вы можете делать с yarn - только быстрее.

Чтобы установить Yarn на Mac, я бы посоветовал сначала загрузить Homebrew. Чтобы установить Homebrew, просто скопируйте и вставьте приведенный ниже код в свой терминал:

/usr/bin/ruby -e "$(curl -fsSL https://raw.githubusercontent.com/Homebrew/install/master/install)" 

Теперь, когда у вас установлен Homebrew, введите в терминал чрезвычайно подробный код ниже, чтобы установить yarn:

brew install yarn

Для пользователей Windows просто нажмите синюю кнопку« Загрузить установщик здесь».

Экспо

Теперь, когда yarn установлена, давайте запустим на нашем телефоне приложение React Native с Expo. Это очень просто и состоит всего из четырех команд. Откройте окно терминала за пределами выбранного вами редактора, чтобы он мог работать в фоновом режиме. (Так Expo и ваш компьютер будут обмениваться диалогами.) cd в тот каталог, в котором вы хотите разместить свой проект, но не создавайте новую папку проекта; мы сделаем это через командную строку. Введите эти четыре команды в свой терминал:

(1)yarn global add create-react-native-app

Следующая команда создаст новый проект и присвоит ему имя; назовем это HelloExpo:

(2) create-react-native-app HelloExpo

(3) cd HelloExpo

(4) yarn start

yarn start предоставит вам QR-код в вашем терминале. Загрузите приложение Expo на свой телефон и отсканируйте QR-код. После сканирования кода загрузка может занять некоторое время. Терпение, молодой падаван.

После завершения загрузки у вас должен появиться такой экран:

БУМ! Теперь у вас есть приложение React Native, работающее на вашем мобильном устройстве!

Давайте играть!

Отправляйтесь к выбранному вами редактору и cd в свой проект. В приложении Expo вы заметите, что вы можете включить или отключить прямую перезагрузку. При включенной живой перезагрузке каждый раз, когда вы сохраняете свой проект, Expo обновит ваше приложение.

Если вам нужно сделать перерыв или выключить компьютер, просто отключите терминал и в следующий раз, когда будете готовы возобновить работу, cd в свой проект и введите yarn start в терминале еще раз.

React Native

Откройте App.js - он должен выглядеть так:

Здесь у нас есть компонент приложения, отображающий небольшой текст и некоторые стили flexbox, заключенные в компонент React Native View. Если вы не знакомы с React Native и подбиваете себя до смерти в отчаянной попытке понять, что, черт возьми, такое View, по сути, это просто HTML-блок. Тем не менее, я бы посоветовал взглянуть на документацию, чтобы понять некоторые отличия и интересные особенности Views. Текст очень простой.

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

Если вы нажмете NASA API Listings в левой части веб-страницы, вы увидите список доступных данных. Мы собираемся использовать API Astronomy Picture of the Day (APOD).

В каталоге вашего проекта создайте новую папку с именем utilities. Внутри утилит создайте новый файл с именем api.js. Внутри мы напишем следующий код:

Здесь мы создаем объект, и внутри него мы сохраняем вызов функции, которая будет извлекать наш API конечной точки, а затем анализировать наши данные в JSON. Взгляните на переменную URL: ‘https://api.nasa.gov/planetary/apod?api_key=nnnnnnnnnn. N здесь следует заменить на ваш ключ API.

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

Если в вашем браузере не установлено расширение JSON, ваши данные будут выглядеть иначе, но не беспокойтесь - это всего лишь эстетика. Идите вперед и нажмите URL-адрес изображения, чтобы увидеть, что мы увидим в нашем приложении.

Теперь, когда мы понимаем, как структурированы их данные, мы можем указать, какие части мы хотим извлечь. Например, если нам нужна дата, мы просто запрашиваем дату ответа. Если нам нужен URL-адрес изображения, мы просто вежливо запрашиваем response.url и т. Д. Теперь давайте посмотрим, как это выглядит в коде.

Вернувшись в App.js, нам нужно импортировать api.js. Нам также необходимо импортировать компоненты <Image/> и <WebView/> из react-native. Ваш скорректированный код должен быть следующим:

Теперь нам нужно установить начальное состояние. Сразу под компонентом приложения добавьте код, показанный ниже. Это просто состояние нашего приложения до того, как мы получим наши потрясающие данные, любезно предоставленные НАСА.

Говоря об этих потрясающих данных, давайте их возьмем. Под функцией конструктора добавьте приведенный ниже код, в котором говорится: «Привет, реагируй, как только мой компонент будет смонтирован, благодаря нашей функции nasaPics() в api.js, извлеките эти данные, проанализируйте их и, пока нет ошибок, настройте мои пустое состояние должно быть состоянием, наполненным только самым великолепным астрономическим нектаром ».

Параметр res действует как опора в этом обещании. Вместо props.date я просто использую res(response).date, explanation, title и т. Д. В этом приложении, если вы замените res на реквизит, он сделает то же самое.

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

Здесь мы вставляем данные JSON через компонент Text. Мы также реализуем условный оператор, который гласит: «Если выбранный медиафайл является видео, используйте наш компонент WebView, иначе используйте компонент Image, который мы импортировали ранее, стилизуйте его и заключите в представление».

Теперь, чтобы стилизовать наше приложение:

Теперь, когда вы сохраните свой код, ваше приложение в Expo должно выглядеть примерно так:

Ваш файл App.js должен выглядеть примерно так:

Если вы предпочитаете хранить код в одном компоненте, удалите api.js и настройте App.js так, чтобы он выглядел так:

Потрясающие! Мы сделали это! В следующий раз, возможно, мы сможем рассмотреть, как извлечь несколько элементов API и реализовать их через ScrollView или FlatList. Это компоненты React Native, похожие на Text, Image и View. Разница в том, что они позволяют нам просматривать наши данные.

Я постарался сделать это кратким и надеюсь, что вам было так же весело, как и мне! До свидания!

Понравилось это прохождение? Следите за нашим гостевым блоггером Марлоном ДеКоста в Medium и Twitter.