• 沒有找到結果。

程式設計 3

N/A
N/A
Protected

Academic year: 2022

Share "程式設計 3"

Copied!
52
0
0

加載中.... (立即查看全文)

全文

(1)

本章概念

App 程式設計

3

3-1 認識 M I T App I nventor P.60

進入AI2 的世界、App 開發基本流程、

畫面編排簡介、元件與屬性、程式設計簡介

3-2 App 實作①—匯率換算 P.70

使用者介面元件、App 程式設計、使用模擬器測試 app

3-3 App 實作②—英文學習幫手 P.82

利用表格配置元件、按鈕圖片化、使用非可視元件

3-4 App 實作③—隨身資訊站 P.93

水平配置元件、多頁式設計、網路瀏覽器元件

58

p058-109_ch3.indd 58

p058-109_ch3.indd 58 2020/10/2 下午 04:30:412020/10/2 下午 04:30:41

(2)

應用程式(App)輕鬆完成。現在我們將學習與Scratch同為視覺化程式 設計軟體的M

I

T App

I

nventor,設計、開發自己的第一個App!

59

p058-109_ch3.indd 59

p058-109_ch3.indd 59 2020/10/2 下午 04:30:442020/10/2 下午 04:30:44

(3)

認識MIIT App IInventor

3-1 3-1

MIT A pp I nventor S cratch 一樣,是由美國麻省 理工學院( MIT)開發的視覺化程式設計軟體,可以撰 寫 A ndroid 作業系統 的應用程式( A pp )。

MIT A pp I nventor 目前所提供的開發環境是第二代 版本,以下簡稱 AI2 (A pp I nventor 2)。以 AI2 完成 的 app 可以在 A ndroid 系統的手機、平板電腦上執行,

也可以透過模擬器在電腦上測試。使用 AI2 開發程式的 優點如圖 1-3-1。

知識快遞

Android 的常見中文譯名 為安卓,是Google 開發的 智慧型手機作業系統,另外 常見的手機作業系統還有蘋 果公司開發的iOS。

android iOS

1 豐富的配套元件

可直接套用相機、錄音、地 圖等功能,無需自行開發。

2 瀏覽器上直接編寫

無需設定複雜的程式開發環 境,可隨時隨地設計app。

3 視覺化開發環境

拖拉積木即可完成畫面編排 及程式碼的編寫。

4 方便發布及使用

作品可以安裝到Android 手 機使用,亦可發布販售。

圖 1-3-1 使用 AI2 開發程式的優點。

60

資訊科技篇

p058-109_ch3.indd 60

p058-109_ch3.indd 60 2020/10/2 下午 04:30:452020/10/2 下午 04:30:45

(4)

1 進入 A I 2 的世界

AI2 利用雲端進行開發,我們只需要一個 G oogle 戶,便能隨時隨地在不同電腦上編輯同一個專案,不論 在學校或家中均能持續創作,省去複製檔案的麻煩。

1

2

1. 登入開發網站

① 進入網站 http://ai2.

Appinventor.mit.edu/

② 輸入 Google 帳號及密碼,

即可進入網站。

1

2

2. 切換為中文介面

① 點擊選單的 English 。 ② 點選 繁體中文 。

開啟 AI2 網頁 Step1

小叮嚀

如果沒有 Google 帳戶的話,也可以透過以下網址進入網站:

http://code.Appinventor.mit.edu/login/

首次登入: 點擊「Continue Without An Account」

進入專案頁面,並記住專案密碼。

再次進入: 輸入專案密碼,即可再次進入相同專案。

1

2

3

程 式 設 計

App

3-1 3-2 3-4 3-3

3-1 認識 MIT App Inventor

61

p058-109_ch3.indd 61

p058-109_ch3.indd 61 2020/10/2 下午 04:30:452020/10/2 下午 04:30:45

(5)

2 App 開發基本流程

AI2 必須先建立專案,才能開始 app 開發工作,建立專案流程如下:

①點擊列表上的 專案 ;②點擊 新增專案 ;③輸入專案名稱;④點擊 確定 。

設計 app 的使用介面,包括操作畫面的布置、按鈕或元件規畫,以及頁面的設計等。

A 建立專案 B 畫面編排 C 程式設計 D 測試修正

A 建立專案 B 畫面編排 C 程式設計 D 測試修正

AI2 專案的命名規則只能使用英文字母、數字及_(底線符號),且第1個字元必須是英文字母。

1

2

3

4

62

資訊科技篇

p058-109_ch3.indd 62

p058-109_ch3.indd 62 2020/10/2 下午 04:30:462020/10/2 下午 04:30:46

(6)

為 app 中的按鈕、文字、圖像等元件撰寫程式。

利用電腦的模擬器測試 app 功能是否正確,也可以將 app 下載到 A ndroid 手機中,

實際使用手機來測試功能。

A 建立專案 B 畫面編排 C 程式設計 D 測試修正 A 建立專案 B 畫面編排 C 程式設計 D 測試修正

3

程 式 設 計

App

3-1 3-2 3-4 3-3

3-1 認識 MIT App Inventor

63

p058-109_ch3.indd 63

p058-109_ch3.indd 63 2020/10/2 下午 04:30:472020/10/2 下午 04:30:47

(7)

1-3-1 畫面編排介面各區塊說明

編號 名稱 功能說明

專案名稱 目前編排設計的專案名稱。

元件面板區 各類元件清單,包含使用者介面、介面配置、多媒體等類別,可將元件 拖曳到工作面板區中。

工作面板區 畫面的編排配置區,也是app 實際顯示的畫面;調整元件屬性值後,

可以在此區看到設定的結果。

元件清單區 列出專案中所使用到的所有元件。

元件屬性區 可在本區修改元件屬性值,例如:高度、寬度、字體大小等。

素材區 專案中所使用的媒體素材必須先上傳到素材區。

3 畫面編排簡介

1 畫面編排介面說明

AI2 在建立專案後會自動開啟畫面編排介面,或是點選畫面右上方的 畫面編排 進 入。各區功能說明請參考表 1-3-1。

❷ ❸ ❹

64

資訊科技篇

p058-109_ch3.indd 64

p058-109_ch3.indd 64 2020/10/2 下午 04:30:482020/10/2 下午 04:30:48

(8)

2 畫面編排基本操作

1

2

1. 拖曳元件

① 在「元件面板區」中找到 所需的元件。

② 將元件拖曳到「工作面板 區」中。

1 3 2

4

2. 重新命名元件

① 點 擊 元 件 清 單 區 下 方 的 重新命名 。

② 輸入新名稱。

③ 點擊 確定 。

④ 元件清單中的元件名稱會 依設定改變。

1

2

3. 設定元件屬性。

① 在元件屬性區進行各種屬 性設定。

② 設定時,工作面板區會即 時更新畫面。

當畫面中有多個元件時,須 先點選「元件清單區」中的元 件,再進行屬性設定。

拖曳元件

新增元件到畫面 中。

重新命名元件

賦予元件適當的名 稱,以利管理。

設定元件屬性

設定元件的外觀、

效果等屬性。

3

程 式 設 計

App

3-1 3-2 3-4 3-3

