1.簡介

App Inventor 是採用「物件導向 Object Orientated」的程式開發概念。
App Inventor 是Google所提供的Android開發環境，目前版本為第二版，只要有Google帳戶皆可免費使用。
App Inventor使用拼塊程式 (Blocky) 來撰寫，以圖像方式來呈現讓程式初學者能夠更快上手，同時了解程式設計的脈落及邏輯架構。
App Inventor所開發的程式可以直接在Android手機上執行，也可以安裝Android模擬器在電腦上執行

2.歷史

Google 公司在西元 2010 年，為了讓更多人在沒有程式基礎的狀況下，能夠開發 Android 裝置應用程式，推出 Google App Inventor for Android 工具軟體，讓使用者可以運用拼圖模式來組合程式語法，進而發展 Android 裝置的應用程式。後來，Google 公司在西元 2012 年將此軟體，移轉給美國麻省理工學院（MIT）的行動學習中心（MIT Center for Mobile Learning）來維護。

麻省理工學院是在西元 2013 年 12 月 3 日推出 MIT App Inventor 2 網站，提供免費的雲端服務，使用者可以透過瀏覽器來開發 Android 裝置應用程式，
該網站的網址為：「http://appinventor.mit.edu/

要建置 MIT App Inventor 2 的開發環境，需要進行2項前置作業：
1. 申請 Gmail 帳號。
2. 安裝 MIT App Inventor 2 模擬器軟體（為了以模擬器或 USB 連線來測試程式）。

3.安裝

3.MIT雲端線上版的安裝與使用方法：
（1）要先下載手機模擬器：
步驟一：到這裡下載套裝軟體
http://appinventor.mit.edu/explore/ai2/windows.html
點按：1.Download the installer
系統會自動下載
MIT_App_Inventor_Tools_2.3.0_win_setup.exe

步驟二：安裝你的套裝軟體，安裝完成後桌面上會出現aiStarter的圖

步驟三：打開aiStarter，會出現cmd黑屏，把它縮小不要關掉它。（代表現在可以啟動手機模擬器）
（在 App Inventor 2 上方選單找到連接(Connect)→選擇模擬器(Emulator)）

4.練習

4.練習第一個範例：exp1_1
（注意：檔案名稱不可以寫成exp1-1）

（1）新增專案
到MIT雲端主機http://ai2.appinventor.mit.edu/
開新專案
Projects專案 > Start new project新增專案 > exp1_1

（2）exp1_1
功能：在label顯示你好
成果圖片， 畫面設計， 程式設計， 專案檔案
按鈕（顯示文字）
標籤label

4.練習

（2）exp1_2
功能：在Notifier1:showalert，顯示你好
成果圖片， 畫面設計， 程式設計， 專案檔案
按鈕（在訊息方塊Notifier1，顯示文字）
訊息Notifier1

（3）exp1_3
功能：按鈕顯示春聯文字：恭喜發財
成果圖片， 畫面設計， 程式設計， 專案檔案
按鈕（在label，顯示春聯文字：恭喜發財）
背景紅色，大小50點，直立（寬度60）

5.手機測試

測試：載入已經寫好的專案，然後把apk安裝在自己的手機測試
（4）exp8_2：鋼琴彈奏小星星
下載專案檔案

（5）exp13_3：走路記步器APP
下載專案檔案

（6）exp20_1：打地鼠
下載專案檔案

（7）exp20_3：拖曵乒乓球打水果
下載專案檔案

（8）exp20_7：照相與簡易編輯
下載專案檔案

步驟1：下載專案，解壓縮
步驟2：載入app inventor
步驟3：若要把apk下載到自己的手機執行，此處教兩個簡單方法
(方法1)：在電腦，點按在menu／Build／App(provide QRcode for apk)：會顯示一個條碼
然後用自己的手機的掃描條碼app去掃描，就可以在自己的手機安裝執行

(方法2)：用自己的手機瀏覽器到ai2.appinventor.mit.edu，登入自己的帳號，打開這個專案，
點按在menu／Build／App(save apk to my computer)
然後在手機會下載apk，然後安裝並執行

注意：若同時在電腦與手機，都登入ai2.appinventor.mit.edu的帳號，只要選擇按鈕選項：
continue with Both sessions
continue with multiple sessions
就可以在兩個平台都可以執行力

1.

（1）排版：layout有三種主要類別排版
水平排版：
垂直排版：
表格排版：

exp2_1

（2）計算加法，乘法，除法：exp2_1
功能：計算兩個數字的加法，乘法，除法
成果圖片， 畫面設計， 程式設計， 專案檔案
三個textbox
三個按鈕
第一個按鈕（加法）：textbox3 = textbox2 + textbox1
第二個按鈕（乘法）：宣告兩個變數，a1,a2，textbox3 = a1 * a2
第三個按鈕（除法）：宣告兩個變數，a1,a2，textbox3 = a1 / a2

exp2_2

（3）訊息元件Notifier-2：ShowMessageDialog：exp2_2
功能：彈出訊息方塊，顯示你所輸入的密碼
成果圖片， 畫面設計， 程式設計， 專案檔案
ShowAlert（）：在螢幕中間顯示文字三秒，然後消失
ShowMessageDialog（）：訊息方塊，標題，提示文字，按鈕

exp3_1

（1）exp3_1：判別大小
功能：判別兩個數字的大小
成果圖片， 畫面設計， 程式設計， 專案檔案
2個textbox
1個按鈕

exp3_2

（2）exp3_2：互動對話方塊：showChooseDialog
功能：輸入密碼，按了enter後，自動彈出showChooseDialog。
若是按『yes』顯示密碼，若是按『no』不顯示
成果圖片， 畫面設計， 程式設計， 專案檔案

元件：label
textbox
Notifier1

重點：如果判被按了yes或no的事件：
when：notifier1：afterChoosing

exp3_3

（3）exp3_3：購物車，計算總金額
功能：計算總金額
成果圖片， 畫面設計， 程式設計， 專案檔案
放置一個表格layout: tablearrangement：4x2
3個label
6個checkbox：蘋果30，芒果50，西瓜100，可樂15，啤酒25，紅酒150
一個按鈕：計算金額
最後顯示：總金額為：150 元

重點：price += 30 的寫法
price = price + 30

exp3_4

（4）exp3_4撲克牌，比較大小
功能：亂數顯示撲克牌，比較大小
成果圖片， 畫面設計， 程式設計， 專案檔案
下載撲克牌圖片
放置一個表格layout: tablearrangement：3x2
1個label
2個按鈕（設定picture)（要先上傳撲克牌圖片）

重點1：顯示撲克牌要用亂數random：p1, p2
重點2：判斷p1, p2的程式碼放置到函數(程序) procedure： show01
呼叫制定程序：call procedure show01

exp4_1

（1）exp4_1：
功能：輸入學號，查詢姓名
成果圖片， 畫面設計， 程式設計， 專案檔案
兩個List清單：學號num，姓名name
輸入學號，查詢他的姓名
一個水平配置horizontal layout（寬度填滿）
一個label
一個textbox（寬度填滿）
一個按鈕：查詢姓名（寬度填滿）
一個label（文字紅色）

重點1：建立list的清單項目值= make a list
重點2：如何取出某個index的項目值= select list item

（2）exp4_1：印出全部姓名
功能：印出List的全部項目（使用計數迴圈）
再加一個按鈕：印出全部姓名（寬度填滿）
一個label（文字紅色）

重點3：使用計數迴圈：for each i from i to 4 by 1

（3）exp4_1：印出全部姓名
功能：印出List的全部項目（使用List迴圈）
再加一個按鈕：印出全部姓名（寬度填滿）
一個label（文字紅色）

重點4：使用List迴圈：for each item in List

exp4_2

（4）exp4_2：ListPicker（類似vb.net的ListBox，comboBox）
功能：選擇產品的ListPicker，查詢價格，數量
成果圖片， 畫面設計， 程式設計， 專案檔案
一個水平配置horizontal layout（寬度填滿）
一個label：選擇產品：
一個ListPicker
一個水平配置horizontal layout（寬度填滿）
一個label：價格：
一個textbox
一個水平配置horizontal layout（寬度填滿）
一個label：數量：
一個textbox

重點1：如何設定Listpicker的起始項目元素：事件
When ListPicker beforPicking

重點2：如何設定Listpicker的起始項目元素
設定 ListPicker.Elements = List變數（name）
注意：不需要迴圈給定item，直接設定List陣列變數即可

重點3當點選Listpicker的事件
When ListPicker afterPicking

重點4：怎麼知道你所選擇的Listpicker項目，是第幾個？
ListPicker1.SelectIndex

exp5_1

（1）exp5_1：傳回值的程序（計算圓周長，圓形面積）
成果圖片， 畫面設計， 程式設計， 專案檔案
一個水平配置horizontal layout（寬度填滿）
一個label：輸入半徑：
一個滑桿slider
一個水平配置horizontal layout（寬度填滿）
一個label：圓周長 =
一個水平配置horizontal layout（寬度填滿）
一個label：圓面積 =
設定screen1的背景顏色為紫色

重點1：呼叫可以傳回值的程序 = to show1, x, result

重點2：滑桿移動後自動執行的事件程序 = when。silder。positionChanged
重點3：滑桿移動後事件程序，如何取出滑桿silder的值 = get.thumbPostion

重點4：若是有設定按鈕，如何在按鈕內取出滑桿silder的值 = silder1.thumbposition

exp5_2

（2）exp5_2：練習取出字串的部分長度
功能：按鈕1：在游標位置加入1，
按鈕←：在游標位置往前刪除1
成果圖片， 畫面設計， 程式設計， 專案檔案
一個水平配置horizontal layout（寬度填滿）
一個label：半徑：
一個textbox
一個水平配置horizontal layout（寬度填滿）
一個按鈕：1
一個按鈕：2
一個按鈕：3
一個按鈕：←

重點1：按了←，如何印出（字串的全部長度-1）
方法：使用文字text的一個函數：segment（部分節段）
segment.text = textbox1
segment.start = 1
segment.length = textbox1的長度length -1

重點2：如何計算某個文字（textbox1）的長度
方法：使用文字text的一個函數：length

exp5_3

（3）exp5_3：使用滑桿silder＋下拉選單spinner做出加減乘除
功能：滑桿選擇數字1 （加減乘除）滑桿選擇數字2 = 數字3
成果圖片， 畫面設計， 程式設計， 專案檔案
一個水平配置horizontal layout（寬度填滿）
一個label：數字1：
（修改fontsize文字大小30，min=1，max=50）
一個滑桿slider

一個水平配置horizontal layout（寬度填滿）
一個下拉選單spinner

一個水平配置horizontal layout（寬度填滿）
一個label：數字2：
（修改fontsize文字大小30，min=1，max=50）
一個滑桿slider

一個水平配置horizontal layout（寬度填滿）
一個label：結果＝：
（修改fontsize文字大小30）

重點1：滑桿移動後自動執行的事件程序 = when。silder。positionChanged
重點2：
方法一：滑桿移動後事件程序，如何取出滑桿silder的值 = get.thumbPostion
方法二：取出滑桿silder的值 = silder1.thumbposition

重點3：下拉選單spinner的事件程序 = when silder.afterSelecting

重點4：在有傳回值的程序，裡面若是要先做計算再傳回值，該如何處理？
步驟一：在procedure程序內，放置區域變數initial local z in
步驟二：在區域變數initial local z in 內，放置do result
步驟三：計算部分放在do...
結果部分，放在result...

重點5：怎麼知道你所選擇的下拉選單spinner，是第幾個？
下拉選單spinner.SelectIndex

exp6_1

（1）exp6_1：
功能：輸入你的出生年月日分秒，然後自動判別星座
成果圖片， 畫面設計， 程式設計， 專案檔案
一個水平配置horizontal layout（寬度填滿）
一個日期DatePicker元件（類似按鈕）（寬度填滿）
一個日期TimePicker元件（類似按鈕）（寬度填滿）

一個水平配置horizontal layout（寬度填滿）
一個label：生日是：
一個水平配置horizontal layout（寬度填滿）
一個label：星座是：

重點1：日期元件DatePicker設定後自動執行的事件程序 = when.DatePicker.AfterDataSet
取得年 = DatePicker.Year
取得月 = DatePicker.Month
取得日 = DatePicker.Day

重點2：時間元件TimePicker設定後自動執行的事件程序 = when.TimePicker.AfterDataSet
取得時 = TimePicker.Hour
取得分 = TimePicker.Minute

重點3：
1。水瓶座日期：1月21日~2月20日
2。雙魚座日期：2月21日~3月20日
3。牡羊座日期：3月21日~4月20日
4。金牛座日期：4月21日~5月20日
5。雙子座日期：5月21日~6月20日
6。巨蟹座日期：6月21日~7月20日
7。獅子座日期：7月21日~8月20日
8。處女座日期：8月21日~9月20日
9。天秤座日期：9月21日~10月20日
10。天蠍座日期：10月21日~11月20日
11。射手座日期：11月21日~12月20日
12。魔羯座日期：12月21日~1月20日

重點4：程式判別星座的思路
(A).如果日期d1<21，
則星座月份是該月m1-1
但是若是1月，則該月星座是12（13-1）
(B).如果日期d1>=21，
則星座月份是該月m1
（若是1月，則該月星座是1）

exp6_2

（2）exp6_2：計時器元件clock，開始計時，停止計時
功能：按鈕開始計時，停止計時，然後計算中間間距幾秒？
成果圖片， 畫面設計， 程式設計， 專案檔案
一個水平配置horizontal layout（寬度填滿）
一個按鈕：開始計時（寬度填滿）
一個按鈕：停止計時（寬度填滿）

一個水平配置horizontal layout（寬度填滿）
一個label：顯示時間：
一個水平配置horizontal layout（寬度填滿）
一個label：時間間距：

一個計時器元件clock（clock放在Sensors裡面）

重點1：如何啟動clock計時器
方法：set clock1.TimeEnabled = true

重點2：如何停止clock計時器
方法：set clock1.TimeEnabled = false

重點3：啟動clock後，如何顯示目前計時器
事件：when clock1.timer
顯示時間格式：call clock1.FormatTime（instant = call clock1。Now）

重點4：如何計算『啟動～停止』clock的時間間距
宣告兩個變數t1，t2
t1 = 啟動時的時間（call clock1.now）
t2 = 停止時的時間（call clock1.now）
計算間距 = call DurationToSeconds （duration = start：t1，end：t2）

exp6_3

（3）exp6_3：如何每隔3秒換一張圖片
功能：按鈕開始啟動，每隔3秒換一張圖片，若是停止，則不再換圖片
成果圖片， 畫面設計， 程式設計， 專案檔案
下載圖片

一個圖片image（上傳5個圖檔：1.GIF，2.GIF，3.GIF，4.GIF，5.GIF）
一個水平配置horizontal layout（寬度填滿）
一個按鈕：啟動（寬度填滿）
一個按鈕：停止（寬度填滿）

重點1：如何設定程序一開始的起始值：When clock1.initialize

重點2：如何啟動clock計時器，設定時間間隔interval
方法：set clock1.TimeEnabled = true
方法：set clock1.interval = 3000 (3秒）

重點3：設定list清單變數image（make list = 1.GIF，2.GIF，3.GIF，4.GIF，1.GIF）

重點4：3秒一到，就執行的程序：when clock1.timer

重點5：3秒一到，就換一張圖（根據圖片變數 = p1)
p1 = p1 + 1
if p1 > 5，則 p1 = 1
根據p1顯示image list的圖檔

設定圖檔 = select list from image， index = p1

1.

（1）方法：使用activity啟動器activeStarter，就可以（寄送郵件，打電話，開啟網頁，顯示地圖）
打開瀏覽器並到指定網頁：如果您想去的網站是「www.facebook.com」，請依循以
下設定：
█ Action: android.intent.action.VIEW
█ DataUri: http://www.facebook.com
█ call 啟動器activeStarter.啟動（call activeStarter1.activity）

exp7_1

（2）exp7_1：開啟始一個網頁到fb
功能：輸入http://www.facebook.com ，前往fb網頁
成果圖片， 畫面設計， 程式設計， 專案檔案
一個水平配置horizontal layout（寬度填滿）
一個label：網址
一個textbox
一個啟動器activeStarter
在connectivity通訊連接activeStarter裡面，選activeStarter啟動器

重點1：按鈕前往，如何開啟網頁
when button1.click
set activeStarter1.Action = android.intent.action.VIEW
set activeStarter1.DataUri = http://www.facebook.com
call activeStarter1.activity

注意：輸入網址（http://www.facebook.com ），必須用手機模擬器上的鍵盤輸入，不可用電腦的鍵盤輸入

exp7_2

（3）exp7_2：經度緯度，開啟google地圖
功能：輸入經度緯度，然後開啟google地圖
成果圖片， 畫面設計， 程式設計， 專案檔案
一個水平配置horizontal layout
一個label：經度
一個textbox

一個水平配置horizontal layout
一個label：緯度
一個textbox
（在textbox1的hint提示屬性，設定hint = 25.048048）
（在textbox2的hint提示屬性，設定hint = 121.516937）

一個水平配置horizontal layout
一個按鈕：開啟地圖

一個啟動器activeStarter
（在connectivity通訊連接activeStarter裡面，選activeStarter啟動器）

重點1：按鈕前往，如何開啟網頁
when button1.click
set activeStarter1.Action = android.intent.action.VIEW
set activeStarter1.DataUri = geo:25.048048, 121.516937
call activeStarter1.activity

重點1：臺北車站的經度，緯度 = 25.048048, 121.516937

重點2：activeStarter1.DataUri = geo:25.048048, 121.516937
前面必須有geo:

重點3：特別注意，在join的四個參數中，在經度緯度中間，要放置text = ,

exp7_3

（4）exp7_3：使用web瀏覽器元件（WebViewer）
功能：輸入http://yahoo.com.tw，顯示網頁
成果圖片， 畫面設計， 程式設計， 專案檔案
下載圖片檔案
A.有兩種web瀏覽器元件：
Web瀏覽器（WebViewer）
Web客戶端元件

B.本範例使用web瀏覽器元件（WebViewer）
一個水平配置horizontal layout（寬度填滿）
一個label：網址
一個textbox
一個按鈕：設定image

一個web瀏覽器元件（WebViewer）

重點1：設定web瀏覽器元件（WebViewer）的網址
方法：call webViewer1.gotoUrl =

注意：要輸入http://
例如：http://yahoo.com.tw

exp7_4

（5）exp7_4：使用Web客戶端元件（Web）
功能：Web客戶端元件（Web），可以取得網址的文字text（例如網站html code），或是文件（例如下載圖片）
範例：輸入http://www.tsu.edu.tw，取得該網頁的html程式碼
成果圖片， 畫面設計， 程式設計， 專案檔案
下載圖片檔案
一個水平配置horizontal layout（寬度填滿）
一個label：網址
一個textbox
一個按鈕：設定image

一個textbox（寬度長度都填滿，多行）
一個Web客戶端元件（Web）
使用通訊連接(connectivity)/Web客戶端元件（Web）

重點1：如何呼叫Web客戶端元件（Web）
先設定Web1.url = textbox
call web1.get

重點2：如何偵測網站主機的傳回值
when web1.GotText
if getResponsCode = 200
textbox2 = responseConteng
else
textbox2 = 錯誤：Http傳回值錯誤

exp7_5

（6）exp7_5：使用地圖元件（在maps裡面）
功能：按鈕A，B，顯示該地點的地圖
成果圖片， 畫面設計， 程式設計， 專案檔案
一個水平配置horizontal layout（寬度填滿）
一個按鈕：台北車站
一個按鈕：成功大學

一個地圖map（在maps地圖裡面，填滿）
一個標記marker（在maps地圖裡面）

設定地圖map的參數
打勾show compass 指南針
打勾show scale 刻度
打勾show zoom 縮放
zoom level縮放程度 = 17（1～20）（海洋：1-7）（城市：1-20）
（一般顯示街道zoom level = 17）

台北車站：25.048106, 121.516960
description：位於臺灣臺北市中正區，為臺鐵、台灣高鐵、臺北捷運的地下化鐵路車站，同時是與桃園機場捷運共站的車站
title：台北車站

成功大學：22.996774, 120.216681
description：國立成功大學（英語：National Cheng Kung University，縮寫為NCKU），簡稱成大、成功大學，是一所位於臺灣臺南市的國立大學，該校是教育部高教深耕計畫中參與全球連結全校型計畫的4所學校之一
title：成功大學

重點1：如何設定某個地點的地圖
先查到該地點的經度緯度，例如台北車站：25.048106, 121.516960
設定地圖
when button1.click
call map1 panto（經度latitude=25.048106，緯度longitude=121.516960，zoom縮放程度=17）

重點2：如何設定某個地點的marker標記與註解
顯示標記marker
call marker1.setLocation（經度latitude=25.048106，緯度longitude=121.516960）
設定標記marker的註解
set marker1.description = 位於臺灣臺北市中正區，為臺鐵、台灣高鐵、臺北捷運的地下化鐵路車站，同時是與桃園機場捷運共站的車站
設定標記marker的標題
set marker1.title = 台北車站
顯示標記資訊框
call marker1.showinfobox

