OIM3640 - Problem Solving and Software Design

2026 Spring

Session 23 (4/16)

contain

Today's Agenda

  • Announcements/Updates
  • What We've Learned So Far
  • Final Project Update
  • Protecting Your API Keys
  • Deploying Your Flask App
  • How the Web Works
  • Work Session (MP3 + Final Project)

Announcements/Updates

  • Final Project proposal due tomorrow (4/17)!
    • Create proposal.md in a new public GitHub repo
    • Submit repo URL on Canvas
  • Project 3 (MP3) due 4/21 - keep working on it!
  • 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
  • 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
  • Flask: routes, templates, forms, GET/POST

Final Project: Update

Correction from last session: you can work individually or in a team of two.

If teaming up: one person creates the repo, add your partner as a Collaborator (Settings > Collaborators). Both names in README.md, both submit repo URL on Canvas.

Milestone Date
Proposal 4/17 (Fri)
Gallery Walk 4/28 (Tue)
Peer Review 4/30 (Thu)
Final Submission 5/1 (Fri)

How to Keep Secrets Safe

Locally: use a .env file + python-dotenv

# .env (NEVER commit this file)
OPENAI_API_KEY=sk-proj-abc123...

# app.py
from dotenv import load_dotenv
import os
load_dotenv()
key = os.environ['OPENAI_API_KEY']

Always add .env to your .gitignore file.

On Render: set environment variables in the dashboard (Environment tab).

Deploying Your Flask App

Right now your app only runs on http://127.0.0.1:5000 - only you can see it.

Deployment = putting your app on a server so anyone can visit it with a URL.

Options (all free for students):

Platform Pros Cons
Render Git push to deploy, real workflow ~30s cold start on free tier
PythonAnywhere Simplest setup Outbound HTTP restricted to allowlist

What Changes for Production?

Your local Flask app needs a few adjustments:

  1. requirements.txt - list your dependencies

    flask
gunicorn
requests
...

  2. Production server - Flask's built-in server is for development only

    • gunicorn handles real traffic (Render uses this)

  3. No hardcoded secrets - use .env locally, Render's dashboard in production

Deploying on Render

  1. Push your code to GitHub (you already do this!)
  2. Sign up at render.com (use GitHub login)
  3. Click "New" > "Web Service" > connect your repo
    • If your app is in a subfolder (eg. project3/), set Root Directory to that folder
  4. Set Start Command: gunicorn app:app
    • First app = your app.py, second app = your Flask(__name__) variable.
    • If your file is main.py, use gunicorn main:app.
  5. Select Free plan > Deploy

Your app will be at https://your-app-name.onrender.com

Deploying on PythonAnywhere

  1. Sign up at pythonanywhere.com (free Beginner account)
  2. Open a Bash console, clone your repo: git clone <your-repo-url>
  3. Go to "Web" tab > "Add a new web app"
  4. Select Python version, choose Flask, point to your app.py
  5. Click "Reload" - your app is live!

Your app will be at https://yourusername.pythonanywhere.com

Note: Free tier only allows outbound HTTP to allowlisted sites - some APIs may not work.

Common Deployment Gotchas

  • debug=True - never deploy with this on! It exposes a debugger that lets anyone run code on your server. Keep it inside if __name__ == '__main__'
  • Missing packages - if you forgot a package in requirements.txt, the deploy will fail
  • File paths - open('data.txt') might break on a server. Use os.path.dirname(__file__) for relative paths
  • Free tier cold starts (Render) - first request after 15 min of inactivity takes ~30s. This is normal!

How the Web Works

How the Web Works

This diagram is from ~2015. Some technologies have changed, but the core concepts haven't.

Activity: Ask ChatGPT or Claude:

"Look at this diagram of how the web works. Which technologies are outdated now? Which core concepts are still the same in 2026?"

What did AI say? Let's discuss.

Frontend / Backend / Full Stack

What You've used
Frontend What the user sees (HTML, CSS, JS) Jinja2 templates, HTML forms
Backend Server logic, data processing Flask, Python, APIs
Full Stack Both Your MP3 is a full-stack app!

Your Flask app is a full-stack web application - be proud of that.

Your Turn: Work Session

MP3 (due 4/21) and Final Project (proposal due tomorrow):

  • Pair up and show each other your MP3 progress
    • How did you handle API errors? What was the hardest part?
  • If MP3 is working: try deploying to Render!
  • If you haven't started your proposal: now is a good time
  • Teams: find your partner, discuss project ideas

Ask me or a classmate if you get stuck!

Before You Leave

  • Any questions?
  • Continue your Learning Log for this week (logs/wk12.md)
  • Submit your Final Project proposal by tomorrow (4/17)!
  • Keep working on MP3 - due 4/21
  • Push your work to GitHub

Next session: Final Project work session (async).

global styles