3-1 認識 MIT App Inventor

65

p058-109_ch3.indd 65

p058-109_ch3.indd 65 2020/10/2 下午 04:30:492020/10/2 下午 04:30:49

(9)

4 元件與屬性

AI2 的畫面由按鈕、圖片、文字等不同「元件」構成,而元件所 呈現的背景顏色、字體大小、對齊方式等狀態,則由「屬性」控制。

接下來,我們就先來認識元件與屬性。

1 常用元件

在 AI2 的元件面板中,根據功能的不同,將元件區分成許多類 別,其中最常用的是「使用者介面」類別內的 標籤 、 文字輸入盒 、

按鈕 這三種元件(如下圖),其功能說明請參考表 1-3-2。

1-3-2 常見元件介紹

編號 元件名稱 圖示 元件功能

標籤 顯示文字的元件,常用於顯示內容文字、

說明。

文字輸入盒 讓使用者輸入文字或數字,通常會搭配按

鈕元件使用。

按鈕 讓使用者與程式互動的主要元件,當元件

被點擊時會觸發特定功能。

1

2 3

66

資訊科技篇

p058-109_ch3.indd 66

p058-109_ch3.indd 66 2020/10/2 下午 04:30:502020/10/2 下午 04:30:50

(10)

2 常見屬性

AI2 中各元件常具有相同的屬性項目,這裡我們以標籤元件為例(表 1-3-3),介 紹常見的屬性,以及屬性如何影響元件。

1-3-3 標籤元件屬性

屬性 說明

背景顏色 文字標籤的背景顏色。

字體大小 元件的文字大小。

高度、寬度

標籤元件的高度與寬度,有4 種模式可選擇,

右圖以寬度為例:

自動:隨內容自動調整大小。

填滿:填滿螢幕。

像素:依輸入的像素顯示。

比例:依輸入的比例顯示。

文字 標籤所呈現的文字內容。

可見性 設定是否顯示在螢幕上,預設為「勾選」(顯示)。

App 的運作方式,是當使用者觸發「事件」時(例如按鈕被按下),會依照預設的「方法」

來作出相對的反應,包括屬性變化或功能執行。以自動門為例:

App 運作邏輯

歡迎光臨

喇叭

開門鈕

自動門

開 門

開 門

按下 開門鈕

元  件

編排成app 畫面

事  件

觸發程式的條件

方  法

利用程式做出反應

結  果

執行功能

屬性改變

喇叭播放語音

門變成開啟狀態

3

程 式 設 計

App

3-1 3-2 3-4 3-3

3-1 認識 MIT App Inventor

67

p058-109_ch3.indd 67

p058-109_ch3.indd 67 2020/10/2 下午 04:30:512020/10/2 下午 04:30:51

(11)

5 程式設計簡介

1 程式設計介面

專案畫面編排完成後,就要點選右上方的 程式設計 ,進入 程式設計介面,開始程式的撰寫。程式設計介面各區功能說明 請參考表 1-3-4。

1-3-4 程式設計介面各區塊說明

編號 名稱 功能說明

方塊區

撰寫程式時所使用的方塊(等同於Scratch 的積木),包含內件方塊、

元件方塊等。

內件方塊:包含數學運算、流程控制等功能方塊。

元件方塊:所有安排在app 畫面中的元件均會出現在此。

工作面板區 編寫程式碼的區域。只要將方塊拉到此區,即可開始編寫程式。

背包 可存放常用的程式片段,需要時可取出使用,不必重新編寫。

垃圾桶 不要的程式方塊可拖曳到垃圾埇丟棄,也可以直接按鍵盤的「Delete 鍵」刪除。

❶ ❷

編排在畫面中的元 件,會逐一列在元 件方塊中。

68

資訊科技篇

p058-109_ch3.indd 68

p058-109_ch3.indd 68 2020/10/2 下午 04:30:512020/10/2 下午 04:30:51

(12)

2 元件方塊分類

點選元件方塊中的元件時(例如:標籤、文字輸入盒、按鈕),工 作面板中會顯示該元件可使用的程式方塊(圖 1-3-2),各種方塊以不 同顏色來區分,方便我們辨識與使用(表 1-3-5)。

1-3-5 元件方塊的顏色與分類

類別 功能介紹 顏色 範例

事件 偵測到觸發程式的事件時,

執行方塊中的程式。 土黃色

方法 呼叫元件執行內建的各種方

法與功能。 紫色

屬性

取得元件某項屬性的值。 淺綠色

設定元件某項屬性的值。 深綠色

圖 1-3-2 點擊不同元件,工作面板區會出現相關的程式方塊。

3

程 式 設 計

App

3-1 3-2 3-4 3-3

3-1 認識 MIT App Inventor

69

p058-109_ch3.indd 69

p058-109_ch3.indd 69 2020/10/2 下午 04:30:522020/10/2 下午 04:30:52

(13)

App實作① —匯率換算

3-2 3-2

媽媽要去日本旅遊,希望能有個簡 單的日圓與臺幣換算的手機 app。

請播放範例影片 匯率換算.mp4 , 觀察程式的執行情形,用 AI2 幫媽媽完 成任務吧!

【程式摘要】

1. 先在輸入區輸入數字。

2. 按下 換算臺幣鈕 ,顯示該數字的日圓換算成臺幣的金額。

3. 按下 換算日圓鈕 ,顯示該數字的臺幣換算成日圓的金額。

題目解析流程

任務說明

換算結果 輸入 金額

設定新專案

設定標題

設定事件觸發條件

啟動模擬器

元件布置

(標籤、文字輸入盒、按鈕元件)

匯率換算

更新模擬器 測試App功能 進入專案

開始

畫面編排

測試修正 建立專案

程式設計

設定元件屬性

70

資訊科技篇

p058-109_ch3.indd 70

p058-109_ch3.indd 70 2020/10/2 下午 04:30:532020/10/2 下午 04:30:53

(14)

在本節中,我們將循著 3-1 節說明的「A pp 開發基本 流程」,根據使用需求,完成第一個 app 程式,並學習使 用 標籤 、 按鈕 、 文字輸入盒 等元件與屬性設定。

學習目標 1. 使用者介面元件。

2. App 程式設計。

3. 使用模擬器測試 app。

1 2

1. 新增專案

① 點擊 專案 。 ② 點擊 新增專案 。

1

2

2. 設定專案名稱

① 輸入名稱。

② 點擊 確定 。

設定新專案 Step1

1. 進入專案

建 立 專 案 後 , 會 自 動 產 生 Screen1,並進入畫面編排 介面。

元件清單中,Screen1 不 能 重 新 命 名 、 也 不 能 刪 除。

Step2 進入專案

A 建立專案 B 畫面編排 C 程式設計 D 測試修正

3

程 式 設 計

App

3-1 3-2 3-4 3-3

3-2 App實作①――匯率換算

71

p058-109_ch3.indd 71

p058-109_ch3.indd 71 2020/10/2 下午 04:30:532020/10/2 下午 04:30:53

(15)

1

2

3

1. 修改標題屬性

① 點選元件清單內的

Screen1。

② 在元件屬性區設定標題為

「匯率換算」。

