研習講師 : 文榮生官方網站 :www.e- happy.com.tw 服務信箱 :e- happy@e- happy.com.tw 粉絲專頁 :www.facebook.com/ehappytt
一 打造 App Inventor 2 開發環境 App Inventor 環境安裝的步驟 App Inventor 2 開發工具的安裝 模擬器安裝 MIT AI2 Companion 建議使用 Chrome 瀏覽器在瀏覽器網址列輸入 http://support.google.com/chrome/bin/answer.py?hl=zh-hant&answer=95346 下載及安裝 Chrome 瀏覽器 安裝 App Inventor 套件在 <AppInventor_Setup_Installer_v_2_2.exe> 上按滑鼠左鍵兩下 登入 App Inventor 管理頁面在瀏覽器中輸入 http:// ai2.appinventor.mit.edu 以 Google 帳號登入 建立專案 按 New Project 鈕 輸入專案名稱後按 OK 鈕 ( 名稱只能使用大小寫字母 數字及 _ 符號, 而且名稱的第一個字元必須是大小寫字母 ) Page 1
下載原始檔按 Project 鈕, 於下拉式選單中點選 Export selected project(.aia) to my computer 下載檔案置於 <C:\ 使用者 \ 電腦名稱 \Downloads>, 檔名為 < 專案名稱.aia> 移除專案勾選要移除專案左方的核選方塊 按 Delete Project 鈕 於確認對話方塊中按確定鈕上傳原始檔按 Project 鈕, 於下拉式選單中點選 Import project (.aia) from my computer 按選擇檔案鈕選取要上傳的專案壓縮檔, 然後按 OK 鈕 複製專案按 Project 鈕, 於下拉式選單中點選 Save project as 輸入專案名稱後按 OK 鈕 加入 Label 及 Button 元件拖曳 Label 元件到介面設計區 修改名稱 :LabelShow 修改 Text FontBold FontSize TextColor 等屬性 拖曳 Button 元件到介面設計區 修改名稱 :ButtonShow 修改各種屬性 開啟拼塊設計師按 Blocks 鈕 建立拼塊建立 Button 元件的 Click 事件拼塊 建立 Label 元件的設定 Text 屬性拼塊 建立模擬器啟動 aistarter 按 Connect 鈕後在下拉式選單中點選 Emulator 項目 出現鎖頭圖示時, 向右拖曳鎖頭以解鎖 由系統自動安裝 MIT AI2 Companion 在模擬器中執行應用程式按 Connect 鈕後在下拉式選單中點選 Emulator 項目 實機中執行前準備工作 1. 如果是要在實機中安裝下載的 apk 檔, 改變手機應用程式設定 : 執行設定 / 安全性, 勾選未知的來源選項 2. 如果是要在實機上進行程式模擬, 除了上述動作外, 請再執行設定 / 開發人員選項, 勾選 USB 除錯中 WIFI 連線實機執行應用程式 1. 條件 : 電腦與手機網路在同一個網段 Page 2
2. 手機開啟 Play 商店 搜尋 MIT AI2 Companion 安裝 MIT AI2 Companion 3. 手機執行 MIT AI2 Companion 按 Connect 鈕, 在下拉式選單中點選 AI Companion, 將產生的六個字元輸入實機, 再於實機按 connect with code 鈕 ; 或在實機按 scan QR code 鈕, 再以實機掃描對話方塊中的 QR Code 圖形 在實機中安裝應用程式 1. 手機開啟 Play 商店 搜尋 QuickMark 安裝 QuickMark 2. 按 Build 鈕, 於下拉式選單中點選 App (provide QR code for.apk) 使用實機中的 QuickMark 掃描 QRCode USB 連線實機執行應用程式 1. 安裝 91 助手 : 在 < 91assistant_v3.3.15.1023.exe > 上按滑鼠左鍵兩下 2. 手機以 USB 傳輸線與電腦連接 按 Connect 鈕後在下拉式選單中點選 USB 項目 Page 3
二 專題設計 : 打磚塊 1. 建立專案 :brick Title 屬性 : 打磚塊 2. 介面設計 : 上傳 <cube.png> 建立 Label 元件 :FontBold: 核取 FontSize:20 Text: 得分 FontColor:Blue 建立 Canvas 元件 :BackgroundColor:Light Gray Width:Fill parent Height:300 pixels 建立 ImageSprite 元件 :Picture:cube.png X:130 Y:7 建立 Ball 元件 :Paintcolor:Red Radius:9 X:160 Y:280 建立 Button 元件 :FontBold: 核取 FontSize:20 Text: 開始遊戲 3. 拼塊設計 : 建立 score 變數儲存打到的磚塊數, 按下開始遊戲鈕將球往右上方移動, 球 碰到邊綠就反彈 Page 4
4. 當球碰到磚塊時 : 得分加 1, 將磚塊移到另一個隨機位置 三 專題設計 : 照相機 1. 建立專案 :camera Title 屬性 : 照相機 2. 介面設計 : 上傳 <img01.jpg> 建立 Image 元件 :Picture: img01.jpg Width:320 pixels Height:240 pixels 建立 Button 元件 :Rename:ButtonCamera FontSize:20 Text: 使用相機照相 Width:Fill parent 建立 ImagePicker 元件 :FontSize:20 Text: 選取相片檔案 Width:Fill parent 建立 Camera 元件 Page 5
3. 拼塊設計 : 四 專題設計 : 小鋼琴家 1. 建立專案 :piano Title 屬性 : 小鋼琴家 ScreenOrintation:Landscape 2. 介面設計 : 上傳 <key1.png> 到 <key3.png> <Do.mp3> 到 <Si.mp3> 建立 HorizontalArrangement 版面,AlignHorizontal:Center Width:Fill parent Height:Automatic 建立 Button 元件 :Image: key1.png Text: 無 Width:50 pixels Height:240pixels 再建立六個 Button 元件, 名稱為 Button2 到 Button7:Image 屬性依次為 key2.png key3.png key1.png key2.png key2.png key3.png, 其餘屬性與 Button1 相同 建立七個 Sound 元件 Page 6
3. 拼塊設計 : 程式開始時設定七個按鍵的音效 4. 按下按鍵時播放音效 五 專題設計 : 播放影片 1. 建立專案 :videoplayer Title 屬性 : 播放影片 2. 介面設計 : 上傳 <video1.mp4> 及 <video2.mp4> 建立 VideoPlayer 元件 : Width: Fill parent Height:240pixels 建立 HorizontalArrangement 元件 : Width:Fill parent 建立 Button 元件 :FontSize:20 FontBold: 核取 Text: 影片一 Width:Fill parent 建立 Button 元件 :FontSize:20 FontBold: 核取 Text: 影片二 Width:Fill parent 建立 Button 元件 :Rename:ButtonPlay FontSize:20 FontBold: 核取 Text: 播放 Width:Fill parent Page 7
3. 拼塊設計 : 六 專題設計 : 我愛圓仔 1. 建立專案 :panda,screen1 設定 : Title 屬性 : 我愛圓仔 BackgroundColor:Orange CloseScreenAnimation:SlideHorizontal OpenScreenAnimation:SlideHorizontal ScreenOrintation:Portrait Scrollable: 取消核選 2. 介面設計 : 上傳 <panda_2.jpg> 及 <pandainfo.png> 建立 VerticalArrangement 元件 :AlignHorizontal:Center AlignVertical:Center Width:Fill parent Height:180 pixels Page 8
建立 Image 元件 :Picture: pandainfo.png Width:157 pixels Height:160 pixels 建立 VerticalArrangement 元件 :AlignHorizontal:Center AlignVertical:Center Width:Fill parent Height:Fill parent 建立 Button 元件 :Rename:ButtonAbout FontSize:20 Text: 認識新朋友 - 圓仔 TextAlignment:Center Width: 200 pixels 建立 Button 元件 :Rename:ButtonOnline FontSize:20 Text: 線上看圓仔 TextAlignment:Center Width: 200 pixels 建立 Button 元件 :Rename:ButtonPhoto FontSize:20 Text: 可愛圓仔相簿 TextAlignment:Center Width: 200 pixels 建立 Button 元件 :Rename:ButtonSearch FontSize:20 Text: 來去找圓仔 TextAlignment:Center Width: 200 pixels 建立 ActivityStarter 元件 3. 建立三個 Screen 頁面 :ScreenAbout ScreenPhoto 及 ScreenSearch ScreenAbout 頁面設定 :Title: 認識圓仔 BackgroundColor:Orange CloseScreenAnimation:SlideHorizontal OpencreenAnimation:SlideHorizontal ScreenOrintation:Portrait Scrollable: 取消核選 建立 HorizontalArrangement 元件 : Width:Fill parent Height: 60 pixels 建立 Image 元件 :Picture: panda_2.jpg Width: 60 pixels Page 9
建立 Label 元件 :FontBold: 核選 FontSize:18 Text: 認識圓仔 TextAlignment:Center Width: Fill parent 建立 Button 元件 :BackgroundColor:Black FontBold: 核選 Shape:oval Text: 首頁 TextColor:White Width: 50 pixels Height: 50 pixels 建立 WebViewer 元件 4. ScreenPhoto 及 ScreenSearch 頁面介面設計與 ScreenAbout 完全相同 : 上傳 <panda_middle.aia> 5. ScreenAbout 頁面 WebViewer 元件的 HomeUrl 屬性值 : http://zh.m.wikipedia.org/w/index.php?title=%e5%9c%93%e4%bb%94 ScreenPhoto 頁面 WebViewer 元件的 HomeUrl 屬性值 : https://www.google.com.tw/search?hl=zh- TW&site=imghp&tbm=isch&source=hp&biw=1280& bih=708&q=%e5%9c%93%e4%bb%94&oq=%e5%9c%93%e4%bb%94&gs_l=img.3..0l10.4150.53 20.0.9236.3.3.0.0.0.0.187.374.1j2.3.0...0...1ac.4.32.img..0.3.374.fSV90HN5qFY ScreenSearch 頁面 WebViewer 元件的 HomeUrl 屬性值 : https://www.google.com/maps/preview#!q=%e5%8f%b0%e7%81%a3%e5%8f%b0%e5%8c%97 %E5%B8%82%E6%96%87%E5%B1%B1%E5%8D%80%E6%96%B0%E5%85%89%E8%B7%AF%E4% BA%8C%E6%AE%B5%E5%8F%B0%E5%8C%97%E5%B8%82%E7%AB%8B%E5%8B%95%E7%89%A 9%E5%9C%92&data=!4m15!2m14!1m13!1s0x3442aa604a32818f%3A0xaafe06fd09b4d766!3m 8!1m3!1d24043978!2d- 95.677068!3d37.0625!3m2!1i1280!2i708!4f13.1!4m2!3d24.998853!4d1 21.581068 6. 拼塊設計 :Screen1 的拼塊 Page 10
7. ScreenAbout ScreenPhoto 及 ScreenSearch 的拼塊都相同 : 文淵閣工作室 http://www.e- happy.com.tw 服務信箱 :e- happy@e- happy.com.tw 粉絲專頁 :www.facebook.com/ehappytt Page 11