2023年6月21日 星期三

[app, Thunkable, flowchart] 從流程圖到 Thunkable app_5:計算體脂肪 BMI 值

 從流程圖到 Thunkable app_5:

計算體脂肪 BMI 值

Line:ted2016.kpvs
Email:Lct4246@gmail.com
FBhttp://gg.gg/TedLeeFB/
Bloghttp://gg.gg/TedLeeBlog/

June 21, 2023
[1]

 


本 Thunkable app 系列文之五係改編陳會安老師所著「2_fChart_Blockly_Thunkable_變數與運算子(循序結構).pdf(https://reurl.cc/6NEGRV)」中第 46、81 至 83 頁中攝氏溫度轉華氏範例。
第一小節先說明要解決的問題,再將它的解題步驟匯整為陳會安老師設計的 fChart 流程圖(圖 1、2)。最後再著手設計 app 的呈現畫面(圖 3、4)及其背後的控制程式(圖 5)。

問題說明

輸入身高 h(單位:公尺)及體重 w(單位:公斤),使用下列公式自動計算出相對應的 BMI(Body Mass Index,身體質量指標)數值:
BMI = w / h × h,h 以公尺計

根據陳會安老師提供的圖 1 流程。

圖 1:BMI 的解題流程圖

我們說這個人身高 180,基本單位是「公分」。然而,BMI 公式中的身高是要以「公尺」做度量。有句廣告詞說的好:電腦也會煮花生。不管使用者要輸入哪一種,程式應該可以更聰明地自動判斷出來吧?(圖 2)。

圖 2:程式會自動判斷身高的單位

畫面設計

會安老師設計的畫面如圖 3 所示,我們將使用 3 個 Label、2 個 Text Input 和 1 個 button 元件來完成。

圖 3:畫面設計圖

各元件的命名及其屬性設定詳列如圖 4。


圖 4:各元件設定

程式畫面

在程式自動化方面,當我們輸入完身高與體重,按下按鈕後即開始計算 BMI 值。最後,將計算結果直接更新到畫面最下方的文字標籤即可(圖 5)。


圖 5:積木程式

2023年5月29日 星期一

[app, Thunkable, flowchart] 從流程圖到 Thunkable app_4:攝氏轉華氏溫度

 從流程圖到 Thunkable app_4:

攝氏轉華氏溫度

Line:ted2016.kpvs
Email:Lct4246@gmail.com
FBhttp://gg.gg/TedLeeFB/
Bloghttp://gg.gg/TedLeeBlog/

May 29, 2023
[1]


本 Thunkable app 系列文之四係改編陳會安老師所著「2_fChart_Blockly_Thunkable_變數與運算子(循序結構).pdf(https://reurl.cc/6NEGRV)」中第 43 至 45 頁中攝氏溫度轉華氏範例。
第一小節先說明要解決的問題,再將它的解題步驟匯整為陳會安老師設計的 fChart 流程圖(圖 1、2)。最後再著手設計 app 的呈現畫面(圖 3、4)及其背後的控制程式(圖 5)。

問題說明

由鍵盤手動輸入圓的氏(Celsius)溫度 C  app 會自動代入以下公式來計算出對應的華氏(Fahrenheit溫度 F:
F = C× 9 / 5 + 32

陳會安老師已提供了如圖 1 的轉換流程。

圖 1:溫度轉換問題流程圖

為了實作的方便起見,我們將圖 1 更精要地濃縮為圖 2 的流程圖。

圖 2:溫度轉換問題的抽象流程圖

畫面設計

畫面的安排如圖 3 所示,我們使用 3 個 Label 和 1 個 Text Input(右上處)元件。

圖 3:畫面設計圖

各元件的命名及其屬性設定詳列如圖 4。


圖 4:各元件設定

程式畫面

在程式自動化方面,當我們輸入完華氏溫度時會觸發(trigger)改變(Changes)事件,於是我們立刻計算對應的華氏溫度並更新顯示結果(圖 5)。


圖 5:積木程式

進階思考

請讀者們動動腦,將以上的問題修改為華氏溫度轉換為攝氏溫度。或者,調整為不管是輸入哪一種溫標,程式都能自動處理。

2023年5月4日 星期四

準博和他的教科書

刘教授是我大學教計結的老師。那年,他拿到WU的PhD後就回台教書。
有一次,他在課堂中提到他本來只打算取得master後就回國找工作,但家人覺得既然碩士都拿了,何不乾脆攻博?於是他又花了5年拿了博士。
就在他取得學位的當下,在他腦袋中最想做的一件事是:
燒掉所有手邊的教科書,一本也不帶回台。
身体疼痛了快一週,這週間聽了蔣勲新述莊子。千年來,老莊出世的謬見,在這一刻徹底的打破、澄清。
我也突然懂了刘教授沒燒掉他留學七年所買下的教科書的心境───就好比我那批小屁孩,才上了半學年,就把七下的課本丟了那般。青春,急於拋棄一切振翅遨翔。等到騰空幾萬里才發現:忘了帶降落傘

2023年4月30日 星期日

[app, Thunkable, flowchart] 從流程圖到 Thunkable app_3:計算圓面積

 從流程圖到 Thunkable app_3:

計算圓面積

Line:ted2016.kpvs
Email:Lct4246@gmail.com
FBhttp://gg.gg/TedLeeFB/
Bloghttp://gg.gg/TedLeeBlog/

Apr. 30, 2023
[1]


本 Thunkable app 系列文之三係改編陳會安老師所著「2_fChart_Blockly_Thunkable_變數與運算子(循序結構).pdf(https://reurl.cc/6NEGRV)」中第 40 至 42 頁中計算圓面積範例。
第一小節先說明要解決的問題,再將它的解題步驟匯整為陳會安老師設計的 fChart 流程圖(圖 1、2)。最後再著手設計 app 的呈現畫面(圖 3、4)及其背後的控制程式(圖 5)。

問題說明

由鍵盤手動輸入圓的半徑(radius) app 會自動計算該圓的面積,並將之繪於畫面上。
陳會安老師提供了本問題前半段的解決流程:輸入圓的半徑 r,自動計算其面積,如圖 2 所示。

圖 1:長方形面積的計算流程

緊接著,要以半徑 r 在畫面上實際畫出該圓,如圖 2 所示。

圖 2:計算圓面積並繪圖的解題流程

畫面設計

畫面的安排如圖 3 所示,我們使用 3 個 Label、1 個 Text Input 和 1 個 Canvas(畫布)元件。

圖 3:畫面設計圖

各元件的命名及其屬性設定詳列如圖 4。


圖 4:各元件設定

程式畫面

在程式自動化方面,當我們輸入完圓形的半徑時會觸發(trigger)改變(Changes)事件,於是我們立刻計算該圓的面積並在畫布上畫出它的形狀(圖 5)。


圖 5:積木程式

2023年4月5日 星期三

[機電整合, 運算思維, OpenRoberta] 機電整合之運算思維訓練 1:以 Open Roberta Lab 開發平台為例

  機電整合之運算思維訓練 1:

以 Open Roberta Lab 開發平台為例[1]

Line:ted2016.kpvs
Email:Lct4246@gmail.com
FBhttp://gg.gg/TedLeeFB/
Bloghttp://gg.gg/TedLeeBlog/

Apr. 5, 2023
[2]



Arduino-like 的自走車教具要訓練學生學習什麼?硬體?軟體?STEM/STEAM?
如果說是學習硬體(機構、電控),那車輪幾輪才好?車的外形要設計成休旅車款嗎?…。
如果說是學習軟體(電控程式設計),那軟體學習需要綁一款硬體不可嗎?
科技的本質在於軟硬體知識的整合(integration)。硬體知識的核心在設計思考(design thinking)。另一方面,軟體知識的核心在運算思維(computational thinking)
本 Open Roberta Lab 開發平台系列文將著眼在以運算思維培養解決問題(problem solving)的能力:先詳述問題的內含,再甞試將對應的解決過程描繪成流程圖(flowchart)。最後,以純軟體模擬(simulation)的方式來實現(implement)之。

機電整合學習法

廠商會因為教育市場的利基不斷地設計出各種軟硬體套件,而現今的這些套件多半是將昔日專業機電技術相互結合的最終產物。在學習上,先以套件成品來吸引初學者的學習興趣後,再將之逐一拆解基礎的原子知識以利後續相關應用的整合,我們將之稱為「拼圖法」(最終的作品是各部件的組合)。以前述提及的自走車為例,我們在《廢材車之廢等級https://reurl.cc/9VxyMd一文中,已呈現了從套件拆解至原子知識的方法了。讀者們可細細推敲這其中的意涵。
另外,將需要的原子知識逐步整合成為一個專案亦為實務上常見的一種問題解決方法,我們將之稱為「積木法」(以眾小積木堆積成最終的作品)。

如圖 1,至於拼圖法或積木法的學習選擇,仍應端賴學習者的特質而選定之。但是,前者的要義在拆解;後者則著重在整合的層面上。這是學習時所需要特別留意的要項。

圖 1:機電整合之套件與專案學習法

問題描述:開車經過經斑馬線

小羅開車來到了十字路口(圖 2),請設計一科技架駛方式(車上裝有顏色感測器(color sensor)),在「禮讓行人,行車安全」的前提下順利通過。註:圖 2 的街道圖為 Scratch 內建的背景圖,老婆婆圖示「cartoon grandma with crutches」取用自 https://reurl.cc/7RnQDN。組合的完整圖檔「Urban+grandma.jpg」可由 https://reurl.cc/WD76mL 下載。

圖 2:十字路口場景

解題流程

使用運算思維的方法,詳列其四步驟如下:

1. 拆解(decomposition) 將上述的「開車經過經斑馬線」問題拆解為:前進、處理斑馬線識別、前進、左轉、前進、處理老婆婆過斑馬線、前進(圖 3)。


圖 3:問題拆解

2. 模式識別(pattern recognition) 觀察 1 的拆解內容,可以看出有前進控制、斑馬線處理、左轉三種模式。
3. 抽象化(abstraction) 開車經過經斑馬線時的處理方式:慢行、停車再開。
4. 演算法(algorithm) 以圖 4 的流程圖來詳述此問題的解決步驟。

圖 4:行經斑馬線問題的流程圖

原子操作(atomic operations)

Open Roberta(https://lab.open-roberta.org) 的程式積木中,是控制前進/後退的積木,速度從 0~100%,移動距離以公分為單位。

是控制左/右轉的積木,以角度值來轉動。

是顏色感測器的讀值積木。

透過這三個原子操作及結構化程式設計(structural programming)循序(sequential)選擇(selective)結構就能撰寫出本問題的完整程式了。


積木組合

為了簡化感測器感測南北向的白色斑馬線,我們將圖 2 的背景圖加上白色的長方形色塊,並將之放在圖 3 中的適當位置(完整的設定檔 TrafficSafty.json 可以從https://reurl.cc/ZXvpdp 下載)。其中,車子的初始位置亦已設定完畢。

最後,完整的控制程式 TrafficSafty.xml 如圖 5 所示,讀者們可以從 https://reurl.cc/7Rm5xd 下載。而程式的執行動畫如圖 6。註,需要反覆測試程式時,請按按鈕歸位。


圖 5:完整程式碼

圖 6:執行結果動畫


註:一開始使用 Open Roberta 時可以先註冊個人帳號,這樣我們寫過的專案都會自動存在自己的帳號之內。此外,Open Roberta 是一個支援多款機器人主機的開發平台,本文使用的是樂高 EV3 的模擬器,請依照圖 7 的方式先行選定。

圖 7:機器人主機設定

教學小幫手

為了將本文的 Open Roberta 專案融入「交通安全」教育以期能達到「禮讓行人,行車安全」的教學願景(vision),我們也設計了教案和(圖 8)和學習單(圖 9)供讀者們參考。





圖 8:教案

圖 9:學習單

筆者針對本文的教學翦影如圖 10 所示。



圖 10:教學翦影

後敘

喜歡動手做的讀者們可以先以設計思考(design thinking)的方法設計出自己的實體自走車後,再運用本文介紹的運算思維設計出自走車的機電整合控制程式試試。


[1] 感謝林汶忠老師提供協助。

2023年3月11日 星期六

[app, Thunkable, flowchart] 從流程圖到 Thunkable app_2:計算長方形面積

 從流程圖到 Thunkable app_2:

計算長方形面積

Line:ted2016.kpvs
Email:Lct4246@gmail.com
FBhttp://gg.gg/TedLeeFB/
Bloghttp://gg.gg/TedLeeBlog/

Mar. 11, 2023
[1]

當雲端的新服務發佈(publish)後沒多久,透過 API(Application Programming Interface)呼叫,App 版的介面也會很快的發行。舉例來說,ChatGPT 在 2022 年 11 月上線後,對應的 apps 在近期也可以陸陸續續從 app 市集(markets)上下載到。因此,雲端服務同時能提供網頁和 app 形式來連接已成為現今最主流的雙介面
另一方面,行動載具採 MVC(Model View Controller)設計概念,分成畫面設計和程式設計兩個階段。本文先說明要解決的問題,再將它的解題步驟匯整為陳會安老師設計的 fChart 流程圖。最後再著手設計 app 的呈現畫面及其背後的控制程式。

問題說明

由鍵盤輸入長方形的寬,並自動計算其面積。
陳會安老師提供了本問題的解決流程如圖 2 所示。首先,設定好長方形的高 height 為 135。接著,讀取輸入的寬 width。最後,計算其面積 area,並將之顯示在畫面上。

圖 1:長方形面積的計算流程

畫面設計

畫面的安排如圖 2 所示,我們使用馬 3 個 Label 和 1 個 Text Input 元件。
圖 2:畫面設計圖

各元件的命名及其屬性設定詳列如圖 3。

 
圖 3:各元件設定

程式畫面

在程式自動化方面,當我們輸入完長方形寬的大小後,按下 Enter 鍵或以滑鼠在空白處輕點一下(完成輸入)後會立即啟動 Submit(提交)事件。因此,我們將長方形的計算方式及結果輸出包在這個事件處理積木之內即可完成處理(圖 4)。


圖 4:積木程式