Web Apps

tinyurl.com/web-apps-workshop

Tips for navigating the slides:
  • Press O or Escape for overview mode.
  • Visit this link for a nice printable version
  • Press the copy icon on the upper right of code blocks to copy the code

Welcome!

Classroom "rules":

  • I am here for you!
  • Every question is important
  • Help each other

Introductions

Tell us about yourself:

  • Name
  • Pronouns
  • Location
  • Programming/Web experience
  • What interests you about Python Web Apps?
  • What's one non-digital activity you've enjoyed recently?

Today's topics

Bit (the raccoon) lecturing
  • How the web works
  • Python for web apps
    • Flask
    • Django
  • Hosting web apps

Prerequisites

Online development: Github account

Local development:

Local development (option 2):

How the web works

Bit (the raccoon) in front of monitors with browsers and analytics

Clients and servers

Diagram of browser sending HTTP request to server and receiving HTTP response

HTTP

A client sends an HTTP request:


                GET /index.html HTTP/1.1
                Host: www.example.com

The server sends back an HTTP response:


                HTTP/1.1 200 OK
                Content-Type: text/html; charset=UTF-8
                Content-Length: 208
                <!DOCTYPE html>
                    <html>
                    <head>
                        <title>Example Domain</title>
                    </head>
                    <body>
                    <h1>Example Domain</h1>
                    <p>This domain is to be used for illustrative examples in documents.</p>
                    </body>
                </html>

Webpages

Webpages are made up of three languages:

  • HTML: Contains the content and uses tags to break it into semantic chunks (headings, paragraphs, etc)
  • CSS: Contains style rules that apply properties to elements on a page.
  • JavaScript: Contains code that dynamically accesses and updates the page content to make it more interactive.

What does a server do?

The most basic server just serves up HTML and multimedia files from a file system.

Server-side code is also useful for anything that requires access to persistent data or needs an additional layer of security than allowed in the client.

  • User authentication
  • Database fetches/updates
  • Caching

Server-side Python

Bit (the raccoon) in front of a computer and Python logo

Simple HTTP server

The http module in the Python standard library can run a basic server.


⚠️ It is not recommended for production.


It's handy for learning and local development, however...

Example: Simple file server

A file server serves up files and folders according to their path in the file system. Also known as a static server.

Run a file server from any folder:


                python3 -m http.server 8080

Example: Simple dynamic server

👩🏼‍💻 Repo: github.com/pamelafox/python-simple-server-example/

The server code is in server.py. Uses the http module to dynamically generate responses.

Run the server:


                python3 server.py

Flask framework

Flask, an external package, is a lightweight framework for server requests and responses.

Apps written in Flask:

  • Khan Academy (originally)
  • Reddit
  • Netflix

Example: Simple Flask website

👀 Demo: tinyurl.com/simple-flask-website

👩🏼‍💻 Repo: github.com/pamelafox/simple-flask-server-example/

Most of the server code is in app.py. Uses Flask to generate responses for each route

Run the server:


                python3 app.py

Exercise: Flask Templating

Using this repo:
github.com/pamelafox/simple-flask-server-example/

  1. Follow the readme steps to get the app running.
  2. Add a new route for "/about" that uses a new "about.html" template.
  3. Check the new route works.
  4. Learn about template inheritance, then refactor all the templates to extend a base template instead.
  5. Change the 404 handler to render a template as well.

🙋🏼‍♀️🙋🏾‍♀️🙋🏽‍♀️ Let us know if you need any help! 🙋🏻‍♀️🙋🏽‍♂️🙋🏿‍♀️

Adding databases

Webapps with Databases

Web apps store data in databases that needs to be shared across multiple users/computers.

Diagram using SQL to update and query a database storing data for a web application

Example: Flask Quiz

👀 Demo: tinyurl.com/flask-db-quiz

👩🏼‍💻 Repo: github.com/pamelafox/flask-db-quiz-example/

Most of the server code is in app.py. Uses SQLAlchemy for database interaction.

Run the server:


                python3 app.py

Django framework

Django, an external library, is a fairly "opinionated" framework for server-side code. Includes an ORM for database interaction.

Apps written in Django:

  • Coursera (originally, now Scala+Play)
  • Instagram
  • Pinterest (originally, now Flask)
  • Eventbrite

Example: Django Quiz

👀 Demo: tinyurl.com/django-db-reviews

👩🏼‍💻 Repo: github.com/pamelafox/django-quiz-app/

Important server files:
models.py , urls.py , views.py , admin.py

Run DB migrations and server:


                python manage.py migrate
                python manage.py runserver

Exercise: Django app

Using this repo:
github.com/pamelafox/django-quiz-app/

  1. Follow the readme steps to get the app running.
  2. Follow the readme steps to get into the Django admin.
  3. Add a new quiz using the Django admin.
  4. Add a new question using the Django admin.
  5. Add a new route that shows a list of all questions.
    (Hint: Look at the route that lists the quizzes.)

🙋🏼‍♀️🙋🏾‍♀️🙋🏽‍♀️ Let us know if you need any help! 🙋🏻‍♀️🙋🏽‍♂️🙋🏿‍♀️

Hosting web apps

Bit (the raccoon) on a cloud with the Azure logo

Hosting options

When your website is hosted on a server, it means other users on the Internet can access it.

Many possible hosts:

  • A rented computer in a data center
  • A virtual machine
  • A PaaS (platform as a service)

Consider:

  • How much control do you want?
  • How much do you enjoy administering systems?
  • Do you need it to scale up/out?

Azure hosting options

Azure Container Apps Azure Functions
Azure Kubernetes Service Container Management Azure App Service Serverless
Environment Containers PaaS
Cloud Azure

For Flask/Django, App Service is easiest way to get started.

But wait, there's more!

Databases PostGreSQL, MySQL, CosmosDB, ...
Storage Blob Storage, Files, Archive Storage, ...
Networking DNS Zone, Virtual Network, VPN Gateway, ...
Caching CDN, Front Door, ...
Security Key Vault, Security Center, ...
Machine Learning Translator, Bot Service, Computer Vision, ...
...and more!

App Service + PostgreSQL

Flask app architecture diagram: App Service, App Service Plan, PostGreSQL server, Log Analytics workspace

Repo: github.com/pamelafox/django-quiz-app

Using the Azure Dev CLI:


                azd up

App Service + PostgreSQL + VNet

Flask app architecture diagram: App Service, App Service Plan, PostGreSQL server, Log Analytics workspace, Virtual network, DNS Zone

Repo: github.com/Azure-Samples/msdocs-django-postgresql-sample-app

Using the Azure Dev CLI:


                azd up

Exercise: Deploying an app

  1. Sign up for a free Azure account
  2. Either open one of the previous projects in Codespaces or follow these installation steps for the Azure Developer CLI.
  3. Run azd up. If prompted, login to your Azure account.
  4. If it deploys successfully, share the endpoint URL with your classmates. If not, let us know what error you get. 🪲
  5. Once you've verified the app is working, run azd down to un-deploy the app (so that you don't waste cloud resources unnecessarily).

More Azure resources

Raccoons with laptops

Any questions?

A bunch of raccoon students with computers