Android Weather App

UI/Main Thread & Multi Threading

event looper handled.

  1. UI Thread, Main Thread: updates, click or scroll, infinient loop, read to-do tasks, put to message queue, task too many, UI lag. message queue: every event, small and short, UI 执行快。main thread - > message queue
  2. heavylifting Thread 1: disk io 文件读写 执行完了告诉message queue执行完了，执行过程不再queue里面
  3. Thread 2: network request, download 执行完了告诉message queue执行完了，执行过程不再queue里面

AsyncTask 起始和结束的时候，会有event post到message queue里面，onprogress也会post event。heavylifting report back to ui.

Room

app 很多时候都适合backend连的多，local database用处不是很大，client-heavy会用local database。

Room: object relation mapping, ORM solution. define newsresponse, 自己对应到table里面，objectsaved， 传上去了。

DAO: database object.

Other Android Components

ContentProvider(用得少了):

contact list, music library: music playback app, no need to store all music in app. could use market media ContentProvider to fetch all music of user in the phone.

BroadcastReceiver：

wallpaper app, charging, heavy operation, 3d wallpaper, render fast, download new dynamic pictures, listen BroadcastReceiver component. When user is charging, the system would send a broadcast, all apps can listen. charging event can let wallpaper app do heavy operation.

also, network change, wifi or network.

但被滥用。

Navigation Graph

vs deep link简单

Experience

安卓 clean v (ios ye), focus one

android: full-stack: restful api, http post, http get, scalability, network info

有react native, flutter, 但一开始native足矣。

mobile 算法 sim

mobile稀缺。

web engineer更稀缺，framework evolve快。

backend 多。

Resource

UI: material.io

CS 193p: ios

Android Weather App

Step 1: Create a basic android application

The application is a basic weather app which displays basic weather information depending on the users location.

Step 2: Create a welcome slider

You can create any custom welcome slider that you like. I have chosen Material Intro Slider for this project. In my custom welcome slider i just ask the users name and user the greet the user later on. In the second custom slider greet the user depending on the time of the day and similarly display an image or AM/PM accordingly.

img

img

Step 3: Create the basic Main Page UI

I have created a basic UI that look like cards and each card displays current location weather information.

Step 4: Create a Weather API key using Open Weather Map

You first need to Sign Up before you can generate an API key for your Weather API. After signing up navigate to the API section of the website and select the automatically generated weather API key. Save this API key as you will need this to call from you app.

Step 4: Call the weather API

I have used Retrofit for a type safe HTTP client call. For calling the weather API we need the base URL of the and the user’s coordinates are parameters.

Simple way to Consuming APIs with RetrofitThere are some basic things we do during in our applications development journey. One that is always related with…medium.com

Please do refer this blog if you want any more information about Retrofit. I have selected the current weather data > geographic coordinates as i need basic information. Eg:

1
api.openweathermap.org/data/2.5/weather?lat=35&lon=139

Now we need to get the users current location coordinates and then use our API key to call the API. We need to ask a run time permission for location for Android M and above. We can get the users coordinates by using GPSTracker

1
2
3
GPSTracker gpsTracker = new GPSTracker(this);

Call<WeatherPOJO> listCall = service.getWeather(gpsTracker.getLatitude(),gpsTracker.getLongitude(),"metric",passwordString);

We need to call the API by passing the required parameters like latitude, longitude, units and the API key.

1
2
3
4
5
@GET("2.5/weather")
Call<WeatherPOJO> getWeather(@Query("lat") double lat,
                                   @Query("lon") double lon,
                                   @Query("units") String units,
                                   @Query("appid") String appid);