③ 設定完成。

Step1 設定標題

編排畫面時,我們可以在紙上畫下設 計圖,思考每個位置能用什麼元件來編 排。接下來,我們將完成本app 的畫面 編排。

A 建立專案 B 畫面編排 C 程式設計 D 測試修正

72

資訊科技篇

p058-109_ch3.indd 72

p058-109_ch3.indd 72 2020/10/2 下午 04:30:552020/10/2 下午 04:30:55

(16)

使用者介面元件

在 AI2 中,最常用到的是「使用者介面」

類別中的元件,生活中常用的app,多半都 是以這類元件構成。

在設計畫面時,多參考常用的 app,也 是培養設計能力的一個好方法。

1 2

1. 加入元件

① 點選使用者介面內的 標籤 元件。

② 拖曳到工作面板中。

Step2 元件布置

1

3

4

5

2

1. 重新命名元件

① 點選元件清單內的 標籤1 。

② 點擊 重新命名 。

③ 輸入新名稱「App 標題」。

④ 點擊 確定 。 ⑤ 設定完成。

設定元件屬性 Step3

登入

登入 輸入帳號或email

**********

標籤 文字輸入盒 按鈕

3

程 式 設 計

App

3-1 3-2 3-4 3-3

3-2 App實作①――匯率換算

73

p058-109_ch3.indd 73

p058-109_ch3.indd 73 2020/10/2 下午 04:30:562020/10/2 下午 04:30:56

(17)

請仿照上述步驟,設定以下4 種元件,完成畫面編排:

手腦並用

元件

種類 文字輸入盒 按鈕 按鈕 標籤

命名 輸入金額 換算臺幣鈕 換算日圓鈕 換算結果

屬性

字體大小:24 提示:輸入金額 僅限數字:勾選

字體大小:20 文字:換算臺幣

字體大小:20 文字:換算日圓

字體大小:24 文字:換算結果

設定前。 設定後。

1

3

2

2. 設定屬性

① 點選元件清單內的 App 標題 。

② 在元件屬性區修改設定:

字體大小:40。

文字:臺幣日圓轉換。

③ 設定完成。

74

資訊科技篇

p058-109_ch3.indd 74

p058-109_ch3.indd 74 2020/10/2 下午 04:30:582020/10/2 下午 04:30:58

(18)

假設1 臺幣 =3.53 日圓,如果輸入金額為「500」:

1. 換算成臺幣應為多少錢?計算式為何?

2. 換算成日圓應為多少錢?計算式為何?

手腦並用

1. 進入程式設計介面。

點擊畫面右上角的 程式設 計 。

設定事件觸發條件 Step1

App 程式設計邏輯

App 程式設計的目標,是讓使用者操作 app 的各種功能,並依據不同的事件來觸發不 同功能的程式。例如當使用者點擊撥號按鈕,

就能觸發撥打電話的程式。

本節 app 中,使用者可能點擊換算臺幣或 換算日圓的按鈕,我們分別要根據狀況,撰寫 出對應的程式。

A 建立專案 B 畫面編排 C 程式設計 D 測試修正 3

程 式 設 計

App

3-1 3-2 3-4 3-3

3-2 App實作①――匯率換算

75

p058-109_ch3.indd 75

p058-109_ch3.indd 75 2020/10/2 下午 04:30:582020/10/2 下午 04:30:58

(19)

2 1

2. 選取事件方塊

① 點擊元件方塊內的 換算 臺幣鈕 。

② 拖曳事件方塊 當換算臺 幣鈕.被點選 到工作面板 中。

2 1

3. 設定方法方塊

① 點擊元件方塊內的 換算 結果 。

② 拖曳屬性方塊 設換算結 果.文字為 到事件方塊 當換算臺幣鈕.被點選 中。

2

4

1 3

1. 使用數學方塊

① 點選內件方塊內的 數學 。 ② 拖曳除法方塊 到

工作面板中。

③ 加入數字方塊 到工作 區域中。

④ 將 方 塊 內 的 數 字 0 改 成

「3.53」。

Step2 匯率換算

76

資訊科技篇

p058-109_ch3.indd 76

p058-109_ch3.indd 76 2020/10/2 下午 04:31:002020/10/2 下午 04:31:00

(20)

1

2

2. 取得元件 輸入金額 的屬性 內容

① 點擊元件方塊內的 輸入金 額 。

② 加入屬性方塊 輸入金額 . 文字 到畫面中。

3. 組合方塊

拖 曳 方 塊 組 合 成 換 算 的 算 式,再放入屬性方塊 設換算

結果.文字為 內。

4. 完成匯率換算。

請參考上述步驟,完成「換算日圓鈕」的按鈕。

手腦並用

Scratch 中每個「角色」都有自己的程式,且不同角色無法互相控制,必須通過廣播功 能通知其他角色,由另一個角色自己執行特定程式。

AI2 中,所有「元件」的程式都統一寫在「程式設計的工作面板」中,而且可以直接控 制其他元件,例如本範例中,可以直接變更 換算結果 的文字屬性(如下圖)。

延伸學習 Scratch 與 A I 2 比一比:「廣播功能」與「直接控制」

3

程 式 設 計

App

3-1 3-2 3-4 3-3

3-2 App實作①――匯率換算

77

p058-109_ch3.indd 77

p058-109_ch3.indd 77 2020/10/2 下午 04:31:012020/10/2 下午 04:31:01

(21)

1

2

1. 執行模擬器程式

① 執行 aiStarter。

② 等待執行畫面出現。

必須先安裝模擬器。

2

1 2. 連線模擬器

① 點擊 連線 。 ② 選擇 模擬器 。

若為首次使用,須更新模 擬器,以利專題開發。詳 細流程請見Step2。

啟動模擬器 Step1

在製作 app 的過程中,我們可以善用測試的功能,逐步檢查小區塊的程式功能,

以方便即時修改;在完成app 之後,也別忘記再測試整體功能,確保 app 能夠正 常運行。

模擬器的下載、安裝方法,以及測試方式的說明,請見 P.104。

A 建立專案 B 畫面編排 C 程式設計 D 測試修正

78

資訊科技篇

p058-109_ch3.indd 78

p058-109_ch3.indd 78 2020/10/2 下午 04:31:012020/10/2 下午 04:31:01

(22)

2 1

1. 啟動更新程式

① 連結模擬器後,模擬器會 自動檢查是否過期。

② 點擊 確定 開始更新。

2 1

2. 開始更新模擬器

① 進入模擬器,點擊 OK 確 定更新提示。

② 點擊 Install ,開始安裝更 新。

1 2

3. 完成升級

① 更新完成後,在網頁對話 框點選 升級完成 。 ② 在模擬器點擊 Done ,關

閉模擬器。

2

1

4. 重啟模擬器

① 模擬器升級完畢後,點擊 重置連線 。

② 重置完畢後,點擊 模擬器 重新連線。

更新模擬器

Step2 3

程 式 設 計

App

3-1 3-2 3-4 3-3

3-2 App實作①――匯率換算

79

p058-109_ch3.indd 79

p058-109_ch3.indd 79 2020/10/2 下午 04:31:022020/10/2 下午 04:31:02

