<p><div><div><div><div data-width="100" data-show-faces="false" data-send="true" data-layout="button_count" data-height="21" data-href="https://www.r-bloggers.com/building-shiny-app-exercises-part-1/"></div></div><div></div></div><div></div></div>
<div>
(This article was first published on <strong><a href="http://r-exercises.com/2016/12/12/building-shiny-app-exercises-part-1/"> R-exercises</a></strong>, and kindly contributed to <a rel="nofollow" href="https://www.r-bloggers.com/">R-bloggers)</a> </div>
<p><a target="_blank" rel="nofollow" href="http://r-exercises.com/wp-content/uploads/2016/12/drop-of-water-432542_960_720.jpg?x61433"><img sizes="(max-width: 150px) 100vw, 150px" alt="" class="wp-image-3403" src="https://i2.wp.com/r-exercises.com/wp-content/uploads/2016/12/drop-of-water-432542_960_720-150x150.jpg?resize=150%2C150" data-recalc-dims="1"></a></p>
<p><strong>INTRODUCTION TO SHINY</strong><br>
Shiny is a package from RStudio that can be used to build interactive web pages with RStudio which is is an open source set of integrated tools designed to help you be more productive with R and you can download it from <a target="_blank" rel="nofollow" href="https://www.rstudio.com/products/rstudio/download3/">here</a>. Use the examples in this tutorial to “take a first bite” and prepare for the exercises that follow and will help you build your first Shiny Application from “zero point”. This is the first part of the series and we will just create the interface, make some HTML formatting and add an image to our application. Specifically we will start creating a Shiny Application that will analyze the famous (Fisher’s or Anderson’s) iris data set which gives the measurements in centimeters of the variables sepal length and width and petal length and width, respectively, for 50 flowers from each of 3 species of iris. The species are Iris setosa, versicolor, and virginica. Lets go!<br>
<strong>BUILDING INTERFACE (UI)</strong><br>
Every Shiny application includes two parts: a web page which shows the app to the user (UI), and a computer that activates the app (server). You need to create these two parts. UI is just a web document that the user gets to see and is responsible for creating the layout of the app and telling Shiny exactly where things go. The server is responsible for the logic of the app.<br>
You can create a Shiny app by making a new directory and saving a ui.R and server.R file inside it. Each app will need its own unique directory.<br>
You can run a Shiny app by giving the name of its directory to the function <code>runApp()</code>. For example if your Shiny app is in a directory called “Shiny App”, run it with the following code:<br>
<code><br>
library(shiny)<br>
runApp(&quot;Shiny App&quot;)<br>
</code><br>
Or by just clicking the “Run App” button at the top of the editor which is the safest solution.</p>
<p>Answers to the exercises are available <a target="_blank" rel="nofollow" href="http://r-exercises.com/2016/12/12/building-shiny-app-solutions-part-1/">here</a>.</p>
<p>If you obtained a different (correct) answer than those listed on the solutions page, please feel free to post your answer as a comment on that page.</p>
<p><strong>Exercise 1</strong></p>
<p>Create a new directory named “Shiny App” in your working directory.</p>
<p><strong>Exercise 2</strong></p>
<p>Create the ui.r and server.r files.</p>
<p><strong>Secondly</strong>, we have to install the “Shiny” package with:<br>
<code><br>
install.packages(&quot;shiny&quot;)<br>
</code><br>
and then we will call it with:<br>
<code><br>
library(shiny)<br>
</code><br>
Now that we analyzed the structure of a Shiny app, we will show you how to build a user-interface for this.<br>
To get started, we open the server.R and ui.R files and edit them like this:<br>
#ui.R<br>
<code>shinyUI(fluidPage())</code><br>
#server.R<br>
<code>shinyServer(function(input, output) {})</code><br>
The result is an empty app with a blank user-interface, just to begin with.</p>
<p><strong>Exercise 3</strong></p>
<p>Create an empty app with a blank user-interface.</p>
<p><strong>LAYOUT</strong><br>
Shiny ui.R scripts use the function <code>fluidPage()</code> to create a display that automatically adjusts to the dimensions of your user’s browser window. You lay out your app by placing elements in the <code>fluidPage()</code> function.<br>
For example, the ui.R script below creates a user-interface that has a title panel and then a sidebar layout, which includes a sidebar panel and a main panel. Note that these elements are placed within the <code>fluidPage()</code> function.<br>
#ui.R<br>
<code><br>
shinyUI(fluidPage(<br>
titlePanel(&quot;title panel&quot;),<br>
sidebarLayout(<br>
    sidebarPanel( &quot;sidebar panel&quot;),<br>
    mainPanel(&quot;main panel&quot;))))<br>