測試：發現第一按鈕無法顯示，要多點幾次按鈕，才可以顯示詳細地圖

改善：設定：地圖map1的參數（地圖中心點CenterFromSting=25.048106, 121.516960，Zoomlever=17）
改善：設定：標記marker（經度=25.048106, 緯度=121.516960）

exp8_1

（1）exp8_1：播放音樂，播放音效
功能：播放音樂，音效
成果圖片， 畫面設計， 程式設計， 專案檔案
下載音樂檔案

有兩種聲音播放元件
A.長音樂：play（長聲音，可長可短）
B.音效：Sound（一次性）

一個水平配置horizontal layout（寬度填滿）
一個label：長音樂
一個按鈕：播放
一個按鈕：停止
一個按鈕：暫停

一個水平配置horizontal layout（寬度填滿）
一個按鈕：滑桿silder

一個水平配置horizontal layout（寬度填滿）
一個label：音效
一個按鈕：音效1
一個按鈕：音效2
一個按鈕：音效3

上傳music1.mp3
上傳music2.mp3
（注意：*.wma音樂格式，無法播放）
上傳sound1.wav
上傳sound2.wav
上傳sound3.wav

重點1：如何播放長音樂
set player1.source = music1.mp3
set player1.volume = 50 （0～100）
call player1.start
停止
call player1.stop

重點2：如何把音樂的音量與滑桿連結
when silder1.PositionChanged
set player1.volume = silder1.thumbPosition

重點3：如何播放音效
set sound1.source = sound1.wav
set sound1.volume = 50 （0～100）
call sound1.play

exp8_2

（2）exp8_2：鋼琴彈奏小星星
功能：可以彈琴
成果圖片， 畫面設計， 程式設計， 專案檔案
下載圖片音樂檔案
下載元件
琴譜：pianoPaper.png
圖片：1.png～7.png
mp3檔案：Do.mp3～Si.mp3

一個水平配置horizontal layout（寬度填滿）
一個image：

一個水平配置horizontal layout（寬度填滿）
七個按鈕：（image=1.png...）

七個Sound音效元件

重點1：設定Sound音效元件的source有兩個方法
方法1：在面板屬性的source設定（此方法，彈琴的聲音，不會delay）
方法1：在程式碼去設定：set sound1.source = Do.mp3（此方法，彈琴的聲音，會delay）

exp8_3

（3）exp8_3：照相（必須在手機實地測試）
功能：用手機照相，並可以存檔
成果圖片a， 成果圖片b， 畫面設計， 程式設計， 專案檔案
一個水平配置HorizontalArrangement
一個按鈕：照相
一個按鈕：存檔
一個按鈕：另存新檔

一個水平配置HorizontalArrangement
一個image（寬度50%，高度50%）
一個canvas（寬度50%，高度50%）

一個水平配置HorizontalArrangement
一個label：存檔位置

一個Notifier

重點1：如何照相
call Camera1.TakePicture

重點2：照相後如何在image/canvas顯示
when camera1.afterPicture
set image1.picture = get(image1)
set canvas1.backgroudImage = get(image1)

重點3：照相後，如何存檔
call canvas1.save
（注意：在image1的檔案無法存檔，只有在canvas上的圖片才能存檔）

重點4：照相後，如何『另存新檔』
call Notifier1.ShowTextDialog

When Notifier1.AfterTextInput
set filename = response
call canvas.SaveAs（fileName = get filename）

exp8_4

（4）exp8_4：攝影（必須在手機實地測試）
功能：在手機攝影，並存檔
成果圖片， 畫面設計， 程式設計， 專案檔案
一個水平配置HorizontalArrangement
一個按鈕：攝影
一個按鈕：存檔
一個按鈕：另存新檔
一個按鈕：播放
一個按鈕：停止

一個水平配置HorizontalArrangement
一個VideoPlayer（寬度100%，高度100%）

一個Camcorder

重點1：如何攝影
call Camcorder1.RecordVideo

重點2：攝影後如何在VideoPlayer顯示
when Camcorder1.afterRecording
set VideoPlayer1.source = get(clip)

重點3：如何播放
call VideoPlayer1.play

重點4：如何停止
call VideoPlayer1.stop

注意：VideoPlayer無法存檔

exp8_5

（5）exp8_5：錄音（必須在手機實地測試）
功能：在手機錄音，並播放
成果圖片， 畫面設計， 程式設計， 專案檔案
下載圖片
下載bgboard.png，play.png，stop.png，record.png，

Screen1：（title標題 = 錄音APP）
（ScreenOrientation螢幕方向 = landscape橫向 ）

一個垂直配置vertical layout
（image = bgboard.png，寬度填滿或500，高度200）
（水平配置AlignHorizontal = center）
（垂直配置AlignVertical = center）
一個label（字體大小20，高度50，寬度填滿或500，置中）

一個水平配置Horizontal layout
（寬度填滿，水平對齊=置中，背景顏色=None，透明）
一個按鈕：（背景圖片backgroundimage = stop.png）
一個按鈕：（背景圖片backgroundimage = record.png）
一個按鈕：（背景圖片backgroundimage = play.png）

一個錄音機recorder
一個音樂播放器play

測試結果：出現錯誤
Error 908: The Permission Process_outgoing_calls has been denied. please enableit in the settings app

原因：你的手機對於這個範例app有設定權限限定（使用存檔前會先詢問，這個詢問造成Error 908）
修改方法：手機→設定→應用程式權限管理→權限管理→找到exp8_5→讀寫存儲數據→改成『允許』

其它錯誤訊息：
Error:908 The permission WRITE_EXTERNAL_STORAGE has been denied. Please enable it in the setting app.
解決方法：http://www.e-happy.com.tw/indexforum.asp?bid=17954

其它錯誤訊息：
Illegal character in path at index 81: file:///storage/emulated/0/Android/data/edu.mit.appinventor.aicompanion3/files/My Documents/Pictures/app_inventor_1635666011017.png
Note: You will not see another error reported for 5 seconds.


注意1：另存新檔的位置：
在你手機本機資料夾的根目錄

注意2：存檔的位置：
在你手機本機資料夾的根目錄→my Documents→Pictures

重點1：如何開始錄音
call SoundRecorder.start

重點2：如何錄音結束後,把聲音檔案放入播放器
When SoundRecorder1.AfterSoundRecored
set Player1.source = get(sound)

exp8_6

（6）exp8_6：錄音講話後進行語音辨識（必須在手機實地測試）
功能：錄音講話後進行語音辨識
成果圖片， 畫面設計， 程式設計， 專案檔案
一個水平配置Horizontal layout
一個按鈕：錄音
一個按鈕：停止
一個按鈕：播放
一個按鈕：語音辨識

一個水平配置Horizontal layout
一個label：（文字紅色，粗體，20大小）

一個錄音機soundRecorder
一個語音識別器SpeechRecognizor
一個音樂播放器play

重點1：如何開始語音辨識
call SpeechRecognizor1.GetText

重點2：如何語音辨識結束後,把文字放入label
When SpeechRecognizor11.AfterGettingText
set label.text = get(result)

exp8_7

（7）exp8_7：把文字轉成語音唸出（必須在手機實地測試）
功能：把輸入的文字，轉成語音
成果圖片， 畫面設計， 程式設計， 專案檔案
一個水平配置Horizontal layout
一個label：輸入文字
一個textbox

一個水平配置Horizontal layout
一個按鈕：把文字轉成語音

一個文字轉換語音元件TextToSppech

重點1：如何設定文字轉換語音元件（似乎沒有辦法用中文發音）
when screen1.initial
設定語言：set TextToSpeech1.language = eng
設定國家：set TextToSpeech1.country = USA
設定語言速度：set TextToSpeech1.SpeechRate = （0～2）
設定音調：set TextToSpeech1.Pitch = （0～2）
call TextToSpeech1.Speak（message = Input your name first）

重點2：語言種類：
ces (Czech)
CZE

spa (Spanish)
ESP
USA

deu (German)
AUT
BEL
CHE
DEU
LIE
LUX

fra (French)
BEL
CAN
CHE
FRA
LUX

nld (Dutch)
BEL
NLD

ita (Italian)
CHE
ITA

pol (Polish)
POL

eng (English)
AUS
BEL
BWA
BLZ
CAN
GBR
HKG
IRL
IND
JAM
MHL
MLT
NAM
NZL
PHL
PAK
SGP
TTO
USA
VIR
ZAF
ZWE

參考：http://www.appinventor.tw/ai2_media_texttospeech 參考：https://sites.google.com/a/marist.com/michaudc/computationalmedia/app-inventor-language-codes

exp8_8

（8）exp8_8：發出簡訊（必須在手機實地測試）
功能：發出簡訊
成果圖片， 畫面設計， 程式設計， 專案檔案
一個水平配置Horizontal layout
一個label：輸入電話號碼
一個textbox
一個label：輸入簡訊
一個textbox（多行multiLine，高度60）

一個水平配置Horizontal layout
一個按鈕：發送簡訊

一個label：訊息

一個簡訊元件Texting

重點1：如何設定簡訊元件Texting
設定電話號碼
set Texting.phoneNumber =
設定簡訊內容
set Texting.Message =
發送簡訊
call Texting.SendMessage

1.

（1）繪圖三個元件
A.畫布元件canvas（在canvas上面可以畫直線，圓形，文字）
canvas元件：屬於Drawing and Animation類別元件

B.圖像精靈ImageSprite

C.球精靈ball
球精靈ball與圖像精靈ImageSprite，都是可以製作動畫與遊戲的元件，而且必須配合canvas元件

exp9_1

（2）exp9_1：畫圖實心圓形，兩條直線，畫文字，清除，可以設定顏色為藍色，紅色，存檔，另存新檔
成果圖片， 畫面設計， 程式設計， 專案檔案
一個水平捲軸layout：HorizontalScrollArrangement
一個按鈕：畫圓形
一個按鈕：畫直線
一個按鈕：畫文字
一個按鈕：清除
一個按鈕：藍色
一個按鈕：紅色
一個按鈕：存檔
一個按鈕：另存新檔

一個Label：訊息
一個畫布canvas

重點1：如何畫圓形
set canvas1.paincolor = 顏色
set canvas1.LineWidth = 5
call drawCircle（x,y,r,fill)

重點2：如何清除
canvas1.clear

重點3：如何存檔
set label = call canvas1.save

重點4：如何另存新檔
set label = call canvas1.SaveAs（filena=pic1.png）

注意1：存檔若是出現錯誤：
Error 908: The Permission Process_outgoing_calls has been denied. please enableit in the settings app

原因：你的手機對於這個範例app有設定權限限定（使用存檔前會先詢問，這個詢問造成Error 908）
修改方法：手機→設定→應用程式權限管理→權限管理→找到exp9_1→讀寫存儲數據→改成『允許』

注意2：另存新檔的位置：
在你手機本機資料夾的根目錄

注意3：存檔的位置：
在你手機本機資料夾的根目錄→my Documents→Pictures

exp9_2

（3）exp9_2：觸控塗鴉
功能：可以手繪線條，畫大圓，畫小圓，存檔
簡單版成果圖片， 簡單版畫面設計， 簡單版程式設計， 簡單版專案檔案

成果圖片， 畫面設計， 程式設計， 專案檔案
一個水平配置Horizontal layout
一個label：畫筆顏色
五個圓形按鈕：紅色，黃色，綠色，藍色，黑色
(按鈕：shape=oval，backgroundColor=red，寬度30，高度30）

一個水平配置Horizontal layout
兩個按鈕：大圓，小圓
一個label：訊息

一個畫布canvas

一個水平配置Horizontal layout
兩個按鈕：清除，存檔，
一個滑桿

exp9_4

（5）exp9_4：觸控甩動球滑行，碰到canvas邊界會自動反彈
功能：觸控甩動球滑行，碰到邊界會自動反彈
功能差異：
A.甩動：甩動後手放開，物體『會』繼續滑行
B.拖曵：拖曵後手放開，物體『不會』繼續滑行

程式碼差異：（事件）
A.甩動：在canvas1-->Flung（在畫布canvas1上甩動）
B.拖曵：在imagesprite1-->drag（拖住imagesprite1移動）


一顆球的彈跳 成果圖片， 畫面設計， 程式設計， 專案檔案

多顆球的彈跳 成果圖片， 畫面設計， 程式設計， 專案檔案
一個畫布canvas
一個球精靈ball

重點1：畫布內的球精靈觸觸控設定
when canvas1.Flung（Flung=甩，有加速度才能甩動）
設定球的觸控方向：
set ball1.heading = get(heading)
設定球的觸控速度：（= 觸控速度的2倍）
set ball1.speed = get(speed)*2

重點2：設定球精靈觸控移動後遇到畫布內的邊界反彈
when Ball1.EdgeReached
設定反彈
call ball.Bounce（edge = get（edge））

exp9_3

（4）exp9_3：觸控甩動鴿子上下左右移動
功能：觸控甩動鴿子上下左右移動
功能差異：
A.甩動：甩動後手放開，物體『會』繼續滑行
B.拖曵：拖曵後手放開，物體『不會』繼續滑行

程式碼差異：（事件）
A.甩動：在canvas1-->Flung（在畫布canvas1上甩動）
B.拖曵：在imagesprite1-->drag（拖住imagesprite1移動）

成果圖片， 畫面設計， 程式設計， 專案檔案
下載圖片
下載向右鴿子1
下載向左鴿子4（bird4是bird1的上下翻轉圖）
注意：gif動畫檔匯入app inventor後，無法動畫顯示，只有靜態顯示

一個畫布canvas
一個圖像精靈ImageSprite
（上傳bird1.gif，bird2.gif）

注意1：圖像精靈ImageSprite必須配合畫布canvas，才能發揮功能

重點1：畫布內的圖像精靈ImageSprite的觸控設定
when canvas1.Flung（因為觸控是在畫布上觸控）

重點2：圖像精靈ImageSprite的使用方法
set 圖像精靈ImageSprite.Picture = 背景圖
set 圖像精靈ImageSprite.Heading = 移動方向（0度向右，90度向上，180度向左，270度向下）
set 圖像精靈ImageSprite.Speed = 單位時間內移動的距離（速度）
注意3：圖像精靈ImageSprite，球精靈ball若是遇到canvas的邊界，會反彈（觸發EdgeReached事件，用Bound方法可以反彈）

重點3：如何判別使用者，有『滑動』的企圖
（若xvel（水平的移動速度） > 0.2臨界值，表示使用者要滑動）
if abs(xvel) > 0.2 則滑動
（因為，可能向右滑動，可能向左滑動）

重點4：向右，向左『滑動』時的設定內容
if xvel > 0
則ImageSprite.Heading = 0
ImageSprite.Picture = bird1.gif
else if xvel < 0
則ImageSprite.Heading = 180
ImageSprite.Picture = bird4.gif

重點5：進階設定：沿著觸控方向移動的設定內容
if xvel > 0
則ImageSprite.Heading = get(Heading)
ImageSprite.Picture = bird1.gif
else if xvel ＜ 0
則ImageSprite.Heading = get(Heading)
ImageSprite.Picture = bird4.gif

exp9_5

（6）exp9_5：拖曵物件移動（沒有甩動）
功能：拖曵狗，拖曵鴿子移動（沒有甩動）

功能差異：
A.甩動：甩動後手放開，物體『會』繼續滑行
B.拖曵：拖曵後手放開，物體『不會』繼續滑行

程式碼差異：（事件）
A.甩動：在canvas1-->Flung（在畫布canvas1上甩動）
B.拖曵：在imagesprite1-->drag（拖住imagesprite1移動）

簡單版成果圖片， 簡單版畫面設計， 簡單版程式設計， 簡單版專案檔案

成果圖片， 畫面設計， 程式設計， 專案檔案
下載圖片
一個畫布canvas
一個圖像精靈ImageSprite1（上傳bird4.gif）
一個圖像精靈ImageSprite2（上傳dog1.gif）

觀念1：拖曵物件事件 = when ImageSprite1.dragged

觀念2：拖曵物件的座標算法
ImageSprite1.x = ImageSprite1.x + （Current_X-previous_X）
ImageSprite1.y = ImageSprite1.y + （Current_Y-previous_Y）

觀念3：物件重疊時，放在最上層的判別方法(1)
ImageSprite1.Z = 1
ImageSprite2.Z = 2
那麼，ImageSprite2 會放在最上層
也就是，Z值最大者，會顯示在最上層

觀念4：物件重疊時，放在最上層的判別方法(2)
ImageSprite1.Z = 1
ImageSprite2.Z = 1
那麼，ImageSprite2 會放在最上層
也就是，Z值相同時，最後被設定者，會顯示在最上層

重點1：圖像精靈ImageSprite1的拖移設定
when ImageSprite1.dragged（因為拖移是針對圖像文件來移動）
set ImageSprite1.Z = 1
call ImageSprite1.MoveTo
（x = ImageSprite1.x + （Current_X-previous_X））
（y = ImageSprite1.y + （Current_Y-previous_Y））

重點2：但是會出現錯誤，當兩個圖像精靈ImageSprite1，ImageSprite2重疊在一起後，再拖曵，會兩個一起移動
改善方法：
當點按到ImageSprite1，設定 num = 1
當點按到ImageSprite2，設定 num = 2
拖曵時，要先判別目前的num 是1或是2？
若是num=1則拖曵ImageSprite1，
若是num=2則拖曵ImageSprite2，

重點3：修改圖像精靈ImageSprite1的拖移設定
when ImageSprite1.dragged（因為拖移是針對圖像文件來移動）
if num == 1
set ImageSprite1.Z = 1
call ImageSprite1.MoveTo
（x = ImageSprite1.x + （Current_X-previous_X））
（y = ImageSprite1.y + （Current_Y-previous_Y））

if num == 2
set ImageSprite2.Z = 1
call ImageSprite2.MoveTo
（x = ImageSprite2.x + （Current_X-previous_X））
（y = ImageSprite2.y + （Current_Y-previous_Y））

exp9_6

（7）exp9_6：打鴿子遊戲
功能：鴿子在上方左右來回飛，點按下方的紅色球，會垂直向上發射，碰到鴿子得到1分
成果圖片， 畫面設計， 程式設計， 專案檔案
下載圖片音效檔案
一個畫布canvas
一個圖像精靈ImageSprite1（上傳bird1.gif）
一個球精靈ball（紅色，半徑15，放在底部中央）
一個音效sound（上傳hit.wav，music.mp3)

重點1：點按球精靈ball後，向上發射，
When ball1.TocuDown
設定向上發射
set ball1.Heading = 90（向上為90度）
設定移動速度（快速）
set ball1.Speed = 80

重點2：球精靈向上發射，碰到上面邊界就消失，出現顯示在底部中央
When ball1.EdgeReached
移動到底部
call Ball1.MoveTo（x=142，y=380）
球靜止不動
set ball1.Speed = 0

重點3：圖像精靈ImageSprite1鴿子一開始就向右移動，
when screen1.initial
set ImageSprite1.Heading = 0（0度向右，90度向上，180度向左，270度向下）
set ImageSprite1.Speed = 20（速度）

重點4：圖像精靈ImageSprite1鴿子移動，碰到右邊邊界(edge=3)就向左反彈，碰到左邊邊界(edge=-3)就向右反彈，
when ImageSprite1.edgeReach
若是遇到右邊界，換成bird4.gif
否則遇到左邊界，換成bird1.gif
if edge = 3
set ImageSprite1.Picture = bird4.gif
else
set ImageSprite1.Picture = bird1.gif
設定反彈
call ImageSprite1.Bounce（edge = get（edge））

重點5：如果圖像精靈ImageSprite1鴿子，撞到球精靈ball，表示得分
initial global score = 0
when ImageSprite1.CollideWith
如果另外一個元件是球，就加分score = score +1
if other = ball1（到ball屬性裡面最後一個元件）
score = score +1
把畫布上剛剛寫的文字清除
call canvas1.clear
顯示最新的分數
call canvas1.drawText（text = 分數：score）（x=30，y=30）
播放音效
set sound1.source = hit.wav
call sound1.play

重點6：八個邊界的edge值
上 = 1
下 = -1

右上 = 2
左下 = -2

右 = 3
左 = -3

右下 = 4
左上 = -4

重點7：程式一開始就播放遊戲音樂music.mp3
when screen1.initial
set ImageSprite1.Heading = 0（0度向右，90度向上，180度向左，270度向下）
set ImageSprite1.Speed = 20（速度）
播放音效
set sound1.source = music.mp3
call sound1.play

（8）期中考1：打鴿子遊戲
功能：甩球，打到鴿子得1分（音效)，10分過關（音樂）
球出界，重來射擊位置
成果圖片， 成果影片， 畫面設計， 程式設計
下載素材

（9）期中考2：過關遊戲
功能：甩球，通過阻礙到達對面得分
球出界，重來射擊位置
阻礙可以被拖曵
成果圖片， 成果影片， 畫面設計， 程式設計a， 程式設計b
下載素材

1.

（1）app inventor無法直接播放gif動畫，若是顯示動畫，要自行撰寫程式

exp10_1

