Building an award-winning Shiny App

class: title-slide, left

# From 0 to .logoblue[Shiny] in 69 Love Songs

## David Smale | Brighton R | August 2020

---
class: inverse, right, bottom

# Get in touch...

[ @committedtotape](http://twitter.com/committedtotape) 
[ @committedtotape](http://github.com/committedtotape) 
[ davidsmale@netlify.app](https://davidsmale.netlify.app/portfolio/) 
[ davidlsmale@gmail.com](mailto:davidlsmale@gmail.com)

---
class: inverse, center, top

# Who am I?

.pull-left[
👨‍💻  .small[R User for around 2 years]

😎 .small[Tidyverse fanboy]  
]

.pull-right[
🐦  .small[R Tweeter and blogger]

🏏   .small[Indiepop, Wes Anderson, Cricket]
]

---
class: picture, center, middle

.pull-left[
 
 
# Ooooh... 
# ✨ Shiny ✨...
]

.pull-right[
 
 
<img style="border-radius: 10%;" src="https://i2-prod.dailyrecord.co.uk/incoming/article9485076.ece/ALTERNATES/s615b/Panini-stickers.jpg" width="90%"/>
]

---
class: inverse, left, middle

# What's a Shiny App?

*  Shiny is an R package for building interactive web apps

*  Allows users to interact with your data and analysis

*  No web development skills required!

*  All built within R and can be shared easily and for free!

---
class: inverse, right, middle

.pull-left[
<blockquote class="twitter-tweet">Announcing the 1st Shiny Contest In order to encourage more sharing, as well as to recognize the many outstanding ways people work with Shiny, we are happy to announce the first contest to recognize outstanding Shiny applications!<a href="https://t.co/LduHLuNIQB">https://t.co/LduHLuNIQB</a> <a href="https://t.co/u4NyXn0FZi">pic.twitter.com/u4NyXn0FZi</a>&mdash; RStudio (@rstudio) <a href="https://twitter.com/rstudio/status/1082349589922041858?ref_src=twsrc%5Etfw">January 7, 2019</a></blockquote>
]

.pull-right[
 
 
 
# The Motivation

📢 First ever Shiny Contest announced by RStudio on 7th January last year

🗓 Deadline of 8th March

🏆 Awards (& Recognition) to be won!

]
---
class: inverse, left, top

# The Competition

The requirements for a submission were:

*  The app should be in an [RStudio Cloud](http://rstudio.cloud/) project.

*  The app should be deployed on [shinyapps.io](http://shiny.rstudio.com/articles/shinyapps.html).

*  Any data and code used in the app should be publicly available and/or openly licensed.

*  Entries submitted to [RStudio Community](https://community.rstudio.com/) (no limit to submissions per participant!)

With the apps to be judged on technical merit and/or on artistic achievement

---
class: inverse, center, middle

# The Inspiration

.pull-left[
### Text Mining

]

.pull-right[
### Song Lyrics

]

---
class: inverse, center, middle

# Something to work with...

.pull-left[

]

.pull-right[

]

---
class: inverse, left, top

# Making it Shiny

A shiny app is built from a single script called `app.R`, which contains:

*  UI object - Defines layout and appearance of the app

*  Server function - what’s needed to build the app

*  shinyApp() function

```r
library(shiny)

ui <- ...

server <- ...

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

---
class: inverse, left, middle

# Customise 🎨

.pull-left[

*  Customise your app using CSS

*  If you don't know CSS - don't worry nor did I (and I still don't)

*  Instantly transform your app with a change of font and a flash of colour!

*  Create a separate CSS file and include in UI
]

.pull-right[

```r
* {
  font-family: 'Courier', cursive !important;
}

a {
  color: #E00008;
}
a:hover {
  color: #858B8E;
}
```

```r
includeCSS("styles.css")
```
]
---
class: inverse, left, top

# Packages

🌽 `{rvest}` - Scraping lyrics from the web

⭐ `{tidyverse}` - All the things

📖 `{tidytext}` - Text mining the tidy way

☁️ `{wordcloud2}` - Interactive word clouds

⛓ `{tidygraph}` - Networks the tidy way

🕸 `{vizNetwork}` - Interactive network viz

🔡 `{DT}` - Interactive HTML tables

---
class: picture, center, middle

# Live Demo!!!

### [https://committedtotape.shinyapps.io/sixtyninelovesongs/](https://committedtotape.shinyapps.io/sixtyninelovesongs/)

---
class: inverse, left, middle

# The Results

.pull-left[
## 🎉 I won!!! 🎉

Awarded 'Best Design'

They sent me merch!

Also, had a one-on-one session with RStudio CTO and Shiny inventor, Joe Cheng
]

.pull-right[
<blockquote class="twitter-tweet">My <a href="https://twitter.com/hashtag/shiny?src=hash&amp;ref_src=twsrc%5Etfw">#shiny</a> contest winnings have arrived! Feeling very <a href="https://twitter.com/hashtag/rstats?src=hash&amp;ref_src=twsrc%5Etfw">#rstats</a> right now. Thanks <a href="https://twitter.com/rstudio?ref_src=twsrc%5Etfw">@rstudio</a>! <a href="https://t.co/l6eRZ4W0Jk">pic.twitter.com/l6eRZ4W0Jk</a>&mdash; David Smale 🔎 (@committedtotape) <a href="https://twitter.com/committedtotape/status/1139825701979381760?ref_src=twsrc%5Etfw">June 15, 2019</a></blockquote>
]

---
class: inverse, center, middle

# Other submissions

.pull-left[
## [Hex Memory Game by pvictor](https://dreamrs.shinyapps.io/memory-hex/)

<img src = "https://d33wubrfki0l68.cloudfront.net/ed6f1b09e6eb8f8ca4e3c1355312f6ab025cc454/9ee23/images/2019-04-05-hex-game.gif" width = "95%">
]

.pull-right[
## [tidytuesday.rocks by Neal Grantham](https://nsgrantham.shinyapps.io/tidytuesdayrocks/)

<img src = "https://d33wubrfki0l68.cloudfront.net/52c7721c7914fe7492f4f32a869279d66a790a0f/73d7d/images/2019-04-05-tidytuesday.gif">
]

---
class: inverse, left, top

# Shiny Contest 2020

📢 Announced at [rstudio::conf](https://resources.rstudio.com/rstudio-conf-2020/making-the-shiny-contest-mine-%C3%A7etinkaya-runde) at end of January

⌛ Closed on 20th March

🤞 I entered again, this time - [Wes Anderson](https://committedtotape.shinyapps.io/wesandersonnetwork/)

.center[![](https://media.giphy.com/media/oHihEfEj9EkGk/giphy.gif)]

### 👀 Winners announced on 13th July. Alas, I didn't win this time, see this year's winning apps [here](https://blog.rstudio.com/2020/07/13/winners-of-the-2nd-shiny-contest/)

---
class: inverse, left, top

# Taking Shiny Further

## Learn more

*  RStudio's Shiny Tutorials at [https://shiny.rstudio.com](https://shiny.rstudio.com/tutorial/)

*  [Mastering Shiny](https://mastering-shiny.org/) by Hadley Wickham: Under development, but read the draft now.

## Going even further

*  [Engineering Production-Grade Shiny Apps](https://engineering-shiny.org/) by ThinkR

*  Shiny modules for when your app becomes large and complicated

*  Easier app customisation with [bootstraplib](https://resources.rstudio.com/rstudio-conf-2020/styling-shiny-apps-with-sass-and-bootstrap-4-joe-cheng)

---
class: inverse, center, middle

# 🙌 
# Thank you!

📦 Slides made using the `xaringan` package

🖥 Slides available at: [davidsmale.netlify.app/slides/sixty_nine_love_songs](https://davidsmale.netlify.app/slides/sixty_nine_love_songs)

👨‍💻 Code behind the slides at: [github.com/committedtotape](https://github.com/committedtotape/presentations)