帳號:
密碼:
最新動態
產業快訊
CTIMES / 文章 /
如何開發以NFC標籤啟動的App Clip
 

【作者: 意法半導體提供】   2021年07月21日 星期三

瀏覽人次:【5150】

現今商家與客戶互動有了一種新的方式 — App Clip(輕巧App)和NFC標籤。這個功能讓使用者可以在手機的作業系統上執行小應用程式(small app),而無需到App Store下載安裝軟體。


小程式只在螢幕上彈出資訊,此功能為開發新客戶關係創造了機會。例如,咖啡廳可以提供更實用的積分卡,零售商可以讓虛擬錢包更好用。商家可以透過多種方式觸發啟動小程式,其中一種是指向某一個URL位址的NFC標籤。當使用者的iPhone靠近標籤時,手機將會自動發現URL並啟動小程式。原理很簡單,同時成本也低廉。文中將分享商店使用小程式都需要具備什麼條件。


App Clip是什麼?

App Clip被稱為「輕量版的手機應用軟體」。這種小軟體壓縮到低於10 MB的大小,主要提供應用程式的一小部分功能。例如一家咖啡公司的完整App可以提供咖啡店的名錄、近期促銷活動、銷量排行以及積分卡,但App Clip小程式只會顯示積分卡。這些功能確保使用者能獲得即時體驗,即使手機行動網速很低的狀況下,使用者也能得到即時體驗。只要透過手機靠近NFC標籤啟動小程式,就可以減少很多使用障礙,為不太熟悉手機應用的新客戶打開了數位互動的大門。


以下來看ST的iOS應用開發者Vincent Latorre的小程式研發歷程:


App Clip:用戶端或NFC配置

準備ST25-TAG-BAG-U套件

圖一 : ST25-TAG-BAG-U 標籤套件,包含:1. ST25TV02K, 2. ST25TA02KB, 3. ST25TV02K HC, 4. ST25TV512, 5. ST25TA64K。
圖一 : ST25-TAG-BAG-U 標籤套件,包含:1. ST25TV02K, 2. ST25TA02KB, 3. ST25TV02K HC, 4. ST25TV512, 5. ST25TA64K。

在整個配置過程中,最容易的步驟即是建立一個NFC標籤,在標籤內寫入進入小程式的URL。這個過程非常簡單,簡單到建立一個正常執行的demo軟體,連一行程式碼都不需編寫。出於示範目的,將使用兩個ST25TV02K NFC標籤,其中一個用於存放小程式的URL位址,另一個將用作概念驗證,來為在作業系統中存儲的或緩存的功能容器做說明。


如果想開發一個以App Clip小程式為主的範例,不需要第二個標籤,開發者可以只使用第一個標籤。但是,想藉此機會讓大家了解如何讀寫儲存區塊,並提供具體證據證明ST的小程式確實可以執行,而不只是一個單純的展示頁面。這兩個標籤都是ST25-TAG-BAG-U套件中的小圓標籤。使用者必須到應用商店下載ST NFC Tap應用,才能讀寫標籤。


編寫URL

我們拿出第一個ST25TV02K標籤,以下假設標籤是空白標籤。第一步是在主螢幕上選擇Read Tag,然後將手機靠近標籤,螢幕上將出現ST25TV02K的資訊。下一步,點擊頁面右下方的圖示 ,然後選擇Areas Content Editor選項,最後,用手機掃描標籤。如果是空白標籤,則會出現一個文字方塊,顯示記憶體大小(例如256位元),並提示No NDEF message。


在寫入一條NDEF訊息前,使用者需要點擊提示「No NDEF message」的文字框,隨後在螢幕上將出現一個白色方框和藍色箭頭。向左滑動白色方框,將會彈出一個功能表,其中包含新增(Add)、編輯( Edit)、插入(Insert) 和執行(Exec)選項。在選擇 Add後,


1. 選擇NdefUriRecord


2. 輸入www.myst25.com/clip。請務必選擇「https」,否則小程式將不會立即顯示。


3. 按點擊「Validate」,然後編寫標籤


瞭解功能容器

第二個ST25TV02K是測試標籤,透過它可以瞭解Type-5標籤中NDEF支援功能。這證明ST的小程式正在讀取標籤,而不是在展示一個手機螢幕。為了增加示範的趣味性,我們在第一個儲存區塊中編寫一個有效的CC 檔案區。在ST25TV02K的第一個儲存區塊內,可以直接寫入四位元組CC:E1 40 20 01h。


編寫測試標籤

在執行編寫標籤前,打開NFC Tap iOS應用,接著:


1.選擇「Read Tag」,然後掃描第二個ST25TV02K標籤


