Hacking for Science

Block 3, Session 2: Infrastructure for Team Projects

Matt Bannert (@whatsgoodio)

Today’s Goals

  • understand the difference between static and dynamic web projects
  • find the stack for team projects

Introduction to GitHub Pages (and other static hosts)

Examples

Github Pages in a Nutshell

  • every github repository can opt to have a repository specific website
  • GitHub Pages is designed to document and/or market the software developed in the repo the URL pattern is: user.github.io/repository-name
  • GitHub Pages sites either reside on a separate gh-pages branch or in the docs folder on the main branch.
  • GitHub Pages can be activated through the Github GUI
  • GitHub Pages can host either .md files or .html webpages (including .js and .css)

How to Create Content for Static Hosts?

Introduction to GitHub Actions

What is GitHub Actions?

Example Outline

  • Prepare a task you want to run, e.g., an R script.
  • Configure an environment AND workflow in a simple .yaml text file
  • Push the file to a hidden folder .github/workflows (this won’t be necessary if you edited the file directly on GitHub
  • Use the GitHub web GUI to monitor the process.

https://crontab.guru/

cronjobs - execute on schedule. GitHub Actions docs

Introduction to Shiny

server.R (Why Do I have to Do All the Work ?)

ui.R (I may be late, but I look gooooooood.)

What Does the shiny Framework Do for Us?

  1. create HTML/CSS/Javascript code
  2. start/run a (local) webserver
  3. communication between the R session and the browser

A minimal note on HTML

  • Markup language
  • content is wrapped in tags
<a href="http://somedestination.com">some link</a>
<b>this is bold</b>
<i>this is italic</i>
<div class="some-class">a class with a style</div>

=> shiny functions create these wraps for us.

Breaking Down the Hello World App

ui.R

library(shiny)
shinyUI(fluidPage(
  titlePanel("A random normal"),
  # Sidebar with a slider input for number of bins 
  sidebarLayout(
    sidebarPanel(
      sliderInput("obs",
                  "Number of obs:",
                  min = 1,
                  max = 1000,
                  value = 100)
    ),
    mainPanel(
      plotOutput("randomPlot")
    )
  )
))

Breaking Down the Hello World App

ui.R

library(shiny)
shinyUI(fluidPage(
  titlePanel("A random normal"),
  # Sidebar with a slider input for number of bins 
  sidebarLayout(
    sidebarPanel(
      sliderInput("obs",
                  "Number of obs:",
                  min = 1,
                  max = 1000,
                  value = 100)
    ),
    mainPanel(
      plotOutput("randomPlot")
    )
  )
))

server.R

shinyServer(function(input, output) {
    output$randomPlot <- renderPlot({
    hist(rnorm(input$obs),
         col = 'darkgray',
         border = 'white')
  })
})

Planning the App

This course: dashboard structure

  • sidebar
  • topbar
  • main panel
  • menu buttons / sub pages

The shinydashboard package

library(shinydashboard)
dashboardPage(
  dashboardHeader(),
  dashboardSidebar(),
  dashboardBody()
)

Are you ready for to build a real app?

More Shiny Resources

Basics

Advanced Reads

Hacking for Science by Dr. Matthias Bannert is licensed under CC BY-NC-SA 4.0