Weather api android app

Создаём приложение “прогноз погоды” на Android

Многие популярные приложения прогноза погоды в Google Play либо содержат много рекламы, либо требуют слишком большого количества разрешений, либо содержат функционал, который большинство из нас никогда не используют. Было бы здорово, если бы мы могли создать собственное приложение погоды с нуля?

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

1. Подготовка

Прежде чем продолжить, дважды проверьте, что у вас установлены следующие компоненты:

• Eclipse ADT Bundle: вы можете скачать его на веб-сайте разработчика Android.
• Ключ APIOpenWeatherMap : это не обязательно для выполнения нашей задачи, но это бесплатно. Вы можете получить его, зарегистрировавшись на сайте OpenWeatherMap.
• Иконки: Я рекомендую вам скачать шрифт weather icons font, созданный Эриком Флорсом. Вам нужно загрузить файл TTF, потому что мы будем использовать его в нативном приложении. Мы будем использовать этот шрифт чтобы показывать различные значки в зависимости от погодных условий.

2. Создадим новый проект

Я собираюсь назвать это приложение SimpleWeather, но вы можете дать ему любое имя, которое вам понравится. Введите уникальное имя пакета, установите минимальный необходимый SDK на Android 2.2 и установите целевой SDK на Android 4.4. Вы можете оставить тему Holo Dark.

Это приложение будет иметь только одно Activity , и оно будет основано на шаблоне Blank Activity, как показано ниже.

Назовите Activity WeatherActivity. Мы будем использовать Fragment внутри этого Activity . Макет, связанный с Activity называется activity_weather.xml. Макет, связанный с Fragment называется fragment _weather.xml.

3. Добавим пользовательский шрифт

Скопируйте weathericons-regular-webfont.ttf в каталог assets/fonts вашего проекта и переименуйте его в weather.ttf.

4. Отредактируем файл манифеста

Единственное разрешение, которое требуется этому приложению — это android.permission.INTERNET .

Чтобы упростить этот урок, мы рассмотрим только портретный режим. Узел activity манифеста должен выглядеть так:

5. Отредактируем макет Activity

В activity_weather.xml изменений не так много. Он должен уже включать в себя FrameLayout . Добавьте дополнительное свойство, чтобы изменить цвет фона на #FF0099CC .

6. Отредактируем макет Fragment

Измените файл fragment_weather.xml, добавив пять тегов TextView , чтобы отобразить следующую информацию:

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

Используйте RelativeLayout для размещения текстовых представлений. Вы можете настроить textSize для различных устройств.

7. Изменим strings.xml

Этот файл содержит строки, используемые в нашем приложении, а также коды символов Юникода, которые мы будем использовать для отображения значков погоды. Приложение сможет отображать восемь различных типов погодных условий. Если вам нужно больше, примените следующую хитрость. Добавьте следующие значения в файл values/strings.xml:

8. Добавим пункт меню

Пользователь должен иметь возможность выбирать город, чью погоду они хотят видеть. Измените файл menu/weather.xml и добавьте элемент для этой опции.

Теперь, когда все XML-файлы готовы к использованию, давайте перейдем к запросу на API OpenWeatherMap для получения данных о погоде.

9. Получаем данные из OpenWeatherMap

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

Например, чтобы получить текущую информацию о погоде в Канберре, используя метрическую систему, мы отправляем запрос на http://api.openweathermap.org/data/2.5/weather?q=Canberra&units=metric

Ответ, который мы получаем через API, выглядит так:

Создайте новый класс Java и назовите его RemoteFetch.java. Этот класс отвечает за получение данных о погоде через API OpenWeatherMap.

Мы используем класс HttpURLConnection для выполнения удаленного запроса. API OpenWeatherMap ожидает ключ API в HTTP-заголовке с именем x-api-key . Это определено в нашем запросе с использованием метода setRequestProperty .

Мы используем BufferedReader для чтения ответа API в StringBuffer . Когда мы получим полный ответ, мы преобразуем его в объект JSONObject .

