初探 App Inventor 2
Inventor 可以讓任何熟悉或不熟悉程序設計的人來創造基於 Android 作業系統的應用軟體。它使用圖形化界面,非常類似於 Scratch 語言和 StarLogo TNG 用戶界面。用戶可以拖放圖形對象來創造一個運行在安卓系統上的應用,它就可以在許多手機設備上運行。
只要有一台可以上網的電腦,就能開始開發 Android 手機 App!(ios 已可開發)
資料來源:維基百科
https://zh.wikipedia.org/wiki/MIT應用開發者
進入 App Inventor 開發網站
點選官網左上角的「Create Apps!」按鈕,即可進入 Inventor 開發網站。
建立第一個手機 App「HelloWorld」
點選開發網站左上角的「新增專案」按鈕,輸入專案名稱「HelloWorld」,輸入完成後,按下確定紐。
進入專案開發網頁
輸入完專案名稱後,會建立一個新專案,並進入到專案的工作區(如上圖);工作區有分為「畫面編排」區 和「程式設計」區(如下圖)。在網頁右上角可隨意切換兩種工作區。
- 「畫面編排」頁面:可以設計 App 的排版樣式,從左方的元件區,以滑鼠左鍵拖拉元件,到中間的手機畫面進行編排;在「元件清單」區域,會顯示已拖拉過的元件項目,在此區域可以修改元件的名稱,並且點選元件後,可在右方的「元件屬性」區域,修改元件的內容;此區域也可設定 App 的各種資訊。
- 「程式設計」頁面:此區域可以拖拉拼圖方塊來撰寫程式,每個元件都有各自的方塊可以使用。
在「畫面編排」頁面拖拉一個「標籤」及「按鈕」元件至工作面板
在「元件清單」點選「Screen1」後,可在右方的「元件屬性」設定畫面水平置中。請將按鈕元件的顯示文字設定為「執行」。
切換到「程式設計」區域,開始來撰寫程式。
功能設計:
此 App 的功能主要設計為,當使用者按下「執行」按鈕時,就將標籤的文字顯示為「Hello World」。
- 從最左方的「方塊」區選擇按鈕元件,將第一個方塊「當按鈕被點選時執行…」拖拉至旁邊的「工作面板」。
- 接著再點選標籤元件,將「設標籤的文字為…」方塊拖拉出來,並放到按鈕方塊的裡面(如下圖)。
3. 最後選左邊「文字」,將第一個字串方塊拖拉出來,放到標籤方塊的右邊合體!
4. 字串內容請輸入「Hello, World!」。
這樣就完成了本 App 的程式設計!
在手機上模擬、執行 HelloWorld App
在開發 App 的時候,我們可以透過網頁上方的連線選項,連接手機或模擬器來測試 App,當在連線狀態時,我們只要修改專案的任何一個地方,連線端也會更著一起更新。模擬 App 的方式有三種功能可以選擇,分別是「AI Companion」、「模擬器」和「USB」。
這裡先簡單介紹這三種連線方式,以及我最常用的連線測試方法。
- AI Companion:這個主要是利用手機來連線模擬,要使用這個方式,必須先到 Play 商店 下載「MIT AI2 Companion」App,連線方式非常簡單,從手機開啟此 App 後,在網頁端點選「AI Companion」,之後它會給你一串代碼,將這個代碼輸入或掃描到手機上就可以連線了!
- 模擬器:這個要載 Inventor 的模擬器軟體,安裝完後開啟,再從網頁選擇模擬器連線即可!以前 Inventor 2 剛出的時候,我都是用這種連線方式,但是這個模擬器非常地不穩定,還常常斷線,如果寫的程式太複雜的話,它執行時會跑得很慢甚至直接關閉!所以不太建議使用這個。
- USB:這個也是使用手機直接模擬,只要準備一條 USB 線連接到電腦,再到手機的設定裡,調整一下就可以連線了!
- 在電腦下載模擬器(BlueStacks)測試:可以在模擬器安裝 MIT AI2 Companion App,此連線方式就跟第一種一樣,或是在網頁上方選擇「打包apk」,直接將安裝檔下載到電腦,並安裝到模擬器上執行!