北京實時公交查詢——Flutter 入坑實戰

BingoCode發表於2019-02-12

專案起因

本人租房在融澤嘉園，每天去上地上班，日常交通路線是乘坐963到軟體園廣場，再轉447/446/982/365到上地七街，但有好幾次等963公交就等了30到40分鐘（西二旗太堵了），之後我通過“北京公交”微信公眾號來檢視963到站資訊再出門，這樣就只需計算好時間出門，每次都能恰好趕上。

然而，恕我直言，通過微信公眾號查詢的步驟太繁瑣了：

開啟微信 ->搜尋北京公眾號-> 點選實時查詢公交選單 -> 選擇公交路線-> 選擇方向 ->選擇當前站點 -> 查詢

操作貌似不是很複雜呀，額，我有個偏執的觀點，玩遊戲選區時，我都儘量往靠前的區選，這樣以後領取獎勵的時候不用滑太久，不然->_->

所以，為了化解我心中的偏執，我打算寫一個App，簡化查詢實時公交到站資訊的流程，本來打算用Android寫的，但Google推出的Flutter移動UI框架有一段時間了，作為一個移動開發從業者，不嘗試一下貌似有點不太給面子。膜拜了下Flutter Live裡展示的幾個有意思的demo，就開始學習Dart語法了。

開啟準備

前期工作主要分為兩部分，一是介面資料抓取，分析，處理，二是Flutter環境搭建，學習Dart語法規範，Flutter元件使用。

資料處理

開啟北京公交網，開啟瀏覽器“檢查”，通過操作實時公交查詢，分析發出的請求和請求結果，最後提取出所需要的幾個介面

獲取北京所有公交路線

http://www.bjbus.com/home/index.php

根據所選路線獲取該路線的路線方向

www.bjbus.com/home/ajax_r…

根據所選路線，路線的方向，獲取該路線上的所有站點列表

www.bjbus.com/home/ajax_r…

根據所選路線，路線方向，當前站點獲取該路線上的公交到站資訊

http://www.bjbus.com/home/ajax_rtbus_data.php?act=busTime&selBLine=10&selBDir=5582831127904445311&selBStop=3

接下來就是對上述結果進行html解析，json解析了，具體可檢視專案原始碼。

Flutter學習

入坑開發

Flutter非同步

Dart是一個單執行緒的語言，Dart中實現非同步的方式是：當遇到有需要延遲的運算（async）時，將其放入到延遲運算的訊息佇列（await）中去，把不需要延遲運算的部分先執行掉，最後再來處理延遲運算的部分。

Dart的命令列應用可以通過建立isolates來達到並行執行，但isolates之間不會共享記憶體，它們就像幾個執行在不同程式中的app，通過傳遞message來進行交流。除非明確指出執行在額外的isolates或者workers中的程式碼，所有的應用程式碼都是執行在應用的main isolate中

一個Dart應用開始的標誌是它的main isolate執行了main方法。當main方法退出後，main isolate的執行緒就會去逐一處理訊息佇列中的訊息，訊息佇列有兩種：

Event佇列

包括I/O，mouse events，drawing events，timers，isolate之間的message等。可以通過new Future或者new Future.delayed()來向event佇列中新增事件

Microtask佇列

只包含來自當前isolate的內部程式碼，用scheduleMicrotask()方法新增

最後程式碼執行順序為，main方法程式碼-> Microtask佇列 ->Event佇列，所有訊息佇列裡的事件執行按照先進先出原則順序，

Flutter控制元件

在Flutter但世界裡，一切都是Weight，，不管是輸入框，圖片，還是佈局容器，甚至居中，內邊距，外邊距，都是Weight，這些Weight相互巢狀構成完整的介面，因此需要運用設計模式編寫優雅的程式碼。Flutter自帶了十分豐富等控制元件，雖然也存在一些不足，但隨著Flutter社群不斷壯大，相信日後必將逐漸完善，本次專案使用了不少元件，如SimpleDialog,ListView,Stepper