Build a Python Web App with PyScript | Run Python in the Browser! 🐍🔥
Build a Python Web App with PyScript: A Step-by-Step Guide
In this tutorial, we will learn how to create an interactive web application using PyScript, enabling us to run Python code directly in the browser without needing to write any JavaScript. We will build a simple greeting app that captures user input and displays a personalized message. Let’s dive into the details!
What is PyScript?
PyScript is a framework that allows you to run Python code in the browser, making it easier to create interactive web applications. By using PyScript, developers can leverage their Python skills for web development without delving into JavaScript.
Setting Up Your Project
Before we start coding, ensure you have the following files created in your project directory:
- index.html: The main HTML file for our web app.
- main.py: The Python file where the main logic of our application will reside.
- pyscript.toml: A configuration file for PyScript (optional but recommended).
Step 1: Create the HTML File
Let's start by setting up the index.html file. Here’s a basic structure for our HTML page:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Greeting App</title>
<link rel="stylesheet" href="styles.css"> <!-- Optional: Link to your CSS file -->
<script defer src="https://pyscript.net/latest/pyscript.js"></script>
</head>
<body>
<h1>Welcome to the Greeting App</h1>
<input type="text" id="name_input" placeholder="Enter your name">
<button id="greet_button">Greet Me!</button>
<p id="output"></p>
<py-script src="main.py"></py-script>
<py-config src="pyscript.toml"></py-config>
</body>
</html>
Step 2: Create the Python Logic
Now, let’s create the main.py file, where we will write the Python code to handle user interaction. This file will contain the logic for capturing user input and updating the output.
from pyscript import Element, when
@when('greet_button')
def greet_user(event):
name = Element('name_input').element.value
greeting = f"Nice to meet you, {name}! Hope you have an awesome day ahead."
Element('output').element.innerHTML = greeting
Code Explanation
- We import
Elementandwhenfrom the PyScript library. - The
@whendecorator is used to bind thegreet_userfunction to the button click event. - Inside
greet_user, we retrieve the value from the input textbox (name_input) and create a personalized greeting. - Finally, we update the content of the paragraph with ID
outputto display the greeting.
Step 3: Optional Configuration File
While the configuration file (pyscript.toml) is optional, it’s good practice to include it for better project organization. Here’s a simple example:
[project]
name = "Greeting App"
version = "1.0.0"
Running Your Application
To see your application in action, open the index.html file in your web browser. Enter a name in the input field and click the "Greet Me!" button. You should see a personalized greeting displayed below the button.
Alternative: Using PyScript Online
If you prefer not to set up a local environment, you can use PyScript.com. Here’s how:
- Create an account on PyScript.com.
- Create a new project.
- You will receive a basic setup with
index.html,main.py, and a configuration file. - Update the
main.pyandindex.htmlfiles with the code provided above.
Conclusion
Congratulations! You have successfully built a simple Python-powered web application using PyScript. This tutorial introduced you to the basics of integrating HTML with Python, capturing user input, and displaying results—all without writing any JavaScript.
Feel free to experiment further with PyScript to create more complex applications. If you found this tutorial helpful, please like and subscribe for more content on web development and programming!
Connect with SkillBakery Studios
Explore more tutorials, tools, and resources:
Posted by SkillBakery Studios
Hello, my name is Jack Sparrow. I'm a 50 year old self-employed Pirate from the Caribbean.
No comments:
Post a Comment