網頁

2021年5月24日 星期一

手機 App 程式設計_ AppInventor2 _ 簡訊實聯制 (簡訊實名)

 AppInventor 2 簡訊實聯制 (防疫實聯制,簡訊實名)

題目

  1. 設計一個 App,可用手機鏡頭掃描店家的 QR Code。
  2. 如果 QR Code 的內容是發簡訊給 防疫專線1922, 就把 場所的代碼 ,以簡訊的方式發送給 1922 (防疫專線),否則就沒作用。

根據行政院的說明,傳送的簡訊是傳送至電信業者,費用方面由各大電信自行吸收。而傳送的資料僅供疫調使用,僅會保留28天,並不包含其他細部個人資訊等。

註:簡訊實聯制在2022年4月27日已退場了,本範例僅作研究QR Code的內容剖析,已沒有實用的價值了。這篇還有應用價值 :手機 App 程式設計- AppInventor2 -QR_Code_辨識器

研究動機

  1. 如果使用疾管家 LINE 官方頻道來執行簡訊實聯制,並不方便,手機要有網路環境,要安裝 line,和加入疾管家。
  2. 如果店家的 QR Code 被有心人替換內容,藏有惡意連結,民眾不知情按了超連結,恐有資安疑慮。或者簡訊不是發送到 1922,而是其它號碼,民眾荷包可能大失血。
所以開發一個簡易App,不用網路環境,有手機鏡頭和發簡訊的功能,即可達到簡訊實聯制,且可過濾店家的 QR Code的內容,祇有發簡訊給 1922 才有作用,以保護資訊安全。

執行畫面

 ( ZenFone 如何截圖 ?同時壓住"電源鍵"&"音量下鍵"1秒  完成。)

啟始畫面:
掃描 簡訊實聯制的店家,把場所代碼 以簡訊方式發送給 1922 (防疫專線)。





按簡訊,即發送。

電話號碼不是1922,「發送簡訊給 1922」的按鈕設為未啟用。



QR Code的內容是網址,「發送簡訊給 1922」的按鈕設為未啟用。

素材

本 app的 icon (圖示),可自己繪製或網路搜尋。
在Google 輸入關鍵字,如  簡訊 icon , 選擇 「圖片」,可找到相關的小圖示。

找到圖片,按下去,再按右鍵,選「另存圖片」,就可使用。但要注意著作財產權。
以下是我設計的 icon:


進入 Appinventor 

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 : 可以上傳1icon圖示。

1Screen元件就是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 此按鈕 沒有作用,表示程式正確。

註: QR Code Generator,https://www.the-qrcode-generator.com/


註: 
目前使用 call Texting1.SendMessage,重新編譯後,無法叫出手機原本的簡訊畫面,以至於無法發送簡訊,為何如此,查不到原因。
可改用 call Texting1.SendMessageDirect,會把簡訊內容直接發送出去,不會先進入手機的簡訊畫面,為了讓使用者知道簡訊已發送出去,可以使用 Notifier1.ShowAlert 加上一些訊息。
例如 :簡訊內容已直接發送給防疫專線 1922。\n請自己切換到手機的簡訊畫面,就可看到簡訊已發送出去。
說明: \n 是換行的意思。


後記

國家通訊傳播委員會(NCC)在臉書公告,簡訊實聯制從2021年5月19日到2022年4月27日止,累計發送47.8億則簡訊。目前已不用 簡訊實聯制。請大家不要再用此 App 發簡訊給 1922了,因為已經沒有用,且以前是免費,現在隨意發簡訊給 1922,是要錢的。

程式改良

既然簡訊實聯制已取消,可將本程式改為更通用 的 QR_Code_辨識器,請看
手機 App 程式設計- AppInventor2 -QR_Code_辨識器。