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

Document
這裡介紹一個好用的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後就會對這個開發工具熟悉許多~

留言

張貼留言

這個網誌中的熱門文章

【Arduino相關】 Arduino基礎介紹~ 腳位,PWM輸出,IDE...

圖片
Document Arduino 是一個很小很簡單的輸入輸出控制單元,他可以接受數位訊號和類比訊也可以輸出數位訊號。 簡單來說,你可以利用Arduino感測數位或類比訊號(例如溫度等等),然後輸出5V的類比訊號給電子元件(例如LED等等)去達到控制某個元件或開關等等。 再搭配各種開發模組,Arduino可以搭配出許多有趣的功能。 Arduino官方網站: https://www.arduino.cc/ Arduino的板子型號 Arduino的開發板型號很多,上網一查可以看到Uno,Yun,Nano....等等。這些板子都有不同的特性,開發者會依照不同情況與需求去選擇合適的板子,本篇介紹會以型號是Uno的板子。Uno在義大利文裡面是1的意思,因此顧名思義他是一個最原型最基礎的板子,因此搞懂Uno其他特性要理解也不會太難。 注意事項 使用Arduino前,幾件事情是要先注意 腳位不可短路(任兩個pin角不要相接) 電源腳不可接反(會燒掉IC) Pin腳位輸出電流小於20mA 總電流小於200mA Arduino 輸出輸入腳位 這裡先簡單介紹常用腳位 D0~D13 為數位輸出腳位,可以輸出5V的訊號。 (3,5,6,9,10,11此6個腳位可做PWM輸出) A0~A5 為類比輸入腳位,可以接收類比訊號。 (此5個腳位亦可做數位輸出) GND:接地 5V:輸出5V 3.3V:輸出3.3V VIN:可藉由這個腳位提供電源給Arduino PWM輸出 什麼叫做PWM輸出? 簡單的說就是當要使用數位訊號輸出類比訊號時的一種輸出方式。因為現實中不一定只會用到0V與5V兩種電壓輸出,我們常常也會使用連續的電壓做輸出去控至元件。所以說 Arduino的A0-A5腳位獲取類比訊號後,如果我們需要依照這個類比訊號的強弱去控制元件,就會用PWM的方式用數位訊號模擬出類比訊號再藉由D3,D5,D6,D9,D10,D11這6個腳位輸出模擬出來的訊號。例如用0到5V的電壓控制LED的強到弱(0V是關,5V是全亮 0~5V之間就是依照比例產生的亮度,就像2.5是半亮) 另外,說明一下,Arduino的A0-A5輸入類比訊號會使用1...
閱讀完整內容

【保險 】外幣收付非投資型商品考試隨筆整理~

Document 最近去考了保險的外幣考試,主要是想針對儲蓄險這塊做一點外幣的規劃,所以乾脆考一張證照。 準備的時候發現考題很廣所以很難記(明明考試名稱是外幣收付非投資型商品,可是卻有一堆投資型的題目要記XD),所以乾脆自己做一些筆記,然後也放在這邊給大家一個參考。 不過要說明一下,這個筆記的完整性是不完整的,因為我只是針對考古題上面常出的題目去歸類,所以一定會有沒記錄到的部分(例如某個信用評等或許是A-,但是我表格上卻沒有寫出來之類的..)。 如果是真的要準備這個考試的各位,自己一定要去熟讀相關參考書跟資料喔。(其實狂背考古題最快XD) 以下整理的幾個表格給各位參考: 保險業國外投資相關 投資總額 保險業資金 業主權益 保險業對國外及大陸地區不動產之投資總額 依「保險業辦理國外投資管理辦法」規定，保險業投資於股票、首次公開募集之股票、非本國企業發行之存託憑證，可轉換公司債及附認股權公司債之有價證券總額，不得超過該保險業保險法第１４６條之４核定國外投資總額百分之40% 保險業投資於外國證券集中交易市場、店頭市場交易之股票及國外證券投資信託基金受益憑證各項總額，不得超過保險法第146條之4所定國外投資總額最高上限之40% 保險業投資於國外表彰基金之有價證券總額,不得超過其依「保險法」第146條之4核定 國外投資總額之40% 「依96年7月18日修正之「保險法」第146條之4規定，保險業資金辦理國外投資總 額，由主管機關視各保險業之經營情況核定之，最高不得超過各該保險業資金45% 保險業資金得投資之國外資產證券化商品 保險業投資於美國聯邦國民抵押貸款協會、聯邦住宅抵押貸款公司及美國政府國民抵押貸款協會等機構發行或保證之住宅不動產抵押貸款債券，但每一機構之債券投資金額，不得超過保險業經核定之國外投資...
閱讀完整內容

【Arduino相關】用Arduino與LED製作霹靂燈~

圖片
Document 用Arduino跟基本的元件就可以製作出一些簡單的功能,用來練習如何用Arduino去控制電路。 這裡就來製作一下霹靂燈 霹靂燈就是燈光會從左亮到右再從又亮到左。 用四個LED燈來表示就像這樣 左上是第一步,之後就會照箭頭的方式一直循環在走~ 使用元件 LED燈*4 330歐姆電阻*4 電路圖 將4顆LED連接電阻再接上Arduino的D3,D4,D5,D6四個輸出孔。 當然Arduino要跟電腦連結~雖然圖上看不出來 實際接線圖 Arduino程式碼 byte startLED = 3; //開始的LED byte endLED = 6; //結束的LED int delaytime = 500; void setup() { for(byte i=startLED;i<=endLED;i++){ pinMode(i,OUTPUT); digitalWrite(i,LOW); } } void loop() { for(byte i=startLED;i startLED;i--){ digitalWrite(i,HIGH); delay(delaytime); digitalWrite(i,LOW); } } 此程式用2個迴圈跑出來,第一個迴圈是讓LED燈從D3跑到D5,第二個迴圈讓LED燈從D6跑到D4。 有注意到這個小技巧嗎? if()裡面的條件式用小(大)於而不用小(大)於等於,這樣就不會讓第一個與最後一個LED的時間因為重複亮燈而比較長。
閱讀完整內容