Home Stock list How to Create Web Applications with Python, HTML, and Thonny

How to Create Web Applications with Python, HTML, and Thonny

0

Python is a glue. We can use it to join different pieces of code together. As a language, Python is easy to learn and human readable, making it one of the most effective languages ​​for learning and general purpose programming. Part of Python’s charm is the many code modules that can be easily inserted into a project.

Thonny is a powerful yet simple editor for Python, and with the release of version 4, we wanted to use it to create a project. In this guide, we will be using the latest version of Thonny to create a web application that will extract Raspberry Pi stock data from rpilocator.com and use it to populate an array in our application.

RSS is a great way to share a stream of information. It can be used to stream news headlines, such as the Tom’s Hardware RSS Feed Where even the latest xkcd comic.

Note that the rpilocator RSS feed is not as up-to-date as the data on rpilocator.com. Think of this project as a notification system rather than a “sniping” tool.

Installing Thonny 4.0

Thonny is the default Python IDE on the Raspberry pie, but it is not limited to this machine. Thonny is also available for Windows, Mac, and Linux machines, and it can be used to write Python and MicroPython for devices like the Raspberry Pi Pico W and ESP32.

1. Open a browser to Thonny’s home page.

(Image credit: Tom’s Hardware)

2. Select the download for your operating system. For Windows, you have several options to choose from. The first choice is the most recent version of Python we recommend (3.10 at the time of writing). Then you have the choice to install Thonny on your machine or use a portable version. We recommend that you install Thonny on your machine.

(Image credit: Tom’s Hardware)

3. Click on the downloaded file to start the installation.

4. Click “More Info” to continue the installation. The new installation has a relatively unknown certificate and has not yet acquired a reputation.

(Image credit: Tom’s Hardware)

5. Click “Run Anyway” to continue.

(Image credit: Tom’s Hardware)

6. Click Next to continue.

(Image credit: Tom’s Hardware)

seven. Accept the license agreement.

(Image credit: Tom’s Hardware)

8. Check the box to create an icon on the desktop. This is an optional step, we chose not to do it because we prefer icons in the taskbar.

(Image credit: Tom’s Hardware)

9. Click Install to start the installation process.

(Image credit: Tom’s Hardware)

ten. Click Finish to complete the installation.

(Image credit: Tom’s Hardware)

Create our project with Thonny 4.0

Thonny is beginner-focused, but make no mistake, Thonny is a competent and comprehensive editor for makers. Thonny has a multi-window layout which can be changed to suit your needs.

1. Files: This is a basic file manager that can be used to open files in a project. Raspberry Pi Pico W and other MicroPython devices will open an additional pane that we can use to copy files to and from the device.

2. Coding area: This is where we create the project for our code. We can have multiple tabs, for multiple files.

3. Python case: The Python shell (REPL, Read, Eval, Print, Loop) is where we can see the output of our code and also interact with it.

4. Assistant: If your code contains a bug or violates a style guideline, it will be reported here.

(Image credit: Tom’s Hardware)

Install modules with Thonny

Python modules (sometimes also called “libraries”) are pre-written code segments that enable additional functionality. Popular examples include RPI.GPIO and GPIO Zero for the Raspberry Pi. Modules often summarize/simplify complex tasks. In our project, we will use two modules. PyWebIO is a module for creating HTML content using Python. It also creates a web server that we can use to quickly connect to our application. The second module is Feedparser, an RSS feed reader module that we will use to read the stock level feed from the Raspberry Pi rpilocator.

1. Open Thonny and make sure no project is open.

2. Click Tools >> Manage Packages. Thonny has a built-in GUI for the Python 3 “pip” package manager.

(Image credit: Tom’s Hardware)

3. Look for pywebio.This is the module we are going to use to generate a web page in Python.

(Image credit: Tom’s Hardware)

4. Click Install to download and install the module.

(Image credit: Tom’s Hardware)

5. Repeat the previous steps, this time install feedparser. Feedparser is a Python module for RSS feeds.

(Image credit: Tom’s Hardware)

6. Click Close to exit the dialog box.

(Image credit: Tom’s Hardware)

Write the project code

(Image credit: Tom’s Hardware)

Our goal is to create a Python project that will use data from the rpilocator RSS feed to populate a table. We’ll grab the current five inputs and display them in an HTML table, created using Python.

