AppSheet 教學：如何在 App 中動態產生並顯示 QR Code 條碼？

在現代的商業應用中，QR Code（二維條碼）扮演著舉足輕重的角色，無論是產品追蹤、活動報到，還是設備管理，QR Code 都能提供快速、便利的資訊存取方式。今天，我們要分享一個非常實用的 AppSheet 技巧：如何在您的 App 中，根據每筆資料的內容，動態產生對應的 QR Code 圖片。

核心原理

我們的作法是利用外部的圖片產生服務，具體來說，就是 Google 提供的 Chart API。基本流程如下：

1. 準備好 Google Chart API 的基礎 URL。

2. 在 AppSheet 中建立一個虛擬欄位 (Virtual Column)。

3. 使用公式將基礎 URL 與您想編碼的資料（例如：使用者編號、產品ID）串接起來。

4. 將這個虛擬欄位的類型設定為 Image，AppSheet 就會自動將該 URL 轉譯成圖片顯示。

關鍵函式說明

在開始之前，有兩個重要的 AppSheet 函式我們需要了解：

1. CONCATENATE("文字1", "文字2", ...)：

   • 這是一個字串串接函式，可以將多個文字片段或欄位值組合成一個完整的字串。我們將用它來組合出最終的 QR Code 圖片 URL。

   • 另外，您也可以使用 & 符號來達到同樣的串接效果，寫法更為簡潔。

2. ENCODEURL("要編碼的文字")：

   • 這是整個流程的關鍵。如果您的資料中包含空格或特殊符號（例如 &、?），直接放入 URL 會導致 URL 結構錯誤而無法顯示圖片。

   • ENCODEURL() 函式會將這些特殊字元轉換為 URL 安全的格式（例如，空格會被轉換成 %20）。強烈建議一定要使用此函式來包裝您的動態資料，以確保穩定性。

   • AppSheet 官方文件：ENCODEURL()

---

操作步驟詳解

步驟一：準備 QR Code 產生器的 URL(已停用)

我們使用 Google Chart API 來產生 QR Code。它的基礎 URL 結構如下：

codeCode

https://chart.googleapis.com/chart?cht=qr&chs=300x300&chl=

• cht=qr：指定圖表類型為 QR Code。

• chs=300x300：指定圖片的尺寸為 300x300 像素，您可以根據需求調整。

• chl=：這是最重要的部分，等號後面要接上您想編碼的內容。

例如，如果您想產生內容為 bestdaylong 的 QR Code，完整的 URL 會是：
https://chart.googleapis.com/chart?cht=qr&chs=300x300&chl=bestdaylong

您可以將此 URL 貼到瀏覽器，看看是否能成功顯示 QR Code 圖片。

可以使用其它如quickchart.io https://quickchart.io/qr?text=http://bestdaylong.com/&size=128

步驟二：新增虛擬欄位 (Virtual Column)

在 AppSheet 編輯器中，找到您要新增 QR Code 的資料表 (Table)，進入 Columns 設定頁面。

1. 點擊右上方的 Add Virtual Column 按鈕。

2. 為這個新欄位命名，例如「顯示條碼」。

步驟三：設定公式 (Formula)

這是最核心的一步。點擊新欄位的 Formula 輸入框，我們要把步驟一的 URL 和動態資料組合起來。

假設我們想用「使用者編號」這個欄位來產生 QR Code，公式可以這樣寫：

寫法一：使用 

CONCATENATE(
  "https://chart.googleapis.com/chart?cht=qr&chs=300x300&chl=",
  ENCODEURL([使用者編號])
)

寫法二：使用 

"https://chart.googleapis.com/chart?cht=qr&chs=300x300&chl=" & ENCODEURL([使用者編號])

請將 [使用者編號] 替換成您自己的欄位名稱。

步驟四：除錯與最終設定 (超級技巧！)

直接將欄位類型設為 Image，如果公式有錯，您只會看到一個無法顯示的圖示，很難找出問題。因此，我們建議一個更聰明的除錯流程：

1. 先將欄位類型 (

2. 儲存設定，然後在 App 預覽中查看這個欄位。您應該會看到它產生了一串完整的 URL 文字。

3. 複製這串 URL，貼到瀏覽器中，確認它能正確顯示 QR Code。

4. 確認 URL 無誤後，再回到 AppSheet 編輯器，將該虛擬欄位的類型從 。

5. 再次儲存。這次，AppSheet 就會將正確的 URL 解讀為圖片，並在您的 App 中完美顯示動態產生的 QR Code！

總結

透過 Virtual Column 結合 CONCATENATE 和 ENCODEURL 函式，您就能輕鬆地為 AppSheet 應用程式添加強大的 QR Code 功能。這個方法不僅免費、穩定，而且極具彈性，能應用於各種業務場景。希望這篇教學對您有幫助！