3_4_web_frameworks.ipynb

{
  "cells": [
    {
      "cell_type": "markdown",
      "metadata": {
        "id": "view-in-github",
        "colab_type": "text"
      },
      "source": [
        "<a href=\"https://colab.research.google.com/github/MJMortensonWarwick/CloudNativeComputing/blob/main/3_4_web_frameworks.ipynb\" target=\"_parent\"><img src=\"https://colab.research.google.com/assets/colab-badge.svg\" alt=\"Open In Colab\"/></a>"
      ]
    },
    {
      "cell_type": "markdown",
      "source": [
        "# Web Development with Flask: Part one"
      ],
      "metadata": {
        "id": "JPjDL0h6C0p5"
      }
    },
    {
      "cell_type": "markdown",
      "source": [
        "Python has several tools (packages) for building applications and websites – with perhaps the most well-known being [Django](https://www.djangoproject.com/). However, while many of these are excellent tools, the benefit of using Flask is that it is a microframework – which is a long-winded way of saying it is possible to make lightweight (i.e. small and simple) apps as well as more complicated ones. Also, this \"lightweight-iness\" means that, comapred with Django and similar, Flask is less opionated on how you build a web app and more flexible. To begin with, we will start by installing the relevant packages:"
      ],
      "metadata": {
        "id": "T9JAnOM7DEb_"
      }
    },
    {
      "cell_type": "code",
      "execution_count": null,
      "metadata": {
        "colab": {
          "base_uri": "https://localhost:8080/"
        },
        "id": "973hhlD56Z53",
        "outputId": "81b2b0e5-bfa7-4a6d-fe91-111a6423c542"
      },
      "outputs": [
        {
          "output_type": "stream",
          "name": "stdout",
          "text": [
            "Collecting flask-ngrok\n",
            "  Downloading flask_ngrok-0.0.25-py3-none-any.whl (3.1 kB)\n",
            "Requirement already satisfied: Flask>=0.8 in /usr/local/lib/python3.7/dist-packages (from flask-ngrok) (1.1.4)\n",
            "Requirement already satisfied: requests in /usr/local/lib/python3.7/dist-packages (from flask-ngrok) (2.23.0)\n",
            "Requirement already satisfied: itsdangerous<2.0,>=0.24 in /usr/local/lib/python3.7/dist-packages (from Flask>=0.8->flask-ngrok) (1.1.0)\n",
            "Requirement already satisfied: click<8.0,>=5.1 in /usr/local/lib/python3.7/dist-packages (from Flask>=0.8->flask-ngrok) (7.1.2)\n",
            "Requirement already satisfied: Werkzeug<2.0,>=0.15 in /usr/local/lib/python3.7/dist-packages (from Flask>=0.8->flask-ngrok) (1.0.1)\n",
            "Requirement already satisfied: Jinja2<3.0,>=2.10.1 in /usr/local/lib/python3.7/dist-packages (from Flask>=0.8->flask-ngrok) (2.11.3)\n",
            "Requirement already satisfied: MarkupSafe>=0.23 in /usr/local/lib/python3.7/dist-packages (from Jinja2<3.0,>=2.10.1->Flask>=0.8->flask-ngrok) (2.0.1)\n",
            "Requirement already satisfied: idna<3,>=2.5 in /usr/local/lib/python3.7/dist-packages (from requests->flask-ngrok) (2.10)\n",
            "Requirement already satisfied: certifi>=2017.4.17 in /usr/local/lib/python3.7/dist-packages (from requests->flask-ngrok) (2021.10.8)\n",
            "Requirement already satisfied: urllib3!=1.25.0,!=1.25.1,<1.26,>=1.21.1 in /usr/local/lib/python3.7/dist-packages (from requests->flask-ngrok) (1.24.3)\n",
            "Requirement already satisfied: chardet<4,>=3.0.2 in /usr/local/lib/python3.7/dist-packages (from requests->flask-ngrok) (3.0.4)\n",
            "Installing collected packages: flask-ngrok\n",
            "Successfully installed flask-ngrok-0.0.25\n",
            "Collecting pyngrok\n",
            "  Downloading pyngrok-5.1.0.tar.gz (745 kB)\n",
            "\u001b[K     |████████████████████████████████| 745 kB 33.0 MB/s \n",
            "\u001b[?25hRequirement already satisfied: PyYAML in /usr/local/lib/python3.7/dist-packages (from pyngrok) (3.13)\n",
            "Building wheels for collected packages: pyngrok\n",
            "  Building wheel for pyngrok (setup.py) ... \u001b[?25l\u001b[?25hdone\n",
            "  Created wheel for pyngrok: filename=pyngrok-5.1.0-py3-none-any.whl size=19007 sha256=5e1365d6954badafed20d43796d95d3c023369a3fc48b0b64e2b963fcd92b1e9\n",
            "  Stored in directory: /root/.cache/pip/wheels/bf/e6/af/ccf6598ecefecd44104069371795cb9b3afbcd16987f6ccfb3\n",
            "Successfully built pyngrok\n",
            "Installing collected packages: pyngrok\n",
            "Successfully installed pyngrok-5.1.0\n"
          ]
        }
      ],
      "source": [
        "!pip install flask-ngrok\n",
        "!pip install pyngrok"
      ]
    },
    {
      "cell_type": "markdown",
      "source": [
        "As discussed, we are using Ngrok to allow us to view the web apps we build. As we are using Google Colab (and therefore a virtual machine in a Google data centre which we have no access to) we cannot just run the app on a broswer in that machine (we call this _localhost_) as we would if we were running on our own machine. Of course, our ultimate goal would be to run the app on a web server, and we will do exactly that later in the module. \n",
        "\n",
        "Ngrok gives us the best of both worlds by providing a tunnel between our machine (the client) and the localhost version of our app running on Google's virtual machine. To run Ngrok you will need to set up a (free) account. You can do that here: https://dashboard.ngrok.com/signup.\n",
        "\n",
        "Once you have confirmed your account head over to the Ngrok dashboard [(here)](https://dashboard.ngrok.com/get-started/your-authtoken) where you can copy your _authtoken_. We will add this to the Colab session:"
      ],
      "metadata": {
        "id": "E3gPobo7EIzp"
      }
    },
    {
      "cell_type": "code",
      "source": [
        "!ngrok authtoken \"ADD YOUR PERSONAL AUTH TOKEN HERE\""
      ],
      "metadata": {
        "colab": {
          "base_uri": "https://localhost:8080/"
        },
        "id": "_w9ZaA4cEH4c",
        "outputId": "f36e0830-9062-4a6c-e643-aac706323393"
      },
      "execution_count": null,
      "outputs": [
        {
          "output_type": "stream",
          "name": "stdout",
          "text": [
            "Authtoken saved to configuration file: /root/.ngrok2/ngrok.yml\n"
          ]
        }
      ]
    },
    {
      "cell_type": "markdown",
      "source": [
        "Once we have Ngrok setup we are ready to start building apps! Let's start with something simple (and traditional):"
      ],
      "metadata": {
        "id": "1n47pknnGFgQ"
      }
    },
    {
      "cell_type": "code",
      "execution_count": null,
      "metadata": {
        "colab": {
          "base_uri": "https://localhost:8080/"
        },
        "id": "oyiXsIHr9Abz",
        "outputId": "dde0d0d8-b861-4071-c1a6-4f397d4d30e2"
      },
      "outputs": [
        {
          "output_type": "stream",
          "name": "stdout",
          "text": [
            " * Serving Flask app \"__main__\" (lazy loading)\n",
            " * Environment: production\n",
            "\u001b[31m   WARNING: This is a development server. Do not use it in a production deployment.\u001b[0m\n",
            "\u001b[2m   Use a production WSGI server instead.\u001b[0m\n",
            " * Debug mode: off\n"
          ]
        },
        {
          "output_type": "stream",
          "name": "stderr",
          "text": [
            " * Running on http://127.0.0.1:5000/ (Press CTRL+C to quit)\n",
            "Exception in thread _colab_inspector_thread:\n",
            "Traceback (most recent call last):\n",
            "  File \"/usr/lib/python3.7/threading.py\", line 926, in _bootstrap_inner\n",
            "    self.run()\n",
            "  File \"/usr/lib/python3.7/threading.py\", line 870, in run\n",
            "    self._target(*self._args, **self._kwargs)\n",
            "  File \"/usr/local/lib/python3.7/dist-packages/google/colab/_debugpy.py\", line 64, in inspector_thread\n",
            "    _variable_inspector.run(shell, time)\n",
            "  File \"/usr/local/lib/python3.7/dist-packages/google/colab/_variable_inspector.py\", line 27, in run\n",
            "    globals().clear()\n",
            "TypeError: 'module' object is not callable\n",
            "\n"
          ]
        },
        {
          "output_type": "stream",
          "name": "stdout",
          "text": [
            " * Running on http://a92e-34-86-90-194.ngrok.io\n",
            " * Traffic stats available on http://127.0.0.1:4040\n"
          ]
        },
        {
          "output_type": "stream",
          "name": "stderr",
          "text": [
            "127.0.0.1 - - [06/Mar/2022 20:35:47] \"\u001b[37mGET / HTTP/1.1\u001b[0m\" 200 -\n",
            "127.0.0.1 - - [06/Mar/2022 20:35:49] \"\u001b[33mGET /favicon.ico HTTP/1.1\u001b[0m\" 404 -\n"
          ]
        }
      ],
      "source": [
        "from flask import *\n",
        "from flask_ngrok import run_with_ngrok\n",
        "\n",
        "app = Flask(__name__)\n",
        "\n",
        "@app.route('/')\n",
        "def home():\n",
        "  return '<p>Hello, World!</p>'\n",
        "\n",
        "run_with_ngrok(app)\n",
        "app.run()"
      ]
    },
    {
      "cell_type": "markdown",
      "source": [
        "_Note this code will potentially throw an error on first run, but this error can be ignored._\n",
        "\n",
        "To view the app in your browser click on the link that is of the form \"http://{IP_ADDRESS}.ngrok.io\" (the second URL in the list). This should open a new browser with the message \"Hello, World!\".\n",
        "\n",
        "Let's quickly discuss the code. Firstly we create a variable called _app_ which is created by calling the _Flask()_ function on \"\\__name\\___\". This last bit means we are calling the function on this code itself.\n",
        "\n",
        "Secondly we have a function called _home()_. This function is preceeded by a decorator (\"@app\") which is used to signify that the function is a part of our app and should be called whenever someone reaches the route \"/\". This route element is the path in the URL (which if you remember from the slides is the specific part of a site and the bit of the URL after the domain). A route of \"/\" is the equivalent of home ... there is no extra path. This function will print to screen \"Hello, World!\" any time a user reaches \"http://{IP_ADDRESS}.ngrok.io\". Finally to this function, we can see the use of HTML markup (our message is presented as a paragraph (\\<p>...\\</p>). We can in fact use any normal HTML code in our return string ... for instance bolding the text or returning a list.\n",
        "\n",
        "Lastly, we use the _run\\_with\\_ngrok()_ function to start our Ngrok tunnel, before finally running the app. \n",
        "\n",
        "Let's try another example ... making a bit more use of HTML. Before running the code you need to stop the code above by clicking on the stop button in the top right or clicking on Runtime -> Interupt Execution."
      ],
      "metadata": {
        "id": "1oTVcSMGKhao"
      }
    },
    {
      "cell_type": "code",
      "source": [
        "from flask import *\n",
        "from flask_ngrok import run_with_ngrok\n",
        "\n",
        "app = Flask(__name__)\n",
        "\n",
        "html_page = '''<body>\n",
        "<h1>Hello, World!</h1>\n",
        "<h2>Welcome to our webpage. Enjoy this lovely picture</h2>\n",
        "<img src=\"https://www.p-tech.org.uk/wp-content/uploads/2013/10/JP.jpg\">\n",
        "</body>'''\n",
        "\n",
        "@app.route('/')\n",
        "def home():\n",
        "  return '<p>Hello, World!</p>'\n",
        "\n",
        "@app.route('/james')\n",
        "def james():\n",
        "  return html_page\n",
        "\n",
        "run_with_ngrok(app)\n",
        "app.run()"
      ],
      "metadata": {
        "colab": {
          "base_uri": "https://localhost:8080/"
        },
        "id": "9AcAtnreiD_v",
        "outputId": "b645f78f-c1cb-4ac2-c114-9bf1cc138622"
      },
      "execution_count": null,
      "outputs": [
        {
          "output_type": "stream",
          "name": "stdout",
          "text": [
            " * Serving Flask app \"__main__\" (lazy loading)\n",
            " * Environment: production\n",
            "\u001b[31m   WARNING: This is a development server. Do not use it in a production deployment.\u001b[0m\n",
            "\u001b[2m   Use a production WSGI server instead.\u001b[0m\n",
            " * Debug mode: off\n"
          ]
        },
        {
          "output_type": "stream",
          "name": "stderr",
          "text": [
            " * Running on http://127.0.0.1:5000/ (Press CTRL+C to quit)\n"
          ]
        },
        {
          "output_type": "stream",
          "name": "stdout",
          "text": [
            " * Running on http://755f-34-86-90-194.ngrok.io\n",
            " * Traffic stats available on http://127.0.0.1:4040\n"
          ]
        },
        {
          "output_type": "stream",
          "name": "stderr",
          "text": [
            "127.0.0.1 - - [06/Mar/2022 20:36:03] \"\u001b[37mGET / HTTP/1.1\u001b[0m\" 200 -\n",
            "127.0.0.1 - - [06/Mar/2022 20:36:03] \"\u001b[33mGET /favicon.ico HTTP/1.1\u001b[0m\" 404 -\n",
            "127.0.0.1 - - [06/Mar/2022 20:36:15] \"\u001b[37mGET /james HTTP/1.1\u001b[0m\" 200 -\n"
          ]
        }
      ]
    },
    {
      "cell_type": "markdown",
      "source": [
        "We have basically the same code except for an extra function called _james()_ and some HTML code that it returns. Note we use the three apostrophy approach to create the string (_html\\_page_). Its a little unconventional to use in this way but it allows us to display the string over multiple lines for readability.\n",
        "\n",
        "If you click through on the link as before you'll land on exactly the same page we saw earlier with the \"Hello, World!\" message. Panic not, this is expected behaviour. When we built the _james()_ we gave it a route of \"/james\". If you add this to the end of the URL ... e.g. in my case it would be \"http://755f-34-86-90-194.ngrok.io/james\" ... you will land on our new page with a lovely image to look at.\n",
        "\n",
        "Let's keep expanding on this example. Remember to stop the code and we can try something else:"
      ],
      "metadata": {
        "id": "nvvQ4x4HrzDo"
      }
    },
    {
      "cell_type": "code",
      "source": [
        "from flask import *\n",
        "from flask_ngrok import run_with_ngrok\n",
        "from random import randrange\n",
        "\n",
        "app = Flask(__name__)\n",
        "\n",
        "html_page = '''<body>\n",
        "<h1>Hello, World!</h1>\n",
        "<h2>Welcome to our webpage. Enjoy this lovely picture</h2>\n",
        "<img src=\"https://www.p-tech.org.uk/wp-content/uploads/2013/10/JP.jpg\">\n",
        "</body>'''\n",
        "\n",
        "html_page_two = '''!</h1>\n",
        "<h2>Welcome to our webpage. Enjoy this lovely picture</h2>\n",
        "<img src=\"https://www.p-tech.org.uk/wp-content/uploads/2013/10/JP.jpg\">\n",
        "</body>'''\n",
        "\n",
        "names = {1: \"Michael\",\n",
        "         2: \"Jordan\",\n",
        "         3: \"Liping\",\n",
        "         4: \"James\",\n",
        "         5: \"Mark\"}\n",
        "\n",
        "@app.route('/')\n",
        "def home():\n",
        "  return '<p>Hello, World!</p>'\n",
        "\n",
        "@app.route('/james')\n",
        "def james():\n",
        "  return html_page\n",
        "\n",
        "@app.route('/randomised/')\n",
        "def randomised():\n",
        "  name = names[randrange(1,6)]\n",
        "  return \"<body><h1>Hello, \" + name + html_page_two\n",
        "\n",
        "run_with_ngrok(app)\n",
        "app.run()"
      ],
      "metadata": {
        "colab": {
          "base_uri": "https://localhost:8080/"
        },
        "id": "HyZSRdumuDaY",
        "outputId": "fea373d6-5d77-4467-ed77-dcf2d0589b89"
      },
      "execution_count": null,
      "outputs": [
        {
          "output_type": "stream",
          "name": "stdout",
          "text": [
            " * Serving Flask app \"__main__\" (lazy loading)\n",
            " * Environment: production\n",
            "\u001b[31m   WARNING: This is a development server. Do not use it in a production deployment.\u001b[0m\n",
            "\u001b[2m   Use a production WSGI server instead.\u001b[0m\n",
            " * Debug mode: off\n"
          ]
        },
        {
          "output_type": "stream",
          "name": "stderr",
          "text": [
            " * Running on http://127.0.0.1:5000/ (Press CTRL+C to quit)\n"
          ]
        },
        {
          "output_type": "stream",
          "name": "stdout",
          "text": [
            " * Running on http://6048-34-86-90-194.ngrok.io\n",
            " * Traffic stats available on http://127.0.0.1:4040\n"
          ]
        },
        {
          "output_type": "stream",
          "name": "stderr",
          "text": [
            "127.0.0.1 - - [06/Mar/2022 20:36:38] \"\u001b[37mGET / HTTP/1.1\u001b[0m\" 200 -\n",
            "127.0.0.1 - - [06/Mar/2022 20:36:38] \"\u001b[33mGET /favicon.ico HTTP/1.1\u001b[0m\" 404 -\n",
            "127.0.0.1 - - [06/Mar/2022 20:36:42] \"\u001b[32mGET /randomised HTTP/1.1\u001b[0m\" 308 -\n",
            "127.0.0.1 - - [06/Mar/2022 20:36:43] \"\u001b[37mGET /randomised/ HTTP/1.1\u001b[0m\" 200 -\n",
            "127.0.0.1 - - [06/Mar/2022 20:36:45] \"\u001b[37mGET /randomised/ HTTP/1.1\u001b[0m\" 200 -\n",
            "127.0.0.1 - - [06/Mar/2022 20:36:48] \"\u001b[37mGET /randomised/ HTTP/1.1\u001b[0m\" 200 -\n",
            "127.0.0.1 - - [06/Mar/2022 20:36:49] \"\u001b[37mGET /randomised/ HTTP/1.1\u001b[0m\" 200 -\n",
            "127.0.0.1 - - [06/Mar/2022 20:36:51] \"\u001b[37mGET /randomised/ HTTP/1.1\u001b[0m\" 200 -\n",
            "127.0.0.1 - - [06/Mar/2022 20:36:52] \"\u001b[37mGET /randomised/ HTTP/1.1\u001b[0m\" 200 -\n",
            "127.0.0.1 - - [06/Mar/2022 20:36:54] \"\u001b[37mGET /randomised/ HTTP/1.1\u001b[0m\" 200 -\n",
            "127.0.0.1 - - [06/Mar/2022 20:36:56] \"\u001b[37mGET /randomised/ HTTP/1.1\u001b[0m\" 200 -\n",
            "127.0.0.1 - - [06/Mar/2022 20:36:58] \"\u001b[37mGET /randomised/ HTTP/1.1\u001b[0m\" 200 -\n"
          ]
        }
      ]
    },
    {
      "cell_type": "markdown",
      "source": [
        "Here we have created another path (or endpoint) with the route \"/randomised\". If you navigate to this endpoint (in my case \"http://0b1b-35-229-189-216.ngrok.io/randomised\") you'll see the same page but now \"Hello, World!\" has been replaced by \"Hello, {name}!\" where name is one of the five names in the _names_ dictionary we created. We have used randrange to draw a number >= 1 and < 6 and then used this as the key in our dictionary ... therefore drawing a random name. If you keep refreshing the page you'll see that it will randomly loops through the dictionary saying hello to different people.\n",
        "\n",
        "At this point we have some dynamic content, albeit only dynamic at random, and have made a slightly more interactive web page. However, this is just the very, very tip of the Flask iceberg. Come back for part two when we'll build a much more dynamic and complete web app!"
      ],
      "metadata": {
        "id": "YkkXXf7X6RIk"
      }
    }
  ],
  "metadata": {
    "colab": {
      "provenance": [],
      "include_colab_link": true
    },
    "kernelspec": {
      "display_name": "Python 3",
      "name": "python3"
    },
    "language_info": {
      "name": "python"
    }
  },
  "nbformat": 4,
  "nbformat_minor": 0
}