Dashboards Interativos com o Shiny

class: center, middle, inverse, title-slide

# Dashboards Interativos com o Shiny
## Primeiro dia
### Wesley Almeida
### EXATHO - Cursos
### 18 de Março

---

class: inverse, middle, center

# Bem vindos !

---
## O que veremos hoje?

- O que é o R

- Conceitos introdutórios sobre Desenvolvimento Web

- O pacote Shiny

- O pacote ShinyDashboard

---
class: inverse, center
background-image: url(https://developer.sas.com/guides/r/_jcr_content/par/styledcontainer_1d31/par/image.img.png/1573909821824.png)

# O R nosso de cada dia
---

## O que exatamente é o R?

**R** é uma linguagem de programação de código aberto para computação estatística e gráfica. Amplamente usada no ambiente acadêmico e corporativo

### Um pouco de história

- A linguagem R foi inicialmente escrita por Robert Gentleman and Ross Ihaka da Universidade de Auckland e expandida por um grupo de 20 pessoas conhecidas como **R Core Team**;

- Existia uma linguagem anterior ao R, com o nome de S e pode ser considerada a primeira implementação do R;

- O R existe a 26 anos e é composto por mais de 800,000 linhas de código escritas em C, Fortran e o próprio R.

---

## O dilema da Performance

.pull-left[

### Vantagens
- **Dinâmismo Extremo**;

- Pesquisa por nome da variável;

- Avaliação preguiçosa (Lazy evaluation).
]

.pull-right[

### Desvantagens
- **Dinâmismo Extremo**;

- Pesquisa por nome da variável;

- Avaliação preguiçosa (Lazy evaluation).
]

A linguagem R foi planejada para que usuários possam conduzir análises estatísticas com o mínimo de conhecimento sobre programação, portanto, a linguagem foi feita para ser mais dinâmica e *user-friendly* possível.

Eu recomendo a leitura de **Advanced R by Hadley Wickham** se você tiver interesse em saber mais sobre o R e a sua performance.
---

### Mas por que usar o R então?
---

background-image: url(https://s3.amazonaws.com/assets.datacamp.com/blog_assets/R+Packages+Guide/content_rdoc10.png)

### Mas por que usar o R então?

---

class: inverse, center
background-image: url(https://pub-static.haozhaopian.net/assets/stickers/5601/ea1d9223-5f3c-4d96-b47d-d419eeda554e_medium_thumb.jpg)

# Desenvolvimento Web

---

## Desenvolvimento Web

Toda aplicação web moderna se baseia em dois príncipios: **Front End** e **Back End**.

Analogamente ao corpo humano o *Back End* seria equivalente ao esqueleto, tecidos, musculos, etc. E o *Front End* seria nossa pele e as características fenotípicas de cada um.

- No *Back End* criamos a estrutura lógica da aplicação: Como ela irá se comunicar com servidores externos, como ela irá utilizar os dados, que tipo de cálculos faremos, etc;

- Já no *Front End* nossa preocupação é mais estética, por exemplo: O que iremos mostrar para o usuário, como iremos mostrar, o que vamos esconder, etc.

---

## As linguagens mais famosas

.pull-left[

### Front End
- **HTML**: Usada para criar a estrutura primária de uma aplicação;

- **CSS**: Torna a estrutura primária mais elegante;

- **JavaScript**: Pode interagir com HTML e CSS e atualizá-los.
]

.pull-right[

### Back End
- **SQL** ou **NoSQL**: Linguagens utilizada para manipular dados;

- **PHP** ou **Node.js**: Linguagens que criam conexões entre servidores e o código fonte;

- **Python**, **C++**, **Java** ou **R**: Linguagens de propósitos gerais.
]
 
class: inverse, center
background-image: url(https://d33wubrfki0l68.cloudfront.net/8f68bc526580587d60714f9279fbe9d86b25362a/79958/assets/img/shiny.png)

---

## Shiny (Não é um Pokemon)

De acordo com a página principal do Rstudio sobre o Shiny:

*Shiny é um pacote do R que facilita a criação de aplicativos da Web interativos diretamente do R. Você pode hospedar aplicativos independentes em uma página da Web ou incorporá-los aos documentos do R Markdown ou criar Dashboards. Você também pode estender seus aplicativos Shiny com temas CSS, widgets html e comandos com JavaScript.*

Portanto, o **Shiny** é um pacote que permite a criação de aplicativos Web a partir da sintaxe base do R. Com o Pacote Shiny podemos fazer:

- Ambos o *Back End* e o *Front End* de um aplicativo;

- Interagir com linguagens externas ao R, como o CSS, HTML e JavaScript;

- **Hospedar um aplicativo Shiny na nuvem.**

Tudo isso usando os pacotes suportados pelo Shiny (criados a partir da versão 3.0.2 do R).

---

## Shiny

A estrutura de um aplicativo Shiny se baseia em duas (três) partições:

- **UI** (*User Interface*): A UI é responsável pela **aparência do aplicativos** e pela **interação com o usuário**, lá iremos declarar objetos que podem ser controlados externamentes e que servirão de gatilho para a reatividade no código;

- **Server**: No *Server* acontecerá a **reatividade** de fato, essa partição é dependente das escolhas usuário;

- **Global**: **Essa partição opcional existe para melhorar a aparência do código e para impedir repetições de comandos de forma desnecessária.**

---
class: center
background-image: url(https://rstudio.github.io/shiny/tutorial/screenshots/mpg-with-outputs.png)

### Estrutura de um Shiny

---

## Estrutura da UI

Na Interface do usuário devemos ter no mínimo:

```r
library(shiny)

# Definindo um UI genérica
shinyUI(
  # Definindo uma página com uma barra lateral
  pageWithSidebar(

# Título
    headerPanel("Título"),
    
    # Barra lateral
    sidebarPanel(),
    
    # Corpo do aplicativo
    mainPanel()
))
```

- **headerPanel**: refere ao painel que contém o título;

- **sidebarPanel**: O painel que geralmente iremos colocar os *inputs* do aplicativo;

- **mainPanel**: Será o espaço em que mostraremos gráficos, tabelas, textos (reativos).

---

## *Inputs* e *Outputs* da UI

```r
library(shiny)

# Definindo um UI genérica
shinyUI(
  # Definindo uma página com uma barra lateral
  pageWithSidebar(

# Título
    headerPanel("Milhas por galão"),
    
    # Barra lateral
    sidebarPanel(
      # Escolhe entre cyl, am e gear
      selectInput("var", "Variável:",
                list("Cilindros" = "cyl", 
                     "Transmissão" = "am", 
                     "Engrenagens" = "gear")),
      # Mostrar outliers (default = FALSE)
      checkboxInput("outliers", "Mostrar outliers", FALSE)
    ),
    
    # Corpo do aplicativo
    mainPanel(
      # Um objeto do tipo subtítulo (h3) incorporando um output de texto
      h3(textOutput("formula")),
      # Um output de gráfico
      plotOutput("mpgPlot"))
    )
)
```

---

## Estrutura do Server

```r
library(shiny)

# Definindo o servidor
shinyServer(function(input, output) {

})
```

---

## Server *Outputs*

```r
library(shiny)
library(datasets)

# Alterando os fatores da variável am para melhor visualização
mpgData <- mtcars
mpgData$am <- factor(mpgData$am, labels = c("Automatico", "Manual"))

# Definindo o servidor
shinyServer(function(input, output) {

# Cria um texto com uma formula (mpg ~ variável)
 # de forma dependente do input var
 formulaText <- reactive({
 paste("mpg ~", input$var)
 })

# Retorna o texto reativo para mostrarmos na forma de um print
 output$formula <- renderText({
 formulaText()
 })

# Gera um gráfico da variável escolhida pela variável mpg 
 # e só inclui outliers se requisitado
 output$mpgPlot <- renderPlot({
 boxplot(as.formula(formulaText()), 
 data = mpgData,
 outline = input$outliers)
 })
})
```

---

## Tipos de *Inputs* e *Outputs* mais comuns

.pull-left[

### *Input*

- checkboxGroupInput
- dateRangeInput
- checkboxInput
- actionButton
- numericInput
- radioButtons
- submitButton
- selectInput
- sliderInput
- dateInput
- fileInput
- textInput
- helpText

]

.pull-right[

### *Outputs* e *Renders*

.pull-left[
- dataTableOutput	
- imageOutput	
- tableOutput	
- htmlOutput	
- plotOutput	
- textOutput	
- uiOutput	
]

.pull-right[
- renderDataTable
- renderPrint
- renderTable
- renderImage
- renderPlot
- renderText
- renderUI
]
]

---

## Reatividade e seu papel no Shiny

Podemos dividir objetos de três formas no Shiny:

- **Objetos Reativos**: São valores ou expressões que estão dentro e dependem de um contexto reativo (São usados por meio das funções Reactive(), ReactiveVal(), ReactiveValues(), entre outros);

- **Objetos Isolados**: São valores ou expressões que estão dentro, porém, não dependem de um contexto reativo (Podem ser usados com a função Isolate());

- **Objetos Observadores**: São valores ou expressões dependem de um valor reativo para gerar um ambiente reativo ou não.

---

## ShinyDashboard

O pacote ShinyDashboard estende as funcionalidades de um aplicativo Shiny convêncional, de forma que seja prezada a elegância da *User Interface*.

De forma análoga ao Shiny, temos três seções para a UI:

- dashboardHeader
- dashboardSidebar
- dashboardBody

Um exemplo mínimo:

```r
library(shinydashboard)

dashboardPage(
  dashboardHeader(),
  dashboardSidebar(),
  dashboardBody()
)
```

**No SERVER não há alterações**

---

## ShinyDashboard

Nas seções *DashboardSidebar* e *DashboardBody* podemos encontrar três estruturas que não existem no Shiny:

- **menuItem**: São ambientes que contém um *input*(e o seu id) e o personaliza conforme a necessidade do usuário;

- **tabItems** e **tabItem**: Utilizam o id de um menuItem para criar alguma lógica de display;

- **fluidRow**: Um comando que ajusta automaticamente os elementos de acordo com o tamanho da tela.

---

## ShinyDashboard UI

```r
library(shiny)
library(shinydashboard)

dashboardPage(
dashboardHeader(title = "Dashboard Básico"),
dashboardSidebar(
    sidebarMenu(
      menuItem("Dashboard", tabName = "dashboard", icon = icon("dashboard")),
      menuItem("Widgets", tabName = "widgets", icon = icon("th"))
    )
  ),
dashboardBody(
    tabItems(
      tabItem(tabName = "dashboard",
        fluidRow(
          box(plotOutput("plot1", height = 250)),

box(
            title = "Selecione uma observação",
            sliderInput("slider", "Number of observations:", 1, 100, 50)
          )
        )
      ),

# Second tab content
      tabItem(tabName = "widgets",
        h2("Um texto qualquer")
      )
    )
  )
)
```

---