---
lang: de-DE
---

(dashboard-vorbereitung)=
# Entwicklungsumgebung vorbereiten

*Vorbereitende Maßnahmen, bevor mit dem Bau eines Dashboards begonnen werden kann...*

Bevor Daten visualisiert werden können, müssen sie zunächst gesammelt und aufbereitet werden. Dazu gehören programmgesteuerte Methoden wie Data Scraping (automatisierte Datenerfassung) und Data Cleaning (Datenbereinigung), die eine zentrale Grundlage für jede Visualisierung bilden {cite}`heinicker_anderes_visualisieren`.
In diesem Abschnitt wird dazu zuerst die Entwicklungsumgebung RStudio vorbereitet und anschließend werden die Daten importiert und bearbeitet.

## Einrichtung der Entwicklungsumgebung

````{margin}
```{admonition} Hinweis zum Paket leaflet.extras
:class: hinweis

Das Paket <a href="https://cran.r-project.org/web/packages/leaflet.extras/index.html" class="external-link" target="_blank">leaflet.extras</a> wurde während der Erstellung dieses Lehrbuchs aus dem Repository entfernt.

Da das Bauen des Dashboards auch ohne diesen Befehl funktioniert, können Sie ihn auch weglassen.
Da das Paket möglicherweise aber zurückkommt, ist es weiter in dieser Auflistung aufgeführt.

```
````

Bevor Sie mit dem Aufbau des Dashboards beginnen können, müssen Sie die benötigten Pakete installieren und laden. Öffnen Sie RStudio und führen Sie folgenden Befehl aus, um die erforderlichen Pakete zu installieren:

```r
install.packages(c("shiny", "shinydashboard", "leaflet",
                   "dplyr", "htmltools", "stringr", "sf",
                   "tidyr", "ggplot2", "plotly", "leaflet.extras"))
```

Nachdem die Installation abgeschlossen ist, laden Sie die Pakete in Ihr Skript:

```r
library(shiny)
library(shinydashboard)
library(leaflet)
library(dplyr)
library(htmltools)
library(stringr)
library(sf)
library(tidyr)
library(ggplot2)
library(plotly)
```

Jedes dieser Pakete übernimmt eine spezifische Rolle:

- **Benutzeroberfläche (UI):** `shiny` und `shinydashboard` bilden das interaktive Grundgerüst der Anwendung. `htmltools` hilft bei erweiterten HTML-Elementen.
- **Datenverarbeitung:** `dplyr` und `tidyr` strukturieren und verarbeiten die Datensätze, `sf` lädt und verarbeitet räumliche Daten wie die Berliner Bezirksgrenzen, und `stringr` hilft bei der Manipulation von Zeichenketten.
- **Visualisierung:** `leaflet` ermöglicht den Bau der interaktiven Landkarte, während `ggplot2` und `plotly` für die Erstellung der Diagramme genutzt werden.


## Daten laden und vorbereiten

**Einlesen und Aufbereitung der CSV-Datei**

Die Grundlage für unser Dashboard bildet eine CSV-Datei der Nutzungsdaten aus dem bereits erwähnten Projekt Gieß den Kiez. Diese muss zunächst eingelesen und bereinigt werden. Verwenden Sie dazu folgenden Code; der Text hinter dem `#` zeigt Ihnen an, was die darunter folgenden Codezeilen tun:


```r
# Bezirksgrenzen laden
bezirksgrenzen <- st_read("data/bezirksgrenzen.geojson", quiet = TRUE)

# Bewässerungsdaten laden
df_merged <- readRDS("data/df_merged_final.rds")

# Bezirksgrenzen vorbereiten
berlin_bezirke_sf <- bezirksgrenzen %>%
  rename(bezirk = Gemeinde_name) %>%     # Spalte vereinheitlichen
  mutate(bezirk = str_to_title(bezirk))  # gleiche Schreibweise wie in df_merged
```

Erklärung des Codes:

- `st_read(...)` lädt die GeoJSON-Datei mit den Berliner Bezirksgrenzen als räumliches Objekt ein.

- `readRDS(...)` lädt die RDS-Datei mit den vorbereiteten Bewässerungsdaten und gibt das gespeicherte R-Objekt zurück.

- `rename(...)` benennt die Spalte `Gemeinde_name` in `bezirk` um, um eine einheitliche Schreibweise sicherzustellen.

- `mutate(bezirk = str_to_title(bezirk))` sorgt dafür, dass die Bezirksnamen in der Geodatei dieselbe Schreibweise wie in `df_merged` haben.


## Dashboard bauen

**Farbpalette definieren**

Eine globale Farbpalette definiert ein einheitliches Farbschema für alle Grafiken des Dashboards. Dies ermöglicht Konsistenz in der Gestaltung und erleichtert Nutzer:innen die Orientierung. Diese Palette wird in allen Grafiken der folgenden Kapitel konsistent verwendet:

```r
# GLOBALE FARBPALETTE - Einheitliches Farbschema für alle Grafiken
GDK_PALETTE_BASE <- c(
  "#3C6E97", "#6894B5", "#95BBD4", "#C8E0EF",
  "#3E8395", "#67A7B6", "#98CBD6", "#D0EDF2",
  "#508B71", "#7AB097", "#A5D2BC", "#D6EFE5",
  "#4F626E", "#8D9FA9", "#B2C2CC", "#DCE6EB"
)

GDK_ACCENT <- "#95BBD4"

options(ggplot2.discrete.fill = function() scale_fill_manual(
  values = colorRampPalette(GDK_PALETTE_BASE)(16)
))
```

