就從數位繪本開始
App Inventor 的程式設計教學
黃信溢 文淵閣工作室 http://www.e-happy.com.tw http://www.facebook.com/edreamertw [email protected] 文淵閣程式特訓班 Facebook粉絲專頁 Facebook粉絲專頁文淵閣工作室 資訊教育初學特訓班 Facebook社團
App Inventor
是學習程式設計的利器
完全免費、建置快速
• App Inventor 是由 Google 實驗室所發展用來
開發 Android 應用程式的開發平台，目前由 MIT 行動學習中心維護。資源充足，而且完全 免費。 • 不需安裝複雜的開發套件，開發環境建置快速， 立即安裝，即刻上手。 App Inventor
無所不在的開發模式
• App Inventor 開發介面是透過瀏覽器操作，專
題的內容與成果皆會自動儲存於網路雲端之中， 可透過網路在任何時間、任何地點進行開發。
好學、好教的拼塊式開發
• 視覺圖形化的開發環境，讓程式流程與內容可以
在拼塊的拖拉組合之間輕鬆完成。
• 不強調語法與輸入，降低輸入與語法不熟等挫折
強大而實用的元件庫
• App Inventor 提供許多功能強大的元件，只要 拖曳到編輯區中設定後即可使用。 • 錄影機、照相機、錄音機、影音片放器、語音辨 識、文字語音轉換器、即時翻譯器 … • 地圖、感測器、資料庫 …支援機器人、資料庫與物聯網
• App Inventor 可設計控制 NXT、EV3、mBot、Tello的 程式。 • 透過藍牙連線可以與外界的 硬體連結，進行控制。 • 透過網路可以與資料庫連線， 讀取公開資料或是大數據， 進行實際的應用。 • 因為藍牙、網路的相互輔助， 能開發物聯網的專題應用。進入課程前的
叮嚀
Google帳號
網路環境
測試設備
• 是否有Google帳號 • 是否記住帳號密碼 • Wi-Fi 的配置 • Wi-Fi 的穩定度 • 必須是 Android • 是否有登入Google • 是否能安裝AppApp Inventor
快速建置開發環境
開發環境建置注意事項
在主機上安裝開發套件 <MIT_App_Inventor_Tools_2.3.0_win_setup.exe> http://appinv.us/aisetup_windows
登入雲端開發平台 http://ai2.appinventor.mit.edu
請使用 Google 帳號。建議使用 Chrome 瀏覽器， 不要使用 IE。App Inventor 基本操作
登入 App Inventor 開發頁面
切換到繁體中文界面
建立專案 名稱只能使用英文大小寫字母、數字及「_」符號，而且名稱的第一個 字元必須是英文大小寫字母。
上傳下載原始檔
移除專案、複製專案 (建立CheckPoint)
認識 畫面編排 / 程式設計模式App Inventor 專題測試
使用 模擬器
使用模擬器測試
模擬器連線方式 • 啟動 aiStarter • 在編輯畫面按 連線 模擬器 • 啟動模擬器進入手機畫面進行模擬 • 首次執行要更新 AI2 Companion AI2 Companion 更新 • 當連線執行模擬器， AI2 Companion 更新時會顯示一個對話方塊， 請按 OK。 • 接著按 Got It 進行下載。 • 接著模擬器中就會進行下載及安裝的動作，完成後重啟模擬器。App Inventor 專題測試
使用實機 USB
使用實機測試- USB
• 實機中執行前準備工作 • 如果是要在實機中安裝下載的 apk 檔，改變手機應用程 式設定：執行 設定 / 安全性，勾選 未知的來源 選項。 • 如果是要在實機上進行程式模擬，除了上述動作外，請再 執行 設定 / 開發人員選項，勾選 USB 除錯中。 • 測試步驟 手機開啟 Play 商店 → 搜尋「MIT AI2 Companion」 → 安裝 MIT AI2 Companion。
App Inventor 專題測試
使用實機 Wi-Fi
使用實機測試- WIFI
• 條件
電腦與手機網路在同一個網段 • 測試步驟
實機安裝 MIT AI2 Companion。
在編輯畫面按 連線 → AI Companion，會在對話方塊產生六個
字元及 QR code。
手機執行 MIT AI2 Companion，將產生的六個字元輸入實 機，再於實機按 connect with code 鈕；或在實機按 scan QR code 鈕，再以實機掃描對話方塊中的 QR Code 圖形。
編譯 apk 安裝檔
進行 apk 編譯動作，有以下二種方式處理： 打包 apk → 打包 apk 並顯示二維條碼
會產生 QRCode，手機可以使用 AI Companion 掃瞄下載 apk 到手機中安裝
打包 apk → 打包 apk 並下載到電腦 會編譯 apk 檔下載儲存到本機
App Inventor快速入門
輸入輸出與運算
BMI計算機
App Inventor專題實作
數位繪本
數位繪本製作流程
素材處理 • 準備圖片及音 效素材 • 上傳素材到 App 畫面編排 • 設定畫面方向 • 調整視窗大小 • 標題列及狀態 列的顯示 加入畫布 • 設定畫布大小 • 設定畫布背景 音樂播放器 • 設定背景音樂 • 設定一般音樂 多頁設定 • 新增頁面及命 名方式 • 設定開啟及關 閉頁面動畫 程式設計 • 加入畫布滑動 翻頁 • 加入音樂控制 • 善用背包加速 程式開發數位繪本 - 程式設計
第一頁