Как видно из приведенного выше ответа, данные JSON содержат поле с именем cod . Его значение равно 200 , если запрос был успешным. Мы используем это значение, чтобы проверить, имеет ли ответ JSON текущую информацию о погоде или нет.

Класс RemoteFetch.java должен выглядеть следующим образом:

10. Сохраним город в настройках

Пользователь не должен указывать имя города каждый раз, когда захочет использовать приложение. Приложение должно запомнить последний город, который искал пользователь. Мы делаем это, используя SharedPreferences . Однако вместо прямого доступа к этим настройкам из нашего класса Activity , для этого лучше создать отдельный класс.

Создайте новый класс Java и назовите его CityPreference.java. Чтобы сохранить и получить имя города, создайте два метода setCity и getCity . Объект SharedPreferences инициализируется в конструкторе. Класс CityPreference.java должен выглядеть следующим образом:

11. Создадим Fragment

Создайте новый класс Java и назовите его WeatherFragment.java. В этом фрагменте в качестве макета используется frag_weather.xml. Объявите пять объектов TextView и инициализируйте их в методе onCreateView . Объявите новый объект Typeface с именем weatherFont . Объект TypeFace указывает на веб-шрифт, который вы загрузили и сохранили в папке assets/fonts.

Мы будем использовать отдельный Thread для асинхронного получения данных через API OpenWeatherMap. Мы не можем обновить пользовательский интерфейс из подобного фонового потока. Поэтому нам нужен объект Handler , который мы инициализируем в конструкторе класса WeatherFragment .

Инициализируем объект weatherFont , вызывая createFromAsset в классе Typeface . Мы также вызываем метод updateWeatherData в onCreate .

В updateWeatherData , мы запускаем новый поток и вызываем getJSON в классе RemoteFetch . Если значение, возвращаемое getJSON , равно null , мы выводим сообщение об ошибке пользователю. Если это не так, мы вызываем метод renderWeather .

Только основной поток разрешает обновлять пользовательский интерфейс приложения для Android. Вызов Toast или renderWeather прямо из фонового потока приведет к ошибке выполнения. Вот почему мы вызываем эти методы с использованием метода post — обработчика .

Метод renderWeather использует данные JSON для обновления объектов TextView . Узел weather ответа JSON представляет собой массив данных. В этом уроке мы будем использовать только первый элемент массива метеорологических данных.

В конце метода renderWeather мы вызываем setWeatherIcon с идентификатором текущей погоды, а также временем восхода и захода солнца. Настройка значка погоды немного сложна, потому что API OpenWeatherMap поддерживает больше погодных условий, чем мы можем отобразить с помощью используемого веб-шрифта. К счастью, идентификаторы погоды следуют шаблону, о котором вы можете узнать больше на веб-сайте OpenWeatherMap.

Так мы будем сопоставлять идентификатор погоды с иконкой:

• коды погоды в диапазоне 200 обозначают грозу, что означает, что мы можем использовать R .string.weather_thunder для них
• коды погоды в диапазоне 300 связаны с моросями, и мы используем R.string.weather_drizzle
• коды погоды в диапазоне 500 означают дождь, и мы используем R.string.weather_rain
• и так далее .

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

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

Наконец, добавим метод changeCity к фрагменту, чтобы пользователь мог обновить текущий город. Метод changeCity будет вызываться только из основного класса Activity .

12. Редактируем Activity

В течении настройки проекта, Eclipse заполняет WeatherActivity.java некоторым шаблонным кодом. Замените стандартную реализацию метода onCreate на приведенную ниже, в которой мы используем WeatherFragment . Метод onCreate должен выглядеть следующим образом:

Затем отредактируйте метод onOptionsItemSelected и обработайте единственный параметр меню, который у нас есть. Все, что вам нужно сделать, это вызвать метод showInputDialog .

В методе showInputDialog мы используем AlertDialog.Builder для создания объекта Dialog , который предлагает пользователю ввести имя города. Эта информация передается методу changeCity , который хранит имя города с использованием класса CityPreference и вызывает метод changeCity во фрагменте .

Теперь ваше приложение для погоды готово. Соберите проект и установите его на Android-устройстве для тестирования.

Заключение

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

Источник

