App Inventor開發傳案(一) 1922 實聯制掃描程式

--

前言

Android手機軟體的開發程式非常多,從深入的純文字程式化界面到入門的圖像化界面開發程式都有。本次要介紹的軟體是使用MIT團隊開發的”App Inventor”來進行編撰,不須額外下載程式,只需透過電腦的瀏覽器連結上網即可開發。

這次要開發的軟體是最近大家很常用到的1922實聯制的掃瞄,由於IOS系統上面已經有捷徑功能可以用來快速掃描條碼並傳出簡訊,而Android系統中掃描QR Code到傳送簡訊則需要很多步驟,我們需要做到的就是簡化該步驟並組合成一個簡單的程式讓我們使用。

App Inventor: https://appinventor.mit.edu/

設計構想

最主要是將我們掃描QR code並發送簡訊的過程給自動化,也就是少點幾次螢幕的步驟(對,我就懶)。

所以我們把所有會用到的架構寫成以下步驟:

程式設計構想

此外也將會用到的功能給列出來:

  1. QR Code 掃描
  2. 文字內容辨識
  3. 簡訊傳送

接下來我會將上述提到的步驟做成實際的教學過程給大家觀看

帳號註冊

App Inventor首頁

首先我們需要註冊App Inventor的帳號,大家可以直接用Google帳號去註冊,所有的功能都是免費的,也有繁體中文的語言可以選擇,方便學生學習。

網址: https://appinventor.mit.edu/

直接使用Google帳號登入

創建專案

第一步我們先點擊左上角創建一個簡單的傳案,檔名部分只能輸入英文,不能加入空格。

專案管理介面
創建新專案

功能及面板介紹

創建完成一個專案後,我們可以進入到操作介面,操作介面也分成了兩個部分,軟體的人機互動介面以及程試運作的部分。

人機互動介面有一個手機面板的圖示,稱之為“工作面板”,我們可以將需要的元件從左側的“元件面板”拖曳進來,舉凡按鈕到一些深入的網路應用都可以。

App Inventor的人機介面

右側面板則包含了“元件清單”以及“元件屬性”,是負責控制我們剛剛放入手機操作介面的項目,在這裡可以將它們分別命名、更改元件大小等等的設計。

右上角則有“程式設計”的按鈕,點下去就能夠切換到後台進行程式編寫,可以在“方塊”那邊看到許多不同的功能與函式。

我們能編寫的功能也取決於剛剛人機介面拖拽進去的元件,比方說我想要開通簡訊的程式功能,那剛剛的人機介面我就需要將簡訊的功能給加進來,依此類推。

App Inventor的軟體介面

人機介面設計

在人機設計的部分我們可以複習一下我們需要用到的功能,主要有QR Code 的掃描、文字的辨識以及簡訊的發送,請記得將標籤、按鈕、QR Code的功能以及簡訊的功能分別拖拽至手機的工作面板中,這樣就將這兩項功能給新增進去了。

將標籤以及按鈕拖曳進來
將條碼掃描器拖曳進來
由於條碼掃描器以及簡訊為非可視元件,僅會存在於下方,但實際上我們已經增加此功能
拖曳簡訊功能

將上述功能拖曳進來後,我們可以先簡單的將右側命名,不過我只是示範給大家看,就不去另外命名了,後期的美化作業以及排版再交由同學自行發揮。

程式設計

接著我們切換到程式介面,可以來進行程式的撰寫。先完成掃描並讀取QR Code的內容,讓我們先了解1922的條碼裡面分別代表什麼。

首先我們將按鈕打開,裏面有“當按鈕被按下時…”的功能,我們將它拖曳出來,並在條碼掃描器內部選取“進行條碼掃描”,並依序把相關的功能放置進來。

點開左側方塊列表即可查看不同的功能選項
點開條碼掃描器,選取所需的功能
當按鈕1點選時的動作

我們希望按鈕被按下後可以進行掃描工作,所以我們依照上圖進行配置。如果按鈕被點選,則呼叫條碼掃描器進行掃描。此外大家可以看到外部掃描器的配置為否,也就代表我們不必安裝額外的掃描器,使用App Inventor內建的掃描功能即可掃描。

由於要將掃描到的條碼解析成文字,所以我們再次新增一個功能,當我們得到掃描結果後,將結果輸出到人機介面的標籤上面,這樣我們就能得到掃描結果。

加上收到掃描結果後的動作

輸出專案

完成一個簡單的進度後我們需要將軟體下載下來測試,這時候可以點選上方的“打包成apk”,並且使用QR code的方式進行輸出。這樣的好處是手機可以直接掃描並下載程式下來進行測試。

輸出程式
輸出成功時顯示的二維碼

當我們輸出成功時會顯示二維碼,此時就能使用手機進行程式的下載,十分方便。

完成軟體安裝後,手機上顯示的就是我們剛剛擺放的人機介面,此時我們可以按下剛剛設定的按鈕,手機便會跳到掃描介面供我們掃描QR code。

測試範例
掃描後得到的資訊

就拿網路上搜尋到的範例進行解說,如果嘗試用手機進行掃描後會得到一串文字,但實際上我們只需要將1922:以後的文字發送出去即可,這部分我們需要進行文字的裁切,之後再送到簡訊程式中,程式碼如下:

提取需要的文字並送出訊息

結論

依照上述步驟同學們就能完成一個簡單判讀並送出簡訊的程式,當然我們也能夠讓功能更加完整,比如說判斷是不是1922的條碼,如果不是的話則跳出對話筐讓我們選擇是否重新掃描等等。

我自己則是加入了上述的那些功能,並更改了介面以及軟體icon,完整的程式碼以及使用內容如下,大家可自行取用,我這邊也會公開開發原始檔給大家自行發揮。

人機介面設計
軟體設計

測試影片

--

--

研究生的小冰屋

躲在冰屋的研究生,喜歡3D列印、Arduino、LabVIEW、攝影以及騎車兜風