class: center, middle, inverse, title-slide # Interactive web apps ## <br><br> College of the Atlantic ### --- ## Shiny .pull-left[ - Shiny is an R package that makes it easy to build interactive web apps straight from R - You can host standalone apps on a webpage or embed them in R Markdown documents or build dashboards - You can also extend your Shiny apps with CSS themes, htmlwidgets, and JavaScript actions - Learn more at [shiny.rstudio.com](https://shiny.rstudio.com/) ] .pull-right[ <img src="img/shiny.png" width="60%" style="display: block; margin: auto auto auto 0;" /> ] --- ## High level view - Every Shiny app has a webpage that the user visits, and behind this webpage there is a computer that serves this webpage by running R - When running your app locally, the computer serving your app is your computer - When your app is deployed, the computer serving your app is a web server --- .center[ [laurie-the-student-baker.shinyapps.io/NeCSA_Temperature_Outliers/](https://laurie-the-student-baker.shinyapps.io/NeCSA_Temperature_Outliers/) ] .center[ <iframe width="1000" height="500" src="https://laurie-the-student-baker.shinyapps.io/NeCSA_Temperature_Outliers/" frameborder="0" allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe> ] Credit: Created by students in [Community-Engaged Data Science](https://community-engaged-data-science.netlify.app/) at Bates. --- .center[ [laurie-the-student-baker.shinyapps.io/NeCSA_Temperature_Outliers/](https://laurie-the-student-baker.shinyapps.io/NeCSA_Temperature_Outliers/) ] .center[ <iframe width="1000" height="500" src="https://laurie-the-student-baker.shinyapps.io/NeCSA_Temperature_Outliers/" frameborder="0" allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe> ] What does the app do? --- class: middle # Anatomy of a Shiny app --- ## What's in a Shiny app .pull-left[ ```r library(shiny) ui <- fluidPage() server <- function(input, output){} shinyApp(ui = ui, server = server) ``` ] .pull-right[ - **User interface (ui)** controls the layout and appearance of the app. - **Server function (server)** contains instructions needed to build the app ] --- ## Inputs - To make the app interactive, you need an **input** that the user can change - Shiny includes a selection of functions for this called **widgets**. .center[ [https://shiny.rstudio.com/gallery/widget-gallery.html](https://shiny.rstudio.com/gallery/widget-gallery.html) ] .center[ <iframe width="1000" height="500" src="https://shiny.rstudio.com/gallery/widget-gallery.html" frameborder="0" allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe> ] --- ## Inputs - Inputs are used in the **ui** to set the options for the user to interact with. <div id="htmlwidget-27424792bc78c3775352" style="width:100%;height:auto;" class="datatables html-widget"></div> <script type="application/json" data-for="htmlwidget-27424792bc78c3775352">{"x":{"filter":"none","vertical":false,"data":[["1","2","3","4","5","6","7","8","9","10"],["actionButton()","checkboxInput()","checkboxGroupInput()","dateInput()","dateRangeInput()","numericInput()","radioButtons()","selectInput()","sliderInput()","textInput()"],["a button click input","a single checkbox","a set of checkboxes where multiple can be selected","a calendar for date selection","a pair of calendars for start and end date selection","a free-text for numbers","a set of buttons where only 1 can be selected","a dropdown menu","a slider bar","a free-text for letters/words"]],"container":"<table class=\"display\">\n <thead>\n <tr>\n <th> <\/th>\n <th>Name<\/th>\n <th>Description<\/th>\n <\/tr>\n <\/thead>\n<\/table>","options":{"pageLength":5,"order":[],"autoWidth":false,"orderClasses":false,"columnDefs":[{"orderable":false,"targets":0}],"lengthMenu":[5,10,25,50,100]}},"evals":[],"jsHooks":[]}</script> --- ## Outputs - An **output** is required to show the user the effects of their **input** - ``render()`` is used in the **server** to generate the output - ``output()`` is used in the **ui** to display the output to the user <div id="htmlwidget-f9c65f1018a28164aeae" style="width:100%;height:auto;" class="datatables html-widget"></div> <script type="application/json" data-for="htmlwidget-f9c65f1018a28164aeae">{"x":{"filter":"none","vertical":false,"data":[["1","2","3","4","5","6","7"],["renderImage()","renderPlot()","renderPrint()","renderTable()","DT::renderDataTable()","renderText()","rendeerUI()"],["imageOutput()","plotOutput()","verbatimTextOutput()","tableOutput()","dataTableOutput()","textOutput()","uiOutput() or htmlOutput()"],["an image","a plot/map","any printed output formatted as code","a table","an interactable table","any character string formatted to match app","any character string formatted with raw HTML code"]],"container":"<table class=\"display\">\n <thead>\n <tr>\n <th> <\/th>\n <th>render<\/th>\n <th>output<\/th>\n <th>Produces<\/th>\n <\/tr>\n <\/thead>\n<\/table>","options":{"pageLength":5,"order":[],"autoWidth":false,"orderClasses":false,"columnDefs":[{"orderable":false,"targets":0}],"lengthMenu":[5,10,25,50,100]}},"evals":[],"jsHooks":[]}</script> --- ## The User Interface (ui) - Spot the 4 widgets that allow the user to interact with the app. What do they do? .center[ <iframe width="1000" height="450" src="https://laurie-the-student-baker.shinyapps.io/NeCSA_Temperature_Outliers/" frameborder="0" allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe> ] --- ## Parts of the user interface - The user interface is divided into 3 parts: a title panel, a main panel, and a side bar panel. - When you construct the user interface you can choose your layout. <img src="img/parts_shiny_app.jpg" width="60%" style="display: block; margin: auto;" /> --- class: middle # Let's Play!