Создание приложения погоды в реальном времени с данными о местоположении с использованием API OpenWeatherMap

Геолокация как API имеет разные методы, которые можно использовать в веб-приложении. Но это также мощный API для мобильной разработки. Мобильные приложения Ride share, такие как Uber, картографические приложения, такие как Google Maps, и функции определения местоположения, реализованные в таких приложениях, как Instagram, зависят от использования этого API. React Native использует этот API и его доступные методы, расширяя веб-спецификацию геолокации.

API геолокации возвращает различные методы, такие как getCurrentPosition для получения текущего местоположения и watchPosition для подписки на обновления местоположения. Они доступны в React Native как полифилы.

Наряду с этим вы собираетесь реализовать функцию в реальном времени, чтобы запрашивать разрешения пользователя. Разрешения в react-native-cli могут быть немного сложными, но после прочтения этой статьи это должно быть намного проще.

Примечание. Согласно React Native 0.60.x docs:

В Android для этого используется android.location API. Этот API не рекомендуется Google, поскольку он менее точен и медленнее, чем рекомендуемый Google Location Services API. Чтобы использовать его с React Native, используйте модуль react-native-geolocation-service.

Что мы строим?

В этом руководстве мы начнем с использования основных методов из API геолокации, а затем создадим полное приложение в React Native с помощью react-native инструмента интерфейса командной строки.

Результатом выполнения этого руководства станет полноценное погодное приложение React Native, которое использует данные о погоде из стороннего API и представляет эти данные в простом пользовательском интерфейсе.

Содержание

Предпосылки

Чтобы следовать этому руководству, убедитесь, что в вашей локальной среде разработки установлено следующее и у вас есть доступ к перечисленным ниже службам:

  • Node.js (›= _ 7_) с установленным npm / yarn.
  • react-native Инструмент командной строки версии не ниже 2.0.1. Вы можете установить инструмент CLI с помощью следующей команды.

Обратите внимание, что в этом руководстве я буду использовать симулятор iOS для демонстрации приложения.

Начиная

Для начала нам нужно инициализировать новый проект React Native. Выполните команду ниже:

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

Вторая команда запустит процесс сборки для платформы iOS. Вы можете запустить react-native run-android, если хотите использовать эмулятор Android. Поскольку наше приложение сейчас является «минимальным» и не содержит большого количества исходного кода, за исключением файла App.js, вы увидите изображение ниже, когда приложение впервые запускается в симуляторе.

Если вы посмотрите на структуру проекта, то заметите, что для каждой платформы существуют отдельные папки сборки, такие как /android и /ios, для начальной загрузки приложения.

Доступ к API геолокации

API геолокации существует как глобальный объект, называемый объектом навигатора, в React Native, как и в Интернете. Он доступен через navigator.geolocation в нашем исходном коде, и нет необходимости импортировать его.

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

Мы изменим только файл App.js с помощью следующего кода:

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

Когда вы нажимаете на текст Find My Coords? (его можно коснуться, поскольку мы используем TouchableOpacity), он сначала запрашивает разрешение, как показано ниже.

Обратите внимание, что даже в режиме разработки и при запуске приложения в симуляторе разрешение запрашивается только один раз. Чтобы сделать это снова, вам нужно удалить приложение из симулятора и повторно запустить команду, чтобы запустить приложение Expo. Когда разрешение предоставлено, он получит результат, сохранит его в состоянии приложения и отобразит возвращенный объект:

Настройка разрешений для iOS и Android

В iOS геолокация включена по умолчанию, когда проект создается с использованием react-native-cli. Чтобы использовать его, нам просто нужно включить ключ в info.plist, который находится внутри каталога ios/geoWeatherApp.

Это поле уже есть, если вы проверите файл. Чтобы включить геолокацию в фоновом режиме, вам необходимо включить ключ NSLocationAlwaysUsageDescription в файл info.plist и добавить местоположение в качестве фонового режима на вкладке Capabilities через Xcode. Кроме того, если вы используете CocoaPods для React Native, обязательно включите RCTGeolocation sub-podspec.

Для Android нам нужно добавить следующую строку в наш android/app/src/AndroidManifest.xml файл.

Теперь, если вы запустите приложение в эмуляторе Android, вы увидите тот же экран приветствия, который был показан ранее в симуляторе iOS. Нажмите на текст Find My Coords?, и вам будет предложено спросить, разрешить ли приложению запрашивать местоположение пользователя или нет.

Если вы нажмете разрешить, вы увидите следующий результат.

Вы можете найти полный код этой части руководства в репозитории ниже.



amandeepmittal / findCoordsApp
⚛️ + 📱 Местоположение + разрешения в приложении, созданном с помощью RN-CLI - amandeepmittal / findCoordsApp github.com



Создание приложения "Погода": первые шаги

В этом разделе мы собираемся взять то, что мы узнали в предыдущем разделе, и создать полное погодное приложение, используя сторонний поставщик API погоды, такой как OpenWeatherMap API, и наши текущие знания API геолокации.

Во-первых, нам нужно собрать API-ключ из OpenWeatherMap. Войдите или создайте новую учетную запись, если у вас ее еще нет (это бесплатно, не беспокойтесь). Используя этот API, мы собираемся создать простое мобильное приложение, использующее геолокацию мобильного устройства. Координаты местоположения пользователя будут переданы в API OpenWeatherMap, который, в свою очередь, даст нам прогноз для этого местоположения.

После входа в систему перейдите на страницу https://home.openweathermap.org/api_keys, чтобы получить свой ключ API. OpenWeatherMap предоставляет ключ API по умолчанию, поэтому мы собираемся использовать его в нашем проекте.

Теперь откройте свой App.js файл и введите следующий фрагмент кода, чтобы убедиться, что все работает правильно:

