懒人笔记
首发于懒人笔记
怎样用一天时间,开发发布一个天气App

怎样用一天时间,开发发布一个天气App

万恶起源于,

一张在群聊中炫耀十一月份,还在开冷气的深圳气温截图...

万恶之源(注:ifisher为坤哥)

坤哥提出,想要一个 只想知道昨日和今日气温的应用,每天早上起来,想知道该穿什么衣服,该比昨天多穿一件,还是少穿一件. 虽然现有的App也有带这种功能,但是太复杂了.我只想要点开App 看一眼就知道今天和昨天的温度对比.


找了一圈,发现免费的天气API只提供实况和未来几天的预报,想要获取历史天气的话,得付费.这个时候坤哥想到一个Idea, 每天查询天气之后,把数据缓存起来,明天再来看就有昨天的了.

棒棒! 那就叫他「昨日天气」吧!


好!说干就干!

.......................

对于我这种重度拖延症患者来说,是不可能的.

所以,

一周之后,

.......................

好!说干就干!


1. 新建工程

首先...首先你得要有一个工程.

假设你的电脑已经有运行React-Native的环境&你有开发React的基础知识.

关于环境的配置 React-Native中文网有非常非常详细的介绍:搭建开发环境 - React Native 中文网.

输入命令:

react-native init weather

进入init好的工程,就可以开始写代码了.


2.获取定位

React-Native提供Geolocation API,通过getCurrentPosition()方法,可以很快的获取设备的经纬度.

注意,如果要在安卓设备上获取定位,需要在AndroidManifest.xml 文件中添加以下代码以获取定位权限:

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

获取定位的代码:

navigator.geolocation.getCurrentPosition(
 	(position) =>{
 		console.log(position);
 		/*your code here*/
 	},
 	(error) => console.log(error.message),
 	{timeout: 20000, maximumAge: 1000}
 );


3.查询天气信息

天气接口使用的是和风天气3-10天天气预报 | 和风天气免费版.

和风天气支持用经纬度直接获取定位所在地的天气信息,于是用刚刚获取的经纬度来查询天气信息,使用axios/axios发送请求:

axios.get('https://free-api.heweather.com/s6/weather/forecast', {
    params: {
        location: location,
        key: /*开发者key*/
    }
}).then((response) => {
 console.log(response)
 /*your code here*/
}).catch(error => {
    console.log(error)
})


4.本地持久化存储

前面提到,我们需要将前一天的天气信息缓存起来,React-Native提供的AsyncStorage.

AsyncStorage is a simple, unencrypted, asynchronous, persistent, key-value storage system that is global to the app. It should be used instead of LocalStorage.

这正是我们需要的!


做本地存储的时候纠结了一阵,想了几个方案,最终确定下来的方案是:

  • 每次请求天气数据的时候生成一个日期精度为'day'的时间戳,作为存储的Key,请求得到的天气数据作为存储的Value.
  • 读取昨日数据的时候,以昨日的时间戳作为Key去获取storage中昨日对应的天气数据.
  • 清除storage中昨日之前的存储数据.

为了方便处理日期的加减和生成时间戳,我用到了一个日期处理库:Moment.js Moment.js 中文网


5.界面设计

想要有图标,谷歌了一下"weather Icon", 找到一套免费的Monochrome Weather Icon Pack.(不用和风自带的Icon,原因是,我想要白色的Icon,但他们的是深蓝色的.)

上d站参考了一下配色,还想要做成卡片圆圆的感觉;

最后确定界面如下:

6.打包APK

Android要求所有应用都有一个数字签名才会被允许安装在用户手机上.

所以打包的第一步,是需要生成一个签名developer.android.com/s.

然后还要记得改图标和应用的名字:

分别在 "./android/app/src/res/"和"./android/app/src/AndroidManifest.xml"下修改.

最后在终端运行:

cd android && ./gradlew assembleRelease

APK安装包就制作完成啦~


7.应用托管

因为暂时没有上架市场的打算,但是App得找个地方放, 还是用蒲公英最合适.

应用下载链接:蒲公英; 密码是:123456

也可扫码下载


后续:

如果说这个功能,App的优势在哪里,大概就是可以做Widget了吧,只要在手机上随时下拉就能看到信息了.

噢,对了 还有推送...不过我本人比较讨厌推送这玩意.

所以要迭代的话,下个功能 应该是做Widget吧!


2017-12-05 更新:

加入明天天气之后,增加了本地缓存,

在已经有数据的情况下,使用已有数据显示.

现在应用界面如下:



另外,还有「昨日天气」App的姊妹篇:

怎样用一天时间,开发上架一个天气小程序
编辑于 2018-03-14

文章被以下专栏收录