Skip to main content

電子帳單小幫手-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 來找所需的套件來使用,也希望大家能夠來下載體驗一下帳單小幫手唷!

參考:

Comments

Popular posts from this blog

Visual Studio DeBug小技巧

最近在寫簡訊系統時,在Google找到了一些在 Visual Studio 內實用的DeBug小技巧,DeBug對於程式開發是很重要的一環,往往需要花費大量的時間去測試、找問題,拜現在好用的開發工具Visual Studio 2017給了許多DeBug的好方法讓我們使用,讓我們節省大量的時間在DeBug,將更多的時間花在開發上,而現在就來一一的介紹。 點擊設置下一個執行點 許多人可能知道你可以在左側按住箭頭並上下拖動移動它。但你可能不知道的是,從Visual Studio 2017 15,3 preview版本後開始,有一種更簡單的方法來設置下一個執行點。 將鼠標停在要移動箭頭的代碼行上。 並按下前方箭頭鍵就會繼續執行你所選到的該行程式上。 圖 1 點擊設置下一個執行點 指定值中斷 你是否在DeBug時遇到過一種情況,在一個中斷點處需要檢查變數的值或屬性,以及到達下一個中斷點時屬性是否已更改。你可以在class的setter上設置中斷點,但這會變的在class的每個實作中中斷!如果你只想知道一個有問題的點該怎麼辦? 在中斷點上按右鍵→條件 圖 2 條件 設定指定的條件 圖 3 設定指定的條件 重新附加到處理序 Visual Stuido 2017中新增的一個功能,許多人還沒有發現。當你正在處理需要使用“附加到處理序”的項目時,它非常有用。 點選上方工具欄偵錯→附加到處理序(Ctrl + Alt + P),選擇要附加的處理序,然後按下“附加”。 圖 4 附加至處理序 停止偵錯後要再繼續附加,請轉到工具欄上偵錯→重新附加至處理序(Shift + Alt + P)。 顯示執行緒 要DeBug多執行緒的程式是比較困難的,但是當妳可以在編輯器中看到當前每個執行序的執行行數時,它會變得對容易些。 在Debugger工具欄中選擇”在原始程式檔中顯示執行序”。 符號就會出現在每行程式碼左側的中斷點設定區域,其中至少會有一個執行序是正在被停止的。 將滑鼠鼠標停留在執行序符號上可以查看當前在該行程式碼上停止的所有執行序的執行緒ID與名稱 。 右鍵點及該執行序可以查看可以執行的操作,例如凍結或切換當前執行的執行序等等 圖 5顯示執行緒 ...

用小小 簡訊 拉近彼此距離

用小小 簡訊 拉近彼此距離! 身為行銷企劃的你是不是有過類似經驗,明明花了很多時間和精力經營你與客戶之間的關係,但與客戶之間總是有一堵高牆擋在中間,不管拿什麼工具千敲萬槌的,那面牆不動就是不動,就因為久久不能打破那面高牆而心灰一冷呢?別擔心,也許不是你使用的方法有錯,而是你缺那個「關鍵契機」,就讓我們一起加持你手的鐵槌,讓它變成強而有力的神之鐵槌,打破眼前一切行銷障礙,拉近你與客戶之間的關係! 現在,就來來好好介紹這「關鍵契機」吧! 首先,先來說說我們常見的「文字簡訊」,文字簡訊我們又可稱SMS,一般我們常收到的驗證簡訊、商品出貨通知都算是文字簡訊的一種,在內容的字數上還可以再細分為長簡訊與一般簡訊,一般簡訊字數在70字以內,而長簡訊至多可以使用335個字,但既然是希望客戶能在最短時間內閱讀到重點,通常設計到100個字就很足夠了,就如下圖所示,其餘想要說明的可以透過網頁或社群平台貼文的方式呈現。 好比以下例子,假如你是護膚中心的業者,想必有很多護膚課程想推薦給你的客戶,但沒太多時間一通一通電話打,又怕寄送Mail被擋在垃圾桶裡面,這時你可以發送 簡訊 ,針對不同的客戶寄送不同的課程訊息,如下圖所示,加上客戶名稱和課程介紹,一眼就能讓客戶看到重點,馬上打電話來跟你預約護膚課程。 怕 簡訊 看起來單調無味,你可以加點Emoji表情符號來增添點色彩,你看下面範例圖左邊是原本的 簡訊 ,而右邊有加上Emoji表情符號的 簡訊 ,明明內容相同,但看起來的感覺就是有小圖的比較貼近人心。 再來說說「圖文簡訊」,圖文簡訊又稱為MMS,除了可發送圖片外,也可發送音訊檔案,讓 簡訊 看起來更有趣,在運用上就更為廣泛了,就如下圖所示,除了可以發送商品打折的DM、也可以發送消費帳單的條碼,當然發送節日賀卡也是沒問題的。 就以一般商家來說,當你想祝福你的客戶生日快樂,你就可以先製作一張別出心裁的生日圖片,配上客戶的名字和幾段祝福文字,這樣一來是不是讓收到的客戶暖上心頭呢!如果你以為只能發送JPG格式的圖片外,那你就錯了,動態的GIF圖片當然也是可以的,就以下面兩張圖來看,左圖是發送靜態的JPG圖片 簡訊 ,右邊是動態的GIF圖片 簡訊 ,比較起來是不是帶有GIF的 簡訊 看起來是不是比較有趣!   ...

O2O商業模式中的簡訊應用

O2O是現今非常流行的商業模式,其操作的方式非常多元,從網路上取得折價優惠後再到實體商店消費、透過APP叫車、線上產品租借……等都是O2O的一環。 其中「產品租借」更是兼具O2O以及共享經濟的一種商業模式,而產品租借常常講求所謂的時效性,消費者通常都是為了立即性的需求,在短時間中租借特定商品,因此消費者從網路下訂轉到實體取貨時,會希望講求「即時」且「明顯」的通知方式,就是不希望延誤租借時間。因此若業者使用電子郵件通知,會擔心與廣告信混雜在一起;使用APP可能會被設為取消通知模式,錯失第一時間閱覽通知。 這時可以使用簡訊發送的方式通知消費者,因為簡訊送達消費者手中時,會立刻跳出通知視窗,消費者不會漏收訊息。 如何用簡訊建立產品租借的經營模式呢 ? 假設您是提供線上租借分享器服務的業者,通常此類型的消費者為配合出國,必須趕在出國前收到分享器,為確保消費者能如期租借到分享器,當您收到訂單後的第一步就是要盡快通知消費者進行付款,此時可以設計如下的簡訊內容以提醒消費者。 這種類型的簡訊設計重點包含: 1.      公司名稱:讓消費者明確知道是誰發送的,簡訊開頭帶入公司名稱是最好的方式。 2.      匯款資料:需包含臨櫃匯款或線上轉帳所需要的資訊。 3.      匯款後的動作:是否要告知付款?遇到問題的聯繫方式? 接著,當我們收到客戶匯款完成的資料後,要即時通知消費者分享器寄出或是寄達,以便掌握運送進度以及能準時取貨,而像這種類型的產品的寄出方式可以是透過宅配或超商取貨,接著我們以宅配方式設計如下的簡訊內容。     這種類型的簡訊設計重點包含: 1.      公司名稱:讓消費者明確知道是誰發送的,簡訊開頭帶入公司名稱是最好的方式。 2.      出貨狀態:可確認運送狀態(運送中或寄達)。 3.      出貨單號:消費者可以到貨運公司網站查詢運送狀態。 4...