SlideShare a Scribd company logo
App Inventor 教學講義
1
吳為勇
2
Chapter 1
App 是什麼?
行動應用程式(英語:mobile application,簡稱 mobile app、app),或手
機應用程式、行動應用程式、手機 app 等,是指設計給智慧型手機、平板電腦
和其他行動裝置上運行的應用程式。
目前主流的行動裝置平台有:
 Google Android
 蘋果 iOS
 黑莓機
 微軟 Windows Phone
目前市佔率最大的兩個平台是前面兩項 Google Android 與 Apple iOS。
Android iOS
開發公司 Google Apple
系統核心 Linux Mac Os
系統開發 開放式系統且開發限制比較
少
封閉式系統開且開發限制多
使用難易度 簡單 簡單
Apps 數量
Apps 品質 不錯 非常好
支援設備 hTC、ASUS、Samsung、
Moto……等相關手機平板系
列商品。
IPhone,IPad 相關系列設備
Apps 附檔名 *apk *.ipa
原廠開發工具 Google Android SDK(java)
App Inventor
XCode(Objective-C)
表格 1 Android 與 iOS 平台比較表
3
App Inventor 是什麼?
App Inventor 原是 Google 實驗室(Google Lab)的一個子計畫,由一群
Google 工程師與勇於挑戰的 Google 使用者共同參與。
Google App Inventor 是一個完全線上開發的 Android 程式環境,只要用一般
的瀏覽器如 Internet Explorer、FireFox、Chrome 連上網際網路就可以進行開
發。因為是在網際網路上開發,所有的設計專案都是透過 Google Account 將
您設計的專案儲存在 Server 上。
App Inventor 完全拋棄複雜的程式碼而使用樂高積木式的堆疊法來完成您的
Android 程式。除此之外它也正式支援樂高 NXT 機器人,對於 Android 初學者
或是機器人開發者來說是一大福音。因為對於想要用手機控制機器人的使用者而
言,他們不大需要太華麗的介面,只要使用基本元件例如按鈕、文字輸入輸出即
可。
App Inventor 於 2012 年 1 月 1 日移交給麻省理工學院行動學習中心,並
已於 3 月 4 日公佈使用。
App Inventor 主要分為三大作業模組且互相關連。
 App Inventor Designer 設計師:
設計手機畫面的地方;含 Palette、Viewer、Components 元件、
Properties 屬性。
 App Inventor Blocks Edit 圖塊編輯器
決定程式行為的地方,會以另一個視窗來顯示的程式。
 Ai2 Starter (App Inventor2)
透過 Ai2 Starter 可以讓 App Inventor2 將寫好的程式連接到模擬器或
是載具(手機或是平板)執行。
4
開始前的準備
1. 系統需求
電腦作業系統:
 Windows::Windows XP、Windows Vista、Windows 7 與 Windows 8。
 Mac:Mac OS 10.5 或以上。
 Gnu/Linux:Ubuntu 8+、Debian 5……。
瀏覽器:
 Mozilla Firefox 3.6 或以上。
 Apple Safari 5.0 或以上。
 Google Chrome 4.0 或以上。
手機 / 平板 /模擬器:
 Android Operating System 2.3(“Gingerbread”) 或是更高版本。
