Skip to content

Commit

Permalink
reorganise the tutorial
Browse files Browse the repository at this point in the history
  • Loading branch information
@MarcSkovMadsen
MarcSkovMadsen committed Feb 6, 2024
1 parent 90730f4 commit d0e0883
Show file tree
Hide file tree
Showing 5 changed files with 149 additions and 123 deletions.
0 ...torials/basic/build_polished_dashboard.md → doc/tutorials/basic/build_dashboard.md
View file
File renamed without changes.
248 changes: 125 additions & 123 deletions doc/tutorials/basic/index.md
View file
Original file line number Diff line number Diff line change
Expand Up @@ -2,17 +2,22 @@

These tutorials are for those who have decided they would like to start learning Panel systematically. For those that have not decided yet, we recommend doing the less comprehensive [Getting Started Guide](../../getting_started/index.md) instead.

Together, we will explore the world of (wind turbine) data and build a chat bot, a static report, a todo app, an image classifier app, a dashboard, and a streaming application.
Together, we will explore the world of (wind turbine) data and give you the skills to build a chat bot, a static report, a todo app, an image classifier app, a dashboard, and a streaming application. We will take you *from zero to hero*.

After completing these tutorials, we will be able to build a wide range of polished, single page apps from a single file using a *function-based approach*.
We will assume you have successfully been able to [install Panel](../../getting_started/installation.md) as described in the [Getting Started Guide](../../getting_started/index.md). If not, please reach out for help on [Discord](https://discord.gg/rb6gPXbdAr).

Please put on your safety helmet before entering the world of (wind turbine) data apps.

## Prerequisites
::::::{tab-set}

We assume you have successfully been able to [install Panel](../../getting_started/installation.md) as described in the [Getting Started Guide](../../getting_started/index.md). If not, please reach out for help on [Discord](https://discord.gg/rb6gPXbdAr).
:::::{tab-item} Skills
:sync: skills

## Start from Zero
The sections below will give you the skills to build *basic apps* from *single files* using a *function-based approach*.

Each section builds on the previous section.

## Part 1. Start from Zero

::::{grid} 1 2 2 3
:gutter: 1 1 1 2
Expand All @@ -24,53 +29,9 @@ We assume you have successfully been able to [install Panel](../../getting_start
Kickstart our journey by creating a *Hello World* app from a Python script, Notebook, or Markdown document.
:::

:::{grid-item-card} {octicon}`beaker;2.5em;sd-mr-1` Explore the Data
:link: explore_data
:link-type: doc

We will explore the wind turbine dataset and discover how Panel can power up our data exploration workflow.
:::

:::{grid-item-card} {octicon}`dependabot;2.5em;sd-mr-1` Build a Chat Bot
:link: build_chatbot
:link-type: doc

Develop a Streaming Wind Turbine Chat Bot that can handle many questions about wind turbines.
:::

::::

## Develop Seamlessly

These tutorials will *level up your Panel developer experience*. We can take them later if you want.

::::{grid} 1 2 2 3
:gutter: 1 1 1 2

:::{grid-item-card} {octicon}`note;2.5em;sd-mr-1` Develop in a Notebook
:link: develop_notebook
:link-type: doc

Discover tips and tricks that will make you *swift as the wind* at exploring turbine data and building wind turbine data apps in a notebook.
:::

:::{grid-item-card} {octicon}`code;2.5em;sd-mr-1` Develop in an Editor
:link: develop_editor
:link-type: doc

Discover tips and tricks that will increase your *developer capacity* from kilowatts to megawatts when developing in an editor!
:::

:::{grid-item-card} {octicon}`people;2.5em;sd-mr-1` Join the community
:link: join_community
:link-type: doc

Find inspiration in the community forums, ask for help, help others, share your work, report issues, and add feature requests.
:::

::::

## Display Content
## Part 2. Display Content

::::{grid} 1 2 2 3
:gutter: 1 1 1 2
Expand All @@ -96,27 +57,13 @@ Fine-tune how the wind turbine data is displayed with Panes, ensuring our data a
Show the performance of your wind turbines with Panel's Indicators.
:::

:::{grid-item-card} {octicon}`clock;2.5em;sd-mr-1` Build a Monitoring Dashboard
:link: build_monitoring_dashboard
:link-type: doc

Build a periodically refreshing dashboard to monitor your wind turbines.
:::

::::

## Organize Content
## Part 3. Organize Content

::::{grid} 1 2 2 3
:gutter: 1 1 1 2

:::{grid-item-card} {octicon}`zap;2.5em;sd-mr-1` Use Templates
:link: templates
:link-type: doc

Use pre-made templates to easily layout our apps with a header, sidebar, and main area.
:::

:::{grid-item-card} {octicon}`table;2.5em;sd-mr-1` Layout Content
:link: layouts
:link-type: doc
Expand All @@ -138,16 +85,7 @@ We will discover how sizing works in Panel, exploring the differences between in
We will align our wind turbine images perfectly using `align`, `margin` and `Spacer`s.
:::

:::{grid-item-card} {octicon}`file;2.5em;sd-mr-1` Build a Report
:link: build_report
:link-type: doc

Construct a static Wind Turbine Report, exportable to HTML for efficient distribution to management.
:::

::::

## Handle User Input
## Part 4. Handle User Input

::::{grid} 1 2 2 3
:gutter: 1 1 1 2
Expand All @@ -173,16 +111,30 @@ React to user input by leveraging `pn.bind`, enabling our users to foster a deep
Be able to build larger and more complex apps by defining and maintaining state via `pn.rx`.
:::

:::{grid-item-card} {octicon}`checklist;2.5em;sd-mr-1` Build a Todo App
:link: build_todo
::::

## Part 5. Improve the look

::::{grid} 1 2 2 3
:gutter: 1 1 1 2

:::{grid-item-card} {octicon}`zap;2.5em;sd-mr-1` Use Templates
:link: templates
:link-type: doc

Enable our wind turbine technicians to keep track of their tasks.
Use pre-made templates to easily layout our apps with a header, sidebar, and main area.
:::

:::{grid-item-card} {octicon}`zap;2.5em;sd-mr-1` Apply A Design
:link: design
:link-type: doc

Just as wind turbines come in various designs, this section empowers us to choose a design that best suits our app's style and functionality.
:::

::::

## Show Activity
## Part 6. Improve the Feel

::::{grid} 1 2 2 3
:gutter: 1 1 1 2
Expand All @@ -201,122 +153,172 @@ Show activity with indicators just as rotating blades show the activity of wind
Unleash the power of generators and reactive expressions in our Wind Turbine Apps!
:::

:::{grid-item-card} {octicon}`image;2.5em;sd-mr-1` Build an Image Classifier
:link: build_image_classifier
:::{grid-item-card} {octicon}`archive;2.5em;sd-mr-1` Add Caching
:link: caching
:link-type: doc

We will build an image classifier to identify wind turbine images.
Caching allows our apps to store and reuse valuable computations, reducing the energy required for calculations and making our apps run faster and smoother.
:::

::::

## Improve Performance
## Part 7. Share as a Hero

::::{grid} 1 2 2 3
:gutter: 1 1 1 2

:::{grid-item-card} {octicon}`archive;2.5em;sd-mr-1` Add Caching
:link: caching
:::{grid-item-card} {octicon}`globe;2.5em;sd-mr-1` Build a Dashboard
:link: build_dashboard
:link-type: doc

Caching allows our apps to store and reuse valuable computations, reducing the energy required for calculations and making our apps run faster and smoother.
Lets build that dashboard!
:::

:::{grid-item-card} {octicon}`globe;2.5em;sd-mr-1` Deploy a Dashboard
:link: deploy
:link-type: doc

Get your dashboard in the hands of your users. Let's deploy it to Hugging Face spaces together.
:::

::::

## Update Periodically
Congrats. You have now acquired the *basic* skills required to build a wide range of Panel apps. You are now a *Panel Hero*.

The recommend next steps are to check out the the *apps* on the *Apps* tab, check out the *topics* on the *Topics* tab and start using Panel for real.

When you are ready to acquire the skills to build larger and more complex apps then check out the [Intermediate Tutorials](../intermediate/index.md).

:::::

:::::{tab-item} Apps
:sync: apps

We should be able to build any of the apps below using the skills acquired on the *Skills* tab.

Pick an app!

::::{grid} 1 2 2 3
:gutter: 1 1 1 2

:::{grid-item-card} {octicon}`clock;2.5em;sd-mr-1` Build a Streaming Dashboard
:link: build_streaming_dashboard
:::{grid-item-card} {octicon}`clock;2.5em;sd-mr-1` Build a Monitoring Dashboard
:link: build_monitoring_dashboard
:link-type: doc

Build a live, updating dashboard to monitor your wind turbines.
Build a periodically refreshing dashboard to monitor your wind turbines.
:::

::::
:::{grid-item-card} {octicon}`file;2.5em;sd-mr-1` Build a Report
:link: build_report
:link-type: doc

## Style your App
Construct a static Wind Turbine Report, exportable to HTML for efficient distribution to management.
:::

::::{grid} 1 2 2 3
:gutter: 1 1 1 2
:::{grid-item-card} {octicon}`checklist;2.5em;sd-mr-1` Build a Todo App
:link: build_todo
:link-type: doc

:::{grid-item-card} {octicon}`zap;2.5em;sd-mr-1` Apply A Design
:link: design
Enable our wind turbine technicians to keep track of their tasks.
:::

:::{grid-item-card} {octicon}`image;2.5em;sd-mr-1` Build an Image Classifier
:link: build_image_classifier
:link-type: doc

Just as wind turbines come in various designs, this section empowers us to choose a design that best suits our app's style and functionality.
We will build an image classifier to identify wind turbine images.
:::

:::{grid-item-card} {octicon}`paintbrush;2.5em;sd-mr-1` Use Styles
:link: style
:::{grid-item-card} {octicon}`clock;2.5em;sd-mr-1` Build a Streaming Dashboard
:link: build_streaming_dashboard
:link-type: doc

Fine-tune the styling of our components with `styles` and `stylesheets`. This will ensure our wind turbine data apps are both aesthetically pleasing and user-friendly.
Build a live, updating dashboard to monitor your wind turbines.
:::

:::{grid-item-card} {octicon}`image;2.5em;sd-mr-1` Build a Polished Dashboard
:link: build_polished_dashboard
:::{grid-item-card} {octicon}`dependabot;2.5em;sd-mr-1` Build a Chat Bot
:link: build_chatbot
:link-type: doc

We'll guide you through advanced styling, layout optimization, and data visualization techniques to build a refined Wind Turbine Dashboard.
Develop a Streaming Wind Turbine Chat Bot that can handle many questions about wind turbines.
:::

::::

## Share as a Hero
:::::

:::::{tab-item} Topics
:sync: topics

Pick any topic below to supplement the *basic skills* you acquired on the *Skills* tab.

::::{grid} 1 2 2 3
:gutter: 1 1 1 2

:::{grid-item-card} {octicon}`globe;2.5em;sd-mr-1` Deploy an App
:link: deploy
:::{grid-item-card} {octicon}`beaker;2.5em;sd-mr-1` Data Exploration
:link: explore_data
:link-type: doc

Get your application in the hands of your users. Let's deploy it to Hugging Face spaces together.
We will explore the wind turbine dataset and discover how Panel can power up our data exploration workflow.
:::

::::
:::{grid-item-card} {octicon}`note;2.5em;sd-mr-1` Develop in a Notebook
:link: develop_notebook
:link-type: doc

---
Discover tips and tricks that will make you *swift as the wind* at exploring turbine data and building wind turbine data apps in a notebook.
:::

Congrats. You have now acquired the *basic* skills required to build a wide range of Panel apps. You are now a *Panel Hero*.
:::{grid-item-card} {octicon}`code;2.5em;sd-mr-1` Develop in an Editor
:link: develop_editor
:link-type: doc

Discover tips and tricks that will increase your *developer capacity* from kilowatts to megawatts when developing in an editor!
:::

:::{grid-item-card} {octicon}`people;2.5em;sd-mr-1` Join the community
:link: join_community
:link-type: doc

Find inspiration in the community forums, ask for help, help others, share your work, report issues, and add feature requests.
:::

::::

When you are ready to learn how to build larger and more complex apps then check out the [Intermediate Tutorials](../intermediate/index.md).
:::::

::::::

```{toctree}
:titlesonly:
:hidden:
:maxdepth: 2
serve
explore_data
build_chatbot
develop_notebook
develop_editor
join_community
pn_panel
panes
indicators_performance
build_monitoring_dashboard
templates
layouts
size
align
build_report
widgets
pn_bind
state
build_todo
indicators_activity
progressive_layouts
build_image_classifier
caching
build_streaming_dashboard
templates
design
style
build_dashboard
deploy
build_chatbot
build_monitoring_dashboard
build_report
build_todo
build_image_classifier
build_streaming_dashboard
explore_data
develop_notebook
develop_editor
join_community
```
3 changes: 3 additions & 0 deletions doc/tutorials/intermediate/build_polished_dashboard.md
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,3 @@
# Build Dashboard

COMING UP: Simplify dashboard from intermediate tutorials [Data Store Dashboard](../intermediate/structure_data_store.md).
Loading

0 comments on commit d0e0883

Please sign in to comment.