Ствараем дадатак "прагноз надвор'я" на Android

Belarusian (беларуская мова) translation by Alex Grigorovich (you can also view the original English article)

Final product image — What You'll Be Creating

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

У гэтым уроку я пакажу вам, як гэта зрабіць. Наш дадатак будзе мець просты і мінімалістычны карыстацкі інтэрфейс, які паказвае карыстачу менавіта тое, што яму трэба ведаць аб бягучых умовах надвор'я. Давайце пачнем.

1. Падрыхтоўка

Перш чым працягваць, двойчы праверце, што ў вас ўстаноўлены наступныя кампаненты:

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

2. Створым новы праект

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

Гэта дадатак будзе мець толькі адно Activity, і яно будзе заснавана на шаблоне Blank 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.

<uses-permission android:name="android.permission.INTERNET"/>

Каб спрасціць гэты ўрок, мы разгледзім толькі партрэтны рэжым. Вузел актыўнасці маніфесту павінен выглядаць так:

<activity
    android:name="ah.hathi.simpleweather.WeatherActivity"
    android:label="@string/app_name"
    android:screenOrientation="portrait"
    >
    <intent-filter>
      <action android:name="android.intent.action.MAIN" />
      <category android:name="android.intent.category.LAUNCHER" />
    </intent-filter>
</activity>

5. Адрэдагуем макет Activity

У activity_weather.xml змен не так шмат. Ён павінен ужо ўключаць у сябе FrameLayout. Дадайце дадатковую ўласцівасць, каб змяніць колер фону на #FF0099CC.

<FrameLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    android:id="@+id/container"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    tools:context="ah.hathi.simpleweather.WeatherActivity"
    tools:ignore="MergeRootFrame"
    android:background="#FF0099CC" />

6. Адрэдагуем макет Fragment

Зменіце файл fragment_weather.xml, дадаўшы пяць тэгаў TextView, каб адлюстраваць наступную інфармацыю:

горад і краіна
бягучая тэмпература
значок, які паказвае бягучае ўмовы надвор'я
адзнака часу, якая ўказвае карыстальніку, калі было атрымана апошняе абнаўленне інфармацыя пра надвор'е
больш падрабязная інфармацыя аб бягучай надвор'і, напрыклад, апісанне і вільготнасць

Выкарыстоўвайце RelativeLayout для размяшчэння тэкставых уяўленняў. Вы можаце наладзіць textSize для розных прылад.

<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:paddingBottom="@dimen/activity_vertical_margin"
    android:paddingLeft="@dimen/activity_horizontal_margin"
    android:paddingRight="@dimen/activity_horizontal_margin"
    android:paddingTop="@dimen/activity_vertical_margin"
    tools:context="ah.hathi.simpleweather.WeatherActivity$PlaceholderFragment" >

    <TextView
        android:id="@+id/city_field"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_alignParentTop="true"
        android:layout_centerHorizontal="true"
        android:textAppearance="?android:attr/textAppearanceLarge" />

    <TextView
        android:id="@+id/updated_field"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_below="@+id/city_field"
        android:layout_centerHorizontal="true"
        android:textAppearance="?android:attr/textAppearanceMedium"
        android:textSize="13sp" />

    <TextView
        android:id="@+id/weather_icon"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"        
        android:layout_centerVertical="true"
        android:layout_centerHorizontal="true"
        android:textAppearance="?android:attr/textAppearanceLarge"
        android:textSize="70sp"
        />

    <TextView
        android:id="@+id/current_temperature_field"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_alignParentBottom="true"
        android:layout_centerHorizontal="true"
        android:textAppearance="?android:attr/textAppearanceLarge"
        android:textSize="40sp" />

    <TextView 
        android:id="@+id/details_field"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_below="@+id/weather_icon"
        android:layout_centerHorizontal="true"
        android:textAppearance="?android:attr/textAppearanceMedium"
        />        

</RelativeLayout>

7. Зменім strings.xml

