差異處

這裏顯示兩個版本的差異處。

--- open:uml [2022/03/03 00:16]
wenchin 建立
+++ open:uml [2022/03/18 17:11] (目前版本)
wenchin 建立
@@ 行 1: / 行 1: @@
-====== UML ～ 系統架構應用範例 ======
+====== UML 應用範例 ======
 \\
 ----
-===== AIoT 車牌辨識～停車場自動化管理 實作 =====
+===== 1️⃣ AIoT 車牌辨識～停車場自動化管理 =====
-=====  ====
+  * 專案簡述：
-\\
+    * 利用 ESP32Cam 微控板 模擬停車場出入口
-----
+    * 利用 PC 執行 Python 程式來扮演 停場場的管控中心
-<uml>
+    * 車牌辨識 使用 OpenALPR 開發套件
-title "\n系統架構 及 運作原理\n車輛:靠近+遠離\n"
+  * 系統架構 及 運作原理 \\ <uml>
+title "\nAIoT 車牌辨識～停車場自動化管理\n\n系統架構 及 運作原理\n"
 actor Object as "人/車/物體"
@@ 行 46: / 行 48: @@
 </uml>
-<jumbotron background=":maker:parkinglot:white.png">
-</jumbotron>
+\\
+----
+===== 2️⃣ 防蚊旅行家 =====
+  * 專案簡述：
+    * (精簡版)
+      * 利用政府的 Open Data 及旅行者的手機座標 來判定 旅行者 是否已進入登革熱病媒蚊高密度區域
+      * 若是，經計算後可透過 LINE Notify 來提醒
+    * (完整版)
+      * 採用 MongoDB 來記錄旅行者的足跡，並呈現在 OpenStreetMap 開放街圖上
+  * 系統架構圖 (精簡版) \\ <uml>
+title "\n🦟 防蚊旅行家 😎\n\n系統架構圖 (精簡版)\n"
+sprite $access jar:archimate/access
+sprite $serving jar:archimate/serving
+together {
+  agent owntracks as "OwnTracks\nApp"
+  actor handset as "旅行者\n@手機"
+  agent lineapp as "LINE\nApp"
+}
+cloud opendata as "Open Data/API" {
+  file area as "以經緯度\n查詢行政區\nAPI"
+  file density as "病媒蚊\n密度調查\nData"
+  file linenotify as "Line\nNotify\nAPI"
+}
+package mosquitto as "Mosquitto" {
+  database mqttserver as "MQTT\nServer" #FCA
+}
+package python as "Python" {
+  file watcher as "• 讀取 Open Data\n• 訂閱 MQTT 旅行者座標\n• 呼叫 行政區 Open API\n• 查詢病媒蚊風險級數\n• 傳送 Line Notify 訊息" #AFC
+}
+owntracks = handset
+handset = lineapp
+linenotify ~> lineapp
+watcher => mqttserver
+owntracks ~d~> mqttserver : 經緯度
+watcher ~u~> density
+watcher ~u~> linenotify : 告警
+watcher ~u~> area
+legend left
+圖例
+----
+<$access> : Internet
+<$serving> : LAN
+endlegend
+</uml>
+\\
+  * 系統架構圖 (完整版) \\ <uml>
+title "\n🦟 防蚊旅行家 😎\n\n系統架構圖 (完整版)\n"
+sprite $access jar:archimate/access
+sprite $serving jar:archimate/serving
+together {
+  actor manager as "管理者\n@PC"
+  agent browser as "Browser"
+}
+together {
+  agent lineapp as "LINE\nApp"
+  actor handset as "旅行者\n@手機"
+  agent owntracks as "OwnTracks\nApp"
+}
+cloud opendata as "Open Data/API" {
+  file osm as "Open\nStreetMap\nAPI"
+  together {
+    file density as "病媒蚊\n密度調查\nData"
+    file poi as "登革熱\n確定病例分佈\nData"
+  }
+  file linenotify as "Line\nNotify\nAPI"
+}
+package mosquitto as "Mosquitto" {
+  database mqttserver as "MQTT\nServer" #FCA
+}
+package nodejs as "Node.js" {
+  file scraper as "Data\nScraper" #AFC
+  file extractor as "Route\nExtractor" #AFC
+  file watcher as "Route\nWatcher\n& Recorder" #AFC
+}
+package mongodb as "MongoDB" {
+  database dbserver as "Database\nServer" #FAC
+}
+package apache as "Apache" {
+  file dashboard as "Traveler\nDashboard" #ACF
+}
+package storage as "File Storage" {
+  file geojson as "GeoJSON"
+}
+manager = browser
+lineapp = handset
+handset = owntracks
+browser ~> osm
+poi -[hidden]r-> linenotify
+linenotify ~r~> lineapp
+extractor -[hidden]r-> scraper
+scraper -[hidden]r-> watcher
+watcher => mqttserver
+extractor ==> dbserver
+watcher ==> dbserver
+scraper ==> dbserver
+dashboard ==> geojson
+scraper ==> geojson
+browser ~~~> dashboard
+browser ~~~> extractor
+owntracks ~~~> mqttserver
+scraper ~u~~> poi
+scraper ~u~~> density
+watcher ~u~~> linenotify
+legend right
+圖例
+----
+<$access> : Internet
+<$serving> : LAN
+endlegend
+</uml>
+\\
+----
+===== 3️⃣ 車隊循跡管理 =====
+  * 專案簡述：
+    * 利用 ESP8266 外加 GPS 及 4G LTE 模組做為車機
+    * 透過 Node.js 執行 RESTful API 提供給車載機呼叫，以記錄車輛軌跡到 MongoDB
+    * 透過 Node.js 執行 RESTful API 提供給管理者 Browser 操作界面 AJAX 呼叫，以呈現車輛軌跡到地圖上
+    * 透過 Docker 執行 OpenMapTiles 地圖 Map Server
+  * 系統架構圖 & Port Mapping \\ <uml>
+title "\n車隊循跡管理\n\n系統架構圖 & Port Mapping\n"
+sprite $access jar:archimate/access
+sprite $serving jar:archimate/serving
+actor manager as "管理者"
+actor car as "車載裝置"
+agent browser_fd as "Browser"
+agent mcu as "GPS+LTE\n@微控板"
+package Docker {
+  file maptiler as "OpenMapTiles\nMap Server\nNAT:11003→VM:11003→Docker:80" #CAF
+}
+package Apache {
+  file fleetdashboard as "Fleet\nDashboard\nNAT:11002→VM:80" #ACF
+}
+package Node.js {
+  file extractor as "Route\nExtractor\nNAT:11001→VM:11001" #AFC
+  file recorder as "Route\nRecorder\nNAT:11000→VM:11000" #AFC
+}
+package MongoDB {
+  database mongodb as "Database\nServer\nVM:27017" #FAC
+}
+manager = browser_fd
+car = mcu
+recorder ==> mongodb
+extractor ==> mongodb
+browser_fd ~~~> maptiler
+browser_fd ~~~> fleetdashboard
+browser_fd ~~~> extractor
+mcu ~~~> recorder
+legend left
+圖例
+----
+<$access> : WAN (Internet Connection)
+<$serving> : LAN or Co-Hosting
+endlegend
+</uml>
+\\
+----
+===== 4️⃣ 營建業 典型業務模式 =====
+<uml>
+銀行->>建設公司: 土地、建築融資
+建設公司->>銀行: 價金信託
+建設公司->>營造廠商: 工程發包
+note right
+  營造廠商:
+  【承攬模式】
+.包工包料
+.包工不包料
+end note
+建設公司->>廣告公司: 委託代理銷售
+廣告公司->>購屋客戶: 銷售(預售屋)
+營造廠商->>建設公司: 完工
+廣告公司->>購屋客戶: 銷售(成屋)
+建設公司->>購屋客戶: 直接銷售(餘屋)
+銀行->>購屋客戶: 貸款
+建設公司->>購屋客戶: 產權移轉、交屋
+</uml>