</code><br>
The <code>TitlePanel()</code> and <code>sidebarLayout()</code> are the two most used elements to add to <code>fluidPage()</code>. They create a basic Shiny app with a sidebar.<br>
The <code>sidebarLayout()</code> always takes two arguments: sidebarPanel function output and mainPanel function output.</p>
<p><strong>Exercise 4</strong></p>
<p>Create <code>titlePanel()</code>, name it “Shiny App” and <code>sidebarLayout()</code>. Do not forget to add <code>sidebarPanel()</code> and <code>mainPanel()</code> inside this. </p>
<p><strong>HTML Content</strong><br>
You can add content to your Shiny app by placing it inside a *Panel function.<br>
<strong>HEADERS</strong><br>
To create a header element: select a header function e.g. <code>(h1)</code> and give it the text you want to see in the header.<br>
For example, you can create a first level header that says “Title” with <code>h1(&quot;Title&quot;)</code>.<br>
To place the element in your app:<br>
Put <code>h1(&quot;Title&quot;)</code> as an argument to <code>titlePanel()</code>, <code>sidebarPanel()</code>, or <code>mainPanel()</code>.<br>
The text will appear in the corresponding panel of your web page. You can place multiple elements in the same panel if you separate them with a comma.<br>
#ui.R<br>
<code><br>
shinyUI(fluidPage(<br>
  titlePanel(&quot;My Shiny App&quot;),<br>
  sidebarLayout(<br>
    sidebarPanel(),<br>
    mainPanel(<br>
      h1(&quot;First level title&quot;),<br>
      h2(&quot;Second level title&quot;)))))<br>
</code></p>
<p><strong>Exercise 5</strong></p>
<p>Create an HTML element to add the title “Menu” in the <code>sidebarPanel()</code> and “Main” in <code>mainPanel()</code> with one of Shiny’s tag functions. HINT: Use <code>h1</code>,<code>h2</code>.</p>
<p><strong>FORMATTED TEXT</strong><br>
Shiny offers many tag functions for formatting text.Take a look:<br>
<code>p</code>:	A paragraph of text<br>
<code>h1</code>:	A first level header<br>
<code>h2</code>: A second level header<br>
<code>a</code>:	A hyper link<br>
<code>br</code>:	A line break (e.g. a blank line)<br>
<code>div</code>: A division of text with a uniform style<br>
<code>span</code>: An in-line division of text with a uniform style<br>
<code>pre</code>: Text ‘as is’ in a fixed width font<br>
<code>code</code>: A formatted block of code<br>
<code>img</code>: An image<br>
<code>strong</code>: Bold text<br>
<code>em</code>:	Italicized text</p>
<p><strong>Exercise 6</strong></p>
<p>Add a paragraph in your <code>mainPanel()</code> with a description about the app you are going to make.”This famous (Fisher’s or Anderson’s) iris data set gives the measurements in centimeters of the variables sepal length and width and petal length and width, respectively, for 50 flowers from each of 3 species of iris. The species are Iris setosa, versicolor, and virginica.” Use an HTML tag format. HINT:Use <code>p</code>.</p>
<p><strong>Exercise 7</strong></p>
<p>Link the word “iris” in the <code>mainPanel()</code> with this hyperlink “http://stat.ethz.ch/R-manual/R-devel/library/datasets/html/iris.html”. HINT: Use <code>a</code>.</p>
<p><strong>Exercise 8</strong></p>
<p>Add the title “Analysis” under the desciption paragraph of your <code>mainPanel</code>. Do not forget the comma separation. HINT: Use <code>br</code> and <code>h2</code>.</p>
<p><strong>Exercise 9</strong></p>
<p>Use bold text to the words “Iris setosa”,”versicolor” and “virginica”. HINT: Use <code>strong</code>. </p>
<p><strong>IMAGES</strong><br>
Images can improve the appearance of your app and help users understand the content. Shiny uses <code>img()</code> function to put image files in your app. To insert an image, give the <code>img()</code> function the name of your image file as the <code>src</code> argument (e.g., <code>img(src = &quot;my_image.png&quot;))</code>. You can also include other HTML parameters such as <code>height</code> and <code>width</code>. For example:<br>
<code><br>
img(src = &quot;my_image.png&quot;, height = 68, width = 68)<br>
</code>.<br>
The <code>img()</code> function looks for your image file in a specific place. Your file must be in a folder named “www” in the same directory as the ui.R script. Shiny will share any file placed here with your user’s web browser, which makes “www” a great place to put images, style sheets, and other things the browser will need to build the web components of your Shiny app. So if you want to use an image named “something.png”, your Shiny App directory should look like this one:<br>
#ui.R<br>
<code><br>
shinyUI(fluidPage(<br>
  titlePanel(&quot;My Shiny App&quot;),<br>
  sidebarLayout(<br>
    sidebarPanel(),<br>
    mainPanel(<br>
      img(src=&quot;something.png&quot;, height = 350, width = 350)))))<br>
