網頁

2017年10月12日 星期四

手機 App 程式設計- AppInventor2 入門- 第一支程式

相關網站:
MIT App Inventor 2
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」。
安裝資料夾就用預設的位置,C:\Program Files (x86)\AppInventor。按「 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 屬性視窗,有很多此元件的屬性可改。

  • Fontsize 改成 20,讓字的大小變成 20。
  • width 改成 Fill parent, 寬度改成充滿手機螢幕的寬度。
  • text 輸入欲顯示的文字,這邊可用中文、英文。我是輸入 這是我的第一支程式
  • TextAlignment 字的對齊方式,改成 center, 置中對齊。
  • TextColor, 文字的顏色,改成 Red (紅色)。
把左邊的 Button 元件拖曳到 元件設計區內,此元件名稱為 Button1。

Button1此元件的屬性設定如下:
  • Fontsize : 20
  • width : Fill parent
  • text : 變成綠色文字
  • TextAlignment : center。

依此類推,在元件設計區插入另一個 Button 元件,此元件名稱為 Button2。
Button2 此元件的屬性跟上面一樣,祇是 text 改成如下:
  • text : 變成藍色文字
按 右上方「Designer」鈕右邊的 「Blocks」,變成「Blocks」的畫面。
按左邊 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 有多少個錯誤,目前是沒有錯。
說明:
  1.  可選某個 block,按 Delete 鍵,可將此 block 刪除。
  2.  按color block, 也可直接改顏色。
切回到 Designer 模式。
Connect , 選 Emulator
出現 Connecting 視窗,會花幾分鐘,請等待。
因為我的 Companion App 過期,所以按 OK 以更新。
Got It。
按工作列的 Android 綠色機器人,叫出 模擬器。

Replace application ,按 OK

Install,以安裝「 MIT AI2 Companion」。

模擬器內出現 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 模擬器的畫面跟 瀏覽器的設計畫面一樣。
按 5554此模擬器 的變成綠色文字按鈕,上面的文字會變成綠色。

按 5554此模擬器的變成藍色文字按鈕,上面的文字會變成藍色。

如何儲存
ProjectsSave project

如何叫出以前的 Project
Projects /  My projects


按 「 greenblue」一下,就可叫出 此 project。
如何更改元件的名稱
Button1 此名字,不知其意義,若更名為 btnChangeGreen,比較清楚知道這個按鈕會把文字改成綠色,方法如下:

如何產生 apk

  • 用無線的方式
        Build/App(provide QR code for .apk)
產生此 apk 的網址 QR code,若您的手機有安裝可辨識 QR code 的 app,可下載我們寫好的 apk。

  • 用手機連接線的方式
Build/App(save .apk to my computer)

出現 編譯進度後,開始下載此 apk
將 下載下來的 greenblue.apk, 用手機連接線一邊接手機,另一邊接電腦, 將電腦中的 greenblue.apk 程式拷貝到手機內 (我是放在內儲空間的 myapk 資料夾)。


如何在手機中執行自己寫的 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。


沒有留言 :

張貼留言