›   Demo 4: Predictive Maintenance mit R
›   Teil 2: Erstellung einer interaktiven Shiny-App mit RStudio

Die interaktive Shiny-App PredMaintApp zur Vorausschauenden Wartung wurde mit dem R-Paket Shiny erstellt. Dieses stellt einen einfachen und schnellen Zugang zur App-Erstellung mit R bereit. Die Schritt-für-Schritt-Anleitung zur Erstellung und Ausführung einer Shiny-App in der Entwicklungsumgebung RStudio werden hier im zweiten Teil der Demo dargestellt und anhand eines Videos erläutert.

info-icon Motivation

Shiny ist ein R-Paket mit dem einfach und schnell interaktive Webanwendungen mit R erstellt werden. Shiny verfügt über vorinstallierte Ein- und Ausgabe-Bedienelemente, die eine automatische "reaktive" Bindung untereinander besitzen. Damit kann die App interaktiv und live vom Benutzer angepasst werden.
Shiny-Apps können in der Cloud gehostet oder als eigenständige Anzeigetafel auf externen Ausgabemedien (Notebooks, Tablets, Smartphones usw.) verwendet werden und bieten damit einen umfangreiches Anwendungsfeld an.

Shiny-Apps sind ein ansprechendes Werkzeug, um Inhalte und Funktionen aus dem Bereich des Maschinellen Lernens auf einer Benutzeroberfläche darzustellen. Der Anwender kann ohne Hintergrundwissen zur Programmiersprache oder mathematischen Methoden die notwendigen Tools verwenden.

Warum RStudio?

RStudio ist eine Entwicklungsumgebung und grafische Benutzeroberfläche für z.B. die Datenanalyse mit Hilfe der statistischen Programmiersprache R, die in Open-Source- und kommerziellen Editionen erhältlich ist und auf dem Desktop (Windows, Mac und Linux) oder in einem Browser läuft. RStudio kann als Client oder Server betrieben werden und ist über Pakete (Packages) erweiterbar.
Die zur Datenanalyse benötigten Algorithmen sind in Pakete zusammengefasst, die nach Bedarf geladen werden können. Alle gängigen Aufgaben der Datenanalyse werden so abgebildet und über Pakete, die aus der R-Konsole installiert werden können, zur Verfügung gestellt. Mit Hilfe des Packages Shiny können z.B. Webseiten/Apps für Datenanalysen gebaut werden.

info-icon Übersicht

Diese Schritt-für-Schritt-Anleitung ist in 5 Abschnitte gegliedert. Zunächst werden die zur Erstellung einer Shiny-App benötigten Pakete und Dateien beschrieben, mit diesen wird im nächsten Abschnitt eine Mini-App erstellt, die die Funktionsweise der miteinander kommunizierenden Ein- und Ausgabewidgets erläutert.

Alle Schritte dieser Anleitung werden zusätzlich in einem Video zusammengefasst.

  1. R-Pakete

  2. App erstellen

  3. App ausführen

  4. Mini-App

  5. YouTube-Video

R-Pakete

Um eine Shiny-App zu erstellen, benötigt man zunächst das R-Paket Shiny. Für aufwendigere Benutzeroberflächen mit Dashboard, Themes und Tooltips werden weitere Pakete benötigt, wie shinydashboard oder shinyBS. Die benötigten Pakete werden in der RStudio-Konsole mit dem Befehl install installiert, z.B.

 install.packages("shiny")

Eine Shiny-App kann informell als eine Internetseite mit Benutzeroberfläche (engl. ui, User Interface) beschrieben werden, die mit einem Computer verbunden ist, auf dem eine aktive R-Session läuft (engl. server). Der Entwickler der Shiny-App kann die Oberfläche anpassen. Über vorinstallierte miteinander kommunizierende Ein- und Ausgabe-Widgets, also automatische "reaktive" Bindungen, wird über den Server, der den R-Quellcode ausführt, die Bildschirmanzeige der Benutzeroberfläche aktualisiert.

Eine Übersicht über die Syntax und Methodik einer interaktiven Webanwendung mit Shiny finden Sie hier.

App erstellen

Eine erste minimale Shiny-App ist einfach eine R-Datei, die wir hier vorlage.R nennen, die den folgenden Code enthält.

