1 of 20

APP Inventor�手機程式開發入門

新竹市虎林自造教育及科技中心

黃信溢 @茶米老師教室

▶

2 of 20

2

黃信溢 文淵閣工作室

david@e-happy.com.tw�http://www.e-happy.com.tw

https://www.facebook.com/ehappytw

茶米老師教室�YouTube頻道

資訊教育初學特訓班�Facebook社團

文淵閣程式特訓班�Facebook粉絲專頁

3 of 20

上課前注意事項

  1. 請下載今天的講義�https://reurl.cc/d2Xpvy
  2. 登入雲端開發平台�http://ai2.appinventor.mit.edu
  3. 請使用 Google 帳號。
  4. 建議使用 Chrome 瀏覽器。
  5. 如果沒有帳號想要嚐試，可以使用�http://code.appinventor.mit.edu

4 of 20

APP Inventor�是學習程式設計的利器

APP Inventor 手機程式開發入門

5 of 20

完全免費、建置快速

  • APP Inventor 是一個視覺化的程式開發平台，使每個人都可以為智慧型手機和平板電腦構建功能齊全的Android應用程序。
  • APP Inventor 是由 MIT計算機科學與人工智慧實驗室(CSAIL) 開發及維護，為使用者提供高效且免費的開發平台。
  • 不需安裝複雜的開發套件，整個環境建置快速，立即安裝，即刻上手。

​

6 of 20

無所不在的開發模式

APP Inventor 開發介面是透過瀏覽器操作，專題的內容與成果皆會自動儲存於網路雲端之中，可透過網路在任何時間、任何地點進行開發的工作。

APP Inventor 也能在本機上打造離線的開發環境，整合無死角。

7 of 20

好學、好教的拼塊式開發

  • 視覺圖形化的開發環境，讓程式流程與內容可以在拼塊的拖拉組合之間輕鬆完成。
  • 不強調語法與輸入，重視程式邏輯訓練，可以讓完全沒有任何程式碼撰寫經驗者能在訓練後完成應用程式開發。

8 of 20

強大而實用的元件庫

  • APP Inventor 提供許多功能強大的元件，只要拖曳到編輯區中設定後即可使用。
  • 例如要使用手機照相機，只需拖曳 Camera 元件到介面中就可以拍照，並可輕易將相片存檔或顯示於圖形元件中。

9 of 20

支援機器人、資料庫與物聯網

  • APP Inventor 可設計控制 NXT、EV3、mBot、Tello的程式。
  • 透過藍牙連線可以與外界的硬體連結，進行控制。
  • 透過網路可以與資料庫連線，讀取公開資料或是大數據，進行實際的應用。
  • 因為藍牙、網路的相互輔助，能開發物聯網的專題應用。

10 of 20

APP Inventor �開發環境快速建置

APP Inventor 手機程式開發入門

11 of 20

開課環境的注意事項

Google帳號

網路環境

測試設備

  • 是否有Google帳號
  • 是否記住帳號密碼
  • Wi-Fi 的配置
  • Wi-Fi 的穩定度
  • 目前建議Android
  • 是否有登入Google
  • 是否能安裝App

12 of 20

官方模擬器的安裝

  1. 套件下載與安裝
  2. 啟動 AI Starter 後不要關閉視窗
  3. 由 連線>模擬器 開啟，第一次會更�新連線程式。出現對話方塊一律按左�方按鈕到底，更新完可以重新連線即可。

記得核選在桌面建立捷徑

13 of 20

實機模擬的設定

請在實機安裝�Ai Companion

模擬器安裝(BlueStacks)�Ai Companion

建議設定1

1. 手機方向為直式

2. 解析度 720 x 1280�3. 320 dpi

建議設定2

應用程式 置頂，如此即不會被其他視窗覆蓋

AI Compaion apk 下載

http://ai2.appinventor.mit.edu/companions/MITAI2Companion.apk

14 of 20

iOS版實機模擬

  1. 目前僅能實機模擬，沒有模擬器，也不能安裝成應用程式。
  2. 大部功能可以使用，但部份功能尚未齊全，正在積極開發中。
  3. 實機模擬的穩定度正在加強，期待更新版本推出。

詳細說明 http://www.appinventor.mit.edu/support/ios-compatibility

15 of 20

程式設計教學工具分享

畫面投影

其他模擬器

Screen Stream

BlueStacks

夜神

https://www.bluestacks.com

https://tw.bignox.com/

強烈建議用麥克風架�解放你的雙手

16 of 20

APP Inventor�專題實作-輸入輸出運算

APP Inventor 手機程式開發入門

17 of 20

專題教學的建議流程

  1. 說明專題目的與學習重點
  2. 專案的建立
  3. 畫面編排
    1. 素材的上傳�(加快檔案上傳的秘訣)
    2. Screen1的設定�(水平對齊、螢幕方向、標題、狀態列顯示 ...)
    3. 元件的加入
    4. 元件清單、屬性面板的使用
  1. 程式設計
    1. 先帶學員將程式行的起點、流程與結束在心中跑一遍
    2. 可以使用流程圖搭配說明
    3. 試著用「白話文」把程式說一遍
    4. 帶領學員熟悉拼塊的使用

18 of 20

BMI計算機

範例下載

19 of 20

感謝您的參與

茶米老師教室�YouTube頻道

資訊教育初學特訓班�Facebook社團

文淵閣程式特訓班�Facebook粉絲專頁

20 of 20

https://s.yam.com/VPGpx

APP Inventor 特訓班系列