發表文章

目前顯示的是有「AppInventor」標籤的文章

雜談:快速建立手機App的四個小技巧

圖片
在開發手機App之前,要了解怎麼快速建立一個基本版App的流程:「定義App最低限度功能需求」、「選擇工具與素材」、「試用這些元件的功能」、「美化App」。 一、定義App最低限度功能需求 這是最煩人的步驟,在此步驟 要先定義好App的基本功能 。剩下的功能會在後續開發過程中慢慢浮現出來。 範例一: 要設計一個像臉書的社群網站App,基本的功能可能會有: 1. 會員註冊、登入、登出。 2. 發文。 3. 交友。 範例二: 要設計一個計算機App,基本的功能可能會有: 1. 輸入數字。 2. 有兩個數字的加減乘除。 範例三: 要設計一個人臉辨識App,基本的功能可能會有: 1. 拍照。 2. 錄影。 3. 輸入人臉照片名稱。 4. 可以辨別是男性還是女性。 5. 可以辨識年齡。 但請記得這步驟是要找出「 最低限度功能需求 」而非找出App的所有功能。 二、選擇工具與素材 再來要選擇工具(tools)與素材(materials),這些工具(tools)與素材(materials)可以統稱為元件(components)。元件就是App上的按鈕、圖片、相機等。以 App Inventor 與 Thunkable  來說,圖中的紅色長方形就是這兩個手機App設計平台所提供的元件。 在此步驟可以試著使用平台上所提供的範例來快速瞭解元件的基本功能,但尚不需要很詳細瞭解。隨著開發過程,就會慢慢地深入瞭解元件的功能。 三、試用這些元件的功能 這步驟最重要的是「找出這些元件功能是否有符合 最低限度功能需求 」,這步驟會一直不斷測試、修改、測試、修改地循環,直到找出滿足App 最低限度功能需求 的元件。 四、美化App 找出元件後,就會開始著手進行開發App的雛型(Prototype),等到App的基本功能都有了,就可以開始美化App,例如在App中增加動畫,「歡迎畫面」、「音效」等。那如何美化App呢?可以多試試  Apple App Store 與 Google Play  上排名在前面的App來激發想法。 若您覺得文章寫得不錯,請點選文章上的廣告,來支持小編,謝謝。 If you like this post, please click the ads on the blog or  buy me a coffee . Thank you...

MIT App Inventor 2 Text To Speech Robot 日韓文語音機器人

圖片
在上一個範例 MIT App Inventor 2 乒乓球遊戲 裡使用 App Inventor Starter Apps 的範例 PongStarter.aia 來製作遊戲,而這些範例裡沒有和 文字轉語音積木 ( TextToSpeech )有關的範例。筆者就來介紹 文字轉語音積木 ( TextToSpeech )的應用範例。可以先看官網所提供的 Talk to Me 教程 或是 影片教學 與 教學文件 。 那筆者想問對 文字轉語音積木 ( TextToSpeech )有一些了解的讀者一個問題:「如何讓App發出日文或韓文呢?」 提示:需要設定 Country 與 Language 這兩個屬性。 底下為筆者的解法。 畫面設計如下 TextToSpeech1 用來發出 TextBox1 裡的日文。 TextToSpeech2 用來發出 TextBox2 裡的韓文。 積木程式如下 日文與韓文的 Country Code 與 Language Code 是筆者用Google搜尋找到的。 在 MEMU Play 模擬器 上的測試影片: 若您覺得文章寫得不錯,請點選文章上的廣告,來支持小編,謝謝。 If you like this post, please click the ads on the blog or  buy me a coffee . Thank you very much.

Otto機器人之舞蹈動作App設計

圖片
下圖為附件 Otto_Commander.aia 的畫面說明, 點一下 順序列表 上的舞步名稱就會刪除該舞步。 App 操作方式可參考: https://www.youtube.com/watch?v=zQ1Mn5OlHy0 Otto 動作結果 https://www.youtube.com/watch? v=9HF9vCxN8I4 https://www.youtube.com/watch?v=-aZIP6okzZ8 底下是想法的說明: 目前是以程式是以 a, b, c, d 四個英文字母對應四個舞步動作。 手機只要把這四個字母所組成的指令透過藍牙一次傳給 Otto就可以了。 例如手機傳送 a b c d c b a 這一串指令給 Otto 時, Otto就會做 抖左腳 、 抖右腳 、 抬左腳 、 抬右腳 、 抬左腳 、 抖右腳 、抖左腳 , 七個動作。 原因是因為硬體會有緩衝的空間來處理Serial Port(TX與RX)的資料。 另外下圖是在此App舞步指令個數限制的積木所在說明: 若您覺得文章寫得不錯,請點選文章上的廣告,來支持小編,謝謝。 If you like this post, please click the ads on the blog or  buy me a coffee . Thank you very much.

