Chapter 01 App開發環境設定 - eb1.hcc.edu.tw · Chapter 01 1-1 認識App Inventor 2 1-2 App...

Chapter

01

1-1 認識 App Inventor 21-2 App Inventor 2開發環境1-3 物件、屬性、事件、方法1-4 專案管理1-5 連線測試 App1-6 輸出 App 成品檔1-7 apk以 QR-code發布課後練習

App 開發環境設定學習重點‧ 認識 Android作業系統

‧ App Inventor 2系統安裝

‧ App Inventor 2界面介紹

‧ App 專案開發管理應用

‧ 手機測試 App程式

‧ 打包 apk成品檔

‧ 範例練習：光碟 \範例檔 \ch01

1-2│App Inventor 2 零起點速學指南

1-1 │認識 App Inventor 2

1-1-1 手機作業系統手機、平板是目前非常流行的電子科技產品，不同的手機有不同的作業系統，

目前最流行使用的有 iOS、Android、Windows 等三種作業系統，Apple 的iPhone 手機系統是 iOS、Microsoft 手機是Windows 系統，而大部分公司生產的手機都是Android，例如 hTC、SONY、Samsung、LG、小米機、夏普、華為…

等，而 Android 手機的普及率非常的高。

1-1-2 Android 作業系統 Android 中文俗稱安卓，是一個以 Linux 為基礎的開放原始碼行動裝置作業系統，主要用於智慧型手機和平板電腦，由 Google 領導與開發。

Android 作業系統是開放性和可移植性，可以被用在大部分電子產品上。包括：智慧型手機、平板電腦、個人電腦、筆記型電腦、電視、機頂盒、電子書閱讀器、

MP3 播放器、MP4 播放器、掌上遊戲機、家用主機、電子手錶、電子收音機、耳機、汽車裝置、導航儀、DVD 機以及其他裝置。

Android 系統圖示

Chapter 1　App開發環境設定│1-3

1-1-3 App Inventor 2 是什麼 App Inventor 2 是由 Google 提供的應用軟體，現在由麻省理工學院所維護及運營。它可以讓不懂程式語言的人也能創作 Android 手機的程式 App，圖形化界面，以拖曳方式將程式積木進行組合，就可以創作出App，就可以在手機上執行，讓每個人都能創作自己的 App，當然具有程式背景的人來學，就更得心應用了。App Inventor 2 就是第 2個版本了，而且有中文界面，更是大大降低了學習程式語言及創作 App 的門檻，不只如此，其功能還非常強大，好玩哦！

1-2 │ App Inventor 2 開發環境

App Inventor 2 是使用網頁方式進行，連結到 http:// Appinventor.mit.edu 網站就能開始編輯，不過要先有Google的帳號才能登入，建置自己的App專案檔，做好的 App 只能在 Android 系統手機中執行，那麼沒有 Android 手機時，就必須安裝模擬程式，就能在電腦中觀看設計的 App效果，但有些功能是不能執行，例如手機照相功能等，就一定要使用手機才能看到效果了。

1-2-1 電腦安裝 aiStarter 模擬器程式App Inventor 2 所設計的 App 只能在 Android 系統手機上執行，若是沒有Android 系統手機時，安裝模擬器程式，那麼就能在電腦上預覽設計的 App 效果，另外電腦透過 USB 連接手機時，也能在手機觀看 App 的執行效果。

1

2

1 開啟至【http://Appinventor.mit.edu/explore/ai2/windows.html】

2 點選 Download the installer.下載 aiStarter模擬器安裝程式


3

4

3 完成下載後，快點二下安裝【MIT_App_Inventor_Tools_2.3.0_win_setup】

4 點選【執行】

5 5 安裝完成後會立即啟動

老師說

以後要編輯時請執行

aiStarter模擬器程式，在編輯時，就能快速

預覽編輯效果

1-2-2 手機安裝 MIT AI2 Companion 程式在編輯 App Inventor 2 專案時，手機請安裝 MIT AI2 Companion，可隨時即時預覽程式效果。

1

2

