从零做起的实时公交App

May 22, 2018

如果要做一个实时公交app,我们首先想到的是…从哪获取这个数据呢?

准备

  • 用来看抓到的包的工具:Charles
  • 抓到的包在这里:把它下载下来

初识Charles

打开SB BUS TRACKER.chls,应该是这样的界面

charles_example

在这么多行相似的GET请求中,最大的区别就是Path。这一栏显示了每个请求的不同地址,也就代表了不同的API。点一个请求,下面就会显示它的详情。

在详情页的上半部分,是这个请求的*请求*部分。依照GET的格式,在path的问号后面的部分,是这个请求传出去的Parameters,用&隔开。

在详情页的下半部分,是这个请求发出去后*接收*到的数据,我们可以先看Raw格式,里面告诉泥了这个数据是一个XML,你可以把它理解成JSON或者…一个字典。那这时候我们点XML就可以用可视化界面看看这些数据。

API概览

那么每个接口是干嘛用的呢

要注意的是

这篇readme的目的只是初步介绍这个API和Charles的功能和用法,具体的理解还需要自己明白了大概后 动手仔细分析。所以,在读下面之前,先打开着那个.chls放在旁边,可以对应着看和想每个请求

getRoutePoints

看名字好像是获取路线中包含的点

发出了什么

看请求部分,有两个参数被传出去了。

一个是route(顾名思义 应该是我们要查询的路线 这里查11路)

一个是key(这个key理解时可以忽略 它是一个大于0小于1的没有意义的浮点数)

接收到了什么

看它接收到的数据,包含了一个route,在这个route里,有一堆参数。其中id,sn,nm看起来就是这个线路的号码和名字…先不管它们。

吸引我注意的是pas,它是一个数组,包含了4个pa,这是啥?

点开详情我们看到每个pa里包含了名字和id,和一堆pt。随便点开两个pt,可以看到一个坐标和一个我也不造干嘛用的dtr,先不管它。有的pt里还有一个bs,里面有id和名字,那么我们就推测这个pt是一个公交车站台。那没有bs的那些pt是什么呢…

因为每个公交都有固定的路线,所以把这些pt连起来,就是能画出它的路线啦。那么由此我们就可以知道,每个pa都应该是这一路下面的一个路线,在这个11路里,它包含了4条路线。

getBusesForRoute

为指定线路获取…bus

发出了什么

route 要查询的路线

nsd 不知道是什么 看起来是一个boolean

key 随机数

接收到了什么

在这些数据里,这4个bus比较醒目。每个里面包含了每一辆车的具体信息,尽可能的理解其中的属性。

小贴士🌚

每组返回的数据里都有一堆乱七八糟的属性,我们可能无法全部理解它们。但是那些我们需要展示的信息,我们就需要找到它是由哪个接口产生的。

getStopPredictions

获取指定站台的预测

发出了什么

stop 指定的站台id(就是在getRoutePoints里我们看到的)

route 要查询的路线(有趣的是 你看有一个请求发出去的值是all 这样就可以获取这个站点的所有即将进站的预测。那么,stop我们可以传个all进去么。其他请求里我们可以传all去一口气获取所有我们想要的信息么,可以试试)

key 随机数

接收到了什么

显然,pre是即将进站的预测信息。值得注意的是v这个属性,如果是一个整型,则代表了这个进展的车辆id;但如果是一个字符串SCH,则意味着这个预测是计划中的车辆,但还没有该车辆的具体信息。

用Charles抓个包

不知道亲爱的读者胖友们有没有发现,在这些接口里,有获取站台信息的,获取路线信息的,但好像缺了一个元素的信息没有特定接口获取。那就是…获取每一辆正在行驶的公交的信息的接口。让我们hty来现抓一个好了

打开Charles

先关闭那个SB BUS TRACKER.chls,然后新建一个session。你会发现在工具栏上的这个按钮startRecordButton变成了红色,意味着它开始记录你本地的流量了。

用浏览器打开SBMTD MAP,再回来看Charles里的实时记录。把显示模式从Sequence切换成Structure来更清晰地区分sbmtd的流量和其他的流量(而当有时请求发出的时间和先后对我们来说很重要时,我们一般用Sequence来按照时间排序)

charlesNoSSL

可以看到我们想要看的来自bustracker.sbmtd.gov的流量都是unknown的,因为它使用HTTPS协议,不可被中间人明文查看。

配置SSL

Help - SSL Proxying下,打开Install Charles Root Certificate来安装Charles的根证书,授权并信任它以拦截HTTPS流量。

Proxy - SSL Proxying Setting下,点选Enable SSL Proxying,添加bustracker.sbmtd.gov端口443到监听列表并在前面勾选确认。

有可能需要重启浏览器。

这样就可以明文查看安全通信的内容了。

…抓包启动!

依旧是打开那个网页,回顾一下我们的目的是抓那个能获取每一辆车信息的接口。所以找到一个有车正在跑的路线,然后回到Charles点一下小扫帚的图标来清空现有记录区域。接下来就可以把鼠标放到随意一辆车上,等地图蹦出这辆车的信息,回到Charles点这个按钮startRecordButton赶紧停掉记录。

看记录下来的信息,在bustracker.sbmtd.gov下有一个接口我们之前没有遇到过。点选它看详情,你现在应该有能力自己分析它的用法辣。

下一步

看到这你了解了这个公交接口的用法,和如何使用抓包软件抓取并分析我们想要的流量。

春宵苦短,少女前进吧 💅

下一步是分析需求,设计界面,和准备必要信息 🚧