App Inventor 將讀取的資料使用表格呈現
之前有教過如何從 Google 試算表 讀取資料至 Inventor，但是抓出來的資料，只能單純的 Print 在那裡，而想要把對應的資料左右並排時，很常會因為各個資料長度的不同，而讓排版的格式跑掉，像我之前在做英文單字與中文翻譯的比對時，排版就常常亂掉，但是只要善用「表格」，就可以將資料漂亮的排序，此方法需要額外寫一個 HTML 網頁檔案，並用到它的「<table>」標籤，沒有學過也沒關係，這次教學會一步一步帶妳做出，如何利用表格漂亮地把資料呈現給使用者看。
App 的部份可以直接使用上次教過的讀取資料的 App 去修改，這次的教學也會直接使用上次的，沒有學過的同學可以到我上一篇的 Inventor 教學文章，文章底下有附專案的 aia 檔案，可以先拿去使用。
那麼首先先開啟 Inventor 專案還有記事本，我們先從 HTML 檔案下手
2022/11/15 更新
做了一個新的 App「雲端留言板」，欄位只有暱稱和留言內容，做法和文章教學一樣！
*2021/09/02 更新
有同學向我反應，App 在執行時，網路瀏覽器找不到 index.html 的檔案路徑，我用了最新版的 BlueStacks 測試，結果還真的無法使用！所以打開 BS 的資料夾看了一下，發現檔案所在的資料夾路徑不同了！
原本是：
「file:///sdcard/Appinventor/assets/index.html」
現在變成了：
「file:///sdcard/Android/data/edu.mit.appinventor.aicompanion3/files/AppInventor/assets/index.html」
同學可以試著更改路徑，看看能不能執行！？如果不行，就到模擬器的資料夾去找一下，重新設定路徑，或著妳到 000WebHost 申請一個免費的虛擬主機，把 index.html 丟上去，再把路徑設定為妳虛擬主機的網址就可以了！
*2021/08/10 更新
因為原本的表單突然不能用了！(可以讀但不能寫)
所以這邊附上最新版的 aia 檔案
更新的部份只有表單網址和試算表網址，其它都保持不動！
一、製作 HTML 檔案
1. 打開記事本，並輸入以下 HTML 標籤。
<!DOCTYPE html>
<html lang="zh-TW">
<head>
</head>
<body>
</body>
</html>將檔案儲存，檔名取為 index.html，後面的 .html 是副檔名，編碼請選「UTF-8 不帶簽名」。
這裡來簡單的介紹一下 HTML，HTML 的標籤基本上都是成雙成對的，像是有一個開始的 <html> 標籤，就有一個結束的 </html> 標籤，在結束的標籤，最一開頭要加個斜線；
再來，網頁的資訊要放在 <head> 標籤的裡面、我們所看到的網頁部份，則是放在 <body> 標籤裡面。
接著來實際改一下網頁的標題和設定編碼
2. 請將以下標籤放入 <head> 標籤裡面
<meta charset="UTF-8">
<title>App Inventor 很有趣喔！</title>
將檔案存檔後，重新整理網頁，會看到網頁的標題變成「App Inventor 很有趣喔！」了。
接著我們來製作表格吧！
表格的標籤為 <table>
3. 把成雙成對的 table 放在 body 裡！！
在 <table> 標籤裡，分別有 <tr>、<th> 及 <td> 標籤可以用，這三個標籤的功能分別為：
<tr>：代表表格的 (橫) 列數，一個 <tr> 就是一列。
<th>：拿來當欄位名稱使用。
<td>：拿來存放資料。(這樣講好像不太對)
如果看不太懂沒關係，接下來來實際動手示範。
4. 將以下標籤放在 <table> 裡，<th> 的欄位名稱就使用上個 App 專案的欄位名稱，分別有「帳號 ID」、「使用暱稱」及「密碼」。
<tr>
<th>帳號 ID</th>
<th>使用暱稱</th>
<th>密碼</th>
</tr>
重新看看網頁
會發現雖然有顯示資料，但在閱讀上有點不方便，所以我們要為這個表格加上框線。
5. 請在 table 標籤的裡面 (在 table 的右方) 輸入：border=”1″
再來底下欄位的資料就要透過 JavaScript，從 Inventor 讀取資料後再顯示了！
如果想要看看接下來放入資料後會長什麼樣子？我們可以先加 <tr> And <td> 標籤看看，等會兒再刪掉。
再來我們來裝飾一下網頁，裝飾網頁要使用 CSS。
6. 在 <head> 裡面加一個 <style> 標籤，在這個標籤裡，我們可以設定網頁的顏色、表格的寬度、字體的大小……等等。
接著我們依序設定網頁的顏色、表格的寬度和資料置中，以及欄位名稱的顏色。
7. 將以下資料加到 <style> 裡面
body {
background-color: #ffcbacff;
}
table {
width: 100%;
text-align: center;
}
th {
color: red;
}
HTML 檔案就先暫時到此
二、撰寫 App
8. 接下來請開啟 Inventor，在「使用者介面」拉一個「網路瀏覽器」至「工作面板」。
9. 切換到程式設計頁面，先建置兩個變數，名稱分別為：「網頁檔案路徑」和「webViewString」，變數內容如下。
因為網頁檔還沒有撰寫完成，所以等等寫完後，要上傳到 Inventor；變數 webViewString，是等等要設定「網路瀏覽器字串」要用的，資料內容為：
帳號 ID 資料,使用暱稱 資料,密碼 資料\n帳號 ID 資料,使用暱稱 資料,密碼 資料\n…… (\n 是換行)。
各個資料間用逗號隔開，當第一筆資料處理完就接一個換行符號，繼續連接下一筆。資料顯示如下：
JamesBang,JBNotes,1234
Star Trek,James T Kirk,1211
......將這個資料傳送到 index 後，先用 split 方法，將有換行的地方做切割，以上面的例子來講，第一筆資料「JamesBang,JBNotes,1234」和第二筆資料「Star Trek,James T Kirk,1211」之間有個「\n」換行，切割後就會變成兩筆陣列資料，這邊不太懂也沒關係！實際做做看大概就能略知一二。
10. 拖拉當 Screen1 初始化的方塊，裡面要設定網路瀏覽器的首頁地址。
11. 拖拉定義程序方塊，內容如下：
迴圈範圍從 2 開始就好，因為各個清單的第一筆資料是欄位名稱，欄位名稱已經在 index.html 打好了；如果想要直接用變數 datas 的資料也可以，只要用雙層迴圈就能達到同樣的效果。
12. 修改「拆解資料」的程序方塊如下：
App 到此就撰寫完畢了！只差等等把寫完的 html 檔案上傳即可。
三、在 index 新增 JavaScript 程式碼
13. 請在 head 標籤裡面增加下列 jQuery 的 Code
<script src="https://code.jquery.com/jquery-3.6.0.js" integrity="sha256-H+K7U5CnXl1h5ywQfKtSj8PCmoN9aaq30gDh27Xc0jk=" crossorigin="anonymous"></script>
14. 接著請在 body 標籤裡面增加成雙成對的 <script></script> 標籤
15. 將以下資料寫入 script 標籤裡面
var webViewString = window.AppInventor.getWebViewString();
if(webViewString) {
var i, j, trString = "", tdString, rows = webViewString.split("\n");
for(i = 0; i < rows.length; i++) {
if(rows[i] != "") {
trString += "<tr>";
tdString = rows[i].split(",");
for(j = 0; j < tdString.length; j++)
trString += "<td>" + tdString[j] + "</td>";
trString += "</tr>";
}
}
$("table").append(trString);
}
window.AppInventor.getWebViewString() 方法是讀取我們在 Inventor 設定的網路瀏覽器字串的資料，然後將這個資料存在變數 webViewString。
變數 i 和 j 拿來當迴圈用
trString 為字串，最後要加到 table 標籤裡面，完成整個表格的建置。
tdString 為陣列 (應改取 tdList 比較看得懂)，要存放每筆資料的各個資料。
rows 為存放每筆資料 (每筆資料就是有包含 帳號 ID、使用暱稱和密碼的資料) 的陣列，將變數 webViewString 用 split 方法，把有 \n 的地方做切割後，再存到變數 rows 裡。
儲存資料要使用到雙迴圈，第一層迴圈控制「列」，有幾筆資料就有幾列，所以在迴圈開始後，會先在 trString 變數加上 <tr> 的標籤，然後再用 split 方法，以逗號對資料做切割，將每筆資料的各項資料再存到 tdString 裡面，再來 <td> 標籤的資料就要用第二個迴圈去讀取。(到這裡應該已經很多人看不太懂了吧！！)
當資料全部處理完之後，最後用 append 方法，將 trString 加入到 table 標籤的底下。(前面的 jQuery Code 沒加的話就沒辦法用喔)
16. 將 index 存檔後，上傳到 Inventor，就可以執行了！
App 完整程式碼：
App Inventor 專案 aia 檔案下載
HTML 網頁檔案下載
App 執行範例：
如果覺得文章內容還不錯的話，麻煩請幫我點個讚！感謝
可以多點幾次喔~~
第一次點讚需使用 Google 或 Facebook 帳號註冊
6 則留言
SaebaRyo
非常實用的文章！
JamesBang
謝謝！
JustinBS
你好 我想請問，能透過什麼方式把google表單裡的圖片(URL)顯示出來?
JamesBang
你好，你的意思是要從試算表讀取圖片的 URL，然後以圖片的形式呈現在 App 上嗎？
如果是的話，你直接在 App Inventor 拉圖片元件，來源設定為讀取到的 URL 網址就好。
如果圖片數量不固定的話，我建議可以把圖片的 URL 傳送到 HTML 檔案，然後使用 img 標籤來顯示。
Benson
不好意思版主，想請問我的網路表單有顯示出來，但是按讀取之後就會把表格吃掉，只剩下原本的資料，遇到這問題該如何解決呢?
JamesBang
把表格吃掉，只剩下原本的資料 是指，表格只有我一開始打的標題而已嗎？還是表格全都不見了？
如果是能夠正常從試算表讀到資料的話，有可能是 Inventor 的解析資料那裡沒有拆解好，或是 HTML 檔案裡，在用迴圈做標籤累加那裡，沒有累加成功。
方便的話可以把 aia 檔案寄給我：[email protected]
我有空再幫你看看