How to Create Web Apps with Python, HTML and Thonny
Python is the glue. You can use this to combine different elements of your code. 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. One of the attractions of Python is the many code modules that can be easily inserted into your project.
Thonny is a powerful yet simple editor for Python and with the release of version 4 I wanted to use it to create my projects. In this how-to, we use the latest version of Thonny to create a web application that retrieves stock data for a Raspberry Pi. rpilocator.com Use it to populate your app’s tables.
RSS is a great way to share a collection of information. It can be used to provide news headlines such as Tom’s Hardware RSS Feed Also Even the latest xkcd comic strips.
Note that the RSS feed from rpilocator is not as current as the data above. rpilocator.comThink of this project as a notification system, not a “sniping” tool.
Installing Thonny 4.0
Thonny is the default Python IDE. raspberry pi, but it’s not limited to just that machine. Thonny is also available for Windows, Mac, and Linux machines. Raspberry Pi Pico W And ESP32.
1. open Access Thonny’s homepage from your browser.
2. Please select your OS downloadFor Windows, there are several options to choose from. The first choice is the Python version. We recommend the latest (3.10 at the time of writing). Then choose to install Thonny on your machine or use the portable version. We recommend installing Thonny on your machine.
3. Click the downloaded file to start the installation.
Four. Click More Information to continue the installation. The new installation has a relatively unknown certificate and has not yet established a reputation.
Five. Click Run anyway to continue.
6. [次へ]Click to continue.
7. Accept the license agreement.
8. Select the checkbox to create a desktop icon. This is an optional step. I chose not to do this in favor of showing the icon in the taskbar.
9. [インストール]Click to start the installation process.
Ten. [完了]Click Finish the installation.
Create a project with Thonny 4.0
Thonny is for beginners, but don’t be fooled. Thonny is a capable, full-featured editor for makers. Thonny has a multi-window his layout that you can edit to suit your needs.
1. File: This is a basic file manager that you can use to open files within your project. Raspberry Pi Pico W and other MicroPython devices open an additional pane that can be used to copy files to and from the device.
2. Coding area: Now create a project for your code. You can use multiple tabs for multiple files.
3. Python shell: The Python shell (REPL, Read, Eval, Print, Loop) is where you can view the output of your code and interact with your code.
Four. assistant: If your code has bugs or doesn’t follow the style guidelines, it will be flagged here.
Installing modules with Thonny
A Python module (sometimes called a “library”) is a pre-written segment of code that enables additional functionality. Common examples include his RPI.GPIO and GPIO Zero on the Raspberry Pi. Modules often abstract/simplify complex tasks. This project uses two modules. PyWebIO is a module for creating HTML content using Python. It also creates a web server that you can use to quickly connect to your app. The second module is Feedparser. This is an RSS feed reader module, used to read rpilocator’s Raspberry Pi stock level feeds.
1. Open Thonny and make sure there are no open projects.
2. Click Tools >> Manage Packages. Thonny has a built-in GUI for the Python 3 package manager ‘pip’.
3. Search for pywebio.This is the module used to generate web pages using Python.
Four. [インストール]Click to download and install the module.
Five. Repeat the previous steps, this time installing feedparser. Feedparser is a Python module for RSS feeds.
6. [閉じる]Click to close the dialog.
Writing project code
The goal here is to create a Python project that populates a table with data from rpilocator’s RSS feed. Get the current five entries and display them in an HTML table created using Python.
1. In a new blank document, import two modules from pywebio. The first file contains 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 feedparser module.
import feedparser
3. Create a function called main.
def main():
Four. Inside the function, create a “stock” object and use it to store the parsed output of the rpilocator RSS feed.
stock = feedparser.parse('https://rpilocator.com/feed/')
Five. Create three empty lists: in_stock, in_stock_link, category. These are used to store the data retrieved from the “stock” object which contains the RSS data.
in_stock = []
in_stock_link = []
category = []
6. Create a for loop that repeats 5 times.
for i in range(5):
7. Use ‘Add’ to add availability, links and categories (reseller name) to the appropriate list. The RSS data stored in “stock” is a mix of lists and dictionaries. For data in lists, you can use numeric indices. This is the value of i in the for loop. As the for loop iterates, it counts from 0 to 4. Data stored in a dictionary needs to know the key (such as “entry”). Using a key returns its value.
in_stock.append(stock['entries'][i]['title'])
in_stock_link.append(stock['entries'][i]['link'])
category.append(stock['entries'][i]['category'])
8. Outside the for loop, use a “toast” to create a popup notification. Messages can also combine strong emojis and emojis.
toast('🍓I found Raspberry Pi in stock!🍓')
9. Use “put_html” to write an HTML H1 heading element to your web page. You can use this function to write arbitrary HTML elements to your page, PyWebIO module has various means of creating specialized elements.
put_html("<h1>Raspberry Pi Stock</h1>")
Ten. Create a list “table” and use it to store two columns of data from the in_stock, in_stock_link, and category lists. The first row is the column heading details and the URL. In Stock displays a short description of the stock. Create an HTML hyperlink using “put_link”. The link text is the reseller’s name, stored in the category list, and the address is 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 the table object.
put_table(table)
12. Create a hyperlink under the table using “put_link”, In this case, go to rpilocator, the stock level source for the Raspberry Pi.
put_link('Data provided by RPiLocator',url="https://rpilocator.com")
13. Outside the function, call the PyWebIO “start_server” function, passing three arguments. The argument is the “main” function that creates the table from the RSS data. The port is set to 8080 and debugging is enabled in the Python shell and web page.
start_server(main, port=8080, debug=True)
14. Save the code as RSS-Feed-Reader.py and[実行]Click to get started.
15. Click the Python shell link to open a web page in your default browser.
complete code listing
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("<h1>Raspberry Pi Stock</h1>")
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)