所以開發一個簡易App,不用網路環境,有手機鏡頭和發簡訊的功能,即可達到簡訊實聯制,且可過濾店家的 QR Code的內容,祇有發簡訊給 1922 才有作用,以保護資訊安全。
執行畫面
( ZenFone 如何截圖 ?同時壓住"電源鍵"&"音量下鍵"1秒 完成。)
啟始畫面:
掃描 簡訊實聯制的店家,把場所代碼 以簡訊方式發送給 1922 (防疫專線)。
按簡訊,即發送。
電話號碼不是1922,「發送簡訊給 1922」的按鈕設為未啟用。
QR Code的內容是網址,「發送簡訊給 1922」的按鈕設為未啟用。
素材
本 app的 icon (圖示),可自己繪製或網路搜尋。
在Google 輸入關鍵字,如 簡訊 icon , 選擇 「圖片」,可找到相關的小圖示。
找到圖片,按下去,再按右鍵,選「另存圖片」,就可使用。但要注意著作財產權。
以下是我設計的 icon:
Google 輸入 appinventor 。選 「MIT App Inventor」。
選 「Create Apps」。
網址為 :http://ai2.appinventor.mit.edu/
開新專案(project)
Projects / Start new project 。
輸入專案的 名稱,如 sms1922,按 「OK」鈕。
專案的名稱只能使用大小寫字母、數字及「 _」符號,名稱的第一個字元必須是英文字母,不能使用中文字。
Designer (畫面編排)
Screen1(頁面或稱為畫面):
AppName:sms1922,可以改成 「簡訊實聯掃碼器」(出現在手機上面的App名稱,可用中文)。
Icon : 可以上傳1個 icon(圖示) (可選背景透明的圖示),此程式在手機上面的App 圖示。
按 「 Upload File」鈕。
按「選擇檔案」。
選一個圖示,如 1922.gif , 按「開啟」。
再按「OK」鈕。
選「Screen1」,右邊Properties(元件屬性)視窗 往下拉,更改 Title (標題)的值為: 簡訊實聯掃碼器 (原本為 Screen1)。
Screen1 元件屬性表
元件
|
類別
|
屬性
|
功能
|
Screen1
|
|
Title:簡訊實聯掃碼器
AppName:sms1922,可以改成 簡訊實聯掃碼器
(出現在手機上面的App名稱)
Icon : 可以上傳1個icon圖示。
|
1個Screen元件就是1個頁面(畫面)
|
Button_scan
|
User Interface(使用者介面)
|
Text:掃描 QR Code
|
按鈕
|
HorizontalArrangement1
|
Layout(介面配置)
|
AlignVertical:Center:2(垂直置中) Width:Fill Parent,填滿父元件,自動填滿可用空間。HorizontalArrangement1的父元件為 Screen1。
|
水平配置元件,讓裏面的元件可以水平對齊
|
Label1
|
User Interface
|
Text:QR Code 內容:
|
標籤
|
TextBox_qrcode
|
User Interface
|
Width:Fill Parent
Hint: (清空),不要有提示文字。
Multiline :要打勾,可以多行顯示,不然祇顯示一行,後面的文字看不到。
ReadOnly: 要打勾,不能輸入,以免使用者輸入錯誤的場所代碼。
Text: (清空),由程式填入。
|
文字方塊,可以輸入或顯示文字
|
HorizontalArrangement2
|
Layout(介面配置)
|
AlignVertical:Center(垂直置中)
Width:Fill Parent
|
水平配置元件,讓裏面的元件可以水平對齊
|
Label2
|
User Interface(使用者介面)
|
Text:簡訊內容:
|
標籤
|
TextBox_sms
|
User Interface
|
Width:Fill Parent
Hint: (清空),不要有提示文字。
Multiline :要打勾,可以多行顯示,不然祇顯示一行,後面的文字看不到。
ReadOnly: 要打勾,不能輸入,以免使用者輸入錯誤的場所代碼。
Text: (清空),由程式填入。
|
文字方塊,可以輸入或顯示文字
|
Button_submit
|
User Interface
|
Enabled:取消打勾,先設定沒有啟用 Text:發送簡訊給1922
|
按鈕
|
BarcodeScanner1
|
Sensors(感測器)
|
|
條碼掃描器
可以掃描一維與二維條碼,其中二維條碼又稱為QR Code
|
Texting1
|
Social(社交應用)
|
|
簡訊元件
|
Notifier1
|
User Interface
|
|
對話框元件(有的稱為通知)
|
Button_scan,把 左邊Palette(元件面板) / User interface 中的 Button,拉到工作面板的 Screen1,在右邊的元件清單區,選 Button1,再按 Rename 按鈕,更改名稱為Button_scan,以利在寫程式時,便於判斷這個元件是作什麼用的,不然都是Button1、Button2,不知這些按鈕的用途。
右邊的屬性 Text:掃描 QR Code 。
HorizontalArrangement1
Label1
TextBox_qrcode
HorizontalArrangement2、Label2、TextBox_sms 方法同上。
Button_submit ,Enabled:取消打勾,先設定沒有啟用。沒有先掃描 QR Code,就不能發送簡訊。
BarcodeScanner1(條碼掃描器 )直接從 Sensors (感測器)把 BarcodeScanner,拖曳到 Screen1內,自動掉下去,放在Non-visible components (非可視元件)區內。
Texting1( 簡訊元件)直接從 Social(社交應用) 把 Texting,拖曳到 Screen1內,自動掉下去,放在Non-visible components (非可視元件)區內。
Blocks(拼塊,程式設計)
----------------------------------------------------------------
說明:
從 Variables (變數),拉出 initialize global to此程式block(拼塊)。
將 name 改名為 :qrcode_content。
global (全域變數)可用在程式中所有程序或是事件程序內。
從 Lists (清單),拉出 create empty list 此 block(拼塊),放在 initialize global qrcode_content to 的後面。
設定 全域變數 qrcode_content (qrcode 內容) 為空的list (清單) 。
因為預設會使用外部QRCode掃描器,但是手機可能沒有安裝此類軟體。所以還是 set barCodeScanner1.useExternalScanner to false,使用App Inventor 內建的 QRcode 掃描器。
從 Logic (邏輯),拉出 false 此 block(拼塊),放在 useExternalScanner to 的後面。
----------------------------------------------------------------
----------------------------------------------------------------
說明:
滑鼠移到 result ,停留一下,直到出現 get result,將它移到 to 的後面。
簡訊實聯制 QR Code 的內容為:
SMSTO:1922:場所代碼:2852 1802 2493 766
本次簡訊實聯限防疫目的使用。
檢查 SMSTO:1922 是否出現在 QR Code 的內容 的第1個位置,即開頭一定是 SMSTO:1922 。
檢查 QR Code 的內容是否含有(contains) SMSTO:1922。可能開頭 不是 SMSTO:1922,祇是在裏面,比較不安全。
從 Control (流程控制),拉出 if then else 此程式block(拼塊)。如果 ..... 然後......否則。
從 Text (文字),拉出 starts at text .. piece 此程式block(拼塊)。
piece 此子字串在 text 開頭的第幾個位置,位罝從1開始算。
點選「TextBox_qrcode」,拉出 TextBox_qrcode.Text 此程式block(拼塊),插入到 starts at text 的後面。
從 Text (文字),拉出 空字串 此程式block(拼塊)。放在 starts at text...piece 的後面,並輸入 SMSTO:1922 。
從 Math (數學),拉出 = 此程式block(拼塊)。
也拉出 0 此 block.
結果如下,把 0 改成 1。
點選「Button_submit」,拉出 set Button_submit.Enabled to 此程式block(拼塊),插入到 then 後面。
從 Logic (邏輯),拉出 true 此 block(拼塊),放在 set Button_submit.Enabled to 的後面。
設定 「發送簡訊給1922」此按鈕有作用。
要發送給 1922的內容為:
場所代碼:2852 1802 2493 766
本次簡訊實聯限防疫目的使用。
將 QR Code 的內容以 : 為分割字元,可分割(split)出 三個字串。
第1個字串 SMSTO
第2個字串(電話號碼) 1922
第3個字串 (簡訊內容) 場所代碼:2852 1802 2493 766
本次簡訊實聯限防疫目的使用。
所以使用 qrcode_content 此清單變數儲存這三個字串。
從 Variables(變數),拉出 set to 此程式block ,放在 then 裏面。
按向下的箭頭,選 global qrcode_content 此變數。
從 Text (文字),拉出 split text at 此程式block(拼塊)。放在 set global qrcode_content to 的後面。
把 TextBox_qrcode.Tex 放在 text的後面, : 此字串 放在at 的後面。
要發簡訊給 1922,簡訊內容為 qrcode_content 此清單變數 第3個元素,即
場所代碼:2852 1802 2493 766
本次簡訊實聯限防疫目的使用。
點選「TextBox_sms」,拉出 set TextBox_sms.Text to 此程式block(拼塊),插入到如下圖的位置。
從 Lists(清單),拉出 Select list item list ... index 此程式block(拼塊),放在 set TextBox_sms.Text to的後面。
從 Variables(變數),拉出 get 此程式block ,並選 global qrcode_content 此變數,放在Select list item list ... index此block的list 後面。
從 Math (數學),拉出 0 此程式block(拼塊),並改成 3。
點選「Notifier1」,選 call Notifier1.ShowAlert 此 block,放在 else裏面。
因為 Text(文字) 此block 前面已有,不用重新拉進來,選 已有的block,按右鍵,選「Duplicate 」,把複製出來的 Text ,放在 notice的後面。
修改文字的內容為 : 此 QR Code的內容不是要發簡訊給防疫專線 1922!
set Button_submit.Enabled to 可以不用重新拉進來,因為上面已有類似的block。
選上面的 set Button_submit.Enabled to true ,按右鍵,選「Duplicate 」,把複製出來的 set Button_submit.Enabled to true ,放在 call Notifier1.ShowAlert的下面。把 true 改成為 false,即沒有作用。
程式改良 :
因為有些店家的qr code 內容是用小寫,所以 應該使用 upcase 函數,把 TextBox_qrcode.Text 轉成為大寫。
最後正確的程式如下:
----------------------------------------------------------------
----------------------------------------------------------------
說明:
PhoneNumber :電話號碼
Message : 簡訊內容
----------------------------------------------------------------
如何下載 apk 到自己的手機 和 如何下載 apk 到自己的電腦
Build/Android App (.apk)
Build(打包)
結果如下:
如果 按 Dismiss (放棄)鈕,離開此視窗。沒有要下載此程式。
如何下載 apk 到自己的電腦
按左邊的「Download .apk now」,下載 apk 到自己的電腦。
電腦會自動下載已編譯好的 apk 檔。
從 BlueStacks 此模擬器 開啟 apk,就可執行此 apk。
如何下載 apk 到自己的手機
使用手機 QR Code 的掃描軟體,如 Line,掃描右邊的 QR Code ,可以將 .apk 程式下載到自己的手機內,以便安裝。
使用 Line 「加入好友」的功能,按 「行動條碼」。
按手機上面的連結,就可下載 寫好的 apk。
再按 「開啟」,「安裝」,安裝apk。
註:Android App Bundle(AAB)取代APK,成為Google Play上程式的標準發布格式,屆時不管是新發布的程式,或者是新/更新的Instant App(ZIP)程式,都必須採用AAB,至於既有APK程式的更新則尚未受到影響。
儲存專案
Projects /Save project ,將專案儲存到 Mit 伺服器上。
測試程式
將寫好的App 安裝在手機上,掃描下面的 QR Code,
如果內容為:
SMSTO:1922:場所代碼:2852 1802 2493 766
本次簡訊實聯限防疫目的使用。
表示程式正確。
掃描下面的 QR Code,
如果內容為:
https://www.ntu.edu.tw
且 發送簡訊給1922 此按鈕 沒有作用,表示程式正確。
註:
目前使用 call Texting1.SendMessage,重新編譯後,無法叫出手機原本的簡訊畫面,以至於無法發送簡訊,為何如此,查不到原因。
可改用 call Texting1.SendMessageDirect,會把簡訊內容直接發送出去,不會先進入手機的簡訊畫面,為了讓使用者知道簡訊已發送出去,可以使用 Notifier1.ShowAlert 加上一些訊息。
例如 :簡訊內容已直接發送給防疫專線 1922。\n請自己切換到手機的簡訊畫面,就可看到簡訊已發送出去。
說明: \n 是換行的意思。
後記