『原創』手把手教你搭建一個實用的油耗App（一），油耗app

『原創』手把手教你搭建一個實用的油耗App（一），油耗app
　　前言：

　　入行快10年，有點積蓄，三年前買了代步車。於是乎，汽車油耗開銷就成了每個月都必須關注的問題。三年來，用過了無數油耗記錄軟體，比如最知名的“小熊油耗”，從第一次用，一直到最新一版，感覺越來越“臃腫”，功能實在是太豐富了，甚至都做到“大資料”這一層面，作為一個小白車主，其實，我只關心：我的車油耗如何。

　　後來體驗了幾款應用市場上的油耗app，感覺都不盡如人意，比如一來就要你手機號的（什麼鬼，手機號和油耗有毛線關係？作為一個安卓使用者，我覺得：個人隱私還可以在搶救一下！）……還有介面簡單到只有一個表格的，看的我是一臉懵逼的（敢不敢不要這麼“直白”，不用小熊油耗那麼複雜的圖表，我就只想知道油費怎麼花出去的），曾經在某野雞應用市場下載到一個支援雲端硬碟資料備份的app，無奈換手機後，居然再也找不到這個app啦，一年多的油耗資料也無從恢複，哎（我就想用個穩定的油耗app）

　　一直以來，我就想找一個這樣的油耗App：

• 功能相對簡單（油耗增刪，圖表展示）
• 不涉及個人隱私（不收集個人帳號類資訊，沒有多餘的許可權申請）
• 支援資料雲備份（有後台資料做雲端備份，換機無憂）
• 穩定更新（有一個穩定的App市場來承載，如果我還活著，就不斷更新）

　　作為程式猿，一直以來信奉那句“自己動手，豐衣足食”，既然安卓市場裡找不到適合自己的油耗app，那何不自己開發一個呢？

　　選型：　　開發工具和UI架構

　　果斷決定自己動手搞一個，但是想想安卓那麼多項目架構，感覺都太“臃腫”，如果一個一個寫Activity，自己這個強迫症又覺得太low逼。怎麼辦？！遇到了Hbuilder+MUI，這個前端Hybrid開發神器，我在這篇文章就不做過多贅述，大家可以移步官網看看“Hello world”，自然能明白為什麼我會用它來完成咱們這個App的開發工作單位（傳送門在這裡:猛戳跳轉）

　　好了，準備好開發工具和UI架構，我們的App就在這架構上進行構建，簡單點說：我只需要寫幾行JS代碼，就能完成一個原生App所具備的功能。

　　資料持久的新思路：BAAS

　　網路上關於BAAS的解釋，很多很多，在這裡我也不囉嗦，簡單說：我作為一個App開發，我只需要告訴Baas我需要存些什麼(JSON)，什麼時候來拿(Anytime），怎麼拿(Get/Post)。後台所有關於資料的操作，均有BAAS來完成！，一句後台代碼都不用我寫喲！

　　這樣一來，作為一個獨立的App開發人員，至少後台資料的持久化，算是解決了。BAAS供應商，服務好的，還會同時提供一套“使用者賬戶”系統給你，方便你的App用到“使用者”模組，這樣，神馬使用者註冊，密碼找回等等這一套系統，又給我省了很多工作量。

　　綜上所述，我選擇了：Wilddog野狗這家年輕的BAAS供應商，來作為我App的雲端資料備份+使用者賬戶模組的支撐~~~~當然路，免費和收費，大家可以自行決定！

 

　　萬事俱備，只欠coding

 　　搞定了開發工具，UI架構以及資料存放區和使用者帳號體系的問題，對於我們這個App來說已經是“萬事俱備，只欠coding”了。如果電腦面前的你想和我一樣10多分鐘搞定這個App，你應該準備好：

• 　　項目開發工具:Hbuilder（內建MUI）
• 　　Wilddog野狗雲賬戶
• 　　健全的雙手（右手皆可）
• 　　不低於70的IQ

　　……

　　項目搭建

 

使用Hbuilder 建立一個“移動App”項目，在“選擇模板”這裡，我們選擇：mui項目。這樣，會為我們的項目添加好mui必備的js、css、字型資源。　　

建立的項目如左圖所示， 在根目錄下，添加images、libs、funcs三個檔案夾。如所示：

 還有一系列的功能介面，在這裡，就不一一贅述，後面都會把項目在git上進行分享。以下是各個介面的樣子：

 

項目的源碼將使用git方式做分發，所以在此不再贅述。大家可以通過掃下方二維碼，先體驗一下：

後續，我會專門一個一個專題，給大家介紹這個App主要功能模組的實現，以及對接BAAS服務的相關心得技巧。