In this section, we’ll learn how to run two versions of an autocorrect app called Letter Inventory: a console-based version and a web-based version. We won’t be writing any code for this demo!

A recent version of Python 3. We used Python 3.8.5.

First, download the nifty-web-apps-python repository. Unzip the contents.

Console app

Run the console app with python3 When prompted for a query, try entering any word such as “occurence”. If everything goes well, you should see the following output appear.

Query: occurence


Web app

Run the web app with python3 In a web browser, navigate the following address: localhost:8000.

Try entering some text in the input text field and see how the app responds. Then, try clicking on the ⚡ (lightning bolt) icon and see what happens.

When you’re done demoing the web app, stop the Python terminal process with Ctrl+C.

Compare with

When we ran the console app, Python executed the __main__ code at the bottom of When we ran the web app, Python executed the __main__ code in

Later, we’ll adapt this file to run a different app called Random Sentence Generator. To help make the connections between the console app and the web app, notice how we’ve marked up matching code snippets: both and contain a comment for Step 1 and a comment for Step 2. These matching code snippets represent the logic that we’ll need to change for each assignment.

Step 1: Return the top 10 most similar options

While the file adds each option to a running result list, the console app just prints out the result to the screen. This difference is important. needs to self.send the result back to the web browser as a JSON string:

{"items": ["occurrence", "concrete", "concert", "concern", ...]}

Step 2: Return a random string from the dataset

In addition to entering text directly into the input box, the user can also touch the ⚡ (lightning bolt) icon to randomly fill the input box with a word from the dataset. This is feature is only present in the web app Like step 1, step 2 also needs to self.send the result back to the web browser as a JSON string:

{"s": "tripadvisor"}