↑ All Courses

Student Qualifications

  • Logical thinking and math skills
  • Facility with computers
  • A computer running macOS, Windows, or Linux

Class Description

In this class you’ll build and program a smart thermostat that you can connect to a heating, ventilation and air conditioning (HVAC) system to control the temperature. You’ll be able to control the system from a web browser on a smartphone or other computer on the local area network.

Hardware

A picture of the project

Parts

Screen Shot from Browser

Screen shot from browser

What You’ll Learn

You’ll learn how to:

  • create a web application
    • using the Python language and the Flask webapp framework for the server
    • TypeScript for the client
  • develop software and deploy it on a Raspberry Pi
  • control physical devices (relays and a temperature sensor)

Software and services we’ll use:

  • JetBrains IntelliJ IDEA Ultimate with its Python plugin (or another IDE if you know it very well)
  • git
  • github

About the Teacher

Dave Briccetti is a computer programming teacher for kids, professional software developer, community technology and music volunteer, open source software developer, creator of educational videos, and blogger. He uses and teaches many languages, including Python, JavaScript, TypeScript, Scala, Java, Kotlin, Rust and Ruby.

Resources

Session 1, 2021-01-15

Getting Acquainted

Skills inventory

Setup

  • Download and install software as needed
    • Python
    • IDEA
  • Join Discord server

Overview and Demo of the Project

VNC to the Raspberry Pi, where it’s running
The app in the client (web browser)
The source code

Introduction to Python (If Needed)

Introduction to Web Applications

Introduction to Flask

Make a webapp in Flask
  • Create a main Python module
    • Create a Flask application
    • Set up a route and a function to handle the request
      • Render a template using dynamic data and return the HTML

Session 2, 2021-01-22

Fetching and Displaying Weather Data

Fetching

  • Install the Python requests package
  • Use requests.get to make an HTTP GET request
    • first from ACF’s website
    • from openweathermap.org

Displaying

  • webapp with Flask
    • new directory for the webapp
    • templates
      • in the index.html
        • place to show the temperature (dynamic content)

Session 3, 2021-01-29

New Feature: Database

Smart Thermostat now saves observations into a database. We can query the database with Structured Query Language (SQL, sometimes pronounced sequel).

Fetching and Displaying Weather Data, Cont.

HTTP

  • Request types

Python Data Structures

  • List
  • Dictionary

HTML

  • Displaying more weather elements

CSS

  • Styling the presentation

Questions

  • What is a database?
  • What is HTTP?
  • When might you use a Python list?
  • When might you use a Python dictionary?

Session 3, 2021-02-05

Review and Quiz

  • Database
    • did some queries
  • HTTP
    • Protocols
      • Often a protocol is a conversation between a client (like a web browser) and a server (like a web server)
    • HTML: hypertext markup language

Practice with Lists and Dictionaries

  • Lists
    • Creating
    • Accessing elements by index, including negative numbers (to go from the right)
  • Dictionaries (Consist of 0 or more elements, where each element has a key and value)
    • Creating
    • Keys and values can be of any type
      • A value can even be another dictionary, or a list

Decoding the Weather Data Structures

  • Dictionary of other dictionaries
  • Adding type hints

Session 4, 2021-02-12

Quick Review and Questions

Structure of the Application

There is a client-side piece, written it TypeScript, and server-side piece, written in Python.

Create ThermoClient TypeScript class, and an instance of it

class ThermoClient {
  adjustTemp(amount: number) {
    console.log(amount)
  }
}

const thermoClient = new ThermoClient()
thermoClient.adjustTemp(1)

Introduce Object-Oriented Programming (Using Classes)

From a blueprint, we make houses
From a cookie cutter, we make cookies
From a class we make instances (aka objects)

Classes help organize code and data
Code in classes exists as “methods” (subtype of “function”)

Discuss Arguments and Parameters

Arguments are actual values passed to a method or function. Parameters are variables that “receive” the arguments.

Session 5, 2021-02-19

Two were very late, so we adapted. We created a Python enrichment project to solve part of a word ladder problem. Key elements:

  • reading words from a file to create a list
  • writing a function to find the number of differences between two words
  • looping over all words in the dictionary
  • type hints

We looked at the ASCII code and how it allows letters, numbers and symbols to be represented inside computers, which at the lower levels, operate in binary.

Create a web page with a button to change the desired temperature

  • Later, pushing the button will call a method in ThermoClient, which will use fetch to communicate with Python server code.

Homework

Session 6, 2021-02-26

Continuing with a button to change the desired temperature

  • Added onclick attribute to button
  • Added another button
  • Added code in the thermoController to fetch, POST a request to Python
    • Had some problems here

Jon Postel

“Be conservative in what you do, be liberal in what you accept from others.”

Created Request for Comments. Here is the RFC for HTTP.

Session 7, 2021-03-05

Where the code runs

  • The TypeScript code compiles to JavaScript code, and it runs in the browser
  • The browser is the client
  • The Python code runs in IDEA (or later, on the Raspberry Pi), and it is considered to be the web server

How the client and server communicate

  • The JavaScript code in the browser uses fetch to make HTTP requests of the server (the Python code)

Server Changes

  • We added code to process the POST request for change_temperature

Client Changes

  • We began work to make 2 more buttons, for .1 degree changes, up and down.

Ensure you see 0.1 and -0.1 in the Python program console when you click the new buttons. Make the new buttons smaller, if you happen to know how.

Session 8, 2021-03-12

Hardware

Software

ThermoController

This handles the main application logic for temperature control

Chart with chart.js

  • We made a scatter chart for temperatures based on a sample

HTTP Spec

  • Result codes
    • Leads to investigating how replit.com uses redirection
    • Use curl to do the gets and display the response

Session 9, 2021-03-19

Software

User Interface

Add more to index.html (the single web page for the application).

  • Title and heading
  • Desired temperature

Have the desired temperature change when the buttons are pushed.

ThermoController

Continue development

Problems

  • C. notes it works on Safari but not Chrome

Session 10, 2021-03-26

Software

User Interface

Add more to index.html (the single web page for the application).

  • Actual (simulated) indoor temperature (need to get event stream first)
  • Whether the heat is on (blue rectangle)

Session 11, 2021-04-02

Server to Client Communication

Server-Sent Events

The server code running on the Raspberry Pi needs to send data to the client code running in the user’s browser, so it can display temperatures and other weather data, and whether the heat or air conditioner is on.

Session 12, 2021-04-09

Server to Client Communication, Continued

Exercise: Bingo Game

In the Bingo game, we’ll have a server (Python and Flask) that yields bingo balls (like B-24), and a client (TypeScript) that receives and displays the Bingo numbers.

The server will pick the balls randomly.

The client will show all balls received.