5
2. 申請 Gmail 帳號步驟
Gmail 帳號為每一位 App Inventor 開發者必備的帳號,藉此來登入 App
Inventor 官網。請依下列步驟來申請 Gmail 帳號:
1. 請在搜尋引擎輸入 Gmail 關鍵字後,連結至 Gmail 網頁。
2. 點選畫面右上角建立帳戶按鍵(紅色箭頭指引處 )
3. 建立帳號密碼及輸入個人資料,輸入完畢後點選最下方我接受建立帳戶
按鈕。
4. 輸入電話號碼,寄送驗證碼簡訊或以電話語音方式告知驗證碼給申請
者。
5. 輸入驗證碼
6. 申請成功,點選右側開始使用按鍵登入 Gmail 畫面。
8
7. Gmail 使用畫面,gmail 是非常好用的郵件系統,與 Android / iphone
的整合度也非常高,歡迎多加利用。
9
3. ai2 starter 安裝
如果你沒有 Android 裝置,你仍然可以用 App Inventor 來建立 apps。App Inventor 提
供一個 Android 模擬器,它就是一台在你的電腦中,可以正常工作的 Android 裝置,所
以你可以在這個模擬器中測試你的 apps,然後再把它分送給其他裝置,甚至在 Play
Store 上架。
你首先需要在你的電腦上安裝一些軟體才能使用模擬器(不需要 WiFi 連接),請依 Step 1
的指引,為不同的作業系系安裝適合的軟體,然後再回來啟動模擬器。
重要: 如果你曾安裝過先前版本的 App Inventor 軟體,請參閱 How to update the App
Inventor Software 一文,你透過這個網頁來檢查你的電腦是否正在執行最新版本的軟體
App Inventor 2 Connection Test (http://appinventor.mit.edu/test)。
Step 1. 在 Windows 中安裝 App Inventor 設定軟體
在 Windows 中安裝 App Inventor 2
在 Windows 中安裝 App Inventor 有兩個部份:
1. 執行 App Inventor 安裝軟體,這個步驟在所有版本的 Windows 系統都一樣。
2. 如果你選擇用 USB 來連接的裝置,那麼你還要為你的 Android 裝置安裝驅動程式。
注意: App Inventor 2 無法在 Internet Explorer 上執行,對於 Windows 的使用者,
建議使用 Chrome 或 Firefox 來配合 App Inventor 的使用。
10
執行 App Inventor 安裝軟體包
你必須使用系統管理者(administrator)的權限來執行安裝程式。如果你曾安裝過先前版
本的 App Inventor 2 工具,你也須需先將它移除。
1. 下載安裝程式. (
2. 找到你下載目錄中的 AppInventor_Setup_Installer_v_2_1.exe (~101 MB)檔
案。
3. 開啟這個檔案。
4. 依照畫面指示進行安裝。
5. 如果你遇到如下的畫面,請按(是 yes).
Step 2. 啟動 aiStarter (Windows & Linux 才需要)
模擬器需要使用名為 aiStarter 的程式,這個程式允許瀏覽器可以和模擬器連接。當你
安裝 App Inventor 軟體時,aiStarter 也會一起被安裝進來,並會在你的桌面、開啟功能
表中建立啟動圖示,Windows 及 Mac 版本並會設定在開機時自動執行 aiStarter。
aiStarter 的啟動圖示
11
你只要在要 aiStarter 啟動圖示上雙擊,就可以啟動 aiStarter, 接著你就會在桌面上看到
如下的畫面,代表你已經成功執行 aiStarter。
Step 3. 連接模擬器
啟動 aiStarter 後,只要從 App Inventor 的功能表上,點按 Connect MenuEmulator
選項,就可以連接模擬器了。
你會收到一個告訴你模擬器正在連接中的提示視窗,啟動模擬器會花上一點時間,當模
擬器在啟動時,你可以看到 aiStarter 中的畫面訊息會有如下的訊息 :
12
模擬器一開始會出現一個空白的螢幕 (#1),等到模擬器準備好後,會出現一個有彩色
背景的畫面(#2),一直等到模擬器的通知列出現完成 SD 準備完成後,模擬器會完成和
App Inventor 的連接,並執行你在 App Inventor 中所建立的 apps。
#1 #2 #3 #4
13
設定開發環境
1. 第一次進入 App Inventor
當 ai starter 安裝完成後。我們就可以打開瀏覽器(Chrome 或是 Firefox)輸入
下列網址來準備進入 App Inventor2 的開發環境吧。
http://ai2.appinventor.mit.edu
1. 進入的第一個畫面就是要您用 gmail 帳號登入。輸入您的 gmail 帳號與
密碼,按下登入,如果沒有錯誤的話就可以進入 App Inventor2 的開發
環境。
14
2. 開發環境簡介
1. 工具列
 Project(專案選單)
 My Project(我的專案)-點選開啟自己的所有專案。
 Start New ProJect(開啟新專案)-開啟新的專案
 Import Project (.aia) from my computer(從我的電腦匯入專案)
 Delete Project(刪除專案)
 Save Project(儲存專案)
 Save Project as (另存專案)
 CheckPoint(設立檢查點)
 Export selected project(.aia) to my computer(匯出選取的專案到我
的電腦)
 Export all projects(匯出所有專案)
 Import keystore(匯入 keystore)
 Export keystore(匯出 keystore)
 Delete keystore(刪除 keystore)
 Connect(連結選單)
 AI Companion(將程式經由 WiFi 無線同步到您的手機。但需先在
手機安裝 MIT AI2 Companion 這隻 app 程式)
 Emulator(連接到模擬器)
 Usb(透過 usb 連接到載具如手機或是平板)
 Reset Connection(重設連線)
 Hard Reset(強制重設)
 Build(打包選單)
 App(provide QR code for .apk)-顯示一個 QR Code,可以透過此 QR
Code 將此 apk 檔下載到載具裡安裝。
15
 App(save .apk to my computer)
將 apk 檔下載存到此電腦裡。
 Help(輔助選單)
 About(關於)
 Library(文庫)
 Get Started(快速入門)
 Tutorials(教學課程)
 TroubleShooting(疑難排解)
 Forums(論壇)
 Report Issue(回報問題)
16
2. App Inventor Designer 設計師作業
此作業最主要的目的為佈置相關元件與設定元件屬性。
圖表 1 Designer
(1) Palette(開發元件庫)
可以從 Palette 的清單選擇需要的元件,預設只會顯示 Basic 基本元件的項
目,點選各分類的標籤(例如 Media、Animation、Social 等),就能看到
其他分類底下的項目。
(2) Viewer(開發設計區)
擺放相關應用元件的地方,您可以編輯應用程式大致的外觀。若想要看到應
用程式實際的畫面,您需要將 App 下載到您的 Android 行動裝置,或是透
過 Android emulator 模擬器檢視。
(3) Components(應用元件區)
此區列出專案中使用到的元件,您可以在此修改元件名稱,或是刪除元件。
新的專案應該只有一個 Screen1 元件,實際上 Screen1 元件就是行動裝置
的螢幕,稍後您拖曳到 Viewer 的任何元件都會顯示在這個元件清單。選取
元件時,按下 Rename 按鈕可修改元件名稱,按下 Delete 按鈕可刪除此
元件。
17
(4) Media(媒體清單區)
顯示專案中使用的媒體檔案,新的專案沒有任何的媒體檔案,所以目前是空
的,稍後上傳的圖片、聲音檔案都將會顯示在這個媒體清單。
(5) Properties(元件屬性設定區)
針對你所選擇的元件顯示此元件的屬性,當您點選檢視器中的元件時,您可
以在這裡檢視或修改元件的屬性,例如設定螢幕元件的背景顏色、按鈕元件
的大小等。
(6) Screen 手機畫面選擇區
一個專案可以有多個畫面。可以在此選擇畫面、新增畫面及刪除畫面。
(7) Blocks(開啟拼塊編輯器)
按下此鍵將會開啟拼塊編輯器作業。
18
3. Blocks Editor 拼塊編輯器作業
圖表 2 Blocks Editor
(1) Blocks(邏輯控件庫區)
將在設計師作業佈置好的元件在這裡設定要做什麼動作或是邏輯條件上的設
定。
(2) Media(媒體清單區)
顯示專案中使用的媒體檔案。
(3) Viewer(控件設計區)
佈置與設計邏輯控件的地方。若您想刪除編輯器的拼塊,使用滑鼠將拼塊拖
曳到右下方的垃圾桶圖示即可刪除拼塊。
第一個 APP Inventor 程式
HelloWorld
使用元件: Button(按鈕), Label(標籤).
1. 進入 App Inventor2 官方網站 --> My Projects 頁面,點選 New Project
建立一個名為 HelloWorld 的專案。
2. 由左側的 Basic 元件區選擇一個按鈕 Button,拖拉到 Viewer(開發設計區)
中。在 Components(應用元件區)中選此 Button,按下下方 Rename 修改此
元件名稱為 btnClick。接下來在 Properties(元件屬性設定區)設定背景
顏色設為 Light Gray, 字體大小設為 18, 文字設為"點我點我……", 其餘不
變。
圖表 3 btnClick 元件佈置
3. 由左側的 Basic 元件區選擇一個標籤 Label, 拖拉到 Viewer(開發設計區)
中放到上一步驟設定的按鈕下方。在 Components(應用元件區)中選此
Label,按下下方 Rename 修改此元件名稱為 lblHello。並在 Properties(元
20
件屬性設定區)設定字體大小為 30, 文字設為"" (無內容, 因為要另外指定
內容), 寬度設為"Fill Parent". 其餘不變。到此算是將頁面設計完成了。
圖表 4 lblHello 元件佈置
4. 點選畫面右方的 Blocks 進入 Blocks Editor(拼塊編輯器)
圖表 5 按下 Blocks 進入拼塊編輯器
5. 從畫面左邊 Blocks 中 Screen1 裡的 btnHello。會出現下面的圖案,選擇
when Button1.Click 事件, 代表當 btnHello 被按下時, 執行所包含的動
作。
→
圖表 6 btnClick
21
6. 從畫面左邊 Blocks 中 Screen1 裡的 lblHello。會出現下面的圖案,選擇 set
Label1.Text to 指令, 代表要設定 Label1 的文字。然後拖拉到上一步驟所
選的 when Button1.Click 事件中。
圖表 7 lblHello 選擇 Set Text to
圖表 8 lblHello 拖拉 set text to 事件到 when btnClick.Click do 的拼塊中
圖表 9 lblHello 設定完成
22
7. 從畫面左邊 Blocks 中上方Built in 中點選Text將其內容"text" 改為 "Hello
World!"。並拖拉到 lblHello 中的缺口裡。
圖表 10 設定 Text 事件
圖表 11 設定 text 內容並拖拉到 set Text to 事件中
圖表 12 Blocks 拼塊設定完成
23
8. 完成了設計師作業與拼塊編輯器作業後就要將結果在模擬器或是載具上呈
現出來。這時候我們就要用到工具列上的 Connect(連結選單上的選項)。先
選擇 Emulator(模擬器)選項來啟動模擬器。
圖表 13 啟動模擬器
9. 模擬器啟動完後會問你需要更新模擬器的程式嗎?選擇 not now。模擬器
就會自動執行剛剛完成的本專案。
圖表 14 模擬器啟動完畢
24
10. 執行的結果
→
11. 如果要直接連接到手機或是平板看結果,可以直接點選 Connect(連結選單)
上的 USB 選項。但是要先在手機或是平板上安裝 Ai2 Companion(到
GooglePlay 去搜尋安裝即可)。
25
圖表 15 正在連接 USB
圖表 16 連街上手機上顯示
26
12. 上一步驟其實只是在載具上看到程式執行的結果,不是真的把這一個程式安
裝到載具上。如要將此程式像一般 app 一樣安裝到手機裡就要用到工具列
上 Build(打包選單)這個選項了。可以選擇 App(provide QR code for .apk)
此選項。這會顯示一個 QR Code。
圖表 17 選擇 App(provide QR code for .apk)
圖表 18 生成 QR Code 中
圖表 19 產生出此程式專屬 QR Code
27
13. 在載具上用 QR Code 掃描 app,掃描此 QR Code,可以得到一下載 apk
的網址。連上此網址將此 apk 下載到載具裡。
→
14. 因為這不是從 GooglePlay Store 下載下來的 apk 檔,我們需要先至「設
定」—>「安全性」—>開啟「不明的來源」,並執行「確定」。才能安裝
我們剛剛下載的 apk 檔
→
28
15. 設定完後就可以安裝下載的 apk 了。
→
→
29
16. 執行安裝好的 app 程式
→

More Related Content

What's hot

Vba
Vba Vba
React Class Components vs Functional Components: Which is Better?
React Class Components vs Functional Components: Which is Better?React Class Components vs Functional Components: Which is Better?
React Class Components vs Functional Components: Which is Better?
Fibonalabs
 
Introduction to scratch
Introduction to scratchIntroduction to scratch
Introduction to scratch
emreyz
 
2 da unidad corel draw
2 da unidad corel draw2 da unidad corel draw
2 da unidad corel draw
Javier Avalos
 
C++ Builder 程式撰寫基礎 / C++ Builder Basic
C++ Builder 程式撰寫基礎 / C++ Builder Basic C++ Builder 程式撰寫基礎 / C++ Builder Basic
C++ Builder 程式撰寫基礎 / C++ Builder Basic
YKLee3434
 
Android Jetpack Compose - Turkey 2021
Android Jetpack Compose - Turkey 2021Android Jetpack Compose - Turkey 2021
Android Jetpack Compose - Turkey 2021
Nelson Glauber Leal
 
Introduction to react
Introduction to reactIntroduction to react
Introduction to react
kiranabburi
 
Kotlin Jetpack Tutorial
Kotlin Jetpack TutorialKotlin Jetpack Tutorial
Kotlin Jetpack Tutorial
Simplilearn
 
Jetpack Compose.pdf
Jetpack Compose.pdfJetpack Compose.pdf
Jetpack Compose.pdf
SumirVats
 
React and redux
React and reduxReact and redux
React and redux
Mystic Coders, LLC
 
Blog inkscape
Blog inkscapeBlog inkscape
Blog inkscape
Ivanimc
 
Vector class in C++
Vector class in C++Vector class in C++
Vector class in C++
Jawad Khan
 
Formatting of Text in Ms Word
Formatting of Text in Ms WordFormatting of Text in Ms Word
Formatting of Text in Ms Word
ahmreenmalik
 
Getting Started with Excel
Getting Started with Excel Getting Started with Excel
Getting Started with Excel
JessicaMisunasCornelius
 
From object oriented to functional domain modeling
From object oriented to functional domain modelingFrom object oriented to functional domain modeling
From object oriented to functional domain modeling
Mario Fusco
 
Programming Game AI by Example. Ch7. Raven
Programming Game AI by Example. Ch7. RavenProgramming Game AI by Example. Ch7. Raven
Programming Game AI by Example. Ch7. Raven
Ryan Park
 
Cracking OCA and OCP Java 8 Exams
Cracking OCA and OCP Java 8 ExamsCracking OCA and OCP Java 8 Exams
Cracking OCA and OCP Java 8 Exams
Ganesh Samarthyam
 
Jetpack Compose a new way to implement UI on Android
Jetpack Compose a new way to implement UI on AndroidJetpack Compose a new way to implement UI on Android
Jetpack Compose a new way to implement UI on Android
Nelson Glauber Leal
 
How to use "PENCIL" animation software
How to use "PENCIL" animation softwareHow to use "PENCIL" animation software
How to use "PENCIL" animation software
Tanja Gvozdeva
 
Formation word 2010 partie 4
Formation word  2010  partie 4Formation word  2010  partie 4
Formation word 2010 partie 4
Alibi Mahdi
 

What's hot (20)

Vba
Vba Vba
Vba
 
React Class Components vs Functional Components: Which is Better?
React Class Components vs Functional Components: Which is Better?React Class Components vs Functional Components: Which is Better?
React Class Components vs Functional Components: Which is Better?
 
Introduction to scratch
Introduction to scratchIntroduction to scratch
Introduction to scratch
 
2 da unidad corel draw
2 da unidad corel draw2 da unidad corel draw
2 da unidad corel draw
 
C++ Builder 程式撰寫基礎 / C++ Builder Basic
C++ Builder 程式撰寫基礎 / C++ Builder Basic C++ Builder 程式撰寫基礎 / C++ Builder Basic
C++ Builder 程式撰寫基礎 / C++ Builder Basic
 
Android Jetpack Compose - Turkey 2021
Android Jetpack Compose - Turkey 2021Android Jetpack Compose - Turkey 2021
Android Jetpack Compose - Turkey 2021
 
Introduction to react
Introduction to reactIntroduction to react
Introduction to react
 
Kotlin Jetpack Tutorial
Kotlin Jetpack TutorialKotlin Jetpack Tutorial
Kotlin Jetpack Tutorial
 
Jetpack Compose.pdf
Jetpack Compose.pdfJetpack Compose.pdf
Jetpack Compose.pdf
 
React and redux
React and reduxReact and redux
React and redux
 
Blog inkscape
Blog inkscapeBlog inkscape
Blog inkscape
 
Vector class in C++
Vector class in C++Vector class in C++
Vector class in C++
 
Formatting of Text in Ms Word
Formatting of Text in Ms WordFormatting of Text in Ms Word
Formatting of Text in Ms Word
 
Getting Started with Excel
Getting Started with Excel Getting Started with Excel
Getting Started with Excel
 
From object oriented to functional domain modeling
From object oriented to functional domain modelingFrom object oriented to functional domain modeling
From object oriented to functional domain modeling
 
Programming Game AI by Example. Ch7. Raven
Programming Game AI by Example. Ch7. RavenProgramming Game AI by Example. Ch7. Raven
Programming Game AI by Example. Ch7. Raven
 
Cracking OCA and OCP Java 8 Exams
Cracking OCA and OCP Java 8 ExamsCracking OCA and OCP Java 8 Exams
Cracking OCA and OCP Java 8 Exams
 
Jetpack Compose a new way to implement UI on Android
Jetpack Compose a new way to implement UI on AndroidJetpack Compose a new way to implement UI on Android
Jetpack Compose a new way to implement UI on Android
 
How to use "PENCIL" animation software
How to use "PENCIL" animation softwareHow to use "PENCIL" animation software
How to use "PENCIL" animation software
 
Formation word 2010 partie 4
Formation word  2010  partie 4Formation word  2010  partie 4
Formation word 2010 partie 4
 

Viewers also liked

App inventor 教學講義 chapter6
App inventor 教學講義 chapter6App inventor 教學講義 chapter6
App inventor 教學講義 chapter6
Jerry Wu
 
App inventor2利用WebViewer與ActivityStarter連到外部網站
App inventor2利用WebViewer與ActivityStarter連到外部網站App inventor2利用WebViewer與ActivityStarter連到外部網站
App inventor2利用WebViewer與ActivityStarter連到外部網站
Jerry Wu
 
App inventor 演講簡報
App inventor 演講簡報App inventor 演講簡報
App inventor 演講簡報
David Huang
 
Arduino 習作工坊 - Lesson 4 通訊之夜
Arduino 習作工坊 -  Lesson 4 通訊之夜Arduino 習作工坊 -  Lesson 4 通訊之夜
Arduino 習作工坊 - Lesson 4 通訊之夜
CAVEDU Education
 
物聯網教學與上海深圳maker行
物聯網教學與上海深圳maker行物聯網教學與上海深圳maker行
物聯網教學與上海深圳maker行
CAVEDU Education
 
Ibuildapp
IbuildappIbuildapp
Ibuildapp
ceocch
 
Quaternion arithmetic -
Quaternion arithmetic -Quaternion arithmetic -
Quaternion arithmetic -
Elmer
 
Quaternion to axis
Quaternion to axisQuaternion to axis
Quaternion to axis
Arric Tan
 
Ict mock exam answer
Ict mock exam answerIct mock exam answer
Ict mock exam answer
Gary Tsang
 
Ict mock exam paper 1 b combined
Ict mock exam paper 1 b combinedIct mock exam paper 1 b combined
Ict mock exam paper 1 b combined
Gary Tsang
 
App inventor 1
App inventor 1App inventor 1
App inventor 1
Roy Wang
 
Arduino Yun 物聯網 Lesson 2
Arduino Yun 物聯網 Lesson 2Arduino Yun 物聯網 Lesson 2
Arduino Yun 物聯網 Lesson 2
CAVEDU Education
 
Xamarin 研究
Xamarin 研究Xamarin 研究
Xamarin 研究
ShengWen Chiou
 
Introduction to corona sdk
Introduction to corona sdkIntroduction to corona sdk
Introduction to corona sdk
馬 萬圳
 
Ict mock exam paper 1 a combined
Ict mock exam paper 1 a combinedIct mock exam paper 1 a combined
Ict mock exam paper 1 a combined
Gary Tsang
 
飲水松-開放街圖簡介 drinking water map and openstreetmap
飲水松-開放街圖簡介 drinking water map and openstreetmap飲水松-開放街圖簡介 drinking water map and openstreetmap
飲水松-開放街圖簡介 drinking water map and openstreetmap
Dennis Raylin Chen
 
MapReduce 簡單介紹與練習
MapReduce 簡單介紹與練習MapReduce 簡單介紹與練習
MapReduce 簡單介紹與練習
孜羲 顏
 
iOS On Boarding Training
iOS On Boarding TrainingiOS On Boarding Training
iOS On Boarding Training
Ryan Chung
 
APP Inventor as a Tool to Reach Students
APP Inventor as a Tool to Reach StudentsAPP Inventor as a Tool to Reach Students
APP Inventor as a Tool to Reach Students
Technological Ecosystems for Enhancing Multiculturality
 
PHP也有day #27 - From apprentice to artisan 解耦合處理程序及單元測試
PHP也有day #27 - From apprentice to artisan 解耦合處理程序及單元測試PHP也有day #27 - From apprentice to artisan 解耦合處理程序及單元測試
PHP也有day #27 - From apprentice to artisan 解耦合處理程序及單元測試
亮亮 閃
 

Viewers also liked (20)

App inventor 教學講義 chapter6
App inventor 教學講義 chapter6App inventor 教學講義 chapter6
App inventor 教學講義 chapter6
 
App inventor2利用WebViewer與ActivityStarter連到外部網站
App inventor2利用WebViewer與ActivityStarter連到外部網站App inventor2利用WebViewer與ActivityStarter連到外部網站
App inventor2利用WebViewer與ActivityStarter連到外部網站
 
App inventor 演講簡報
App inventor 演講簡報App inventor 演講簡報
App inventor 演講簡報
 
Arduino 習作工坊 - Lesson 4 通訊之夜
Arduino 習作工坊 -  Lesson 4 通訊之夜Arduino 習作工坊 -  Lesson 4 通訊之夜
Arduino 習作工坊 - Lesson 4 通訊之夜
 
物聯網教學與上海深圳maker行
物聯網教學與上海深圳maker行物聯網教學與上海深圳maker行
物聯網教學與上海深圳maker行
 
Ibuildapp
IbuildappIbuildapp
Ibuildapp
 
Quaternion arithmetic -
Quaternion arithmetic -Quaternion arithmetic -
Quaternion arithmetic -
 
Quaternion to axis
Quaternion to axisQuaternion to axis
Quaternion to axis
 
Ict mock exam answer
Ict mock exam answerIct mock exam answer
Ict mock exam answer
 
Ict mock exam paper 1 b combined
Ict mock exam paper 1 b combinedIct mock exam paper 1 b combined
Ict mock exam paper 1 b combined
 
App inventor 1
App inventor 1App inventor 1
App inventor 1
 
Arduino Yun 物聯網 Lesson 2
Arduino Yun 物聯網 Lesson 2Arduino Yun 物聯網 Lesson 2
Arduino Yun 物聯網 Lesson 2
 
Xamarin 研究
Xamarin 研究Xamarin 研究
Xamarin 研究
 
Introduction to corona sdk
Introduction to corona sdkIntroduction to corona sdk
Introduction to corona sdk
 
Ict mock exam paper 1 a combined
Ict mock exam paper 1 a combinedIct mock exam paper 1 a combined
Ict mock exam paper 1 a combined
 
飲水松-開放街圖簡介 drinking water map and openstreetmap
飲水松-開放街圖簡介 drinking water map and openstreetmap飲水松-開放街圖簡介 drinking water map and openstreetmap
飲水松-開放街圖簡介 drinking water map and openstreetmap
 
MapReduce 簡單介紹與練習
MapReduce 簡單介紹與練習MapReduce 簡單介紹與練習
MapReduce 簡單介紹與練習
 
iOS On Boarding Training
iOS On Boarding TrainingiOS On Boarding Training
iOS On Boarding Training
 
APP Inventor as a Tool to Reach Students
APP Inventor as a Tool to Reach StudentsAPP Inventor as a Tool to Reach Students
APP Inventor as a Tool to Reach Students
 
PHP也有day #27 - From apprentice to artisan 解耦合處理程序及單元測試
PHP也有day #27 - From apprentice to artisan 解耦合處理程序及單元測試PHP也有day #27 - From apprentice to artisan 解耦合處理程序及單元測試
PHP也有day #27 - From apprentice to artisan 解耦合處理程序及單元測試
 

Similar to App inventor 教學講義 chapter1

Introduction to open source platform
Introduction to open source  platformIntroduction to open source  platform
Introduction to open source platform
Hsien-Tang Lin
 
04.layman android google handheld device application design
04.layman android   google handheld device application design04.layman android   google handheld device application design
04.layman android google handheld device application design
gaquay086
 
Orientation Program
Orientation ProgramOrientation Program
Orientation Program
Luo Korth
 
20140222 Unity Windows lab 移轉實作營
20140222 Unity Windows lab 移轉實作營 20140222 Unity Windows lab 移轉實作營
20140222 Unity Windows lab 移轉實作營
Meng-Ru (Raymond) Tsai
 
Android_lecture_000
Android_lecture_000Android_lecture_000
Android_lecture_000
NTUT CSIE EPS
 
多媒體系統05_Android App圖形元件
多媒體系統05_Android App圖形元件多媒體系統05_Android App圖形元件
多媒體系統05_Android App圖形元件
Fuzhou University
 
Android ADK
Android ADKAndroid ADK
Android ADK
艾鍗科技
 
第一堂 進入 Android 的世界 --- Jason 的 Android 應用程式快樂學習班
第一堂 進入 Android 的世界 --- Jason 的  Android 應用程式快樂學習班第一堂 進入 Android 的世界 --- Jason 的  Android 應用程式快樂學習班
第一堂 進入 Android 的世界 --- Jason 的 Android 應用程式快樂學習班
力中 柯
 
ICT-old-ch14-converted.pptx
ICT-old-ch14-converted.pptxICT-old-ch14-converted.pptx
ICT-old-ch14-converted.pptx
liutommy1
 
2011/08/20跨平台行動應用程式使用者介面開發—以titanium mobile為例
2011/08/20跨平台行動應用程式使用者介面開發—以titanium mobile為例2011/08/20跨平台行動應用程式使用者介面開發—以titanium mobile為例
2011/08/20跨平台行動應用程式使用者介面開發—以titanium mobile為例
Justin Lee
 
Keyboard Extension sharing
Keyboard Extension sharingKeyboard Extension sharing
Keyboard Extension sharing
Grady Zhuo
 
第一次 Mobile App 就上手
第一次 Mobile App 就上手第一次 Mobile App 就上手
第一次 Mobile App 就上手
Ying-Hsiang Liao
 
Linux deepin 11.12 用户指南(简体中文版)
Linux deepin 11.12 用户指南(简体中文版)Linux deepin 11.12 用户指南(简体中文版)
Linux deepin 11.12 用户指南(简体中文版)
tuhaihe
 
Android event retrospect
Android event retrospectAndroid event retrospect
Android event retrospect
rogeryi
 
Vuforia AR 應用程式設計入門
Vuforia AR應用程式設計入門Vuforia AR應用程式設計入門
Vuforia AR 應用程式設計入門
吳錫修 (ShyiShiou Wu)
 
Vuforia AR 應用程式設計入門
Vuforia AR應用程式設計入門Vuforia AR應用程式設計入門
Vuforia AR 應用程式設計入門
吳錫修 (ShyiShiou Wu)
 
Android
AndroidAndroid
Android
donotbeevil
 
《氪周刊:互联网创业必读》(第65期)
《氪周刊:互联网创业必读》(第65期)《氪周刊:互联网创业必读》(第65期)
《氪周刊:互联网创业必读》(第65期)
Chada Chiu
 

Similar to App inventor 教學講義 chapter1 (20)

Ch10 app
Ch10   app Ch10   app
Ch10 app
 
Introduction to open source platform
Introduction to open source  platformIntroduction to open source  platform
Introduction to open source platform
 
04.layman android google handheld device application design
04.layman android   google handheld device application design04.layman android   google handheld device application design
04.layman android google handheld device application design
 
Orientation Program
Orientation ProgramOrientation Program
Orientation Program
 
20140222 Unity Windows lab 移轉實作營
20140222 Unity Windows lab 移轉實作營 20140222 Unity Windows lab 移轉實作營
20140222 Unity Windows lab 移轉實作營
 
Android_lecture_000
Android_lecture_000Android_lecture_000
Android_lecture_000
 
多媒體系統05_Android App圖形元件
多媒體系統05_Android App圖形元件多媒體系統05_Android App圖形元件
多媒體系統05_Android App圖形元件
 
Android ADK
Android ADKAndroid ADK
Android ADK
 
第一堂 進入 Android 的世界 --- Jason 的 Android 應用程式快樂學習班
第一堂 進入 Android 的世界 --- Jason 的  Android 應用程式快樂學習班第一堂 進入 Android 的世界 --- Jason 的  Android 應用程式快樂學習班
第一堂 進入 Android 的世界 --- Jason 的 Android 應用程式快樂學習班
 
ICT-old-ch14-converted.pptx
ICT-old-ch14-converted.pptxICT-old-ch14-converted.pptx
ICT-old-ch14-converted.pptx
 
Android design4.0
Android design4.0Android design4.0
Android design4.0
 
2011/08/20跨平台行動應用程式使用者介面開發—以titanium mobile為例
2011/08/20跨平台行動應用程式使用者介面開發—以titanium mobile為例2011/08/20跨平台行動應用程式使用者介面開發—以titanium mobile為例
2011/08/20跨平台行動應用程式使用者介面開發—以titanium mobile為例
 
Keyboard Extension sharing
Keyboard Extension sharingKeyboard Extension sharing
Keyboard Extension sharing
 
第一次 Mobile App 就上手
第一次 Mobile App 就上手第一次 Mobile App 就上手
第一次 Mobile App 就上手
 
Linux deepin 11.12 用户指南(简体中文版)
Linux deepin 11.12 用户指南(简体中文版)Linux deepin 11.12 用户指南(简体中文版)
Linux deepin 11.12 用户指南(简体中文版)
 
Android event retrospect
Android event retrospectAndroid event retrospect
Android event retrospect
 
Vuforia AR 應用程式設計入門
Vuforia AR應用程式設計入門Vuforia AR應用程式設計入門
Vuforia AR 應用程式設計入門
 
Vuforia AR 應用程式設計入門
Vuforia AR應用程式設計入門Vuforia AR應用程式設計入門
Vuforia AR 應用程式設計入門
 
Android
AndroidAndroid
Android
 
《氪周刊:互联网创业必读》(第65期)
《氪周刊:互联网创业必读》(第65期)《氪周刊:互联网创业必读》(第65期)
《氪周刊:互联网创业必读》(第65期)
 

App inventor 教學講義 chapter1

  • 2. 2 Chapter 1 App 是什麼? 行動應用程式(英語:mobile application,簡稱 mobile app、app),或手 機應用程式、行動應用程式、手機 app 等,是指設計給智慧型手機、平板電腦 和其他行動裝置上運行的應用程式。 目前主流的行動裝置平台有:  Google Android  蘋果 iOS  黑莓機  微軟 Windows Phone 目前市佔率最大的兩個平台是前面兩項 Google Android 與 Apple iOS。 Android iOS 開發公司 Google Apple 系統核心 Linux Mac Os 系統開發 開放式系統且開發限制比較 少 封閉式系統開且開發限制多 使用難易度 簡單 簡單 Apps 數量 Apps 品質 不錯 非常好 支援設備 hTC、ASUS、Samsung、 Moto……等相關手機平板系 列商品。 IPhone,IPad 相關系列設備 Apps 附檔名 *apk *.ipa 原廠開發工具 Google Android SDK(java) App Inventor XCode(Objective-C) 表格 1 Android 與 iOS 平台比較表
  • 3. 3 App Inventor 是什麼? App Inventor 原是 Google 實驗室(Google Lab)的一個子計畫,由一群 Google 工程師與勇於挑戰的 Google 使用者共同參與。 Google App Inventor 是一個完全線上開發的 Android 程式環境,只要用一般 的瀏覽器如 Internet Explorer、FireFox、Chrome 連上網際網路就可以進行開 發。因為是在網際網路上開發,所有的設計專案都是透過 Google Account 將 您設計的專案儲存在 Server 上。 App Inventor 完全拋棄複雜的程式碼而使用樂高積木式的堆疊法來完成您的 Android 程式。除此之外它也正式支援樂高 NXT 機器人,對於 Android 初學者 或是機器人開發者來說是一大福音。因為對於想要用手機控制機器人的使用者而 言,他們不大需要太華麗的介面,只要使用基本元件例如按鈕、文字輸入輸出即 可。 App Inventor 於 2012 年 1 月 1 日移交給麻省理工學院行動學習中心,並 已於 3 月 4 日公佈使用。 App Inventor 主要分為三大作業模組且互相關連。  App Inventor Designer 設計師: 設計手機畫面的地方;含 Palette、Viewer、Components 元件、 Properties 屬性。  App Inventor Blocks Edit 圖塊編輯器 決定程式行為的地方,會以另一個視窗來顯示的程式。  Ai2 Starter (App Inventor2) 透過 Ai2 Starter 可以讓 App Inventor2 將寫好的程式連接到模擬器或 是載具(手機或是平板)執行。
  • 4. 4 開始前的準備 1. 系統需求 電腦作業系統:  Windows::Windows XP、Windows Vista、Windows 7 與 Windows 8。  Mac:Mac OS 10.5 或以上。  Gnu/Linux:Ubuntu 8+、Debian 5……。 瀏覽器:  Mozilla Firefox 3.6 或以上。  Apple Safari 5.0 或以上。  Google Chrome 4.0 或以上。 手機 / 平板 /模擬器:  Android Operating System 2.3(“Gingerbread”) 或是更高版本。
  • 5. 5 2. 申請 Gmail 帳號步驟 Gmail 帳號為每一位 App Inventor 開發者必備的帳號,藉此來登入 App Inventor 官網。請依下列步驟來申請 Gmail 帳號: 1. 請在搜尋引擎輸入 Gmail 關鍵字後,連結至 Gmail 網頁。 2. 點選畫面右上角建立帳戶按鍵(紅色箭頭指引處 )
  • 8. 8 7. Gmail 使用畫面,gmail 是非常好用的郵件系統,與 Android / iphone 的整合度也非常高,歡迎多加利用。
  • 9. 9 3. ai2 starter 安裝 如果你沒有 Android 裝置,你仍然可以用 App Inventor 來建立 apps。App Inventor 提 供一個 Android 模擬器,它就是一台在你的電腦中,可以正常工作的 Android 裝置,所 以你可以在這個模擬器中測試你的 apps,然後再把它分送給其他裝置,甚至在 Play Store 上架。 你首先需要在你的電腦上安裝一些軟體才能使用模擬器(不需要 WiFi 連接),請依 Step 1 的指引,為不同的作業系系安裝適合的軟體,然後再回來啟動模擬器。 重要: 如果你曾安裝過先前版本的 App Inventor 軟體,請參閱 How to update the App Inventor Software 一文,你透過這個網頁來檢查你的電腦是否正在執行最新版本的軟體 App Inventor 2 Connection Test (http://appinventor.mit.edu/test)。 Step 1. 在 Windows 中安裝 App Inventor 設定軟體 在 Windows 中安裝 App Inventor 2 在 Windows 中安裝 App Inventor 有兩個部份: 1. 執行 App Inventor 安裝軟體,這個步驟在所有版本的 Windows 系統都一樣。 2. 如果你選擇用 USB 來連接的裝置,那麼你還要為你的 Android 裝置安裝驅動程式。 注意: App Inventor 2 無法在 Internet Explorer 上執行,對於 Windows 的使用者, 建議使用 Chrome 或 Firefox 來配合 App Inventor 的使用。
  • 10. 10 執行 App Inventor 安裝軟體包 你必須使用系統管理者(administrator)的權限來執行安裝程式。如果你曾安裝過先前版 本的 App Inventor 2 工具,你也須需先將它移除。 1. 下載安裝程式. ( 2. 找到你下載目錄中的 AppInventor_Setup_Installer_v_2_1.exe (~101 MB)檔 案。 3. 開啟這個檔案。 4. 依照畫面指示進行安裝。 5. 如果你遇到如下的畫面,請按(是 yes). Step 2. 啟動 aiStarter (Windows & Linux 才需要) 模擬器需要使用名為 aiStarter 的程式,這個程式允許瀏覽器可以和模擬器連接。當你 安裝 App Inventor 軟體時,aiStarter 也會一起被安裝進來,並會在你的桌面、開啟功能 表中建立啟動圖示,Windows 及 Mac 版本並會設定在開機時自動執行 aiStarter。 aiStarter 的啟動圖示
  • 11. 11 你只要在要 aiStarter 啟動圖示上雙擊,就可以啟動 aiStarter, 接著你就會在桌面上看到 如下的畫面,代表你已經成功執行 aiStarter。 Step 3. 連接模擬器 啟動 aiStarter 後,只要從 App Inventor 的功能表上,點按 Connect MenuEmulator 選項,就可以連接模擬器了。 你會收到一個告訴你模擬器正在連接中的提示視窗,啟動模擬器會花上一點時間,當模 擬器在啟動時,你可以看到 aiStarter 中的畫面訊息會有如下的訊息 :
  • 12. 12 模擬器一開始會出現一個空白的螢幕 (#1),等到模擬器準備好後,會出現一個有彩色 背景的畫面(#2),一直等到模擬器的通知列出現完成 SD 準備完成後,模擬器會完成和 App Inventor 的連接,並執行你在 App Inventor 中所建立的 apps。 #1 #2 #3 #4
  • 13. 13 設定開發環境 1. 第一次進入 App Inventor 當 ai starter 安裝完成後。我們就可以打開瀏覽器(Chrome 或是 Firefox)輸入 下列網址來準備進入 App Inventor2 的開發環境吧。 http://ai2.appinventor.mit.edu 1. 進入的第一個畫面就是要您用 gmail 帳號登入。輸入您的 gmail 帳號與 密碼,按下登入,如果沒有錯誤的話就可以進入 App Inventor2 的開發 環境。
  • 14. 14 2. 開發環境簡介 1. 工具列  Project(專案選單)  My Project(我的專案)-點選開啟自己的所有專案。  Start New ProJect(開啟新專案)-開啟新的專案  Import Project (.aia) from my computer(從我的電腦匯入專案)  Delete Project(刪除專案)  Save Project(儲存專案)  Save Project as (另存專案)  CheckPoint(設立檢查點)  Export selected project(.aia) to my computer(匯出選取的專案到我 的電腦)  Export all projects(匯出所有專案)  Import keystore(匯入 keystore)  Export keystore(匯出 keystore)  Delete keystore(刪除 keystore)  Connect(連結選單)  AI Companion(將程式經由 WiFi 無線同步到您的手機。但需先在 手機安裝 MIT AI2 Companion 這隻 app 程式)  Emulator(連接到模擬器)  Usb(透過 usb 連接到載具如手機或是平板)  Reset Connection(重設連線)  Hard Reset(強制重設)  Build(打包選單)  App(provide QR code for .apk)-顯示一個 QR Code,可以透過此 QR Code 將此 apk 檔下載到載具裡安裝。
  • 15. 15  App(save .apk to my computer) 將 apk 檔下載存到此電腦裡。  Help(輔助選單)  About(關於)  Library(文庫)  Get Started(快速入門)  Tutorials(教學課程)  TroubleShooting(疑難排解)  Forums(論壇)  Report Issue(回報問題)
  • 16. 16 2. App Inventor Designer 設計師作業 此作業最主要的目的為佈置相關元件與設定元件屬性。 圖表 1 Designer (1) Palette(開發元件庫) 可以從 Palette 的清單選擇需要的元件,預設只會顯示 Basic 基本元件的項 目,點選各分類的標籤(例如 Media、Animation、Social 等),就能看到 其他分類底下的項目。 (2) Viewer(開發設計區) 擺放相關應用元件的地方,您可以編輯應用程式大致的外觀。若想要看到應 用程式實際的畫面,您需要將 App 下載到您的 Android 行動裝置,或是透 過 Android emulator 模擬器檢視。 (3) Components(應用元件區) 此區列出專案中使用到的元件,您可以在此修改元件名稱,或是刪除元件。 新的專案應該只有一個 Screen1 元件,實際上 Screen1 元件就是行動裝置 的螢幕,稍後您拖曳到 Viewer 的任何元件都會顯示在這個元件清單。選取 元件時,按下 Rename 按鈕可修改元件名稱,按下 Delete 按鈕可刪除此 元件。
  • 18. 18 3. Blocks Editor 拼塊編輯器作業 圖表 2 Blocks Editor (1) Blocks(邏輯控件庫區) 將在設計師作業佈置好的元件在這裡設定要做什麼動作或是邏輯條件上的設 定。 (2) Media(媒體清單區) 顯示專案中使用的媒體檔案。 (3) Viewer(控件設計區) 佈置與設計邏輯控件的地方。若您想刪除編輯器的拼塊,使用滑鼠將拼塊拖 曳到右下方的垃圾桶圖示即可刪除拼塊。
  • 19. 第一個 APP Inventor 程式 HelloWorld 使用元件: Button(按鈕), Label(標籤). 1. 進入 App Inventor2 官方網站 --> My Projects 頁面,點選 New Project 建立一個名為 HelloWorld 的專案。 2. 由左側的 Basic 元件區選擇一個按鈕 Button,拖拉到 Viewer(開發設計區) 中。在 Components(應用元件區)中選此 Button,按下下方 Rename 修改此 元件名稱為 btnClick。接下來在 Properties(元件屬性設定區)設定背景 顏色設為 Light Gray, 字體大小設為 18, 文字設為"點我點我……", 其餘不 變。 圖表 3 btnClick 元件佈置 3. 由左側的 Basic 元件區選擇一個標籤 Label, 拖拉到 Viewer(開發設計區) 中放到上一步驟設定的按鈕下方。在 Components(應用元件區)中選此 Label,按下下方 Rename 修改此元件名稱為 lblHello。並在 Properties(元
  • 20. 20 件屬性設定區)設定字體大小為 30, 文字設為"" (無內容, 因為要另外指定 內容), 寬度設為"Fill Parent". 其餘不變。到此算是將頁面設計完成了。 圖表 4 lblHello 元件佈置 4. 點選畫面右方的 Blocks 進入 Blocks Editor(拼塊編輯器) 圖表 5 按下 Blocks 進入拼塊編輯器 5. 從畫面左邊 Blocks 中 Screen1 裡的 btnHello。會出現下面的圖案,選擇 when Button1.Click 事件, 代表當 btnHello 被按下時, 執行所包含的動 作。 → 圖表 6 btnClick
  • 21. 21 6. 從畫面左邊 Blocks 中 Screen1 裡的 lblHello。會出現下面的圖案,選擇 set Label1.Text to 指令, 代表要設定 Label1 的文字。然後拖拉到上一步驟所 選的 when Button1.Click 事件中。 圖表 7 lblHello 選擇 Set Text to 圖表 8 lblHello 拖拉 set text to 事件到 when btnClick.Click do 的拼塊中 圖表 9 lblHello 設定完成
  • 22. 22 7. 從畫面左邊 Blocks 中上方Built in 中點選Text將其內容"text" 改為 "Hello World!"。並拖拉到 lblHello 中的缺口裡。 圖表 10 設定 Text 事件 圖表 11 設定 text 內容並拖拉到 set Text to 事件中 圖表 12 Blocks 拼塊設定完成
  • 23. 23 8. 完成了設計師作業與拼塊編輯器作業後就要將結果在模擬器或是載具上呈 現出來。這時候我們就要用到工具列上的 Connect(連結選單上的選項)。先 選擇 Emulator(模擬器)選項來啟動模擬器。 圖表 13 啟動模擬器 9. 模擬器啟動完後會問你需要更新模擬器的程式嗎?選擇 not now。模擬器 就會自動執行剛剛完成的本專案。 圖表 14 模擬器啟動完畢
  • 24. 24 10. 執行的結果 → 11. 如果要直接連接到手機或是平板看結果,可以直接點選 Connect(連結選單) 上的 USB 選項。但是要先在手機或是平板上安裝 Ai2 Companion(到 GooglePlay 去搜尋安裝即可)。
  • 25. 25 圖表 15 正在連接 USB 圖表 16 連街上手機上顯示
  • 26. 26 12. 上一步驟其實只是在載具上看到程式執行的結果,不是真的把這一個程式安 裝到載具上。如要將此程式像一般 app 一樣安裝到手機裡就要用到工具列 上 Build(打包選單)這個選項了。可以選擇 App(provide QR code for .apk) 此選項。這會顯示一個 QR Code。 圖表 17 選擇 App(provide QR code for .apk) 圖表 18 生成 QR Code 中 圖表 19 產生出此程式專屬 QR Code
  • 27. 27 13. 在載具上用 QR Code 掃描 app,掃描此 QR Code,可以得到一下載 apk 的網址。連上此網址將此 apk 下載到載具裡。 → 14. 因為這不是從 GooglePlay Store 下載下來的 apk 檔,我們需要先至「設 定」—>「安全性」—>開啟「不明的來源」,並執行「確定」。才能安裝 我們剛剛下載的 apk 檔 →