OIM3640 - Problem Solving and Software Design

2025 Spring

Session 21 (4/10)

Today's Agenda

• Welcome/News/Announcements
• A Quick Crash Course on HTML & CSS
• Flask Practice
  • Getting input from users using HTML forms
  • Integrating APIs

Welcome/News/Announcements

• Assignments/Project:
  • Assignment 3 (Web App)
  • Project Proposal (due 4/12, Saturday)
• Next Class: Working on Assignment 3. Please sit in project groups.
• Communications
  • Meet with me in person during office hours at least once this semester.
  • Email - specify course # in subject title, e.g., "OIM3640: GitHub settings"
  • Use Slack/GitHub when asking code-related questions

What we have learned so far...

• Variables, Expressions, Statements
• Types: int, float, string, boolean, Nonetype, string, list, dictionary, tuple, set, ...
• Functions
• Conditionals
• Iterations
• Pseudo-code
• APIs
• Error Handling: try...except
• Debugging
• Building Web Application using Flask

A Quick Crash Course on HTML & CSS

• Introduction to HTML
• Resources:
  • MDN Web Docs - HTML Basics
  • W3Schools HTML Tutorial
  • YouTube List - HTML for Flask
  • Real Python - HTML and CSS for Python Developers

Flask Resources

• Must Read:
  • Flask Quickstart
  • Flask Web App Demo
• Recommended:
  • The Flask Mega-Tutorial, Part I: Hello, World!
  • YouTube - Flask Tutorials by Corey Schafer (First 3 videos)
  • Flask Tutorial in Visual Studio Code
  • Real Python Example - Flask - Text Processing
  • Flask Tips

Flask Practice: Building a Weather Page

• In your helloflask project/folder, add a new web page, weather.html
• In app.py, add a route that allows user to enter a US city name and display the current temperature.
• Discussion:
  • How would you handle an international city?
  • What if the city name is not found?
  • How would you handle multiple cities?

Flask Exercise: API Integration

• Task: Integrate any external API you've used before into your Flask app.
  • Add new route(s) and function(s) in app.py under the helloflask folder,
  • Create separate page(s) for new feature(s).
  • Keep the pages and routes simple and clear.
  • (Optional) Add simple CSS to the template page(s).
• You can choose from the following APIs or any other API you're familiar with:
  • People-In-Space API
  • CoinDesk Bitcoin Price API
  • OpenWeather API - Current weather, 5 day weather forecast
  • Students and Massachusets Census API