Intro to Backend Web Development with Flask.ipynb

{
 "cells": [
  {
   "cell_type": "markdown",
   "metadata": {},
   "source": [
    "# Introduction to Backend Web Development with Flask\n",
    "\n",
    "In this notebook we will consider the role of a [backend web developer](https://en.wikipedia.org/wiki/Frontend_and_backend) and we will walk through the process of creating a simple web application using the [Flask framework](https://flask.palletsprojects.com/)."
   ]
  },
  {
   "cell_type": "markdown",
   "metadata": {},
   "source": [
    "## 1. Web Development\n",
    "\n",
    "What do we refer to when we say [web development](https://en.wikipedia.org/wiki/Web_development)?\n",
    "\n",
    "> Web development is the work involved in developing a [website](https://en.wikipedia.org/wiki/Web_site) for the [Internet](https://en.wikipedia.org/wiki/Internet) ([World Wide Web](https://en.wikipedia.org/wiki/World_Wide_Web)) or an [intranet](https://en.wikipedia.org/wiki/Intranet) (a private network).\n",
    "\n",
    "Typically, these applications are accessed via an internet browser. Some popular products of web development include [google.com](https://google.com/), [facebook.com](https://facebook.com/), and [amazon.com](https://amazon.com/).\n",
    "\n",
    "You may have also used web applications that are not available on the public internet, try to think of some.\n",
    "\n",
    "Web applications are useful because they usually do not require the user to install any special software on their internet connected device. On the other hand, these applications usually require a constant and reliable connection to the internet, and the performance of the application can be severely impacted by slow internet speeds.\n",
    "\n",
    "Can you think of other benefits or challenges associated with web applications?"
   ]
  },
  {
   "cell_type": "markdown",
   "metadata": {},
   "source": [
    "### 1.1 Frontend and Backend Web Development\n",
    "\n",
    "Now that you know a bit about web development, what do you think constitutes \"frontend\" or \"backend\" development?\n",
    "\n",
    "> A rule of thumb is that the client-side (or \"frontend\") is any component manipulated by the user. The server-side (or \"backend\") code usually resides on the [server](https://en.wikipedia.org/wiki/Server_(computing)), often far removed physically from the user.\n",
    "\n",
    "So with web development, we have a [separation of concerns](https://en.wikipedia.org/wiki/Separation_of_concerns) between what the application user sees and all the logic that goes on behind the scenes.\n",
    "\n",
    "So when you access [google.com](https://google.com), you are presented with a frontend (or client-side) component of the application, but when you execute a search, you are making a request to the backend (or server-side) component of the application.\n",
    "\n",
    "Since this approach to developing web applications splits the application into two separate but cooperating components, a client and a server, it is called the [\"Client-Server Model\"](https://en.wikipedia.org/wiki/Client%E2%80%93server_model).\n",
    "\n",
    "In this lesson, a frontend is already implemented for you. However, if you are interested in looking at the frontend files, they can be found under `flaskr/static` (see [CSS](https://en.wikipedia.org/wiki/CSS)) and `flaskr/templates` (see [HTML](https://en.wikipedia.org/wiki/HTML))."
   ]
  },
  {
   "cell_type": "markdown",
   "metadata": {},
   "source": [
    "### 1.2 Application Programming Interface (API)\n",
    "\n",
    "Due to the separation of application components (frontend and backend or client and server) introduced by the Client-Server Model, some method of communication must be introduced so that the two components may interact with each other.\n",
    "\n",
    "One solution is to use an [Application Programming Interface](https://en.wikipedia.org/wiki/API).\n",
    "\n",
    "In computing, an [interface](https://en.wikipedia.org/wiki/Interface_(computing)) refers to: \n",
    "\n",
    "> a shared boundary across which two or more separate components of a [computer system](https://en.wikipedia.org/wiki/Computer_system) exchange information.\n",
    "\n",
    "Sometimes APIs are referred to as \"contracts\" between the client and server. Why do you think that is?"
   ]
  },
  {
   "cell_type": "markdown",
   "metadata": {},
   "source": [
    "#### 1.2.1 REST and API Endpoints (Routes)\n",
    "\n",
    "> In web development REST allows content to be rendered when it's requested.\n",
    "\n",
    "A popular approach to crafting APIs is the [REST (REpresentational State Transfer)](https://en.wikipedia.org/wiki/Representational_state_transfer) approach.\n",
    "\n",
    "> REST has been employed throughout the software industry and is widely accepted as a set of guidelines for creating [stateless](https://en.wikipedia.org/wiki/Stateless_protocol), reliable [web APIs](https://en.wikipedia.org/wiki/Web_API). A web API that obeys the [REST constraints](https://en.wikipedia.org/wiki/Representational_state_transfer#Architectural_constraints) is informally described as RESTful. In general, RESTful web APIs are loosely based on [HTTP methods](https://en.wikipedia.org/wiki/Hypertext_Transfer_Protocol#Request_methods) such as GET and POST.\n",
    "\n",
    "In a RESTful application, the client makes requests to the server and the server fulfills those requests, given that client adheres to the API. For example, when you go to [google.com/gmail/](\"https://google.com/gmail/\") in your browser, your browser makes a GET request to the endpoint `/gmail` of `google.com` on your behalf, the Google server replies with the files necessary to render (or displays) the client side application component, what you know as the Gmail interface.\n",
    "\n",
    "That client side application component then makes additional requests to the Google server to authenticate the current user and to retrieve the relevant user data, such as the user's emails."
   ]
  },
  {
   "cell_type": "markdown",
   "metadata": {},
   "source": [
    "### 1.3 Data\n",
    "\n",
    "In the Client-Server Model, most application data is usually stored on the server in some kind of [database](https://en.wikipedia.org/wiki/Database). This means that a server typically implements the logic necessary to [create, read, update, and delete (CRUD)](https://en.wikipedia.org/wiki/Create,_read,_update_and_delete) data.\n",
    "\n",
    "So while you might request an email to be deleted via the Gmail client, it is the Google server which performs the actual deletion operation.\n",
    "\n",
    "In this lesson, a database is pre-configured for you, so you will not need to implement one yourself. However, it is worth looking into. You can find the relevant database files under `flaskr/db.py` and `flaskr/schema.sql` (see [Database Schema](https://en.wikipedia.org/wiki/Database_schema))."
   ]
  },
  {
   "cell_type": "markdown",
   "metadata": {},
   "source": [
    "## 2. [Flask](https://flask.palletsprojects.com/) and [Web Application Frameworks](https://en.wikipedia.org/wiki/Web_framework)\n",
    "\n",
    "> A web framework (WF) or web application framework (WAF) is a software framework that is designed to support the development of web applications.\n",
    "\n",
    "Web frameworks save a considerable amount of time for a backend web developer. Flask is one of such frameworks and is very popular in the Python community.\n",
    "\n",
    "Consider the following hypothetical Flask code which returns the Gmail frontend application component when the browser goes to the following address: `google.com/gmail/`.\n",
    "\n",
    "```python\n",
    "bp = Blueprint(\"gmail\", __name__, url_prefix=\"/gmail\")\n",
    "\n",
    "@bp.route(\"/\", methods=(\"GET\"))\n",
    "def register():\n",
    "    return render_template(\"gmail.html\")\n",
    "```\n",
    "\n",
    "Flask groups endpoints (routes) into \"Blueprints\". The `Blueprint` class above is one of many helper \n",
    "\n",
    "> A Blueprint is a way to organize a group of related views and other code.\n",
    "\n",
    "So in the above scenario, the web server is ready for a browser to make a GET request to `google.com` at the route `/gmail/`. The route is composed of the `url_prefix` (`/gmail`) and the first argument of `@bp.route` (`/`).\n",
    "\n",
    "As you can see, the Flask framework offers a simple and straightforward solution to making complex web servers."
   ]
  },
  {
   "cell_type": "markdown",
   "metadata": {},
   "source": [
    "### 2.1 Hands-on with Flask\n",
    "\n",
    "In this final part of the lesson, you will get hands on with the Flask framework, and you will actually implement a simple server yourself. Much of the code is provided for you as well as the relevant solutions for the two challenges awaiting you.\n",
    "\n",
    "In these challenges you will complete the implementation of the [\"Flaskr\"](https://flask.palletsprojects.com/en/2.2.x/tutorial/) application. The frontend, database, and much of the server code has already been implemented.\n",
    "\n",
    "Your job is to implement the following modules with the help of the referenced links:\n",
    "\n",
    "- `flaskr/auth.py` (see https://flask.palletsprojects.com/en/2.2.x/tutorial/views/)\n",
    "- `flaskr/blog.py` (see https://flask.palletsprojects.com/en/2.2.x/tutorial/blog/)\n",
    "\n",
    "All the necessary implementation details associated with each module will be available at the provided links. Additionally, some of the code, such as the required imports, has already been implemented.\n",
    "\n",
    "If you get stuck, you may reference the solution files:\n",
    "\n",
    "- `flaskr/auth_solution.py`\n",
    "- `flaskr/blog_solution.py`"
   ]
  },
  {
   "cell_type": "markdown",
   "metadata": {},
   "source": [
    "To prepare your environment, run the following command in this directory:\n",
    "```bash\n",
    "pip install -e .\n",
    "```\n",
    "\n",
    "After you've finished implementing the `auth` and `blog` modules, run the following commands and follow the instructions in your terminal to test the application:\n",
    "\n",
    "```bash\n",
    "python -m flask --app flaskr init-db\n",
    "python -m flask --app flaskr --debug run\n",
    "```"
   ]
  },
  {
   "cell_type": "markdown",
   "metadata": {},
   "source": [
    "If you cannot work on Python on your device for whatever reason, you can also complete this challenge online by signing up for a free [Gitpod](https://www.gitpod.io/) account.\n",
    "\n",
    "You'll need to create a new workspace using the following repository: https://github.com/gitpod-io/template-python-flask\n",
    "\n",
    "Clicking the following link will take you directly to the Gitpod \"New Workspace\" creation page with the correct repository preselected: https://gitpod.io/#https://github.com/gitpod-io/template-python-flask\n",
    "\n",
    "If you run your code on Gitpod, you should not run the `pip install -e .` command. However, as the solutions are already implemented on Gitpod, you should replace the Gitpod `flaskr/auth.py` and `flaskr/blog.py` with the equivalent files found in this directory and follow the above directions to implement the solutions yourself."
   ]
  },
  {
   "cell_type": "markdown",
   "metadata": {},
   "source": [
    "Great job implementing those modules! You have come a long way in your journey as a backend developer.\n",
    "\n",
    "Of course, you still have much to learn, you can learn more about Flask on their official website [here](https://flask.palletsprojects.com/en/2.2.x/).\n",
    "\n",
    "You can also find additional resources for getting started with Python [here](https://www.python.org/about/gettingstarted/)."
   ]
  }
 ],
 "metadata": {
  "kernelspec": {
   "display_name": "Python 3.10.4 64-bit",
   "language": "python",
   "name": "python3"
  },
  "language_info": {
   "codemirror_mode": {
    "name": "ipython",
    "version": 3
   },
   "file_extension": ".py",
   "mimetype": "text/x-python",
   "name": "python",
   "nbconvert_exporter": "python",
   "pygments_lexer": "ipython3",
   "version": "3.10.4"
  },
  "orig_nbformat": 4,
  "vscode": {
   "interpreter": {
    "hash": "31215a3d9a88c3e5376bc1569bca490ff026d58e85020fa189518dc520ec66fa"
   }
  }
 },
 "nbformat": 4,
 "nbformat_minor": 2
}