（2）exp10_1：顯示直升機飛行的動畫，並可以觸控移動
成果圖片， 畫面設計， 程式設計， 專案檔案
下載圖像
下載圖像:airplane1.gif～airplane5.gif
一個畫布canvas
一個圖像精靈ImageSprite1（上傳airplane1.gif～airplane5.gif）
一個計時器元件clock（clock放在Sensors裡面）

重點1：程式一開始就啟動clock計時器，每隔0.1秒播放一次動畫圖片
when screen1.initial
set clock1.TimeEnabled = true
set clock1.interval = 100

重點2：0.1秒時間到了執行任務事件
global num=1
when clock1 timer
num = num + 1
if num =6 then num =1
set ImageSprite1.picture = airplane + num + .gif

重點3：畫布內的圖像精靈ImageSprite直升機的觸控設定（觸控後滑行）
when canvas1.Flung（因為觸控是在畫布上觸控）
設定直升機的觸控方向：
set ImageSprite1.heading = get(heading)
設定球的觸控速度：（= 觸控速度的2倍）
set ImageSprite1.speed = get(speed)

重點4：直升機觸控後滑行，遇到邊界反彈
when ImageSprite1.EdgeReached
設定反彈
call ImageSprite1.Bounce（edge = get（edge））

重點5：拖曵直升機到任意地點
when ImageSprite1.dragged
call ImageSprite1.MoveTo
（x = ImageSprite1.x + （Current_X-previous_X））
（y = ImageSprite1.y + （Current_Y-previous_Y））

1.

電話，簡訊，聯絡人等元件，都在社交應用(social)工具箱裡面

exp11_1

（1）exp11_1：從手機聯絡人清單，選出某人，然後撥打電話
成果圖片， 畫面設計， 程式設計， 專案檔案
一個水平配置Horizontal layout
一個聯絡人清單contactPicker（選擇聯絡人）

一個水平配置Horizontal layout
一個label：結果
一個textbox

一個按鈕：撥打電話
一個電話撥號器phoneCall

重點1：如何叫出手機的聯絡人清單，然後選擇一個人，把電話顯示在textbox1，把姓名顯示在label1
when contactPicker1.AfterPicking
set label1 = contactPicker1.contactName
set texbox1 = contactPicker1.phoneNumber

重點2：如何撥打電話（根據在textbox1的電話號碼）
when button1.click
set contactPicker1.phoneNumber = texbox1
call contactPicker1.MakePhoneCall

exp11_2

（2）exp11_2：從手機聯絡人清單，選出某人，然後發送簡訊
成果圖片， 畫面設計， 程式設計， 專案檔案
下載圖片
下載圖片：bg2.jpg，btblue.jpg
upload上傳bg2.jpg，btblue.jpg

screen1的背景圖片backgroundImage = bg2.jpg
一個水平配置Horizontal layout
一個聯絡人清單contactPicker（text=選擇聯絡人，image=btblue.jpg，color=黃色，字體粗體）

一個水平配置Horizontal layout
一個textbox（hint：聯絡人姓名）

一個水平配置Horizontal layout
一個textbox（hint：聯絡人電話號碼）

一個水平配置Horizontal layout
一個textbox（hint：輸入你的簡訊內容）

一個水平配置Horizontal layout
一個按鈕：發送簡訊（image=btblue.jpg，color=黃色，字體粗體）

一個簡訊texting

重點1：如何叫出手機的聯絡人清單，然後選擇一個人，把姓名顯示在textbox1，電話顯示在textbox2
when contactPicker1.AfterPicking
set texbox1 = contactPicker1.contactName
set texbox2 = contactPicker1.phoneNumber

重點2：如何發送簡訊（根據在textbox1的電話號碼）
when button1.click
if textbox3簡訊 不等於 空白文字
則
set texting1.contactName = texbox1
set texting1.phoneNumber = texbox2
call texting1.sendMessage
把textbox都清空
set texbox1 = ""
set texbox2 = ""
set texbox3 = ""

exp11_3

（3）exp11_3：分享照片給朋友的line，微信wechat，，email....等社群媒體
目的：從手機相簿中挑選一張照片，加上文字，然後存檔，或分享給朋友
成果圖片， 畫面設計， 程式設計， 專案檔案
下載圖片
下載圖片：bg2.jpg，btblue.jpg
upload上傳bg2.jpg，btblue.jpg

screen1的背景圖片backgroundImage = bg2.jpg（文字置中對齊，title=分享圖片）
一個圖片選擇器imagePicker（在媒體media裡面，text=選擇圖片，image=btblue.jpg，color=黃色，字體粗體）
一個按鈕：加上文字（image=btblue.jpg，color=黃色，字體粗體）
一個按鈕：清除文字（image=btblue.jpg，color=黃色，字體粗體）
一個textbox（hint：加上心情文字）
一個label：文字顏色
一個按鈕：背景紅色（shape=oval，寬度30，高度30）
一個按鈕：背景黃色（shape=oval，寬度30，高度30）
一個按鈕：背景綠色（shape=oval，寬度30，高度30）
一個按鈕：背景藍色（shape=oval，寬度30，高度30）
一個按鈕：背景黑色（shape=oval，寬度30，高度30）
一個按鈕：分享（image=btblue.jpg，color=黃色，字體粗體）

一個畫布canvas（置中，寬度250，高度350）
一個分享sharing（在social社交裡面）

重點1：如何呼叫挑選圖片功能
when imagePicker1.click
call imagePicker1.open

重點1：相簿中挑選圖片後，在畫布顯示圖片
when imagePicker1.AfterPicking
set canvas1.backgroundimage = imagePicker1.selection（注意：不是imagePicker1.image）

重點2：在畫布顯示加上的文字
when button6.click
set canvas1.fontSize = 16
call canvas1.drawText（text = textbox1，x=70，y=50）

重點3：設定在畫布顯示加上文字的顏色
when button1.click
set canvas1.paintColor = red

重點4：如何分享給（line，微信，email...）
when button8.click
call sharing1.sharefile（file=call canvas1.saveAs （filename = mypic））

exp11_4

（4）exp11_4：發送email
成果圖片， 畫面設計， 程式設計， 專案檔案
screen1（title=發送email）
一個水平配置horizontal layout
一個label：Email
一個textboxEmail

一個水平配置horizontal layout
一個label：主旨
一個textboxSubject

一個水平配置horizontal layout
一個label：內容
一個textboxContent（多行multiLine，填滿）

一個按鈕：發送Email
一個啟動器startActivity

重點1：如何發送email
when button1.click
設定Email的參數
set activeStarter.Action = android.intent.action.VIEW
set activeStarter.DataUri = joint(mailto: + textbox1Email + ?subject= + textboxSubject + &body= + textboxContent
call activeStarter1.StartActivity

注意1：發送email的三個參數
mailto: + textbox1Email
+
?subject= + textboxSubject
+
&body= + textboxContent

exp12_1

（1）exp12_1：多頁面的處理
功能：從首頁，選某一個按鈕，開啟該物體的頁面顯示圖形，再回到首頁
成果圖片a， 成果圖片b， 成果圖片c，
畫面設計a， 畫面設計b， 畫面設計c，
程式設計a， 程式設計b， 程式設計c，
專案檔案
下載圖片
下載圖片：直升機，鴿子，狗

一個垂直配置vertical layout
一個按鈕：直升機
一個水平配置Horizontal layout
一個按鈕：鴿子
一個水平配置Horizontal layout
一個按鈕：狗
一個水平配置Horizontal layout
一個按鈕：結束（shape=oval，寬度30，高度30）

新增畫面add Screen2
一個按鈕：首頁
一個image（picture=直升機）
新增畫面add Screen3
一個按鈕：首頁
一個image（picture=直升機）
新增畫面add Screen4
一個按鈕：首頁
一個image（picture=直升機）

重點1：從Screen1如何切換畫面到Screen2
when button1.click
open another Screen（ScreenName = Screen2）
注意：Screen的S必須大寫（小寫會出現錯誤）

重點2：從Screen2如何切換畫面到Screen1（首頁）
when button1.click
close Screen
注意：把Screen2 關閉，就會顯示之前的Screen1

重點3：如何關閉本程式app
close Application

注意：Screnn的操作事件與方法，都放在control控制項工具箱裡面

exp12_2

（2）exp12_2：多頁面之間傳遞變數，交換資料
功能：在首頁輸入數字1，數字2，在不同頁面計算加法，乘法
成果圖片a， 成果圖片b， 成果圖片c，
畫面設計a， 畫面設計b， 畫面設計c，
程式設計a， 程式設計b， 程式設計c，
專案檔案
screen1
一個垂直配置vertical layout
一個textbox（hint：輸入數字1）
一個textbox（hint：輸入數字2）
一個按鈕：計算加法
一個按鈕：計算乘法
一個按鈕：結束

新增screen2
一個按鈕：首頁
一個label（兩數相加=）
一個textbox

新增screen3
一個按鈕：首頁
一個label（兩數相乘=）
一個textbox

重點1：如何從Screen1切換畫面到Screen2，傳遞兩個變數a1,a2
open another Screen with start value（ScreenName=Screen2，startValue=Make List（textbox1,textbox2））
注意：只能夠傳遞一個變數，所以若是多變數，就必須都放在list裡面

重點2：在Screen2裡面，如何接收傳來的變數（get start Value）
initial global a3 = empty list
set a3 = get startValue

重點3：在Screen2裡面，如何接收傳來的list進行加法
textbox1 = select list item（list=a3,index=1) + select list item（list=a3,index=2)

注意：Screnn的操作事件與方法，都放在control控制項工具箱裡面

exp12_3

（3）exp12_3：多頁面應用：台北動物園導覽app
功能：從首頁，選取特色動物類被，到子頁面去瀏覽介紹
成果圖片a， 成果圖片b， 成果圖片c，
畫面設計a， 畫面設計b， 畫面設計c，
程式設計a， 程式設計b， 程式設計c，
專案檔案
下載台北動物園圖片

screen1（title = 台北動物園導覽app）
一個水平配置horizontal layout
一個圖片image（Taipei_Zoo_logo.png）

一個垂直配置vertical layout（置中對齊）
一個水平配置horizontal layout（置中對齊，背景顏色深綠色，寬度85%）
一個圖片image（ZooLogo.png，寬度30高度30）
一個label（動物園分區清單，文字顏色白色）

一個Listview清單顯示器（背景顏色白色，文字顏色黑色深綠色，寬度85%，高度填滿）
ElementFromString清單項目：
臺灣動物區,兒童動物區,亞洲熱帶雨林區,沙漠動物區,澳洲動物區,非洲動物區,溫帶動物區,鳥園區,教育中心,企鵝館,無尾熊館,兩棲爬蟲動物館,昆蟲館,大貓熊館,生命驛站


新增screen2（title = 臺灣動物區）
一個水平配置horizontal layout（高度200，向右對齊，image=01_FormosanAnimal.jpg）
一個按鈕（oval，紅色背景，寬度30高度30）

一個垂直捲軸配置VerticalScrolllayout（置中對齊）
一個label（寬度85%，高度120）
臺灣動物區以臺灣原生動物與棲息環境為展示重點，佈置模擬動物原生棲地之生態環境，讓動物表現如野外般自然的生活習性，引導觀賞者更正確地認識本土野生動物。臺灣位處於亞熱帶，雨量充沛、氣候溫暖，擁有各種地形景觀，因而孕育了豐富龐雜的生物資源。

一個圖片image（map1.png，寬度85%）

121.5805931 24.9985962 http://www.zoo.taipei.gov.tw/ct.asp?xItem=73533649&ctNode=71658&mp=104031


新增screen3（title = 兒童動物區）
一個水平配置horizontal layout（高度200，向右對齊，image=01_FormosanAnimal.jpg）
一個按鈕（oval，紅色背景，寬度30高度30）

一個垂直捲軸配置VerticalScrolllayout（置中對齊）
一個label（寬度85%，高度120）
兒童動物園全區以埤塘、水田等各類濕地與郊野生態造景為環境意象，串聯農村動物、經濟動物、寵物、入侵之外來種動物等單元主題，點出人類與動物間的密切關係，提供學童、家長與老師一處共同體驗與學習的空間。

一個圖片image（map2.png，寬度85%）

121.5819383 24.9989718 http://www.zoo.taipei.gov.tw/ct.asp?xItem=73534648&ctNode=71660&mp=104031


重點1：選擇Listview清單顯示器項目一後，如何切換到Screen2
when ListView1.AfterPicking
判別若是第一個清單項目被點選
if ListView1.selectionIndex = 1
open another Screen（ScreenName = Screen2）
elseif ListView1.selectionIndex = 2
open another Screen（ScreenName = Screen3）
注意：Screen的S必須大寫（小寫會出現錯誤）

重點2：從Screen2如何切換畫面到Screen1（首頁）
when button1.click
close Screen

exp13_1

（1）exp13_1：搖晃手機就換下一張圖片
方法：使用加速度感測元件AccelerometerSensor的Shaking事件
成果圖片， 畫面設計， 程式設計， 專案檔案
下載圖片
下載圖片
一個圖片image（p1.png，寬度高度填滿）
一個加速度感測元件AccelerometerSensor（在sensor感測器裡面）
一個sound音效元件（上傳音效shake.mp3)

重點1：啟動AccelerometerSensor的Shaking事件
initial global num=1
make a list pic（p1.png, p2.png, p3.png, p4.png, p5.png）

when AccelerometerSensor1.Shaking
num = num + 1
if num==6 then num=1
set image1.picture = select item from list(list = pic，index=num）
設定音效
set sound1.source = shake.mp3
call sound1.play

重點2：程式一開始就播放遊戲音樂music.mp3
when screen1.initial
播放音效
set sound1.source = music.mp3
call sound1.play

exp13_2

（2）exp13_2：比賽誰在30秒內搖晃手機次數最多
方法：使用加速度感測元件AccelerometerSensor的Shaking事件
成果圖片， 畫面設計， 程式設計， 專案檔案
下載圖片

一個水平配置horizontal layout（背景圖片background.png，寬度填滿，高度240）
一個水平配置horizontal layout（置中對齊）
一個紅色按鈕：30秒搖晃開始（字體28）

一個垂直捲軸配置VerticalScrolllayout
一個label（時間：，字體28）
一個label（次數：，字體28）

一個加速度感測元件AccelerometerSensor（在sensor感測器裡面）
一個sound音效元件（上傳音效shake.mp3，music.mp3，counting.mp3)
一個notifier
一個計時器clock

重點1：程式一開始就播放遊戲音樂music.mp3
when screen1.initial
播放音效
set sound1.source = music.mp3
call sound1.play
計時器clock停止
set clock1.TimerEnabled = false

重點2：按鈕後，啟動計時器倒數30秒
set clock1.TimerInterval = 1000 （1秒倒數一次）
set clock1.TimerEnabled = true
set global seconds = 30 （倒數秒變數）
set global num = 0 （搖晃次數變數）

重點3：經過1秒後，計時器要做的工作
when clock1.timer
倒數秒變數-1
global seconds = global seconds - 1
如果秒變數=0則停止倒數，停止搖晃記錄
if global seconds = 0
則
set clock1.TimerEnabled = false
播放停止音效
set sound1.source = counting.mp3
call sound1.play
學生面前秒數
label1 = 時間： seconds
學生notifier訊息
call showalert（30秒到了，比賽結束）

重點4：啟動AccelerometerSensor的Shaking事件
when AccelerometerSensor1.Shaking
判別，若是現在計時器開啟中，才進行以下記錄變數
if clock1.TimerEnabled == true
num = num + 1
label2 = 次數： num
設定音效
set sound1.source = shake.mp3
call sound1.play

exp13_3

（3）exp13_3：走路記步器APP
方法：使用sensor感測器/裡面的pedometer計步器
（簡單版）： 成果圖片， 畫面設計， 程式設計， 專案檔案，
（複雜版）： 成果圖片， 畫面設計， 程式設計， 專案檔案

下載圖片：下載圖片
設定screen1（title=走路記步器APP，Theme=Device Default）
一個水平配置horizontal layout
一個按鈕：設定步伐長度
一個按鈕：清除步數數據

一個水平配置horizontal layout（置中）
一個label（0，字體100，粗體）
一個label（步數，字體14）

一個水平配置horizontal layout（置中對齊）
一個image（icon_distance.png，寬度填滿）
一個image（icon_feet.png，寬度填滿）
一個image（icon_walk.png，寬度填滿）

一個水平配置horizontal layout（置中）
一個label（0，字體30，粗體，寬度填滿）
一個label（0，字體30，粗體，寬度填滿）
一個label（0.5，字體30，粗體，寬度填滿）

一個水平配置horizontal layout（置中）
一個label（總距離(公尺)，字體30，粗體，寬度填滿）
一個label（累計步數，字體30，粗體，寬度填滿）
一個label（一步長(公尺)，字體30，粗體，寬度填滿）

一個水平配置horizontal layout（置中）
一個按鈕：開始（oval，背景藍色#3849ffff，文字白色，粗體，寬度高度75）
一個按鈕：停止（oval，背景藍色#3849ffff，文字白色，粗體，寬度高度75）
一個按鈕：暫停（oval，背景藍色#3849ffff，文字白色，粗體，寬度高度75）
一個按鈕：繼續（oval，背景藍色#3849ffff，文字白色，粗體，寬度高度75）

一個pedometer計步器（在sensor感測器裡面）
一個notifier

重點1：程式一開始就播放遊戲音樂music.mp3
when screen1.initial
set buttonStart.visible = true
set buttonstop.visible = false
set buttonpause.visible = false
set buttoncontinue.visible = false

重點2：按鈕（設定步伐長度），彈出對話方塊，輸入步伐長度
按鈕1事件
when button1.click
call Notifier1.ShowTextDialog（message=請輸入你的步伐長度（公尺））（title=步伐長度）

輸入方塊輸入後
When Notifier1.AfterTextInput
set global stepdistance = response
設定pedometer計步器的步伐長度
set pedometer1.StrideLength = response
set labelstepdistance = response

重點3：按鈕（開始），開始記錄步數
when buttonStart.click
啟動計步器
call pedoMeter1.start
在很多label顯示從0開始
set label1num = 0
set label3all = 0
set label4num = 0
set label5stepdistance = global stepdistance
下方4個按鈕，顯示暫停，停止
set Button3start.visible = false
set Button6stop.visible = true
set Button2pause.visible = true
set Button3continue.visible = false

重點4：按鈕（暫停）的事件
when Button2pause.click
停止計步器
call pedoMeter1.stop
下方4個按鈕，顯示繼續，開始
set Button3start.visible = true
set Button6stop.visible = false
set Button2pause.visible = false
set Button3continue.visible = true

重點5：按鈕（繼續）的事件
when Button3continue.click
啟動計步器
call pedoMeter1.start
下方4個按鈕，顯示暫停，停止
set Button3start.visible = false
set Button6stop.visible = true
set Button2pause.visible = true
set Button3continue.visible = false

重點6：按鈕（停止）的事件
when Button6stop.click
停止計步器
call pedoMeter1.stop
call pedoMeter1.Reset
下方4個按鈕，顯示開始
set Button3start.visible = true
set Button6stop.visible = false
set Button2pause.visible = false
set Button3continue.visible = false

重點7：當走路時，步伐感測器的的事件
when pedoMeter1.walkStep
記錄步數
set global num = get(walksteps)
記錄走路距離
set label3all = get(distance)
顯示最新步數
set label1num = get(walksteps)
set label4num = get(walksteps)

exp13_4

（4）exp13_4：指南針
方法：使用sensor感測器/裡面的oritationSensor方向感測器
原理1：oritationSensor方向感測器會傳回三個參數
z軸方向旋轉角度 = azimuth參數
x軸方向旋轉角度 = pitch參數
y軸方向旋轉角度 = roll參數
magnitude = 手機傾斜度（0～1）

當手機平放，手機朝北，azimuth角度=0（若是手機朝東，azimuth角度=90）
當手機平放，magnitude = 0（手機直立傾斜90度，magnitude = 1）

原理2：oritationChanged事件：當手機方位改變時，就會觸發這個事件

原理3：指南針的關鍵，是要使用oritationSensor的azimuth參數
成果圖片， 畫面設計， 程式設計a， 程式設計b， 專案檔案
下載圖片
設定screen1（title=指南針，Theme=Dark，背景顏色=藍色，AboutScreen=本指南針由john開發，於2020年2月4日完成。）

一個垂直捲軸配置VerticalScrolllayout（水平與垂直置中）
一個label（0，字體20，粗體，文字黃色）
一個垂直捲軸配置VerticalScrolllayout（水平與垂直置中，image=bg_line.png，寬度50，）
一個畫布canvas（寬度320，高度320）
一個圖像精靈ImageSprite（上傳compass.png，寬度填滿，x=10，y=10）

一個水平配置horizontal layout（置中對齊）
一個image（placeholder_w.png）

一個oritationSensor方向感測器

重點1：當手機方向轉動時就會驅動的事件oritationChanged
when oritationSensor1.oritationChanged

重點2：如何讓imageSprite圖像精靈（羅盤）跟著手機轉動而轉動
set oritationSensor1.Heading = get（azimuth）
原理：圖像精靈的方向（heading），跟著azimuth而變化