1 在手機點選【play商店】圖示

2 安裝 MIT AI2 Companion程式，請安裝第 2 版的手機 App執行程式

App Invento 2 App Inventor Classis


3

3 點選【安裝】

老師說

手機安裝 MIT AI2 Companion程式，才能快速預覽App Inventor 2 所設計的全功能效果，例如搖晃手機後播放音樂或刪除文字等實體手機效果

4

4 執行 MIT App Inventor 2 的執行畫面

老師說

MIT App Inventor 2 有二種方法預覽 App的效果，輸入 6 位碼的 Code，或是使用 QR-code 掃描方式進行，我們完成第一個 App時，會再執行給同學們觀看。

1-2-3 進入 App Inventor 2 網站使用 App Inventor 2 開發 App 程式的標準程序如下。


12

1 登入 Google 帳號並進入 http://Appinventor.mit.edu/ 網站

2 點選建立按鈕

老師說

App Inventor 2 是Google 公司所開發的程式，使用時必須有

Google 帳號才能使用

3

3 顯示 Gmail帳號後，點選【Allow】接著點選【Continue】

老師說

勾選 Remember this Approval for the next 30 days 時，則 30 天之內，就不會再詢問

4

4 在右上角點選【繁体中文】後，再點選【繼續】

老師說

App Inventor 2 預設是英文開發界面


5

6

5 點選【新建專案】

6 在對話框中輸入專案名稱【FirstApp】，再點選【確定】鈕

老師說

專案名稱並不支援中

文，或特殊符號。請

以英文大小寫可搭配

底線命名

77 專案名稱會顯示在左上角


1-2-4 操作界面介紹App Inventor 2 有【外觀編排、程式設計】等二種設計界面，我們來認識各部名稱。

【外觀編排界面】

專案管理連線打包 apk 元件清單外觀編排程式設計

元件屬性專案名稱

元件面板

Screen1

工作面板

上傳文件

專案名稱顯示 App的專案名稱，不能使用中文命名。

元件面板包含了【使用者界面、界面布局、多媒體、繪圖動畫、感測器、社交應用、

資料儲存、通信連接、樂高機器人】九個類別的物件模組。

專案管理專案管理功能【新建、匯入、匯出、刪除、檢查點…等】。

連線三種預覽 App的執行效果【AI Companion、模擬器、USB】等。

打包 apk 完成專案後，輸出 apk的 Android系統的 App專用程式。

元件清單由元件面板中所挑選使用到的物件，都會在元件清單列表。

外觀編排手機畫面的版面配置顯示頁面。

程式設計切換到堆積木的程式設計界面。

元件屬性設定元件的各項屬性功能，如按鈕字體、圖片、文字、顏色等…。

上傳文件 App所需要的圖片、聲音等請由此上傳。

工作面板將元件拖曳至工作面板，就是手機畫面看到的版面編排頁面。

Screen1 預設的畫面 Screen1，可以增加、刪除畫面。


【程式設計界面】

畫面管理外觀編排

組合方塊積木

垃圾桶顯示警告

上傳文件

Screen1

內建方塊

內建方塊內建方塊的程式積木有【流程控制、邏輯運算、算數運算、文字、清單、

顏色、變數、程序】等八種程式類別的方塊積木。

畫面管理切換不同的畫面，新增刪除畫面，預設的 Screen1 畫面名稱不可變更。

外觀編排切換至外觀編排界面設計模式，再增加新的元件。

組合方塊積木

組合方塊積木，變成程式功能。

垃圾桶將不要的方塊顯示警告程式，拖曳至垃圾桶進行刪除工作。

顯示警告當程式方塊積木有問題時，會顯示警告訊息。

上傳文件上傳圖片、聲音等素材。

Screen1 顯示目前畫面所使用到的元件【按鈕 1、文字方塊 1】等。


1-3 │物件、屬性、事件、方法

現在很多程式語言都是以物件、屬性、事件、方法，做為設計程式方法，因此我

們必須先了解這些基本的概念，才能理解 App Inventor 2 的程式運作方式。

