Programmieraufgabeoder Lückentext?

class: center, middle, inverse, title-slide

# Programmieraufgabeoder Lückentext?
## Wir visualisieren Daten und automatisieren Reports(für Anfänger:innen)
###

---

# Wer wir sind

.pull-left[
 
<img src="libs/img/group.png" width=800 height=300>
]

.pull-right[
<img src="libs/img/ninacosima.png" width=400 height=200>
 Wir sind ein deutschlandweites Netzwerk von über 1300 Data Scientists, die die Welt durch Data Science verbessern wollen. 
**#MetaWeltretter**
]

---

## Agenda

1. **Vorstellung** (5 Minuten)

2. **Allgemeine Einführung** (20 Minuten)

3. **Übung 1-5 gemeinsam** (35 Minuten)
 - Übung durchlaufen lassen
 - Lösung durchlaufen lassen

4. **Pause** (5 Minuten)

5. **Übung 6-10 Peer Learning in Break Outs** (40 Minuten)

6. **Hosting, Ausblick, Weiterbildung** (10 Minuten)

7. **Evaluation** (5 Minuten)

8. **Kaffeeplausch** (60 Minuten)

---
class: inverse, middle, center
background-image: url("libs/img/red.png")
background-position: 0% 100%;
background-size: cover

# Und wer seid Ihr?

---
class: bg_img, hide-logo, progress-bar-hide

.full-width[.content-box-grey[
## Spielregeln für unsere Zusammenarbeit

1. Fragen gerne immer am Chat bzw. zum Ende der einzelnen Abschnitte

2. Aktiv und gemeinsam Neues lernen

3. Praktisch arbeiten statt Theorien wiederholen
 
]]
---
## Ziele des Workshops

- Anwendungsmöglichkeiten für die Technologie RShiny erkennen

- Code zu lesen

- Grundverständnis für die technische Implementierung

- Gewecktes Interesse mehr zu lernen

---
## Prinzipien des Workshops

- Alle Pflichtaufgaben können durch das Kopieren von Codesegmenten mit kleinen Änderungen erledigt werden