重點3：如何顯示中文方位（例如東北方）
if get（azimuth）> 30 and get（azimuth） ＜ 60
則 set label1 = 東北 + get（azimuth） + °

if get（azimuth）> 60 and get（azimuth） ＜ 120
則 set label1 = 東 + get（azimuth） + °

if get（azimuth）> 120 and get（azimuth） ＜ 150
則 set label1 = 東南 + get（azimuth） + °

if get（azimuth）> 150 and get（azimuth） ＜　210
則 set label1 = 南 + get（azimuth） + °

exp13_5

（5）exp13_5：顯示當下手機GPS位置的地圖
功能：無論走到什麼地方，都可以顯示目前位置的地圖
成果圖片， 畫面設計， 程式設計， 專案檔案
設定screen1（title=即時GPS地圖，Theme=Device Default）
一個表格配置tablelayout（2 X 2）
一個label（經度）
一個textbox
一個label（經度）
一個textbox

一個地圖map（在maps地圖裡面，填滿）
一個標記marker（在maps地圖裡面）

一個位置感測器LocationSensor（在Sensor裡面）

注意：測試這一題，你必須打開你手機的GPS定位（到你手機的setup設定裡面去修改）

設定地圖map的參數
打勾show compass 指南針
打勾show scale 刻度
打勾show zoom 縮放
zoom level縮放程度 = 17（1～20）（海洋：1-7）（城市：1-20）
（一般顯示街道zoom level = 17）

重點1：當程式一打開，就開啟方位感測器，並顯示目前位置（可能要等個15秒，才能完整顯示）
when screen1.initial
set LocationSensor1.Enabled = True
call showmap程序（x=LocationSensor1.latitude， y=LocationSensor1.longitude）

重點2：顯示當下位置地圖與經度緯度的程序showmap(x, y)
to showmap(x, y)
顯示經度緯度textbox
set textbox1 = x
set textbox2 = x
畫出目前xy地圖
call map1.panto（經度latitude=x，緯度longitude= y，zoom程度=17）
畫出標記marker
call marker.setLocation（經度latitude=x，緯度longitude= y）

重點3：當手機移動位置時，如何顯示目前最新位置（可能要等個15秒，才能完整顯示）
when LocationSensor1.LocationChanged(latitude,longitude)
call showmap程序（latitude，longitude）

注意：要等個10～15秒，才會偵測到當下位置的最新GPS經度緯度

1.

觀念：在app inventor裡面有五種資料庫方法：
方法一：使用微資料庫tinyDB（在Storage資料儲存裡面）
方法二：讀取外部csv檔案，當作資料庫
方法三：讀取外部json檔案，當作資料庫（可以是遠端網頁json，或是在專案內json）
方法四：讀取外部xml檔案，當作資料庫（可以是遠端網頁xml，或是在專案內xml）
方法五：讀取後台主機的資料庫（例如：php+mySQL）

2.

（1）微資料庫tinyDB是一種不可見元件
微資料庫tinyDB，沒有屬性，沒有事件，只有方法
不是關聯式資料庫，而是一種鍵值儲存的NoSQL資料庫（沒有SQL語言的資料庫）
所以，不需要先定義儲存什麼樣資料，就可以馬上開始儲存治療
例如：
鍵（key，標籤tag）為Name，值（value）為john
用『鍵key』，取出『值value』

微資料庫tinyDB的方法：
ClearAll()：刪除全部tag
ClearTag()：刪除指定tag
GetTags()：取得全部tag
StoreValue(text tag, value)：將value以tag儲存
GetValue(text tag)：取得tag的value

exp14_1

（2）exp14_1：儲存同學的姓名與電話
功能：可以重複輸入很多人的姓名與電話，然後可以經由姓名來查詢他的電話
成果圖片， 畫面設計， 程式設計， 專案檔案
一個垂直捲軸配置VerticalScrolllayout
一個textbox（hint=輸入姓名）
一個textbox（hint=輸入手機號碼）
一個按鈕（儲存）
一個label（空字串）

一個垂直捲軸配置VerticalScrolllayout（背景顏色為粉紅色）
一個textbox（hint=輸入查詢的姓名）
一個按鈕（查詢）
一個label（text=電話是，文字顏色紅色）

重點1：儲存到tinyDB的事件，與方法
when button1.click
call tinyDB1.StoreValue（tag=textbox1，value=textbox2）
儲存後把textbox1，textbox2清空
set textbox1 = ""
set textbox2 = ""
顯示已經儲存
set label1 = 已經儲存

重點2：查詢某位姓名同學的電話的tinyDB方法
when button1.click
set label2 = textbox3 + 的電話是 + call tinyDB1.GetValue（tag=textbox3）
>

exp14_2

（3）exp14_2：把exp13_2的搖晃最高數據記錄儲存下來
exp13_2：比賽誰在30秒內搖晃手機次數最多
成果圖片， 畫面設計， 程式設計， 專案檔案

下載exp13_2，另外儲存成exp14_2
修改這個app的名稱：exp14_2（這個名稱是安裝在手機桌面上面的名稱）

在最下面增加一個label（最高記錄：，字體30，粗體，rename修改名稱為label3max）
新增一個tinyDB（在storage裡面）

重點1：30秒倒數時間截止，若是目前次數大於tinyDB的最高次數max，就儲存
when clock1.timer
global seconds = global seconds - 1
if global seconds = 0
則
set clock1.TimerEnabled = false
set sound1.source = counting.mp3
call sound1.play
label1 = 時間： seconds
call showalert（30秒到了，比賽結束）
## 在這邊新增 新的##################################
if get(num) > call tinyDB1.GetValue（tag=max）
則
儲存到tinyDB的max鍵key（max），value（num）
call tinyDB1.StoreValue（tag=max，value=get（num））
顯示最高紀錄
set label3max = 最高紀錄為 + get（num）

重點2：程式一開始，就顯示目前的最高紀錄（若沒有就顯示0）
hen screen1.initial
set sound1.source = music.mp3
call sound1.play
set clock1.TimerEnabled = false
## 在這邊新增 新的#################
set label3max = 最高紀錄為 + tinyDB1.GetValue（tag=max）（else valueTagNotThere = 0）

exp14_3

（4）exp14_3：儲存多參數資料（姓名，中文，英文，數學成績）
功能：可以重複輸入很多人的姓名與中文，英文，數學成績，然後可以經由姓名來查詢他的成績

觀念：
原始：『鍵key-值value』，只有單參數的儲存（例如：max = 25）
多參數的方法：app inventor可以使用『CSV 行轉清單』，將csv字串，轉成清單list
例如：csv字串 = name,chi,eng,math
指令：list from csv row（text=）（在list清單裡面）
成果圖片， 畫面設計， 程式設計， 專案檔案
一個垂直捲軸配置VerticalScrolllayout
一個textboxname（hint=姓名）
一個textboxchi（hint=中文）
一個textboxeng（hint=英文）
一個textboxmath（hint=數學）
一個按鈕（儲存）

一個垂直捲軸配置VerticalScrolllayout（背景顏色=pink）
一個textbox5name（hint=輸入姓名）
一個按鈕（查詢）
一個labelresult（結果）

一個notifier訊息
一個資料庫TinyDB

重點1：如何儲存4個參數到tinyDB資料庫（key-value）
when button1.click
set global key = textbox1name
set global value = textbox2chi + textbox3eng + textbox4math
call TinyDB1.StoreValue（tag=get(key)，valueToStore=get(value)）
顯示訊息
call notifier1.ShowAlert（notice=已經儲存）

重點2：查詢時，如何經由輸入的姓名name，查到中文英文數學的成績
when button2.click
initial local list = create empty list
initial local a1 = 0
initial local a2 = 0
initial local a3 = 0
把鍵key=textbox5name的值，經由csv轉換text變成list，傳給list
（csv = 以,隔開每個參數）
set list = list from csv row（text = call TinyDB.GetValue（tag= textbox5name））
設定中文分數
set a1 = select list item（list=get(list)，index=1）
set a2 = select list item（list=get(list)，index=2）
set a3 = select list item（list=get(list)，index=3）
顯示中文，英文，數學分數（換行：\n）
set labelresult = textboxname + 的中文分數是 + a1 + ，\n英文分數是 + a2 + ，\n數學分數是 + a3

exp15_1

（1）exp15_1：存取檔案
功能：按鈕讀取雲端檔案，顯示news.txt內容，儲存按鈕，儲存到自己手機目錄
成果圖片， 畫面設計， 程式設計， 專案檔案
下載news.txt檔案
設定screen1（title=存取檔案，Theme=Device Default）
一個水平配置horizontal layout
一個按鈕：讀取檔案（button1read）
一個按鈕：儲存檔案（button1save）

一個水平配置horizontal layout
一個textbox（多行multiLine，寬度高度填滿）

一個File文件管理器（在Storage存儲器裡面）
一個Notifier訊息

上傳news.txt

注意：要在自己的手機測試

重點1：如何讀取檔案news.txt（讀取已經上傳到MIT雲端，同一目錄底下的news.txt）
when button1read.click
call File1.ReadFrom（FileName=//news.txt）
（注意：//表示是讀取MIT雲端主機同一目錄的檔案）
（注意：/表示是讀取自己手機SD卡根目錄，的news.txt）
（注意：/Download/news.txt表示是讀取自己手機SD卡的Download目錄裡面的news.txt）

重點2：讀取檔案後，顯示檔案內容到textbox（注意，textbox要多行multiLine）
when File1.GetText（text）
set textbox1 = get(text)

重點3：修改textbox內容，儲存到手機SD卡根目錄的file1.txt
when button3save.click
call File1.SaveFile（text=textbox1，FileName=/file1.txt）
（注意：//表示是讀取MIT雲端主機同一目錄的檔案）
（注意：/表示是讀取自己手機SD卡根目錄，的news.txt）
（注意：/Download/news.txt表示是讀取自己手機SD卡的Download目錄裡面的news.txt）

重點4：儲存後，顯示訊息（已經儲存）
when File1.AfterFileSaved（filename）
call Notifier1.showAlert（notice = filename + 已經儲存）

exp16_1

（1）exp16_1：讀取外部csv檔案（一筆記錄（三個參數））
功能：按鈕讀取，可以讀進同一專案裡面的csv檔案，顯示姓名，email，手機
成果圖片， 畫面設計， 程式設計， 專案檔案
下載csv檔案
李小華,mike@gamil.com,0956123456

下載stu1.csv

設定screen1（title=讀取CSV檔案，Theme=Device Default）
一個水平配置horizontal layout
一個按鈕：讀CSV檔案（button1read）

一個水平配置horizontal layout
一個label（姓名）
一個textbox（寬度填滿）

一個水平配置horizontal layout
一個label（Email）
一個textbox（寬度填滿）

一個水平配置horizontal layout
一個label（手機）
一個textbox（寬度填滿）

一個File文件管理器（在Storage存儲器裡面）

上傳stu1.csv
只有一筆資料
（李小華,mike@gamil.com,0956123456）

注意：要在自己的手機測試

重點1：如何讀取CSV檔案stu1.csv（讀取已經上傳到MIT雲端，同一目錄底下的stu1.csv）
when button1read.click
call File1.ReadFrom（FileName=//stu1.csv）
（注意：//表示是讀取MIT雲端主機同一目錄的檔案）
（注意：/表示是讀取自己手機SD卡根目錄，的news.txt）
（注意：/Download/news.txt表示是讀取自己手機SD卡的Download目錄裡面的news.txt）

