This is the first part of a five-part guide that shows you how to build a web app to co-ordinate a gift exchange. We’ll use Flask, a Python web framework, and Infobip’s Python SDK.

In this part of the guide, we build an app where users can enter their names and phone numbers.

You can follow along with the code at the project repository on GitHub, where each step of this guide corresponds to a branch in the repo.

Prerequisites

  • An Infobip account (a trial one works perfectly fine)
  • A little Python knowledge

Setup

First, create a new folder in your file system called ‘gift-exchange-app’. This folder will be your working directory for the duration of this guide, and when you run terminal commands, you’ll do so from within this directory. 

In a terminal window, navigate to this directory. Create and activate a virtual environment to keep all your project dependencies isolated from the rest of your machine:

python3 -m venv .venv
source .venv/bin/activate

We’ll be building a tiny Flask application with a single page. On that page there are two input boxes (to enter a phone number and a name) and a button. When you enter a phone number and a name and click the button, that information is stored to register a new participant in the gift exchange.

To do this, we’ll need to install the following Python packages:

pip install Flask 
pip install infobip-api-python-sdk

Flask lets us build and serve an application using Python, and we’ll need the Infobip SDK to write Pythonic code to send SMS messages.

Creating our app.py

When you build a Flask app, you usually put the main entry point for that app in a file or package called app.py. Our app is going to be a single file of Python, so we’ll create a file called app.py in the top level of our working directory.

gift-exchange-app/
    app.py

If you like, you can also run the following command from your working directory to keep a record of your currently installed packages:

pip freeze > requirements.txt

That will result in a directory structure like this:

gift-exchange-app/
    app.py
    requirements.txt

Open up your app.py file in your code editor of choice, and add the following lines:

from flask import Flask

app = Flask(__name__)

@app.route('/')
def index():
    return 'hello world'

Now run flask run from the command line in your working directory. By default, this will serve your Flask app at https://localhost:5000, and show you a very simple page with the words ‘hello world’ on it.

Adding an HTML template

Next, we’ll add some HTML for our app to serve us. Flask requires its HTML files to be in a particular place, so create a new directory underneath your working directory called templates. Within that directory, add a file called app.html, and add the following code to it:

<html>
   <head>
       <title>Gift Exchange App</title>
       <link rel="icon" type="image/favicon" href="https://avatars.githubusercontent.com/u/1288491">
       <link href="https://fonts.googleapis.com/css2?family=Lora:wght@600&display=swap" rel="stylesheet">
   </head>
   <body>
       <form action="{{ url_for('index')}}" method="POST">
           <p><input type="text" name="name" placeholder="Enter your name here"></p>
           <p><input type="tel" name="number" placeholder="Enter your phone number here"></p>
           <p><button type="submit"><p>Add me to the gift exchange!</p></button></p>
       </form>
   </body>
</html>

Your directory structure now looks like this:

gift-exchange-app/
    app.py
    requirements.txt
    templates/
        app.html

The <head> section contains some information to help the browser display our page, such as the title and icon. We also use this to set a font for our page’s content, which can be anything you like.

In the <body> section, there are the input boxes and the button component that live within an HTML <form>. When that button is clicked, it sends a POST request to our index page. To handle this kind of request, we’ll need to update the Python function that Flask runs when we access our index page.

In your app.py file, update your imports line to include render_template and request from Flask:

from flask import Flask, render_template, request

 Update your index() function as follows:

@app.route('/', methods=['GET', 'POST'])
def index():
   if request.method == 'GET':
       pass
   else:
       name = request.form.get('name')
       number = request.form.get('number')
       print(f'You clicked the button with name {name} and number {number}!')
   return render_template('app.html')

Here, we’ve updated the @app.route decorator to specify that this URL should accept both GET and POST requests, and in the body of the function we use an if statement to handle the two types of request differently.

With a POST request, we’ll run through the else statement in our code and hit the print statement. When we run our Flask app from a terminal window, and click our button in the browser, we’ll see the results of that print statement in that terminal window.

The last change here is that the function now serves our new HTML, instead of just a string saying ‘hello world’.

Now, run flask run again. Your app now serves a page at https://localhost:5000 that has the input boxes and the button, and when you fill the boxes and click that button, you should see the text containing the data that you input appear in your terminal.

If you like, you can also add some CSS styling to your HTML so that the page looks shiny and cool.

Next time

In the next part, we’ll create a database and store our names and phone numbers!