(23)

1

2

1. 進入模擬器

① 向右拖曳解鎖鈕。

② 點 擊 手 機 畫 面 中 的 M I T AI2 Companion。

1 2

3

2. 輸入金額

① 點擊 文字輸入欄 。 ② 輸入測試金額。

③ 點擊 完成 。

2 1

1 2

3. 功能測試

① 分別點擊按鈕。

② 檢查執行結果是否正確。

測試 App 功能 Step3

80

資訊科技篇

p058-109_ch3.indd 80

p058-109_ch3.indd 80 2020/10/2 下午 04:31:042020/10/2 下午 04:31:04

(24)

小試身手  校慶園遊會—飲料點餐①

  學校要辦理園遊會,班上同學 決定販賣飲料,為了在眾多販賣飲 料的班級中脫穎而出,大家討論要 推出「飲料點餐 app 」,讓不同班 級的人可以隨時用 app 點餐。

總金額

請設計出符合以下規則的 app ,或參考上方圖片進行設計。

1. 飲料售價:可樂一杯 15 元;奶茶一杯 20 元。

2. 使用者在飲料下方填入杯數(提示文字為「輸入杯數」,只能填入數字)。

3. 若填入的杯數少於 1 杯時(包含負數),一律以 0 杯計算。

4. 若使用者點擊 結帳鈕 ,計算並顯示 總金額 。

小試身手 

解題提示

1. AI2 中的「大於」、「小於」、「等於」方塊,歸類於內件方塊中的 文字 類別。

2. 條件判斷方塊屬於 流程控制 類別。

3. 若有兩個以上的條件要判斷,所需使用的「且」、「或」屬於 邏輯 類別。

金額

15

確認 結帳

10

3

程 式 設 計

App

3-1 3-2 3-4 3-3

3-2 App實作①――匯率換算

81

p058-109_ch3.indd 81

p058-109_ch3.indd 81 2020/10/2 下午 04:31:052020/10/2 下午 04:31:05

(25)

App實作② —英文學習幫手

3-3 3-3

任務說明

檔案 3-3 下載方式請見 P.3 Apple

語音

單字 點擊

英文老師想透過有趣的方式提升班上 的英文成績,便構想了一款能隨時隨地學 習英文的 app 程式。

請播放範例影片 英文學習幫手.mp4 , 觀察程式的執行情形,用 AI2 幫老師一起 完成任務吧!

【程式摘要】

1. 以水果的圖片作成按鈕。

2. 按下水果圖片,顯示該水果的單字。

3. 按下水果圖片,念出該水果英語發音。

題目解析流程

設定新專案

設定標題

建立素材庫

顯示單字內容 發出英文語音 開始

畫面編排

測試修正 建立專案

程式設計

按鈕圖片化 元件布置-顯示、發音元件 元件布置-表格配置元件

82

資訊科技篇

p058-109_ch3.indd 82

p058-109_ch3.indd 82 2020/10/2 下午 04:31:062020/10/2 下午 04:31:06

(26)

在本節中,我們將透過改變元件的屬性,讓 app 的畫 面呈現變得更活潑,再利用 AI2內建的文字語音轉換元件,

讓 app 能夠「開口說話」。

學習目標 1. 利用表格配置元件。

2. 按鈕圖片化。

3. 使用非可視元件。

2 1

1. 新增專案

① 點擊 專案 。 ② 點擊 新增專案 。

1

2

2. 設定專案名稱

① 輸入名稱。

② 點擊 確定 。

設定新專案 Step1

A 建立專案 B 畫面編排 C 程式設計 D 測試修正

3

程 式 設 計

App

3-1 3-2 3-4 3-3

3-3 App實作②――英文學習幫手

83

p058-109_ch3.indd 83

p058-109_ch3.indd 83 2020/10/2 下午 04:31:062020/10/2 下午 04:31:06

(27)

素材庫

在一個 app 中,如果畫面中放滿文字與按鈕,將 顯得呆板與單調。若以圖片代替按鈕、標籤等元件,

不僅讓畫面更吸引人,還能有效表示出元件的功能。

除了圖片之外,影片、音訊等也可以用在設計中,

但這些要用到的素材必須先上傳雲端才能取用,因此 必須建立素材庫來存放,並以適當的命名來分類、管 理素材。

1

2

1. 使用上傳功能

① 點擊 上傳文件 。 ② 點擊 選擇檔案 。

1

3 2

1

2. 上傳素材

① 選擇要上傳的素材。

② 點擊 開啟 匯入。

③ 將素材逐一上傳。

素 材 會 依 照 上 傳 順 序 排 列,且上傳後不能更名。

建立素材庫 Step2

84

資訊科技篇

p058-109_ch3.indd 84

p058-109_ch3.indd 84 2020/10/2 下午 04:31:082020/10/2 下午 04:31:08

(28)

【屬性值設定參考】

App 名稱:英文學習幫手 水平對齊:置中

螢幕方向:鎖定直式畫面 標題:英文學習幫手

1 2 1. 設定 Screen1

① 點選元件清單內的 Screen1 。

② 在元件屬性區設定其屬性 值。

【屬性值設定參考】

粗體:勾選 字體大小:40 文字顏色:藍色 文字:英文單字卡

2

3

1

2. 設定標題

① 加入 標籤 元件到工作面 板。

② 重新命名 標籤 1 為 App 標題 。

③ 在元件屬性區設定其屬性 值。

Step1 設定標題

接下來,我們準備開始編排畫面,左圖是本節 app 完成的畫面。想一想,這個 app 是由哪些元件 構成的呢?

A 建立專案 B 畫面編排 C 程式設計 D 測試修正 3

程 式 設 計

App

3-1 3-2 3-4 3-3

3-3 App實作②――英文學習幫手

85

p058-109_ch3.indd 85

p058-109_ch3.indd 85 2020/10/2 下午 04:31:092020/10/2 下午 04:31:09

(29)

【屬性值設定參考】

列數:2 行數:2

2

1

1. 加入表格配置

① 拖 曳 介 面 配 置 類 別 內 的 表格配置 元 件 到 工 作 面 板。

② 在元件屬性區設定 表格配置 1 屬性值。

1

2

2. 加入按鈕元件

① 拖曳 按鈕 元件到表格左 上角。

② 重新命名 按鈕 1 為 蘋 果 。

元件布置-表格配置元件 Step2

表格配置元件

當我們要在畫面中放置多個元件時,除了將元件一個 個由上往下堆疊外,也能使用表格來安排這些元件的位 置,不僅讓畫面更整齊,也使畫面編排更具有彈性、更加 方便。

86

資訊科技篇

p058-109_ch3.indd 86

p058-109_ch3.indd 86 2020/10/2 下午 04:31:102020/10/2 下午 04:31:10

(30)

1

【屬性值設定參考】

高度:100 像素 寬度:100 像素 圖像:apple.png 文字:【留空】

2

1. 更改按鈕屬性

① 在元件屬性區修改 蘋果 的屬性。

② 設定完成。

按鈕圖片化 Step3

按鈕圖片化

