colocando exercicios

add-interatividade.qmd

@@ -138,7 +138,7 @@ input$variavel <- 10
 #> Error in : Can't modify read-only reactive value 'variavel
 ```
 
-O widget `selectInput()` envia ao servidor uma string com o valor escolhido na caixa de seleção. Por isso utilizamos o operador `[[` para fazer a seleção da variável. Quando o app é inicado, por exemplo, `input$variavel` recebe o valor `"mpg"` e, por consequência, `mtcars[[input$variavel]]` será igual a  `mtcars[["mpg"]]`, que retorna um vetor com os valores da coluna `mpg` e será utilizado pela função `hist()` para gerar o gráfico.
+O widget `selectInput()` envia ao servidor uma string com o valor escolhido na caixa de seleção. Por isso utilizamos o operador `[[` para fazer a seleção da variável. Quando o app é iniciado, por exemplo, `input$variavel` recebe o valor `"mpg"` e, por consequência, `mtcars[[input$variavel]]` será igual a  `mtcars[["mpg"]]`, que retorna um vetor com os valores da coluna `mpg` e será utilizado pela função `hist()` para gerar o gráfico.
 
 ```{r}
 mtcars[["mpg"]]
@@ -192,46 +192,51 @@ Repare pelas mensagens no Console^[Essas mensagens são geradas pelas funções
 
 1 - No contexto do Shiny, o que são inputs? E outputs?
 
+___
+
 2 - Como fazemos para acessar os valores dos inptus dentro da função `server`?
 
+___
+
 3 - Qual a função da família de funções `*Output()`? Onde essas funções são utilizadas?
 
+___
+
 4 - Qual a função da família de funções `render*()`? Onde essas funções são utilizadas?
 
+___
+
 5 - Faça um shiny app para visualizar histogramas da base `ggplot2::diamonds`
 e o coloque no shinyapps.io.
 
 Seu shiny deve ter um input e um output.
 
-- Input: variáveis numéricas da base diamonds.
+- Input: variáveis numéricas da base `diamonds`.
 - Output: histograma da variável selecionada.
 
-Para acessar a base diamonds, carrrege o pacote ggplot2
+Para acessar a base `diamonds`, carregue o pacote `ggplot2`
 
 ```{r, eval = FALSE}
 library(ggplto2)
+diamonds
 
-ou rode
+# ou rode
 
 ggplot2::diamonds
 ```
 
-6 - Faça um Shiny app para explorar a base de filmes da Pixar.
+___
+
+6 - Reproduza [este Shiny app](https://cursodashboards.shinyapps.io/select-date/). 
+
+Para acessar a base utilizada, rode o código abaixo:
 
 ```{r, eval = FALSE}
-# Instale o pacote com a versão orinal da base (em inglês)
-install.packages("pixarfilms")
+# Pacote com versão original da base (em inglês)
+install.packages("nycflights13")
+nycflights13::flights
 
-# Instale pacote com versão em português da base
+# Pacote com versão em português da base
 install.packages("dados")
+dados::voos
 ```
-
-Sugestões:
-
-- **Input**: data de lançamento. **Output**: tabela de filmes.
-
-- **Input**: filme. **Outputs**: orçamento, bilheteria, gênero, prêmios e notas.
-
-- **Input**: caixa de texto para escrever um nome. **Outputs**: tabela com filmes que essa pessoa participou e qual papel ela exerceu no filme (direção, roteiro, produção etc)
-
-**Dica**: você precisará fazer join das bases do pacote para juntar as informações.

debug.qmd

@@ -120,3 +120,57 @@ output$plot <- renderPlot({
 ```
 
 Para sair do `browser` e voltar à execução do app, basta clicar no botão `Continue`, no topo do Console. Clicando no botão `Stop`, tanto o `browser` quanto a execução do app serão finalizadas. Após encontrar e solucionar o problema, não se esqueça de remover a função `browser()` do seu código.
+
+## Exercícios
+
+1 - Por que, em geral, não conseguimos rodar diretamente o código escrito na função `server`?
+
+___
+
+2 - Para que serve a função `browser()`?
+
+___
+
+3 - Debug e arrume o código do app a seguir:
+
+```{r, eval = FALSE}
+library(shiny)
+
+ui <- fluidPage(
+  "Sorteio de números de 1 a 10",
+  sliderInput(
+    inputId = "tamanho",
+    label = "Selecione o tamanho da amostra",
+    min = 1,
+    max = 1000,
+    value = 5
+  ),
+  actionButton("sortear", "Sortear"),
+  plotOutput(outputId = "grafico"),
+  "Tabela de frequências"
+  tableOutput(outputId = "tabela")
+)
+
+server <- function(input, output, session) {
+  
+  amostra <- reactive({
+    sample(1:10, input$tamanho)
+  })
+  
+  output$plot <- renderPlot({
+    amostra |> 
+      table() |> 
+      barplot()
+  })
+  
+  output$tabela <- renderPlot({
+    data.frame(
+      numeros = amostra()
+    ) |> 
+      dplyr::count(numeros)
+  })
+  
+}
+
+shinyApp(ui, server)
+```

deploy.qmd

@@ -14,15 +14,15 @@ Não falaremos neste livro sobre a utilização de computação em nuvem pois ex
 
 O [ShinyApps.io](https://www.shinyapps.io/) é um serviço da [RStudio](https://rstudio.com/) para hospedagem de aplicativos Shiny.
 
-A conta gratuita permite até 5 aplicações simultâmneas e 25 horas mensais de uso (um aplicativo utilizado por 1 hora consome 1 hora do seu plano, 2 aplicativos utilizados simultaneamente por 1 hora consomem 2 horas do seu plano). As contas pagas, além de mais horas, fornecem outras vantagens, como suporte personalizado e autenticação.
+A conta gratuita permite até 5 aplicações simultâneas e 25 horas mensais de uso (um aplicativo utilizado por 1 hora consome 1 hora do seu plano, 2 aplicativos utilizados simultaneamente por 1 hora consomem 2 horas do seu plano). As contas pagas, além de mais horas, fornecem outras vantagens, como suporte personalizado e autenticação.
 
 Criada uma conta, você deve conectá-la com o RStudio. Feito isso, você conseguirá fazer o deploy do seu app com alguns cliques. A seguir, mostramos o passo a passo para conectar a sua conta e para fazer o deploy do seu app.
 
 ### Conectando a sua conta com o RStudio
 
 Primeiro, crie uma conta no serviço site [shinyapps.io](https://www.shinyapps.io/).
 
-Faço o login na sua conta e, no menu lateral, acesseo Account > Tokens.
+Faço o login na sua conta e, no menu lateral, acesse Account > Tokens.
 
 ```{r, echo = FALSE, out.width="30%"}
 knitr::include_graphics("img/shinyapps-sidebar.png")
@@ -69,7 +69,7 @@ knitr::include_graphics("img/shinyapps-publishing.png")
 
 O processo de deploy pode levar alguns minutos, a depender das dependências do seu app e tamanho dos arquivos que você subir. Quando o processo terminar, você receberá uma URL para acessar o aplicativo.
 
-Caso o seu app não abra devido a algum erro, você pode acessar a os logs de utilização para ter uma dica do que aconteceu. Para isso, no dashboard do ShinyApps.io, acesse Applications > All, no meu lateral. Em seguida, clique no app que você gostaria de investidar. Por fim, acesse a opção "Logs".
+Caso o seu app não abra devido a algum erro, você pode acessar a os logs de utilização para ter uma dica do que aconteceu. Para isso, no dashboard do ShinyApps.io, acesse Applications > All, no meu lateral. Em seguida, clique no app que você gostaria de investigar. Por fim, acesse a opção "Logs".
 
 ```{r, echo = FALSE, out.width="100%"}
 knitr::include_graphics("img/shinyapps-log.png")

htmlwidgets.qmd

@@ -14,11 +14,11 @@ Usando htmlwidgets, conseguimos construir tabelas, gráficos, mapas e muito outr
 - plotly, ECharts e Highcharts para gráficos 
 - Leaflet, para mapas
 
-Além de diversos recursos interativos nativos, esssas bibliotecas permitem a captura de certos **eventos**, que são transformados em inputs dentro Shiny e podem ser utilizados para gerar ou modificar resultados. Veremos também como acessar e utilizar esses eventos dentro do servidor.
+Além de diversos recursos interativos nativos, essas bibliotecas permitem a captura de certos **eventos**, que são transformados em inputs dentro Shiny e podem ser utilizados para gerar ou modificar resultados. Veremos também como acessar e utilizar esses eventos dentro do servidor.
 
 ## Tabelas
 
-Falaremos a seguir como utilziar as bibliotecas React Table e DT para construir tabelas interativas em seu Shiny app.
+Falaremos a seguir como utilizar as bibliotecas React Table e DT para construir tabelas interativas em seu Shiny app.
 
 ### React Table {#sec-reactable}
 
@@ -80,7 +80,7 @@ Para saber mais sobre `reactable`, [clique aqui](https://glin.github.io/reactabl
 
 ### DT
 
-O pacote `DT` embruha a biblioteca JavaScript [DataTables](http://datatables.net/) e é uma alternativa ao `reactable` para a criação de tabelas interativas. Embora seja mais burocrático na customização, essa biblioteca possui um recurso muito útil para a aplicativos Shiny: a edição de tabelas.
+O pacote `DT` embrulha a biblioteca JavaScript [DataTables](http://datatables.net/) e é uma alternativa ao `reactable` para a criação de tabelas interativas. Embora seja mais burocrático na customização, essa biblioteca possui um recurso muito útil para a aplicativos Shiny: a edição de tabelas.
 
 Antes de mais nada, instale o pacote `DT`:
 
@@ -205,7 +205,7 @@ Na [Seção -@sec-ggplot2], falamos como colocar gráficos estáticos no Shiny u
 
 ### plotly
 
-A biblioteca plotly, além de permitir a criação de gráficos interativos, possibilita fazermos isso diretamente de um gráfico feito em `ggplot2`. Para utilizar essa biblioteca a patir do R, utilizamos o pacote `plotly`.
+A biblioteca plotly, além de permitir a criação de gráficos interativos, possibilita fazermos isso diretamente de um gráfico feito em `ggplot2`. Para utilizar essa biblioteca a partir do R, utilizamos o pacote `plotly`.
 
 ```{r, eval = FALSE}
 install.packages("plotly")
@@ -520,7 +520,7 @@ install.packages("highcharter")
 
 O `highcharter` também **não** possui uma função tradutora de ggplot, equivalente à `ggplotly` do pacote `plotly`. Para criar um Highchart, podemos utilizar a função `highcharter::hchart()` ou `highcharter::highchart()`.
 
-A função `highcharter::hchart()` tem uma sintaxe parecida com a do pacote `ggplot2`. No entanto, nem todo gráfico será possível ser contruído a partir dessa função.
+A função `highcharter::hchart()` tem uma sintaxe parecida com a do pacote `ggplot2`. No entanto, nem todo gráfico será possível ser construído a partir dessa função.
 
 ```{r}
 mtcars |> 
@@ -685,7 +685,7 @@ O `leaflet` envia automaticamente valores provenientes de eventos para a lista `
 
 Se um mapa com `outputId = "mapa"` tiver um círculo, sempre que o círculo for clicado o valor reativo `input$mapa_shape_click` será atualizado. Antes do primeiro clique, o valor de `input$mapa_shape_click` é `NULL`.
 
-O leaflet possui os seguintes tipos de objeto (`tipoObjeto`): `marker`, `shape`, `geojson` e `topojson`; e os seguintes tipos de eventos (`nomeEvento`): `click`, `mouseover` and `mouseout`.
+O leaflet possui os seguintes tipos de objeto (`tipoObjeto`): `marker`, `shape`, `geojson` e `topojson`; e os seguintes tipos de eventos (`nomeEvento`): `click`, `mouseover` e `mouseout`.
 
 Ao realizar uma ação, o valor do `input` correspondente passa a ser uma lista com os seguintes valores:
 
@@ -707,5 +707,16 @@ Além dos eventos associados a um elemento do mapa, o `leaflet` também disponib
 
 <!-- TODO: colocar GIF com exemplo, com o código-->
 
+## Exercícios
+
+1 - O que são HTML Widgets?
+
+___
+
+2 - Reproduza [este app](https://acursor.shinyapps.io/htmlwidgets-1/).
+
+A base utilizada foi a `cetesb`. [Clique aqui](https://github.com/curso-r/programando-em-shiny/raw/main/exemplos/data/cetesb.rds) para fazer o download dela.
+
+
 
 

index.qmd

@@ -4,7 +4,7 @@ Este é um livro em desenvolvimento. Toda contribuição, seja correção de err
 
 O conteúdo aqui presente se destina a:
 
-- pessoas que programam em linguagem R e gostaríam de começar a programar em Shiny;
+- pessoas que programam em linguagem R e gostariam de começar a programar em Shiny;
 
 - pessoas que programam em Shiny e gostariam de se aprofundar no conceito de reatividade;
 
@@ -32,7 +32,7 @@ Nas universidades, o Shiny já é uma poderosa ferramenta de ensino, que substit
 
 O Shiny fornece uma estrutura para gerarmos código HTML a partir de funções em R. Também possui uma base de JavaScript e CSS para deixar os aplicativos funcionais e com um visual satisfatório. Além disso, podemos utilizar por trás todo o poderio de análise de dados que o R e seus pacotes fornecem. Com esses elementos, já conseguimos construir qualquer tipo de layout e lógica interna. 
 
-Contudo, o grande poder do Shiny está em não limitar as posssibilidades apenas ao que foi feito pelos desenvolvedores do pacote^[O que já é muita coisa! Veja mais em https://shiny.rstudio.com/.]. Existem vários outros pacotes criados pela comunidade que trazem mais elementos visuais e funcionais para o Shiny, diminuindo ainda mais a necessidade de conhecermos HTML, CSS e JavaScript. E, se você tem conhecimento dessas linguagens, o céu é o limite! É muito simples incluir *tags* HTML, folhas de estilo CSS e suas próprias funções JavaScript em um aplicativo Shiny.
+Contudo, o grande poder do Shiny está em não limitar as possibilidades apenas ao que foi feito pelos desenvolvedores do pacote^[O que já é muita coisa! Veja mais em https://shiny.rstudio.com/.]. Existem vários outros pacotes criados pela comunidade que trazem mais elementos visuais e funcionais para o Shiny, diminuindo ainda mais a necessidade de conhecermos HTML, CSS e JavaScript. E, se você tem conhecimento dessas linguagens, o céu é o limite! É muito simples incluir *tags* HTML, folhas de estilo CSS e suas próprias funções JavaScript em um aplicativo Shiny.
 
 
 ## O que você vai aprender neste livro? {-}
@@ -67,7 +67,7 @@ Falar sobre Shiny em texto um grande desafio. A maior parte dos resultados que v
 
 Deixamos alguns poucos aplicativos utilizados como exemplo neste livro online^[Infelizmente seria muito trabalhoso e caro fazer isso com todos.]. Sempre que disponível, recomendamos acessar o link e interagir com o app. 
 
-No restante dos casos, deixaros disponível junto ao texto o código completo do app, que você pode copiar e colar no R para rodar o aplicativo. Recomendamos que você faça isso para todos os exemplos deste tipo, sempre fazendo o exercício de analisar qual parte do código gera cada parte do app.
+No restante dos casos, deixamos disponível junto ao texto o código completo do app, que você pode copiar e colar no R para rodar o aplicativo. Recomendamos que você faça isso para todos os exemplos deste tipo, sempre fazendo o exercício de analisar qual parte do código gera cada parte do app.
 
 ## O que eu preciso para começar a aprender Shiny? {-}
 

layouts.qmd

@@ -668,3 +668,35 @@ p {
 }
 ```
 
+## Exercícios
+
+1 - O que é uma linguagem de marcação?
+
+___
+
+2 - Como criar as tags HTML usando o pacote `shiny`?
+
+___
+
+3 - O que é o framework Bootstrap? O que é o sistema de grade (*grid system*)?
+
+___
+
+4 - Refaça os apps dos exercícios dos capítulos anteriores utilizando o `sidebarLayout`.
+
+___
+
+5 - Utilizando a base `dados::clima` e o layout `navbarPage`, faça um shiny app que tenha duas páginas:
+
+- a primeira com uma série temporal da média diária da `temperatura`, permitindo a escolha do intervalo de dias em que o gráfico é gerado
+
+- a segunda com uma caixa de seleção permitindo escolher as opções `umidade`, `velocidade_vento` e `precipitacao` e um gráfico de dispersão da `temperatura` contra a variável escolhida.
+
+___
+
+6 - Transforme o aplicativo construído no exercício anterior em um `shinydasbhoard`.
+
+___
+
+7 - Transforme o aplicativo construído no exercício anterior em um `bs4Dash`.
+