Гэты файл утрымлівае радкі, якія выкарыстоўваюцца ў нашым дадатку, а таксама коды сімвалаў Юнікода, якія мы будзем выкарыстоўваць для адлюстравання значкоў надвор'я. Дазваляе прыкладанням адлюстроўваць восем розных тыпаў умоў надвор'я. Калі вам трэба больш, ўжыеце наступную хітрасць. Дадайце наступныя значэнні ў файл values/strings.xml:

<?xml version="1.0" encoding="utf-8"?>
<resources>

    <string name="app_name">Simple Weather</string>
    <string name="change_city">Change city</string>

    <!-- Put your own APP ID here -->
    <string name="open_weather_maps_app_id">11111</string>
    
    <string name="weather_sunny">&#xf00d;</string>
    <string name="weather_clear_night">&#xf02e;</string>
    
    <string name="weather_foggy">&#xf014;</string>
    <string name="weather_cloudy">&#xf013;</string>
    <string name="weather_rainy">&#xf019;</string>
    <string name="weather_snowy">&#xf01b;</string>
    <string name="weather_thunder">&#xf01e;</string>
    <string name="weather_drizzle">&#xf01c;</string>
    
    <string name="place_not_found">Sorry, no weather data found.</string>    
    
</resources>

8. Дадзим пункт меню

Карыстальнік павінен мець магчымасць выбіраць горад, чыю надвор'е яны хочуць бачыць. Змяніце файл menu/weather.xml і дадайце элемент для гэтай опцыі.

<menu xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    xmlns:tools="http://schemas.android.com/tools"
    tools:context="ah.hathi.simpleweather.WeatherActivity" >

    <item
        android:id="@+id/change_city"
        android:orderInCategory="1"
        android:title="@string/change_city"
        app:showAsAction="never"/>

</menu>

Цяпер, калі ўсе XML-файлы гатовыя да выкарыстання, давайце пяройдзем да запыту на API OpenWeatherMap для атрымання дадзеных аб надвор'і.

9. Атрымліваем дадзеныя з OpenWeatherMap

Мы можам атрымаць бягучыя дадзеныя аб надвор'і ў любым горадзе, у фармаце JSON, з дапамогай API OpenWeatherMap. У радку запыту мы перадаем імя горада і сістэму вымярэння, у якой павінны быць вынікі.

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

Адказ, які мы атрымліваем праз API, выглядае так:

{
    "base": "cmc stations", 
    "clouds": {
        "all": 90
    }, 
    "cod": 200, 
    "coord": {
        "lat": -35.28, 
        "lon": 149.13
    }, 
    "dt": 1404390600, 
    "id": 2172517, 
    "main": {
        "humidity": 100, 
        "pressure": 1023, 
        "temp": -1, 
        "temp_max": -1, 
        "temp_min": -1
    }, 
    "name": "Canberra", 
    "sys": {
        "country": "AU", 
        "message": 0.313, 
        "sunrise": 1404335563, 
        "sunset": 1404370965
    }, 
    "weather": [
        {
            "description": "overcast clouds", 
            "icon": "04n", 
            "id": 804, 
            "main": "Clouds"
        }
    ], 
    "wind": {
        "deg": 305.004, 
        "speed": 1.07
    }
}

Стварыце новы клас Java і назавіце яго RemoteFetch.java. Гэты клас адказвае за атрыманне дадзеных аб надвор'і праз API OpenWeatherMap.

Мы выкарыстоўваем клас HttpURLConnection для выканання аддаленага запыту. API OpenWeatherMap чакае ключ API ў HTTP-загалоўку з імем x-api-key. Гэта вызначана ў нашым запыце з выкарыстаннем метаду setRequestProperty.

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

Як відаць з прыведзенага вышэй адказу, дадзеныя JSON ўтрымліваюць поле з імем cod. Яго значэнне роўна 200, калі запыт быў паспяховым. Мы выкарыстоўваем гэта значэнне, каб праверыць, ці мае адказ JSON бягучую інфармацыю пра надвор'е ці не.