MIT App Inventor 2 乒乓球遊戲

圖片
筆者用過 Scratch 與 Java 設計過乒乓球遊戲後,此次要用MIT App Inventor 2來開發囉。首先可從 App Inventor Starter Apps 下載此次用到的素材: PongStarter.aia 。 準備專案素材 在AI2中匯入此檔案: 選擇PongStarter.aia檔案 此時會看到下圖,如果沒有看到平台的話,請將平台的Y軸設定低一點的值。 程式設計 一、讓球移動 固定方向直線往下移動 不固定方向往下移動 這邊使用亂數(random integer from....)積木來決定球要往下移動的方向。 使球反彈 碰到螢幕邊緣反彈 碰到平台反彈 二、移動平台 水平移動平台 三、計算得分 使用一個副程式(Procedure):changeAndShowScore與一個變數(Variable):Score 並在球碰到平台、開始按鈕按下、重置按鈕按下,此三種事件發生時改變分數。 四、遊戲結束 五、改變背景與增加音效 在UI設計中新增一個Sound元件的積木 使用一個副程式(Procedure):playSound來播放音效 並在球碰到邊緣或平台時,播放音效 六、音效播放控制 此部分要讓使用者可以選擇是否要有音效,使用一個CheckBox來控制,並將命名為SoundOnChkBox。 接著把playSound副程式修改 影片: 參考資料: http://www.appinventor.org/content/ai2apps/intermediateApps/pong 若您覺得文章寫得不錯,請點選文章上的廣告,來支持小編,謝謝。 If you like this post, please click the ads on the blog or  buy me a coffee . Thank you very much.

MIT App Inventor 2 Spinner 下拉選單範例

圖片
在 如何設計Android手機遙控Otto 中,筆者用了Button元件來示範,但若跳舞的指令一直增加時,就要一直增加按鈕元件,若指令有二十幾個時,版面會不好看,那有沒有比較容易一點的方式? 本文將使用Spinner元件來簡化這個問題,首先假設有四個跳舞指令如下: 索引 Otto指令名稱 Otto指令 1 抖左腳 a 2 抖右腳 b 3 抬左腳 c 4 抬右腳 d 於是程式用了兩個清單(list),一個是指令名稱,一個是指令本身: 把指令名稱指定給Spinner選單,若使用者選擇 抬左腳 ,  抬左腳 在 指令名稱 清單(上圖的左邊)的索引(位置)是 3 ,對應到 指令 清單(上圖的右邊)會找到 c 這個指令。 範例下載處 (註:只能供APP Invetor的範例,mBlock部分可參考 如何設計Android手機遙控Otto ) 若您覺得文章寫得不錯,請點選文章上的廣告,來支持小編,謝謝。 If you like this post, please click the ads on the blog or  buy me a coffee . Thank you very much.

如何設計Android手機遙控Otto

圖片
在 Otto機器人動作之程式碼分析 後,並了解Otto的程式碼概念後,我們就可以著手以 mBlock 來設計所有的舞步,並搭配藍牙無線技術,讓Android手機可以來控制自己設計出來的Otto動作,而本文將要說明如何做到這些目標。會分成底下幾個部分來說明: Otto的mBlock舞步程式設計 Otto的mBlock藍牙程式設計 MIT App Inventor程式設計 先使用 MIT App Inventor 設計Android手機程式,在著手設計mBlock程式;或是先設計mBlock程式,在設計Android手機程式,都是可行的流程。不過筆者比較習慣先從Otto本身的mBlock程式設計開始,而在設計之前有件事要先想好:「 手機App與Arduino的溝通方式 。」 本文會使用藍牙當成Arduino與Android手機溝通的媒體,如上面投影片提到的所用的文字語言不一樣,雙方可能也無法順利溝通。因為是手機要來控制Otto機器人,那麼手機就會先發送訊息給Otto, Otto收到訊息後不見得會做預期的動作 ,所以要先定義好兩者的溝通方式。筆者訊息的設計方式為 手機端傳送 小寫字母 s 到 otto,otto收到 小寫字母 s 後做抖右腳的動作。 小寫字母 s 訊息傳送過程如下圖: 手機的藍牙會先送給Otto上的藍牙模組,藍牙模組再透過TX/RX兩個腳位與Nano通訊。 mBlock 積木設計 在mBlock裡,可以使用 <串口可讀取字節數> 與 <串口讀取一個字節> 兩個積木來取得藍牙模組送來的訊息。下圖中的馬達歸位與 抖右腳 為自訂積木,抖右腳可參考筆者 Otto機器人動作之程式碼分析 一文,而馬達歸位就是將四個Servo的角度設定為90度。( 注意:此部分不需要將藍牙模組接到Nano上。 ) 接著可以使用 Arduino IDE 中的序列埠監控視窗(Serial Monitor)工具來測試 mBlock 的程式,而 mBlock的串口通訊預設速率為115200 。 此時,Otto要抖右腳三次才算正常, 這時可以把藍牙模組接到Nano上 。接著可進行Android手機程式設計。 MIT App Inventor積木設計 在MIT App Inventor部分,...

