【 Arduino相關】 好用的APP線上開發工具~

這裡介紹一個好用的APP開發工具。我想大家在開發物聯網相關硬體或軟體的時候都會遇到一個挑戰,那就是開發APP... 這對開發物連網的人我想未必是熟悉的,一來APP這個近幾年來才興起的東西比較沒有參考資料,另一方面是一般熟悉單晶片開發的工程師比較注重於[功能]上的開發,對於APP這種需要考慮到使用者介面的設計模式較不熟悉。但是對於物聯網這件事情來說,移動裝置上的APP是相當重要的,畢竟物聯網的精神就是可以把各個東西連上網,並且可以讓人控制,而控制的介面當然是要讓使用者可以隨時隨地控制物品,這樣的物聯網才是有意義的。 就像之前提到的,開發APP可能讓每個人都很頭痛, 因此為了讓開發者可以輕鬆開發手機使用的APP, 知名的Google公司開發了一套非常直觀的線上開發系統名稱叫做AI2。 這套線上開發軟體不需要寫程式,只需要手動將需要的物件移動到想要的位置,然後手動將我們需要的程式[流程]手動安排好就可以簡單設計好一款APP並且在手機上使用。

這篇對AI2會先做一個最簡單的介紹。因為主要是讓各位可以先快速使用與迅速練習如何製作APP, 所以很多細節本篇都會先跳過,待續有空時再補上

登入AI2

AI2的官網 www.appinventor.mit.edu


登入上方官網後,要開始開發App的第一步就是點選左上角的【Create Apps!】。點選後會看到登入的畫面,基本上你將你的gmail信箱登入後,按照步驟點下去就可以開始使用。登入後會看到像是圖片中的畫面,如果需要中文的朋友,可以在右上角選擇【繁體中文】

介面

上方可以看到最上面有幾個選項:專案、連線、打包......我的專案...
下面一排還有:新增專案、刪除專案、發布作品到Gallery

我們這邊只說明幾個功能:

• 打包:將製作完成的APP打包好後傳到手機或現在到電腦,就是像是把商品包裝好要賣出去的感覺
• 我的專案:會列出你現有的專案有哪些。
• 新增專案:要設計新專案時就按這個按鈕,就會開始給一個空白的專案,我們就可以開始開發想要的功能。
• 刪除專案:如果要把專案刪除,就使用這個紐把專案刪掉。

按下新增專案後會進入開發介面 這是我們最主要的工作畫面,可以看到有一支手機的圖片在中間,左手邊可以看到有個清單叫做【元件面板],右邊也可以看到有兩列叫做【元件清單】與【元件屬性】
右上方也會看到兩個按鈕,一個叫做【畫面編排】跟【程式設計】。有了這幾個東西,我們就可以開始設計我們要製作的APP。這邊分成三個部分:(1)APP外觀設計,(2)元件屬性設定,(3)功能設定

APP外觀設計

你希望將來的APP介面長什麼樣子,就可以在畫面上的手機直接設計,設計方法就是把【元件面板】裡面要使用的元件用滑鼠拖曳過去,放在你要呈現的位置上。元件部分稍微說明幾個較重要的

$$在使用者介面清單

• 標籤:單純可以顯示文字
• 按鈕:按下去之後可以執行動作
• 文字輸入盒:可以讓使用者輸入文字(例如帳號)
• 密碼輸入盒:讓使用者輸入密碼

$$介面配置

• 水平配置:想讓元素水平排列的話要先把這個【水平配置】拖曳到畫面中(要設定屬性),再把要水平排列的元素拖曳過去。

屬性設定

安排好介面後,你需要把每個元件的屬性設定好,例如你希望按鈕是什麼顏色或是輸入方塊要多大等等,我們必須先設定好這些屬性,這些元件才能按照我們的需求去做進一步的設計。 要設定屬性的方法就是在【元件清單】選擇到你要設定的元件,然後在【元件屬性】中做設定,參考下圖。

功能設定

