使用 App Inventor 的 ListView 新功能，做出購物商品清單。Part 2

昨天介紹了如何用 ListView 元件，做出類似購物商品的清單，今天要教如何把已存在 Google 試算表的商品資料，讀取到 App Inventor 後再設定給 ListView 元件顯示。

那麼請跟著以下的教學：

1. 首先開啟自己的 Google 試算表，並新增一個商品資料表。

在 A 欄位放商品名、B 欄位放商品簡介、C 欄位放商品的圖片位置(可將圖片上傳至 Imgur)

好了之後於網頁右上角開啟共用，並將網址的試算表代號，先複製到記事本。

將以下網址複製到記事本

https://spreadsheets.google.com/tq?tqx=out:csv&key=試算表代號&tq=

將其中的「試算表代號」取代成妳的 Google 試算表代號，如下：

前置作業已準備好，接著要來開始製作 App。

2. 啟動 App Inventor，並開啟昨天的範例「Cart.aia」。

這裡除了已有的清單顯示器和按鈕元件外，還要再新增對話框和網路元件。

切換到程式設計

新增以下變數：

昨天是將變數商品資料，當作清單顯示器的元素，今天要改成單純存放商品資料。

而清單顯示器的元素，當然就是交給變數清單元素囉！！！

變數網址的字串內容為，剛剛在記事本修改完的網址。

https://spreadsheets.google.com/tq?tqx=out:csv&key=1GaUpxisZeudVuto2tYYQ7_cCGNjh9EsapiwV1rNrpFE&tq=

修改當按鈕被點選的方塊，如下：

太簡單就不說明了喔~~

新增當網路元件取得文字方塊，如下：

當取得文字後要先關閉對話框，不然它會一直在那轉圈圈。

如果回應程式碼為兩百就是讀取成功，反之失敗。

成功後將試算表內容給變數商品資料，中間要用 CSV 表格轉清單，不是列轉清單喔~~

接著將變數商品資料的值傳給副程式「設定購物清單」(等等會新增此副程式)

新增副程式「設定購物清單」，如下：

將傳入的值「商品資料」給清單迴圈，我在 Google 試算表只有兩筆資料，所以這邊的迴圈也只會跑兩次。
P.S. 變數商品資料為二維清單(清單裡再放清單)，所以區域變數各項商品資訊也是清單(一維清單)。

迴圈每跑一次，就會更新區域變數「各項商品資訊」的資料，而此清單變數的第一項為商品名稱、第二項為商品簡介、第三項就是商品圖片的網址。

到此 App 就製作完成了！如有看不太懂的部分，歡迎底下留言。