1-3-1 概念說明

【物件】可以視為同一單位的程式碼和資料的組合。物件可以是應用程式的一個

片段，例如按鈕。

【屬性】屬性代表物件儲存的資訊。使用程式語法擷取和設定屬性值。例如按鈕

的顏色。

【事件】事件是造成程序開始執行的通知。物件可控制和產生事件。例如當點選

按鈕時。

【方法】方法是物件可執行的動作。方法的使用與副程式或函式類似，經由的物

件來加以存取。例如運用按鈕啟動對話框。

很抽象吧！如果第一次你就看得懂，真要為你鼓掌了…

換句話說！把物件當作一個實體

【物件】一隻狗狗。

【屬性】狗狗的高度、寬度、顏色、聲音、跑步、顯示等等。

透過程式語法，可以改變狗狗的屬性值，例如變更狗狗高度，顏色等。

【事件】當狗狗被主人呼喊時，會立即跑過來。

當狗狗看到陌生人時，會發出旺旺聲音。

【方法】當狗狗碰到貓咪時，狂吠貓咪，使得貓咪驚嚇，豎起毛髮。

同學們！再看看是否比較能夠理解呢？


1-3-2 程式語法認識了物件、屬性、事件、方法等，那麼程式語法要如何表示呢？例如，轉換為

程式的寫法如下：

目的程式語法表示

改變狗狗的顏色變成紅色狗狗‧顏色 = 紅色

改變狗狗的高度變成 120 狗狗‧高度 =120

改變狗狗的顯示狀態變成消失狗狗‧顯示 =Flase

中間用“‧”號來連接，可以讀作【的】，改變屬性使用“=”表示

那麼在 App Inventor 2 方塊積木的表示方法：

方塊積木說明

設定按鈕 1‧背景顏色 = 紅色

設定按鈕 1‧高度 =120

設定按鈕 1‧顯示 =Flase

(事件 )當按鈕 1 被點選

(執行 )設定按鈕 1‧背景顏色變成紅色


1-3-3 元件面板的物件App Inventor 2 左側的元件面板，有【使用者界面、界面布局、多媒體、繪圖動畫、感測器、社交應用、資料儲存、通信連接、樂高機器人】等九個類別，包含

各式的元件物件。

1 2

1 使用者界面中的元件物件【按鈕、文字方塊、

清單顯示器…】

2 點選顯示使用說明

1-3-4 按鈕元件屬性App Inventor 2 改變物件屬性有二種方法【外觀編排、程式設計】等。

【外觀編排】當使用到按鈕元件時，右側的元件屬性就可以設定按鈕的屬性。

屬性設定背景黃色，字元尺寸 50.. 按鈕屬性設定

背景顏色 = 黃色

粗體 = 啟用

斜體 =啟用

字元尺寸 =50

文字顏色 =紅色


【程式設計】切換至方塊積木程式模式，堆積木寫程式方式，運用程式改變按鈕

屬性。

按鈕【事件】褐色按鈕【屬性】綠色

選取三個積木組合積木完成程式命令

( 事件 ) 當按鈕

1 被點選

( 執行 ) 設定按

鈕 1‧背景顏色

為藍色


1-4 │專案管理

App Inventor 2 開發的程式都儲存在網站主機上，以專案 Project 檔案為主，我們要學習專案檔的新增、刪除、匯出等基本設定，並將專案檔備份到個人電腦中。

1-4-1 我的專案我的專案會顯示個人帳號上的線上所有專案清單列表。

1

2

1 點選【專案】的【我的專案】

2 顯示專案清單

1-4-2 新增與刪除建立新專案及刪除不要的專案檔。

1

1 點選【專案】的【新建專案】

老師說

專案命名原則以英文、

數字、底線為佳，不

能使用中文命名


2

3

2 輸入專案名稱【InputText】

3 點選【確定】

4

4 完成 InputText 專案檔建立工作

5

65 勾選要刪除的專案

6 點選【刪除專案】就能刪除了