MIT App Inventor 圖片檔大小限制

圖片
注意以下資訊尚未在Android 6.1.x 以上的實機測試,已用Android 6.0.1實機測試過。 最近發現用MIT App Inventor開發出來的程式「 雲林SONG 藍牙小夜燈 」,會造成在某些版本的Android系統異常(目前查出是Android 6.x.x以上),出現類似如下圖的訊息: 於是用 Genymotion [Android 模擬器] 來重現最近遇到的Android系統異常問題 ,原因居然是 App圖片檔的檔案大小過大與Android版本為6.0以上 時,就會讓Android系統出現異常而無法使用手機,也就是說用MIT App Inventor開發Android App時,需要注意圖片檔的大小,預防Android系統異常。 錯誤訊息就是記憶體不足 詳細說明可參考MIT App Inventor官網對圖片檔的說明: http://ai2.appinventor.mit.edu/reference/other/usingImages.html 唉,又是個不怎麼好的經驗!這個問題造成一些人的Android手機須重置來恢復原廠設定,才能繼續使用手機。 筆者開始對用圖片做畫面的美工感到害怕了... 開發Android App的人須特別注意這一點。 若您覺得文章寫得不錯,請點選文章上的廣告,來支持小編,謝謝。

Arduino Nano 藍牙小夜燈 ( Control a Lamp from Android Phone )

圖片
感謝 NFU Dream Maker 所提供的免費課程,讓筆者完成DIY的藍牙小夜燈,底下是筆者重新設計Arduino程式與Android APP兩部分的分享。 硬體材料: 1. Arduino Nano 板子 x 1 2. NFU Dream Maker 所設計的 PCB x 1 3. RGB LED x 3 4. 電阻 x 3 5. HC-05 藍牙模組 x 1 硬體電路: 紅色燈接 --> D9 綠色燈接 --> D10 藍色燈接 --> D11 上圖省略藍牙的VCC、GND接線 完成圖: Arduino程式: https://goo.gl/hIcj8x MIT App Inventor程式: https://goo.gl/CKoxH0 Android APK 下載處: https://goo.gl/Vdrsjl 示範影片: 若您覺得文章寫得不錯,請點選文章上的廣告,來支持小編,謝謝。

MIT App Inventor 2 健康體重BMI 範例 ( MIT App Inventor 2: Body Mass Index )

圖片
本文要來製作跟健康小有關係的App:計算BMI。首先要了解BMI是怎麼算來的。 BMI = 體重(以公斤為單位) / 身高 2 (以公尺 2為單位 ) 例如:一個70公斤的人,身高是170公分,則BMI為 70(公斤)/1.70 2   ( 公尺 2  )=   24.22 體重正常範圍為   BMI=18.5~24   App的使用介面(User Interface)設計如下圖: 用了三個水平對齊(HorizontalArrangement:HorizontalArrangement1、HorizontalArrangement2、HorizontalArrangement3)版面配置(Layout)、五個標籤(Label:Label1、Label2、Label3、Label4、result)、兩個文字輸入框(TextBox:height、weight)、兩個按鈕(Button:computeBMI、clearData)。 而程式積木如下: 執行結果截圖: 試試看自己的BMI是否在正常範圍吧。 若您覺得文章寫得不錯,請點選文章上的廣告,來支持小編,謝謝。

MIT App Inventor 2 你好 (Hello MIT App Inventor 2)

圖片
If you like this post, please click the ads on the blog or  buy me a coffee . Thank you very much. MIT App Inventor 2 是一套網頁式開發Android App的環境,與  Scratch  一樣採程式積木的操作方式。使用MIT App Inventor 2需要有Google的帳號,此部分可參考: 第一章 學習App Inventor的準備工作 或 謝碧景老師 製作的 教學影片 。 MIT App Inventor 2  is web-based environment for creating Android applications. It is similar to   Scratch  that use visual programming. A google account is needed for using MIT App Inventor 2. Please refer  to Getting Started with MIT App Inventor 2  to prepare MIT App Inventor 2 environment. 環境建置好以後,就來拉一些積木來測試吧。 Well done. Let's making a simple project: "Hello" 建立新專案(Start New Project): 使用滑鼠將Button、Label、TextBox個拖曳一個至網頁上的手機畫面(Screen1): Add three user interfaces "Button, Label, TextBox" to display screen(Screen 1): 接下來要設計按鈕的程式積木,點選畫面右上方的Blocks按鈕: Click "Blocks" button to design the code blocks for "Button" user interface: 點選畫面左方的Button1,將 when Button1.Click ...