И вы увидите, что визуализируется следующий результат.

Следующим шагом будет установка react-native-vector-icons. Если вы уже установили response-native-vector-icons, вы можете пропустить этот шаг. В противном случае введите следующую команду в окне терминала.

Последний шаг в этом процессе - связать нашу недавно установленную библиотеку.

Почему мы должны выполнять эту последнюю команду? Все сторонние библиотеки в React Native имеют некоторые собственные зависимости, которые используют возможности платформы для iOS и / или Android. Связывание этих собственных зависимостей с командой react-native link означает, что собственные зависимости библиотеки успешно связаны с вашим проектом iOS / Android.

Всякий раз, когда вы связываете библиотеку, вы всегда будете получать сообщение, информирующее вас о том, была ли библиотека успешно подключена или нет. Поскольку мы уже добавили разрешения для запроса и доступа к местоположению пользователя в этом проекте, мы можем пропустить это и перейти к следующему шагу. Если вы создаете этот проект с нуля, вы можете вернуться в раздел Настройка разрешений для iOS и Android и добавить необходимые разрешения.

Компонент загрузки

На этом этапе мы разработаем наш первый экран - экран загрузки. Внутри файла App.js начните с определения локального состояния:

В приведенном выше коде указано, что когда значение локального состояния для isLoading равно false, будет отображаться имя значения компонента <Text>, которое в данном случае является именем приложения. Это то, что мы собираемся визуализировать.

Позже, вместо того, чтобы отображать название приложения, мы будем показывать здесь информацию о погоде, как только наш API успешно получит данные. А пока давайте остановимся на этом сообщении, чтобы сначала поработать над вопросом: Что, если наше приложение находится в состоянии загрузки? Давайте добавим текст сообщения, чтобы указать, что приложение получает данные. Измените содержимое render():

Прямо сейчас, если вы измените значение isLoading на true, вы увидите экран, показанный ниже.

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

Экран погоды

Мы определим новый компонент погоды в ./components/Weather.js. Стандартный код для каждого экрана погодных условий будет одинаковым. Он будет разделен на два представления - заголовок и тело. В заголовке будет отображаться значок погодных условий и температура, а в теле - текст, связанный с погодными условиями.

В Weather.js мы начинаем с определения двух контейнеров внутри основного контейнера: headerContainer и bodyContainer. Обратите внимание, что мы определяем компонент Weather не как класс, а как функцию, чтобы получать реквизиты, и поскольку он не будет управлять состоянием.

Я собираюсь использовать MaterialCommunityIcons для отображения значков погоды в приложении.

Чтобы увидеть это в действии, изменим App.js. Импортируйте компонент Weather, а затем внесите соответствующие изменения в функцию render():

Получение данных

Чтобы получать данные о погоде в реальном времени, я обнаружил, что API OpenWeatherMap очень полезен и согласован. Для связи с API вам понадобится ключ API (как обсуждалось ранее). Чтобы сохранить ключ API в нашем приложении, создайте новый файл с именем ./utils/WeatherApiKey.js.

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

Мы начинаем с импорта ключа API, который мы только что определили, а затем обновляем наше состояние с помощью temperature, weatherCondition и error. Нам нужен метод жизненного цикла для повторного рендеринга компонента после получения данных из API. Для этой цели лучше всего подходит componentDidMount(). Добавьте приведенный ниже фрагмент перед функцией render() в App.js:

Мы также используем navigator API JavaScript для получения текущего местоположения. (Здесь API JavaScript будет взаимодействовать с собственным API с помощью моста.) Мы передаем значения широты и долготы нашей пользовательской функции fetchWeather, где вызывается API OpenWeatherMap.

Результат, который мы получаем, находится в формате JSON, и если вы запишете его в консоль, вы сможете увидеть результат в виде объекта JSON в терминале Expo, где много значений. Нам нужны только значения температуры и погодные условия. Затем мы обновляем наше локальное состояние с полученными новыми значениями. &units=metric в конце нашего вызова API преобразует температуру из Кельвина в Цельсия.

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

Затем обновите Weather.js, чтобы использовать реквизиты:

Результат будет следующим:

Добавление динамических погодных условий

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

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

Эти погодные условия предоставляются API OpenWeatherMap. Затем импортируем их в Weather.js:

Мы внесли некоторые дополнения, используя доступные реквизиты с погодными условиями для динамического изменения фона, значка, названия погоды и субтитров. Вы можете поэкспериментировать со стилем, чтобы он выглядел более минималистичным или изысканным - выбор за вами!

Заключение

Вы успешно использовали знания о данных геолокации и настройку разрешений в сценарии реального времени для создания приложения для прогноза погоды с использованием стороннего API и React Native.

Вы можете найти полный код этого руководства в репозитории Github ниже. 👇



amandeepmittal / geoWeatherApp
Приложение React Native Weather, демонстрация API геолокации. Участвуйте в разработке amandeepmittal / geoWeatherApp, создав… github.com



Если вы хотите глубоко погрузиться в мир React Native, ознакомьтесь с моими другими уроками по фреймворку здесь.

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

Независимая редакция, Heartbeat спонсируется и публикуется Comet, платформой MLOps, которая позволяет специалистам по обработке данных и группам машинного обучения отслеживать, сравнивать, объяснять и оптимизировать свои эксперименты. Мы платим участникам и не продаем рекламу.

Если вы хотите внести свой вклад, отправляйтесь на наш призыв к участникам. Вы также можете подписаться на наши еженедельные информационные бюллетени (Deep Learning Weekly и Comet Newsletter), присоединиться к нам в » «Slack и подписаться на Comet в Twitter и LinkedIn для получения ресурсов, событий и гораздо больше, что поможет вам быстрее и лучше строить лучшие модели машинного обучения.