把外觀跟屬性都設定完之後,這個APP只是看起來好了,但是其實裡面的功能我們都還沒加上去。例如我們希望按下按鈕可以進行2個數字相加。這個相加的功能我們就必須放在按鈕上,讓這個按鈕在按下去後可以執行功能。 而設定功能的方式就是使用【程式設計】這個部分。將滑鼠移過去點一下後,畫面就會到程式設計的頁面,而這個時候我們不需要真的去寫程式,而是將左邊的各種內建好的動作,按照你要執行的邏輯去做排列組合,堆疊出你要的功能。 可以看到畫面左邊方塊底下有【內建方塊】、【screen1】跟【任意元件】,基本上我們先用到【內建方塊】跟【screen1】這兩個就好

• 內建方塊:各種設計程式需要用的流程控制與運算元件。例如要把按鈕設定成按下去後會登入會員,那登入的功能就要用這個方塊裡的元件來設計。
• screen1:裡面就是在【畫面編排】裡面所安排下去的元件(按鈕,標籤....)

接下來就是完成各元件該有的功能 這一部份比較需要保持邏輯清醒去想一下怎麼做,這裡先舉一個例子: 假設我有2個數字,按下一個按鈕後就會計算這2個數字的加、減、乘、除出來。 先說一下這個簡單的程式會有幾個元件在畫面中

1. 標籤一 (顯示輸入數字)
2. 標籤二 (顯示輸入數字)
3. 文字輸入盒一 (讓使用者打數字進去)
4. 文字輸入盒二 (讓使用者打數字進去)
5. 標籤三 (顯示A+B)
6. 標籤四 (顯示A-B)
7. 標籤五 (顯示A*B)
8. 標籤六 (顯示A/B)
9. 標籤七 (顯示A+B的計算結果)
10. 標籤八(顯示A-B的計算結果)
11. 標籤九(顯示A*B的計算結果)
12. 標籤十(顯示A/B的計算結果)
13. 按鈕 (按下去後開始執行計算式)

這時候最重要的就是要清楚知道流程是什麼? 為了表達清楚一點,這邊用條列式的方式列出來

1. 拉出screen1裡面的按鈕元件: 因為我們現在要製作的功能是在按下按鈕後要執行的,那我們當然要先把按鈕這個元件拉出來。而在按下[按鈕]這個元件的時候,會看到按鈕右列出現很多不同的動作,依照需要如何被執行而取選擇相對應的動作。(這裡選擇被點選,因為我們希望點下按鈕後執行動作)
2. 選擇標籤七/拉出【(標籤七)(文字)】: 我們需要將計算的結果顯示出來,所以我們先把他拉出來。並且[安裝]在按鈕這個元件上
3. 在內建方塊裡面選擇數學/把代表加法的符號拉出來:因為我們要執行的功能有相加的功能,所以我們把這個功能拉出來接在(標籤七)(文字)後方。為什麼要接在標籤七的後方?當然是因為要把結果顯示在這個標籤上面,所以不會是在其他地方。
4. 在screen1裡面選取文字輸入盒1/(文字輸入盒1)(文字)並且拉出來放在加法運算器中的左邊空格 (要被運算的數字,不就是在文字輸入盒一裡面讓使用者輸入嗎,當然會去選這一項)
5. 在screen1裡面選取文字輸入盒2/(文字輸入盒2)(文字)並且拉出來放在加法運算器中的右邊空格 (參考4)

目前為止已經做好第一個加法的運算,並且顯示出來了。因此,只要用同樣的邏輯重複上述5個步驟(當然該改的參數要改阿),就可以完成加減乘除的計算程式了!

完成圖會像這樣:

將程式打包輸出至手機執行

最後就是要將我們製作好的APP放到手機上去使用了。步驟其實非常簡單

• 選擇【打包apk】/【打包apk並顯示二維條碼】
• 用手機的QR code掃描器去掃描二維條碼
• 手機中需要開啟允許安裝不明來源的應用程式(因為你自己寫的APP一定沒經過APP商店的驗證,所以手機不知道來源會預先擋下來)

<圖片> 選擇【打包apk】/【打包apk並顯示二維條碼】:

<圖片> 用手機的QR code掃描器去掃描二維條碼 :

以上~是AI2的簡單介紹。建議大家自己動手試試看,相信製作一兩個簡單的APP後就會對這個開發工具熟悉許多~