稀有猿诉

十年磨一剑,历炼出锋芒,说话千百句,不如码二行。

Weather App With Jetpack Compose

现在满屏的Compose,近期也看了一些教程,似懂非懂,总感觉还缺点什么,于是有必要使用这些新技术来构造一个真实的Android App,以加深理解。第一个实例就是想做一个天气查询和展示的应用,使用Jetpack Compose以及Google推荐的MAD(Modern Android Development)

核心目的

学习使用Jetpack Compose构建UI,和学习新的架构方式(MVVM)。其实我们不是只读式的学习,更重要的是要在一个真实的项目中去实践这些知识。

Follow官方的教程和建议,先由最简单的版本,一步步的使用这些轮子打造我们的天气应用。

特别注意:此行不是为了做一个天气App,而是以MAD的方式来构建App,每一步都要符合设计规范架构原则,不留破窗。

技术栈

使用MAD,Jpetpack和Compose,以及Material Design

Weather API

使用 和风API

第一个版本

本着MVP的原则,第一个版本尽量简单,实现核心需求即可,第一个版本的目标:查询预定列表中的城市天气,并展示其详细天气信息。

流程图:

flowchart TD A([Start]) --> C{Has preferred city?} C --> |No| E([Show City list]) E --> F([Pick a city]) F --> J([Save as prefered]) J --> D C --> |Yes| D([Show detail page]) D --> G{data need refresh?} G --> |Yes| H([Get weather data]) H --> D G --> |No| I([End])

第一步:构建UI

第一版本中的第一步,不用网络,全用fake data,把需要的两个页面构建出来,目的在于搭建基础设施,并把流程跑通。

第二步:接入Weather API

获取真实的天气数据,并完善天气详情页面。

Reference

Comments