The data which we get back from the API can be used to display in the UI and store in the local database (SQLite) for when the user is offline. We get the data back in the JSON format and we have to convert this to local plain old java objects (POJO) to access the data. Below is the JSON data that we get back.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
{
    "coord": {
        "lon": -8.53,
        "lat": 52.67
    },
    "weather": [
        {
            "id": 803,
            "main": "Clouds",
            "description": "broken clouds",
            "icon": "04d"
        }
    ],
    "base": "stations",
    "main": {
        "temp": 15,
        "pressure": 1022,
        "humidity": 72,
        "temp_min": 15,
        "temp_max": 15
    },
    "visibility": 10000,
    "wind": {
        "speed": 3.6,
        "deg": 360
    },
    "clouds": {
        "all": 75
    },
    "dt": 1528794000,
    "sys": {
        "type": 1,
        "id": 5240,
        "message": 0.0038,
        "country": "IE",
        "sunrise": 1528776610,
        "sunset": 1528837097
    },
    "id": 3305640,
    "name": "Castleconnell",
    "cod": 200
}

Step 5: Display the data in online and offline mode

You can use the above the JSON code and convert it into POJO classes using jsonschema2pojo.

First we have to get the data by the help of retrofit in-build methods and then save the data into our local SQLite database if its not present or we can directly extract the data to display in the UI.

1
2
3
4
5
6
7
8
9
10
11
@Override
public void onResponse(Response<WeatherPOJO> response, Retrofit retrofit) {

    if (response.isSuccess()) {
        WeatherPOJO weatherList = response.body();
     for (int z = 0; z < weatherList.getWeather().size(); z++) {
      if (mWeatherDatabase.TableNotEmpty()){
  mWeatherDatabase.updateValues("1",weatherList.getWeather().get(z).getMain(),                 weatherList.getWeather().get(z).getDescription(),weatherList.getName());} else {
         mWeatherDatabase.addDataInDB(weatherList.getWeather().get(z).getMain(),                 weatherList.getWeather().get(z).getDescription(),weatherList.getName());

}

Now we can create a table for storing the required data from the JSON API data.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
public static final class WeatherDatabaseTable {

    public static final String DB_NAME = "weather";
    public static final String TABLE_NAME = "weathertable";
    public static final int DB_VERSION = +1;
    public static final String DROP_QUERY = "DROP TABLE IF EXISTS " + TABLE_NAME;
    public static final String GET_PRODUCTS_QUERY = "SELECT * FROM " + TABLE_NAME;

    public static final String KEY_ID = "keyid";
    public static final String MAIN = "main";
    public static final String DESCRIPTION = "description";
    public static final String ICON = "icon";
    public static final String TEMP = "temp";
    public static final String HUMIDITY = "humidity";
    public static final String TEMP_MIN = "temp_min";
    public static final String TEMP_MAX = "temp_max";
    public static final String SPEED = "speed";
    public static final String COUNTRY = "country";
    public static final String SUNRISE = "sunrise";
    public static final String SUNSET = "sunset";
    public static final String NAME = "name";

    public static final String CREATE_TABLE_QUERY = "CREATE TABLE " + TABLE_NAME + "("
            + KEY_ID + " INTEGER PRIMARY KEY,"
            + MAIN + " TEXT,"
            + DESCRIPTION + " TEXT,"
            + ICON + " TEXT,"
            + TEMP + " TEXT,"
            + HUMIDITY + " TEXT,"
            + TEMP_MIN + " TEXT,"
            + TEMP_MAX + " TEXT,"
            + SPEED + " TEXT,"
            + COUNTRY + " TEXT,"
            + SUNRISE + " TEXT,"
            + SUNSET + " TEXT,"
            + NAME + " TEXT" + ")";

}

Now we have data to display in the UI when the user is Online or Offline. We just use the data and display it on the UI by attaching the data to the corresponding TextView.

1
description.setText(String.valueOf(weatherList.getWeather().get(z).getDescription()));

Please do refer this document to store your API key securely in the app.

I have also added a help section which is a Showcase view.

Refer the entire source code for this project or Download from the Google Play and please do change with your local API key.

Reference

https://medium.com/@sasude9/basic-android-weather-app-6a7c0855caf4

赏

Thank you for your candy!😃

扫一扫，分享到微信

微信分享二维码