---
tags: NewPOS
---

# POS客顯設計
GIT: [repo](https://)

## 配置圖
- Mobile POS
-

@startuml
package "Store" {    
    folder "SC server" {
        database "DB" as scdb
    }
    folder "Raspberry pi" {
        node "API" as api
        node "MQTT broker [Store]" as broker_store
        api .[hidden]d.> broker_store        
    }
    folder "IPAD" {
        node "POS client" as client         
    }
    
    client -- api
    api -- scdb
}

package "IDC" {
    node "POS client(Web server)" as webserver
}
webserver -- client
client <..> broker_store : message

@enduml

---

- Desktop POS
-

硬體:
    - 樹梅派13.3吋觸控銀幕(29.4cm * 16.5cm)
Web site:
    - 客顯設計同POS Client(PWA),建置在IDC上全省門市使用同一個site
    - 客顯PWA安裝不控設備(不做硬體註冊)
Storage:
    - 準備影片、圖片存放區，可能放置IDC但需確認可用空間，並設計清除規則
    - 需請小何加入上傳
DB:
    - 客顯使用Table未下傳進門市，需請小何加入
        - Media_file
        - Media_msg
        - Media_show_d
        - Media_show_h
API:
    - 門市增加api

:::info
藍色為本次客顯開發新增項目
:::

@startuml
package "Store" {
    folder "SC server" {
        database "DB" as scdb
        note right of scdb
            1. Media_file
            2. Media_msg
            3. Media_show_d
            4. Media_show_h
        end note
    }
    folder "Raspberry pi" {
        node "API" as api
        node "MQTT broker [Store]" as broker_store
        api .[hidden]d.> broker_store        
    }
    
    folder "IPAD" {
        node "POS client" as client
         
    }
    
    client -- api
    api -- scdb
    
    folder "Dock (Raspberry pi)" as dockpi {
        node "MQTT broker [Dock]" as broker_dock
        node "客顯PWA" as cus_pwa #LightSkyBlue
        note right of cus_pwa
            1. POS clinet即時訊息
            2. 總部設定廣告、影片
            3. 總部設定跑馬訊息
        end note
        node "Dock service" as dockpy
        
    }
    node "周邊硬體" as hardware
    node "觸控銀幕" as customer_display #LightSkyBlue
    cus_pwa -- customer_display #MediumBlue
    hardware -- dockpy
    dockpy <..> broker_dock :[message]
}

package "IDC" {
    node "POS client(Web server)" as webserver
    node "POS 客顯(web site)" as webserver2 #LightSkyBlue
    node "圖片、影片 存放區" as storage1 #LightSkyBlue
    storage1 .[hidden]r. webserver
}

webserver -- client
broker_store -- broker_dock #Green :bridge
client <..> broker_store : [message]
cus_pwa <..> broker_dock : [message] POS即時訊息
webserver2 -- cus_pwa #MediumBlue
api -- cus_pwa #MediumBlue :query
storage1 -- cus_pwa #MediumBlue
@enduml

---
## 流程
* 安裝客顯PWA
* 需要browser匯入自簽憑證

* 開啟客顯PWA
:::info
- 課顯PWA安裝在Dock上
- PWA client ip = Dock MQTT broker ip
:::

@startuml
participant "PWA Server" as PWA_Server
participant "PWA Client" as PWA_Client
participant "Dock MQTT Broker" as dock

PWA_Server -> PWA_Client : connect and refresh

PWA_Client -> PWA_Client : get user ip(from browser)

PWA_Client -> dock : connect to MQTT \nsubscribe tk3c\sd

PWA_Client -> dock : [publish message]ask dock topic\n 

dock -> PWA_Client : [Response Message]get dock topic\nex:\niep: tk3c/dock/cf070e407d8c\noep:tk3c/dock/cf070e407d8c/outbound

PWA_Client -> dock :subscribe dock topic

@enduml

---
## MQTT
:::info
broker設定: /etc/mosquitto/conf.d/*
:::
- topic
- message

---
## 畫面Layout
::: info
需要RWD
:::
- 13.3吋樹梅派銀幕
- 29.4cm*16.5cm

- POS機銀幕
- 30.3cm*23cm
---
## PWA
### 憑證
* 在linux chromium匯入憑證
* 根憑證 **tk3c_mpos_ca.pem**
* 中繼憑證 **tk3c_mpos_server.crt**
* 匯入後在授權單位啟用
* 

* 重啟browser
* 
### 安裝