diff --git a/doc/tutorials/basic/build_polished_dashboard.md b/doc/tutorials/basic/build_dashboard.md similarity index 100% rename from doc/tutorials/basic/build_polished_dashboard.md rename to doc/tutorials/basic/build_dashboard.md diff --git a/doc/tutorials/basic/index.md b/doc/tutorials/basic/index.md index 004e371326..ef9c097bb0 100644 --- a/doc/tutorials/basic/index.md +++ b/doc/tutorials/basic/index.md @@ -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 @@ -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 @@ -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 @@ -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 @@ -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 @@ -201,90 +153,141 @@ 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: @@ -292,31 +295,30 @@ When you are ready to learn how to build larger and more complex apps then check :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 ``` diff --git a/doc/tutorials/intermediate/build_polished_dashboard.md b/doc/tutorials/intermediate/build_polished_dashboard.md new file mode 100644 index 0000000000..c079a36461 --- /dev/null +++ b/doc/tutorials/intermediate/build_polished_dashboard.md @@ -0,0 +1,3 @@ +# Build Dashboard + +COMING UP: Simplify dashboard from intermediate tutorials [Data Store Dashboard](../intermediate/structure_data_store.md). diff --git a/doc/tutorials/intermediate/index.md b/doc/tutorials/intermediate/index.md index df1ff6d953..590267b047 100644 --- a/doc/tutorials/intermediate/index.md +++ b/doc/tutorials/intermediate/index.md @@ -73,6 +73,27 @@ Elevate our app's functionality by accepting user input from plots. :::: +## Improve the look + +::::{grid} 1 2 2 3 +:gutter: 1 1 1 2 + +:::{grid-item-card} {octicon}`paintbrush;2.5em;sd-mr-1` Use Styles +:link: style +: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. +::: + +:::{grid-item-card} {octicon}`image;2.5em;sd-mr-1` Build a Polished Dashboard +:link: build_polished_dashboard +:link-type: doc + +We'll guide you through advanced styling, layout optimization, and data visualization techniques to build a refined Wind Turbine Dashboard. +::: + +:::: + ## Structure Applications ::::{grid} 1 2 2 3 diff --git a/doc/tutorials/basic/style.md b/doc/tutorials/intermediate/style.md similarity index 100% rename from doc/tutorials/basic/style.md rename to doc/tutorials/intermediate/style.md