С опцией поиска и функцией информации о погоде в реальном времени

Доброго времени суток, родные разработчики .. !!

Это будет быстро. Я сделал приложение Skyedge - Weather Forecasting App и опубликовал его в магазине Google Play. Как новичок, вы заставляете себя создавать простые проекты с классным пользовательским интерфейсом. Weather Application - одно из таких приложений для начинающих. Тебе следует это попробовать. Мы собираемся использовать API openweathermap.org, он имеет потрясающие функции и его легко реализовать. Также мы собираемся сделать это приложение на нативной платформе. Так что вы можете использовать это приложение как на IOS, так и на Android-устройствах.

Выпейте чашку кофе и приступим к работе.

Результат этого проекта

Код этого проекта на Github находится здесь.

Настройка приложения погоды

запустите свой проект с помощью команды: expo init Forecast

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

перейдите в папку «Прогноз» и установите несколько пакетов с помощью команды:

npm install @ react-navigation / native

npm install @react -navigation / material-bottom-tabs

npm install expo-location

npm install react-native-paper

npm установить react-native-vector-icons

На этом установка пакета завершена. В проекте мы сделаем 2 экрана. На нашем первом экране пользователи могут получить информацию о текущей погоде в их текущем местоположении. На другом экране пользователи могут искать информацию о погоде в разных городах мира.

Итак, создайте папку «Экраны» в том же каталоге. В эту папку мы поместим код обоих экранов, которые мы обсуждали выше. Мы собираемся использовать различные компоненты react-native, а также создадим несколько собственных компонентов. Итак, создайте еще одну папку «Компоненты», которая содержит различные компоненты этого проекта, которые мы собираемся использовать.

Components
|-- Header.js
|-- Search.js
`-- Weather.js

Screens
|-- CityWise.js
|-- Current.js

Добавьте эти файлы в каталог, как указано выше.

Создайте аккаунт на Openweathermap.org. Все очень просто. Активируйте свою учетную запись, подтвердив свой адрес электронной почты и скопировав ключ API. Мы собираемся использовать этот ключ API для получения данных о погоде.

Код погоды приложение

App.js

export default function App() {
  return (
    <NavigationContainer>
    <Tab.Navigator labeled={false} barStyle={{ backgroundColor: '#3399FF' }} activeColor="black" >
      <Tab.Screen name="Current" component={CurrentScreen}
      options={{
        tabBarIcon: ({ color, size }) => (
            <MaterialCommunityIcons name="home" color={color} size={26}/>
        ),
    }}/>
      <Tab.Screen name="CityWise" component={CityWiseScreen}
      options={{
        tabBarIcon: ({ color, size }) => (
            <MaterialCommunityIcons name="city" color={color} size={26}/>
        ),
    }}/>
    </Tab.Navigator>
    </NavigationContainer>
  );
}

Просто создайте два нижних экрана вкладок в App.js и поместите их в контейнер для навигации. Вы можете добавить значки сообщества материалов, это не имеет авторских прав. Приложение здорово смотрится с иконками.

Header.js

import React from 'react'
import { Appbar, Text} from 'react-native-paper';
function Header() {
const _handleMore = () => console.log('Shown more');
return (
    <Appbar.Header style={{backgroundColor:'#57abff', height:'5%'}}>
    
      <Appbar.Content title={<Text style={{fontSize:30, fontWeight:'bold'}}> Wayu </Text>} style={{width:'100%'}}/>
      
      <Appbar.Action icon="dots-vertical" onPress={_handleMore} />
    </Appbar.Header>
  );
}
export default Header

Сделайте простой заголовок и добавьте заголовок по вашему выбору. Заголовок я сделал на react-native-paper.

Search.js

Если вы хотите получить информацию о погоде в разных городах мира. Для этого вам нужно добавить опцию поиска, где вы вводите название города. Здесь я устанавливаю начальное cityName как пустое, и после того, как пользователь вводит данные, измененное состояние cityName устанавливается на setCityName. Это концепция хука реакции. Установите свойства поиска как fetchWeatherData. Код search.js находится здесь.

Weather.js

Когда вы смотрите API-документацию openweathermap.org, вы видите, что для разных компонентов установлены разные параметры. Как и из основного параметра, вы получите влажность, feel_like, temp и так далее.

Здесь мы используем 2 параметра: weatherData и fetchWeatherData (оба из cityWise.js). Под заголовком мы устанавливаем компонент поиска. После этого мы вызываем компонент, который хотим отобразить на нашем экране, из weatherData. По сути, это экран пользовательского интерфейса. Итак, расположите компоненты по своему выбору. Код моего пользовательского интерфейса Weather.js находится здесь.

Мы закончили с нашими компонентами. Теперь приступим к работе в нашей папке Screens.

CityWise.js

В этом файле сначала добавьте свой ключ API.

В функции fetchWeatherData мы установили параметр cityName. Изначально мы установили для состояния загрузки значение false. Потому что данные еще не загружены. Затем мы вызываем API и передаем параметр cityName и API_KEY. Мы знаем, что если запрос на выборку успешен, статус запроса-ответа показывает 200. Мы используем эту концепцию и извлекаем данные в ответе JSON. Теперь сохраните данные в s etWeatherData. Начальное состояние «weatherData» имеет значение null. Но после успешной выборки данных состояние меняется на setWeatherData, и мы устанавливаем состояние на setWeatherData. То же самое касается и другого крючка. Первоначально мы установили для setLoaded значение false, но после успешной выборки данных состояние изменилось на true. Это концепция хука реакции.

В хуке useEffect мы нажимаем fetchWeatherData и устанавливаем для параметра cityName значение «Madhubani» (город моего родного города).

if(!loaded) {
        return (
            <View style={styles.container}>
                <ActivityIndicator color='gray'  size={36} />
            </View>
)
    }

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

Затем просто получите данные о погоде. Код CityWise.js находится здесь.

Current.js

Это то же самое, что и cityWise.js. Но здесь мы получаем данные в зависимости от местоположения пользователя. Во-первых, мы запрашиваем у пользователя разрешение на доступ к местоположению. Если они его откажут, на экране появится предупреждающее сообщение: «Разрешение на доступ к местоположению было отказано». Если пользователь разрешает разрешение на определение местоположения, приложение expo получит местоположение с высокой точностью. Исходя из координат местности. Мы получаем данные о погоде, конвертируем их в JSON и сохраняем в массиве.

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

Остальное - это UI, и вы очень хорошо знаете UI. Код Current.js находится здесь.

Почему я использовал 2 разных ключа API

Согласно Openweathermap.org, лимит данных запроса составляет 60 в минуту. Итак, если бы я использовал один и тот же API в обоих местах, то пользователь может очень скоро выйти из строя. Чтобы решить эту проблему, вы можете приобрести или использовать 2 разных ключа API для 2 разных экранов.

Ага…

Здесь мы закончили с этим проектом. Откройте терминал или командную строку и выполните команду: npm start. Отсканируйте QR-код своим устройством и посмотрите, как работает погодное приложение.

Спасибо за чтение !!, и хлопайте, пока ваши руки не кровоточат