使用原生 AppSheet 資料庫建構無程式碼應用程式

1. 事前準備

AppSheet 資料庫 (ASDB) 是 AppSheet 的第一方原生資料庫，可整理及管理 AppSheet 應用程式使用的資料。相較於其他常用的外部資料來源 (例如 Google 試算表、BigQuery 和 Cloud SQL)，AppSheet 資料庫的介面和效能都經過改良，可為應用程式建立者和使用者提供更優質的體驗。AppSheet 資料庫是所有 AppSheet 應用程式的預設資料選項。

課程內容

  • 如何使用範例資料或從 Google 試算表匯入的資料，建立新的 AppSheet 資料庫。
  • 如何在 AppSheet 資料庫編輯器中自訂資料。
  • 如何從 AppSheet 資料庫產生 AppSheet 應用程式。
  • 如何變更資料庫，並在 AppSheet 中重新產生表格，以因應表格結構變更。

建構項目

本程式碼研究室會逐步說明如何產生及自訂新的 AppSheet 資料庫，首先從頭開始，使用 AppSheet 資料庫提供的預設資料，然後使用 Google 試算表中的現有資料。接著逐步說明如何從 AppSheet 資料庫產生新的 AppSheet 應用程式。最後，影片會說明如何在資料庫編輯器中變更資料庫表格，然後在 AppSheet 應用程式編輯器中重新產生表格。

軟硬體需求

2. 從頭開始建立及自訂新的 AppSheet 資料庫

首先，請使用預設的入門資料庫，從頭建立及自訂新的 AppSheet 資料庫。這樣您就有機會試用資料庫編輯器，不會中斷程式碼研究室的後續步驟。

  1. 前往 AppSheet ( appsheet.com) 首頁，然後依序點選「建立」 >「資料庫」 >「新資料庫」。

從頭開始建立新資料庫

  1. 系統會建立新的範例資料庫，並顯示 AppSheet 資料庫編輯器。

AppSheet 資料庫編輯器中的新範例資料庫圖片。

  1. 將資料庫名稱從「未命名的資料庫」變更為「Tasks DB」，即可自訂資料庫。(按兩下預設標題「未命名的資料庫」，即可編輯資料庫名稱)。
  2. 將「Table 1」改名為「Tasks」。(按兩下分頁即可編輯)。
  3. 將第一欄從「標題」變更為「工作」。
  4. 按一下左上角的「+」，新增記錄。

圖片：按一下左上角的「+」，即可新增記錄

  1. 按兩下「狀態」欄，即可查看 Enum 類型和下拉式選單項目類型的使用方式。

「狀態」欄的屬性編輯器。類型：使用「Enum」，項目類型：使用「Dropdown」

  1. 選用：按一下 = 符號後的按鈕，為每個下拉式選單選項上色。

使用顏色挑選器為下拉式選單選項著色。

  1. 選用：如要進一步試用編輯器，請新增「狀態」列舉的選項 (按一下「新增選項」)，並新增顏色。
  2. 選用：嘗試使用不同類型的資料欄，例如「顏色」、「進度」、「是/否」和「電話」，然後觀察這些資料欄的行為。

ASDB 中所有支援資料類型的內容選單。

歡迎進一步使用資料庫編輯器。在後續步驟中，您會建立新的資料庫。

3. 從 Google 試算表匯入資料，建立及自訂新資料庫

接下來的步驟說明如何從 Google 試算表匯入資料。

從試算表建立資料庫

  1. 首先，請複製這份公開的 Google 試算表，並重新命名為 ASDB: IO Codelab。

請注意，這個畫面有兩個分頁：「工作」和「擁有者」。

  1. 如先前所述，請前往 AppSheet ( appsheet.com) 首頁，然後依序點選「建立」 >「資料庫」 >「從 Google 試算表匯入」。

