class: center, middle, inverse, title-slide # How to Shiny? 🤩 ## Sister Analyst ### Tatjana, Katica, Jovana & Tijana ### November 2019 --- class: inverse, center, middle #Get Started 🤫😴 <img src=https://media.giphy.com/media/mMSE6MfkXzLLa/giphy.gif align="middle" img width="90%"> --- ## What is Shiny App? [**Shiny**](https://shiny.rstudio.com) is a package from [RStudio](https://rstudio.com) that can be used to build interactive web apps with [R](https://r-project.org). You can host standalone apps on a webpage or embed them in [R Markdown](https://rmarkdown.rstudio.com/index.html) documents or build [dashboards](http://rstudio.github.io/shinydashboard/). You can also extend your Shiny apps with CSS themes, htmlwidgets, and JavaScript actions. 🤓😎🤩 Shiny combines the computational power of R with the interactivity of the modern web. 💪 Shiny apps are easy to write. No web development skills are required. 😅 --- class: inverse, center, middle #Let's Shiny with R ## 🌞😎🤩 We are going to assume you are already familiar with and have done: ✅ Chapter 6: [Install or upgrade R and RStudio](https://happygitwithr.com/install-r-rstudio.html) If you haven't you should download and install: 1) R from <https://cran.r-project.org> and then 2) [RStudio](https://rstudio.com/products/rstudio/download/) --- ## Start building your 1st Shiny App Open RStudio and install the `Shiny` package by executing the following comand in the R console pane: `install.packages("shiny")` or by going to `Tools | Install Packages...` and asking for `shiny` <img src="images/install_shiny.png" width="300px" style="display: block; margin: auto;" /> --- ## Download the workshop material To download workshop's material please go to: <https://github.com/SisterAnalyst/Learn2Shiny> <img src="images/GitHub_Shiny_Material.png" width="700px" style="display: block; margin: auto;" /> --- ## Start a new Shiny projecy Select `File | New Project...` from the main menue. From dialog window click on `New Directory | Shiny Web Application` to `Create New Project`. <img src="images/Shiny_Example1.png" width="350px" style="display: block; margin: auto;" /> --- ##How does it work? <img src="images/Shiny1.png" width="700px" style="display: block; margin: auto;" /> --- ##There are two elements <img src="images/Shiny2.png" width="700px" style="display: block; margin: auto;" /> --- ##App Template <img src="images/Shiny3.png" width="700px" style="display: block; margin: auto;" /> --- ##Run & Stop <img src="images/Shiny4.png" width="700px" style="display: block; margin: auto;" /> --- ##Adding elements ### as arguments to `fluidPage()` <img src="images/Shiny4.1.png" width="700px" style="display: block; margin: auto;" /> --- ##UI: Inputs & Outputs <img src="images/Shiny5.png" width="700px" style="display: block; margin: auto;" /> --- ##Adding elements *as arguments to `fluidPage()`* <img src="images/Shiny5.1.png" width="400px" style="display: block; margin: auto;" /> ###Create an input with an input function <img src="images/Shiny5.2.png" width="700px" style="display: block; margin: auto;" /> --- ###Create an input with an input function .pull-left[ **code** <img src="images/Shiny5.3.1.png" width="700px" style="display: block; margin: auto;" /> ] .pull-right[ **app** <img src="images/Shiny5.3.2.png" width="900px" style="display: block; margin: auto;" /> ] --- ##Input Objects <img src="images/Shiny6.png" width="700px" style="display: block; margin: auto;" /> --- ##Syntax <img src="images/Shiny7.png" width="1000px" style="display: block; margin: auto;" /> <https://shiny.rstudio.com/reference/shiny/latest/selectInput.html> --- ##Output Objects <img src="images/Shiny8.png" width="1000px" style="display: block; margin: auto;" /> --- ###Output: plot <img src="images/Shiny10.png" width="600px" style="display: block; margin: auto;" /> --- ###Remember 💡 <img src="images/Shiny11.png" width="700px" style="display: block; margin: auto;" /> --- ###<span style="color:red">3 Rules</span> to write the server function 😎 <img src="images/Shiny12.png" width="750px" style="display: block; margin: auto;" /> --- ###You can <span style="color:red">render*()</span> different types of output you wish to make. <img src="images/Shiny13.png" width="750px" style="display: block; margin: auto;" /> --- ###<span style="color:red">render*()</span> <img src="images/Shiny14.png" width="750px" style="display: block; margin: auto;" /> --- <img src="images/Shiny14.1.png" width="700px" style="display: block; margin: auto;" /> --- ###Code <img src="images/Shiny15.png" width="500px" style="display: block; margin: auto;" /> --- ###The App <img src="images/Shiny16.png" width="700px" style="display: block; margin: auto;" /> <https://datateka.shinyapps.io/How2Shine/> --- class: inverse, center, middle #Let's Look at the portal: #[Open Data SR](https://data.gov.rs/sr/datasets/) ## 📑📊📈📉 --- class: inverse, middle #Example: [Подаци о саобраћајним незгодама за територију Града Београда](https://data.gov.rs/sr/datasets/podatsi-o-saobratshajnim-nezgodama-za-teritoriju-grada-beograda/) ##[Подаци о саобраћајним незгодама до 28.02.2019. године за територију Града Београда](https://data.gov.rs/sr/datasets/r/7a10c1d4-3707-4c5a-93ca-b8e7baf77303) ### Note 💡: You should open and `File -> Save As...` data as a `csv` file! --- class: inverse, center, middle # Access the RProject with the App Go to Tanja's GitHub and download `OpenDataPlay` repo by clicking on the green button `Clone or Download::Download ZIP`. <https://github.com/TanjaKec/OpenDataPlay> <img src="images/GitHub1.png" width="500px" style="display: block; margin: auto;" /> --- # What is in the repo? After unzipping the downloaded file you should have the following in your directory, ie folder: <img src="images/GitHub2.png" width="600px" style="display: block; margin: auto;" /> --- # How does it look like? - How many Input and Output Objects are there? - What does it do? <img src="images/TrafficAccApp.png" width="700px" style="display: block; margin: auto;" /> --- # Let's open the app code Open the project with the App by clicking on `OpenDataPlay.Rproj` file. In the bottom left window click on `app.R` file. <img src="images/Shiny17.png" width="700px" style="display: block; margin: auto;" /> --- # app.R The code has two parts: 1) **global code** - uploading the packages; accessing and tailoring data 2) **app code** - remember the app templete!🤔💡: user interface -> server -> running the app We can see the app in action ☀️😎 at <https://tatjana.shinyapps.io/TrafficAccidents/> --- class: inverse, center, middle ##Do the Cosmo Dance?! 🤪🎵🎶 <img src="images/Cosmo_Dance.gif" width="500px" /> --- class: center, inverse, middle ##Thanks! To Yihui (ninja warrior) and RStudio for the [RMarkdown](https://bookdown.org/yihui/rmarkdown/) package::[xaringan](https://bookdown.org/yihui/rmarkdown/xaringan.html) package <img src="images/yuhui_xie.png" width="100px" style="display: block; margin: auto;" /> [www.sisteranalyst.org](https://sisteranalyst.org/) @sisteranalyst @Tatjana_Kec @KaticaR1 @JovanaSavic2 @tikiblagojev Slides created via `R` package [**xaringan**](https://github.com/yihui/xaringan). The chakra comes from [remark.js](https://remarkjs.com), [**knitr**](http://yihui.name/knitr), and [R Markdown](https://rmarkdown.rstudio.com).