</code></p>
<p><strong>Exercise 10</strong></p>
<p>Download <a target="_blank" rel="nofollow" href="https://www.google.gr/search?q=iris+dataset+r&espv=2&biw=1280&bih=918&source=lnms&tbm=isch&sa=X&ved=0ahUKEwj33cH1r9HQAhVMWRoKHSu7Ce4Q_AUIBigB#imgrc=AIEIMX6dGQNuLM%3A">this</a> image and place it in a folder labeled “www” within your “Shiny App” directory. Name it “petal”, add .jpg extension and then call the <code>img</code> function inside the <code>sidebarPanel()</code>. Use <code>height</code> and <code>width</code> to decide its dimensions.</p>
<p>
<div>
<div>To <strong>leave a comment</strong> for the author, please follow the link and comment on their blog: <strong><a href="http://r-exercises.com/2016/12/12/building-shiny-app-exercises-part-1/"> R-exercises</a></strong>.</div>
<hr>
<a rel="nofollow" href="https://www.r-bloggers.com/">R-bloggers.com</a> offers <strong><a rel="nofollow" href="https://feedburner.google.com/fb/a/mailverify?uri=RBloggers">daily e-mail updates</a></strong> about <a title="The R Project for Statistical Computing" rel="nofollow" href="https://www.r-project.org/">R</a> news and <a title="R tutorials" rel="nofollow" href="https://www.r-bloggers.com/search/tutorial">tutorials</a> on topics such as: <a title="Data science" rel="nofollow" href="https://www.r-bloggers.com/search/data%20science">Data science</a>, <a title="Big Data" rel="nofollow" href="https://www.r-bloggers.com/search/Big%20Data">Big Data, <a title="R jobs" rel="nofollow" href="https://www.r-users.com/">R jobs</a>, visualization (<a title="ggplot and ggplot2 tutorials" rel="nofollow" href="https://www.r-bloggers.com/search/ggplot2">ggplot2</a>, <a title="Boxplots using lattice and ggplot2 tutorials" rel="nofollow" href="https://www.r-bloggers.com/search/boxplot">Boxplots</a>, <a title="Maps and gis" rel="nofollow" href="https://www.r-bloggers.com/search/map">maps</a>, <a title="Animation in R" rel="nofollow" href="https://www.r-bloggers.com/search/animation">animation</a>), programming (<a title="RStudio IDE for R" rel="nofollow" href="https://www.r-bloggers.com/search/RStudio">RStudio</a>, <a title="Sweave and literate programming" rel="nofollow" href="https://www.r-bloggers.com/search/sweave">Sweave</a>, <a title="LaTeX in R" rel="nofollow" href="https://www.r-bloggers.com/search/LaTeX">LaTeX</a>, <a title="SQL and databases" rel="nofollow" href="https://www.r-bloggers.com/search/SQL">SQL</a>, <a title="Eclipse IDE for R" rel="nofollow" href="https://www.r-bloggers.com/search/eclipse">Eclipse</a>, <a title="git and github, Version Control System" rel="nofollow" href="https://www.r-bloggers.com/search/git">git</a>, <a title="Large data in R using Hadoop" rel="nofollow" href="https://www.r-bloggers.com/search/hadoop">hadoop</a>, <a title="Web Scraping of google, facebook, yahoo, twitter and more using R" rel="nofollow" href="https://www.r-bloggers.com/search/Web+Scraping">Web Scraping</a>) statistics (<a title="Regressions and ANOVA analysis tutorials" rel="nofollow" href="https://www.r-bloggers.com/search/regression">regression</a>, <a title="principal component analysis tutorial" rel="nofollow" href="https://www.r-bloggers.com/search/PCA">PCA</a>, <a title="Time series" rel="nofollow" href="https://www.r-bloggers.com/search/time+series">time series</a>, <a title="finance trading" rel="nofollow" href="https://www.r-bloggers.com/search/trading">trading</a>) and more...
<img height="1" alt="" width="1" src="http://feeds.feedburner.com/~r/RBloggers/~4/WAmQaggoFJw"></a></div>