Erklärung des Codes:

- `GDK_PALETTE_BASE` speichert einen Vektor mit Hexadezimal-Farbcodes. Für dieses Dashboard ist hier eine Farbpalette mit 16 Farben definiert. An dieser Stelle lassen sich problemlos eigene Farben eintragen, um eine ganz individuelle Palette zu erstellen. Alternativ können in R auch Pakete wie `RColorBrewer` oder `viridis` genutzt werden, die bereits vorgefertigte Farbpaletten zur Verfügung stellen.

- `GDK_ACCENT` definiert eine zusätzliche Akzentfarbe für Hervorhebungen.

- `options(ggplot2.discrete.fill = ...)` setzt die Farbpalette als globale Voreinstellung für ggplot2. `colorRampPalette()` interpoliert zwischen den definierten Farben und erzeugt bei Bedarf Zwischentöne.



**Grundstruktur einer Shiny-Anwendung**

Eine typische Shiny-Anwendung besteht aus zwei Hauptkomponenten:
1.	User Interface (UI): Definiert das Layout und die Gestaltung der Anwendung, einschließlich aller Eingabe- und Ausgabeelemente.
2.	Server: Beinhaltet die serverseitige Logik, verarbeitet Eingaben und generiert entsprechende Ausgaben.

Diese beiden Komponenten führen Sie schließlich durch den Befehl `shinyApp(ui = ui, server = server)` zusammen, um die Anwendung zu starten.

Das shinydashboard-Paket erweitert Shiny um Funktionen zur Erstellung von Dashboards. Ein Dashboard besteht typischerweise aus drei Hauptbereichen: Shiny Dashboard Structure
1.	Header: Der obere Bereich des Dashboards, der den Titel und optionale Steuerungselemente enthält.
2.	Sidebar: Eine seitliche Navigationsleiste, die Links oder Schaltflächen zur Navigation innerhalb des Dashboards bereitstellt.
3.	Body: Der Hauptbereich, in dem die Inhalte wie Diagramme, Tabellen und Texte angezeigt werden.

Die Grundstruktur eines Dashboards erstellen Sie mit der Funktion dashboardPage(), die die oben genannten Komponenten kombiniert (bitte führen Sie den folgenden Codeabschnitt *nicht* in der Konsole aus, sondern ersetzen Sie damit vollständig die in Kapitel 1 automatisch generierte Rshiny Schablone im Rshiny Skript):


```r
ui <- dashboardPage(
  # 1. HEADER: Titelbereich des Dashboards
  dashboardHeader(title = "Gieß den Kiez Dashboard"),

  # 2. SIDEBAR: Seitliche Navigationsleiste mit Menüeinträgen
  dashboardSidebar(
    sidebarMenu(
      menuItem("Startseite", tabName = "start", icon = icon("home")),
      menuItem("Karte", tabName = "map", icon = icon("map")),
      menuItem("Zeitverlauf", tabName = "stats", icon = icon("bar-chart")),
      menuItem("Baumstatistik", tabName = "engagement", icon = icon("bar-chart")),
      menuItem("Bewässerungsanalyse", tabName = "analysis", icon = icon("chart-area"))
    )
  ),

  # 3. BODY: Inhaltsbereich
  dashboardBody(
    tabItems(
      tabItem(
        tabName = "start"
        # Hier folgt später der UI-Code für die Startseite (Texte, Bilder, etc.)
      ),
      tabItem(
        tabName = "map"
        # Hier folgen später die UI-Komponenten für die Karte
      ),
      tabItem(
        tabName = "stats"
        # Hier folgen später die UI-Komponenten für den Zeitverlauf
      ),
      tabItem(
        tabName = "engagement"
        # Hier folgen später die UI-Komponenten für die Baumstatistik
      ),
      tabItem(
        tabName = "analysis"
        # Hier folgen später die UI-Komponenten für die Bewässerungsanalyse
      )
    )
  )
)

# 4. SERVER: Backend-Logik, die Daten verarbeitet und an die UI generiert
server <- function(input, output) {
  # Hier folgt später der R-Code zur Datenverarbeitung (z.B. renderPlot, renderLeaflet),
  # der die Grafiken und Inhalte für die jeweiligen Tabs im Body erzeugt.
}

# 5. Zusammenführung: Startet die Shiny-Anwendung
shinyApp(ui = ui, server = server)
```

Die sidebarMenu-Funktion definiert die Navigationselemente, während tabItems die entsprechenden Inhalte für jeden Tab bereitstellt.


**Interaktive Elemente und Reaktivität**

Ein wesentliches Merkmal von Shiny ist seine <a href="https://de.wikipedia.org/wiki/Reaktives_System_(Informatik)" class="external-link" target="_blank"> Reaktivität</a>, die es ermöglicht, dass sich Ausgaben automatisch aktualisieren, wenn sich Eingaben ändern. Dies wird durch reaktive Funktionen und Objekte erreicht.

**Literatur**

```{bibliography}
:filter: docname in docnames
```