Construindo o meu primeiro Shiny App -Pokémon-

4 min readMar 29, 2021

Seja a equipe Rocket e decole seu Shiny App na velocidade da luz.

Foto: https://unsplash.com/photos/dip9IIwUK6w

Ser um mestre Pokémon, colecionar insignias, derrotar a equipe Rocket e ir para a liga Johto. Saudades né, minha filha?

Eu e minha irmã adorávamos assistir Pokémon quando éramos mais novas — e até hoje rsrs. Este desenho marcou bastante a minha infância, eu adorava assistir e ficar horas jogando.

Se você já leu algum post meu, então deve saber que eu ando aprendendo bastante coisa nova ultimamente. Eu queria MUITO aprender Shiny, daí eu pensei “por que não juntar R + Pokémon”. Eu acho que deu uma bela dupla!

Bom, eu sabia nem por onde começar... Pensei em pedir ajuda para os meus amigos (tenho um amigo que é o próprio Shiny boy) ou me virar. Eu preferi aprender na marra. Obrigada, Google, YouTube e Stack Overflow — a Loli ama vocês 💟.

Antes de mais nada você pode estar pensando “Caroline Attilio, o que é Shiny? TRADUZ! AMADA, eu sou da sua área não!”

O que é o Shiny?

O Shiny é um sistema para desenvolvimento de aplicações web usando o R, um pacote do R (shiny) e um servidor web (shiny server). Ou seja, ele não é uma página web.

Estrutura

Sua estrutura está dividida basicamente em duas partes: interface do aplicativo (ui.R) e a lógica (server.R). Também é possível juntar tudo num único arquivo (app.R).

Observação: caso você construa uma Shiny muito robusto, é melhor fazer separado (usando o ui.R e server.R), ao invés de usar o app.R . No meu caso, ele ainda não está nesse nível, daí eu deixei tudo junto mesmo.

Esta é a estrutura básica (tem mais básicas mas a saída é uma tela em branco, então eu preferi o do exemplo abaixo para ficar mais claro o que é) do shiny:

library(shiny)
library(shinydashboard)dashboardPage(
  dashboardHeader(),
  dashboardSidebar(),
  dashboardBody()
)ui <- dashboardPage(
  dashboardHeader(),
  dashboardSidebar(),
  dashboardBody()
)
server <- function(input, output) { 
}shinyApp(ui, server)

E a saída dele é isso aqui:

Como fas\\ 🙆‍♀️👀

Dados 🎲

Usei esse csv totalmente gratuito.

Código 🎯

Vou comentar os pontos mais importantes do código. Para ter acesso o código inteiro basta acessar o meu GitHub.

Criando o meu próprio tema

Resolvi criar um tema para deixar as cores da aplicação diferentes. Amigos designers que estão lendo este post :::: prometo melhorar!

tema_pokemon <- create_theme(
  adminlte_color(
    red = "#f01616",
    light_blue = '#233675'
  ),
  adminlte_sidebar(
    dark_bg = '#233675'
  )
)

2. UI

Aqui está toda a minha user interface

ui <- fluidPage(dashboardPage(
  dashboardHeader(title = "Pokémon"),
  dashboardSidebar(
    selectInput("selPokemon",
                "Nome do Pokémon",
                c("Todos",
                  pokemon)),
    selectInput("selTipo",
                "Tipo do Pokémon",
                c("Todos",
                  tipo)),
    selectInput("selGeracao",
                "Geração do Pokémon",
                c("Todos",
                  geracao)),
    downloadButton("downloadCsv", "Download", style = "color: #fff; background-color: #27ae60; border-color: #fff; display:inline-block;margin-left: 22%")
  ),
  dashboardBody(
    use_theme(tema_pokemon),
    fluidRow(
      valueBoxOutput("Pokemon"),
      valueBoxOutput("Tipos"),
      valueBoxOutput("Geracao")  
    ),
    fluidRow(
      box(title = "Tabela - Pokémon", status = "primary", 
          solidHeader = TRUE, width = 12, 
          DT::DTOutput("tabelapokemon")))
    )
  )
)

O que está dentro do quadrado amarelo a esquerda é o código, e ao lado direito, é como ele aparece quando acessamos a aplicação. Cada selectInput é uma caixinha de seleção. Ou seja, é ali que vamos filtrar de acordo com o nome do pokémon, seu tipo ou sua geração.

3. Server

server <-function(input, output) {
  
  ### Total de Pokemons
  output$Pokemon <- renderValueBox({
    valueBox(
      value = format(totalPokemon),
      subtitle = "Pokémons",
      color = "red" 
    )
  })
  
  #### Total de Tipos
  output$Tipos <- renderValueBox({
    valueBox(
      value = format(totalTipos),
      subtitle = "Tipos",
      color = "red" 
    )
  })
  
  #### Total de Gerações
  output$Geracao <- renderValueBox({
    valueBox(
      value = format(totalGeracao),
      subtitle = "Gerações",
      color = "red" 
    )
  })
  
  ### Tabela Pokémon
  output$tabelapokemon <- DT::renderDataTable(DT::datatable({
    data <- df
    if (input$selPokemon != "Todos") {
      data <- data[data$Name == input$selPokemon,]
    }
    if (input$selTipo != "Todos") {
      data <- data[data$Type.1 == input$selTipo,]
    }
    if (input$selGeracao != "Todos") {
      data <- data[data$Generation == input$selGeracao,]
    }
    data
  }))
  
  # Download csv
  output$downloadCsv <- downloadHandler(
    filename = "dados_pokemon.csv",
    content = function(file) {
      write.csv(df, file)
    },
    contentType = "text/csv"
  )
}

Essa parte do server que é responsável por filtrar o dataframe quando selecionamos um pokémon pelo seu nome, tipo ou geração. Este trecho está me dizendo o seguinte: se a minha seleção for diferente de ‘Todos’, filtre o que eu escolhi, caso eu tenha feito nenhum filtro então apareça todos os meus dados.