- Bitte lest die Aufgabenstellungen gründlich durch (##### Übung X)

- Grüner Text kennzeichnet Kommentare, in denen wichtige Informationen für Euch stehen

---
class: inverse, middle, center
background-image: url("libs/img/blue.png")
background-position: 0% 100%;
background-size: cover

# Web-Applikationen begegnen uns überall – doch was ist das eigentlich?

---
### Visualisierung von Covid-19-Daten

[![](libs/img/covid.png)](https://vac-lshtm.shinyapps.io/ncov_tracker/?_ga=2.169619937.1955604536.1616424760-1179854739.1615478835)

---

### Suchmaschine (1)

[![](libs/img/coro2vid.png)](https://cosima-meyer.shinyapps.io/coro2vid-19-shinyapp/)

---

### Suchmaschine (2)

[![](libs/img/crime.png)](https://cultureofinsight.shinyapps.io/crime-watch/?_ga=2.173579619.1955604536.1616424760-1179854739.1615478835)

---

### Und so viel mehr...

[![](libs/img/shinyshowcase.png)](https://shiny.rstudio.com/gallery/)

---

## Und was ist Shiny?

Ein R-Package, das es Euch ermöglicht ganz leicht interaktive Web-Applikationen zu bauen 
<img src="libs/img/img3.png" width=1200 height=500>

---

## Und was ist Shiny?
Ein R-Package, das es Euch ermöglicht ganz leicht interaktive Web-Applikationen zu bauen 
<img src="libs/img/img2.png" width=1200 height=500>

---
class: inverse, middle, center
background-image: url("libs/img/red.png")
background-position: 0% 100%;
background-size: cover

# Wie erstelle ich eine ShinyApp in R?

---
class: inverse, center, middle

![](libs/img/demo.gif)

---

# Aufsetzen einer ShinyApp

---

# Aufsetzen einer ShinyApp

---

# Aufsetzen einer ShinyApp

---
class: hide-logo
background-image: url("libs/img/fullbody.png")
background-size: 120px
background-position: 95% 8%

### `ui.R`

Bestimmt das **Aussehen** der App

---
class: hide-logo
background-image: url("libs/img/fullbody.png")
background-size: 120px
background-position: 95% 8%

### `ui.R`

Bestimmt das **Aussehen** der App

---
class: hide-logo
background-image: url("libs/img/head.png")
background-size: 200px
background-position: 95% 8%

### `server.R`

Kreiert das **Gehirn** der App

---
## Alles muss miteinander verbunden sein

---
### `shinyApp()`

**Als letzter Schritt:**

Das **UI** mit dem **Server** kombinieren

.center[

```r
shinyApp(ui = ui, server = server)
```
]

---

![](libs/img/computer_app.png)

---
class: inverse, center, middle

# Jetzt bauen wir Eure erste ShinyApp
💻

---
class: inverse, center, middle

## Alles was Ihr braucht

![](libs/img/app_uebersicht.png)

---
### Und jetzt? Ihr könnt den Code ganz leicht auf andere Projekte übertragen...

![](libs/img/12.png)

---
### Oder Eure ShinyApp veröffentlichen

- Mit unsensiblen Daten kann man die ShinyApp ganz einfach und kostenlos über [**shinyapp.ios**](http://www.shinyapps.io/?_ga=2.133360206.1145896271.1604733011-115282237.1604416772) veröffentlichen

- Vor dem Veröffentlichen auf jeden Fall beachten: Alle Packages müssen installiert sein (mit `install.packages(...)`) -- das darf allerdings nicht im Code erscheinen.
  
- Schritt-für-Schritt-Anleitung:
  1. Installiert ```rsconnect``` (`install.packages('rsconnect')`)
  2. Erstellt ein kostenloses Benutzerkonto auf [**shinyapps.io**](http://www.shinyapps.io/?_ga=2.133360206.1145896271.1604733011-115282237.1604416772)
  3. Folgt Methode 1 wie [**hier**](https://shiny.rstudio.com/articles/shinyapps.html) beschrieben: Kopiert das Token und fügt es in Euer RStudio ein
  4. (Wenn Ihr die App vorab noch einmal testen wollt: `runApp()`)
  5. Zum Schluss: Veröffentlicht Eure ShinyApp mit `deployApp()`

Einen kleinen Moment warten... **und das war's! Eure App ist online!**

---
class: inverse

## Online findet Ihr tolle Weiterbildungsformate, ...

[![](libs/img/dataquest.png)](https://www.dataquest.io)

---
class: inverse
background-image: url("libs/img/computer.png")
background-size: 200px
background-position: 95% 8%

## ... noch mehr Ressourcen

.pull-left[.small[
- Shiny

- [R Studio Tutorial](https://shiny.rstudio.com/tutorial/)
  - [Hadley Wickham: "Mastering Shiny"](https://mastering-shiny.org)
  - [Konstantin Gavras and Nick Baumann: "Shiny Apps: Development and Deployment"](https://www.mzes.uni-mannheim.de/socialsciencedatalab/article/shiny-apps/) auf Methods Bites
  - [Julie Scholler: "Intro to Shiny Web App"](https://juliescholler.gitlab.io/files/M2/M2-CM3-Shiny.html#1)
  - [Kaleen L. Medeiros: "Introduction to Shiny"](https://github.com/klmedeiros/rladies-tunisia-july2020-intro-shiny)
  - [Garrett Grolemund: "How to understand reactivity in R"](https://shiny.rstudio.com/articles/understanding-reactivity.html)
]]
  
.pull-right[.small[
- ShinyApps hosten
  - [Hosting and deployment](https://shiny.rstudio.com/articles/shinyapps.html)
  - [Shinyapps.io - Step-by-step guide](https://shiny.rstudio.com/articles/shinyapps.html)

- Shiny dashboards
  - [R Studio tutorial](https://rstudio.github.io/shinydashboard/)
  - [Themes](https://github.com/nik01010/dashboardthemes)

- Optimieren von ShinyApps
  - [Make your ShinyApp faster](https://appsilon.com/r-shiny-faster-updateinput-css-javascript/)
  - [shiny.worker](https://www.r-bloggers.com/shiny-worker-speed-up-r-shiny-apps-by-offloading-heavy-calculations/)
  
- Visualisierungen leicht erstellen
  - [Per Click-and-Drop mit "esquisse"](https://cran.r-project.org/web/packages/esquisse/vignettes/get-started.html)
]]

---
class: inverse

## ... und natürlich Angebote bei CorrelAid!

![:col_row <img src="libs/img/projekte.png" width=220 height=150>, <img src="libs/img/bildung.png" width=220 height=150>, <img src="libs/img/dialog.png" width=220 height=150>]
 
![:col_row PROJEKTE, BILDUNG, DIALOG]
 
![:col_row Wir führen pro-bono Datenanalyseprojekte für gemeinnützige Organisationen durch., Wir vernetzen engagierte sozial denkende Datenanalyst:innen und bieten ihnen Möglichkeiten ihr Wissen anzuwenden und zu erweitern., Wir treten in den Dialog über den Wert und Nutzen von Daten und Datenanalysen für das Gemeinwohl.]

---
class: inverse, middle, center