許多 app 會以圖片取代文字或按鈕,讓 畫面更顯活潑。例如常見的撥電話、GPS 定 位、播放或暫停鍵,都是按鈕圖片化的例子。

透過更改按鈕的屬性,我們能以圖片呈現 按鈕的外觀,讓版面簡潔易懂、清楚傳達按鈕 的功能。

1. 請參考蘋果的作法,完成其他按鈕的設定。

2. 在 3-1 節時,我們學到了用「百分比」設定寬度及高度的方式,請試著使用百分比來設定 按鈕,想一想,這樣做有什麼差別?

手腦並用

表格位置 右上 左下 右下

命名 葡萄 橘子 草莓

高度、 寬度 100、100 100、100 100、100 圖像 grape.png orange.png strawberry.png

文字 【留空】 【留空】 【留空】

3

程 式 設 計

App

3-1 3-2 3-4 3-3

3-3 App實作②――英文學習幫手

87

p058-109_ch3.indd 87

p058-109_ch3.indd 87 2020/10/2 下午 04:31:112020/10/2 下午 04:31:11

(31)

2

【屬性值設定參考】

字體大小:36 文字:【留空】

1

1. 加入標籤元件

① 加入 標籤 元件,命名為 單字顯示 。

② 在 元 件 屬 性 區 設 定 其 屬 性。

留空是為了在還沒點擊圖 片 時 , 不 要 出 現 任 何 文 字。

2

【屬性值設定參考】

國家:USA 語音:en

1

2. 加入文字語音轉換器元件

① 加入 多媒體 類的 文字語

音轉換器 元件。

② 在元件屬性區設定 文字語 音轉換器 1 屬性值。

加入非可視元件後,AI2 會在工作面板顯示提示。

元件布置-顯示、發音元件 Step4

非可視元件設計

在音樂播放程式中,點擊播放鈕,便會有音樂出現,但畫 面中無法看見「音樂」,這類元件稱為「非可視元件」。非可 視元件包含播放聲音、拍照、錄音等,雖然不會呈現在畫面 上,但app 要使用其功能時,就必須加入畫面編排之中。

本節 app 中,我們要加入可以唸出英文單字的「文字語 音轉換器」元件,就是一種非可視元件。

88

資訊科技篇

p058-109_ch3.indd 88

p058-109_ch3.indd 88 2020/10/2 下午 04:31:132020/10/2 下午 04:31:13

(32)

2

1

1. 選取觸發按鈕事件方塊

① 點擊元件方塊中 表格配

置1 內的 蘋果 。

② 拖曳事件方塊 當蘋果.被 點選 到工作面板中。

1

2

2. 設定更改屬性方塊

① 點擊元件方塊中的 單字 顯示 。

② 拖曳屬性方塊 設單字顯 示. 文字為 到 當蘋果.

被點選 中。

3 1

2 3. 更改文字屬性的內容

① 點選內件方塊 文字 。 ② 將空白文字方塊放入屬性

方塊 設單字顯示.文字為 的插入項。

③ 在空白文字方塊內輸入文 字「Apple」。

顯示單字內容 Step1

完成畫面編排後,準備開始程式設計,我們必須在按鈕被點擊時讓文字顯示。

想一想, 當… 被點選 ,是屬於 事件方塊 、 方法方塊 、 屬性方塊 的哪一種呢?

A 建立專案 B 畫面編排 C 程式設計 D 測試修正 3

程 式 設 計

App

3-1 3-2 3-4 3-3

3-3 App實作②――英文學習幫手

89

p058-109_ch3.indd 89

p058-109_ch3.indd 89 2020/10/2 下午 04:31:142020/10/2 下午 04:31:14

(33)

●功能說明

在使用 app 的許多情況中,我們會發現類似的元件有著相 同功能。例如遊戲中的方向鍵,上下左右都代表著移動功能;

移動的方向不同,只是改變的屬性值不同。

在重複撰寫類似程式碼時,通常會使用複製、貼上的方式 再逐一修改,而在App Inventor 2 中,還可以利用背包功能來 達成,將常用的程式放入背包中,便可以重複取出使用,更能 跨專案使用。

●使用背包功能

背包功能

1

2

1. 新增程式到背包

① 在想要複製的方塊處

按滑鼠右鍵。

② 選擇 增加至背包 。

1 2

2. 使用背包中的程式

① 點擊背包圖示。

② 拖曳取出需要的程式 碼,並進行修改。

● 利用背包功能,仿照前面的步驟,完成 葡萄 、 草莓 、 橘子 的按鈕程式。

手腦並用

90

資訊科技篇

p058-109_ch3.indd 90

p058-109_ch3.indd 90 2020/10/2 下午 04:31:162020/10/2 下午 04:31:16

(34)

1

2

1. 呼叫方法方塊

① 點擊元件方塊內的 文字 語音轉換器 1 。

② 插入方法方塊 呼叫文字語 音轉換器1.唸出文字 到顯 示文字的程式之後。

3 1

2 2. 取得發音內容

① 點選內件方塊中的 文字 。 ② 將空白文字方塊放入方法

方塊 文字語音轉換器1.

唸出文字 的插入項。

③ 在空白文字方塊內輸入文 字「Apple」。

發出英文語音 Step2

執行測試,分別點擊按鈕,測試執行結果是否正確。

● 利用背包功能,仿照前面的步驟,完成 葡萄 、 草莓 、 橘子 的 文字語音轉換器 設定。

手腦並用

AI2 內建許多的多媒體元件,包括錄音、拍照等。現在我們要利用 文字語音轉 換器 元件的功能,讓程式讀取單字後,轉換成語音播放出來。

A 建立專案 B 畫面編排 C 程式設計 D 測試修正

3

程 式 設 計

App

3-1 3-2 3-4 3-3

3-3 App實作②――英文學習幫手

91

p058-109_ch3.indd 91

p058-109_ch3.indd 91 2020/10/2 下午 04:31:172020/10/2 下午 04:31:17

(35)

  接續 3-2 節的小試身手,改善 app 的使 用方式,避免輸入內容錯誤(如:負數、小 數)。現在我們要將飲料用圖片展示出來,

且點擊圖片可增加購買杯數,除了讓 app 起來更美觀之外,也方便顧客點餐。

   請 下 載 素 材 檔 案 3-3 小試身手 ,完成

app 程式。

總金額

可樂杯數 按鈕元件 奶茶杯數

請設計出符合以下規則的 app ,或參考上方圖片進行設計。

1. 若使用者點擊飲料圖示,每點一下該飲料杯數+ 1(一開始為 0)。

2. 若使用者點擊 結帳鈕 ,計算並顯示 總金額 。

3. 若使用者點擊 清空鈕 , 可樂杯數 、 奶茶杯數 與 總金額 變回 0。

檔案 3-3 小試身手 下載方式請見 P.3

校慶園遊會—飲料點餐 ② 3-3 小試身手 

解題提示

1. 更改標籤元件 可樂杯數 、 奶茶杯數 的文字屬性內容,完成杯數的修改。

2. 利用標籤元件的文字內容進行 總金額 的計算。

92

資訊科技篇

p058-109_ch3.indd 92

p058-109_ch3.indd 92 2020/10/2 下午 04:31:182020/10/2 下午 04:31:18