Weather Forecasting Android App using OpenWeatherMap API in Android Studio

In this tutorial, we will create a Weather Forecasting application in android using java. We can create an android project either using Android Studio or Eclipse IDE. For using Eclipse IDE we need to add ADT plugin, SDK manager, and Android Version. Therefore we can say that using Eclipse IDE is a lengthy process so instead of using Eclipse IDE most of the developers prefer using Android studio. We can use any version of Android Studio.

In this project, we are using Android Studio 3.6.3.

Create Weather Forecasting app in Android Studio

1. Open Android Studio and click on the file option on the upper left corner of the screen.
2. Click on the new option and select the wizard that you want and click on the next option.
3. Now enter the details that are the name of the project, name of the package, and android version.
4. Click on the finish option. (You will get two files MainActivity.java and activity_main.xml)
5. In the MainActivity.java write java code and in activity_main.xml file write code to design front-end of the app.

VIEW of the screen:

To design the front-end of the application we write code in activity_main.xml and for providing functionality to our application we write java code in MainActivity.java file. We can even create more classes in the same package.

In the above code com.example.weatherforecasting1313 is the name of our package. Further, we are importing all the required classes and interfaces. But we don’t need to worry about these classes as we can directly import these files by pressing “Alt+Enter” after writing the method from that class that we need to import. Further, we created the variables of String, EditText, and TextView. In the onCreate method of our class, we set the visibilities of several text views as per our requirement. View.VISIBLE means that the TextView is visible on the front view and View.GONE means that the TextView is not visible on the front end of our application.

Further, we created the doInBackground method in which we are passing the

String response = HttpRequest.excuteGet(“https://api.openweathermap.org/data/2.5/weatherq=”+CITY1+”&units=metric&appid=73cbebdd0322acd49bda6ede059b2b18”);

Here 73cbebdd0322acd49bda6ede059b2b18 is the key of the API used.

create your account

after creating account Log-In here to get the API https://home.openweathermap.org/users/sign_in

HttpRequest is the name of our class in the same package which we are using to fetch data.

JSONObject is the constructor used to convert external form JSON (Javascript Object Notation) text into an internal form which we can retrieve with getRequest and can convert values into JSON text using the toString method.

The SimpleDateFormat is used to set the format of the data which we want to display on the TextView to be viewed on front end of our application.

Again we are setting data to the TextViews and setting the visibility of the TextViews used.

HttpRequest.java

First of all, we created the parameterized method executeGet in which targetUrl is the URL we passed in our MainActivity class in response variable in which we passed our API key. Then we opened the link and set our RequestMethod as “GET” as we want to fetch data. Further, we are writing our code in the try-catch block so as to handle Exceptions. The finally block is always executed whether an exception occurs or not.

Buffered Reader is class that is used to read text from character input stream buffering characters so as to read characters efficiently.

The method getResponseCode is used to retrieve the response status from the server.

In finally block we are disconnecting the connection as finally block is always executed whether Exception occurs or not.

For designing the front end of our application we can use two methods.

1. We can directly drag and drop the required fields.
2. We can write the XML code for the required code.

If we will drag the required field our XML code will be generated automatically.

While designing the front end we just need to specify the layout and id of the field rest all are generally for the design purpose. In the textColor option “#000000” is the hashcode for the black color.

Setting the layout is also important as layout determines the view of our front-end.

We can add as many attributes as we want. But in this tutorial, I only added the basic and required attributes.

To add images as background we need to download the image and save it in the drawable folder.

OUTPUT

First of all, we will get the EditText with hint Enter City.

Then we will enter the name of the city and click the button Search Temperature.

After clicking the button we will get the screen showing the required data.

3 responses to “Weather Forecasting Android App using OpenWeatherMap API in Android Studio”

The app is crashing on clicking the button and api key had expired but i got a new one but kindly fix the error in the app or guide me how to make the app work

Hey, I also got that problem and i found the solution, so first you gotta insert this: , in the manifest file so it can access the internet, and second the URL might be wrong, i can’t post here because it’s considered spam but if you head to the openWeather site and get the right link, it will work.
Hope this helps.

Источник