從匯入的試算表建立資料庫

  1. 在 Google 雲端硬碟檔案選擇器中，選取試算表副本 ASDB: IO Codelab 或您為副本命名的名稱。

系統會根據 Google 試算表中的資料，產生新的 AppSheet 資料庫。

螢幕截圖：在資料庫編輯器中，顯示從試算表生成的 AppSheet 資料庫。

新增 Tasks 表格的參照

接著，從「Tasks」資料表新增對「Owners」資料表的參照。

  1. 在 AppSheet 資料庫的「Tasks」表格中，按兩下「Owner」欄，即可編輯設定。
  2. 將類型從「文字」變更為「參照」>「參照」。

選取參考類型

  1. 將「要參照的資料表」設為「擁有者」，然後按一下「儲存」。

對話方塊：將「類型」設為「參考」，並將「要參照的資料表」設為「擁有者」

  1. 系統會顯示變更資料欄類型的警告訊息。在這個案例中，這一欄的資料與新資料欄類型相容，因此您可以點按「是」繼續操作。

「變更資料欄類型」的「是/否」對話方塊。

  1. 接著，AppSheet 資料庫會嘗試將「擁有者」資料表中的相應資料列，與「工作」資料表中的名稱進行比對。由於這個資料集相符，AppSheet 資料庫應會填入「擁有者」欄，並正確參照「擁有者」列。

ASDB 編輯器中的工作表格，顯示正確的「擁有者」欄值。

  1. 如要測試參照，請按一下「擁有者」儲存格，然後將擁有者更新為其他擁有者，例如「Sarah」。

透過參考資料提供的彈出式視窗選取其他擁有者。

選取後，新的值 (「Sarah」) 會顯示在「擁有者」儲存格 (在「工作」表格中)。

選取其他擁有者後，工作表格的「擁有者」欄會顯示擁有者名稱「Sarah」。

變更參照表格的「標籤」欄

AppSheet 資料庫可讓您為任何資料表選取標籤資料欄。這樣就能指定要在父項資料表中顯示的資料欄。這也會控管連結的 AppSheet 前端應用程式中，父項資料表顯示的內容。因此，您可以在「Tasks」資料表 (如先前所示) 中顯示「Owners」資料表的「Name」資料欄，也可以顯示「Owners」資料表的「Email」資料欄。

  1. 如要這麼做，請將「擁有者」表格中的「標籤」欄變更為「電子郵件」，方法是將滑鼠游標懸停在「電子郵件」欄標題右側，然後點按垂直刪節號。

圖片：顯示「欄標題」右側的垂直省略號。

這會叫用資料欄的內容選單。

顯示資料欄的內容選單，並選取「以資料欄當做標籤」。

  1. 在內容選單中選取「以資料欄當做標籤」，將「電子郵件」資料欄設為資料欄標籤。

電子郵件欄標題，標題左上方有「欄」標籤標記。

  1. 如要確認「電子郵件」欄已選為參照「工作」表格的欄標籤，請按一下「工作」表格分頁標籤，並注意「擁有者」欄現在會顯示電子郵件地址。您可能需要重新整理瀏覽器，才能看到更新後的「擁有者」欄。

「工作」表格的「擁有者」欄顯示電子郵件地址，因為參照的「擁有者」表格的「電子郵件」欄已設為欄標籤。

4. 從 AppSheet 資料庫產生 AppSheet 應用程式

完成資料庫自訂作業後，即可直接從資料庫產生 AppSheet 應用程式。如果您想要自訂前端 UI、新增自動化或安全篩選器等，這項功能就非常實用。如要執行這項操作，請按照下列步驟操作：

  1. 按一下 ASDB 編輯器右側的「應用程式」。

AppSheet 資料庫編輯器的螢幕截圖，右側的「應用程式」按鈕以高亮顯示。

這會叫用右側的內容選單，產生新的應用程式。