Клас RemoteFetch.java павінен выглядаць наступным чынам:

package ah.hathi.simpleweather;

import java.io.BufferedReader;
import java.io.InputStreamReader;
import java.net.HttpURLConnection;
import java.net.URL;

import org.json.JSONObject;

import android.content.Context;
import android.util.Log;

public class RemoteFetch {

    private static final String OPEN_WEATHER_MAP_API = 
  		"http://api.openweathermap.org/data/2.5/weather?q=%s&units=metric";
	
	public static JSONObject getJSON(Context context, String city){
		try {
			URL url = new URL(String.format(OPEN_WEATHER_MAP_API, city));			
			HttpURLConnection connection = 
					(HttpURLConnection)url.openConnection();
			
			connection.addRequestProperty("x-api-key", 
					context.getString(R.string.open_weather_maps_app_id));
			
			BufferedReader reader = new BufferedReader(
					new InputStreamReader(connection.getInputStream()));
			
			StringBuffer json = new StringBuffer(1024);
			String tmp="";
			while((tmp=reader.readLine())!=null)
				json.append(tmp).append("\n");
			reader.close();
			
			JSONObject data = new JSONObject(json.toString());
			
			// This value will be 404 if the request was not
			// successful
			if(data.getInt("cod") != 200){
				return null;
			}
			
			return data;
		}catch(Exception e){
			return null;
		}
	}	
}

10. Захаваем горад у настройках

Пользователь не павінен паказваць імя горада кожны раз, калі захоча выкарыстаць прыкладанне. Дадатак павінен запомніць апошні горад, які шукаў карыстальнік. Мы робім гэта, выкарыстоўваючы SharedPreferences. Аднак замест прамога доступу да гэтых налад з нашага класа Activity, для гэтага лепш стварыць асобны класс.

Стварыце новы клас Java і назавіце яго CityPreference.java. Каб захаваць і атрымаць імя горада, стварыце два метаду setCity і getCity. Аб'ект SharedPreferences ініцыялізуецца у канструктару. Клас CityPreference.java павінен выглядаць наступным чынам:

package ah.hathi.simpleweather;

import android.app.Activity;
import android.content.SharedPreferences;

public class CityPreference {
    
	SharedPreferences prefs;
	
	public CityPreference(Activity activity){
		prefs = activity.getPreferences(Activity.MODE_PRIVATE);
	}
	
    // If the user has not chosen a city yet, return
    // Sydney as the default city
	String getCity(){
		return prefs.getString("city", "Sydney, AU");        
	}
	
	void setCity(String city){
		prefs.edit().putString("city", city).commit();
	}
	
}

11. Створым Fragment

Стварыце новы клас Java і назавіце яго WeatherFragment.java. У гэтым фрагменце ў якасці макета выкарыстоўваецца fragment_weather.xml. Абвясьцеце пяць аб'ектаў TextView і ініцыялізуецца іх у метадзе onCreateView. Абвясьцеце новы аб'ект Typeface з імем weatherFont. Аб'ект TypeFace паказвае на вэб-шрыфт, які вы загрузілі і захавалі ў тэчцы assets/fonts.

Мы будзем выкарыстоўваць асобны паток для асінхроннага атрымання дадзеных праз API OpenWeatherMap. Мы не можам абнавіць карыстацкі інтэрфейс з падобнага фонавага патоку. Таму нам патрэбны аб'ект Handler, які мы ініцыялізуюем у канструктару класа WeatherFragment.

public class WeatherFragment extends Fragment {
    Typeface weatherFont;
	
	TextView cityField;
	TextView updatedField;
	TextView detailsField;
	TextView currentTemperatureField;
	TextView weatherIcon;
	
	Handler handler;

	public WeatherFragment(){	
		handler = new Handler();
	}