(36)

App實作③ —隨身資訊站

3-4 3-4

小薇的爸爸每天都會上不同的網站查看氣象、新聞和 網路熱門影片,小薇想設計一個能隨時整合這些服務的 app,省去在各種網頁之間切換的麻煩。

請播放範例影片 隨身資訊站.mp4 ,觀察程式的執行情 形,用 AI2 幫小薇製作出好用的 app 吧!

【程式摘要】

1. 設定多個螢幕,點擊按鈕進行頁面切換。

2. 按下 天氣狀況鈕 ,顯示即時天氣資料。

3. 按下 即時新聞鈕 ,顯示即時新聞列表。

4. 按下 發燒影片鈕 ,顯示熱門影片列表。

題目解析流程

任務說明

設定新專案

首頁畫面基本設定

切換程式設計頁面 開始

畫面編排

測試修正 建立專案

程式設計

引用外部資源

元件布置-版面區隔 新增頁面

元件布置-元件並排

設定按鈕事件

3

程 式 設 計

App

3-1 3-2 3-4 3-3

3-4 App實作③――隨身資訊站

93

p058-109_ch3.indd 93

p058-109_ch3.indd 93 2020/10/2 下午 04:31:192020/10/2 下午 04:31:19

(37)

在本節中,我們將學習利用「水平配置元件」來編排 app 頁面,並以多頁式 app 的設計、加入引用外部資源的 元件,讓 app 增添豐富度及實用性。

學習目標 1. 水平配置元件。

2. 多頁式設計。

3. 網路瀏覽器元件。

圖 1-3-3 隨身資訊站 app 運作流程示意圖。

94

資訊科技篇

p058-109_ch3.indd 94

p058-109_ch3.indd 94 2020/10/2 下午 04:31:212020/10/2 下午 04:31:21

(38)

【屬性值設定參考】

App 名稱:隨身資訊站 水平對齊:置中

螢幕方向:鎖定直式畫面 標題:首頁

2 1

1. 設定 Screen1 屬性

① 點選元件清單中的

Screen1 。

② 在元件屬性區設定其屬性 值。

2

1

【屬性值設定參考】

粗體:勾選 字體大小:40 文字顏色:藍色 文字:隨身資訊站

2. 設定 App 標題

① 加入 標籤 元件到工作面 板,重新命名為 App 標

題 。

② 在元件屬性區設定其屬性 值。

首頁畫面基本設定 Step1

2 1

1. 設定專案名稱

① 輸入名稱。

② 點擊 確定 。

設定新專案 Step1

A 建立專案 B 畫面編排 C 程式設計 D 測試修正

A 建立專案 B 畫面編排 C 程式設計 D 測試修正

3

程 式 設 計

App

3-1 3-2 3-4 3-3

3-4 App實作③――隨身資訊站

95

p058-109_ch3.indd 95

p058-109_ch3.indd 95 2020/10/2 下午 04:31:222020/10/2 下午 04:31:22

(39)

【屬性值設定參考】

高度:10 像素

2 1

1. 加入水平配置

① 拖曳 水平配置 元件到工 作面板。

② 在元件屬性區設定 水平 配置1 的屬性。

【屬性值設定參考】

字體大小:24 寬度:150 像素 文字:天氣狀況

2

1

2. 加入按鈕元件

① 拖曳 按鈕 元件到工作 面板,重新命名為 天氣

狀況鈕 。

② 在元件屬性區設定其屬性 值。

元件布置-版面區隔 Step2

使用版面區隔。

未使用版面區隔。

水平配置元件 ①版面區隔

AI2 編排元件時會由上而下相 疊,版面較為擁擠,且使用時容 易誤觸其他元件。我們可以利用

「水平配置元件」作為版面區隔 使用,讓元件配置更有彈性。

請參考上述步驟,完成其他2 個按鈕的設定。

手腦並用

按鈕命名 字體大小 寬度 文字

即時新聞鈕 24 150 像素 即時新聞

發燒影片鈕 24 150 像素 發燒影片

96

資訊科技篇

p058-109_ch3.indd 96

p058-109_ch3.indd 96 2020/10/2 下午 04:31:242020/10/2 下午 04:31:24

(40)

2 3 1

1. 新增螢幕

① 點擊 新增螢幕 。 ② 輸入螢幕名稱。

③ 點擊 確定 。

新增的螢幕可以更名,命 名規則與專案名稱相同。

【屬性值設定參考】

水平對齊:置中

螢幕方向:鎖定直式畫面 標題:天氣

1

2

2. 設定 Screen2 屬性

① 點擊元件清單中的

Weather 。

② 在元件屬性區設定其屬性 值。

Step3 新增頁面

本節的畫面構成與 3-2 節相似,需要注意的是本節有多頁式的設計,因此除了 一開始的 Screen1 之外,我們還必須新增其他頁面。

3

程 式 設 計

App

3-1 3-2 3-4 3-3

3-4 App實作③――隨身資訊站

97

p058-109_ch3.indd 97

p058-109_ch3.indd 97 2020/10/2 下午 04:31:252020/10/2 下午 04:31:25

(41)

【屬性值設定參考】

垂直對齊:置中 寬度:95 比例

2 1

1. 加入水平配置

① 拖 曳 水平配置 元 件 到 工 作區域中。

② 在元件屬性區設定其屬性 值。

【屬性值設定參考】

字體大小:40 文字:天氣狀況 文字顏色:藍色

2 1

2. 加入標題

① 拖曳 標籤 元件到 水平配 置1 內,重新命名為 頁 面標題 。

② 在元件屬性區設定其屬性 值。

2

【屬性值設定參考】

字體大小:20 文字:回首頁

1

3. 加入回首頁按鈕

① 拖曳 按鈕 元件到 水平配 置1 內,重新命名為 回 首頁鈕 。

② 在元件屬性區設定其屬性 值。

元件布置-元件並排 Step4

水平配置元件 ②元件並排

設計 app 時,經常需要將元件 並排擺放,這時除了使用表格配置 元件,還可以使用水平配置元件,

讓元件配置更加靈活。

1

2

98

資訊科技篇

p058-109_ch3.indd 98

p058-109_ch3.indd 98 2020/10/2 下午 04:31:272020/10/2 下午 04:31:27

(42)

網路瀏覽器元件

AI2 的網路瀏覽器元件可引用外部 網站資料,在適當的地方加入此元件,

並加上連結網址,就能在app 中顯示 該網頁。

請參考上述步驟,新增兩個頁面,並完成如下設定。

手腦並用

螢幕命名 Screen 標題 首頁地址

News 新聞 https://news.google.com/topstories?hl=zh-TW Video 影片 https://www.youtube.com/feed/trending 畫面編排 app 執行結果

臺北市

25

小雨體感溫度 22℃ 氣壓 1006.00 毫巴

濕度 70%

28℃

22℃

16日 週三 66%

26℃

21℃

17日 週四 72%

22℃

18℃

18日 週五 78%

1 1. 取得網路資源

① 前往天氣狀況觀測網頁,

複製網址備用。

https://www.msn.com/zh- tw/weather

1

