forked from PsyTeachR/shiny-tutorials
-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy path02-custom-app.Rmd
182 lines (123 loc) · 6.36 KB
/
02-custom-app.Rmd
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
---
title: "Second Shiny App"
output:
html_document:
self_contained: no
toc: yes
toc_depth: 2
code_folding: show
toc_float:
collapsed: false
number_sections: true
---
In this tutorial, we're going to start with the blank framework for a shiny app. We will add some text, input control [widgets](defs.html#widget), output text, and an output plot.
* Knowledge: [Basic RStudio and R](https://gupsych.github.io/data_skills/01_intro.html), can make an RStudio project, run the RStudio demo shiny app and make minor edits (see [first shiny app](01-first-app.html) for a tutorial)
* Programs: [R](http://cran.r-project.org/mirrors.html) and [RStudio](https://www.rstudio.com/products/rstudio/download3/)
* Packages: `shiny`, `ggplot2`, `dplyr`
* Time: ~ 20 minutes
# Create a Framework App
<input type="checkbox" class="progress">
## Set up the project
See the [first tutorial](01-first-app.html) for how to do this. Name it `effect_guess`.
<input type="checkbox" class="progress">
## Add blank framework
If you set up a default Shiny project in RStudio, it will create a file called `app.R` with the demo app. Replace the text (or delete the file and create a new file called `app.R`) with the framework below. Save it and run the app.
```{r framework, eval = F}
# Libraries ----
library(shiny)
# Define UI ----
ui <- fluidPage(
# . Application title ----
titlePanel("Title"),
# . Explanatory text ----
p("Put your explanatory text here. Do not forget this or people won't know how to use your app!"),
sidebarLayout(
# . Sidebar ----
sidebarPanel(
p("Sidebar text...")
),
# . Main Panel ----
mainPanel(
p("Main panel text...")
)
)
)
# Define server logic ----
server <- function(input, output, session) {
}
# Run the application ----
shinyApp(ui = ui, server = server)
```
<p class="alert alert-info">In RStudio, you can display the document outline using `shift-cmd-O` or by clicking on the outline icon at the top right of the [source pane](defs.html#panes). [Comments](defs.html#commment) get added to the outline if you put four or more dashes, equal signs, or hashes at the end. This is a great way to keep track of more complicated scripts.</p>
<input type="checkbox" class="progress">
## Replace default text
In this app, we're going to show a plot with a random effect size for a between-group design with a random N and ask the user to guess the effect size). So the first thing you should do is explain what your app is doing in the explanatory text. You can also add a title.
<p class="alert alert-info">As always, run your app after every unit of changes. It's easier to catch typos and mistakes if you've only changed a little bit since the last time you successfully ran the app.</p>
```{r replace-default-text, eval = F}
# . Application title ----
titlePanel("Guess the Effect Size"),
# . Explanatory text ----
p("This app will show you a graph of simulated data with a random number of observations in each of two groups and a random effect size. The effect size will be between -3 and 3, your job is to guess the size of the effect."),
```
The framework we're using here is a `sidebarLayout`. This [function](defs.html#function) takes two [arguments](defs.html#argument), the `sidebarPanel` and the `mainPanel`. Usually, the sidebar panel contains all of the control [widgets](defs.html#widget) that the user can set, and the main panel contains the output result, like some text or a graph generated using the input settings.
Add some explanatory text to the sidebar and/or main panels by editing the relevant paragraph functions (`p()`), or delete these if you don't need any static text.
```{r replace-default-text2, eval = F}
sidebarLayout(
# . Sidebar ----
sidebarPanel(
),
# . Main Panel ----
mainPanel(
)
)
```
# Add Input and Output
<input type="checkbox" class="progress">
## sliderInput
We're going to use the `sliderInput` function to let the user guess the effect size in the plot.
```{r slider-input, eval = F}
sidebarPanel(
# . . d_guess slide ----
sliderInput("d_guess", "My effect size (d) guess",
min = -3, max = 3, value = 0, step = 0.1)
),
```
<p class="alert alert-info">I use periods/full stops (`.`) to indent the document outline comments.</p>
<input type="checkbox" class="progress">
## actionButton
We want the user to be able to create a new simulated dataset, so we can make a button that generates a new dataset, graphs it, and resets the effect size slider. Add this widget function after the `sliderInput` widget function (and run the app).
```{r action-button, eval = F}
sidebarPanel(
# . . d_guess slide ----
sliderInput("d_guess", "My effect size (d) guess",
min = -3, max = 3, value = 0, step = 0.1),
# . . new_sim button ----
actionButton("new_sim", "Simulate a new dataset")
),
```
<div class="alert alert-warning">
<p>Don't forget to separate the two widget functions with commas. They are both arguments to the `sidebarPanel` function, so you will get a confusing-looking error message like the one below if you leave out the comma. The first thing you should do with these error messages is to scan for line numbers and look at these lines and the lines before and after them.</p>
<pre><code>Listening on http://127.0.0.1:5327
Error in parse(file, keep.source = FALSE, srcfile = src, encoding = enc) :
/Users/lisad/apps/custom-app/app.R:20:7: unexpected symbol
19: # . . new_sim button ----
20: actionButton
^
Possible missing comma at:
20: actionButton("new_sim", "Simulate a new dataset")
^
Warning: Error in sourceUTF8: Error sourcing /Users/lisad/apps/custom-app/app.R
Stack trace (innermost first):
1: runApp
Error : Error sourcing /Users/lisad/apps/custom-app/app.R</code></pre>
</div>
<input type="checkbox" class="progress">
## textOutput
Outputs normally go in the main panel (although they don't have to). You can use the function `textOutput` to interactively display some text to the user. We want to let people know how many observations are in the randomly generated data, so we'll use a `textOutput` function with the ID `"current_n"`.
```{r, text-output, eval = F}
mainPanel(
# . . current_n output ----
textOutput("current_n")
)
```
When you run this, you'll see that it doesn't actually show anything. That's because