You signed in with another tab or window. Reload to refresh your session.You signed out in another tab or window. Reload to refresh your session.You switched accounts on another tab or window. Reload to refresh your session.Dismiss alert
Copy file name to clipboardExpand all lines: tutorials/intro-express/1-welcome.qmd
+57-88
Original file line number
Diff line number
Diff line change
@@ -2,42 +2,28 @@
2
2
title: Getting Started
3
3
---
4
4
5
-
Shiny for Python is a web application framework that helps tell your
6
-
data story.
7
-
If you've landed on this page,
8
-
you probably have a bit of Python experience,
9
-
worked with data,
10
-
and now need a way to publish an interactive
11
-
web application to help tell your data story.
5
+
Shiny for Python is a web application framework that helps tell your data story.
6
+
If you've landed on this page, you probably have a bit of Python experience, worked with data, and now need a way to publish an interactive web application to help tell your data story.
12
7
13
8
## Installation and Setup
14
9
15
-
This is a 1 to 2 Hour tutorial to get you started and familiar with all the basic
16
-
parts of creating and deploying a Shiny for Python application.
17
-
Before starting this tutorial,
18
-
check to make sure you have your packages and environment
19
-
setup.
20
-
You can see the
21
-
[Installation section of the Get Started Guides](/get-started/install-create-run.qmd).
10
+
This is a 1 to 2 Hour tutorial to get you started and familiar with all the basic parts of creating and deploying a Shiny for Python application.
11
+
Before starting this tutorial, check to make sure you have your packages and environment setup.
12
+
You can see the [Installation section of the Get Started Guides](/get-started/install-create-run.qmd).
22
13
23
14
## Parts of a Shiny Application
24
15
25
16
Shiny express allows us to write shiny apps with a minimal amount of code.
26
-
This lets us rapidly link interactive components with our data
27
-
in our web application.
17
+
This lets us rapidly link interactive components with our data in our web application.
28
18
29
19
There are 3 main parts of a shiny express application
30
20
31
-
1.[input components](/components/#inputs):
32
-
provide user interactions that can be used as inputs in other parts of the web application.
33
-
2.[output components](/components/#outputs):
34
-
results that are displayed on the web application.
35
-
3.[layout and ui components](/layouts):
36
-
how and where the inputs and output of the web application are displayed.
21
+
1.[input components](/components/#inputs): provide user interactions that can be used as inputs in other parts of the web application.
22
+
2.[output components](/components/#outputs): results that are displayed on the web application.
23
+
3.[layout and ui components](/layouts): how and where the inputs and output of the web application are displayed.
37
24
38
25
The example below demonstrates the basic mechanics behind Shiny apps.
39
-
As you move the slider (an input component),
40
-
the text (output component) will react and update to the corresponding input value.
26
+
As you move the slider (an input component), the text (output component) will react and update to the corresponding input value.
41
27
42
28
```{shinylive-python}
43
29
#| standalone: true
@@ -55,33 +41,32 @@ def slider_val():
55
41
56
42
Let's briefly break down the components of the application above:
57
43
58
-
- Inputs
59
-
- Create a slider with a `ui.input_*` function.
60
-
- Here we are using the `ui.input_slider()` function to create the slider.
61
-
- This slider has an id of `"val"` which is used to get the slider value later
62
-
- Outputs
63
-
- Created by decorating a function with the corresponding `@render.*` decorator.
64
-
- Here we are displaying text, so we are using the `@render.text` decorator.
65
-
- Inside a `render` function, `input` values can be read [reactively](#reactivity).
66
-
- We read the value from the slider by calling `input.val()`.
67
-
- When those `input` values change, Shiny knows how to minimally re-render output.
68
-
- Layouts
69
-
- Inferred automatically based on what items you place in your application.
70
-
- We will learn more about layouts and user interfaces in the next lesson of this tutorial.
71
-
72
-
::: {.callout-note}
44
+
-Inputs
45
+
- Create a slider with a `ui.input_*` function.
46
+
- Here we are using the `ui.input_slider()` function to create the slider.
47
+
- This slider has an id of `"val"` which is used to get the slider value later
48
+
-Outputs
49
+
- Created by decorating a function with the corresponding `@render.*` decorator.
50
+
- Here we are displaying text, so we are using the `@render.text` decorator.
51
+
- Inside a `render` function, `input` values can be read [reactively](#reactivity).
52
+
- We read the value from the slider by calling `input.val()`.
53
+
- When those `input` values change, Shiny knows how to minimally re-render output.
54
+
-Layouts
55
+
- Inferred automatically based on what items you place in your application.
56
+
- We will learn more about layouts and user interfaces in the next lesson of this tutorial.
57
+
58
+
:::: callout-note
73
59
## Exercise
74
60
75
61
Let's make and run our first shiny for python application.
76
62
77
-
1. Take the above code and save it to a file. Here we named it `app.py`
78
-
2. Click on the play button (red circle in the image below)j
63
+
1.Take the above code and save it to a file. Here we named it `app.py`
64
+
2.Click on the play button (red circle in the image below)j
79
65
80
66
You will see the terminal run the `shiny run` command for you automatically.
INFO: 127.0.0.1:56426 - "GET /?vscodeBrowserReqId=1737097751843 HTTP/1.1" 200 OK
93
78
```
94
79
95
-
This will run the application on port `55901` and automatically reload and update
96
-
as you make changes to the `app.py` file.
80
+
This will run the application on port `55901` and automatically reload and update as you make changes to the `app.py` file.
97
81
98
-
1. You will see the app build in the bottom terminal and open in the viewer on the side
99
-
2. Move the slider and see how the output reacts
100
-
3. Congratulations, you made your first shiny for python application!
82
+
1. You will see the app build in the bottom terminal and open in the viewer on the side
83
+
2. Move the slider and see how the output reacts
84
+
3. Congratulations, you made your first shiny for python application!
101
85
102
-
::: {.column-margin}
86
+
::: column-margin
103
87
104
88
:::
89
+
::::
105
90
106
-
:::
107
-
108
-
::: {.callout-tip}
91
+
::: callout-tip
109
92
## Naming your files
110
93
111
-
If you start your file with the word `app`,
112
-
the shiny for python extension will recognize
113
-
it as an application and you will be able to see the "play" button to run your application.
114
-
You can also name your file `app-get_started.py`
115
-
and you will still get the shiny extension play button.
94
+
If you start your file with the word `app`, the shiny for python extension will recognize it as an application and you will be able to see the "play" button to run your application.
95
+
You can also name your file `app-get_started.py` and you will still get the shiny extension play button.
116
96
117
-
To have Shiny for Python work well with the VS Code extensions and for you to go through
118
-
the next series of lessons.
97
+
To have Shiny for Python work well with the VS Code extensions and for you to go through the next series of lessons.
119
98
We recommend either one of the following file naming conventions:
120
99
121
-
1. Create separate folders foreach app example you will create and save separate `app.py` filesin each folder
122
-
2. Create separate `app*.py` files in the same directory (e.g., `app-01.py`, `app-02.py`)
100
+
1. Create separate folders foreach app example you will create and save separate `app.py` filesin each folder
101
+
2. Create separate `app*.py` files in the same directory (e.g., `app-01.py`, `app-02.py`)
123
102
124
103
If you named your application `app.py` you can omit it form the command and only use `shiny run --reload`.
125
104
The `app.py` is the default file Shiny looks forto runin the current directory.
126
105
Otherwise, you can pass in the name of the file that you wish to run.
127
-
The `app` prefix used in the example above is used to signal to the Shiny VS Code extension
128
-
to display the run app button.
106
+
The `app` prefix used in the example above is used to signal to the Shiny VS Code extension to display the run app button.
129
107
:::
130
108
131
109
## Run your shiny application
132
110
133
-
In addition to the play button in Positron, you can manually run your application from
134
-
the command line.
135
-
This is useful if you wish to specify your own port or want to rename your application
136
-
without the `app` prefix.
111
+
In addition to the play button in Positron, you can manually run your application from the command line.
112
+
This is useful if you wish to specify your own port or want to rename your application without the `app` prefix.
137
113
138
-
```bash
139
-
shiny run my_app.py --reload --port 8000
114
+
```bash
115
+
shiny run my_app.py --reload
140
116
```
141
117
142
-
:::{.callout-tip}
118
+
:::callout-tip
143
119
## Helpful run options
144
120
145
121
Some useful options you can pass the `shiny run`command are:
146
122
147
-
- `--reload`: Enables auto-reload, the application will reload to reflect your changes as you save your work.
148
-
- `--port`: pass in a custom port, e.g., `--port 8000`.
149
-
This will run the app on the specified port,
150
-
instead of a random port.
151
-
This makes it easier to have the same browser window open as you stop and start your application.
123
+
- `--reload`: Enables auto-reload, the application will reload to reflect your changes as you save your work.
124
+
- `--port`: pass in a custom port, e.g., `--port 8000`. This will run the app on the specified port, instead of a random port. This makes it easier to have the same browser window open as you stop and start your application.
0 commit comments