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)。

問題說明

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

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

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

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

畫面設計

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

圖 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:積木程式

2023年2月28日 星期二

[app, Thunkable, flowchart] 從流程圖到 Thunkable app_1:加法

 從流程圖到 Thunkable app_1:

加法

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

Feb. 28, 2023
[1]


我們在這篇文章《從想法到實現:怎麼用程式解決問題?》(https://reurl.cc/6NEG7d)中已明確的指出:

流程圖(flowchart)為程式邏輯之母
將原始問題的一連串解決步驟表達成清晰、明確的解題流程之後,想要使用任何的程式語言來實作(implement)成軟體工具就變成「流程圖與程式語言」對應的轉換問題了。
本文以陳會安老師分享的 fChart+Thunkable 示例,詳細的解說 fChart(https://reurl.cc/gZ0rXV)流程圖如何以手工方式(目前沒有流程圖自動轉成程式語言語法(syntax)的演算法)一一轉換為 Thunkable app 。

  1. 1_fChart_Blockly_Thunkable_基礎與程式邏輯(https://reurl.cc/qkOp2p
  2. 2_fChart_Blockly_Thunkable_變數與運算子(循序結構)(https://reurl.cc/6NEGRV
  3. 3_fChart_Blockly_Thunkable_是否選(選擇結構)(https://reurl.cc/MRb2om
  4. 4_fChart_Blockly_Thunkable_二選一(選擇結構)(https://reurl.cc/pLWpbd
  5. 5_fChart_Blockly_Thunkable_多選一(選擇結構)(https://reurl.cc/DmdxMO
  6. 6_fChart_Blockly_Thunkable_迴圈(重複結構)(https://reurl.cc/mlGpbV
  7. 7_fChart_Blockly_Thunkable_函數(模組)(https://reurl.cc/AdK9ed
  8. 8_fChart_Blockly_Thunkable_清單(資料結構)(https://reurl.cc/Nqp2mm
  9. 9_Thunkable多螢幕App開發(https://reurl.cc/xlOWME
  10. 10_Thunkable跨平台行動開發(專案實例)(https://reurl.cc/qkOpRD

App 設計在 maker、IoT 上扮演的角色定位

在筆者拙著《物聯網的兩種標準作業模式:地對雲與雲對地》(https://reurl.cc/xlOWrb)一文中,從圖 1 中可以看出行動 Apps 扮演著兩種模式:遠端監控(remote monitoring)遠端顯示(remote display)

 
圖 1:IoT 三大技術領域:邊緣運算、雲端服務與行動 Apps

雖然目前 app 開發的市場已趨近飽和,像憤怒鳥 app 那樣一上架就萬人下載的榮景不再,不過 maker 或 IoT 創作者客製化(customize)成符合自己作品應用情境的版本仍是有其需求的。
註:我們之所以挑選 Thunkable 做為 apps 開發的入門工具乃是因為它能同時支援 Android 與 iOS 軟硬體平台。

問題說明

由鍵盤輸入兩數字,並顯示其和。
在圖 2 中,我們截取會安老師繪製的 fChart 流程圖來說明上述問題的四個解決步驟:輸入兩個數字 a 和 b、計算相加之和、顯示結果。

圖 2:兩數求和計算

App 設計邏輯:三區與二畫面

apps 設計工具多半採用 MVC(Mode-View-Controller,模型─視圖─控制器)架構,圖 3 即為 Thunkable IDE 的三明治式執行畫面:左側為元件(components)區、中間為 UI 設計區,最右側為元件屬性(properties)區。
此外,apps 設計的過程也分成設計(Design)畫面程式(Blocks)畫面。我們將在隨後的兩小節中詳細說明。

圖 3:Thunkable IDE

設計畫面

app 設計第一要務是要先想好它的呈現畫面。如圖 4 所示,我們需要 3 個文字標籤、2 個輸入文字和 1 個按鈕。
圖 4:UI 設計圖

在圖 5 中詳列了圖 4 用到的元件,將之以「元件名稱縮寫+用途」重新命名,並各元件對應的屬性。其中,為了畫面管理方便,我們在第一個數字和第二個數字區域使用 Group 來將 Label 與 Text Input 兩個元件以群組方式打包起來。

   
圖 5:元件配置、命名與其屬性設定

程式畫面

在圖 4 的 app 畫面中,我們輸入兩個數字 opd1 和 opd2,按下(Click 事件)藍色的計算鈕後將它們的相加的結果顯示在畫面的最下方。


圖 6:積木程式