App Inventor 傳送資料至網頁檔案
哈囉！各位中秋節快樂！！
今天要來寫一篇簡單的教學文章，主要是有關 App Inventor 和 HTML 檔案之間，資料的傳遞，之前我有寫過一篇「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.htmlP.S. 網址後面的 index.html 可省略
然後將網頁切換至程式設計
拖拉以下程式方塊：
首先判斷輸入框是否為空？有資料再做傳送
設定瀏覽器的網址
設定網路瀏覽器字串(WebViewString)
設定好後再呼叫瀏覽器回首頁即可
App 到這即製作完成！！
這是非常簡單的範例應用，同學可以多練習試試。有任何問題歡迎下方留言討論！！
aia 專案程式檔下載
App 範例執行畫面
如果覺得文章內容還不錯的話，麻煩請幫我點個讚！感謝
可以多點幾次喔~~
第一次點讚需使用 Google 或 Facebook 帳號註冊
你也可能喜歡
使用 App Inventor 將圖片上傳至 Cloudinary
App Inventor 使用最新試算表元件 Spreadsheet_Part 2
