-
Notifications
You must be signed in to change notification settings - Fork 0
/
index.Rmd
459 lines (272 loc) · 13.7 KB
/
index.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
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
253
254
255
256
257
258
259
260
261
262
263
264
265
266
267
268
269
270
271
272
273
274
275
276
277
278
279
280
281
282
283
284
285
286
287
288
289
290
291
292
293
294
295
296
297
298
299
300
301
302
303
304
305
306
307
308
309
310
311
312
313
314
315
316
317
318
319
320
321
322
323
324
325
326
327
328
329
330
331
332
333
334
335
336
337
338
339
340
341
342
343
344
345
346
347
348
349
350
351
352
353
354
355
356
357
358
359
360
361
362
363
364
365
366
367
368
369
370
371
372
373
374
375
376
377
378
379
380
381
382
383
384
385
386
387
388
389
390
391
392
393
394
395
396
397
398
399
400
401
402
403
404
405
406
407
408
409
410
411
412
413
414
415
416
417
418
419
420
421
422
423
424
425
426
427
428
429
430
431
432
433
434
435
436
437
438
439
440
441
442
443
444
445
446
447
448
449
450
451
452
453
454
455
456
457
458
459
---
title:
output:
revealjs::revealjs_presentation:
theme: sky
highlight: kate
transition: slide
reveal_options:
slideNumber: true
---
## **Trening Shiny App repopsi**
<center> [**Tijana Blagojev**](https://www.linkedin.com/in/tijana-blagojev-288b3442/) - [**EUI**](https://cmpf.eui.eu/team/tijana-blagojev/)/[**R-Ladies Belgrade**](https://www.meetup.com/rladies-belgrade/) </center>
<center> [**Duško Medić**](https://www.linkedin.com/in/duskomedic/?originalSubdomain=rs) - [**Centar za održive zajednice**](https://odrzivezajednice.org/) </center>
<section>
<img class="center" height="500" src="slike/repopsiapp.png">
</section>
<style type="text/css">
.reveal p {
text-align: justify;
}
.reveal ul {
text-align: justify;
}
.reveal ol {
display: block;
}
</style>
## **Cilj treninga**
- Da se upoznamo sa osnovama Shiny aplikacije.
- Da vidimo kako se pravi web aplikacija repopsi.
- Da vidimo kako se publikuje aplikacija koristeći [**Shinyapps.io**](https://www.shinyapps.io).
## **Šta je Shiny web aplikacija?**
[**Shiny**](https://shiny.rstudio.com) je paket [RStudio-a](https://rstudio.com) koji se koristi za pravljenje interaktivnih web aplikacija uz pomoć [R programskog jezika](https://r-project.org).
Možete da napravite aplikaciju na posebnoj web stranici kao što je slučaj sa [repopsi](https://repopsi.shinyapps.io/repopsi/) ili da vam bude deo [R Markdown](https://rmarkdown.rstudio.com/index.html) dokumenta ili da pravite takozvane [Shiny dashboards](http://rstudio.github.io/shinydashboard/). Možete takođe da unapredite Shiny aplikaciju uz pomoć CSS tema, htmlwidgets-a, ili JavaScript-a.
Shiny aplikacije se lako kreiraju. Nisu neophodne veštine za izradu web stranica. Ali ukoliko ih imate još bolje.
## **Napravićemo novi projekat**
<section>
<img class="center" height="500" src="slike/novi direktorijum.png">
</section>
## **Napravićemo novi projekat**
<section>
<img class="center" height="500" src="slike/novi projekat shiny.png">
</section>
## **Napravićemo novi projekat**
<section>
<img class="center" height="500" src="slike/noviprojekat.png">
</section>
## **Otvorićemo Shiny aplikaciju**
<section>
<img class="center" height="400" src="slike/shiny aplikacija.png">
</section>
## **Izgled Shiny aplikacije**
<section>
<img class="center" height="500" src="slike/Izgled shiny aplikacije.png">
</section>
## **app.R**
Kod za Shiny aplikaciju ima tri dela:
1) **global kod**
- Gde se importuju biblioteke, pristupa izvoru podataka i gde se podaci sredjuju
2) **UI kod**
- UI (User interface) gde se prilagodjava izgled aplikacije
3) **Server kod**
- Kod koji pokreće aplikaciju, gde se prava magija dešava
## **Da vidimo kako izgleda pravljenje shiny aplikacije**
<section>
<img class="center" height="500" src="https://media.giphy.com/media/S8zwSO1qULuQbTbNh3/giphy.gif">
</section>
## **Shiny paket i drugi paketi koji su potrebni za izradu aplikacije**
Prvo ćemo instalirati shiny paket i ostale pakete koji su neophodni za aplikaciju.
```{r eval=FALSE, message=FALSE}
install.packages("shiny") #za shiny aplikaciju
install.packages("shinythemes") # teme koje ulepšavaju izgled aplikacije
install.packages("shinyWidgets") # uredjivanje dugmića ili nekih drugih delova aplikacije
install.packages("tidyverse") # za obradu i pripremanje podataka za vizuelni prikaz
install.packages("DT") # odličan paket za pravljenje tabela
install.packages("gsheet") # koristi se za uvoz google sheets
install.packages("writexl") # koristi se u delu za skidanje podataka u excel formatu
install.packages("httr") # služi za preuzimanje i skidanje podataka u csv-u sa linka
```
## **Shiny paket i drugi paketi koji su potrebni za izradu aplikacije**
Potom ćemo uvesti biblioteke koje su nam potrebne.
```{r,message=FALSE}
library (shiny)
library (shinythemes)
library (shinyWidgets)
library (tidyverse)
library (gsheet)
library (writexl)
library (httr)
```
## **Global kod**
<section>
<img class="center" height="450" src="https://media.giphy.com/media/SBMuvm3zhk7MKNhCJP/giphy.gif">
</section>
## **Global deo preuzimanje podataka**
Za ovo koristimo gsheet biblioteku.
```{r,message=FALSE}
repopsi <- gsheet2tbl("https://docs.google.com/spreadsheets/d/1A6O1d0S7iBYsKVbdBP9AWdYXMWvrN_lCh_oMldCmNsA/edit#gid=0")
```
## **Global deo prikaz podataka**
```{r,echo=FALSE, message=FALSE, height= 500}
DT :: datatable (repopsi, rownames = FALSE, options = list(
bPaginate = TRUE, scrollX=T, scrollY = "400px", lengthMenu=c(3,5,10), pageLength = 10,info= FALSE,initComplete = DT::JS(
"function(settings, json) {",
"$(this.api().table().container()).css({'font-size': '15px'});",
"}")))
```
## **Uredjivanje kolona**
```{r,message=FALSE}
repopsi <- repopsi[-c(1:8),]
my.names <- repopsi[1,]
colnames(repopsi) <- my.names
repopsi <- repopsi[-1,]
repopsi <- repopsi[,-1]
colnames(repopsi)<-gsub(".$","",colnames(repopsi))
```
## **Tabela posle uredjivanja kolona**
```{r,echo=FALSE, message=FALSE}
DT :: datatable (repopsi, rownames = FALSE, options = list(
bPaginate = TRUE, scrollX=T, scrollY = "400px", lengthMenu=c(3,5,10), pageLength = 10,info= FALSE,initComplete = DT::JS(
"function(settings, json) {",
"$(this.api().table().container()).css({'font-size': '15px'});",
"}")))
```
## **Važna napomena**
- Da bi gsheet2tbl funkcionisao, neophodno je da je "Share by link" uključen.
- Ukoliko promenite google sheet morate da sredite kolone u skladu sa tim.
- Ukoliko želite da koristite excel potreban vam je drugi paket za uvoz tih podataka, a to je readxl::read_xlsx().
- Ako je novi excel fajl, treba proveriti da li treba sredjivati podatke ili ne.
## **Dodavanje linkova**
```{r,message=FALSE}
repopsi1 <-repopsi
# Koristi se za dodavanje linkova na več postojeće informacije u koloni (to je važno za funkciju datatable)
repopsi1$`Source of the original instrument` <- ifelse(is.na(repopsi1$`Source of the original instrument`),
NA, paste0("<a href='", repopsi1$`Source of the original instrument`, "' target='_blank'>",
repopsi1$`Source of the original instrument`, " </a>"))
# Koristi se za pretvaranje u aktivni link za slanje na email adresu u koloni
repopsi1$`Contact email address` <- ifelse(is.na(repopsi1$`Contact email address` ),
NA, paste0("<a href='mailto:",repopsi1$`Contact email address` , "' target='_blank'>",
repopsi1$`Contact email address` ,"</a>"))
```
## **Spajanje kolona i uklanjanje nepotrebnih**
```{r,message=FALSE}
repopsi1<- repopsi1%>%
unite(`Instrument name and version`, `Title in English`, Abbreviation, Version, sep = " | ",remove = FALSE, na.rm = TRUE)%>%
select(-c(`Title in English`,Abbreviation,Version))%>%
unite(`Contact person`, `Contact person`, `Contact email address`, sep = " | ",remove = FALSE, na.rm = TRUE) %>%
select(-`Contact email address`) %>%
unite(`Where to find the instrument?`, `Instrument availability`, `Link to instrument in the Repository`, `Link to instrument outside of the Repository`, sep = " | ",remove = FALSE,na.rm = TRUE)%>%
select(-c(`Instrument availability`, `Link to instrument in the Repository`, `Link to instrument outside of the Repository`))
```
## **Menjanje redosleda kolona**
```{r,message=FALSE}
repopsi1<- repopsi1%>%
relocate(`Where to find the instrument?`, .after = `Instrument name and version`) %>%
relocate(`Citation of the original instrument`, .after = `Where to find the instrument?`) %>%
relocate(`Citation of the translation/adaptation`, .after = `Citation of the original instrument`) %>%
relocate(Keywords, .after = `Citation of the translation/adaptation`) %>%
relocate(`Contact person`, .after = Keywords)
```
## **Originalna tabela i url za skidanje CSV podataka sa drugog sajta **
```{r,message=FALSE}
#repopsi duplicate for download
repopsi2 <-repopsi
repopsi2$ID <-seq.int(nrow(repopsi2))
#URL for CSV download of all data
URL <- "https://osf.io/download/mxrc2/"
```
## **UI kod **
<section>
<img class="center" height="500" src="https://media.giphy.com/media/1k889fiqiZV19HO2sx/giphy.gif">
</section>
## **UI kod**
UI se, u slučaju repopsi aplikacije, sastoji od navbarPage koja ima sidebarPanel sa leve i mainPanel sa desne strane. Na ovaj način se uredjuje raspored elemenata aplikacije.
Pre samog sadržaja ovih panela postoji deo koji definiše temu, javaskript koji je važan za global pretragu tabele i css koji uredjuje boje, veličinu slova same aplikacije.
## **Tema i javaskript**
<section>
<img class="center" height="300" src="slike/tema i js.png">
</section>
## **Sadržaj myscript.js**
<section>
<img class="center" height="500" src="slike/javaskript.png">
</section>
## **www folder **
U ovom trenutku bismo pomenuli da www folder postoji da bi se u njega ubacile slike (logoi i slično), ako je kompleksniji css fajl ili javaskript.
<section>
<img class="center" height="250" src="slike/wwwfolder.png">
<img class="center" height="250" src="slike/sadrzajwwwfoldera.png">
</section>
## **Uredjivanje estetike aplikacije **
Postoji više načina kako može da se uredjuje aplikacija. Može da se direktno primeni CSS ili HTML ili postoje već neke funkcije u shiny-u koje obavljaju upravo to. Prvo ćemo vam prikazati deo koji se odnosi na sredjivanje estetike a koji se sastoji od CSS-a. Sa **tags$** mogu da se uredjuju specifični delovi aplikacije.
## **Uredjivanje estetike aplikacije **
<section>
<img class="center" height="500" src="slike/uredjivanje boje font.png">
</section>
## **Neke od funkcija HTML5**
- **strong()** boldovan tekst
- **a("tekst"/slika, href="link")** linkovan tekst
- **h2(),h3(),h4(),h5(), h6()** tekst različitog nivoa
- **br()** razmak izmedju teksta
- **img()** slika
- **HTML()** direktno povlači string karaktera kao HTML kod
## **UI widget-i i reaktivni output-i**
Najvažniji deo **ui** predstavljaju razni widget-i ili reaktivni output-i. To su dakle različite vrste opcija gde se ili unose odredjeni podaci, ili gde će se pojaviti odredjeni grafikon/tabela a zatim se na **server** strani od tih unosa u realnom vremenu prikazuju tabele, grafikoni, skidaju podaci u vidu output-a. Na ovaj način se obezbedjuje interaktivnost.
Svaki widget ili reaktivni output ima svoj id koji mu vi dodeljujete i jako je važno da zapamtite kako ste ga nazvali.
U sidebarPanel-u ove aplikacije ima 4 widget-a (unos teksta za filtriranje i tri dugmeta za skidanje podataka) a u glavnom panelu jedan reaktivni output (tabela).
## **UI widget-i i reaktivni output**
sidebarPanel
- tags$input sa id **global_filter**
- downloadBttn sa id **downloadfilterxlsx**
- downloadBttn sa id **downloadalldatacsv**
- downloadBttn sa id **downloadalldataxlsx**
mainPanel
- dataTableOutput sa id **tablerepopsi**
## **Server kod **
<section>
<img class="center" height="500" src="https://media.giphy.com/media/sMKedUx9w9m8OGwXi6/giphy.gif">
</section>
## **Aktiviranje tabele**
<section>
<img class="center" height="100" src="slike/datatable.png">
<img class="center" height="350" src="slike/datatable output.png">
</section>
## **HTML tabela**
<section>
<img class="center" height="600" src="slike/htmltabela.png">
</section>
## **Aktiviranje skidanja filtriranih podataka**
<section>
<img class="center" height="500" src="slike/download filtered data excel output.png">
</section>
## **Aktiviranje skidanja svih podataka csv**
<section>
<img class="center" height="500" src="slike/download all data csv output.png">
</section>
## **Aktiviranje skidanja svih podataka excel**
<section>
<img class="center" height="500" src="slike/download all data excel output.png">
</section>
## **Objavljivanje aplikacije na Shinyapps.io**
<section>
<img class="center" height="500" src="https://media.giphy.com/media/h1Hvk7Vp3KKIenIBWK/giphy.gif">
</section>
## **Objavljivanje aplikacije na Shinyapps.io**
Da biste objavili aplikaciju na Shinyapps.io potrebno je da otvorite nalog.
Najbolje objašnjen način korak po korak kako da objavite aplikaciju na shinyapp je na sledećem [linku](https://shiny.rstudio.com/articles/shinyapps.html). Tu se nalaze informacije kako da povežete shinyapp nalog sa vašim lokalnim kompjuterom.
<section>
<img class="center" height="250" src="slike/shinyappsnalog.png">
</section>
## **Objavljivanje aplikacije na Shinyapps.io iz RStudio-a**
Kada ste obavili povezivanje Shinyapps.io i Rstudio-a, vratite se na vašu aplikaciju u RStudio-u. Kliknite na plavu Publish ikonu u gornjem desnom uglu.
<section>
<img class="center" height="250" src="slike/publishicon.png">
</section>
## **Objavljivanje aplikacije na Shinyapps.io iz RStudio-a**
Izaberite fajlove koji su potrebni da se objave. U slučaju repopsi aplikacije to je www folder koji sadrži **dva logo-a** i **javaskript** fajl i **app.R** fajl. Takodje, u ovom koraku birate i nalog koji ste povezali sa shinyapps.io. I kliknite na **Publish**.
<section>
<img class="center" height="300" src="slike/fajloviinalog.png">
</section>
## **Bravo!**
<section>
<img class="center" height="500" src="https://media.giphy.com/media/fXDqamyZLsDqNAcJEf/giphy.gif">
</section>
## **Korisni linkovi i kontakt**
- [Shiny tutorijal](https://shiny.rstudio.com/tutorial/)
- [Galerija Shiny aplikacija](https://shiny.rstudio.com/gallery/)
- [R-ladies Belgrade meetup stranica](https://www.meetup.com/rladies-belgrade/)
- Kontakt [Duško Medić](mailto:dusko.medic@gmail.com) i [Tijana Blagojev](mailto:etijana@gmail.com)
## **Hvala mnogo na pažnji!**
<section>
<img class="center" height="500" src="https://media.giphy.com/media/QAsBwSjx9zVKoGp9nr/giphy.gif">
</section>