Выше первое приложение React Native с Expo

Если вы похожи на меня, новичка в разработке мобильных приложений, но у вас есть опыт разработки с React, Expo — это отличный инструмент, который поможет вам создать свое первое мобильное приложение!
Expo — это набор инструментов, с помощью которого вы можете написать приложение React Native за считанные минуты. Он включает в себя готовые инструменты, такие как конфигурации Android Studio / XCode, управление сертификатами в Apple & Google и push-уведомления, и это лишь некоторые из них. Кроме того, команда в Экспо невероятно отзывчива и может быть легко достигнута через их форумы или канал Slack. У них даже есть Canny для запросов функций от сообщества.

Если вы не решаетесь установить какие-либо инструменты и зависимости, вы можете попробовать React Native непосредственно в своем веб-браузере с Snack.
В этой статье я расскажу о настройке вашей среды, установке зависимостей и написании кода для создания вашего первого мобильного приложения! К концу вы создадите приложение, которое собирает данные о геолокации мобильного телефона пользователя, передает эти данные о долготе и широте в API Open Weather и отображает информацию о погоде в одном компоненте React Native. Звучит довольно легко, верно? Ну что ж, начнем!

Установка

Сначала давайте возьмем ваш личный ключ API из Open Weather по адресу https://openweathermap.org/api. Хочу отметить, что для активации API-ключа Open Weather API требуется не менее 10 минут, поэтому я предлагаю начать с этого шага.
Далее нам нужно будет установить последнюю версию NodeJS. Вы можете скачать это здесь.
Также потребуется инструмент командной строки Expo. Вы будете запускать этот инструмент локально для упаковки, обслуживания и публикации своих проектов. Кроме того, кто не любит использовать командную строку? Идите вперед и откройте свой терминал, используя следующую команду:

npm install expo-cli — global

Отлично, теперь, когда вы установили инструмент CLI в Expo, давайте инициализируем новый проект в терминале, перейдем в соответствующую папку и, наконец, запустим Expo.

expo init my-new-project

Это предложит вам выбрать тип рабочего процесса, который вы предпочитаете в своем терминале. Для этого конкретного проекта я использовал управляемый рабочий процесс с пустым холстом. Затем вам нужно будет выбрать имя (название вашего приложения в том виде, в каком оно отображается как в Expo, так и на домашнем экране в виде отдельного приложения) и slug (понятное имя URL для публикации).

После того, как этот выбор будет сделан, давайте перейдем в нашу новую папку проекта и запустим Expo.

cd my-new-project
npm start

Это автоматически откроет devtools в вашем браузере и запустит Metro Bundler в Экспо на локальном порту. Если все работает правильно, вы должны увидеть что-то похожее на это. Давайте продолжим и нажмем Run на вашем любимом симуляторе.

Ваш терминал будет перебирать журналы для вашего проекта по мере продвижения по процессу кодирования.

Наконец, давайте откроем еще одну вкладку в вашем терминале и введите команду, чтобы открыть ваш любимый редактор исходного кода. Я неравнодушен к VS Code, поэтому я использую code.

Давайте писать код!

В симуляторе вы увидите экран приветствия, в котором вас попросят открыть App.js, чтобы начать работу над вашим приложением. Разве не утешительно видеть сходство с простым старым React? Я лично очень утешен этим …

Определение состояния загрузки:

Первое, на чем мы сконцентрируемся, — это создание состояния, которое в конечном итоге будет служить экраном загрузки при получении прогноза погоды. Идем дальше и реализуем состояние isLoading, подобное приведенному ниже.

Затем мы создадим новую папку с именем component и файл в ней с именем weather.js. Код для погодных условий будет разделен на два представления: заголовок и тело. В заголовке будут отображаться значок погодных условий и температура, а в теле будет отображаться текст, связанный с погодными условиями.

Weather.js будет функциональным компонентом. Начнем с определения двух контейнеров внутри основного контейнера: headerContainer и bodyContainer. Я usedMaterialCommunityIcons, который поставляется вместе с Expo в качестве суб-библиотеки мегабиблиотеки под названием vector-icons.

Давайте получим некоторые данные

К настоящему времени вы получили свой ключ API от OpenWeather. Давайте посмотрим на тип информации, которую мы получаем от нашего API. Мое любимое бесплатное приложение для проверки вызовов API — это Postman. Я не буду показывать вам, как использовать его в этой статье, но если вы уже знакомы с Postman, предоставьте широту, долготу, свой уникальный ключ API и единицу измерения, в которую вы хотели бы получить свои данные обратно. ,

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

Я не буду вдаваться в подробности, чтобы показать вам, как скрыть ключ API, а также нижеприведенную «лучшую практику», когда речь идет о защите вашего уникального ключа API. Я использовал функцию Constant.manifest в Expo, чтобы отделить мой ключ от файла App.js. Вы можете узнать больше о здесь.

Начнем с импорта ключа API в App.js.

import Constants from 'expo'const KEY = Expo.Constants.manifest.extra.mysecret

Создайте функцию fetchWeather, которая предоставляет координаты долготы и широты из местоположения нашего устройства и извлекает данные с сервера, возвращающего объект JSON.

fetchWeather(lat, lon) {  fetch(`http://api.openweathermap.org/data/2.5/weather?  
   lat=${lat}&lon=${lon}&APPID=${KEY}&units=imperial`)
  .then(res => res.json())
  .then(data => {
    this.setState({
      temperature: data.main.temp,
      weatherCondition: data.weather[0].main,
      isLoading: false
     });
   });
  }

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

componentDidMount() {
  navigator.geolocation.getCurrentPosition(
    position => { 
      this.fetchWeather(position.coords.latitude,  
        position.coords.longitude);
      },
      error => {
        this.setState({
          error: 'Error Retrieving Weather Conditions'
        });
       }
     );
    }

Ответ JSON содержит много данных, которые мы можем использовать, но давайте просто сосредоточимся на двух вещах: температуре и погодном условии, которые мы будем хранить в нашем локальном состоянии, определенном в App.js.

state = {
  isLoading: true,
  temperature: 0,
  weatherCondition: null,
  error: null
}

Теперь мы передадим два значения нашего местного состояния в качестве реквизита для компонента Погода.

<Weather weather={weatherCondition} temperature={temperature} />

На данный момент App.js должен выглядеть следующим образом:

Теперь обновите props в Weather.js

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

Динамическое поведение

Используя weatherCondition, мы можем определить изменения в нашем фоне, заголовке, подзаголовке и значке погоды. Давайте начнем с предварительного определения погодных условий в новой папке и файле ./utils/WeatherConditions.js.

Эти погодные условия предоставляются из API Open Weather. Наконец, мы импортируем этот файл в наш Weather.js и определим PropTypes для двух реквизитов, которые мы получаем из App.js.

Отличная работа, ты сделал это!

Теперь, когда у нас есть шаблон, не стесняйтесь поиграть со стилем, чтобы он выглядел более минималистичным или веселым, это ваше дело!
Я добавил немного больше информации от API, и все это приложение можно найти на Github Repo.