網頁

2017年10月12日 星期四

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

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」。
安裝資料夾就用預設的位置,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,寬度改成填滿父元件,自動填滿可用空間。Label1的父元件為 Screen1。
  • text 輸入欲顯示的文字,這邊可用中文、英文。我是輸入 這是我的第一支程式
  • TextAlignment 字的對齊方式,改成 center, 置中對齊。
  • TextColor, 文字的顏色,改成 Red (紅色)。
把左邊的 Button (按鈕)元件拖曳到 工作面板區內,此元件名稱為 Button1。

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

依此類推,在元件設計區插入另一個 Button 元件,此元件名稱為 Button2。
Button2 此元件的屬性跟上面一樣,祇是 text 改成如下:
  • text : 變成藍色文字。
註:如果二個元件很類似,可以先選第一個元件,按 Ctrl + C (複製),再按 Ctrl + V(貼上),再修改元件的名稱和屬性 )

按 右上方「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. 如果二個程式拚塊差不多,可選某一個 block,按右鍵,再選「duplicate」,複製出另一個block。
  3.  按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」。

模擬器內出現 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此模擬器的變成藍色文字按鈕,上面的文字會變成藍色。


如何產生(打包) apk

Build/Android  App (.apk)
Build(打包)

出現 編譯進度後 到100%,等一下時間,結果如下:
如果 按 Dismiss (放棄)鈕,離開此視窗。沒有要下載此程式。

如何下載 apk 到自己的電腦

按左邊的「Download .apk now」,下載 apk 到自己的電腦。
電腦會自動下載已編譯好的 apk 檔。
從  BlueStacks  此模擬器 開啟 apk,就可執行此 apk。

如何下載 apk 到自己的手機

使用手機 QR Code 的掃描軟體,如 Line,掃描右邊的 QR Code ,可以將 .apk 程式下載到自己的手機內,以便安裝。
使用 Line 「加入好友」的功能,按 「行動條碼」。


按手機上面的連結,就可下載 寫好的 apk。
再按 「開啟」,「安裝」,安裝apk。

如何儲存

ProjectsSave 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」(從 垃圾筒刪除),無法復原。