https://github.com/fullstack-hy2020/misc
https://github.com/fullstack-hy2020/misc
Last synced: about 1 year ago
JSON representation
- Host: GitHub
- URL: https://github.com/fullstack-hy2020/misc
- Owner: fullstack-hy2020
- Created: 2020-01-25T13:23:23.000Z (over 6 years ago)
- Default Branch: master
- Last Pushed: 2025-03-24T17:05:33.000Z (over 1 year ago)
- Last Synced: 2025-03-28T06:09:32.283Z (about 1 year ago)
- Language: JavaScript
- Homepage:
- Size: 204 KB
- Stars: 47
- Watchers: 3
- Forks: 146
- Open Issues: 4
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
# diagrams
## part0b, 1st diagram
```mermaid
sequenceDiagram
participant browser
participant server
browser->>server: GET https://studies.cs.helsinki.fi/exampleapp/
activate server
server-->>browser: HTML document
deactivate server
browser->>server: GET https://studies.cs.helsinki.fi/exampleapp/kuva.png
activate server
server-->>browser: the png pic
deactivate server
Note right of browser: Page with a pic will is rendered
```
## part0b, 2nd diagram
```mermaid
sequenceDiagram
participant browser
participant server
browser->>server: GET https://studies.cs.helsinki.fi/exampleapp/notes
activate server
server-->>browser: HTML document
deactivate server
browser->>server: GET https://studies.cs.helsinki.fi/exampleapp/main.css
activate server
server-->>browser: the css file
deactivate server
browser->>server: GET https://studies.cs.helsinki.fi/exampleapp/main.js
activate server
server-->>browser: the JavaScript file
deactivate server
Note right of browser: The browser starts executing the JavaScript code that fetches the JSON from the server
browser->>server: GET https://studies.cs.helsinki.fi/exampleapp/data.json
activate server
server-->>browser: [{ "content": "HTML is easy", "date": "2023-1-1" }, ... ]
deactivate server
Note right of browser: The browser executes the callback function that renders the notes
```
## part4d, diagram
```mermaid
sequenceDiagram
participant user
participant browser
participant backend
Note left of user: User fills in login form with username and password
user->>browser: login button pressed
activate backend
browser->>backend: HTTP POST /api/login { username, password }
Note left of backend: backend generates a TOKEN that identifies the user
backend-->>browser: TOKEN returned as message body
deactivate backend
Note left of browser: browser saves the TOKEN
Note left of user: User creates a note
user ->> browser: create note button pressed
activate backend
browser ->> backend: HTTP POST /api/notes { content } TOKEN in header
Note left of backend: backend identifies the user from the TOKEN
backend -->> browser: 201 created
deactivate backend
```