1-4-3 匯入專案將書本專案檔匯入，進行練習或觀摩方塊積木程式。

1

1 點選【專案】的【匯入專案】

2

3

2 點選【選擇檔案】選取光碟範例檔中【ch01\Animation.aia】


4

4 完成匯入 Animation.aia專案檔工作


1-4-4 匯出專案完成的作品檔經過匯出專案檔，下載儲存到電腦中，方便和別人分享。

1

2

1 勾選【InputTexe】專案檔

2 點選【專案】的【匯出專案】

老師說

做好的專案請匯出專

案檔，在自己的電腦

中進行備份

3

4

3 指定儲存的工作資料夾路徑

4 點選【存檔】

1-5 │連線測試 App

App Inventor 2 有三種連線測試 App 功能方式【AI Companion、模擬器、USB】等。


1-5-1 三種連線方式

連線方式速度設定及需求說明

AI Companion 【快】

Android系統手機

執行 MIT AI2 Companion 的

App

修正程式碼時能立即更新

手機使用 WiFi 連線，需與

電腦在相同網段才能進行，

測試最快

USB 【中】

Android系統手機

執行 MIT AI2 Companion 的

App

執行 aiStarter程式

修正程式碼時能立即更新

手機不需網路連線，測試最

方便

模擬器【慢】不需手機

執行 aiStarter程式

啟動模擬器耗費較多時間，

有些功能不能執行

※ MIT的教學示範是以 AI Companion 做為連線方式，開發程式修改時最方便※ 電腦教室上課時可以使用建議安裝無線基地台，並發送與電腦相同網段 IP，提供學生使用

※ 學生回家練習時，可使用 USB方式進行連線測試

1-5-2 匯入專案範例檔本書所有章節的範例，都可以使用匯入專案方式，進行匯入練習，方便同學練習

及觀摩使用。


1

2

1 進到MIT App Inventor2開發網站


3

4

3 點選【選擇檔案】選取光碟範例檔中

的 ch01 資料夾中的【ButtonChangeColor.aia】專案檔


5

5 完成匯入專案檔工作

1-5-3 連線 1【AI Companion】測試本範例將按鈕變更按鈕背景色，只能使用【AI Companion、USB】二種方式，模擬器就不能使用了，我們將以【AI Companion】進行連線示範，請注意手機與電腦必須在相同網段。


1

1 點選【連線】的【AI Companion】

老師說

Android系統手機必須到 Google play下載安裝 MIT AI2 Companion的 App哦

2

2 顯示【連接 AI Companion程序】視窗，圖示是 QR-code碼。

老師說

使用 MIT AI2 Companion的 App的QR-code 掃描或直接輸入編碼【mmghgj】都可以

4

3 在手機上執行 MIT AI2 Companion的 App

4 點選 Scan QR code 掃描電腦螢幕方式進行

老師說

直接輸入編碼 code 【mmghgj】再點選【connect with code】也可以


5

5 手指輕觸時，手

機按鈕就會變成紅色背

景

6 晃動手機時，按鈕背景會再變成橙色。

ButtonChangeColor.aia的方塊積木程式效果說明

【點選按鈕時】按鈕背景顏色變成紅色【搖動手機時】按鈕背景顏色變成橙色

1-5-4 連線 2【USB】測試USB 連線方式時，手機並不需WiFi 連線，記得電腦啟動 aiStarter 程式，而且手機安裝 MIT AI2 Companion 的 App 程式，當設定 USB 連線上時會自動啟動MIT AI2 Companion 並進行連線。

1

2


2 匯入 ch01 資料夾中的【TalkToMe.aia】專案檔


3

3 點選【連線】的【USB】連線

老師說

※ 手機安裝 MIT AI2 Companion的 App

※ 設定連線前請將USB線連接電腦與手機

4

4 讀取檔案資源約 5 秒鐘

5

5 會啟動手機的 AI Companion，並再等待讀取全部資源約 9 秒

6

6 完成手機 USB連線方式，請晃動手機及點選

按鈕觀看效果。

老師說

搖動手機的物件是【加

速度感測器】

