54 lines
1.1 KiB
Markdown
54 lines
1.1 KiB
Markdown
# 5.3.9 Web Application Implementation
|
|
|
|
## Web Application Architecture
|
|
|
|
```mermaid
|
|
flowchart LR
|
|
Routes[Svelte Route Pages]
|
|
Controller[controller.js]
|
|
Store[store.js]
|
|
API[api.js]
|
|
Socket[Socket.IO Client]
|
|
Backend[Backend APIs]
|
|
|
|
Routes --> Controller
|
|
Controller --> Store
|
|
Controller --> API
|
|
Controller --> Socket
|
|
API --> Backend
|
|
Socket --> Backend
|
|
|
|
subgraph RoutePages["Main route pages"]
|
|
Auth[Auth]
|
|
Onboarding[Onboarding]
|
|
Camera[Camera]
|
|
Client[Client]
|
|
Activity[Activity]
|
|
Settings[Settings]
|
|
end
|
|
|
|
Routes --> RoutePages
|
|
```
|
|
|
|
## UI Flow
|
|
|
|
```mermaid
|
|
flowchart TD
|
|
Start[Open WebApp]
|
|
Auth[Sign in / Sign up]
|
|
Onboarding[Register browser as device]
|
|
Role{Chosen role}
|
|
Camera[Camera dashboard]
|
|
Client[Client dashboard]
|
|
Activity[Activity page]
|
|
Settings[Settings page]
|
|
|
|
Start --> Auth --> Onboarding --> Role
|
|
Role -->|camera| Camera
|
|
Role -->|client| Client
|
|
Camera --> Activity
|
|
Camera --> Settings
|
|
Client --> Activity
|
|
Client --> Settings
|
|
```
|