2014年12月21日 星期日

第三章 App Inventor 程式編譯與執行

App Inventor程式編譯與執行
1.1 專題介紹:App Inventor程式編譯與執行
當您的程式寫到一半或是您的程式完成時,想看看它執行以後長什麼樣子嗎?首先我們就要來學習如何使用同步連接讓您自己撰寫的App Inventor 2程式執行囉!
當您的程式完成的時候,想要與朋友分享嗎?若請你的朋友先建置環境、安裝模擬器等東西是很麻煩的。第二個部分我們要學習利用apk安裝檔,將程式安裝到電腦或手機上,你就可以分享給你的朋友們。



1.2專題重點

※同步連接:執行App Inventor的成品或半成品(檢視程式執行是否順暢)
※安裝程式:安裝撰寫完成的程式(可與他人分享)

需求元件:
(1)同步連接若以Wifi 連接(最建議使用),使用之行動載具需具備Android系統、Wifi 網路、內有「Google Play商店」。(註:原手機的3G4G行動網路是無法使用的)
(2)同步連接若以USB連接,則需具備Android系統的行動載具、與電腦連接之USB傳輸線。
(3)安裝程式若是選擇安裝到電腦上,則需使用具 Android 系統的電腦。若是選擇安裝至手機上,該行動載具需具備Android系統和「QR Code掃描」APP


2. 專題操作:程式編譯與執行
2.1同步連接-Wifi連接(最建議使用)
1.將你的行動載具連上 Wifi 網路。
2.Google Play商店下載「AI2 Companion」,或利用「QR Code掃描裝置」直接掃描下圖的QR Code

3.App Inventor 2上方選單找到連接(Connect)→選擇AI Companion

4.會出現程式的QR Code,請使用剛剛下載的「AI2 CompanionAPP掃描。

5.您的程式便會出現在你的行動載具上囉!
2.2同步連接-連接模擬器
  App Inventor 2 提供模擬器讓大家可以同步連接,安裝完此aiStarter後,會有一隻模擬手機出現在螢幕上,讓你同時在Windows作業系統中看到自己撰寫的Android程式。
1.請運用Google搜尋App Inventor或直接連線至App Inventor官網(http://appinventor.mit.edu/explore/),點選 Get Started 的圖示即可進入新手教學的網頁。


2.在此頁面中,MIT說明了App Inventor為雲端的程式開發平台,只要透過瀏覽器及網路環境,就能開發屬於自己的創意APP

網頁分四個選項分別介紹安裝教學(Setup Instructions)、畫面設計與程式編輯功能介紹(Designer and Blocks Editor Overview)、新手教學(Beginner Tutorials)與封裝及分享成果(Packaging and Sharing Apps)等,我們就從點選「安裝教學(Setup Instructions)」開始吧!




3.上一小節所介紹的App Inventor APP僅適用於Android手機,因此如果手上已有Android手機及無線網路的學習者,並不需要安裝任何額外的工具,當開發好APP時可直接用無線網路將APP傳至手機測試。然而,如果手邊剛好沒有Android手機,那建議在電腦上安裝App Inventor的模擬器,之後可透過模擬器來測試APP的功能;如果開發程式的環境沒有無線網路,則需要安裝與Android手機連線的USB軟體工具,將在下一節作介紹。


4.接下來,我們將示範安裝模擬器。首先,點選Setup Instructions,選取Option Two標題中的Instructions連結。


5.接著依您使用電腦的作業系統會有不同的教學指引說明,例如使用蘋果電腦Mac OS的作業系統請點選Instructions for Mac OS X,使用微軟Windows的則請點選 Instructions for Windows


6.接著,請點選頁面中間的Download the installer下載安裝程式。


7.下載完畢後,請在作業系統預設的下載目錄中找到所下載的檔案MIT_Appinventor_Tools_2.3.0_win_setup.exe (80MB),按右鍵以「系統管理員」身份執行安裝。接著,在開啟檔案的使用者帳戶控制的安全性視窗中,按下執行鈕進行安裝。



8.執行安裝程式時,需同意該軟體的版權使用宣告,故請按I Agree後同意安裝。


9.接著請確認安裝路徑及資料夾名稱後,完成安裝。



10.下載安裝完成後執行aiStarter,會出現黑屏,把它縮小不要關掉它。

11.App Inventor上方選單找到連接(Connect)→選擇模擬器(Emulator)

12.這時候畫面上會出現倒數畫面,aiStarter會顯示程式運算的字串,並耐心等候模擬器出現,第一次執行模擬器(Emulator)會需要更新內部的程式。

13.模擬器執行好之後,會有一隻模擬手機會出現螢幕上,第一次使用時,因為App InventorBeta版更新的過程,模擬器沒有更新完全,所以會出現錯誤訊息!點OK讓他開始更新。

14.依序讓它更新直到完成。
 


12.重複第8點,先按Connect點選Reset Connection,然後再按一次Connect,點選Emulator,重新和模擬器做一次連接,你需要測試的程式就會跑出來囉!


2.3同步連接-USB連接
1.Google Play商店下載「AI2 Companion」,或利用「QR Code掃描裝置」直接掃描下圖的QR Code


2.設定你的手機:
設定/安全性/裝置管理員/勾選「未知的來源」,代表允許安裝非Market的應用程式。
除了安裝App Inventor的模擬器軟體外, USB連接手機與電腦時則需另安裝您手機品牌連接電腦的驅動程式,此部份因各廠牌設計之不同會有所差異,請參考使用手冊或上官網搜尋指引來安裝。


3.連接你的USB傳輸線和手機。
4.App Inventor 2上方選單找到連接(Connect)→選擇USB


2.4安裝程式-安裝到電腦上
1.App Inventor 2 上方選單找到建立(Build)→存取.apk擋到我的電腦

2.等待下載安裝好,會出現.apk檔,如果您的電腦是Android系統的,請直接點開.apk即可安裝與使用;如果不是,您也可以透過藍芽或USE傳輸的方式,將檔案傳到Android系統的行動載具安裝使用。

2.5 安裝程式-安裝到手機上
1.App Inventor 2上方選單找到建立(Build)→產生.apk檔的QR Code

2.出現QR Code,用手機的「QR Code掃描APP」掃描它。

3.QR Code掃描」APP會出現一串網址,點進去手機便會幫你下載。
4.下載好後進行安裝,就可以使用囉
看到自己設計的程式出現在手機是不是很有成就感呢?

快點拿去和你的朋友們分享你的作品吧!

1 則留言: