You’ve coded your way through the harrowing challenges of the first Choose Your Own Adventure Presentations tutorial. A sign lies in the road ahead. “PyCon has summoned you to give a Choose Your Own Adventure talk in Montreal!” it reads.

—————

How do you proceed? If you choose to run from the PyCon challenge, close the browser window now. If you accept the challenge, prepare yourself for the dangers ahead with the new Wizard Mode functionality and continuing reading this blog post.

—————

You’re still here, adventurer! Let’s get to work. In this series of three blog posts we’re going to expand the Choose Your Own Adventure Presentations application with new a Wizard Mode. If you haven’t yet worked through the original blog post I highly recommend doing that before working through this series. The section below named “A Clean Starting Point” will get you set up for this tutorial if you’ve already gone through the original Choose Your Own Adventure Presentations post and just need a fresh copy of the code.

What’s this mysterious Wizard Mode we’re building? Think of it as an administrative interface that grants you, the presenting wizard, with new magical powers to control your presentations and how the audience can vote for story choices. The interface will only be accessible by authorized wizards through the sign-in page which will look like the following screenshot.

Once you’re inside the application you’ll be able to manage one or more Choose Your Own Adventure Presentations with a simple screen like this one:

As we go about building our new Wizard Mode you’ll learn about Flask form handling, WebSockets and how to persist presentation data to a PostgreSQL database.

There are three posts in this tutorial series where we will incrementally build out functionality:

Wizards Only: this blog post, where we’ll create a section of the application only authorized wizards can access Even Wizards Need Web Forms: the next blog post where we expand the wizard only pages to control our presentations Voting with a Wand, or Smartphone: our third and final post where we add a new magical trick to our presentations – voting via web browser when poor cell service prevents SMS voting

At the end of each post we’ll be able to test what we just built to make sure it’s working properly. If something goes wrong while you’re working through the tutorial, the Git tag tutorial-step-4 tag has the end result for code written in this post.

Let’s get to work!

What We’ll Need

We’ll continue using open source code to build our project including the existing Choose Your Own Adventure Presentations code base, PostgreSQL and several additional Python libraries. Don’t worry about downloading anything just yet – we will grab these tools throughout the tutorial. This list is just so you know ahead of time what’ll be installed along the way:

CYOA Presentations repository at the tutorial-step-3 tag stage

PostgreSQL for persistent storage

The psycopg2 Python driver to connect to PostgreSQL

Flask-login for authentication

Flask-WTF for web form handling

Finally, time to roll up the magical cloak sleeves and dive into coding.

A Clean Starting Point

If you just worked through the original Choose Your Own Adventure Presentation blog post and have your code ready then you can skip this section and go to “Wizards Only”.

Clone a copy of the Git repository of the code from GitHub:

git clone git@github.com:makaimc/choose-your-own-adventure-presentations

Change into the directory of our newly cloned repository.

cd choose-your-own-adventure-presentations

Next, the code we need is found in the tutorial-step-3 tag, so we’ll create a new Git branch with that code to work from.

git checkout -b tutorial tags/tutorial-step-3

Create a virtualenv that will hold our Python dependencies with the following commands. If you already have a directory where you keep your virtualenvs, you can skip the first step and place your new virtualenv in that existing directory.

mkdir ~/Envs/

virtualenv ~/Envs/cyoa

source ~/Envs/cyoa/bin/activate

When you enter the last of those commands above your prompt should change to look something like this:

(cyoa)$

That prompt means we’re ready to install our dependencies into our new virtualenv using pip:

pip install -r requirements.txt

Finally, there are several environment variables that need to be set so our application runs properly. These variables can be found in the cyoa/config.py file. Here’s a rundown of what each of these environment variables is for:

DEBUG – True or False for whether Flask should display error messages if something goes wrong SECRET_KEY – a long key that should be kept secret REDIS_SERVER – in this case likely to be localhost or wherever Redis is running REDIS_PORT – generally set to 6379 for the default Redis port REDIS_DB – set to 0 TWILIO_ACCOUNT_SID – found on your Twilio account dashboard TWILIO_AUTH_TOKEN – also found on your Twilio account dashboard TWILIO_NUMBER – a number you’ve purchased on Twilio

Setting up environment variables depends on your operating system. Here are guides for every major operating system, whether you’re using Ubuntu Linux, Mac OS X or Windows.

Great! Now our code and environment is ready to roll for the rest of the tutorial. Let’s write some new Python code.

Wizards Only

We’re going to create the wizard’s panel to control multiple presentations and how our audience can interact with them. First though we need a way to sort wizards from non-wizards in the form of a sign-in screen.

We’re going to use four new Python code libraries in this post so let’s get those added to our project. These new libraries are highlighted below. Update the requirements.txt file so it matches the following code.