CS257 Software Design
Wednesday, 21 May 2025

+ Maps & graphs
- See the new samples in my repo
- Quick walkthrough

+ Breaking a project into tiny testable steps
For yesterday's assignment, goal: (* = already done)
- on stearns, cd to repo, cd to webapp
- * python3 app.py 0.0.0.0 MY_PORT
- in browser
    - * go to http://stearns.mathcs.carleton.edu:MY_PORT/
    - see Get Data button
    - click Get Data button
    - see some data that came from database
- what happened after the button click?
    - JS handler function gets called
    - fetch(api url,...)
    - * api.py route gets invoked, talks to postgres, gets some data,
        turns it into JSON, and returns it
    - when fetched results return, JS modifies UI to reflect the data

So, how to proceed?
- Create an html page with a Get Data button
    [test: open the web page with a browser; is the button there? yay]
- Move that html page into Flask templates folder and associate it with route /
    [test: launch Flask app; point browser to http://stearns...:MY_PORT/
        is the button there? yay]
- Add JS to the html page; when page loads, show me a "hello world" alert
    (involves adding a "<script ... {{ url_for.... " tag to the html template
        and putting a JS file in static/js/ or static/ and 
        including a window.addEventListener("load", initialize) and
        initialize() function and alert('hello world') in initialize())
    [test: launch flask app; go there; see if alert pops up (and then Get Data is visible)]
- Add a click handler to the Get Data button
    (move the alert statement into the click handler)
    [test: launch flask app; go there; click on button; see if 'hello world' pops up]
- Add a fetch.then.then.catch to the Get Data button handler
    [test: use a breakpoint in the second then() to see if the JSON we want
        is coming back]
- Take that JSON and use it to build a little HTML and then do
    element = document.getElementById('...')
    element.innerHTML = the little HTML we just built
    [test: does the whole thing work?]

Later...
- style the page
- ...


+ UI designs for this sort of web application
- Conventional UIs
- "Excise", navigational simplicity
- disorientation, breadcrumbs, etc.

+ API design adjustments based on UI

+ Javascript fetch, etc.
- JS editing a page in-place vs. new page
    - tradeoffs
    - disorientation, breadcrumbs, etc.
- Syntax of fetch.then.then.catch

+ ...?