唸【This is my first App】英文

唸【Stop shaking Me】英文


TalkToMe.aia的方塊積木程式效果說明

【點選按鈕時】唸【This is my first App】

英文

【搖動手機時】唸【Stop shaking Me】

英文

1-5-5 連線 3【模擬器】測試如果沒有 Android 手機時，就只能使用模擬器測試程式效果，比較耗費時間。

1

2


2 匯入 ch01 資料夾中的【PicShow.aia】專案檔

33 記得要啟動模擬器

程式，會顯示黑底白字

畫面

4

4 點選【連線】的【模擬器】


5

5 顯示模擬器程式畫面，並將鎖頭拖曳往右進

行解鎖工作

老師說

第一次執行模擬器時，

會進行程式工作，請

依畫面提示更新後，

再重置連線。

點選按鈕時點選按鈕時

1-6 │輸出 App 成品檔

Android 系統的 App 格式是 apk，我們在 Google Play 商店下載安裝的 App 都是 apk 檔，要發布到 Google Play 時需要花費 25 美元才能上架哦！但是只要輸出 apk 檔時，使用 USB 線連接，由電腦直接複製到手機，也能安裝，使用Email 寄給朋友也行。或是上傳到雲端硬碟設定網路公開，使用手機下載安裝，另外還可以設計成 QR-code 圖示，使用手機掃描也能下載安裝我們做好的 App檔。


1-6-1 設定手機安全性Android 的手機必須將【設定】的【安全性】勾選【不明的來源】允許安裝來源不明的應用程式，自己設計的 App 都是屬於來源不明，除非上架到 Google Play商店中，那是要付費的。

1

1 點選手機的【設定】

老師說

Android系統不同的版本，其圖示可能不同，請找找看系統【設定】功能，不要點錯了。

系統的【設定】【Google 設定】

2

2 滑動往下點選【安全性】

老師說

Android系統的網路 WiFi連線，也是在設定功能選項中。


3

3 勾選【不明的來源】允許安裝來源不明的應用程式。

老師說

勾選【不明的來源】後，就啟動設定，以後再安裝

其他 App時，就不會封鎖了。

1-6-2 打包 apk 並顯示二維條碼App Inventor 2 設計好的 App 檔，要打包 apk 檔才能和朋友分享。

11 點選【打包 apk】再點選【打包 apk並顯示二維條碼】就會產生 QR-code。

老師說

手機要安裝 QR-code的 App才能掃描 QR-code 的二維條碼


2

2 啟動手機的 QR-code 的App進行掃描

老師說

請注意此二維條碼有

效時間僅為 2 小時而已，因此這個 QR-code圖形不用下載保留

3

3 手機 QR-code 掃描後，就會進行文件下載，點

選【確定】

老師說

請使用一般的 QR-code程式掃描，不是使用

MIT AI2 Compain程式哦！

4

4 再點選【確定】

老師說

我們設計的 App，並沒有經 Google Play商店認證，因此會顯示

這個畫面


5

5 點選【安裝】

老師說

手機必須在【設定】

中進行安全性調整才

能進行安裝，預設會

出現封鎖畫面。

6

6 安裝完成後，就可以開啟使用，在手機就會增

加一個 App

1-6-3 打包 apk 並下載到電腦打包 apk 並下載電腦後，就能重複使用，Email 給同學安裝，或是放在雲端硬碟讓朋友由網路直接下載。


1

1 點選【打包 apk】再點選【打包 apk並下載到電腦】

老師說

打包 apk時，都會顯示打包進度

2

2 點選【存檔】

老師說

顯示下載檔案視窗，

將打包好的 apk下載到電腦

專案檔 .aia App完成檔 .apk

3

3 使用電子郵件寄給朋友，附件方式將 apk寄出即可

老師說

電子郵件的附件檔，

如果檔案太大時，會

無法寄送


1-7 │ apk 以 QR-code 發布

做好的 apk 除了以 Email 寄給朋友之外，要分享給更多人，那麼就將 apk 檔轉換為 QR-code 放在網站、部落格、臉書等讓朋友能更方便下載。

