App Inventor 傳送資料至網頁檔案
App Inventor,  HTML

App Inventor 傳送資料至網頁檔案

哈囉!各位中秋節快樂!!
今天要來寫一篇簡單的教學文章,主要是有關
App InventorHTML 檔案之間,資料的傳遞,之前我有寫過一篇「App Inventor 將讀取的資料使用表格呈現」的文章,不過有些同學私信跟我說,看不太懂是怎麼將從 Google 試算表 讀取到的資料,傳送到網頁檔,以表格的方式呈現!??

所以今天就來寫,如何在
App Inventor 的文字輸入框打好資料後,按下按鈕傳送到我們自己寫的網頁。那麼請跟著以下教學來開始實作:





1. 首先開啟記事本,並輸入以下 HTML 標籤。

<!DOCTYPE html>
<html lang="zh-TW">
<head>
	<meta charset="UTF-8">
	<title>App Inventor</title>
</head>
<body>
	
</body>
</html>

接著在 <body> 標籤裡,再加入以下 <script> 標籤。

<script>
	// 從 App Inventor 讀取資料
	document.write(window.AppInventor.getWebViewString());
</script>

然後將檔案存成 index.html(編碼選 utf-8)



最一開始加入的是 HTML 基本的標籤,而要在網頁上顯示資料,則是要將標籤寫在 <body> 裡面。(不論是按鈕、表格、圖片……,只要是我們能看到的,都要在 <body> 裡。)

要讀取在 App Inventor 設定的 “網路瀏覽器字串”,得使用 JavaScript 程式語言,JavaScript 的程式碼要寫在 <script> 標籤裡。

要讀取已在 App Inventor 設定好的 “網路瀏覽器字串”,要用
window.AppInventor.getWebViewString()
方法

然後再將讀取到的資料,透過 document.write() 方法,將資料顯示在網頁中。



接著開始設計 App



2. 開啟 App Inventor,並新增一個專案「WebViewString」。

需要元件如下:

主要元件為:文字框、按鈕和網路瀏覽器。

接下來,要處理網頁檔的部份,你可以將剛剛寫好的網頁檔,直接丟到 App Inventor,然後再將網路瀏覽器的首頁路徑指定過去,但這邊我要示範將網頁檔丟到虛擬主機(000WebHost) 後,再將網路瀏覽器的首頁路徑指定為我虛擬主機的網址。



我把網頁檔放在 根目錄(public_html) 裡的 AppInventor 資料夾 裡的 WebViewString 資料夾

所以我的路徑就是:

https://jamesbang.000webhostapp.com/AppInventor/WebViewString/index.html

P.S. 網址後面的 index.html 可省略



然後將網頁切換至程式設計

拖拉以下程式方塊:



首先判斷輸入框是否為空?有資料再做傳送

設定瀏覽器的網址

設定網路瀏覽器字串(WebViewString)

設定好後再呼叫瀏覽器回首頁即可



App 到這即製作完成!!

這是非常簡單的範例應用,同學可以多練習試試。有任何問題歡迎下方留言討論!!





aia 專案程式檔下載

點我下載





App 範例執行畫面




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

可以多點幾次喔~~

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

發表迴響