Quellcode der vorlage.R-Datei
 library(shiny)  #Paket laden
 
 ui <- fluidPage()  # Funktion definiert die Benutzeroberfläche
 server <- function(input, output){}   # Funktion mit R-Anweisungen und -Objekten
 
 # Funktion, die ui und server zu einer Shiny-Anwendung verknüpft 
 shinyApp(ui = ui, server = server)

Eine Shiny-App kann entweder als eine Datei (in unserem Fall vorlage.R) oder als zwei Dateien (ui.R und server.R) gespeichert werden. Die Alternative mit zwei Dateien bietet sich bei größeren Anwendungen an, damit der Quellcode übersichtlicher gestaltet werden kann. Verwendet man zwei Dateien, muss shinyApp() nicht aufgerufen werden, siehe Shiny-Anleitung RStudio.

App ausführen

Die Datei vorlage.R wird ausgeführt, indem in RStudio auf den Button "Run App" geklickt wird. Es öffnet sich ein Fenster mit der noch leeren Shiny-App. Die Shiny App kann alternativ auch in einem Browser angezeigt werden.

Screenshot RStudio Shiny-App im Browser



Da noch keine Elemente in der ui-Funktion erstellt/definiert wurden, erfolgt auch keine Anzeige auf der Oberfläche der App. Beim Ausführen erzeugt der in R geschriebene Code eine Webseite (HTML, CSS und Javascript) mit responsivem Design.

Mini-App

In diesem Abschnitt wird die vorlage.R-Datei erweitert um eine Mini-App zu erstellen, die die Funktionsweise der miteinander kommunizierenden Ein- und Ausgabewidgets erläutert. Dazu werden die ui-Funktion um Elemente der Benutzeroberfläche und die server-Funktion um R-Anweisungen und -Objekte ergänzt.

Layout der App

Im ersten Schritt wir das Layout der App festgelegt, hierbei werden einzelne Elemente über die Panel-Funktion zu einem einzigen Element, einem Feld, mit festen Eigenschaften zusammengefügt. Mit verschiedenen Layout-Funktionen kann das Design und die Anordnung der Felder vorgegeben werden. In dieser Mini-App wird zuerst das "Sidebar"-Layout vorgestellt, das ein responsives Webdesign erstellt und das seitliche Feld und das Hauptfeld je nach Anzeigemedium nebeneinander oder untereinander anordnet. Die Änderungen werden unter dem Namen "miniApp" als neue R-Datei gespeichert.

Die Anpassungen in der ui-Funktion sehen wie folgt aus:

Quellcode Anzeige der App
 ui <- fluidPage(
     sidebarLayout(
       sidebarPanel(),
       mainPanel()
     )
 )

Hier ist die Desktop-Ansicht dargestellt, das seitliche Feld (grau hinterlegt) und das Hauptfeld (weiß hinterlegt) werden nebeneinander angezeigt.

Da noch keine Elemente in der ui-Funktion erstellt/definiert wurden, sondern nur die entsprechenden Felder vorbereitet wurden, erfolgt auch keine Anzeige in den Feldern der App.

Da zur Übersicht und Navigaton innerhalb der App ein Titel und eine Menü-Führung sinnvoll ist, wird das obige Layout abgeändert, indem mit dem Layout "navbarPage" ein Titel vergeben und mehrere Felder/Panels zum Navigieren übereinander gelegt, d.h. Tabs angelegt, werden. Dazu wird die sidebarLayout-Funktion durch die navbarPage-Funktion ersetzt und die einzelnenen Tabs mit seitlichem Feld und Hauptfeld gefüllt.

Quellcode ui-Funktion mobile Anzeige der App
 ui <- fluidPage(
   navbarPage(title="Mini-App",
             tabPanel("Tab 1",
                 sidebarPanel(),
                 mainPanel()
              ),
              tabPanel("Tab 2",
                 sidebarPanel(),
                 mainPanel()
              )
   )
 )   # Funktion definiert die Benutzeroberfläche

Hier ist die mobile Ansicht dargestellt, die Navigations-Tabs stehen untereinander, sowie das seitliche Feld (grau hinterlegt) und das Hauptfeld (weiß hinterlegt).

Statische HTML-Elemente in der Benutzeroberfläche

Da die Benutzeroberfläche der Shiny-Anwendung ein HTML-Dokument ist, werden statische, also nicht veränderbare, Elemente über R-Funktionen erzeugt. Tags stehen dabei zur Erstellung von statischen Elementen zur Verfügung, vergleichbar mit den HTML-Tags:

Mittels dieser Tags kann die Benutzeroberfläche (ui-Funktion) mit Inhalt gefüllt werden. Bilder, die eingefügt werden sollen, müssen in einem Unterverzeichnis namens "www" gespeichert werden und können dann mit dem "img"-Tag eingefügt werden.

Anwendung in der Mini-App

In der Mini-App wird Text mittels des h3- und h4-Tags, Bilder mittels des img-Tags und Links mittels des a-Tags gesetzt.

Quellcode-Auszug der ui-Funktion mobile Anzeige der App
 ui <- fluidPage(
   navbarPage(title="Mini-App",
     tabPanel("Info",
        sidebarPanel(
          img(src = 'info-icon.png',
              height = "40px"),
          h3("Willkommen!"),
          h4("Diese App [..] 
           [..]Programmiersprache R.")
          ),
          mainPanel( 
           h4("Shiny ist...")
           )
   ),
 )   # Funktion definiert die Benutzeroberfläche

In der Mini-App werden mittels des a-Tags Links gesetzt. Damit der Link vom Layout zum restlichen Text passt, wird die paste0()-Tag als direkte HTML-Funktion genutzt, dazu wird der HTML()-Tag im R-Quellcode aufgerufen.

Quellcode-Auszug der ui-Funktion mobile Anzeige der App
 ui <- fluidPage(
   navbarPage(title="Mini-App",
     tabPanel("Links",
      mainPanel(
       HTML(paste0(h4("Hier geht es zur Shiny-Webseite:" ,
            a(href="https://shiny.rstudio.com/", 
            "Shiny", target="_blank")               
       )))
      )
     )
 )   # Funktion definiert die Benutzeroberfläche

Die Links erscheinen durch die paste0-Funktion im selben Layout wie der Text.

Reaktive Ein- und Ausgabe-Elemente in der Mini-App

Die folgende Funktionsweise der miteinander kommunizierenden Ein- und Ausgabewidgets wird anhand der Mini-App erläutert.

Auf aktuelle Werte eines Eingabeobjektes wird vom Server mit input$inputId-Name zugegriffen. Eingabewerte sind reaktionsfähig (engl. reactive) und werden sofort an die im Hintergrund laufende aktive R-Session (server-Funktion) weitergegeben. Eingabewerte werden in der Benutzeroberfläche (ui-Funktion) mit *Input()-Funktionen eingefügt/erstellt und Ausgabewerte aus der server-Funktion mit der *Output()-Funktion in die Benutzeroberfläche eingebunden. Dazu müssen die Ausgaben mit einem Namen output$id-name benannt werden und der Ausgabe-Code von einer render*({})-Funktion umschlossen werden, bevor die Ausgabe unter dem Namen output$id-name gespeichert wird.

Eine Übersicht über die render*({})-Funktionen der server-Funktion und die *Output()-Funktionen der ui-Funktion finden sie auf Shiny-Anleitung RStudio.

Anwendung in der Mini-App

Quellcode-Auszug der ui- und server-Funktion mobile Anzeige der App
 ui <- fluidPage(
   navbarPage(title="Mini-App",
     tabPanel("Grafische Anzeige",
       mainPanel(
        sliderInput(inputId = "n", 
            "Anzahl der Zufallswerte:",
            min=1,max=100, 
            value = 25),
        plotOutput(outputId = "hist")
       )
      )
     )
 )   # Funktion definiert die Benutzeroberfläche
  
 server <- function(input, output){  
   output$hist<-renderPlot({
    hist(rnorm(input$n), freq=FALSE,
             xlab="Wertebereich ",
             ylab="Häufigkeit der Werte",
             main="Histogramm")})
    }  # Funktion mit R-Anweisungen und -Objekten

Bei Änderungen am Schieberegler wir das Histogramm automatisch an die neu gezogene Stichprobe angepasst.

YouTube-Video

Die Erstellung und Ausführung einer interaktiven Shiny-App und die Reaktivität der verwendeten Ein- und Ausgabewidgets wird durch ein Video (Screencast mit zusätzlichen Erläuterungen) veranschaulicht.

Mit Beiträgen von:
 M. Sc. Anke Welz und
 Prof. Dr. Eva Maria Kiss
Tools, Software und weiterführende Links:
RStudio, Shiny Apps Shiny-Anleitung RStudio