與先前相同的螢幕截圖，但現在顯示含有「New AppSheet app」(建立新的 AppSheet 應用程式) 按鈕的對話方塊。

  1. 按一下「New AppSheet app」(新的 AppSheet 應用程式)，即可產生新的應用程式。

生成的 AppSheet 應用程式螢幕截圖。

應用程式生成後，請注意應用程式有警告：

Column "Owner" in Tasks_Schema has a reference to an unknown table or slice "Owners". Open the column definition to select a source table.

這是因為產生的應用程式只有 Tasks 資料表，而 Owner 欄參照的是不明資料表 Owners。

如要修正這個問題，請將「擁有者」資料表新增至 AppSheet 應用程式。

  1. 在 AppSheet 編輯器的「資料」頁面中，按一下「+」。

資料頁面，其中醒目顯示「+」圖示。

  1. 在「Add data」環境選單中，選取「AppSheet Database」做為資料來源。

新增資料內容選單。

  1. 然後選取「ASDB: IO Codelab」資料庫 (或您在先前步驟中為資料庫命名的名稱)。

選取資料庫選單選項。

  1. 在後續對話方塊中，選取預設的「全選」核取方塊，然後按一下「新增至應用程式」。

對話方塊：選取要新增至 AppSheet 應用程式的「擁有者」表格。

將「擁有者」表格新增至應用程式後，參照錯誤就不會再出現。

AppSheet 應用程式的螢幕截圖，沒有參照錯誤。

  1. 現在已新增「擁有者」AppSheet 表格，您可以點選 AppSheet 中的「Views」頁面，然後點選「PRIMARY NAVIGATION」旁邊的「+」，建立新的檢視畫面來顯示這項資料。

「檢視畫面」頁面，醒目顯示「+」圖示。

  1. 在「Add a new view」對話方塊中，點選「Create a new view」

新增「檢視」對話方塊。

  1. 建立新檢視區時，請設定下列選項：

檢視名稱：擁有者。適用於此資料：擁有者。檢視類型：deck。

查看「擁有者」檢視的編輯頁面。

恭喜，您的應用程式現已完成！

  1. 如要測試「工作」和「擁有者」之間的參照，請在行動裝置預覽畫面中點選「擁有者」檢視畫面或「工作」檢視畫面，然後選取記錄，即可查看相關 (參照) 記錄。

AppSheet 應用程式的螢幕截圖，右側顯示行動裝置預覽畫面。

舉例來說，您可以點選「擁有者」檢視畫面，然後點選記錄來細查資料，並查看相關的「工作」記錄。

圖片：選取擁有者，然後向下鑽研查看相關工作。

5. 變更資料庫並重新產生 Tasks 資料表

您已建立 AppSheet 資料庫，並從中產生新應用程式，現在請嘗試變更資料庫中的資料表。變更資料欄資料類型，並觀察連結的 AppSheet 應用程式會發生什麼情況。

  1. 在資料庫的「Tasks」資料表中，將「Due Date」欄的類型變更為「Date and time」>「Date」。

在 ASDB 編輯器中，將「工作」資料表的「到期日」資料欄類型變更為「日期」。

返回 AppSheet 應用程式時，系統會偵測到資料庫已更新，並顯示警告：

App Schema for table 'Tasks' is out of sync with the schema in AppSheet database. Please regenerate the table structure

AppSheet 編輯器偵測到資料庫中的結構定義變更，並提供警告。

  1. 如要重新生成，請按一下右上角的「重新生成」d1a956498c05d75f.png圖示。
  2. 系統會顯示警告對話方塊：

再生警告對話方塊。

  1. 點選「重新生成」繼續操作。這會將應用程式中「到期日」資料欄的類型更新為「日期」類型，並在工作記錄的「編輯」表單中啟用日期挑選器輸入元素。

AppSheet 應用程式編輯表單，顯示 DatePicker 輸入元素。

6. 恭喜

您已完成 AppSheet 資料庫 (ASDB) 程式碼研究室！

其他資訊