    @Override
    public View onCreateView(LayoutInflater inflater, ViewGroup container,
            Bundle savedInstanceState) {
        View rootView = inflater.inflate(R.layout.fragment_weather, container, false);
        cityField = (TextView)rootView.findViewById(R.id.city_field);
        updatedField = (TextView)rootView.findViewById(R.id.updated_field);
        detailsField = (TextView)rootView.findViewById(R.id.details_field);
        currentTemperatureField = (TextView)rootView.findViewById(R.id.current_temperature_field);
        weatherIcon = (TextView)rootView.findViewById(R.id.weather_icon);
        
        weatherIcon.setTypeface(weatherFont);
        return rootView; 
    }
}

Ініцыялізуюем аб'ект weatherFont, выклікаючы createFromAsset у класе Typeface. Мы таксама выклікаем метад updateWeatherData ў onCreate.

@Override
public void onCreate(Bundle savedInstanceState) {
    super.onCreate(savedInstanceState);  
	weatherFont = Typeface.createFromAsset(getActivity().getAssets(), "fonts/weather.ttf");    	
	updateWeatherData(new CityPreference(getActivity()).getCity());
}

У updateWeatherData, мы запускаем новы паток і выклікаем getJSON у класе RemoteFetch. Калі значэнне, якое вяртаецца getJSON, роўна null, мы выводзім паведамленне пра памылку карыстальніку. Калі гэта не так, мы выклікаем метад renderWeather.

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

private void updateWeatherData(final String city){
    new Thread(){
		public void run(){
			final JSONObject json = RemoteFetch.getJSON(getActivity(), city);
			if(json == null){
				handler.post(new Runnable(){
					public void run(){
						Toast.makeText(getActivity(), 
								getActivity().getString(R.string.place_not_found), 
								Toast.LENGTH_LONG).show(); 
					}
				});
			} else {
				handler.post(new Runnable(){
					public void run(){
						renderWeather(json);
					}
				});
			}    			
		}
	}.start();
}

Метад renderWeather выкарыстоўвае дадзеныя JSON для абнаўлення аб'ектаў TextView. Пагодны вузел адказу JSON ўяўляе сабой масіў дадзеных. У гэтым уроку мы будзем выкарыстоўваць толькі першы элемент масіва метэаралагічных дадзеных.

private void renderWeather(JSONObject json){
    try {
    	cityField.setText(json.getString("name").toUpperCase(Locale.US) + 
    			", " + 
    			json.getJSONObject("sys").getString("country"));
    	
    	JSONObject details = json.getJSONArray("weather").getJSONObject(0);
    	JSONObject main = json.getJSONObject("main");
    	detailsField.setText(
    			details.getString("description").toUpperCase(Locale.US) +
    			"\n" + "Humidity: " + main.getString("humidity") + "%" +
    			"\n" + "Pressure: " + main.getString("pressure") + " hPa");
    	
    	currentTemperatureField.setText(
    				String.format("%.2f", main.getDouble("temp"))+ " ℃");

    	DateFormat df = DateFormat.getDateTimeInstance();
    	String updatedOn = df.format(new Date(json.getLong("dt")*1000));
    	updatedField.setText("Last update: " + updatedOn);

    	setWeatherIcon(details.getInt("id"),
    			json.getJSONObject("sys").getLong("sunrise") * 1000,
    			json.getJSONObject("sys").getLong("sunset") * 1000);
    	
	}catch(Exception e){
		Log.e("SimpleWeather", "One or more fields not found in the JSON data");
	}
}

У канцы метаду renderWeather мы выклікаем setWeatherIcon з ідэнтыфікатарам бягучага надвор'я, а таксама часам усходу і заходу сонца. Настройка значка надвор'я трохі складаная, таму што API OpenWeatherMap падтрымлівае больш умоў надвор'я, чым мы можам адлюстраваць з дапамогай выкарыстоўванага вэб-шрыфта. На шчасце, ідэнтыфікатары надвор'я вынікаюць шаблону, пра які вы можаце даведацца больш на вэб-сайце OpenWeatherMap.

Так мы будзем супастаўляць ідэнтыфікатар надвор'я з абразком:

коды надвор'я ў дыяпазоне 200 пазначаюць навальніцу, што азначае, што мы можам выкарыстоўваць R .string.weather_thunder для іх
коды надвор'я ў дыяпазоне 300 звязаныя з морасю, і мы выкарыстоўваем R.string.weather_drizzle
коды надвор'я у дыяпазоне 500 азначаюць дождж, і мы выкарыстоўваем R.string.weather_rain
і гэтак далей ...

Мы выкарыстоўваем час усходу і заходу сонца, каб адлюстраваць сонца або месяц, у залежнасці ад бягучага часу сутак і толькі ў тым выпадку, калі надвор'е ясная.

private void setWeatherIcon(int actualId, long sunrise, long sunset){
    int id = actualId / 100;
	String icon = "";
	if(actualId == 800){
		long currentTime = new Date().getTime();
		if(currentTime>=sunrise && currentTime<sunset) {
			icon = getActivity().getString(R.string.weather_sunny);
		} else {
			icon = getActivity().getString(R.string.weather_clear_night);
		}
	} else {
    	switch(id) {
    	case 2 : icon = getActivity().getString(R.string.weather_thunder);
		 		 break;     	
    	case 3 : icon = getActivity().getString(R.string.weather_drizzle);
		 		 break;    	
    	case 7 : icon = getActivity().getString(R.string.weather_foggy);
    			 break;
    	case 8 : icon = getActivity().getString(R.string.weather_cloudy);
		 		 break;
    	case 6 : icon = getActivity().getString(R.string.weather_snowy);
		 		 break;
    	case 5 : icon = getActivity().getString(R.string.weather_rainy);
    			 break;
    	}
	}
	weatherIcon.setText(icon);
}

Вядома, вы можаце апрацоўваць больш умоў надвор'я, адпаведна змяняючы метад setWeatherIcon.

Нарэшце, дадамо метад changeCity да фрагмента, каб карыстальнік мог абнавіць бягучы горад. Метад changeCity будзе выклікацца толькі з асноўнага класа Activity.

public void changeCity(String city){
    updateWeatherData(city);
}

12. Рэдагуем Activity

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

@Override
protected void onCreate(Bundle savedInstanceState) {
    super.onCreate(savedInstanceState);
    setContentView(R.layout.activity_weather);

    if (savedInstanceState == null) {
        getSupportFragmentManager().beginTransaction()
                .add(R.id.container, new WeatherFragment())
                .commit();
    }
}

Затым адрэдагуйце метад onOptionsItemSelected і апрацуйце адзіны параметр меню, які ў нас ёсць. Усё, што вам трэба зрабіць, гэта выклікаць метад showInputDialog.

У метадзе showInputDialog мы выкарыстоўваем AlertDialog.Builder для стварэння аб'екта Dialog, які прапануе карыстачу ўвесці імя горада. Гэтая інфармацыя перадаецца метаду changeCity, які захоўвае імя горада з выкарыстаннем класа CityPreference і выклікае метад changeCity ў фрагменце.

@Override
public boolean onOptionsItemSelected(MenuItem item) {
    if(item.getItemId() == R.id.change_city){
		showInputDialog();
	}
	return false;
}

private void showInputDialog(){
	AlertDialog.Builder builder = new AlertDialog.Builder(this);
	builder.setTitle("Change city");
	final EditText input = new EditText(this);
	input.setInputType(InputType.TYPE_CLASS_TEXT);
	builder.setView(input);
	builder.setPositiveButton("Go", new DialogInterface.OnClickListener() {
		@Override
		public void onClick(DialogInterface dialog, int which) {
			changeCity(input.getText().toString());
		}
	});
	builder.show();
}

public void changeCity(String city){
	WeatherFragment wf = (WeatherFragment)getSupportFragmentManager()
							.findFragmentById(R.id.container);
	wf.changeCity(city);
	new CityPreference(this).setCity(city);
}

Цяпер ваш дадатак для надвор'я гатовы. Збярыце праект і устанвоите яго на Android-прыладзе для тэставання.

Заключение

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