1-7-1 apk 上傳至雲端硬碟申請 Google 帳號有 15GB 的空間，將做好的 apk 檔案，上傳到 Google 的雲端硬碟中，再設定公開到網路上，就可以讓所有人下載了。

1

2

1 開啟到 www.google.com 並登入自己的Google 帳號

2 點選【更多】的【雲端硬碟】

3

3 點選再選取【檔案

上傳】


4

4 上傳完成後，請在 apk檔按滑鼠右鍵，並選取

【共用】

老師說

雲端硬碟的檔案，只

有你自己能使用，檔

案可以設定共用，那

麼就可以讓別人下載

了

5 5 點選右側的【開啟連結共用設定】

6

7

6 點選【知道連結的人均可以檢視】

7 再點選下方的【更多】


8

9

8 勾選【開啟 -公開在網路上】任何人都可以下

載的開放設定，無需登

入

9 點選【儲存】

10

11

10 複製藍色的共用連結網址，郵寄網址後，朋友

就能下載了

老師說

當檔案太大不能郵寄

時，就可以使用這種

方式分享超大的檔案

給朋友

11 點選

1-7-2 apk 轉為 QR-code當 apk 上傳至雲端硬碟，並設定公開在網路上後，就能將網址轉換為 QR-code，那麼就更方便散布了。


1

2

1 開啟至【www.quickmark.com.tw】網站

2 點選【製作】

老師說

※ QR-code相關知識，同學們請到維基百

科網站查詢

※ 將自己做好的 apk轉為 QR-code 檔時，也將二維條碼

存到手機中隨時可

以和朋友分享

3

4

5

6

3 點選【網頁網址】項目

4 將 apk的公開網址貼入【網址】區

5 點選

6 就會產生 apk的 QR-code 二維條碼圖案

老師說

在圖片上按右鍵進行

下載就完成了

課後練習Chapter

01（　　） 1. 手機的應用程式縮寫名稱是下列哪一項？

（A）App　（B）Ubuntu　（C）Linux　（D）Apple

（　　） 2. App Inventor 2 開發的手機程式，只能在哪種系統下使用？（A）Windows　（B）FreeBSD　（C）iOS　（D）Android

（　　） 3. 設計 App Inventor 2 程式時，沒有手機時，應該安裝什麼程式？（A）aiStarter　（B）Flash　（C）Java　（D）Flash

（　　） 4. 開發 App Inventor 2 的程式，在手機預覽效果時，應安裝什麼程式呢？

（A）Line （B）Google 翻譯　（C）MIT AI2 Companion （D）Line

（　　） 5. 使用手機 MIT AI2 Companion 的 QR-code 預覽 App 效果時，要注意什麼呢？

（A）有中華電信網路（B）飛航模式　（C）電腦和手機在相同網段（D）啟動藍芽

（　　） 6. App Inventor 2 有二種設計模式界面，看到元件面板的是什麼模式？

（A）程式　（B）打包 apk　（C）預覽　（D）外觀

（　　） 7. 元件加入後，切換到什麼模式，會顯示方塊程式積木寫程式？（A）程式　（B）外觀　（C）增加畫面　（D）元件屬性

（　　） 8. 製作完成的 apk，上傳至雲端硬碟時如何給別人下載？（A）預覽　（B）共用　（C）下載副本　（D）更改格式

（　　） 9. 沒有 Android 系統手機時，必須使用什麼方式測試程式？（A）Line　　（B）USB　（C）Companion　（D）模擬器

（　　）10. 製作完成的手機程式，安裝在手機時，必須進行哪項程式？（A）連線 USB （B）儲存專案檔　（C）打包 apk 檔（D）重置連線

Chapter 01 App開發環境設定 - eb1.hcc.edu.tw · Chapter 01 1-1 認識App Inventor 2 1-2 App...

Documents

Transcript of Chapter 01 App開發環境設定 - eb1.hcc.edu.tw · Chapter 01 1-1 認識App Inventor 2 1-2 App...