電子帳單小幫手-cordova 跨平台開發

電子帳單小幫手-cordova 跨平台開發

隨著帳單越來越多的電子化,每個人的手機信箱或者是各個平台的信箱都充滿著各式各樣的電子帳單,也因此你是否也常找不到你的某個帳單而忘記去繳費嗎?這個App也是因此為了幫助使用者而開發的。而這次的App也是使用Cordova來開發跨平台的部分,主要的功能分為傳統紙張帳單的掃描轉換為電子,也有電子帳單的匯入,再來帳單的月份計算以及貼心的挺醒功能讓讓使用者能夠按時繳交費用。

 

首先來介紹關於barcode的部分,第一種是透過掃描的方式把紙上的barcode掃描並判斷後,再來透過套件的方式來產生barcode的電子帳單,這是透過phonegap-plugin-barcodescanner的套件來完成,而barcode的格式也很多種也因此要注意產生的格式,才能產生出對的條碼唷!第二種則是透過匯入圖檔進入App的方式,主要是透把圖檔透過API來讓後端進行判斷,接下來產生出barcode就好拉,而且這格套件也有支援Qrcode,讓你的APP能夠做到更多的應用非常的推薦。

 

而分類的部分,這邊依照銀行或是月份來進行排列顯示,而cordova的專案讓大家能夠簡單地透過html與css來進行UI的設計,然後能夠產生出不同平台但是有同樣的效果,或著是你能夠在專案裡面透過merge的資料夾來分開不同平台,這也是跨平台很方便的地方,可以依照不同平台來切分不同的html頁面,且它會自動在建立不同平台的專案時載入各自的UI介面,真的是非常的方便。

 

最後來講到有關提醒的地方,像是apache cordova官網有提供dialog,來做提醒的呈現或者是可以使用toast得套件來產生訊息的樣子也是很不錯,很簡單的仔入套件後,window.plugins.toast.showLongBottom(“你的文字”)就能產出提醒的格式囉,而App本身有多個提示的樣式,來穿插使用使得使用者能夠體驗到最好的服務才是最好的設計。

 

跨平台的語言和框架真的是非常方便,而且在專案上對於需要簡單的顯示或一些手機相機等等的功能,官網本身都有很多套件能夠達到協助,在專案的評估下若合適,那將能省下很多的開發時間與人力,而若是要做很多深入的手機功能處理等等,那麼還是推薦原生的語言來開發,不過也希望大家能透過這邊文章來了解自己要開發的APP是否能夠適合跨平台的開發,了解許多功能套件的用法與如何輔助,也可以到apache cordova 來找所需的套件來使用,也希望大家能夠來下載體驗一下帳單小幫手唷!

 

參考:

https://github.com/phonegap/phonegap-plugin-barcodescanner

https://cordova.apache.org/

Comments

No comments yet. Why don’t you start the discussion?

發佈留言

發佈留言必須填寫的電子郵件地址不會公開。 必填欄位標示為 *

這個網站採用 Akismet 服務減少垃圾留言。進一步了解 Akismet 如何處理網站訪客的留言資料