![](https://crypto4nerd.com/wp-content/uploads/2023/08/0K9ZyyLCcP3RdQ2DN-1024x683.jpeg)
As mentioned above, a web app created using Taipy is primarily powered by a markdown string and a GUI object.
#1) Import libraries
To build the web application, we first import the Taipy library. More specifically, we shall import the Gui
object as follows:
## my_taipy_app.pyfrom taipy import Gui
#2) Define markdown with visual elements
Next, let’s add a simple markdown to our web app:
## my_taipy_app.pypage = """
# First Taipy Web Application.
"""
Here, we define a page
string object. The line beginning with #
denotes a heading coherent with the markdown format.
#3) Define the Gui object and run the web app
The last step involves passing the markdown to the Gui object and running the web app, as demonstrated below:
## my_taipy_app.pyGui(page=page).run()
As the name suggests, the run()
method is invoked on the Gui object to run the application when the script is executed.
On a side note, one can also use Taipy in Jupyter notebooks.
With this, the web app is ready.
#4) Execute the script
Lastly, we run the script as we would run any other Python program:
python my_taipy_app.py
This will run a local server, and you shall have a web application running in your browser:
Next, let’s see how to add more visual elements to the markdown to display them on the web app.
Every visual element in Taipy follows a specific syntax:
To add any visual element to your web app, you must use the syntax mentioned above inside your markdown string page
.
Let’s look at some examples below.
Note: From here, we will only modify the markdown string object
page
. The rest of the code will remain the same.
#1) Display variables
To display variables in your web app, we define a variable name
and then enclose it in the format described above, i.e., <|{name}|>
, and add it to the markdown:
## my_taipy_app.pyname = "Avi Chawla"
page = """
# First Taipy Web Application.
Hello: <|{name}|>
"""
As a result, we get the following output in our web app:
The variable can be an integer (or a float) as well:
## my_taipy_app.pyvariable = 100
page = """
# First Taipy Web Application.
Variable value: <|{variable}|>
"""
Consequently, we see the following in our web app:
#2) Sliders
Next, to define a variable as a slider, we should follow the visual element syntax and define the visual_element_name
as slider
.
## my_taipy_app.pyvariable = 100
page = """
# First Taipy Web Application.
Variable value: <|{variable}|>
Change Value:
<|{variable}|slider|>
"""
Here, in the slider visual element, we first define the variable it will control (variable
). Next, we define its type — slider
.
Coding the markdown can be simplified if you use Taipy’s VS code extension. It provides code completion and Markdown preview for easy coding.
As a result, Taipy displays a slider in our web app.
Also, as we move the slider, the variable value gets updated. This is because both visual elements refer to the same object (variable
).
#3) Charts
Next, let’s see how to add a chart, which is extremely crucial in data science applications.
The format for the visual element remains the same, as shown below:
For instance, to display a scatter plot, we define the following syntax:
We follow the standard syntax for defining a visual element. First, we have the data
object. Then, we declare the visual element type as chart
.
Next, we specify the display mode as markers
and indicate a scatter plot with the type
parameter. Lastly, we specify the x
and y
information to define the axis of the chart.
Taipy charts are based on Plotly, which makes them interactive.
A comprehensive guide about Taipy charts is available in the docs.
#4) Display data table
Lastly, let’s print a DataFrame in our web application.
## my_taipy_app.pydata = {"Rating":[1,4,3,1,3,5,2,4,2],
"Salary":[100,450,340,120,290,600,250,430,220]}
page = """
# First Taipy Web Application.
DataFrame: <|{data}|table|>
"""
To do this, specify the visual element types as table
and done!
With this, we see a DataFrame in our web application.
While this is a basic demonstration of tables in Taipy, you can do much more advanced stuff, such as filtering, editing, aggregating, and deleting, within the app.
Read more in the official guide here: Taipy tables.