全部系列
4. 範例及專案教學 / Working Examples
(模組應用) 自動化查驗模組使用教學
(範例)自動化查驗模組使用教學
(範例)自動化查驗模組使用教學

學習如何運用模組建立數位新冠病毒健康證明自動化查驗機制

BRICKS TOOLS avatar
作者：BRICKS TOOLS
一週前已更新

＊模組介紹：

此模組包含串接歐盟標準之數位新冠病毒健康證明 (EU-DCC) ，並依照查驗結果給予畫面大範圍的識別色彩及音效回饋，模組可自行拆解後重新設計版面內容及替換音效檔案。

＊適用情境：

適用於需驗證民眾數位新冠病毒健康證明之店家，想減輕人力負擔，以平板、筆電、手機實現自動化驗證機制的流程。

▍事前準備：

  1. 註冊 BRICKS 帳號

    1. 可參考此教學完成註冊：1.1 註冊&登入 BRICKS

  2. 安裝並綁定 BRICKS Foundation 至設備

    1. 可參考此教學將 APP 安裝至作為查驗的顯示設備，如平板、手機、筆電等設備 (目前僅支援安卓、蘋果及 M1系列筆電)：1.2 安裝 Foundation並綁定 Workspace

▍I. 創建應用程式並加入自動化查驗模組

1. 創建你的查驗應用程式

在 BRICKS Controller 中選擇 [ APPLICATION ] 頁籤，再點擊 [ New Application ] 製作你的第一個顯示應用程式。

Create a new App

2. 命名並確認設定應用程式尺寸

在創建應用程式視窗中，可以自行給予之後好管理的命名及詳細描述，取好名後即可按下 [ Save ] 確定創建應用程式。

＊請先確認裝置建議的 Layout Width & Height，及閱讀下方說明後再變更


​＊額外說明：Layout Width 及Layout Height 是用來定義應用程式分割比例大小的屬性，和顯示螢幕解析度無關，應用程式可以同時在不同大小尺寸或解析度的設備上進行播放，為了在不同設備間可以輕易的轉換使用，我們採用分割比例的方式在進行基礎設定。 (可在 APPLICATION 頁的 Bind Device 中設定顯示設備的長寬)，在之後教學拼接多個螢幕時會詳細說明。

Add a new App

查看顯示設備建議的 Layout 請切換至 DEVICE 頁，選擇左側中的設備，查看上方建議的應用程式版面尺寸。例如下圖為 Galaxy Tab-6，建議設定的Layout 為96x58，若裝置為直立時可設定為 58x96。

Check Device recommend Grid size

3. 編輯應用程式並加入自動化查驗模組

選擇右方快速開始區塊 [ 綁定了'X'個 ] 進入應用程式綁定設備介面 。

Bind Device to Application

選擇顯示設備後按下 [ 更新後關閉 ]

Select device to bind.

選擇右方快速開始區塊 [ 編輯 '應用程式名稱' ] 進入應用程式編輯介面 。

Get into Application editor

應用程式詳細介面內容說明請參考 2.2 建立應用程式

在左側介面中選擇 [ Import Module ] 匯入自動化查驗模組

Import Module

在 Search Public Module 中輸入 [ EUDCC ]，尋找自動化查驗模組

在找到的清單中選擇 [ EUDCC 疫苖護照（直式）]，若您的設備為横放時，可選擇橫式，選擇後請點擊下方 ［ Add ］。

Search for EUDCC Module

最後在編輯介面左側中選擇匯入的 [ EUDCC 疫苖護照（直式）]，點擊右側的 [ Become Root Subspace ] 設定此模組為預設的畫面，最後點擊右上的儲存即可成功完成自動化查驗裝置的設定。

Setting Default Subspace

▍II. 拆解模組客制化介面、實聯制 QRcode 及音效

1. 拆解模組

  • 選擇 EU-DCC 模組，將右側屬性欄位捲至底部，選擇 Modify this Subspace，並在接著跳出的警告視窗中選擇確認拆解。

Modify Module Button

Modify Module warning

2. 編輯介面

  • 拆解模組之後，左側下方的 Subspace 會列出組成此模組的所有元件，此時便可自由在此 Subspace 中自由新增調整畫面內容。

  • 選擇畫面中的文字元件，在右側有 Text 內容可供編輯替換。

Setting Text Content

  • 選擇動態或圖片元件，在右側中有 URI 或 Path 可供上傳媒體檔案替換。

Setting Lottie & Image URI & Path

詳細元件介紹請參考 3.0基礎元件 的教學影片

3. 設定實聯制 QRcode 內容

  • 選擇在 Property Bank 下的實聯制元件，在右側的［ Value ］中設定 [ SMSTO: 1922:場所代碼：1111 1111 1111 1111 場域名稱：XXX 限防疫目的使用 ] ，其中場所代碼及場域名稱內容可自行依照場域設定。

Setting 實聯制 QR code value

詳細可參考 QR Code 元件教學

4. 替換音效

  • 選擇 [ Generator ] 中 beep, pass, error, no result 等元件，在右側的 [ File Path ] 的右側圖示點擊後，即可上傳新的音效或語音替換原本內容。

    1. beep：掃描到 QR Code 時的回饋音效

    2. pass：查驗 QR Code 後驗證通過

    3. error：查驗 QR Code 後驗證失敗，不符合資格

    4. no result：查驗 QR Code 後無結果

Setting Sound Generator

詳細設定可參考 聲音播放器教學

5. 設定掃描鏡頭

  • 選擇 Property Bank 中的 [ 鏡頭 ]，在右側的 [ Value ] 中設定 front 或 back 來決定使用前鏡頭或後鏡頭。

▍III. 可延伸應用範圍

BRICKS 提供豐富的軟硬體串接能力及所見即所得的介面編輯器，應用範圍涵蓋數位看板、Kiosk、自助結帳、自助服務、廣告播放、行銷遊戲互動等等，以下提供可延伸應用範圍說明。

1. 自助點餐出單應用

  • 可結合自助點餐功能實現零接觸服務，大幅降低染疫風除。

  • BRICKS 提供 POS API 、熱感出票機、信用卡機串接能力，可輕鬆以無需撰寫程式碼之形式完成。

2. 自動輪播看板

若對其他教學影片還有興趣的話，

歡迎繼續觀看 進階課程 / Advanced Topics 集錦!
​

是否回答了您的問題？