重點2：讀取CSV檔案後，拆解字串變成清單list的三個顯示參數
when File1.GetText（text）
initial local list to（create empty list）
in
set list = list from csv row (text = get(text))
set textbox1 = select list item (list = get(list)，index = 1）
set textbox2 = select list item (list = get(list)，index = 2）
set textbox3 = select list item (list = get(list)，index = 3）

exp16_2

（2）exp16_2：讀取外部csv檔案顯示個人資料（四筆記錄（三個參數））
功能：程式一開始就讀取專案裡面的csv檔案，顯示學生姓名在下拉選單，點按選單後，顯示該學生email，電話
成果圖片， 畫面設計， 程式設計， 專案檔案
下載csv檔案

李小華,mike@gamil.com,0956123456
王大安,tom@yahoo.com.tw,0977987654
趙意意,john@gamil.com,0912852963
馬如惠,jane@yahoo.com,0966321478

下載stu2.csv

設定screen1（title=讀取CSV檔案，多筆記錄，Theme=Device Default）
一個水平配置horizontal layout
一個按鈕：讀取CSV檔案，多筆記錄（button1read）

一個水平配置horizontal layout
一個下拉選單spinner（寬度填滿）

一個水平配置horizontal layout
一個label（姓名）
一個textbox（寬度填滿）

一個水平配置horizontal layout
一個label（Email）
一個textbox（寬度填滿）

一個水平配置horizontal layout
一個label（手機）
一個textbox（寬度填滿）

一個File文件管理器（在Storage存儲器裡面）

上傳stu2.csv

注意：要在自己的手機測試

重點1：如何讀取CSV檔案stu1.csv（讀取已經上傳到MIT雲端，同一目錄底下的stu1.csv）
when button1read.click
call File1.ReadFrom（FileName=//stu2.csv）

重點2：讀取CSV檔案後，拆解二維字串陣列（x，y）變成三個清單list（listname,listemail,listphone）
initial global listall = create empty list
initial global listname = create empty list
initial global listemail = create empty list
initial global listphone = create empty list

when File1.GetText（text）
in
set listall = list from csv table (text = get(text))
for each i from 1 to 4（總共4筆記錄）
取出二維清單陣列listall到listname
add items to list（list=listname）
（item = select list item
（list = select list item（list= listall，index=i）
（index = 1）
取出二維清單陣列listall到listemail
add items to list（list=listemail）
（item = select list item
（list = select list item（list= listall，index=i）
（index = 2）
取出二維清單陣列listall到listphone
add items to list（list=listemail）
（item = select list item
（list = select list item（list= listall，index=i）
（index = 3）

把姓名清單儲存到下拉選單spinner
set spinner.element = listname

重點3：選擇下拉選單spinner後，顯示該人的email，手機
when spinner1.AfterSelecting
set textbox1 = select list item (list = get(listname)，index = spinner1.selectionIndex）
set textbox2 = select list item (list = get(listemail)，index = spinner1.selectionIndex）
set textbox3 = select list item (list = get(listphone)，index = spinner1.selectionIndex）

exp16_3

（3）exp16_3：讀取外部csv檔案顯示地圖（四筆記錄（三個參數））
功能：程式一開始就讀取專案裡面的csv檔案，顯示學校名稱在下拉選單，點按選單後，顯示該學校地圖
成果圖片， 畫面設計， 程式設計， 專案檔案
下載csv檔案
台灣大學,25.017447,121.539822
成功大學,22.996774,120.216681
清華大學,24.798869,120.996720
交通大學,24.787364,120.999674

下載stu3.csv

設定screen1（title=讀取csv檔案顯示地圖，Theme=Device Default）
一個水平配置horizontal layout
一個按鈕：讀取CSV檔案，多筆記錄（button1read）

一個水平配置horizontal layout（水平垂直置中，高度50）
一個下拉選單spinner（寬度填滿）

一個地圖map（地圖中心點CenterFromSting=25.017447,121.539822，Zoomlever=17）
一個標記marker（經度=25.017447, 緯度=121.539822）

一個File文件管理器（在Storage存儲器裡面）

上傳stu3.csv

注意：要在自己的手機測試

重點1：程式一開始就讀取CSV檔案stu3.csv（讀取已經上傳到MIT雲端，同一目錄底下的stu1.csv）
when screen1.initial
call File1.ReadFrom（FileName=//stu3.csv）

重點2：讀取CSV檔案後，拆解二維字串陣列，變成三個清單list（listname,listx,listy）
initial global listall = create empty list
initial global listname = create empty list
initial global listx = create empty list
initial global listy = create empty list

when File1.GetText（text）
in
set listall = list from csv table (text = get(text))
for each i from 1 to 4（總共4筆記錄）
取出二維清單陣列listall到listname
add items to list（list=listname）
（item = select list item
（list = select list item（list= listall，index=i）
（index = 1）
取出二維清單陣列listall到listx
add items to list（list=listx）
（item = select list item
（list = select list item（list= listall，index=i）
（index = 2）
取出二維清單陣列listall到listy
add items to list（list=listy）
（item = select list item
（list = select list item（list= listall，index=i）
（index = 3）
把姓名清單儲存到下拉選單spinner
set spinner.element = listname

重點3：選擇下拉選單spinner後，顯示學校的地圖
when spinner1.AfterSelecting
地圖
call map1.panto（經度latitude=select list item（list= listx，index = spinner1.selectionIndex），
（緯度longitude=select list item（list= listy，index = spinner1.selectionIndex），
（zoom程度=17）
標記marker
call marker1.setLation = （=select list item（list= listx，index = spinner1.selectionIndex），
（緯度longitude=select list item（list= listy，index = spinner1.selectionIndex），
（zoom程度=17）
標題title
call marker1.title（=select list item（list= listname，index = spinner1.selectionIndex）
描述Description
call marker1.Description（=select list item（list= listname，index = spinner1.selectionIndex）
加上邊框
call marker1.showInfoBox

1.

（1）產生QRCode
方法：使用 Google Chart API 來產生一張QR碼圖片

Google Chart API使用網址URL快速線上QR Code 二維條碼製作
範例一：編碼資料為文字型態。
http://chart.apis.google.com/chart?cht=qr&chs=200x200&chl=%E5%A4%A7%E6%98%8E
修改網址後面的相關參數
http://chart.apis.google.com/chart?cht=qr&chs=200x200&chl=大家好
cht=qr（代表是QR Code二維條碼）
chs=200x200（圖片大小）
chl=大明（編碼資料）
以HTML語法顯示條碼圖片的語法
<img src="http://chart.apis.google.com/chart?cht=qr&chs=200x200&chl=%E5%A4%A7%E6%98%8E" />

顯示英文網址的條碼
語法:http://chart.apis.google.com/chart?cht=qr&chs=200x200&chl=網址
範例: http://chart.apis.google.com/chart?cht=qr&chs=200x200&chl=http://www.tsu.edu.tw
顯示中文字的條碼
*語法: http://chart.apis.google.com/chart?cht=qr&chs=200x200&chl=中文字
*注意: 有些QRcode掃描器，中文字需要 UTF8 的 URL 編碼文字，例如空格就要寫成 %20。因此若沒經過編碼的話，中文可能會無法順利的產生。
所以，我們可用線上url encode 轉換工具 , 或是寫javascript 的 encodeURIComponent() 函式來幫我們做編碼的動作
*範例: http://chart.apis.google.com/chart?cht=qr&chs=200x200&chl=大家好

傳到手機寫簡訊的條碼
*語法:http://chart.apis.google.com/chart?cht=qr&chs=200x200&chl=SMSTO:手機號碼:簡訊
*範例: http://chart.apis.google.com/chart?cht=qr&chs=200x200&chl=SMSTO:0937123456:生日快樂

傳到手機顯示地圖位置的條碼
*語法:http://chart.apis.google.com/chart?cht=qr&chs=200x200&chl=geo:緯度, 經度
*範例: http://chart.apis.google.com/chart?cht=qr&chs=200x200&chl=geo:25.033408, 121.564099

傳到手機寄email的條碼
*語法: http://chart.apis.google.com/chart?cht=qr&chs=200x200&chl=MATMSG:TO:電子郵件;SUB:主旨;BODY:內容;;
*範例: http://chart.apis.google.com/chart?cht=qr&chs=200x200&chl=MATMSG:TO:abca@tsu.edu.tw;SUB:你好;BODY:大家好;

傳到手機打電話的條碼
*語法: http://chart.apis.google.com/chart?cht=qr&chs=200x200&chl=TEL:電話號碼
*範例: http://chart.apis.google.com/chart?cht=qr&chs=200x200&chl=TEL:0930123456

（2）產生中文字的RCode的注意事項
A.注意: 有些QRcode掃描器，中文字需要 UTF8 的 URL 編碼文字，例如空格就要寫成 %20。因此若沒經過編碼的話，中文可能會無法順利的產生。
B.解決方法1：中文字先經過線上url encode 轉換工具，把中文字轉成UTF8 的 URL 編碼文字
C.解決方法2：寫javascript 的 encodeURIComponent() 函式來做編碼的動作
D.解決方法3：在App Inventor若是使用image產生QRCode條碼圖片，就容易有中文字變成亂碼無法顯示的問題
在在App Inventor裡面，可以使用WebView的方法顯示QRCode條碼圖，就不會有中文字無法顯示的問題了

exp17_1

（3）exp17_1：用WebView的方法產生QRCode條碼圖
功能：產生QRCode條碼圖（文字，網址，簡訊內容，地圖，簡訊電話，打電話）
成果圖片， 畫面設計， 程式設計， 專案檔案
下載圖片
下載icon_qrmake.png
上傳icon_qrmake.png

設定screen1（title=產生QRCode條碼圖，Theme=Device Default，icon=icon_qrmake.png）
（這個icon=icon_qrmake.png，乃是安裝後，在手機桌面的icon）
（這個title，乃是安裝後，在手機桌面的title）
一個垂直配置Vertical layout（置中）
一個textbox（hint=文字，網址，簡訊內容，經度,緯度）
一個textbox（hint=email，簡訊電話，打電話）

一個水平配置horizontal layout（置中）
一個按鈕：產生一般文字QRcode（寬度填滿）
一個按鈕：顯示網址的條碼（寬度填滿）

一個水平配置horizontal layout（置中）
一個按鈕：寫簡訊的條碼（寬度填滿）
一個按鈕：顯示地圖的條碼（寬度填滿）

一個水平配置horizontal layout（置中）
一個按鈕：寄email的條碼（寬度填滿）
一個按鈕：打電話的條碼（寬度填滿）

一個web瀏覽器元件（WebViewer）

重點1：產生一般位置條碼
範例:http://chart.apis.google.com/chart?cht=qr&chs=200x200&chl=生日快樂

global googleChart = http://chart.apis.google.com/chart?cht=qr&chs=200x200&chl=
wehn button1commonText.click
googleChart = googleChart + textbox1
call webviewer1.HomeUrl = googleChart

重點2：顯示網址的條碼
範例: http://chart.apis.google.com/chart?cht=qr&chs=200x200&chl=http://www.tsu.edu.tw
global googleChart = http://chart.apis.google.com/chart?cht=qr&chs=200x200&chl=
wehn button1commonText.click
googleChart = googleChart + http: + textbox1
call webviewer1.HomeUrl = googleChart

重點3：寫簡訊的條碼
範例: http://chart.apis.google.com/chart?cht=qr&chs=200x200&chl=SMSTO:0930123456:生日快樂
global googleChart = http://chart.apis.google.com/chart?cht=qr&chs=200x200&chl=
wehn button1commonText.click
googleChart = googleChart + SMSTO: + textbox2 + : + textbox1
call webviewer1.HomeUrl = googleChart

重點4：顯示地圖的條碼
範例: http://chart.apis.google.com/chart?cht=qr&chs=200x200&chl=GEO:22.996774, 120.216681
global googleChart = http://chart.apis.google.com/chart?cht=qr&chs=200x200&chl=
wehn button1commonText.click
googleChart = googleChart + GEO: + textbox1
call webviewer1.HomeUrl = googleChart

重點5：寄email的條碼
範例: http://chart.apis.google.com/chart?cht=qr&chs=200x200&chl=MATMSG:TO:abc@gmail.com;SUB:我是小華;BODY:祝福你生日快樂;
global googleChart = http://chart.apis.google.com/chart?cht=qr&chs=200x200&chl=
wehn button1commonText.click
googleChart = googleChart + MATMSG:TO: + textbox2 + ;SUB: + + ;BODY: + textbox1
call webviewer1.HomeUrl = googleChart

（注意，因為只有兩個textbox，所以，就沒有輸入郵件的標題主旨（sub），就以空白取代

重點6：打電話的條碼
範例: http://chart.apis.google.com/chart?cht=qr&chs=200x200&chl=TEL:0930123456
global googleChart = http://chart.apis.google.com/chart?cht=qr&chs=200x200&chl=
wehn button1commonText.click
googleChart = googleChart + TEL: + textbox2
call webviewer1.HomeUrl = googleChart

成功大學：22.996774, 120.216681

exp17_2

（3）exp17_2：掃描QRCode，判斷是何種功能，然後進行動作
功能：掃描QRCode，判斷是何種功能（文字，網址，簡訊內容，地圖，簡訊電話，打電話），然後進行動作
成果圖片， 畫面設計， 程式設計a， 程式設計b， 專案檔案
下載圖片
下載icon_qrscan.png，再上傳icon_qrscan.png

設定screen1（title=掃描QRCode並動作，Theme=Device Default，icon=icon_qrscan.png）
（這個icon=icon_qrscan.png，乃是安裝後，在手機桌面的icon）
（這個title，乃是安裝後，在手機桌面的title）
一個水平配置horizontal layout（置中）
一個按鈕：掃描QRCode（寬度填滿）

一個垂直配置Vertical layout（置中）
一個按鈕：顯示一般文字（背景pink，Button2Commontext，visible=false不可見）
一個按鈕：顯示網頁（背景pink，Button3web，visible=false不可見）
一個按鈕：傳送簡訊（背景pink，Button2txting，visible=false不可見）
一個按鈕：顯示地圖（背景pink，Button2maps，visible=false不可見）
一個按鈕：傳送email（背景pink，Button2email，visible=false不可見）
一個按鈕：撥打電話（背景pink，Button2phone，visible=false不可見）

一個maps地圖（填滿，visible=false不可見）
一個marker標記（visible=false不可見）

一個notifiter訊息
一個撥打電話phoneCall
一個發送簡訊txting

一個掃描器barCodeScanner
一個一個啟動器activeStarter

重點1：如何啟動QRcode掃描器
when button1.click
set barCodeScanner1.useExternalScanner = false
call barCodeScanner1.DoScan

注意1：很多人會出現錯誤：error 1501 your device does not have a scanning application installed
原因：因為預設會使用外部QRCode掃描器，但是app找不到
解決方向：使用手機內部原始QRcode掃描器即可
解決方法：set barCodeScanner1.useExternalScanner = false

initialize global codetxt = ""
重點2：啟動QRcode掃描器後，如何傳回掃描的文字
when barCodeScanner1.AfterScan（result）
set codetxt = get(result)

重點2：啟動QRcode掃描器後，如何傳回掃描的文字，並判別是屬於哪一種類型QRcode（發簡訊，打電話，地圖，網頁，純文字...）
when barCodeScanner1.AfterScan（result）
set codetxt = get(result)
如果文字內含有http://或是https://，那麼就表示這是網頁網址
if Contains（text=codetxt ，piece=http://）== true
則把按鈕（顯示網頁）啟用：set buttonWeb.visible = true

如果文字內含有SMSTO:，那麼就表示這是發簡訊
if Contains（text=codetxt ，piece=SMSTO:）== true
則把按鈕（發送簡訊）啟用：set buttonTxting.visible = true

如果文字內含有GEO:，那麼就表示這是顯示地圖
if Contains（text=codetxt ，piece=GEO:）== true
則把按鈕（顯示地圖）啟用：set buttonMaps.visible = true

如果文字內含有MATMSG:，那麼就表示這是發送emial
if Contains（text=codetxt ，piece=MATMSG:）== true
則把按鈕（發送emial）啟用：set buttonEmail.visible = true

如果文字內含有TEL:，那麼就表示這是打電話
if Contains（text=codetxt ，piece=TEL:）== true
則把按鈕（打電話）啟用：set buttonPhone.visible = true

其它剩下情況（純文字）
else
則把按鈕（純文字）啟用：set labelCommonTEXT.visible = true
endif

注意1：讀取QRCode傳回的文字，是指chl=『.....』此處的文字
範例: http://chart.apis.google.com/chart?cht=qr&chs=200x200&chl=SMSTO:0930123456:生日快樂
codetxt = SMSTO:0930123456:生日快樂

重點3：按鈕（顯示純文字）的動作
when buttonCommonText.click
set labelCommonText = get(codetxt)
set labelCommonText.visible = true

重點4：按鈕（顯示網頁）的動作
when buttonWeb.click
set activeStarter.Action = android.intent.action.VIEW
set activeStarter.DataUri = www.tsu.edu.tw
call activeStarter1.StartActivity

重點5：按鈕（發送簡訊）的動作
範例: http://chart.apis.google.com/chart?cht=qr&chs=200x200&chl=SMSTO:0930123456:生日快樂
when buttonTxting.click
宣告局部變數
initialize local list = create empty list
把掃描的文字，以『:』分隔成list，index=2是手機，index=3是訊息
set list = split(text= get(codetxt)，at=:）
設定簡訊的電話
set txting.phoneNumber（component=txting1，to=select list item（list=get(list)，index=2）
設定簡訊的內容
set txting.Message（component=txting1，to=select list item（list=get(list)，index=3）
發送簡訊
call txting1.SendMessage

重點6：按鈕（顯示地圖）的動作
範例: http://chart.apis.google.com/chart?cht=qr&chs=200x200&chl=GEO:22.996774, 120.216681
when buttonMap.click
顯示地圖，標記
set Map1.visible = true
set marker1.visible = true
把傳回變數從第5個字開始截取（傳回文字chl=GEO:22.996774, 120.216681）
（從第5個字開始截取 = 22.996774, 120.216681）
initialize local temp =segment（text=get(codetxt)，start=5，length=length（get(codetxt)）-5
再把截取後文字，以,分割成清單陣列list（22.996774, 120.216681）
initialize local list = create empty list
set list = split（text=get(codetxt)，at=,）
畫出目前地圖
call map1.panto（經度latitude=select list item（list=get(list)，index=1），緯度longitude= select list item（list=get(list)，index=2），zoom程度=17）
畫出標記marker
call marker.setLocation（經度latitude=select list item（list=get(list)，index=1），緯度longitude= select list item（list=get(list)，index=2））

重點6：按鈕（發送Email）的動作
範例: http://chart.apis.google.com/chart?cht=qr&chs=200x200&chl=MATMSG:TO:abc@gmail.com;SUB:我是小華;BODY:祝福你生日快樂;
when buttonEmail.click
宣告局部變數
initialize local list = create empty list
把掃描的文字，以『:』分隔成list，index=3是email，index=4是主旨標題，index=5是內容
set list = split(text= get(codetxt)，at=:）
設定Email的參數
set activeStarter.Action = android.intent.action.VIEW
set activeStarter.DataUri = joint(mailto: + replace（alltext=select list item(list=get(list), index=3)，segment=;SUB，replacement=） + ?subject= + 標題 + &body= + select list item(list=get(list), index=5)
call activeStarter1.StartActivity

重點7：按鈕（打電話）的動作
範例: http://chart.apis.google.com/chart?cht=qr&chs=200x200&chl=TEL:0930123456
when buttonPhone.click
刪除傳回值（TEL:0930123456）的『TEL:』
set PhoneCall1.PhoneNumber = replace（all text=get(codetxt)，segment=TEL:，replacement=）
call PhoneCall1.MakePhoneCall

exp18_1

觀念：在app inventor裡面有五種資料庫方法
方法一：使用微資料庫tinyDB（在Storage資料儲存裡面）
方法二：讀取外部csv檔案，當作資料庫
方法三：讀取外部json檔案，當作資料庫（可以是遠端網頁json，或是是同一專案內json）
方法四：讀取外部xml檔案，當作資料庫（可以是遠端網頁xml，或是同一專案內xml）
方法五：讀取後台主機的資料庫（例如：php+mySQL）

觀念：讀取json，XML檔案有兩種方式
方法一：使用Web客戶端元件（Web），讀取遠端網頁json，XML檔案
方法二：使用Web＋文件管理器（File）（在Storage裡面），讀取同一專案內json，XML檔案

注意：若要建立json，不要用筆記本note建立，否則格式會讓app inventor讀入時發生錯誤
可以用VS code 或是Dreamweaver建立，存檔時要選擇json格式類別

exp18_1

（1）exp18_1：讀取公司的第一位員工資料
功能：使用Web客戶端元件（Web），讀取遠端網頁XML檔案顯示第一位員工的姓名，住址，電話
檔案：xml檔案http://acupun.site/lecture/jquery_phoneGap/xml/personnel.xml
成果圖片， 畫面設計， 程式設計， 專案檔案
下載xml
觀念：讀取json，XML結構的兩種程式控制技巧
方法一：使用look up in pairs直接拆解xml，或json等巢狀資料結構：
例如：= look up in pairs（key=關鍵字串tag，list=清單資料陣列)
list 經常= select list item（list=清單陣列，index=第幾個）
方法二：先宣告很多list，然後用迴圈for each item，直接把每個item的清單資料值，設定給list：
例如：for each in list（item）（list = get(list_all)）
do
add item in list（list = get(list_姓名)）（item = look up in paris（key=name，pairs=item））

設定screen1（title=讀取XML檔案，Theme=Device Default）
一個水平配置horizontal layout
一個按鈕：讀取xml檔案

一個labelname：姓名
一個labeladdress：地址
一個labeltel：電話

一個Web客戶端元件（Web）

重點1：讀取這個xml檔案http://acupun.site/lecture/jquery_phoneGap/xml/personnel.xml

重點1：如何呼叫Web客戶端元件（Web）
先設定Web1.url = textbox
call web1.get

重點2：如何偵測網站主機的傳回值
when web1.GotText
if getResponsCode = 200
textbox2 = responseConteng
else
textbox2 = 錯誤：Http傳回值錯誤

重點3：xml檔案讀取完畢的事件
when web1.GotText

重點4：如何把xml檔案轉換成清單list(讀取公司的第一位員工資料)
initialize global all
initialize global mycompany
initialize global personnel
when web1.GotText
if getResponsCode = 200
set all = call web1.xmlTextDecode(xmltext= get(responseConteng))
set mycompany = look up in pairs(key=mycompany， pairs=get(all) ）
set personnel = look up in pairs(key=personnel， pairs=get(mycompany) ）
set Labe姓名 = look up in pairs(key=name， pairs=get(select list item (list=personnel，index=1) ）
set Labe地址 = look up in pairs(key=address， pairs=get(select list item (list=personnel，index=1) ）
set Labe電話 = look up in pairs(key=tel， pairs=get(select list item (list=personnel，index=1) ）

注意：一定要三層（all-mycompany-personnel）逐漸拆解，才不會出現錯誤

exp18_2

（2）exp18_2：讀取網路上的統一發票號碼
功能：使用Web客戶端元件（Web），讀取遠端網頁XML檔案顯示最近一期的統一發票號碼
檔案：統一發票xml檔案：http://invoice.etax.nat.gov.tw/invoice.xml
成果圖片， 畫面設計， 程式設計a， 程式設計b， 專案檔案
下載xml
設定screen1（title=讀取網路上的統一發票號碼，Theme=Device Default）
一個水平配置horizontal layout
一個按鈕：讀取統一發票xml

一個labeltitle：title
一個label月份：最近一期月份
一個label特別獎：特別獎
一個label特獎：特獎
一個label頭獎：頭獎
一個label增開六獎：增開六獎

一個Web客戶端元件（Web）

重點1：讀取統一發票xml檔案：http://invoice.etax.nat.gov.tw/invoice.xml

重點1：如何呼叫Web客戶端元件（Web）
先設定Web1.url = textbox
call web1.get

重點2：如何偵測網站主機的傳回值
when web1.GotText
if getResponsCode = 200
textbox2 = responseConteng
else
textbox2 = 錯誤：Http傳回值錯誤

重點3：xml檔案讀取完畢的事件
when web1.GotText

重點4：如何把xml檔案轉換成清單list
initialize global all
initialize global mycompany
initialize global personnel
when web1.GotText
if getResponsCode = 200
set all = call web1.xmlTextDecode(xmltext= get(responseConteng))
set rss = look up in pairs(key=rss， pairs=get(all) ）
set channel = look up in pairs(key=channel， pairs=get(rss) ）
set title = look up in pairs(key=title， pairs=get(channel) ）
set item = look up in pairs(key=item， pairs=get(channel) ）
set item_title = look up in pairs(key=title， pairs=select list item(list=get(item),index=1第一筆 ）
set description = look up in pairs(key=description， pairs=select list item(list=get(item),index=1第一筆 ）
set temp = replacement(alltext=get(description)，segment=<p>，replacement= ）
set temp = replacement(alltext=get(description)，segment=</p>，replacement= ）
set description_p = split（text=temp, at=,）
set Labetitle = title
set label月份 = item_title
set label特別獎 = select list item (list=description_p，index=1) ）
set label特獎 = select list item (list=description_p，index=2) ）
set label頭獎 = select list item (list=description_p，index=3) ）
set label頭獎 = select list item (list=description_p，index=4) ）
set label增開六獎 = select list item (list=description_p，index=5) ）

exp18_3

（3）exp18_3：讀取網路上的json檔案(公司員工資料)
功能：使用Web客戶端元件（Web），讀取遠端網頁json檔案，顯示員工姓名在下拉選單，查詢選單可以查詢住址，電話
檔案：公司員工資料：https://acupun.site/lecture/jquery_phoneGap/json/personnel02.json
成果圖片， 畫面設計， 程式設計， 專案檔案
下載json
觀念：讀取json，XML結構的兩種程式控制技巧
方法一：使用look up in pairs直接拆解xml，或json等巢狀資料結構：
例如：= look up in pairs（key=關鍵字串tag，list=清單資料陣列)
list 經常= select list item（list=清單陣列，index=第幾個）
方法二：先宣告很多list，然後用迴圈for each item，直接把每個item的清單資料值，設定給list：
例如：for each in list（item）（list = get(list_all)）
do
add item in list（list = get(list_姓名)）（item = look up in paris（key=name，pairs=item））

設定screen1（title=讀取網路上的json檔案，Theme=Device Default）
一個水平配置horizontal layout
一個按鈕：讀取json檔案
一個labeljson：json

一個水平配置horizontal layout
一個label姓名：姓名

一個水平配置horizontal layout
一個label地址：地址

一個水平配置horizontal layout
一個label電話：電話

一個水平配置horizontal layout
一個下拉選單spinner

一個Web客戶端元件（Web）

重點1：檔案：公司員工資料：https://acupun.site/lecture/jquery_phoneGap/json/personnel02.json
其它：
https://acupun.site/lecture/jquery_phoneGap/json/school.json
http://acupun.site/lecture/jquery_phoneGap/json/book02.json
http://opendata2.epa.gov.tw/AQI.json

重點1：如何呼叫Web客戶端元件（Web）
先設定Web1.url = http://acupun.site/lecture/jquery_phoneGap/json/personnel02.json
call web1.get

重點2：如何偵測網站主機的傳回值
when web1.GotText
if getResponsCode = 200
textbox2 = responseConteng
else
textbox2 = 錯誤：Http傳回值錯誤

重點3：json檔案讀取完畢的事件
when web1.GotText

重點4：讀取json，XML結構的兩種程式控制技巧
方法一：使用look up in pairs直接拆解xml，或json等巢狀資料結構：
例如：= look up in pairs（key=關鍵字串tag，list=清單資料陣列)
list 經常= select list item（list=清單陣列，index=第幾個）
when web1.GotText
if getResponsCode = 200
顯示第一個人的個人資料
set all = call web1.xmlTextDecode(xmltext= get(responseConteng))
set label姓名 = look up in pairs(key=name， pairs=select list item(list=get(all),index=1第一筆 ）
set label地址 = look up in pairs(key=address， pairs=select list item(list=get(all),index=1第一筆 ）
set label電話 = look up in pairs(key=tel， pairs=select list item(list=get(all),index=1第一筆 ）

重點5：讀取json，XML結構的兩種程式控制技巧
方法二：先宣告很多list，然後用迴圈for each item，直接把每個item的清單資料值，設定給list：
例如：for each in list（item）（list = get(list_all)）
do
add item in list（list = get(list_姓名)）（item = look up in paris（key=name，pairs=item））

when web1.GotText
if getResponsCode = 200
迴圈讀取json檔案到各個清單list變數
for each in list（item）（list = get(all)）
do
add item in list（list = get(list_姓名)）（item = look up in paris（key=name，pairs=item））
add item in list（list = get(list_住址)）（item = look up in paris（key=address，pairs=item））
add item in list（list = get(list_電話)）（item = look up in paris（key=tel，pairs=item））

重點5：設定spinner下拉選單的資料=姓名清單list
set spinner.element = get(姓名)

重點6：怎麼知道你所選擇的下拉選單spinner，是第幾個？
下拉選單spinner.SelectIndex

重點7：選擇下拉選單spinner後，顯示該人的住址，電話
when spinner1.AfterSelecting
set label姓名 = select list item (list = get(姓名)，index = spinner1.selectionIndex）
set label地址 = select list item (list = get(住址)，index = spinner1.selectionIndex）
set label電話= select list item (list = get(電話)，index = spinner1.selectionIndex）

注意1：為什麼有時候會出現錯誤訊息： Error 1101 = Unable to get a response with the specified URL
原因：手機連線時網路不通(或有錯誤信息發生時)在手機畫面就會回應錯誤網址
例如：http://acu.atwebpages.com/phpexample/app22-1.php
（這是校內ip，防火牆擋住，校外無法瀏覽，所以appinventor無法連線）

exp18_4

（4）exp18_4：讀取網路上的json檔案(台灣各地空氣污染指數)
功能：使用Web客戶端元件（Web），讀取遠端網頁json檔案，顯示台灣各地的空氣污染數值，顯示地點在下拉選單，查詢選單可以查詢該地的污染指數，測量時間
檔案：台灣各地空氣污染指數：http://opendata2.epa.gov.tw/AQI.json
簡單版：讀取台南市（第46個城市）
成果圖片， 畫面設計， 程式設計， 專案檔案

複雜版：讀取全台城市
成果圖片， 畫面設計， 程式設計， 專案檔案
下載icon
觀念：讀取json，XML結構的兩種程式控制技巧
方法一：使用look up in pairs直接拆解xml，或json等巢狀資料結構：
例如：= look up in pairs（key=關鍵字串tag，list=清單資料陣列)
list 經常= select list item（list=清單陣列，index=第幾個）
方法二：先宣告很多list，然後用迴圈for each item，直接把每個item的清單資料值，設定給list：
例如：for each in list（item）（list = get(list_all)）
do
add item in list（list = get(list_姓名)）（item = look up in paris（key=name，pairs=item））

設定screen1（title=讀取網路上的json檔案，Theme=Device Default）
一個水平配置horizontal layout
一個按鈕：讀取json檔案
一個labeljson：json

一個水平配置horizontal layout
一個下拉選單spinner

一個水平配置horizontal layout
一個label姓名：AQI汙染指數：

一個水平配置horizontal layout
一個label地址：汙染等級：

一個水平配置horizontal layout
一個label電話：測量時間：

一個地圖map
一個標記marker

一個Web客戶端元件（Web）

重點1：檔案：http://opendata2.epa.gov.tw/AQI.json

重點1：如何呼叫Web客戶端元件（Web）
先設定Web1.url = http://opendata2.epa.gov.tw/AQI.json
call web1.get

重點2：如何偵測網站主機的傳回值
when web1.GotText
if getResponsCode = 200
textbox2 = responseConteng
else
textbox2 = 錯誤：Http傳回值錯誤

重點3：json檔案讀取完畢的事件
when web1.GotText

重點4：讀取json，XML結構的兩種程式控制技巧
方法二：先宣告很多list，然後用迴圈for each item，直接把每個item的清單資料值，設定給list：
例如：for each in list（item）（list = get(list_all)）
do
add item in list（list = get(list_姓名)）（item = look up in paris（key=name，pairs=item））

when web1.GotText
if getResponsCode = 200
迴圈讀取json檔案到各個清單list變數
for each in list（item）（list = get(all)）
do
add item in list（list = get(城市)）（item = look up in paris（key=SiteName，pairs=item））
add item in list（list = get(AQI)）（item = look up in paris（key=AQI，pairs=item））
add item in list（list = get(status)）（item = look up in paris（key=status，pairs=item））
add item in list（list = get(PublishTime)）（item = look up in paris（key=PublishTime，pairs=item））
add item in list（list = get(Latitude)）（item = look up in paris（key=Latitude，pairs=item））
add item in list（list = get(Longitude)）（item = look up in paris（key=Longitude，pairs=item））

重點5：設定spinner下拉選單的資料=城市清單list
set spinner.element = get(城市)

重點6：選擇下拉選單spinner後，顯示該地點的污染資料與地圖
when spinner1.AfterSelecting
set labelAQI汙染指數 = select list item (list = get(AQI)，index = spinner1.selectionIndex）
set label汙染等級 = select list item (list = get(status)，index = spinner1.selectionIndex）
set label測量時間= select list item (list = get(PublishTime)，index = spinner1.selectionIndex）
畫出目前地圖
call map1.panto
（經度latitude=select list item（list=get(Latitude)，index=spinner1.selectionIndex），
（緯度longitude= select list item（list=get(Longitudet)，index=spinner1.selectionIndex），
（zoom程度=17）
畫出標記marker
call marker.setLocation
（經度latitude=select list item（list=get(Latitude)，index=spinner1.selectionIndex），
（緯度longitude= select list item（list=get(Longitudet)，index=spinner1.selectionIndex），
畫出標記marker標題
call marker.title = spinner1.selection
畫出邊框
call marker.ShowInfoBox

exp18_5

（5）exp18_5：讀取專案上的統一發票號碼
功能：使用File＋Web客戶端元件（Web），讀取同一專案上xml檔案，顯示最近一期的統一發票號碼
檔案：統一發票xml檔案：http://invoice.etax.nat.gov.tw/invoice.xml
成果圖片， 畫面設計， 程式設計a， 程式設計b， 專案檔案
下載xml檔案
觀念：讀取json，XML檔案有兩種方式
方法一：使用Web客戶端元件（Web），讀取遠端網頁json，XML檔案
方法二：使用Web＋文件管理器（File）（在Storage裡面），讀取同一專案內json，XML檔案

設定screen1（title=File＋Web讀取專案的XML檔案，Theme=Device Default）
一個水平配置horizontal layout
一個按鈕：讀取統一發票xml

一個labeltitle：title
一個label月份：最近一期月份
一個label特別獎：特別獎
一個label特獎：特獎
一個label頭獎：頭獎
一個label增開六獎：增開六獎

一個Web客戶端元件（Web）
一個文件管理器（File）（在Storage裡面）

下載invoice.xml
上傳invoice.xml

重點1：如何讀取專案上的invoice.xml
when button1.click
call File1.ReadFrom（FileName=//invoice.xml）

注意：讀取同一專案的寫法：//檔名

重點2：使用File讀取同一專案檔案後的事件
when File1.GotText

重點4：如何把xml檔案轉換成清單list
initialize global all
initialize global mycompany
initialize global personnel
when File1.GotText（text）
set all = call web1.xmlTextDecode(xmltext= get(text))
set rss = look up in pairs(key=rss， pairs=get(all) ）
set channel = look up in pairs(key=channel， pairs=get(rss) ）
set title = look up in pairs(key=title， pairs=get(channel) ）
set item = look up in pairs(key=item， pairs=get(channel) ）
set item_title = look up in pairs(key=title， pairs=select list item(list=get(item),index=1第一筆 ）
set description = look up in pairs(key=description， pairs=select list item(list=get(item),index=1第一筆 ）
set temp = replacement(alltext=get(description)，segment=<p>，replacement= ）
set temp = replacement(alltext=get(description)，segment=</p>，replacement= ）
set description_p = split（text=temp, at=,）
set Labetitle = title
set label月份 = item_title
set label特別獎 = select list item (list=description_p，index=1) ）
set label特獎 = select list item (list=description_p，index=2) ）
set label頭獎 = select list item (list=description_p，index=3) ）
set label頭獎 = select list item (list=description_p，index=4) ）
set label增開六獎 = select list item (list=description_p，index=5) ）

注意2：若是只使用File元件，是無法讀取專案上的xml資料
注意2：若是只使用Web元件，是無法讀取專案上的xml資料
解決方法：要合併使用File＋Web客戶端元件（Web）
步驟1：讀取專案上的invoice.xml：call File1.ReadFrom（FileName=//invoice.xml）

步驟2：使用File讀取同一專案檔案後的事件：when File1.GotText

步驟3：讀取xml資料（這個時候才使用web1元件：web1.xmlTextDecode（text= 使用File.GotText傳回的text）
when File1.GotText（text）
set all = call web1.xmlTextDecode(xmltext= get(text))

exp18_6

（6）exp18_6：讀取專案上的台南地區大專院校資料
功能：使用File＋Web客戶端元件（Web），讀取同一專案的json檔案，顯示學校名稱在下拉選單，查詢選單可以查詢住址，電話
檔案：//school2.json
成果圖片， 畫面設計， 程式設計， 專案檔案
下載json檔案

觀念：讀取json，XML檔案有兩種方式
方法一：使用Web客戶端元件（Web），讀取遠端網頁json，XML檔案
方法二：使用Web＋文件管理器（File）（在Storage裡面），讀取同一專案內json，XML檔案

設定screen1（title=File＋Web讀取專案的json檔案，Theme=Device Default）
一個水平配置horizontal layout
一個按鈕：讀取json檔案

一個水平配置horizontal layout
一個下拉選單spinner

一個水平配置horizontal layout
一個label姓名：學校：

一個水平配置horizontal layout
一個label地址：地址：

一個水平配置horizontal layout
一個label電話：電話：

一個Web客戶端元件（Web）
一個文件管理器（File）（在Storage裡面）

下載school2.json
上傳school2.json

重點1：如何讀取專案上的school2.json
when button1.click
call File1.ReadFrom（FileName=//school2.json）

注意：讀取同一專案的寫法：//檔名

重點2：使用File讀取同一專案檔案後的事件
when File1.GotText

重點3：如何把xml檔案轉換成清單list

注意2：若是只使用File元件，是無法讀取專案上的xml資料
注意2：若是只使用Web元件，是無法讀取專案上的xml資料
解決方法：要合併使用File＋Web客戶端元件（Web）
步驟1：讀取專案上的school2.json：call File1.ReadFrom（FileName=//school2.json）

步驟2：使用File讀取同一專案檔案後的事件：when File1.GotText

步驟3：讀取xml資料（這個時候才使用web1元件：web1.xmlTextDecode（text= 使用File.GotText傳回的text）
when File1.GotText（text）
set all = call web1.xmlTextDecode(xmltext= get(text))

重點4：讀取json結構的兩種程式控制技巧
方法一：使用look up in pairs直接拆解xml，或json等巢狀資料結構：
例如：= look up in pairs（key=關鍵字串tag，list=清單資料陣列)
list 經常= select list item（list=清單陣列，index=第幾個）
when web1.GotText
if getResponsCode = 200
顯示第一個人的個人資料
set all = call web1.xmlTextDecode(xmltext= get(responseConteng))
set label學校 = look up in pairs(key=name， pairs=select list item(list=get(all),index=1第一筆 ）
set label地址 = look up in pairs(key=address， pairs=select list item(list=get(all),index=1第一筆 ）
set label電話 = look up in pairs(key=tel， pairs=select list item(list=get(all),index=1第一筆 ）

重點5：讀取json，XML結構的兩種程式控制技巧
方法二：先宣告很多list，然後用迴圈for each item，直接把每個item的清單資料值，設定給list：
例如：for each in list（item）（list = get(list_all)）
do
add item in list（list = get(list_姓名)）（item = look up in paris（key=name，pairs=item））

when web1.GotText
if getResponsCode = 200
迴圈讀取json檔案到各個清單list變數
for each in list（item）（list = get(all)）
do
add item in list（list = get(list_學校)）（item = look up in paris（key=name，pairs=item））
add item in list（list = get(list_住址)）（item = look up in paris（key=address，pairs=item））
add item in list（list = get(list_電話)）（item = look up in paris（key=tel，pairs=item））

重點6：設定spinner下拉選單的資料=姓名清單list
set spinner.element = get(學校)

重點6：怎麼知道你所選擇的下拉選單spinner，是第幾個？
下拉選單spinner.SelectIndex

重點7：選擇下拉選單spinner後，顯示該人的住址，電話
when spinner1.AfterSelecting
set label學校 = select list item (list = get(學校)，index = spinner1.selectionIndex）
set label地址 = select list item (list = get(住址)，index = spinner1.selectionIndex）
set label電話= select list item (list = get(電話)，index = spinner1.selectionIndex）

exp20_1

（1）exp20_1：打地鼠
功能：在三個地洞，隨機出現地鼠，點按就可以得分，倒數30秒結束遊戲
成果圖片， 畫面設計， 程式設計a， 程式設計b， 專案檔案
下載圖片音效

設定screen1（title=打地鼠，Theme=Device Default，AboutScreen=打地鼠app由john開發，於2020年2月4日完成）
一個畫布canvas（因為不知道實際手機的高度，所以先設定高度330，等一下在程式再動態修改）
（背景圖片=desert.png）

一個圖像精靈ImageSprite1（picture=mole_2.png，寬度80，高度80）
一個圖像精靈ImageSprite2（picture=mole_2.png，寬度80，高度80）
一個圖像精靈ImageSprite3（picture=mole_2.png，寬度80，高度80）

一個水平配置horizontal layout（置中）
一個label（時間：30，字體18，粗體，置中對齊）
一個按鈕：開始（shape=round，粗體，置中對齊）
一個label（分數：0，字體18，粗體，置中對齊）

一個音效sound
一個計時器clock
一個訊息notifier

重點1：如何設定畫布（圖像精靈）自動與手機的高度而變化
重點2：程式一開始設定關閉計時器，播放音效
when screen1.initial
設定畫布動態高度尺寸
set canvas1.height = screen1.height - 150（要扣除header表頭高度，footer底部高度）
設定三個圖像精靈的y座標
set ImageSprite1.Y = screen1.height - 300
set ImageSprite2.Y = screen1.height - 250
set ImageSprite3.Y = screen1.height - 250
設定播放開場音效
set sound1.source = bg.mp3
call sound1.play
關閉計時器
set clock1.TimerEnable = false

重點3：按鈕開始後，開始倒數30秒，並隨機顯示地鼠
when button1.click
開始倒數30秒
set clock1.TimerInterval = 1000 （1秒倒數一次）
set clock1.TimerEnabled = true
設定標籤labe歸零
set label1 = 時間：30
set label2 = 分數：0
設定全域變數歸零
set global second = 30
set global score = 0
顯示隨機地鼠
call show

重點4：顯示隨機地鼠的程序show
to show
do
if (random int from 1 to 5) > 5
則顯示地鼠 set ImageSprite1.picture = mole_1.png
否則地洞 set ImageSprite1.picture = mole_2.png

if (random int from 1 to 5) > 5
則顯示地鼠 set ImageSprite2.picture = mole_1.png
否則地洞 set ImageSprite2.picture = mole_2.png

if (random int from 1 to 5) > 5
則顯示地鼠 set ImageSprite3.picture = mole_1.png
否則地洞 set ImageSprite3.picture = mole_2.png

重點4：點按出現的地鼠ImageSprite1，馬上得分
when ImageSprite1.TouchDown
如果計時器還在運作，才能夠得分
if clock1.TimerEnable == true
則
set score = score + 1
顯示在分數label
set labelscore = 分數：+ get(score)
播放音效
set sound1.source = bit.mp3
call sound1.play

exp20_2

（2）exp20_2：乒乓球
功能：藍色乒乓球由上方落下，控制左右按鈕移動擋板，可以反彈乒乓球，一次得1分，限時30秒，落地乒乓球變紅色並顯示訊息：出界，結束遊戲
成果圖片， 畫面設計， 程式設計a， 程式設計b， 專案檔案
下載圖片音效
設定screen1（title=乒乓球）
一個畫布canvas（寬度高度填滿，背景顏色pink）

一個球精靈Ball1（painColor=藍色，Radius=10）
一個圖像精靈ImageSprite1（picture=bar.png，寬度80，高度17）

一個水平配置horizontal layout（置中，背景顏色=orange，）
一個按鈕buttonLeft：⇦（粗體，置中對齊）
一個label1Time（時間：30，字體18，粗體）
一個按鈕：開始遊戲（粗體，置中對齊）
一個label1Score（分數：0，字體18，粗體）
一個按鈕buttonRight：⇨（粗體，置中對齊）

一個音效sound
一個計時器clock
一個訊息notifier

重點1：如何設定畫布（圖像精靈）自動與手機的高度而變化
重點2：程式一開始設定關閉計時器，播放音效
when screen1.initial
設定畫布動態高度尺寸
set canvas1.height = screen1.height - 100（要扣除header表頭高度，footer底部高度）
設定三個圖像精靈的y座標
set ImageSprite1.Y = canvas1.height - 30
關閉計時器
set clock1.TimerEnable = false

重點3：按鈕開始後，開始倒數30秒，並把球精靈往上方發射（角度在45～135之間選一個亂數）
when button1start.click
開始倒數30秒
set clock1.TimerInterval = 1000 （1秒倒數一次）
set clock1.TimerEnabled = true
設定開始按鈕enable=false
set button3start.Enabled = false

設定標籤labe歸零
set label1time = 時間：30
set label2score = 分數：0
設定全域變數歸零
set global second = 30
set global score = 0
把球精靈往上方發射（角度在45～135之間選一個亂數）
set Ball1.Heading = random integer from 45 to 135
（ball.Heading = 向右為0，向上為90，向左為180，向下為270）
set Ball1.Speed = 15
set Ball1.painColor = blue
set Ball1.enabled = true

重點4：每一秒時間，計時器的啟動事件
when clock1.Timer
second = second -1
if second == 0
把計時器停止
set clock1.TimerEnabled = false
把球停止，顏色改成紅色
set Ball1.painColor = red
set Ball1.enabled = false
把按鈕啟動=true
set button3start.Enabled = true
顯示訊息
set notifier1.alert（notice=30秒時間結束）
顯示音效
set sound1.souce = zoop.wav
call sound1.play
end if
在label顯示秒數
set labeltime = 時間： + get（second）

重點5：當球ball與板子bar碰撞的事件（加分，音效，設定球反彈角度）
when ball1.CollideWith
如果球ball與板子bar碰撞
if 其它元件other == ImageSprite1（注意這個=，是logic邏輯類的=）（注意：這個是ImageSprite1物件）
score = score + 1
顯示音效
set sound1.souce = pop.wav
call sound1.play
在label顯示分數
set labelscore = 分數： + get（score）
設定球反彈角度
（ball.Heading = 向右為0，向上為90，向左為180，向下為270）
if ba11l.Heading >= 270
then set ba11l.Heading = (ba11l.Heading-180) - 2* (ba11l.Heading - 270)
elseif ba11l.Heading ＜ 270
then set ba11l.Heading = (ba11l.Heading-180) + 2* (270 - ba11l.Heading)

重點6：點按按鈕（⇦⇨），移動板子bar
when buttonLeft.click
set ImageSprite1.X = ImageSprite1.X -15

when buttonRight.click
set ImageSprite1.X = ImageSprite1.X +15

重點7：當球ball與邊界碰撞的事件
when Ball1.EdgeReach
如果球碰到下方邊界，則出界，遊戲停止
if Edge == -1
把計時器停止
set clock1.TimerEnabled = false
把球停止，顏色改成紅色
set Ball1.painColor = red
set Ball1.enabled = false
把按鈕啟動=true
set button3start.Enabled = true
顯示訊息
set notifier1.alert（notice=出界，遊戲結束）
顯示音效
set sound1.souce = zoop.wav
call sound1.play
else否則
反彈
call ball1.Bounce(edge=get(edge))
end if

exp20_3

（3）exp20_3：拖曵乒乓球打水果
功能：藍色乒乓球由上方落下，拖曵擋板左右移動，可以反彈乒乓球，一次得1分，碰到香蕉則得5分，蘋果得10分，然後水果隨機放置，限時30秒，落地乒乓球變紅色並顯示訊息：出界，結束遊戲
成果圖片， 畫面設計， 程式設計a， 程式設計b， 專案檔案
下載圖片音效
複製上一個範例exp20_2，另存新檔成exp20_3
下載圖片音效

修改
設定screen1（title=乒乓球打水果）
一個畫布canvas（寬度高度填滿，背景顏色pink）

新增
一個圖像精靈ImageSprite2（picture=apple.png，寬度40，高度40）
一個圖像精靈ImageSprite3（picture=bananas.png，寬度40，高度40）

刪除
一個按鈕buttonLeft：⇦（粗體，置中對齊）
一個按鈕buttonRight：⇨（粗體，置中對齊）

上傳音效檔案：laser1.wav，

修改1：設定球移動的速度變快
when button1start.click
set Ball1.Speed = 30

重點2：手觸控拖曵板子移動
when ImageSprite1Bar.Dragged
set ImageSprite1Bar.X = currentX

重點3：當球ball與蘋果，香蕉碰撞的事件（加10，5分，音效laser1）
when ball1.CollideWith
如果球與蘋果碰撞
if 其它元件other == ImageSprite2Apple（注意這個=，是logic邏輯類的=）（注意：這個是ImageSprite1物件）
score = score + 10
顯示音效
set sound1.souce = laser1.wav
call sound1.play
在label顯示分數
set labelscore = 分數： + get（score）
重新設定蘋果的最新位置（亂數決定）
set ImageSprite2Apple.X = random integer from 30 to Canvas1.width -30
set ImageSprite2Apple.Y = random integer from 30 to Canvas1.height -150

如果球與香蕉碰撞
if 其它元件other == ImageSprite3Bananas（注意這個=，是logic邏輯類的=）（注意：這個是ImageSprite1物件）
score = score + 5
顯示音效
set sound1.souce = laser1.wav
call sound1.play
在label顯示分數
set labelscore = 分數： + get（score）
重新設定香蕉的最新位置（亂數決定）
set ImageSprite3Bananas.X = random integer from 30 to Canvas1.width -30
set ImageSprite3Bananas.Y = random integer from 30 to Canvas1.height -150

exp20_4

（4）exp20_4：觸控照片電子書(1)：滑動法
功能：在螢幕上左右拖曵觸控，可以切換顯示上一張下一張圖片
成果圖片， 畫面設計， 程式設計， 專案檔案
下載圖片音效
下載圖片音樂（car1.jpg～car7.jpg，bg.mp3）

設定screen1
（title=觸控照片電子書(1)：滑動法，Theme=Device Default，畫面方向Screenorientation=橫向Landscape，）
（開啟動畫openAnimation=水平滑動SlideHorizontal，關閉動畫closeAnimation=水平滑動SlideHorizontal）
一個畫布canvas（背景圖片=car1.jpg）
一個音樂播放器player

重點1：程式一開始就播放音樂
when screen1.initial
set player1.source = bg.mp3
set player1.volume = 50 （0～100）
call player1.start

重點2：向右觸控滑動就播放下一張（xvel > 0.2，水平滑動速度 > 0.2才會驅動）
照片號碼變數
global integer num = 1
when canvas1.Flung
當向右觸控滑動
if xvel > 0.2
num = num + 1
if num ==8 then num = 1
set canvas.backgroundImage = car + get(num) + .jpg
endif
當向左觸控滑動
if xvel ＜ -0.2
num = num - 1
if num ==0 then num = 7
set canvas.backgroundImage = car + get(num) + .jpg
endif

exp20_5

（5）exp20_5：觸控照片電子書(2)：按鈕法
功能：在螢幕上點按左右按鈕，可以切換顯示上一張下一張圖片
成果圖片， 畫面設計， 程式設計， 專案檔案
下載圖片音效
複製上一個範例exp20_4，另存新檔成exp20_5

下載圖片音樂（next.png，prev.png）

設定screen1
（修改title=觸控照片電子書(2)）

新增
一個圖像精靈ImageSprite1（picture=prev.png）
一個圖像精靈ImageSprite2（picture=next.png）

刪除
when canvas1.Flung事件

重點1：程式一開始，設定兩個圖形的位置在邊界的旁邊50 pixle
when screen1.initial
set ImageSprite1.X = 50
set ImageSprite2.X = get(canvas1.width) -100 （右邊還有系統的menu選單，寬度=50，故50+50=100）

重點2：點按向右的圖片精靈，切換圖片
when ImageSprite2.TouchDown
num = num + 1
if num ==8 then num = 1
set canvas.backgroundImage = car + get(num) + .jpg

重點3：點按向左的圖片精靈，切換圖片
when ImageSprite1.TouchDown
num = num - 1
if num ==0 then num = 7
set canvas.backgroundImage = car + get(num) + .jpg

exp20_6

（5）exp20_6：觸控頁面電子書(3)：滑動頁面法
功能：在螢幕上左右拖曵觸控，可以切換顯示上一頁面，下一頁面（切換頁面）
（簡單版）： 成果圖片， 畫面設計， 程式設計a， 程式設計b， 專案檔案
（複雜版）： 成果圖片， 畫面設計， 程式設計， 專案檔案
複製範例exp20_4，另存新檔成exp20_6

刪除音樂播放器play

設定screen1（置中對齊）
（修改title=觸控頁面電子書(3)：滑動頁面法）
（修改背景圖片=car1.jpg）

新增一個label：LaFerrari是法拉利的旗艦跑車（文字顏色=黃色）
修改canvas畫布：（背景圖片=none）（背景顏色=none=透明）

新增Screen2
設定screen2（置中對齊）
（修改title=觸控頁面電子書(3)：滑動頁面法）
（修改背景圖片=car2.jpg）
新增一個label：Porsche - 保時捷（文字顏色=黃色）
新增canvas畫布：（背景圖片=none）（背景顏色=none=透明）

新增Screen3
設定screen3（置中對齊）
（修改title=觸控頁面電子書(3)：滑動頁面法）
（修改背景圖片=car3.jpg）
新增一個label：藍寶堅尼 - Lamborghini（文字顏色=黃色）
新增canvas畫布：（背景圖片=none）（背景顏色=none=透明）

Screen1程式：
刪除 when screen1.initial

設定canvas1觸控事件
when canvas1.Flung
如果向右觸控，則開啟Screen2
if xvel > 0.2
then Open another Screen（screenName = Screen2）
如果向左觸控，則開啟Screen3
if xvel ＜ -0.2
then Open another Screen（screenName = Screen3）
關閉目前視窗
close Screen

Screen2程式：
設定canvas1觸控事件
when canvas1.Flung
如果向右觸控，則開啟Screen3
if xvel > 0.2
then Open another Screen（screenName = Screen3）
如果向左觸控，則開啟Screen1
if xvel ＜ -0.2
then Open another Screen（screenName = Screen1）
關閉目前視窗
close Screen

Screen3程式：
設定canvas1觸控事件
when canvas1.Flung
如果向右觸控，則開啟Screen1
if xvel > 0.2
then Open another Screen（screenName = Screen1）
如果向左觸控，則開啟Screen2
if xvel ＜ -0.2
then Open another Screen（screenName = Screen2）
關閉目前視窗
close Screen

exp20_7

（6）exp20_7：照相與簡易編輯
功能：可以照相，或由相簿挑選圖片，在上方手繪寫字，劃線，畫矩形，並可以存檔
成果圖片， 畫面設計a， 畫面設計b， 程式設計a， 程式設計b， 專案檔案
下載圖片音效
下載圖片
設定screen1（title=照相與簡易編輯，icon=camera.png）
一個垂直配置Vertical layout（icon=camera_head.pg，水平置中，垂直置中，高度30%，背景顏色none）

一個水平配置HorizontalArrangement（水平置右，高度10%，背景顏色none）
一個按鈕Button1blue：（寬度30，高度30，shape=rounded，背景顏色=藍色）
一個按鈕Button1red：（寬度30，高度30，shape=rounded，背景顏色=紅色）
一個按鈕Button1yellow：（寬度30，高度30，shape=rounded，背景顏色=黃色）
一個按鈕Button1white：（寬度30，高度30，shape=rounded，背景顏色=白色）
一個按鈕Button1plus：+（寬度30，高度35，shape=rounded，背景顏色=DarkGray，文字顏色黃色）
一個label：3（粗體，字體16，文字顏色黃色）
一個按鈕Button1minus：-（寬度30，高度35，shape=rounded，背景顏色=DarkGray，文字顏色黃色）

一個水平配置HorizontalArrangement（水平置右，高度10%，背景顏色none）
一個按鈕Buttonhandpaint：手繪（背景顏色=DarkGray，文字顏色黃色）
一個按鈕Buttonline：直線（背景顏色=DarkGray，文字顏色黃色）
一個按鈕Buttonrectangle：矩形（背景顏色=DarkGray，文字顏色黃色）
一個按鈕Buttondel：清除（背景顏色=DarkGray，文字顏色黃色）

一個水平配置HorizontalArrangement（水平置右，高度10%，背景顏色none）
一個imagePicker：（image=btn2.png）
一個按鈕Button1take：（image=btn1.png）
一個按鈕Button1save：另存（寬度50，高度50，粗體，背景顏色=白色）

一個水平配置HorizontalArrangement（icon=camera_body.pg，填滿，背景顏色none）
一個canvas（寬度高度填滿）

一個Notifier
一個照相機camera

重點1：如何照相
call Camera1.TakePicture

重點2：照相後如何在image/canvas顯示
when camera1.afterPicture
set canvas1.backgroudImage = get(image1)

重點1：如何畫圓形
set canvas1.paincolor = 顏色
set canvas1.LineWidth = 5
call drawCircle（x,y,r,fill)

重點2：如何清除
canvas1.clear

重點3：如何存檔
set label = call canvas1.save
（注意：在image1的檔案無法存檔，只有在canvas上的圖片才能存檔）

重點4：如何另存新檔
set label = call canvas1.SaveAs（filena=Download/mypic.jpg）

注意1：存檔若是出現錯誤：
Error 908: The Permission Process_outgoing_calls has been denied. please enableit in the settings app

原因：你的手機對於這個範例app有設定權限限定（使用存檔前會先詢問，這個詢問造成Error 908）
修改方法：手機→設定→應用程式權限管理→權限管理→找到exp9_1→讀寫存儲數據→改成『允許』

注意2：另存新檔的位置：
在你手機本機資料夾的根目錄

注意3：存檔的位置：
在你手機本機資料夾的根目錄→my Documents→Pictures

重點5：如何呼叫挑選圖片功能
when imagePicker1.click
call imagePicker1.open

重點6：相簿中挑選圖片後，在畫布顯示圖片
when imagePicker1.AfterPicking
set canvas1.backgroundimage = imagePicker1.selection（注意：不是imagePicker1.image）

重點7：如何手繪線條
when canvas1.dragged（因為拖移是針對圖像文件來移動）
if canvas1.shape = handpaint
set canvas1.paincolor = get(color) 顏色
set canvas1.LineWidth = get(size) 線條大小
call canvas1.drawLine（previousx,previousy,currentx,currenty）
endif

重點8：如何畫直線
when canvas1.dragged（因為拖曵是針對canvas來移動）
if canvas1.shape = line
set firstx = startx（startx是開始拖曵滑鼠後，還沒有放開前的第一點x）
set firsty = starty（starty是開始拖曵滑鼠後，還沒有放開前的第一點y）
endif

when canvas1.TouchUp（x，y）（因為拖曵放開後，結束拖曵，是最後一點）
if canvas1.shape = line
set canvas1.paincolor = get(color) 顏色
set canvas1.LineWidth = get(size) 線條大小
call canvas1.drawLine（firstx,firsty,x,y）
endif

重點9：如何畫矩形
when canvas1.dragged（因為拖曵是針對canvas來移動）
if canvas1.shape = line
set firstx = startx（startx是開始拖曵滑鼠後，還沒有放開前的第一點x）
set firsty = starty（starty是開始拖曵滑鼠後，還沒有放開前的第一點y）
endif
when canvas1.TouchUp（x，y）（因為拖曵放開後，結束拖曵，是最後一點）
if canvas1.shape = rectangle
set canvas1.paincolor = get(color) 顏色
set canvas1.LineWidth = get(size) 線條大小
call canvas1.drawShape（pointlist
=make a list
= make a list (firstx,firsty）
= make a list (firstx,y）
= make a list (x,y）
= make a list (x,firsty）
fill = false)（true=填滿）
endif

重點10：如何另存檔案
when buttonSave
call notifier.showAlert（已經儲存 + call canvas1.SaveAs（filename=Download/mypic.jpg））
注意：若是filename=mypic.jpg，則儲存到根目錄

exp20_8

（7）exp20_8：搜尋地點顯示Google地圖
功能：輸入地點名稱（例如：成功大學），可以顯示該地點的地圖
成果圖片a， 成果圖片b， 畫面設計， 程式設計， 專案檔案
方法：使用Activitystarter啟動器就可以顯示地圖
Activitystarter1.Action : android.intent.action.VIEW
Activitystarter1.ActivityClass: com.google.android.maps.MapsActivity
Activitystarter1.ActivityPackage: com.google.android.apps.maps

方法：搜尋地點的指令：geo:0,0?q=地點

設定screen1（title=搜尋地點顯示Google地圖，Theme=Device Defaul）
一個水平配置horizontal layout
一個textbox（hint=輸入知名地點名稱）
一個label（搜尋地圖）

一個Activitystarter啟動器

重點1：搜尋地點地圖
when button1.click
set Activitystarter1.Action : android.intent.action.VIEW
set Activitystarter1.ActivityClass: com.google.android.maps.MapsActivity
set Activitystarter1.ActivityPackage: com.google.android.apps.maps
set Activitystarter1.Datauri = geo:0,0?q= + textbox1
call Activitystarter1.StartActivy

測試：輸入：台北車站

補充1：https://www.google.com/search?q=台北車站

補充2：URI :
geo:latitude,longitude
geo:latitude,longitude?z=zoom
geo:0,0?q=my+street+address
geo:0,0?q=business+near+city
geo:latitude,longitude [VIEW] 顯示撥號介面
geo:latitude,longitude?z=zoom [VIEW] 顯示地圖
geo:0,0?q=my+street+address [VIEW] 顯示地圖
geo:0,0?q=business+near+city [VIEW] 顯示地圖

exp20_9

（8）exp20_9：Google地圖在兩個地點之間的導航
功能：選擇spinner下拉選單的一個地點，經由偵測目前自己的位置，然後進行兩個地點之間的導航
成果圖片a， 成果圖片b， 畫面設計， 程式設計a， 程式設計b， 專案檔案
方法：
Activitystarter1.Action : android.intent.action.VIEW
Activitystarter1.ActivityClass: com.google.android.maps.MapsActivity
Activitystarter1.ActivityPackage: com.google.android.apps.maps
方法：兩個地點的導航URI寫法
語法：https://maps.google.com/maps?saddr=地點1經度,地點1緯度&daddr=地點2經度,地點2緯度
範例：
https://maps.google.com/maps?saddr=25.033408,121.564099&daddr=25.034712,121.522041

複製exp16_3另外儲存成exp20_9
（修改Screen1的App_Name=exp20_9）
（修改Screen1的title=導航到選定的地方）

exp16_3：讀取外部csv檔案顯示地圖（四筆記錄（三個參數））
台灣大學,25.017447,121.539822
成功大學,22.996774,120.216681
清華大學,24.798869,120.996720
交通大學,24.787364,120.999674
使用stu3.csv

新增：
在HorizontalArrangement1加入
一個按鈕（Button1Gothere）：導航到此處

一個位置感測器LocationSensor（在Sensor裡面）

重點1：當程式一打開，就開啟方位感測器，並顯示目前位置（可能要等個15秒，才能完整顯示）

initialize global x
initialize global y

when screen1.initial
set LocationSensor1.Enabled = True
set x=LocationSensor1.latitude
set y=LocationSensor1.longitude

重點2：當手機移動位置時，如何顯示目前最新位置（可能要等個15秒，才能完整顯示）
when LocationSensor1.LocationChanged(latitude,longitude)
set x=get(latitude)
set y=get(longitude)

重點3：按鈕（導航地圖）的事件
when button1.click
set Activitystarter1.Action : android.intent.action.VIEW
set Activitystarter1.ActivityClass: com.google.android.maps.MapsActivity
set Activitystarter1.ActivityPackage: com.google.android.apps.maps
set Activitystarter1.Datauri =
http://maps.google.com/maps?saddr=
+ get(x)
+ ,
+ get(y)
+ &daddr=
+ select list item (list=get(listx),index=spinner1.selectIndex)
+ ,
+ select list item (list=get(listy),index=spinner1.selectIndex)
call Activitystarter1.StartActivy

補充1：台灣首府大學：23.193336, 120.268420

補充2：
使用這個：http://maps.google.com/maps?saddr=
&daddr=

不要使用這個：https://maps.google.com/maps?saddr=

exp20_10

（9）exp20_10：宣傳網站（地圖，網頁，Email）
功能：網站有三個按鈕，地點顯示地圖，影片顯示youtube，Email可以寫電子郵件
成果圖片a， 成果圖片b， 成果圖片c， 畫面設計， 程式設計， 專案檔案
下載圖片
下載圖片
設定screen1（title=2018全國微電影比賽，Theme=Device Default）
一個水平配置horizontal layout（image=pic1.jpg，寬度填滿，高度40%）

一個水平配置horizontal layout（寬度填滿，置中對齊）
一個按鈕Button1content：比賽內容（粗體，文字紅色）
一個按鈕Button2location：比賽地點（粗體）
一個按鈕Button3youtube：影片網站（粗體）
一個按鈕Button4email：Email聯絡（粗體）

一個垂直配置horizontal layout（寬度填滿，置中對齊）
一個label：比賽時間：2018年5月15日（文字藍色，粗體）
一個label：獎金：全部100萬，第一名10萬（文字藍色，粗體）
一個label：比賽方法：拍攝微電影，15～30分鐘（文字藍色，粗體）
一個label：上傳：上傳到指定youtube網站（文字藍色，粗體）

一個啟動器ActivityStarter

重點1：按鈕Button2location顯示地圖（台灣首府大學：23.193336, 120.268420）
when Button2location1.click
set Activitystarter1.Action : android.intent.action.VIEW
set Activitystarter1.ActivityClass: com.google.android.maps.MapsActivity
set Activitystarter1.ActivityPackage: com.google.android.apps.maps
set Activitystarter1.Datauri = geo:0,0?q=台灣首府大學
call Activitystarter1.StartActivy

重點2：按鈕Button3youtube顯示網頁
（https://www.youtube.com/watch?v=CGLhX4dTkls&list=PL3IAe_QW8xdr7tMTZhALjbWzVOargqTsx）
when Button2location1.click
set Activitystarter1.Action : android.intent.action.VIEW
set Activitystarter1.Datauri = https://www.youtube.com/watch?v=CGLhX4dTkls&list=PL3IAe_QW8xdr7tMTZhALjbWzVOargqTsx
call Activitystarter1.StartActivy

重點3：按鈕Button4email傳送Email
（語法：mailto:電子郵件?subject=標題&body=內容）
when Button4email.click
set Activitystarter1.Action : android.intent.action.VIEW
set Activitystarter1.Datauri = mailto:abc@gmail.com?subject=聯絡資訊&body=
call Activitystarter1.StartActivy

exp21_1

（1）exp21_1：讀取echo顯示的文字
功能：在手機顯示app21-1.php的印出文字：新年快樂
成果圖片， 畫面設計， 程式設計， 專案檔案
screen1
一個水平配置horizontal layout
一個按鈕（讀取PHP的echo文字）
一個label（結果）

一個Web客戶端元件（Web）

重點1：如何呼叫Web客戶端元件（Web）
when button1.click
先設定web1.url = http://acu.atwebpages.com/phpexample/app21-1.php
call web1.get

重點2：如何偵測網站主機的傳回值
when web1.GotText
if getResponsCode = 200
textbox2 = responseContent
else
textbox2 = 錯誤：Http傳回值錯誤

重點3：web讀取完畢的事件
when web1.GotText

重點4：如何讀取php印出的文字（echo text）
方法一：使用get方法
先設定web1.url = http://acu.atwebpages.com/phpexample/app21-1.php
call web1.get

方法二：使用post方法
先設定web1.url = http://acu.atwebpages.com/phpexample/app21-1.php
call web1.PostText（text=）

注意：本題使用GET的傳遞參數法

重點5：app21-1.php印出新年快樂
http://acu.atwebpages.com/phpexample/app21-1.php
<?php
echo "大家新年快樂" ;
?>

exp21_2

（2）exp21_2：使用get傳遞變數
功能：在手機輸入數字a，b，傳去app21-2.php計算加法，然後再傳回手機顯示答案
成果圖片， 畫面設計， 程式設計， 專案檔案
screen1
一個水平配置horizontal layout
一個textbox1（清除hint，寬度=15%）
一個label（＋）
一個textbox2（清除hint，寬度=15%）
一個label（＝）
一個textbox3（清除hint）

一個按鈕（傳去PHP計算）

一個notifier訊息元件
一個Web客戶端元件（Web）

重點1：如何呼叫Web客戶端元件（Web）
when button1.click
先設定web1.url = http://acu.atwebpages.com/phpexample/app21-2.php
call web1.get

重點2：如何偵測網站主機的傳回值
when web1.GotText
if getResponsCode = 200
textbox2 = responseContent
else
notifier.alert = 錯誤：Http傳回值錯誤

重點3：web讀取完畢的事件
when web1.GotText

重點4：如何讀取php印出的文字（echo text）
方法一：使用get方法
先設定
web1.url = join（http://acu.atwebpages.com/phpexample/app21-2.php?t1= textbox1.text & t2= textbox2.text）
call web1.get

方法二：使用post方法
先設定web1.url = http://acu.atwebpages.com/phpexample/app21-2.php
call web1.PostText（text=）
（t1= textbox1.text ）
（&t2= textbox2.text）

注意：POST與GET的傳遞參數很類似，但是POST省略?）
注意：本題使用GET的傳遞參數法

重點5：傳去app21-2.php計算加法，然後再傳回手機顯示答案
http://acu.atwebpages.com/phpexample/app21-2.php
<?php
$a = $_GET["t1"];
$b = $_GET["t2"];
$c = $a+$b;
echo $c;
?>

exp21_3

（3）exp21_3：使用get傳遞checkbox勾選變數
功能：回答美國人口的單選checkbox，傳去app21-3.php判別，然後再傳回得分
成果圖片， 畫面設計， 程式設計， 專案檔案
screen1
一個label（1.單選考題：請問美國人口數量？）

一個水平配置horizontal layout
一個checkbox1（1億人）
一個checkbox2（2億人）
一個checkbox3（3億人）
一個checkbox4（4億人）

一個按鈕（計算分數）

一個Label2score（分數=）
一個Label3url（url）

一個Web客戶端元件（Web）

重點1：複選的checkbox如何變成單選效果
when checkbox1.changed
if checkbox1.checked == true
set checkbox1.checked = true
set checkbox2.checked = false
set checkbox3.checked = false
set checkbox4.checked = false
endif

when checkbox2.changed
if checkbox2.checked == true
set checkbox1.checked = false
set checkbox2.checked = true
set checkbox3.checked = false
set checkbox4.checked = false
endif

重點1：使用get方法，呼叫Web客戶端元件（Web）
when button1.click
先設定web1.url = http://acu.atwebpages.com/phpexample/app21-3.php
call web1.get

重點2：如何偵測網站主機的傳回值
when web1.GotText
if getResponsCode = 200
textbox2 = responseContent
else
notifier.alert = 錯誤：Http傳回值錯誤

重點3：web讀取完畢的事件
when web1.GotText

重點4：如何讀取php印出的文字（echo text）
方法一：使用get方法
先設定
web1.url = join（http://acu.atwebpages.com/phpexample/app21-3.php?R1= checkbox1.checked & R2= checkbox2.checked & R3= checkbox3.checked & R4= checkbox4.checked）
call web1.get

結果：http://acu.atwebpages.com/phpexample/app21-3.php?R1=false&R2=false&R3=true&R4=false
注意：這個url的true,false傳到php後，會被當作文字（而不是bool）

重點5：判別是否是第三個被勾選，若是則100分
http://acu.atwebpages.com/phpexample/app21-3.php
<?php
$R1 = $_GET["R1"];
$R2 = $_GET["R2"];
$R3 = $_GET["R3"];
$R4 = $_GET["R4"];
$score=0;
if($R3=="true")
{
$score=100;
}
echo "得分為：$score 分";
?>

exp21_4

（4）exp21_4：使用post傳遞checkbox勾選變數
功能：同app21-3.php考題美國人口，但是用post方法傳遞變數
成果圖片， 畫面設計， 程式設計， 專案檔案
複製app21-3.php成app21-4.php

重點1：使用post方法，呼叫Web客戶端元件（Web）
when button1.click
先設定web1.url = http://acu.atwebpages.com/phpexample/app21-4.php
call web1.PostText（text=）
（R1= checkbox1.checked ）
（&R2= checkbox2.checked ）
（&R3= checkbox3.checked ）
（&R4= checkbox4.checked）

重點2：判別是否是第三個被勾選，若是則100分
注意：把GET[]，改成POST[]
http://acu.atwebpages.com/phpexample/app21-4.php
<?php
$R1 = $_POST["R1"];
$R2 = $_POST["R2"];
$R3 = $_POST["R3"];
$R4 = $_POST["R4"];
$score=0;
if($R3=="true")
{
$score=100;
}
echo "得分為：$score 分";
?>

exp21_5

（5）exp21_5：
功能：下拉選單選水果名稱，傳到php，查詢價格
成果圖片， 畫面設計， 程式設計， 專案檔案
screen1
一個水平配置horizontal layout
一個label（選擇水果項目）
一個spinner1（ElementFromString=蘋果,香蕉,西瓜,榴槤）

一個按鈕（查詢價格）
一個Labe2（結果）

一個Web客戶端元件（Web）

重點1：發現選取的中文產品名稱，傳到php後，變成亂碼
when button1.click
先設定web1.url = http://acu.atwebpages.com/phpexample/app21-5.php?spinner=Spinner1.selection
call web1.get

修改方法：使用call web1.UriEncode(text=大家好)，就可以使中文字不會產生亂碼
結果：
when button1.click
先設定web1.url = http://acu.atwebpages.com/phpexample/app21-5.php?spinner=call web1.UriEncode（text=Spinner1.selection）
call web1.get
call web1.get

重點2：判別水果的價格，然後印出
http://acu.atwebpages.com/phpexample/app21-5.php
<?php
$a1 = $_GET["spinner"];
$price = 0;
if($a1 =="蘋果")
{
$price = 30;
}
elseif($a1 =="香蕉")
{
$price = 15;
}
elseif($a1 =="西瓜")
{
$price = 150;
}
elseif($a1 =="榴槤")
{
$price = 350;
}
echo "$a1 的價錢為：\n".$price."元";
?>

exp21_6

（6）exp21_6：傳遞list清單到php轉換成陣列
功能：把全班姓名，數學list，傳到php，計算全班平均
注意：把list傳遞到php後，都會變成字串，還要手動手工轉成陣列
成果圖片， 畫面設計， 程式設計， 專案檔案
screen1
一個按鈕（傳遞list清單到php計算平均）
一個label

一個Web客戶端元件（Web）

重點1：建立兩個list，name，math
initial global name = make a list（李小華，王美美，林林奇，張大毛）
initial global math = make a list（75,95,100,80）

重點2：全班姓名（中文），傳到php後，變成亂碼
修改方法：使用call web1.UriEncode(text=get(name))，就可以使中文字不會產生亂碼

重點3：全班數學成績（數字陣列），傳到php後，無法正常顯示
修改方法：使用call web1.UriEncode(text=get(math))，就可以使數字陣列不會產生亂碼

重點4：appinventor的list，無論是文字（中文，英文），無論數字，只要是list，都要先用UriEncode轉換，才不會是亂碼
call web1.UriEncode(text=get(math))

重點5：使用get方法傳遞list清單
when button1.click
先設定web1.url = http://acu.atwebpages.com/phpexample/app21-6.php?name1=call web1.UriEncode（text=get(name)）&math1=call web1.UriEncode（text=get(math)）
call web1.get

重點6：appinventor的list傳遞到php後，都會變成字串，還要手動手工轉成陣列
http://acu.atwebpages.com/phpexample/app21-6.php
<?php
//處理姓名陣列
//在app inventor是list清單,但是讀入php後變成字串["john","tom","mike"]
//刪除[]
$name1 = str_replace('[','',$_GET["name1"]);
$name1 = str_replace(']','',$name1);
//刪除"
$name1 = str_replace('"','',$name1);
//根據,分割成陣列
$namearr = explode(',',$name1);

//處理數學成績陣列
$math1 = str_replace('[','',$_GET["math1"]);
$math1 = str_replace(']','',$math1);
$matharr = explode(',',$math1);

$avg = 0;

foreach($namearr as $i=>$v)
{
$txt .= $i."同學".$v."的分數=".$matharr[$i]."\n";
$avg += $matharr[$i];
}
$avg /= count($matharr);
echo $txt;
echo "數學全班平均分數 = $avg";
?>

exp22_1

（1）exp22_1：讀取mySQL資料庫-資料表的全部記錄
功能：讀取sever主機php傳回資料庫mySQL（ch09）的資料表books的全部數據
http://acu.atwebpages.com/phpexample/app22-1.php
成果圖片， 畫面設計， 程式設計， 專案檔案
sql檔案ch09
screen1
一個按鈕（讀取資料庫）

一個垂直捲軸配置VerticalScrollArrangement1
一個Label（結果）

一個Web客戶端元件（Web）
一個訊息（notifier）

重點1：如何呼叫Web客戶端元件（Web）
when button1.click
先設定web1.url = http://acu.atwebpages.com/phpexample/app22-1.php
call web1.get

重點2：如何偵測網站主機的傳回值
when web1.GotText
if getResponsCode = 200
labelresult = responseContent
else
labelresult = 連線錯誤

重點3：很多主機的php的echo傳回的json文字，無法被讀取
原因：因為在第一個字元被該主機加上單一特殊字元，
改善方法：從第二個字元開始讀取即可
範例：
txt = segment
(text = get(responseContent)
(start = 2)
(length = length(get(responseContent)) - 1

重點4：如何把php傳回的json陣列，轉成多個list（書籍編號，書籍名稱，價格，負責員工編號）
global all = empty list
when web1.GotText
if getResponsCode = 200
set all = call web1.jsonTextEncode(jsonText= = segment(text = get(responseContent)(start = 2)(length = length(get(responseContent)) - 1)
顯示每一筆的資料
for each item in list(= get(all))
add item in list（list = get(書籍編號)）（item = look up in paris（key=書籍編號，pairs=item））
add item in list（list = get(書籍名稱)）（item = look up in paris（key=書籍名稱，pairs=item））
add item in list（list = get(價格)）（item = look up in paris（key=價格，pairs=item））
add item in list（list = get(負責員工編號)）（item = look up in paris（key=負責員工編號，pairs=item））
end for
call output（程序）

重點5：在label顯示全部的書本資料，一行一筆
global outputtxt = ""
output（程序）
for each number from 1 to（length of list(get(global 書籍編號))），by 1
do
outputtxt = outputtxt + join（
+ select item from list(list = get(書籍編號)，index=number）
+ \t
+ select item from list(list = get(書籍名稱)，index=number）
+ \t
+ select item from list(list = get(價格)，index=number）
+ \t
+ select item from list(list = get(負責員工編號)，index=number）
+ \n
）
end for
set labeloutput = outputtxt

重點6：app22-1.php印出ch09-books的全部資料
http://acu.atwebpages.com/phpexample/app22-1.php
<?php //資料庫設定
$dbServer = "....";
$dbName = "....";
$dbUser = "....";
$dbPass = "....";

// 建立 dsn 字串
$dsn = 'mysql:host='.$dbServer.';dbname='.$dbName.';charset=utf8';

try{ // 嘗試連線
$conn = new PDO($dsn, $dbUser, $dbPass);
} catch (PDOException $e) {
if ($e->getCode() == '1045') // 連線失敗
die("連線失敗"); // 即結束程式
}

//查詢資料表的的資料
$sql="SELECT * FROM books";
$result=$conn->query($sql); // 執行查詢

//給定$row[][]二維陣列-文字欄位////////
$rowall = $result->fetchAll(PDO::FETCH_ASSOC);

echo json_encode($rowall,JSON_UNESCAPED_UNICODE);

////釋放記憶體//////////////
$conn = NULL;
?>

exp22_2

（2）exp22_2：關鍵字查詢mySQL資料表的記錄
功能：關鍵字查詢主機php傳回資料庫mySQL（ch09）的資料表books的數據
http://acu.atwebpages.com/phpexample/app22-2.php?bookname=w
成果圖片， 畫面設計， 程式設計， 專案檔案
sql檔案ch09
複製exp22_1轉存到exp22_2，再修改

screen1
一個水平配置HorizontalArrangement1
一個textbox1（hint =輸入書本名稱關鍵字）
一個按鈕（讀取資料庫）

一個垂直捲軸配置VerticalScrollArrangement1
一個Label（結果）

一個Web客戶端元件（Web）
一個訊息（notifier）

重點1：如何呼叫Web客戶端元件（Web）
when button1.click
先設定web1.url = http://acu.atwebpages.com/phpexample/app22-2.php + ?bookname= + textbox1
call web1.get

重點2：如何偵測網站主機的傳回值
when web1.GotText
if getResponsCode = 200
labelresult = responseContent
else
labelresult = 連線錯誤

重點3：很多主機的php的echo傳回的json文字，無法被讀取
原因：因為在第一個字元被該主機加上單一特殊字元，
改善方法：從第二個字元開始讀取即可
範例：
txt = segment
(text = get(responseContent)
(start = 2)
(length = length(get(responseContent)) - 1

重點6：app22-2.php
http://acu.atwebpages.com/phpexample/app22-2.php?bookname=w
<?php
//資料庫設定
$dbServer = "....";
$dbName = "....";
$dbUser = "....";
$dbPass = "....";

// 建立 dsn 字串
$dsn = 'mysql:host='.$dbServer.';dbname='.$dbName.';charset=utf8';

try{ // 嘗試連線
$conn = new PDO($dsn, $dbUser, $dbPass);
} catch (PDOException $e) {
if ($e->getCode() == '1045') // 連線失敗
die("連線失敗"); // 即結束程式
}

//關鍵字查詢資料表的的資料
if(isset($_GET['bookname']))
$sql="SELECT * FROM books where 書籍名稱 like '%".$_GET['bookname']."%'";
else
$sql="SELECT * FROM books";

//給定$row[][]二維陣列-文字欄位///////////
$rowall = $result->fetchAll(PDO::FETCH_ASSOC);

echo json_encode($rowall,JSON_UNESCAPED_UNICODE);

////釋放記憶體/////////
$conn = NULL;
?>

exp22_3

（3）exp22_3：刪除一筆記錄
功能：php刪除一筆主機mySQL（ch09）的books資料表的記錄
http://acu.atwebpages.com/phpexample/app22-3.php?delnum=35
成果圖片， 畫面設計， 程式設計a， 程式設計b， 專案檔案
sql檔案ch09
複製exp22_2轉存到exp22_3，再修改

screen1
新增
一個水平配置HorizontalArrangement1
一個textbox1（hint =輸入書籍編號）
一個按鈕（刪除記錄）

新增
一個Web客戶端元件（Web2del）

重點1：如何呼叫Web客戶端元件（Web）
when button1.click
先設定web1.url = http://acu.atwebpages.com/phpexample/app22-3.php + ?delnum= + textboxdel
call web1.get

重點2：如何偵測網站主機的傳回值
when web1.GotText
if getResponsCode = 200
labelresult = responseContent
else
labelresult = 連線錯誤

重點3：很多主機的php的echo傳回的json文字，無法被讀取
原因：因為在第一個字元被該主機加上單一特殊字元，
改善方法：從第二個字元開始讀取即可
範例：
txt = segment
(text = get(responseContent)
(start = 2)
(length = length(get(responseContent)) - 1

重點6：app22-3.php
http://acu.atwebpages.com/phpexample/app22-3.php?delnum=35
<?php
//資料庫設定
$dbServer = "....";
$dbName = "....";
$dbUser = "....";
$dbPass = "....";

// 建立 dsn 字串
$dsn = 'mysql:host='.$dbServer.';dbname='.$dbName.';charset=utf8';

try{ // 嘗試連線
$conn = new PDO($dsn, $dbUser, $dbPass);
} catch (PDOException $e) {
if ($e->getCode() == '1045') // 連線失敗
die("連線失敗"); // 即結束程式
}

//刪除欄位/////
if(isset($_GET['delnum']))
{
$sql="delete from books where 書籍編號=".$_GET['delnum'];
if ($conn->exec($sql)) // 執行SQL指令
echo "資料庫刪除記錄成功。";
else
die("資料庫刪除記錄失敗".$_GET['delnum']);
}//end of if

////釋放記憶體///////////
$conn = NULL;
?>

exp22_4

（4）exp22_4：修改一筆記錄
功能：php修改一筆主機mySQL（ch09）的books資料表的記錄
http://acu.atwebpages.com/phpexample/app22-4edit.php?bookname=Excel基礎&price=200&mannum=1&id=33
成果圖片， 畫面設計a， 畫面設計b， 程式設計a， 程式設計b， 專案檔案
sql檔案ch09
複製exp22_3轉存到exp22_4，再修改

screen1
新增
一個水平配置HorizontalArrangement1
一個label（輸入號碼）
一個textbox1（）
一個按鈕（查詢該號碼資料）

一個水平配置HorizontalArrangement1
一個label（書名）
一個textbox1（）
一個label（價格）
一個textbox1（）

一個水平配置HorizontalArrangement1
一個label（負責員工）
一個按鈕（刪除記錄）
一個按鈕（修改記錄）

一個垂直捲軸配置VerticalScrollArrangement1
一個Label（結果）

新增
一個Web客戶端元件（Web1edit）
一個Web客戶端元件（Web1searchid）

重點1：如何呼叫Web客戶端元件（Web）
when button1.click
先設定web1.url = http://acu.atwebpages.com/phpexample/app22-4edit.php + ?bookname= + textboxbookname + &price= + textboxprice + &mannum= + textboxmannum + &id= + textboxid
call web1.get

重點2：很多主機的php的echo傳回的json文字，無法被讀取
原因：因為在第一個字元被該主機加上單一特殊字元，
改善方法：從第二個字元開始讀取即可
範例：
txt = segment
(text = get(responseContent)
(start = 2)
(length = length(get(responseContent)) - 1

重點3：欄位若是中文，無論修改或是新增，appinvetor都會無法存取，
修改方法：在欄位前面加上uriEncode
修改方法：使用call web1.UriEncode(text=textboxbooname)，就可以使中文字不會產生亂碼

重點4：輸入所要查詢的id，顯示該筆的資料（在textbox）
when button1searchid.click
先設定web1.url = http://acu.atwebpages.com/phpexample/app22-4searchid.php + ?id= + textboxsearchid
call web1.get

when web1searchid.GotText
if getResponsCode = 200
set all = call web1.jsonTextEncode(jsonText= = segment(text = get(responseContent)(start = 2)(length = length(get(responseContent)) - 1)
顯示每一筆的資料
for each item in list(= get(all))
set textboxbookname = look up in paris（key=書籍名稱，pairs=select list item (list=all, index=1)）
set textboxprice = look up in paris（key=價格，pairs=select list item (list=all, index=1)）
set textboxmannum = look up in paris（key=負責員工編號，pairs=select list item (list=all, index=1)）
end for
else
labelresult = 連線錯誤

重點5：修改一筆資料（在textbox輸入），儲存到資料庫
when button1edit.click
先設定web1.url = http://acu.atwebpages.com/phpexample/app22-4edit.php
+ ?id= + textboxid
+ &bookname= + call web1edit.jsonTextEncode(textboxbookname)
+ &price= + textboxprice
+ &mannum= + textboxmannum
call web1.get

when web1edit.GotText
if getResponsCode = 200
set all = call web1.jsonTextEncode(jsonText= = segment(text = get(responseContent)(start = 2)(length = length(get(responseContent)) - 1)
顯示每一筆的資料
for each item in list(= get(all))
set textboxbookname = look up in paris（key=書籍名稱，pairs=select list item (list=all, index=1)）
set textboxprice = look up in paris（key=價格，pairs=select list item (list=all, index=1)）
set textboxmannum = look up in paris（key=負責員工編號，pairs=select list item (list=all, index=1)）
end for
else
labelresult = 連線錯誤

重點6：app22-4searchid.php
http://acu.atwebpages.com/phpexample/app22-4searchid.php?id=33
<?php
//資料庫設定
$dbServer = "....";
$dbName = "....";
$dbUser = "....";
$dbPass = "....";

// 建立 dsn 字串
$dsn = 'mysql:host='.$dbServer.';dbname='.$dbName.';charset=utf8';

try{ // 嘗試連線
$conn = new PDO($dsn, $dbUser, $dbPass);
} catch (PDOException $e) {
if ($e->getCode() == '1045') // 連線失敗
die("連線失敗"); // 即結束程式
}

//查詢資料表的的資料
if(isset($_GET['id']))
{
$sql="SELECT * FROM books where 書籍編號=".$_GET['id'];
$result=$conn->query($sql); // 執行查詢
//給定$row[][]二維陣列-文字欄位///////////////
$rowall = $result->fetchAll(PDO::FETCH_ASSOC);

echo json_encode($rowall,JSON_UNESCAPED_UNICODE);
}

////釋放記憶體///////////
$conn = NULL;
?>

重點7：app22-4edit.php
http://acu.atwebpages.com/phpexample/app22-4edit.php?bookname=Excel基礎&price=200&mannum=1&id=33
<?php
//資料庫設定
$dbServer = "....";
$dbName = "....";
$dbUser = "....";
$dbPass = "....";

// 建立 dsn 字串
$dsn = 'mysql:host='.$dbServer.';dbname='.$dbName.';charset=utf8';

try{ // 嘗試連線
$conn = new PDO($dsn, $dbUser, $dbPass);
} catch (PDOException $e) {
if ($e->getCode() == '1045') // 連線失敗
die("連線失敗"); // 即結束程式
}

//修改欄位
if(isset($_GET['id']))
{
$sql="update books set 書籍名稱='".$_GET['bookname']."',價格=".$_GET['price'].",負責員工編號=".$_GET['mannum']." where 書籍編號=".$_GET['id'];

if ( $conn->exec($sql) ) // 執行SQL指令
echo "資料庫更新記錄成功";
else
die("資料庫更新記錄失敗");
}

////釋放記憶體//////////////
$conn = NULL;
?>

exp22_5

（5）exp22_5：新增一筆記錄
功能：php新增一筆主機mySQL（ch09）的books資料表的記錄
http://acu.atwebpages.com/phpexample/app22-4edit.php?bookname=Excel基礎&price=200&mannum=1&id=33
成果圖片， 畫面設計a， 畫面設計b， 程式設計a， 程式設計b， 程式設計c， 程式設計d， 專案檔案
sql檔案ch09
複製exp22_4轉存到exp22_5，再新增

screen1
新增
一個按鈕buttonadd（新增）

新增
一個Web客戶端元件（Web1add）

重點1：欄位若是中文，無論修改或是新增，appinvetor都會無法存取，
修改方法：在欄位前面加上uriEncode
修改方法：使用call web1.UriEncode(text=textboxbooname)，就可以使中文字不會產生亂碼

重點2：新增一筆資料（在textbox輸入），儲存到資料庫
when button1add.click
先設定web1.url = http://acu.atwebpages.com/phpexample/app22-5add.php
+ ?id= + textboxid
+ &bookname= + call web1edit.jsonTextEncode(textboxbookname)
+ &price= + textboxprice
+ &mannum= + textboxmannum
call web1.get

重點3：app22-5add.php
http://acu.atwebpages.com/phpexample/app22-5add.php?bookname=Excel基礎&price=200&mannum=1&id=33
<?php
//資料庫設定
$dbServer = "....";
$dbName = "....";
$dbUser = "....";
$dbPass = "....";

// 建立 dsn 字串
$dsn = 'mysql:host='.$dbServer.';dbname='.$dbName.';charset=utf8';

try{ // 嘗試連線
$conn = new PDO($dsn, $dbUser, $dbPass);
} catch (PDOException $e) {
if ($e->getCode() == '1045') // 連線失敗
die("連線失敗"); // 即結束程式
}

//新增欄位///////////
if(isset($_GET['bookname']))
{
$sql="INSERT books(書籍名稱,價格,負責員工編號) VALUES ('{$_GET['bookname']}',{$_GET['price']},{$_GET['mannum']})";
if ($conn->exec($sql)) // 執行SQL指令
echo "資料庫新增記錄成功";
else
die("資料庫新增記錄失敗");
}

////釋放記憶體//////////
$conn = NULL;
?>