2.檢查CC File部分,確保標籤是空白的。如果Magic Number是0x00,則表示標籤內不含任何資訊。


現在,我們啟動NDEF訊息傳輸支援功能,然後寫入一小則訊息。


1.選擇螢幕底部的「More 」,然後選擇「Areas Content Editor」。這時軟體將會讓你掃描標籤,接著,發現一個256位元組的可寫區域,裡面沒有內容。


2.點擊「Area 1」


3.在螢幕上出現「No NDEF Record」的提示訊息。向左滑動對話方塊,然後出現一個功能表,選擇「Add」。


4.點擊「NdefTextRecord」,清除現有文本,然後輸入「Hello World!」


5.按「Validate」按鈕,然後將手機靠近標籤,寫入NDEF消息。


測試App Clip

只有當手機上沒有安裝完整的應用軟體時,小程式才會彈出。因此,在掃描第一個有小程式URL位址的ST25TV02K標籤前,如果安裝了NFC Tap軟體,必須刪除此軟體。當手機偵測到第一個標籤時,就會在觸控螢幕上顯示小程式文字框,詢問使用者是否要打開小程式或從應用商店下載應用。打開小程式後會顯示一個精簡版的NFC Tap應用軟體,其中Read NDEF 是灰色不可用,但Read Tag 可用。選擇讀取標籤選項,然後掃描第二個ST25TV02K標籤,證明小程式讀取我們的標籤資料。向下滾動螢幕,我們看到Magic Number是 0xE1,證明小程式正在掃描我們剛才配置的標籤。


後台或應用開發和Web伺服器配置

Xcode專案

希望瞭解更多資訊的開發人員,第一步是下載iOS應用程式的原始程式碼(STSW-ST25IOS001)。工程師只需在Apple IDE開發環境中打開下載的檔案,即可開始研究實踐方法。首先要注意的是,在應用程式中充當小程式的程式碼片段是一個特定目標。


為輔助開發者開發小程式,蘋果提供了專用的App Clip範本,小程式可以與Apple Pay配合使用,並可以用Apple帳號登入軟體。這個新系統還受益於一個特殊的通知和地理位置定位系統。此外,一個iOS軟體可以有多個App Clip。在Xcode中,開發人員應注意Signing & Capabilities 選項卡,並記住團隊名稱和綁定的標識。


下一步是使用App Store Connect Web介面建立App Clip小程式。在此處,開發人員將上傳圖片,該圖片將顯示在iOS文字框上,吸引使用者啟動小程式。點擊「Advanced App Clip Experience 」後將開啟一個新功能表,設置指向小程式的URL位址。此外,開發人員還可以要求作業系統檢查行動裝置的地理位置,商家可以選擇使用此功能將小程式與商店或特定地點關聯。


伺服器端

Web伺服器配置非常簡單。 在Xcode和App Store Connect內定義的URL中,例如www.myst25.com/clip,必須有一個index.html 檔,而且其原標記必須包含應用程式ID和小程式綁定的ID。如下圖二所示,檔案正文可以是空白的,最重要的地方是原標記本身。



圖二
圖二

檔案名為 apple-app-site-association的檔案是在網路服務器的根資料夾(例如/ www)中必須存在的第二個重要文件。該檔案僅列出下列的陣列(圖三):



圖三
圖三


欲瞭解更多關於App Clip,請造訪:https://developer.apple.com/documentation/app_clips


關於小型NFC標籤,請瀏覽:https://www.st.com/en/evaluation-tools/st25-tag-bag-u.html


相關文章
開啟邊緣智能新時代 ST引領AI開發潮流
模擬工具可預防各種車用情境中的嚴重問題
低功耗MCU釋放物聯網潛力 加速智慧家庭成形
車商和一級供應商為連網汽車保護資料安全
ST以MCU創新應用潮流 打造多元解決方案
comments powered by Disqus
相關討論
  相關新聞
» 亞灣2.0以智慧科技領航國際 加速產業加值升級
» 意法半導體第二代STM32微處理器推動智慧邊緣發展 提升處理性能和工業韌性
» ST:AI在塑造未來的連網世界中 扮演著關鍵角色
» 高通執行長將於COMPUTEX 2024 分享智慧裝置上的生成式AI運算
» ST攜手Sphere Studios打造全球最大電影攝影機影像感測器


刊登廣告 新聞信箱 讀者信箱 著作權聲明 隱私權聲明 本站介紹

Copyright ©1999-2024 遠播資訊股份有限公司版權所有 Powered by O3  v3.20.2048.34.228.7.237
地址:台北數位產業園區(digiBlock Taipei) 103台北市大同區承德路三段287-2號A棟204室
電話 (02)2585-5526 #0 轉接至總機 /  E-Mail: webmaster@ctimes.com.tw