# "Web App" Exercise

## Prerequisites

* ["Web Service" Exercise](https://prof-rossetti.gitbook.io/intro-to-python/exercises/web-service)

## Learning Objectives

* Create a basic web application in Python, using modular architecture.
* Write routing logic to handle GET and POST requests, and respond by rendering HTML pages or returning JSON data.
* Gain exposure to HTML templates, and using HTML forms to submit form data.
* Run a web application in "development" using a local web server, and deploy to a user-facing "production" environment (i.e. a Heroku server).

## References

* [The `flask` Package](https://prof-rossetti.gitbook.io/intro-to-python/notes/python/packages/flask)
* [HTTP Requests and Responses](https://prof-rossetti.gitbook.io/intro-to-python/notes/info-systems/networks#HyperText-Transfer-Protocol)
* [Web Forms - W3Schools](https://www.w3schools.com/html/html_forms.asp)
* [Web Forms - Mozilla](https://developer.mozilla.org/en-US/docs/Learn/Forms)
* [Sending and Retrieving Form Data - Mozilla](https://developer.mozilla.org/en-US/docs/Learn/Forms/Sending_and_retrieving_form_data)

## Prompt

So, you've [deployed a background web service](https://prof-rossetti.gitbook.io/intro-to-python/exercises/web-service) to send you an email every day. But what if you wanted the information on-demand at the click of a button, without waiting for the next daily email? And what if you wanted to allow other people to register for your service? Let's build a web application interface into your application's functionality!

![](https://2741866142-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-Lxirt-fOkHNRdT9uASu%2F-M3vz4ldYQuetSe69wnS%2F-M3vz5b_PuVG7Ic2EJhH%2Fweather-form.png?generation=1585849331264515\&alt=media)

## Instructions

### Setup

To use the Flask package, let's first add `Flask` to the Daily Briefing repo's "requirements.txt" file, then re-install packages:

```bash
pip install -r requirements.txt
```

### Guided Checkpoints

Now follow these sequential "checkpoints" for a guided walk-through of how to create a Flask application:

1. [Routing (and Handling GET Requests)](https://prof-rossetti.gitbook.io/intro-to-python/exercises/web-app/checkpoints/1-routing)
2. [Modular Organization](https://prof-rossetti.gitbook.io/intro-to-python/exercises/web-app/checkpoints/2-modular-org)
3. [Rendering HTML Pages](https://prof-rossetti.gitbook.io/intro-to-python/exercises/web-app/checkpoints/3-render-template)
4. [Web Forms (and Handling POST Requests)](https://prof-rossetti.gitbook.io/intro-to-python/exercises/web-app/checkpoints/4-web-forms)
5. [Twitter Bootstrap Styling (and Flash Messaging)](https://prof-rossetti.gitbook.io/intro-to-python/exercises/web-app/checkpoints/5-bootstrap-layout)

### Deploying to Production

Reference:

* [Getting Started w/ Python - Heroku](https://devcenter.heroku.com/articles/getting-started-with-python)
* [Deploying Python Apps w/ Gunicorn - Heroku](https://devcenter.heroku.com/articles/python-gunicorn)

After completing all the checkpoints and demonstrating the ability to successfully run the web app locally, let's re-deploy the source code:

```bash
git push heroku main
```

Heroku says "no web process specified". They want us to create a specific file called the "Procfile" in the repo's root directory to instruct the Heroku server which command to invoke in order to run the web app:

```bash
web: gunicorn "web_app:create_app()"
```

Since we're instructing the server to use the "gunicorn" package (Heroku's preferred tool) to run the web app on production, we'll also need to add `gunicorn` to the "requirements.txt" file so it will be installed on the server during the deployment process.

After saving the "Procfile" and "requirements.txt" files, make a commit before re-attempting to re-deploy:

```bash
git push heroku main
```

View the server logs and troubleshoot as necessary:

```bash
heroku logs --tail
```