2023年2月28日 星期二

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

 從流程圖到 Thunkable app_1：

加法

Line：ted2016.kpvs
Email：Lct4246@gmail.com
FB：http://gg.gg/TedLeeFB/
Blog：http://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：積木程式

張貼者： 於
標籤： , ,

沒有留言:

張貼留言

訂閱： 張貼留言 (Atom)