App Inventor 將讀取的資料使用表格呈現
App Inventor

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 不帶簽名」。

存檔完可以點兩下用瀏覽器開啟看看,是一個空白網頁。

這裡來簡單的介紹一下 HTMLHTML 的標籤基本上都是成雙成對的,像是有一個開始的 <html> 標籤,就有一個結束的 </html> 標籤,在結束的標籤,最一開頭要加個斜線
再來,網頁的資訊要放在 <head> 標籤的裡面、我們所看到的網頁部份,則是放在 <body> 標籤裡面。

接著來實際改一下網頁的標題和設定編碼


2. 請將以下標籤放入 <head> 標籤裡面

<meta charset="UTF-8">
<title>App Inventor 很有趣喔!</title>
meta 標籤不需要一個結束的標籤

將檔案存檔後,重新整理網頁,會看到網頁的標題變成「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> 標籤看看,等會兒再刪掉。

在剛剛的 <tr> 底下再加個 <tr> 就是第二列,然後裡面放 <td> 欄位的資料。

再來我們來裝飾一下網頁,裝飾網頁要使用 CSS

6. 在 <head> 裡面加一個 <style> 標籤,在這個標籤裡,我們可以設定網頁的顏色、表格的寬度、字體的大小……等等

接著我們依序設定網頁的顏色表格的寬度和資料置中,以及欄位名稱的顏色


7. 將以下資料加到 <style> 裡面

body {
	background-color: #ffcbacff;
}
table {
	width: 100%;
	text-align: center;
}
th {
	color: red;
}
背景顏色我是設定跟 Inventor 的一樣,表格寬度會跟瀏覽器一樣,且文字置中。

HTML 檔案就先暫時到此

二、撰寫 App

8. 接下來請開啟 Inventor,在「使用者介面」拉一個「網路瀏覽器」至「工作面板」。

可以先將網路瀏覽器上方的垂直捲動配置1的可見度取消,因為等等資料要透過網路瀏覽器顯示資料。

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、使用暱稱和密碼的資料) 的陣列,將變數 webViewStringsplit 方法,把有 \n 的地方做切割後,再存到變數 rows 裡。

儲存資料要使用到雙迴圈,第一層迴圈控制「」,有幾筆資料就有幾列,所以在迴圈開始後,會先在 trString 變數加上 <tr> 的標籤,然後再用 split 方法,以逗號對資料做切割,將每筆資料的各項資料再存到 tdString 裡面,再來 <td> 標籤的資料就要用第二個迴圈去讀取。(到這裡應該已經很多人看不太懂了吧!!)

當資料全部處理完之後,最後用 append 方法,將 trString 加入到 table 標籤的底下。(前面的 jQuery Code 沒加的話就沒辦法用喔)


16. 將 index 存檔後,上傳到 Inventor,就可以執行了!


App 完整程式碼:

App Inventor 專案 aia 檔案下載

HTML 網頁檔案下載



App 執行範例:




如果覺得文章內容還不錯的話,麻煩請幫我點個讚!感謝

可以多點幾次喔~~

第一次點讚需使用 Google 或 Facebook 帳號註冊

6 則留言

發表迴響