初探 App Inventor 2
App Inventor

初探 App Inventor 2

App Inventor LOGO

Inventor 可以讓任何熟悉或不熟悉程序設計的人來創造基於 Android 作業系統的應用軟體。它使用圖形化界面,非常類似於 Scratch 語言和 StarLogo TNG 用戶界面。用戶可以拖放圖形對象來創造一個運行在安卓系統上的應用,它就可以在許多手機設備上運行。
只要有一台可以上網的電腦,就能開始開發 Android 手機 App!(ios 已可開發)

資料來源:維基百科
https://zh.wikipedia.org/wiki/MIT應用開發者

進入 App Inventor 開發網站

App Inventor 官方網站

點選官網左上角的「Create Apps!」按鈕,即可進入 Inventor 開發網站。

Inventor 開發網站

建立第一個手機 App「HelloWorld

點選開發網站左上角的「新增專案」按鈕,輸入專案名稱「HelloWorld」,輸入完成後,按下確定紐。

新增專案「HelloWorld」

進入專案開發網頁

專案工作區_畫面編排

輸入完專案名稱後,會建立一個新專案,並進入到專案的工作區(如上圖);工作區有分為「畫面編排」區 和「程式設計」區(如下圖)。在網頁右上角可隨意切換兩種工作區。

專案工作區_程式設計
  • 畫面編排」頁面:可以設計 App 的排版樣式,從左方的元件區,以滑鼠左鍵拖拉元件,到中間的手機畫面進行編排;在「元件清單」區域,會顯示已拖拉過的元件項目,在此區域可以修改元件的名稱,並且點選元件後,可在右方的「元件屬性」區域,修改元件的內容;此區域也可設定 App 的各種資訊。
  • 程式設計」頁面:此區域可以拖拉拼圖方塊來撰寫程式,每個元件都有各自的方塊可以使用。

在「畫面編排」頁面拖拉一個「標籤」及「按鈕」元件至工作面板

拖拉一個「標籤」元件 和「按鈕」元件

在「元件清單」點選「Screen1」後,可在右方的「元件屬性」設定畫面水平置中。請將按鈕元件的顯示文字設定為「執行」。

切換到「程式設計」區域,開始來撰寫程式。

功能設計:

此 App 的功能主要設計為,當使用者按下「執行」按鈕時,就將標籤的文字顯示為「Hello World」。

拖拉第一個方塊
  1. 從最左方的「方塊」區選擇按鈕元件,將第一個方塊「當按鈕被點選時執行…」拖拉至旁邊的「工作面板」。
  2. 接著再點選標籤元件,將「設標籤的文字為…」方塊拖拉出來,並放到按鈕方塊的裡面(如下圖)。
拖拉設定文字的方塊
將標籤的方塊放到按鈕的方塊裡面

3. 最後選左邊「文字」,將第一個字串方塊拖拉出來,放到標籤方塊的右邊合體!
4. 字串內容請輸入「Hello, World!」。

拖拉字串方塊並組合!!

這樣就完成了本 App 的程式設計!

在手機上模擬、執行 HelloWorld App

模擬、執行 App

在開發 App 的時候,我們可以透過網頁上方的連線選項,連接手機或模擬器來測試 App,當在連線狀態時,我們只要修改專案的任何一個地方,連線端也會更著一起更新。模擬 App 的方式有三種功能可以選擇,分別是「AI Companion」、「模擬器」和「USB」。
這裡先簡單介紹這三種連線方式,以及我最常用的連線測試方法。

  1. AI Companion:這個主要是利用手機來連線模擬,要使用這個方式,必須先到 Play 商店 下載「MIT AI2 Companion」App,連線方式非常簡單,從手機開啟此 App 後,在網頁端點選「AI Companion」,之後它會給你一串代碼,將這個代碼輸入或掃描到手機上就可以連線了!
  2. 模擬器:這個要載 Inventor 的模擬器軟體,安裝完後開啟,再從網頁選擇模擬器連線即可!以前 Inventor 2 剛出的時候,我都是用這種連線方式,但是這個模擬器非常地不穩定,還常常斷線,如果寫的程式太複雜的話,它執行時會跑得很慢甚至直接關閉!所以不太建議使用這個
  3. USB:這個也是使用手機直接模擬,只要準備一條 USB 線連接到電腦,再到手機的設定裡,調整一下就可以連線了!
  4. 在電腦下載模擬器(BlueStacks)測試:可以在模擬器安裝 MIT AI2 Companion App,此連線方式就跟第一種一樣,或是在網頁上方選擇「打包apk」,直接將安裝檔下載到電腦,並安裝到模擬器上執行!

完整程式碼

專案「HelloWorld」完整程式碼

App 執行畫面




如果覺得文章內容還不錯的話,麻煩請幫我點個讚!感謝

可以多點幾次喔~~

第一次點讚需使用 Google 或 Facebook 帳號註冊

發表迴響