Android Emulator(模擬器)
如果是使用 BlueStacks模擬器(請參考我的另一篇文章,BlueStacks 模擬器的使用方式),就不用安裝 AppInventor 2 Android Emulator,下面這段不用看。請直接跳到「開始使用 App Inventor 」。
在電腦上安裝 Android Emulator
打開 Google Chome ,網址輸入 www.google.com。關鍵字搜尋輸入 Installing App Inventor 2 Setup。
找到下述網頁,移到下面的 Download the installer, 按此連結,下載「MIT_App_Inventor_Tools_2.3.0_win_setup.exe」(79.8MB)此檔案。
下載完畢後,選 「MIT_App_Inventor_Tools_2.3.0_win_setup.exe」,按滑鼠右鍵,選「以系統管理員身分執行」。不然直接點二下,執行此程式,在安裝過程中會出現錯誤訊息。
執行「MIT_App_Inventor_Tools_2.3.0_win_setup.exe」安裝程式,建議關掉其它應用程式。
按「Next」。
按 「 I Agree」 ,
如果是使用 「Administrator」權限的帳戶 ,可以選擇使用的對象為 「Anyone who uses this computer (all users) 」或 「Only for me」。就用預設值,每個人都可使用 aiStarter.exe。
再按 「Next」。
「Desktop Icon」 打勾,在桌面顯示 aiStarter.exe 此程式的捷徑 。沒打勾也可以,祇是要在所有程式找 aiStarter.exe 此程式啟動。
按 「Next」。
Start Menu Folder 使用預設值 「MIT App Inventor Tools」,按 「Install」。
若有如下的錯誤訊息,不用重開機。
安裝完畢,按 「Finish」。
出現 aiStarter 此視窗,請勿關閉。
從這裏開始看
開始使用 App Inventor
在 Google Chome ,網址輸入 http://ai2.appinventor.mit.edu/, 以 Google帳號登入。
出現 要不要填問卷調查的畫面,你可以決定要不要寫,我選 「Take Survey Later」。
出現 「Welcome to MIT App Inventor」,「 Do not show again」打勾,按「Continue」。
在上面 的 Projects , 選 「Start new project」。
輸入 專案的名稱,名稱只能使用大小寫字母、數字及「 _」符 號,名稱的第一個字元必須是英文字母,很像 Visual Basic 命名規則,但不能使用中文字。
我輸入 : greenblue,按 「OK」。
把左邊的 Label (標籤)元件拖曳到 工作面板區,此元件名稱預設為 Label1。
選 Label1 此元件,右邊的 Properties 屬性視窗,有很多此元件的屬性可改。
Button1此元件的屬性設定如下:
依此類推,在元件設計區插入另一個 Button 元件,此元件名稱為 Button2。
Button2 此元件的屬性跟上面一樣,祇是 text 改成如下:
按 右上方「Designer」(畫面編排)鈕右邊的 「Blocks」(程式設計),變成「Blocks」的畫面。
按左邊 Button1 ,在 Viewer 視窗中 按「when Button1.click do」 此 block。
按左邊 Label1 ,在 Viewer 視窗中 按「 set Lable1.TextColor to」 此 block。
把 「set Lable1.TextColor to」 此 block 插入到 「when Button1.click do」 此 block 內,很像在拚圖,而且插對還有聲音出現。
按 Button1 是要讓 Label1 的文字變成 綠色(如果不知道,可按 右上方的 Designer,切回到設計的模式)
按左邊 Colors ,再按「 綠色」 此 block。
將「綠色」 此 block 插入到 「 set Lable1.TextColor to」 block 內。
依此類推,按 Button2 讓 Label1 的文字變成 藍色。
在 Viewer 視窗的下面,會出現 Show Warnings 有多少個錯誤,目前是沒有錯。
說明:
切回到 Designer 模式。
Connect , 選 Emulator。
出現 Connecting 視窗,會花幾分鐘,請等待。
因為我的 Companion App 過期,所以按 OK 以更新。
按 Got It。
按工作列的 Android 綠色機器人,叫出 模擬器。
Replace application ,按 OK。
模擬器內出現 Installing......,最後出現 Application installed。
要按 「Done」,不是「Open」。
如果還有問題,到下面的資料夾
C:\Program Files (x86)\AppInventor\commands-for-appinventor
執行 adbrestart
切回到 App Inventor 的設計畫面,選 Connect / Reset Connection。
在 aiStarter 的視窗內出現,Killed emulator。
Connect , 再度選 Emulator。
中間出現很多訊息,不用管它。最後 5554 模擬器的畫面跟 瀏覽器的設計畫面一樣。
出現 要不要填問卷調查的畫面,你可以決定要不要寫,我選 「Take Survey Later」。
出現 「Welcome to MIT App Inventor」,「 Do not show again」打勾,按「Continue」。
入門程式: 變綠變藍
如何建立新專案在上面 的 Projects , 選 「Start new project」。
輸入 專案的名稱,名稱只能使用大小寫字母、數字及「 _」符 號,名稱的第一個字元必須是英文字母,很像 Visual Basic 命名規則,但不能使用中文字。
我輸入 : greenblue,按 「OK」。
把左邊的 Label (標籤)元件拖曳到 工作面板區,此元件名稱預設為 Label1。
選 Label1 此元件,右邊的 Properties 屬性視窗,有很多此元件的屬性可改。
- Fontsize 改成 20,讓字的大小變成 20。
- width 改成 Fill parent,寬度改成填滿父元件,自動填滿可用空間。Label1的父元件為 Screen1。
- text 輸入欲顯示的文字,這邊可用中文、英文。我是輸入 這是我的第一支程式。
- TextAlignment 字的對齊方式,改成 center, 置中對齊。
- TextColor, 文字的顏色,改成 Red (紅色)。
Button1此元件的屬性設定如下:
- Fontsize : 20。
- width : Fill parent。
- text : 變成綠色文字。
- TextAlignment : center。
依此類推,在元件設計區插入另一個 Button 元件,此元件名稱為 Button2。
Button2 此元件的屬性跟上面一樣,祇是 text 改成如下:
- text : 變成藍色文字。
註:如果二個元件很類似,可以先選第一個元件,按 Ctrl + C (複製),再按 Ctrl + V(貼上),再修改元件的名稱和屬性 )
按左邊 Button1 ,在 Viewer 視窗中 按「when Button1.click do」 此 block。
Viewer 視窗祇剩 「when Button1.click do」 此 block。
按左邊 Label1 ,在 Viewer 視窗中 按「 set Lable1.TextColor to」 此 block。
把 「set Lable1.TextColor to」 此 block 插入到 「when Button1.click do」 此 block 內,很像在拚圖,而且插對還有聲音出現。
按 Button1 是要讓 Label1 的文字變成 綠色(如果不知道,可按 右上方的 Designer,切回到設計的模式)
按左邊 Colors ,再按「 綠色」 此 block。
將「綠色」 此 block 插入到 「 set Lable1.TextColor to」 block 內。
依此類推,按 Button2 讓 Label1 的文字變成 藍色。
在 Viewer 視窗的下面,會出現 Show Warnings 有多少個錯誤,目前是沒有錯。
說明:
- 可選某個 block,按 Delete 鍵,可將此 block 刪除。
- 如果二個程式拚塊差不多,可選某一個 block,按右鍵,再選「duplicate」,複製出另一個block。
- 按color block, 也可直接改顏色。
如何更改元件的名稱
Button1 此名字,不知其意義,若更名為 Button_green,比較清楚知道這個按鈕會把文字改成綠色,方法如下:
Button2 依此類推,更名為 Button_blue,這個按鈕會把文字改成藍色。
程式內元件的名稱,會自動更改,更易了解每個按鈕的功能。
如果是使用 BlueStacks 模擬器,不用 Connect功能,下面Connect 的部份不用看,直接跳到「 如何產生 apk 」。
切回到 Designer 模式。
Connect , 選 Emulator。
出現 Connecting 視窗,會花幾分鐘,請等待。
因為我的 Companion App 過期,所以按 OK 以更新。
按 Got It。
按工作列的 Android 綠色機器人,叫出 模擬器。
Replace application ,按 OK。
按 Install,以安裝「 MIT AI2 Companion」。
要按 「Done」,不是「Open」。
結果為:
C:\Program Files (x86)\AppInventor\commands-for-appinventor
執行 adbrestart
切回到 App Inventor 的設計畫面,選 Connect / Reset Connection。
在 aiStarter 的視窗內出現,Killed emulator。
Connect , 再度選 Emulator。
中間出現很多訊息,不用管它。最後 5554 模擬器的畫面跟 瀏覽器的設計畫面一樣。
按 5554此模擬器 的變成綠色文字按鈕,上面的文字會變成綠色。
按 5554此模擬器的變成藍色文字按鈕,上面的文字會變成藍色。
如何產生(打包) apk
Build/Android App (.apk)
按手機上面的連結,就可下載 寫好的 apk。
再按 「開啟」,「安裝」,安裝apk。
如何儲存
Projects / Save project
如何截取螢幕範圍,貼到 Word 以上傳作業?
鍵盤左下方,按 Win 鍵 + Shift + S,三個按鍵同時按下去。
Win 鍵 如下圖:
如何叫出以前的 Project
Projects / My projects
按 「 greenblue」一下,就可叫出 此 project。
如何在手機中執行自己寫的 App程式?
(以 AsusZenFone 3 為例)
叫出手機中的檔案管理。
按「內建儲存空間」。
選 剛才 放 apk 的資料夾(我的是 myapk)。
按 「greenblue.apk」。
按「安裝」。
安裝完後,按「開啟」,直接在手機上執行自己設計出來的 apk 。
如果你不能安裝 apk
1. 設定 / 安全性 , 「不明的來源 」右邊的按鈕 往右滑動,也就是允許安裝來源不明的應用程式。
如此一來在手機上才能安裝非經 由 Google Play 認證下載的應用程式。
2. 請執行 設定 / 開發人員選項 ,「USB 除錯中 」打勾。
「設定」 -> 「開發人員選項」 -> 勾選「USB 偵錯」
說明:如果沒有開發人員選項,怎麼處理?
系統設定/標準/關於手機/軟體資訊/版本號碼 上按8下,會出現開發人員的提示,再點兩下點左下實體鍵返回,點 開發者選項,USB偵錯 打勾。
如何讓label中的文字換行?
選 Lable1, 在 Properties 視窗中,選 text此欄位, 加上 \n (new line , 換行 )再輸入文字,如下面:
這是我的第一支程式! \n大家一起來學手機app設計
在模擬器上面,出現二列文字。
如何更改語系?
如果你不習慣英文的界面,可更改為中文界面。
English / 繁體中文,看起來這個繁體中文是使用大陸的語詞
如何將專案檔儲存到電腦
Projects / Export selected project(.aia) to my computer
把 greenblue.aia 下載到電腦內。
如何將電腦中的專案檔上傳到網路
Projects / Import project(.aia) from my computer
選擇檔案 選 greenblue.aia,按 OK。
如何刪除專案
Projects/My projects
選取要刪除的專案,如 test1,再按 「Move To Trash」 (移到垃圾筒)。
按「確定」。
移到垃圾筒的專案,若想要復原,可按「View Trash」 (檢視垃圾筒)」。
選取專案,如 test1, 按 「Restore」(復原)。若真的要把專案刪除,按「Delete From Trash」(從 垃圾筒刪除),無法復原。