[App Inventor] MIT App Inventor 2 安裝與初學

[App Inventor] MIT App Inventor 2 安裝與初學

之前就對 MIT App Inventor 蠻有興趣的,正好最近家人提到想有一個 app,

可以幫忙計算說要多少水量和 95 度的酒精混合,可以做出 75 度的酒精~

這是一個很簡單的理化題目,正好拿來當 App Inventor 的第一個專案囉~

 

1. 安裝 MIT App Inventor for Mac

先連到 MIT App Inventor 官網,首先就提到要有一個 Android 手機或模擬器,

雖然用手機跑 app 會比較快速,但還得一直去拿手機有點麻煩,

決定還是先用模擬器的方式~

Screen Shot 2016-09-05 at 6.27.38 PM

 

點下 Set up and run the Android emulator,進到說明網頁,

要讓 App Inventor 使用模擬器的話,需要先在電腦上裝一個軟體叫 aiStarter,

我的作業平台是 Mac OS X,因此就參考 Installing App Inventor 2 Setup on Mac OS X 這邊的說明,

下載安裝檔,把 Mac 版的 App Inventor 裝好:

Screen Shot 2016-09-05 at 6.39.55 PM  

 

裝好之後,Mac 版的 aiStarter 就會自動啟動了:

testuser@localhost ~ $ ps aux | egrep -i starter
testuser 925 0.0  0.0 633808  6664   ??  S  7:50PM   0:02.67 /Applications/AppInventor/commands-for-Appinventor/aiStarter
testuser 616 0.0  0.0 633104  7340   ??  S  7:48PM   0:00.11 /Applications/AppInventor/commands-for-Appinventor/aiStarter

 

2. 建立一個新的專案

到 MIT App Inventor  首頁,按下 Start new project 開始建立一個新的專案:

Screen Shot 2016-09-05 at 10.43.54 PM

 

幫專案取個名稱,不過專案名稱裡不能有空白字元…

我這個專案想做的是酒精與水的混合,就叫 AlcoholMixer 吧:

Screen Shot 2016-09-05 at 10.44.22 PM

 

3. 準備好所需要的元件與版面

接著就會進入編輯區,從最右上角的 Designer | Blocks 可以選擇目前的模式,

Designer 表示要修改所需的元件,Blocks 則是實作程式的邏輯~

先選到 Designer 模式,最左邊的 Palette 區可以將各種元件拖到 Viewer 區來排列,

最右邊的 Properties 區則可以設定元件的初始屬性,

有時候元件層層相叠不好選取的話,可以在 Components 區裡的樹狀階層直接點選:

Screen Shot 2016-09-05 at 10.48.12 PM  

 

像這是我把元件拉好之後的樣子,我先放了幾個 HorizontalArrangement 元件,

接著在每個水平元件裡,放進 TextBox 和 Label 以及按鈕~

網頁上顯示似乎有些怪怪的,TextBox 和 Label 有重叠的部分,

先不要管它,等最後在模擬器/手機上執行時再來確認狀況:

Screen Shot 2016-09-06 at 11.39.00 PM  

 

4. 將元件重新命名

剛剛拉好的元件,名稱都是預設的像是 TextBox1, Label1 等等較無意義的名稱,

建議將比較重要的元件重新命名,這樣待會在程式邏輯那邊比較清楚~

只要選到 Blocks 模式,在左邊 Blocks 區域選擇要改名字的元件,

再按 Rename 輸入新的元件名稱就行了~

像我把剛剛的幾個 TextBox 都改成了有意義的名稱,如 TextBoxInDensity, TextBoxInVolume 等等:

Screen Shot 2016-09-06 at 11.46.31 PM  

 

5. 設計程式邏輯

接下來就是程式的邏輯設計~

以這個專案來說,邏輯很簡單,

假設使用者已經有密度為 InDensity,體積是 InVolume 的酒精,

想調和成 OutDensity 的酒精的話,要加多少水呢?

這只是個簡單的理化問題,InDensity * InVolume = OutDensity * OutVolume,

而 OutVolume 再減掉原有的酒精 InVolume,就是需要的水量了~

 

進到 Blocks 模式後,在左邊的 Blocks 區域有各種邏輯區塊可以選擇,

若是跟元件有直接相關的,就直接點選對應的元件,就會顯示可用的區塊。

像是我點了 ButtonCalc 這個按鈕元件,右邊就顯示出這個按鈕可以用的功能,

直接選第一個的話,就是在按鈕被按下時要做某件事:

Screen Shot 2016-09-07 at 12.29.52 AM  

 

下面是我設計出來的邏輯~

當 ButtonCalc (計算水量) 被按下時,就把 LabelRequiredWater 的內容設成 “需要 XXX CC 的水”,

並且把原本隱藏起來的 LabelRequiredWater 設成顯示~

這邊的 XXX 水量是呼叫一個叫 CalcWater 的函式來完成的,

當然也可以直接把函式邏輯就寫在 call 的位置,不過當程式越大的時候,

切出函式還是會比較好懂,之後也可以再利用:

Screen Shot 2016-09-07 at 12.10.32 AM

 

而 CalcWater 這個函式的定義如下,

基本上就是把剛剛的理化公式套進去,最後用 round 區塊將小數點之後取四捨五入:

 Screen Shot 2016-09-07 at 12.10.50 AM

Screen Shot 2016-09-07 at 12.13.02 AM

 

眼尖的人應該很快就可以發現,上面的邏輯完全沒考慮錯誤處理,

的確,如果故意要將 95 度的酒精變成 99 度,那加多少水都是不行的。

另外,酒精密度 (度數) 的部分我們也都沒有限制…

不過這只是個 Hello World 專案,就先不把較複雜的邏輯寫上去了~

 

6. 在模擬器中測試程式

點選 Connect > Emulator,就會啟動 Android 模擬器,要稍等一下…

Screen Shot 2016-09-07 at 12.04.31 AM Screen Shot 2016-09-07 at 12.04.43 AM

 

模擬器啟動之後,就可以看到我們設計的 app 畫面 (左邊的圖),

在我按下「計算水量」按鈕後,就算出結果 (右邊的圖):

Screen Shot 2016-09-07 at 12.07.09 AM Screen Shot 2016-09-07 at 12.10.14 AM

 

當 App Inventor 已經和模擬器連上線之後,在 App Inventor 裡面的 Designer 做修改的話,

模擬器裡的 app 也會立刻重新整理畫面 (猜測是有點像 Apache Cordova 的實作方式?),

所以能立刻看到修改後的結果,還蠻不錯的~

不過偶爾會遇到連線似乎卡住,都沒有反應的狀況,

這時只能按 Connect > Reset 將模擬器關掉後,再重新連線看看了~

 

用 App Inventor 寫 app 真的很簡單,雖然一開始需要一點點熟悉的時間,

但蠻快就可以上手開始寫 app 了,真的很棒喔~^^

之後將 App Inventor 寫的 app 上架後,再來寫成文章分享囉~

 

(本頁面已被瀏覽過 1,682 次)

發表迴響

你的電子郵件位址並不會被公開。

這個網站採用 Akismet 服務減少垃圾留言。進一步瞭解 Akismet 如何處理網站訪客的留言資料