【屬性值設定參考】

首頁地址:上一步驟取得的網址 允許使用位置訊息:勾選 忽略SSL 錯誤:勾選

2. 加入網路瀏覽器元件

① 拖 曳 網路瀏覽器 元 件 到 工作面板。

② 在元件屬性區設定其屬性 值。

引用外部資源 Step5

3

程 式 設 計

App

3-1 3-2 3-4 3-3

3-4 App實作③──隨身資訊站

99

(43)

1 2

1. 切換螢幕

① 點擊 Weather ,開啟螢幕 選單。

② 點擊 Screen1 ,回到 Screen1 螢幕。

2. 進入程式設計介面

點擊 程式設計 ,進入程式設 計介面。

切換程式設計頁面 Step1

在多頁式設計的 app 中,每個頁面都是各自獨立的,我們可以透過點擊按鈕等 元件來觸發事件,藉此讓程式導引我們前往不同頁面。

1

2

1. 選取觸發按鈕的事件方塊

① 點擊元件方塊中

Screen1 內的 天氣狀況 鈕 。

② 拖 曳 事 件 方 塊 當天氣狀 況鈕.被點選 到工作面板。

設定按鈕事件 Step2

A 建立專案 B 畫面編排 C 程式設計 D 測試修正

100

資訊科技篇

p058-109_ch3.indd 100

p058-109_ch3.indd 100 2020/10/2 下午 04:31:312020/10/2 下午 04:31:31

(44)

● 請參考上述步驟,完成 即時新聞鈕 、 發燒影片鈕 、 回首頁鈕 等按鈕。

手腦並用

執行測試,分別進入各頁面點擊按鈕,測試執行結果是否正確。

1

2

2. 設定開啟其他螢幕的方塊

① 點擊內件方塊中的 流程

控制 。

② 拖 曳 事 件 方 塊 開啟另一 螢幕 螢幕名稱 到 當天氣 狀況鈕.被點選 中。

1

3

2 3. 指定開啟的頁面

① 點選內件方塊中 文字 。 ② 將空白文字方塊放入事件

方 塊 開啟另一螢幕 螢幕 名稱 的插入項。

③ 在空白文字方塊內輸入文 字「Weather」。

A 建立專案 B 畫面編排 C 程式設計 D 測試修正

在 Scartch 中,所有角色都出現在同一個「舞臺」上,若想要達到切換場景的效果,就 必須逐一設定角色的顯示與隱藏。

AI2 的元件則會存在各自的「分頁」中,因此只要新增其他分頁,就能直接切換頁面進 行畫面編排,且各分頁中的元件也不會互相干擾。

延伸學習 Scratch 與 A I 2 比一比:「舞臺」與「分頁」

3

程 式 設 計

App

3-1 3-2 3-4 3-3

3-4 App實作③――隨身資訊站

101

p058-109_ch3.indd 101

p058-109_ch3.indd 101 2020/10/2 下午 04:31:322020/10/2 下午 04:31:32

(45)

檔案 3-4 小試身手 下載方式請見 P.3

校慶園遊會—飲料點餐③ 3-4 小試身手 

  接續 3-3 節的小試身手,為了提供顧客更好的使用體驗,我們要繼續改善 app 的操作,改善方向為以下三點:

1. 加入「增加」及「減少」杯數的按鈕。

2. 杯數更動時,即時更新「總金額」的顯示。

3. 結帳完畢切換畫面,告知顧客已結帳完畢。

請下載素材檔案 3-4 小試身手 ,完成 app 程式。

圖 1 圖 2

按鈕 元件

請設計出符合以下規則的 app ,或參考上方圖片進行設計。

1. 若使用者點擊加、減圖示 :

(1) 每點擊一次,該飲料的杯數+ 1 或- 1(一開始為 0,且數字不能小於 0)。

(2) 每點擊一次,更新 總金額 。

2. 若使用者點擊 清空鈕 ,飲料杯數與 總金額 變為 0。

3. 若使用者點擊 結帳鈕 ,如果 總金額 大於 0,螢幕切換至圖 2 頁面。

4. 若使用者點擊 再次訂購鈕 ,螢幕切換至圖 1 頁面。

解題提示

利用「條件判斷」方塊,避免飲料杯數變成負數。

102

資訊科技篇

p058-109_ch3.indd 102

p058-109_ch3.indd 102 2020/10/2 下午 04:31:342020/10/2 下午 04:31:34

(46)

3章 學習重點

3-1 認識 M I T App  I nventor

1. App 開發基本流程四步驟:建立專案、畫面編排、程式設計、測試修正。

2. AI2 的設計是以元件、屬性、事件、方法所組成。

(1) 元件:負責畫面構成。

(2) 屬性:呈現元件外觀。

(3) 事件:表示啟動程式條件。

(4) 方法:由程式碼組成的功能。

3-2 App實作①—匯率換算

1. 使用者介面元件中的「標籤、文字輸入盒、按鈕」是 AI2 中最常用到的元件:(如右圖)

(1) 標籤:用於顯示說明文字、內容使用。

(2) 文字輸入盒:提供使用者輸入文字、數字的媒介。

(3) 按鈕:使用者與 app 互動的主要元件。

2. 設計 app 時,可利用模擬器隨時進行測試,避免過程中 有錯誤。

3-3 App實作②—英文學習幫手

1. 設計 app 時採「按鈕圖片化」的設計方式,可增添畫面豐富度與主題性。

2. 編排元件時,利用表格配置元件,可將元件整齊的擺放在指定位置。

3. 文字語音轉換器屬於「非可視元件」,在畫面上不會顯示,但在畫面編排時若有需要使 用到該功能,仍要編排到app 中。

3-4 App實作③—隨身資訊站

1. 編排元件時,利用水平配置元件,可將多個元素並排、也可作為版面區隔讓畫面看起來 較寬敞整齊。

2. 使用「網路瀏覽器元件」可引用外部網站,將網站內容顯示在 app 中。

1 2 3

3

程 式 設 計

App

第3章 App 程式設計

103

p058-109_ch3.indd 103

p058-109_ch3.indd 103 2020/10/2 下午 04:31:342020/10/2 下午 04:31:34

(47)

補充 說明

1 電腦模擬器的安裝與使用

2 1

1. 進入下載頁面

① 前往下載網址:

http://appinventor.mit.

edu/explore/ai2/setup- emulator

② 找到紅框處,依據所使用 的電腦系統,進入對應頁 面。

此處以 Windows 系統 為例。

1

2. 下載模擬器

① 找到紅框處,點擊下載安 裝檔。

Step1

本機 本機磁碟(D:)

MIT_App_Inve ntor_Tools_2.

3.0_win_setup

下載

1

2

1. 開啟安裝檔

① 點擊開啟下載的安裝檔。

② 跟隨指示進行安裝流程。

模擬器安裝 Step2

A I 2 模擬器安裝與手機測試

104

資訊科技篇

p058-109_ch3.indd 104

p058-109_ch3.indd 104 2020/10/2 下午 04:31:362020/10/2 下午 04:31:36

(48)

2

1 2. 執行安裝

① 確認安裝位置。

② 點擊 Install,執行安裝程 式。

