OIM3640 - Problem Solving and Software Design

2026 Spring

Session 21 (4/09)

contain

Today's Agenda

  • Announcements/Updates
  • What We've Learned So Far
  • Introduction to Web Apps - Flask
  • Your First Flask App
  • Flask Forms and POST Requests
  • Mini Project 3: Web App

Announcements/Updates

  • Mini Project 3 - Web App (MBTA + Mapbox)
    • Writing your proposal today in class!
    • Due: 4/21
  • Elective Projects - bonus opportunities (not required)
  • Communication
    • Office Hours: Walk-in or by appointment
    • Email: Specify course # in subject, e.g., "OIM3640: GitHub settings"
    • You are required to meet with me at least once this semester
  • Questions?

What We've Learned So Far

  • Python Fundamentals: variables, types, functions, conditionals
  • Iteration: for, while, break, continue
  • Strings: indexing, slicing, methods
  • Data Structures: lists, dicts, tuples, sets
  • Error Handling: try/except/finally
  • APIs: requests, JSON, GET/POST, API keys
  • File I/O: read/write files, CSV, JSON

Introduction to Web Apps - Flask

So far: your Python scripts run in the terminal. What if anyone could use your program in a browser?

  • Flask turns your Python code into a website
    • You write Python, Flask handles the web part
  • Why Flask? Simple, beginner-friendly, used in production
    • Pinterest, Zillow, Twilio, Reddit, Netflix, ...
  • There's also Django (more powerful, more complex) - Flask is the right starting point

Flask - How URLs Work

Every website maps URLs to pages. Think about TikTok:

URL What you see
MyTiktok.com/ Home feed
MyTiktok.com/new Upload a new video
MyTiktok.com/1 Video #1
MyTiktok.com/1/edit Edit video #1

In Flask, you decide what each URL does:

@app.route('/new')       # when someone visits /new
def upload():            # run this function
    return 'Upload page'

Your First Flask App

Create a folder helloflask/, then create app.py:

from flask import Flask

app = Flask(__name__)

@app.route('/')
def hello():
    return 'Hello, World!'

if __name__ == '__main__':
    app.run(debug=True)

cd helloflask
pip install flask
python app.py     # visit http://127.0.0.1:5000

More Routes

@app.route('/hello/<name>')
def hello(name):
    return f'Hello, {name}!'

Visit http://127.0.0.1:5000/hello/Zhi → shows "Hello, Zhi!"

@app.route('/square/<int:n>')
def square(n):
    return f'{n} squared is {n ** 2}'

Visit http://127.0.0.1:5000/square/7 → shows "7 squared is 49"

<name> and <int:n> capture parts of the URL as function arguments.

Flask Templates

Returning raw strings is limited. Use templates (HTML files):

app.py:

from flask import Flask, render_template

@app.route('/hello/<name>')
def greet(name):
    return render_template('hello.html', name=name)

templates/hello.html:

<h1>Hello, {{ name }}!</h1>
<p>Welcome to my Flask app.</p>

{{ name }} is replaced by the value passed from Python.

HTML Forms

Forms let users send data to your Flask app:

<form method="POST" action="/search">
    <label>Enter a place:</label>
    <input type="text" name="place">
    <button type="submit">Search</button>
</form>
  • method="POST" - sends data in the request body (not in the URL)
  • action="/search" - where to send the form data
  • name="place" - the key your Python code uses to read the input

Handling Form Submissions

from flask import Flask, request, render_template

app = Flask(__name__)

@app.route('/')
def index():
    return render_template('index.html')

@app.route('/search', methods=['POST'])
def search():
    place = request.form['place']
    return render_template('result.html', place=place)

request.form['place'] gets the value the user typed.

Putting It Together

templates/index.html:

<h1>Place Search</h1>
<form method="POST" action="/search">
    <input type="text" name="place" placeholder="e.g., Boston Common">
    <button type="submit">Search</button>
</form>

templates/result.html:

<h1>Results for {{ place }}</h1>
<p>You searched for: {{ place }}</p>
<a href="/">Search again</a>

Template Inheritance

templates/base.html:

<html>
<head><title>My App</title></head>
<body>
    <nav><a href="/">Home</a></nav>
    {% block content %}{% endblock %}
</body>
</html>

templates/index.html:

{% extends "base.html" %}
{% block content %}
<h1>Welcome!</h1>
{% endblock %}

Flask Project Structure

myapp/
├── app.py              # routes and logic
├── mbta_helper.py      # API helper functions
├── .env                # API keys (never commit!)
├── .gitignore          # includes .env
├── templates/
│   ├── base.html       # shared layout
│   ├── index.html      # home page with form
│   └── result.html     # results page
└── static/
    └── style.css       # optional CSS

Separate helper functions from Flask routes.

Mini Project 3: Web App

Build a Flask app that finds the nearest MBTA station:

  1. User enters a place name in a form
  2. Your app calls the Mapbox API to get coordinates
  3. Then calls the MBTA API to find the nearest stop
  4. Displays the result (and optionally a map!)

You'll need API keys for both (free):

Write Your MP3 Proposal (15 min)

Create PROPOSAL.md in your MP3 repo:

## My Project Proposal

**What I'm building:** (one sentence)
**Why I chose this:** (personal motivation)
**Core features:** (3-5 bullet points)
**What I don't know yet:** (honest list)

Then pair up: share your proposal with a classmate, give each other feedback.

Your Turn

Continue building your Flask app:

  1. Add a form to your Flask app (home page with an input field)
  2. Handle the form submission and display the user's input
  3. Challenge: Connect it to an API (weather, MBTA, or any public API)

Before You Leave

  • Any questions?
  • Continue your Learning Log for this week (logs/wk11.md)
  • Commit your MP3 proposal (PROPOSAL.md)
  • Start working on MP3 Milestone 1 (API pipeline without Flask)
  • Push your work to GitHub

Next session: MP3 work session + Final Project details!

global styles