Today we will be deploying a simple Python HTTP server to illustrate how a production server might behave when it serves a webpage.

This is different from opening up an index.html file.

  • When we open an index.html file, your browser only interpreting from the file itself. There’s no interaction outside of the imports you’re accessing that is not found within your local machine.
  • When you’re accessing a URL from a server, there are requests and responses between your browser and the server itself.

There is inbuilt safety features within your browser when it attempts to request data from servers, such as CORS (cross-origin resource sharing). You might get an error as shown within the activities later.

Use the Python HTTP Server

Let’s open up the file(s) in the 01-Ins_Python_HTTP_Server folder to get started.

What is cross-origin resource sharing (CORS) error?

In layman terms, a website should only serve data from its own domain and not from other sources. That’s because there are man-in-the-middle hacks where inappropriate data can be inserted to cause harm.

Thus, to serve data on a page from other sources or domains, we need to explicitly enable the setting and whitelist the source. Otherwise, hacking can be an issue.

To give an example of this behavior, open up the index.html file in the 01-Ins_Python_HTTP_Server/Solved/remote-example/index.html. You will find the CORS error within the debugging tool.

However, if you run a proxy HTTP server through python by running, python -m http.server in the Gitbash/Terminal within the same folder, you will find the error doesn’t occur.

Groups Do: Create Citi Bike Maps

Let’s open up the file(s) in the 02-Stu_CitiBike_Leaflet folder to get started.

Deploy a Project to GitHub Pages

Let’s open up the file(s) in the 03-Ins_Github_Pages folder to get started.

Students Do: Deploy the Citi Bike Project

Let’s open up the file(s) in the 04-Stu_Github_Pages folder to get started.

Introduce Project 3

We’ll form groups and then have some time to kickstart the project discussion today.

In the past, there is only 1 track, which is the data visualization track. It was the combination of both tracks together.

You now have 2 tracks to choose from: Data Visualization Track or Data Engineering Track

We will largely focus on the description from your BCS, but I will highlight some differences here.

Data Visualization Track

  • There’s no ERD required but your data must be stored in a database.
  • Focus is on the data visualization portion with HTML

Data Engineering Track

  • Data must be stored in a database, but it must have a minimum requirement of 2 tables.
  • There must be an ETL workflow – data cannot remain the same as the original source.
    • You’ll provide both the original source data and your transformed data
  • Data must be read from either:
    • Pandas DataFrame
    • Flask API with JSON output
  • Project must include an additional library related to data engineering.
    • Consult Jonathan if you are unsure about the library.