2

3. 完成安裝

① 點擊 Finish,完成安裝。

2

1

4. 啟動模擬器程式「aiStarter」

① 雙擊執行 aiStarter。

② 跳出執行視窗。

使用 AI2 模擬器測試 app 時,aiStarter 須保持啟動 狀態。

完成安裝後,即可打開瀏覽器進入 AI2 專 案頁面,執行app 的測試,執行方式請見 P.80 說明。

若在測試過程中模擬器發生斷線,則必須 點選「重置連線」,關閉模擬器後再重新啟動。

3

程 式 設 計

App

第3章 App 程式設計

105

p058-109_ch3.indd 105

p058-109_ch3.indd 105 2020/10/2 下午 04:31:362020/10/2 下午 04:31:36

(49)

2 在 Android 手機上執行 app

在 AI2 撰寫的 app 除了在模擬器上執行外,也可以 將檔案打包成 apk 檔,傳送到 A ndroid 手機上使用。

2 1

1. 打包 apk 檔案

① 點擊 打包 apk 。 ② 選擇 打包 apk 並顯示二

維條碼 。

2 1

2. 手機下載 apk 檔案

① 利用 Android 手機掃描

QR Code。

② 下載 apk 檔案到手機中。

2

1

3. 手機安裝 apk 檔案

① 下載完成後,點擊 安裝 開始安裝app。

② 安裝完成後,執行測試。

以二維條碼下載安裝到手機 方法一

106

資訊科技篇

p058-109_ch3.indd 106

p058-109_ch3.indd 106 2020/10/2 下午 04:31:372020/10/2 下午 04:31:37

(50)

2 1

1. 打包下載 apk 檔案

① 點擊 打包 apk 。 ② 選擇 打包 apk 並下載到

電腦 。

本機 本機磁碟(D:)

changeMoney

類型:APK檔案

下載

1

2. 傳送 apk 檔案給手機

① 將 apk 檔案利用 SD 卡、

傳輸線、email 等方式傳 輸到Android 系統的手機 中。

1 3. 手機執行 apk 檔案

① 在手機中執行 apk 檔案,

啟動安裝。

2

1

4. 手機安裝 apk 檔案

① 點擊 安裝 開始安裝 app。

② 安裝完成後,執行測試。

下載 apk 檔案傳送到手機 方法二

3

程 式 設 計

App

第3章 App 程式設計

107

p058-109_ch3.indd 107

p058-109_ch3.indd 107 2020/10/2 下午 04:31:382020/10/2 下午 04:31:38

(51)

科技廣角

寫一個改變世界的 App

「運算思維」是指以電腦的邏輯來解決問題的思維,

而當我們真正將運算思維付諸行動、實踐想法,並為生 活帶來影響時,便是進一步達成了「運算行動」。

用 MIT App Inventor 將「運算思維」化成「運算行動」

以 MIT App Inventor 作為實現創意的舞台

運算思維雖然不一定只能從學會程式語言來培養,但學習程式語言卻必定會實 踐運算思維。傳統程式語言的入門難度高,一般人難以享受學習的樂趣,也失去 利用創意解決問題的機會。美國麻省理工學院( MIT)為此發展出 S cratch A pp I nventor 等圖像化程式語言工具,降低了創作程式的難度,鼓勵使用者透過程式設 計來改變生活。

MIT A pp I nventor 的創始人—美國麻省理工學院教 授哈爾 ˙ 阿伯爾森( H arold A belson ,西元 1947 ∼)

曾在一場演講中提到:「最重要的點子,就是了解什 麼是值得去創作的。」阿伯爾森認為人們應該要有機 會實踐運算思維,也促成了 MIT A pp I nventor 的誕生。

MIT A pp I nventor 是一個開源軟體(原始碼開放取 用的軟體),任何人都可以用它來開發手機應用程式,

藉此改善生活。 MIT A pp I nventor 以「寫一個改變世 界的手機 app 」作為激勵創作的標語,這句話不僅僅是 一個口號,它也正在世界各地不斷發生著。

Harold Abelson

108

資訊科技篇

p058-109_ch3.indd 108

p058-109_ch3.indd 108 2020/10/2 下午 04:31:392020/10/2 下午 04:31:39

(52)

民窟,當地生活艱困,多數女性因性別 歧視而無法就學,也難以獲得穩定工 作。非營利組織「達拉維日記」從西元 2014 年起指導這些女孩學習電腦,進行 app 的創作。

這群年僅十來歲的達拉維女孩,利 用 MIT A pp I nventor 創作 app 來表達對 社會的關注,並解決生活上的問題。

一起用 app 改變世界!

現在的app 功能五花八門,例如:查詢公車到站時間、顯示口罩剩餘數量的地圖、

訂購食物外送等。這些app 不僅帶來便利的服務,也正慢慢改變我們的生活方式。

試著利用所學創作出app,解決生活中遇到的問題,你也可能改變自己所處的世界!

Womens Fight Back

面臨問題

印度嚴重的性別歧視問題,造成許多性 騷擾、性暴力問題。

app 功能

1. 播放警示聲嚇阻歹徒,防止犯罪發生。

2. 自動傳訊息或撥打電話給家人及朋 友,告知他們使用者發生危險。

Paani(Water)

面臨問題

達拉維當地的水資源匱乏,每天要排隊 好幾小時,才能取得飲用水。

app 功能

1. 提供「預約取水」的服務。

2. 當輪到使用者取水時,主動發送訊息 通知,節省排隊取水的時間。

第3章 科技廣角

109

p058-109_ch3.indd 109

p058-109_ch3.indd 109 2020/10/2 下午 04:31:402020/10/2 下午 04:31:40

參考文獻

相關文件

本校之創始,當遠溯至民國紀元前 14 年(西元 1898)日治時期。本 校初為國語學校第四附屬學校增設尋常等科,僅有日籍學生 10 名,為臺 灣中等學校之嚆矢。民國前

A-1展現課程設計能力(教學檔案指標) A-2研擬適切的教學計畫(教學檔案指標) A-3精熟任教學科領域知識.. A-4清楚呈現教材內容

西屯區 國安國小 阿美族語/海岸阿美語 高月仙 3 西屯區 永安國小 阿美語/海岸阿美語 高月仙 1 南屯區 惠文國小 阿美族語/海岸阿美語 高月仙 1 豐原區 豐原國小 阿美族/海岸阿美族

主辦單位:建國科技大學工程學院 (教學卓越計畫子計畫

一個傳統學校(威爾頓育 科學院:以傳統、守舊的 方法來教授學生)的新文 學老師(基廷),一改學校

簡稱馬蒙(或譯麥蒙、邁蒙等,阿拉伯語:نﻮﻣﺄــﻤﻟا ,拉丁化: A l-M a’m ūn ),是阿拉伯帝 國阿拔斯王朝的第七任哈里發(813

學 制 項 目 管理學院 人文學院 設計學院 理工學院 資訊學院 進修部 學分學雜費. (以學時計收) 1,588 1,588 1,662 1,662

管理學院 50,914 理工學院 58,189 設計學院 58,189 人文暨社會學院 50,914 資訊學院 58,189..