# Build A Web Application Based on Shiny

Now that I have three R packages published on CRAN, I want to make a small tool to monitor the downloads of these three R packages. The best way for me is to build a shiny-based web application. This tweet tells how to build this shiny application.

## What’s shiny?

Shiny is an R package that makes it easy to build interactive web apps straight from R. You can host standalone apps on a webpage or embed them in R Markdown documents or build dashboards. You can also extend your Shiny apps with CSS themes, htmlwidgets, and JavaScript actions.

This introduction is from RStudio’s official website http://shiny.rstudio.com/. Every package I build contains a simple shiny application, For example, to start-up demo shiny application in ‘hchinamap’ package, you can run following R codes:

This shiny application is very simple but include various input ways.

## Get Started

Suppose you’re using RStudio. Fisrt, create a ‘Shiny Web Application’ project:

A typical shiny app consists of two parts, or functions, UI and Server. UI function defines the user interface and Server function responds the user’s actions.

This article will not elaborate on Shiny’s basic operations, which can be learned through the official website tutorials: Shiny-tutorial @ RStudio. A good news about Shiny is that Hadley Wickham is writing a book about shiny. You can go to Mastering Shiny @ GitHub to get the original version of the book.

As for this project, I want to use a beautiful shiny template: argonDash @ Github.

Installation:

## Building Process

argonDash provides a complete demo which can be seen by running:

You can build your own app with this example and its source code. Its source code can be found at:

### Design UI

A complete web page interface includes navigation bar, sidebar, body and footer:

This UI function looks quite simple, that was because I split most of the code into other R files.

sidebar.R defines the composition of the sidebar:

The tabName parameters are what you need to focus on. They should correspond exactly to the tabName given in argonTabItems.

navbar.R defines the composition of the navigation bar, a drop-down list:

header.R:

Just a ‘argonCard’ with some text on it.

footer.R is also very simple:

The body part consists of two parts coresponding to two tabName defined in sidebar.R:

cran_tabs.R:

I made a minor adjustment to the argonInfoCard function and named it argonInfoCard2, mainly by deleting a percentage sign from it. At first, Initially, I wanted to use the highcharter package to plot. But I found that the use of the highcharter package would affect the layout of the site, so I later switched to the billboarder package. Note that the tabName(tabName = "downloads") here corresponds to the tabName mentioned above in the sidebar section.

Pay attention to billboarderOutput("cran_downloads"), *Output() and render*() are pairs of functions., *Output() is used in UI functions while render*() is used in Server functions. “cran_downloads” is the id, which acts as a link between *Output() and render*().

github_tabs.R is similar with cran_tabs.R:

## Backend: Server function

Shiny web applications use R as backend. In summary, we define the following in the UI section:

5. textOutput(“total_stars”)
6. textOutput(“total_forks”)
7. textOutput(“followers”)
8. billboarderOutput(“github_stars”)

Next, we need to program some render*() correspond them:

Note that I use the reactive function in the following code:

In fact, it’s unnecessary. Reactive programming means the ouputs are reactive to the input parameters, but I didn’t set input parameter here.

In Shiny, you express your server logic using reactive programming. Reactive programming is an elegant and powerful programming paradigm, but it can be disorienting at first because it’s a very different paradigm to writing a script. The key idea of reactive programming is to specify a graph of dependencies so that when an input changes, all outputs are automatically updated. This makes the flow of an app considerably simpler, but it takes a while to get your head around how it all fits together. —— Mastering Shiny

Just as a example, the core codes of CRAN downloads curve is:

You can learn billboarder at dreamRs/billboarder.

Many R packages were used in the process of writing the Server function above. For examples, cranlogs package is used to obtain CRAN downloads data, gh package is used to get my GitHub repositories’ data, jsonlite is used to process data in JSON format…

Because this application needs to get data from the Internet, charts and data load slowly when the network speed is slow. In order to make the waiting process less boring, we can add loader animations to Shiny Outputs, shinycssloaders package can do this thing. First, install it from GitHub:

Load it and put billboarderOutput() in withSpinner(), or you can use billboarderOutput() %>% withSpinner().

## Deploy

‘shinyapps.io’ allows you to deploy five shinyapps for free. It seems that I have one quota left. Next, I’ll deploy this shiny application on it.

I just need to open https://czxa.shinyapps.io/monitoring to know the total download of my R packages and some information on GitHub.

Chapman Chow

# R