1. In a new blank document, import two modules from pywebio. The first contains the code to start a simple web server. The pywebio.output module is used to generate HTML elements such as tables and hyperlinks.

from pywebio import start_server
from pywebio.output import *  

2. Import the stream parser module.

import feedparser

3. Create a function called main.

def main():

4. Inside the function, create an object, “stock”, and use it to store the parsed output of the rpilocator RSS feed.

   stock = feedparser.parse('https://rpilocator.com/feed/')

5. Create three empty lists, in_stock, in_stock_link and category. These will be used to store the data retrieved from the “stock” object containing the RSS data.

   in_stock = []
   in_stock_link = []
   category = []

6. Create a for loop that will iterate five times.

   for i in range(5):

seven. Use “add” to add the stock status, link and category (reseller name) to the appropriate list. The RSS data stored in “stock” is a mixture of lists and dictionaries. For data in a list, we can use its numeric index, which is the value of i in our for loop. This will count from 0 to 4 when iterating the for loop. Data stored in a dictionary requires us to know the key (“entries” for example). Using the key will return its value.

       in_stock.append(stock['entries'][i]['title'])
       in_stock_link.append(stock['entries'][i]['link'])
       category.append(stock['entries'][i]['category'])

An example of RSS feed data displayed in Google Chrome (Image credit: Tom’s Hardware)

8. Outside of the for loop, create a popup notification using “toast”. The message can be a mix of a loud, and even emojis.

   toast('🍓I found Raspberry Pi in stock!🍓')

9. Use “put_html” to write an H1 HTML header element to the web page. We can use this function to write any HTML element to the page, but note that the PyWebIO module has many different ways to create specialized items.

   put_html("

Raspberry Pi Stock

")

ten. Create a list, “table” and use it to store two columns of data, taken from our in_stock, in_stock_link and category lists. The first row contains the Details and URL column headings. In Stock will print a brief description of what is in stock. Using “put_link”, we create an HTML hyperlink, the link text being the name of the reseller, stored in the category list, and the address stored in in_stock_link.

   table = [['Details','URL'],
       [in_stock[0], put_link(category[0],url=in_stock_link[0])],
       [in_stock[1], put_link(category[1],url=in_stock_link[2])],
       [in_stock[2], put_link(category[2],url=in_stock_link[2])],
       [in_stock[3], put_link(category[3],url=in_stock_link[3])],
       [in_stock[4], put_link(category[4],url=in_stock_link[4])],
       ]

11. Use PyWebIO’s “put_table” function to create an HTML table from our table object.

   put_table(table)

12. Use “put_link” to create a hyperlink below the table, in this case, that brings us to the source of Raspberry Pi’s stock levels, rpilocator.

   put_link('Data provided by RPiLocator',url="https://rpilocator.com")

13. Outside of the function, call PyWebIO’s “start_server” function and pass it three arguments. Arguments are our “main” function that will create the table from the RSS data. The port is set to 8080 and debugging is enabled through the Python shell and on our webpage.

start_server(main, port=8080, debug=True)

14. Save the code as RSS-Feed-Reader.py and click Run to start.

(Image credit: Tom’s Hardware)

15. Click the link in the Python shell to open the webpage in your default browser.

(Image credit: Tom’s Hardware)

Complete list of codes

from pywebio import start_server
from pywebio.output import *    
import feedparser
def main():
   stock = feedparser.parse('https://rpilocator.com/feed/')
   in_stock = []
   in_stock_link = []
   category = []
   for i in range(5):
       in_stock.append(stock['entries'][i]['title'])
       in_stock_link.append(stock['entries'][i]['link'])
       category.append(stock['entries'][i]['category'])
   toast('🍓I found Raspberry Pi in stock!🍓')
   put_html("

Raspberry Pi Stock

") table = [['Details','URL'], [in_stock[0], put_link(category[0],url=in_stock_link[0])], [in_stock[1], put_link(category[1],url=in_stock_link[2])], [in_stock[2], put_link(category[2],url=in_stock_link[2])], [in_stock[3], put_link(category[3],url=in_stock_link[3])], [in_stock[4], put_link(category[4],url=in_stock_link[4])], ] put_table(table) put_link('Data provided by RPiLocator',url="https://rpilocator.com") start_server(main, port=8080, debug=True)