<?xml version="1.0" encoding="utf-8"?><feed xmlns="http://www.w3.org/2005/Atom" ><generator uri="https://jekyllrb.com/" version="3.10.0">Jekyll</generator><link href="http://younghasuh.com/feed.xml" rel="self" type="application/atom+xml" /><link href="http://younghasuh.com/" rel="alternate" type="text/html" /><updated>2024-10-29T19:22:01+00:00</updated><id>http://younghasuh.com/feed.xml</id><title type="html">Young Ha Suh</title><subtitle>Write an awesome description for your new site here. You can edit this line in _config.yml. It will appear in your document head meta (for Google search results) and in your feed.xml site description.</subtitle><author><name>Young Ha Suh</name></author><entry><title type="html">Getting started with your own Shiny app</title><link href="http://younghasuh.com/blog/shiny-start/" rel="alternate" type="text/html" title="Getting started with your own Shiny app" /><published>2024-06-27T00:00:00+00:00</published><updated>2024-06-27T00:00:00+00:00</updated><id>http://younghasuh.com/blog/shiny-start</id><content type="html" xml:base="http://younghasuh.com/blog/shiny-start/"><![CDATA[<h1>Shiny App for Collections Data</h1>

<p>From set up to deployment</p>

<p>Author: Young Ha Suh</p>

<p>Last updated: 6/27/2024</p>

<h2>Setup and requirements</h2>

<h3>R and RStudio</h3>

<p><strong>R</strong> is a free, open-source programming language for statistical computing and data visualization. In the case of our app and collection data, it will be the main way we write the code needed to generate the application. Instructions for downloading can be found <a href="https://www.r-project.org/">here</a> or <a href="https://r4ds.had.co.nz/introduction.html#prerequisites">here</a>.</p>

<p>We will use R through <strong>RStudio</strong>, an integrated development environment (IDE) for R. Think of it as a more visual, user-friendly software for coding in R. It includes a console, syntax-highlighting editor that supports direct code execution, and tools for plotting, history, debugging, and workspace management. <a href="https://posit.co/downloads/">Download here</a>.</p>

<h4>RStudio basics</h4>

<p>While I won’t cover all the basics of RStudio here, it’s important to note certain components of the user interface. You can find more information <a href="https://docs.posit.co/ide/user/ide/guide/ui/ui-panes.html">here</a>.</p>

<ul>
  <li>The <strong>Source Pane</strong> is where you can view and edit various code-related files (.R, .rmd, .txt). If there is more than one file open, you will see tabs that you can select through.</li>
  <li>The <strong>Console</strong> is where you can execute code.</li>
  <li>The <strong>Environments</strong> are a set of tabs but the one that you’ll use the most is the first Environment tab which lists currently saved R objects such as tables or models.</li>
  <li>The <strong>Output Pane</strong> also shows multiple tabs.
    <ul>
      <li><strong>Files</strong> lists all the files in the folder or R project directory.</li>
      <li><strong>Plots</strong> displays various outputs such as plots or html content.</li>
      <li><strong>Packages</strong> shows currently installed R packages and which ones are loaded in the current session. You can search or install/update packages here.</li>
      <li><strong>Help</strong> displays package documentation and vignettes, if you need to remember how a function works, for instance.</li>
    </ul>
  </li>
</ul>

<p><img src="https://github.com/younghasuh/younghasuh.github.io/assets/22403928/4ad95831-336a-4e7b-825c-7a531e42215f" alt="image32" /></p>

<p><br /></p>

<h4>Installing packages</h4>

<p>Once R and Rstudio is downloaded, we will also need to install a few <strong>packages</strong> installed to run the script. Packages are extensions of R that contain code and documentation, often even sample data, that can be installed and used for various purposes. For instance:</p>

<div class="language-plaintext highlighter-rouge"><div class="highlight"><pre class="highlight"><code>install.packages("tidyverse") 
install.packages("leaflet")
install.packages(“urbnmapr”)
</code></pre></div></div>

<p>*note, urbnmapr might not be available for download. In that case, use the following to download the package through devtools.</p>

<p>Packages need to be installed only** once<strong>. After installation, you will need to **load</strong> them to the current session. If you close RStudio and start it up again, you can skip the installation and  just load the packages, or libraries. Note that the library function does not require quotation marks.</p>

<div class="language-plaintext highlighter-rouge"><div class="highlight"><pre class="highlight"><code># load libraries
library(tidyverse)
library(leaflet)
library(urbnmapr)
</code></pre></div></div>

<p>*Any lines that start with a # become <strong>comments</strong> – notes to yourself/others that won’t run in the console. It is good practice to use comments throughout your script to make sure your code is easily readable and anyone (including your future self) can know what certain lines of code does.</p>

<h3>Shiny</h3>

<p><strong>Shiny</strong> is a package that makes it easy to build interactive web apps straight from R. To install and load the shiny package in R, open an R session and run</p>
<div class="language-plaintext highlighter-rouge"><div class="highlight"><pre class="highlight"><code>install.packages("shiny") 
library(shiny)
</code></pre></div></div>

<p>*More information about how to get started with shiny <a href="https://shiny.posit.co/r/getstarted/shiny-basics/lesson1/index.html">here</a>.</p>

<h2>Using GitHub</h2>

<p>Recommended reading: <a href="https://happygitwithr.com/big-picture.html">Chapter 1 in Jenny Bryan’s Happy Git with R</a></p>

<p>Additional reading: <a href="https://peerj.com/preprints/3159/">Excuse me, do you have a moment to talk about version control?</a></p>

<p>We will be using <a href="https://github.com/">GitHub</a> as a way to store and share the necessary scripts and files needed to create the application. GitHub is a developer platform that allows developers (you!) to store, manage, and share code using Git, which is the software that provides <a href="https://git-scm.com/book/en/v2/Getting-Started-About-Version-Control">version control</a>.</p>

<p>Create a <a href="https://github.com/signup">GitHub account</a> and <a href="[https://git-scm.com/downloads](https://git-scm.com/downloads)">install git</a>.</p>

<h3>Why do we need version control? </h3>

<p>Version control simply means that the system records any changes to a file or set of files so you can recall certain changes. Basically, it is a detailed ‘track changes’ function for any files or scripts that you may edit but might want the backup copy of. In this instance, Git tracks changes of your files then GitHub stores them online by syncing to the cloud. Not only is it useful to have these backup copies, but it is also useful in recording who makes the different changes, allowing for more efficient collaborations since you can roll-back on previous versions or contribute to others’ work.</p>

<p><br /></p>
<h3>Configure GitHub</h3>

<p>Create a GitHub account and remember to note the username, email address, and the password.</p>

<p>Go back to Rstudio, then install the necessary packages. We will use the “usethis” package.</p>
<div class="language-plaintext highlighter-rouge"><div class="highlight"><pre class="highlight"><code># install packages
install.packages("usethis")
library(usethis)

# set up git on your system
use_git_config(user.name = "myname123", user.email = "myname123@example.com")
</code></pre></div></div>

<p>Now we will confirm that RStudio and GitHub are communicating.</p>

<p>In RStudio, select the <img src="https://github.com/younghasuh/younghasuh.github.io/assets/22403928/8581e4ae-44ee-4a03-a0dc-bf65930bdbab" alt="image47" /> logo on the top right (mine says test but yours is probably blank) then select “New Project”. Or, you can go to File &gt; New Project…</p>

<p>*Also, don’t worry if your RStudio looks different than my screenshots! You can change the appearance by going to Tools &gt; Global Options &gt; Appearance and select different Editor themes.</p>

<p><img src="https://github.com/younghasuh/younghasuh.github.io/assets/22403928/cd2d17b6-3440-497a-b122-d4b9377d9f7c" alt="image40" /></p>

<p>Once you click New Project, you will get a pop up with different options. Select Version Control.</p>

<p><img src="https://github.com/younghasuh/younghasuh.github.io/assets/22403928/26a8a194-8998-4838-a17d-c0422613a2a5" alt="image31" /></p>

<p>Since we are using Git, select Git.</p>

<p><img src="https://github.com/younghasuh/younghasuh.github.io/assets/22403928/37541117-fd46-47fb-8154-9d2657e850dd" alt="image2" /></p>

<p>The fact that you can see these options means that Git/GitHub/RStudio are working!</p>

<p>You will also see the options for Git on two spots, the top ribbon as well as the right pane next to Environment.</p>

<p><img src="https://github.com/younghasuh/younghasuh.github.io/assets/22403928/88f68a73-fd6c-42d8-ac6a-f09cf42218f0" alt="image21" /></p>

<p><br /></p>

<h3>Using GitHub for version control</h3>

<p>There are 4 steps involved with syncing your local repository to the online one.</p>

<p><img src="https://github.com/younghasuh/younghasuh.github.io/assets/22403928/9ca7b44d-b56c-4b08-bc93-c5aed0d4f114" alt="image20" /></p>

<p>Basically, what happens on your local device does not automatically sync with the version stored online (GitHub). So in order to reflect any changes you made on your local machine need to get “pushed” to the cloud server OR any changes made on the cloud server needs to be “pulled” to your local machine to make sure the two are matched. This feature is essential if you are collaborating with other users that have their own local machines, but you can also view yourself (past or future) as one of these users in which Git/GitHub can keep track of any changes that are made.</p>

<p><img src="https://github.com/younghasuh/younghasuh.github.io/assets/22403928/302c09e3-19c0-448b-a6b3-aaaf79e46e9e" alt="image28" /></p>

<p>You always start with <strong>pulling</strong> to sync your local repository with what is in the cloud. This is particularly important if you are working on multiple devices (e.g., personal vs. work computers) or if there were any updates that happened to the remote repository. You can pull by clicking the down arrow in the Git tab on the top right corner.</p>

<p><img src="https://github.com/younghasuh/younghasuh.github.io/assets/22403928/f902b069-9b41-4068-8331-3c59d5e94f5e" alt="image34" /></p>

<p>Git will then tell you if there were any changes. The log message will provide some information on what changed.</p>

<p><img src="https://github.com/younghasuh/younghasuh.github.io/assets/22403928/4be5954d-c3a4-4ebb-b50c-aefb66b4681a" alt="image5" /></p>

<p>If everything is up to date, it will say so. This is where you always want to start.</p>

<p><img src="https://github.com/younghasuh/younghasuh.github.io/assets/22403928/833368f7-3ea0-45bc-89c1-00fd251aad31" alt="image6" /></p>

<p>Now you are ready to write or change any of the script. Whenever you edit something on your files, RStudio will tell you so by highlighting and adding an asterisk to the file that has the unsaved changes. In this example, I made changes to the server.R file and haven’t saved yet.</p>

<p><img src="https://github.com/younghasuh/younghasuh.github.io/assets/22403928/a6d889df-b0d4-49aa-b317-3214cda233c5" alt="image17" /></p>

<p>Once you save, then the asterisk disappears and the color returns.</p>

<p><img src="https://github.com/younghasuh/younghasuh.github.io/assets/22403928/d11b8afb-0be1-416d-8bef-734e9419167c" alt="image54" /></p>

<p>Once these changes are saved, your Git will indicate so as well by listing any changed and saved files. Here, I modified both the server.R and ui.R files.</p>

<p><img src="https://github.com/younghasuh/younghasuh.github.io/assets/22403928/8e81a4a2-3894-41dd-82a8-405a110e7a63" alt="image52" /></p>

<p>Depending on what changes you make to the local repository, Git will identify the type of change by using the following symbols.</p>

<p><img src="https://github.com/younghasuh/younghasuh.github.io/assets/22403928/898296fd-9ccc-4400-b3e4-fb6ebffe8fd5" alt="image10" /></p>

<p>Next, we will <strong>stage</strong>, or select the files we want to sync to the remote repo. Usually, you’d want to stage every edit you make but it may not always be applicable. For instance, really large files may take a while to sync and you may want to do it directly on GitHub. Simply click the boxes to indicate which files you want to stage.</p>

<p><img src="https://github.com/younghasuh/younghasuh.github.io/assets/22403928/15d2fc6a-4aa8-4ae8-881f-bb38c99d735e" alt="image4" /></p>

<p>Once we select the files, we will <strong>commit</strong> them to the local Git with the commit button <img src="https://github.com/younghasuh/younghasuh.github.io/assets/22403928/feb3279a-124e-4992-8818-93ad80aa2d9c" alt="image23" /></p>

<p>A new  “Review Changes” window will pop up. There are 3 key panels here.</p>

<p><img src="https://github.com/younghasuh/younghasuh.github.io/assets/22403928/c498c32e-b0ff-49e7-8624-4572f79ffd79" alt="image44" /></p>

<ol>
  <li>The top left panel lists all the files you are staging. If you want, you can skip the previous staging step and select the files you want to stage here.</li>
  <li>You want to write a short but comprehensive message here that explains what changes you’ve made you’re committing. Try to be more descriptive/specific than the example I provided! These notes will show on your GitHub page!</li>
  <li>The bottom half displays all the changes that have been made since the previous version. The old or deleted lines are in red and the new, modified lines are in green. This is a good way to review your work. You can check the changes for each staged file if you select it in the first panel.</li>
</ol>

<p>Basically, on this panel we are committing any changes we have made to be sent to the remote repo. This panel is fairly useful and you can do all the 4 steps here (pull - stage - commit - push).</p>

<p>Once you are done, hit the Commit button.</p>

<p><img src="https://github.com/younghasuh/younghasuh.github.io/assets/22403928/f04c2cc6-70b0-4169-91c6-42395975b672" alt="image48" /></p>

<p>Git will then commit your changes to the remote repo. Again, it will describe what changes have been made. You can now close this window.</p>

<p><img src="https://github.com/younghasuh/younghasuh.github.io/assets/22403928/54547923-a0d0-4d77-9639-e72f6f620125" alt="image55" /></p>

<p>Last, we are finally ready to <strong>push</strong>! Once you commit, the “Review Changes” window should now be blank. Click on the up arrow that says Push.</p>

<p><img src="https://github.com/younghasuh/younghasuh.github.io/assets/22403928/bf9038e9-b755-476a-b7e3-e8d0a421671f" alt="image42" /></p>

<p>Depending on the size of the commit, R will process this command. Once you get the following message “HEAD -&gt; main”, you’re good to go!</p>

<p><img src="https://github.com/younghasuh/younghasuh.github.io/assets/22403928/7156cd24-89c0-427f-bb44-ed1d6569dd8a" alt="image8" /></p>

<p>You can check any changes by going to the GitHub repo. This shows that the two files - ui.R and server.R - indeed were modified just a few minutes ago. You can also see what I wrote for the commits (and why it would’ve been useful to write something more descriptive).</p>

<p><img src="https://github.com/younghasuh/younghasuh.github.io/assets/22403928/b3af07aa-a524-43d1-b71c-6032aca6d7ff" alt="image46" /></p>

<p>Here comes the power/usefulness of GitHub. You can click on the Commits to see what changes have been made.</p>

<p><img src="https://github.com/younghasuh/younghasuh.github.io/assets/22403928/c76c6da3-92d1-4fd3-8998-44d9471c5dff" alt="image24" /></p>

<p>The Commits page will show you all the changes that have been made and when.</p>

<p><img src="https://github.com/younghasuh/younghasuh.github.io/assets/22403928/4b34c4aa-b5de-4d83-ad50-d84e89d44e95" alt="image30" /></p>

<p>You can click on each commit to see further details. If I click on the most recent commit (“Updated script”), GitHub will highlight all the changes.</p>

<p><img src="https://github.com/younghasuh/younghasuh.github.io/assets/22403928/f7bc27b7-c169-4bfc-9786-1a8fa7feafd3" alt="image1" /></p>

<p>For the instance of this app, any changes that I make will be pushed to the original remote repository. Those changes can be pulled to individual cloned repositories so the changes will reflect on different users’ repositories. While users can push their own changes to their own remote repositories, because they are working on clones (or <strong>forked</strong> repos), they cannot push their changes onto the original repository. Well, there are ways to push that I can either accept or reject, but we won’t get into that just yet.</p>

<p><img src="https://github.com/younghasuh/younghasuh.github.io/assets/22403928/e800491b-e04e-4d2b-b115-4e978cbe2d7c" alt="image15" /></p>

<p>GitHub has many other cool features. For instance, you can see who contributes which line of code for each file.</p>

<p><img src="https://github.com/younghasuh/younghasuh.github.io/assets/22403928/6601696b-1729-475b-ae15-470195431a08" alt="image38" /></p>

<p>You can also create <a href="https://docs.github.com/en/issues/planning-and-tracking-with-projects/learning-about-projects/about-projects">Projects</a> that will help you keep track of your progress and collaborations!</p>

<p><br /></p>

<h4>Merging conflicts</h4>

<p>If the remote and local repositories are not synced (i.e., not at the same starting point), this will result in a <strong>conflict</strong>. You will likely receive an error message on where the conflict is and you will need to fix it to make sure the repositories are syncing properly. See more here: <a href="https://happygitwithr.com/push-rejected.html">https://happygitwithr.com/push-rejected.html</a></p>

<p>Merging conflicts can be a PITA so I recommend to always PULL PULL PULL before you start working! And if you are working with a collaborator, communicate when you are working to prevent merging conflicts.</p>

<p>Now we have the basics, we can clone the repository I made to your local computer.</p>

<p><br /></p>

<h2>Cloning the repository</h2>

<p>We will start by cloning my repository that has all the necessary script and files. Go to my <a href="https://github.com/younghasuh/collectionsdata">collectionsdata repository</a>.</p>

<p>To clone this repository on your own computer, select the green &lt;&gt;Code button.</p>

<p><img src="https://github.com/younghasuh/younghasuh.github.io/assets/22403928/69b849ed-5426-4cc0-87ab-5fba3c73ac0f" alt="image14" /></p>

<p><img src="https://github.com/younghasuh/younghasuh.github.io/assets/22403928/0ae29c4f-0b42-4864-be05-89f7228b9c4d" alt="image13" /></p>

<p>Use the clipboard function to copy the url in your clipboard.</p>

<p>Now paste this copied url into RStudio.</p>

<p>Remember when you created a new project and selected version control? Paste the copied url into the first line “Repository URL:” The Project directory name and subdirectory will autofill. Feel free to edit those as needed. Especially pay attention to where the project will be saved using the “Browse” button. Check the “Open in new session” to keep your current project open.</p>

<p><img src="https://github.com/younghasuh/younghasuh.github.io/assets/22403928/cf97a1fa-456b-422e-b9c0-0da9f97aa0d3" alt="image3" /></p>

<p>Once you hit “Create Project”, you will have essentially copied the same project I have shared on Github to your personal device. Take a minute to browse all the files in the directory (bottom right pane). Select the following R files: “app.R”, “server.R”, and “ui.R’ which will then show on your source pane.</p>

<p><img src="https://github.com/younghasuh/younghasuh.github.io/assets/22403928/280123bb-01f8-426b-9eba-3f84b7d43daf" alt="image22" /></p>

<p><br /></p>

<h2>Getting started in R</h2>

<p>The entire script for the app is available in app.R. I will walk you through each part of the code.</p>

<p>To run or execute each line of code, you can do it in 3 ways:</p>

<p>1) run the script with <strong>CTRL + Enter</strong> at each line
2) highlight all lines of code you want to run then hit CTRL + enter, or
3) copy and paste the line in the Console then hit enter.</p>

<p>First, load all the libraries after you install them once initially (e.g., <code class="language-plaintext highlighter-rouge">install.packages("here")</code>). Highlight the following script then use ctrl+enter to run then. In the console (bottom window), you can see the code run.</p>
<div class="language-plaintext highlighter-rouge"><div class="highlight"><pre class="highlight"><code>library(here)
library(shiny)
library(ggplot2)
library(tidyverse)
library(urbnmapr)
library(usmap)
library(leaflet)
library(sf)
</code></pre></div></div>

<p>Check if the working directory matches the folder that you saved the shiny app to. The file extension should match. If not, manually set the working directory with the <code class="language-plaintext highlighter-rouge">setwd()</code> function. Alternatively, you can go to Session &gt; Set Working Directory &gt; To Project Directory OR Choose Directory.</p>
<div class="language-plaintext highlighter-rouge"><div class="highlight"><pre class="highlight"><code>getwd()
#or
setwd("C:/Users/young/Documents/collectionsdata")
</code></pre></div></div>
<p>You should get something like [1] “C:/Users/young/Documents/collectionsdata”.</p>

<p>Next, we will load the data sets to run the script. For this example, use the following LACM data set that I’ve uploaded in GitHub. We will load this data into our working environment with the following.</p>
<div class="language-plaintext highlighter-rouge"><div class="highlight"><pre class="highlight"><code>data &lt;- read.csv(“data_2023.csv”)
</code></pre></div></div>

<p>The first step is to make your data become suitable for the written code, as in, we need to make sure the formatting and fields match. But before we do that, let’s load up the sample data first to see what we are working with.</p>
<div class="language-plaintext highlighter-rouge"><div class="highlight"><pre class="highlight"><code>names(data)
names(data)[2] &lt;- "catalog" 

head(data)
</code></pre></div></div>

<p>Alternatively, you can click on the object <code class="language-plaintext highlighter-rouge">data</code> in the Environment pane and it will load the data file on your source pane. But a few noteworthy points are:</p>
<ul>
  <li>There are 124096 entries in this database</li>
  <li>There are 30 fields (columns) but the first one (“X”) can be ignored</li>
</ul>

<p><img src="https://github.com/younghasuh/younghasuh.github.io/assets/22403928/d15bf9c3-192a-4784-8bc2-96ee5e7ca6a6" alt="image11" /></p>

<p>Note that this data was exported from our EMu database as a csv format using Crystal Reports.</p>

<p><br /></p>

<h3>Testing your app</h3>

<p>First, split <code class="language-plaintext highlighter-rouge">app.R</code> into two files: <code class="language-plaintext highlighter-rouge">ui.R</code> and <code class="language-plaintext highlighter-rouge">server.R</code>. The <code class="language-plaintext highlighter-rouge">ui.R</code> file will have all the components of the <code class="language-plaintext highlighter-rouge">shinyUI</code> function and the <code class="language-plaintext highlighter-rouge">server.R </code>file will have all the components of <code class="language-plaintext highlighter-rouge">shinyServer()</code>.  Remember that in the <code class="language-plaintext highlighter-rouge">app.R</code> file, the ui and server were saved as individual objects in the environment, but for it to become a published app, we need to have them saved as two different files.</p>

<p>See the following screenshot. Click the <img src="https://github.com/younghasuh/younghasuh.github.io/assets/22403928/3442820a-16fd-47fd-8683-13a144887dc7" alt="image25" /> “Run App” button next to the green arrow. It will basically use the ui.R and server.R files to generate the application.</p>

<p><img src="https://github.com/younghasuh/younghasuh.github.io/assets/22403928/27844961-edd8-4afe-9874-fb54582f9cf1" alt="image45" /></p>

<p>Alternatively, type the <code class="language-plaintext highlighter-rouge">runApp()</code> command on your console. Make sure that the shiny package is already loaded.</p>
<div class="language-plaintext highlighter-rouge"><div class="highlight"><pre class="highlight"><code>runApp()
</code></pre></div></div>

<p>Once that is done, there will be a popup window with the application! This window works as it would on a web browser. Explore what it can do by selecting a species and clicking through the tabs.</p>

<p><img src="https://github.com/younghasuh/younghasuh.github.io/assets/22403928/3b721df1-2383-46b6-b49d-3a1ef898c7fa" alt="image41" /></p>

<p><br /></p>

<h2>Publishing the app</h2>

<p>Read:</p>

<p><a href="https://shiny.posit.co/r/getstarted/shiny-basics/lesson7/">https://shiny.posit.co/r/getstarted/shiny-basics/lesson7/</a></p>

<p><a href="https://shiny.posit.co/r/articles/share/shinyapps/">https://shiny.posit.co/r/articles/share/shinyapps/</a></p>

<p>Congratulations on your first application! Note that this app only runs on your system and is not publicly available. So, to allow anyone to use this application, we will share our shiny application as a webpage. Your users can navigate to your app through the internet with a web browser. They will find your app fully rendered, up to date, and ready to go.</p>

<p>We are going to use <a href="shinyapps.io">shinyapps.io</a>, Posit’s hosting service for Shiny apps.</p>

<h3>Using shinyapps.io</h3>

<p>First, sign up and create an account.</p>

<p>You can then access your Dashboard to see what apps are deployed. You can see my main application “lacm_birds” running online.</p>

<p><img src="https://github.com/younghasuh/younghasuh.github.io/assets/22403928/3a267e6a-2f4f-49b0-aa52-33622e906fea" alt="image9" /></p>

<h3>Connecting with RStudio</h3>

<p>Once your account is created, we need to configure the <code class="language-plaintext highlighter-rouge">rsconnect </code>package to use your account and the automatically generated token. In RStudio, install and load the rsconnect package.</p>
<div class="language-plaintext highlighter-rouge"><div class="highlight"><pre class="highlight"><code>install.packages('rsconnect')
library(rsconnect)
</code></pre></div></div>

<p>Return to your account on shinyapps.io and retrieve your token by clicking your avatar and selecting “Tokens”.</p>

<p><img src="https://github.com/younghasuh/younghasuh.github.io/assets/22403928/426eec81-6388-4b0a-9321-2b355be2b009" alt="image53" /></p>

<p>Now you can configure the rsconnect package to your account.</p>

<p>Select the “Show” button on your token page.</p>

<p><img src="https://github.com/younghasuh/younghasuh.github.io/assets/22403928/c88fb4fd-efae-490b-8ed5-a525f141ed1e" alt="image39" /></p>

<p>A pop-up window will show and give you the option to copy the command to your clipboard. Copy this script with CTRL + C then paste it into the command line of RStudio and run.</p>

<p><img src="https://github.com/younghasuh/younghasuh.github.io/assets/22403928/1d594800-53c0-46fc-869c-b0423442ddbf" alt="image19" /></p>

<h3>Deploying your app</h3>

<h4>Method 1: </h4>
<p>Use the <code class="language-plaintext highlighter-rouge">deployApp</code> command from the rsconnect package.</p>
<div class="language-plaintext highlighter-rouge"><div class="highlight"><pre class="highlight"><code>library(rsconnect)
deployApp()
</code></pre></div></div>
<p>The console will start running, starting with a message saying “Preparing for deployment. This may take a few minutes. Once it is done, you will see a message saying “Deployment complete” and “Successfully deployed to <a href="https:// …..">https:// …..</a></p>

<p><img src="https://github.com/younghasuh/younghasuh.github.io/assets/22403928/90c7e414-8dd4-40bd-8ba8-6d571bd86d6a" alt="image36" /></p>

<h4>Method 2: </h4>

<p>From RStudio, launch your app using the <code class="language-plaintext highlighter-rouge">runApp()</code> or clicking on the <img src="https://github.com/younghasuh/younghasuh.github.io/assets/22403928/141fa475-691e-43e4-af2e-7d2ee67e067d" alt="image25" /> Run App icon. Once the app is launched in a separate window, select the Publish button.</p>

<p><img src="https://github.com/younghasuh/younghasuh.github.io/assets/22403928/26583494-0585-4443-b5fb-543f2128ccb0" alt="image16" /></p>

<p>Once deployment is complete, your browser should automatically open. See the example <a href="https://nhm-birds.shinyapps.io/collectionsapp/">here</a>.</p>

<p>Alternatively, you can select the url produced in the console.</p>

<p>I usually have this link as a bookmark on my laptop and even phone so I can browse the collections database quickly and anywhere!</p>

<p><br /></p>

<h3>Updating your app</h3>
<p>Say you wanted to add a feature or you noticed a bug in your application. You can easily make those changes in your R scripts then re-run the app to see if those changes have been made or errors have been fixed. Once you do, you will need to re-publish your app so that those changes will reflect on the server that it is hosted on.</p>

<p>In RStudio, open the app. This time, you will see a “Republish” <img src="https://github.com/younghasuh/younghasuh.github.io/assets/22403928/1f6a3688-ecfb-4d93-abb4-810db8999b41" alt="image12" /> button. Click this and the following window will appear. Select the necessary components for the app – usually the data file, server.R, ui.R, and any dependencies (in this case, there is a logo image) then select “Publish”.</p>

<p><img src="https://github.com/younghasuh/younghasuh.github.io/assets/22403928/2af52f5f-caf0-4fd4-90bb-056413170d70" alt="image33" /></p>

<p>R will get busy and the “Deploy” tab on the console will automatically start running. Give it a few minutes to fully run and the app should automatically launch on your browser once it is finished.</p>

<p><img src="https://github.com/younghasuh/younghasuh.github.io/assets/22403928/5d88ef94-9a46-4b27-8978-051ca1a84c3f" alt="image7" /></p>

<p>Make sure to check if the new app is running smoothly with either the new changes or the errors fixed.</p>

<p><br /></p>

<h3>Troubleshooting</h3>

<p>If you ever have problems launching your application, it can be helpful to see the message logs to understand what is causing the error. Some errors will be apparent during the deployment stage and any error messages will appear on the Deploy tab on the terminal. Alternatively, you can use the command <code class="language-plaintext highlighter-rouge">rsconnect::showLogs()</code> to show all the log messages of a deployed application.</p>

<p>You can also go to the shinyapps.io dashboard and look at the logs there. Click the app you want to check (without clicking on the “open in new tab” <img src="https://github.com/younghasuh/younghasuh.github.io/assets/22403928/a1ffd25a-56c0-4847-9af7-54cb9b2279ec" alt="image43" /> icon).</p>

<p><img src="https://github.com/younghasuh/younghasuh.github.io/assets/22403928/81548b0c-35aa-46a3-a393-a76a53088a25" alt="image26" /></p>

<p>It will show you some basic information about your app.</p>

<p><img src="https://github.com/younghasuh/younghasuh.github.io/assets/22403928/8c4cdaea-a621-4ac2-a153-94e626fcd53d" alt="image18" /></p>

<p>Select the Logs tab and it can also reveal what errors might be causing the issue.</p>

<p><img src="https://github.com/younghasuh/younghasuh.github.io/assets/22403928/7420037d-8d9b-493b-9f69-4347012f2d2a" alt="image29" /></p>

<p><br /></p>
<h3>Hosting multiple apps</h3>
<p>You can host up to 5 applications on shinyapps.io with the free version. Here, you can see that I have 2 applications for my account.</p>

<p><img src="https://github.com/younghasuh/younghasuh.github.io/assets/22403928/5189da18-2d06-4bac-b4b9-103d6246aa0a" alt="image49" /></p>

<p>To avoid confusion, I set up separate R projects and separate shinyapps.io tokens. You can create a new token by selecting “Add Token” on the “Tokens” page on  your shinyapps.io page. Then you work through the same steps of using rsconnect to configure your new R project with shinyapps.io.</p>

<p>Here is another app I made to compare two collections: <a href="https://nhm-birds.shinyapps.io/collectionsapp/">LACM and CUMV</a>. It is fairly similar to the one I made before but it contains LACM and CUMV data on just 4 species. I plan to build on this and combine more species and collections.</p>

<p><img src="https://github.com/younghasuh/younghasuh.github.io/assets/22403928/a8c5fc63-9aaa-4e6e-b4ed-68a4f5f79886" alt="image35" /></p>

<p><strong>To be continued</strong>
In the next post, I will explain how to edit the script to fit your data as well as workflows that can be adopted for your collections.</p>]]></content><author><name>Young Ha Suh</name></author><category term="blog" /><summary type="html"><![CDATA[Shiny App for Collections Data]]></summary></entry><entry><title type="html">New Website!</title><link href="http://younghasuh.com/blog/new-site/" rel="alternate" type="text/html" title="New Website!" /><published>2024-01-18T00:00:00+00:00</published><updated>2024-01-18T00:00:00+00:00</updated><id>http://younghasuh.com/blog/new-site</id><content type="html" xml:base="http://younghasuh.com/blog/new-site/"><![CDATA[<p>I’ve decided to start fresh with my website to better reflect my ongoing projects and priorities. Stay tuned for updates!</p>]]></content><author><name>Young Ha Suh</name></author><category term="blog" /><summary type="html"><![CDATA[I’ve decided to start fresh with my website to better reflect my ongoing projects and priorities. Stay tuned for updates!]]></summary></entry><entry><title type="html">Playing with Shiny</title><link href="http://younghasuh.com/blog/shinyapp/" rel="alternate" type="text/html" title="Playing with Shiny" /><published>2024-01-18T00:00:00+00:00</published><updated>2024-01-18T00:00:00+00:00</updated><id>http://younghasuh.com/blog/shinyapp</id><content type="html" xml:base="http://younghasuh.com/blog/shinyapp/"><![CDATA[<p>Last year I made a shiny app that will allow me to quickly assess what type of specimen is needed for the collections given the species. Over the past few months, I’ve come up with ways to make it more informative and interactive and you can now find the link <a href="https://nhm-birds.shinyapps.io/lacm_birds/">here</a>. This is still very much a work in progress as I add more features to make our collections data more easily accessible and understandable.</p>

<p><br />
<img src="https://github.com/younghasuh/younghasuh.github.io/assets/22403928/a51a58c7-1597-47ec-b04a-78ec9a85b65e" alt="app_preview" /></p>

<p>Example of application when you enter/select “Tyto alba” in the Species field.</p>

<p><br /></p>

<h2 id="species-summary-tab">Species summary tab</h2>
<p>Provides an overview on how specimens are available by specimen type/nature based on species. Once you start typing in the blank field it should list options that you can select from. If you cannot find a species, it is likely that there are no specimens of that kind or you are searching with an updated scientific name that is different from the database.</p>

<ol>
  <li>
    <p><strong>Specimen count by specimen type</strong>
Lists all the different specimen types for the input species. Description is written out in depth based on the specimen nature codes and their descriptions in EMu.</p>
  </li>
  <li>
    <p><strong>Specimen count by year</strong>
The count of specimens for each year based only on study skins and skeletons; rest are ignored for visualization purposes.</p>
  </li>
  <li>
    <p><strong>Specimen count by month</strong>
The count of specimens by the month they were collected.</p>
  </li>
  <li>
    <p><strong>Specimen count by state</strong>
A map showing the number of specimens collected in each state. Given the nature of the locality data, the map is only limited to the United States. Higher values are in yellow while lower values are in dark purple. States where we have no specimens are grayed out. Note, this map is generated with only georeferenced data.</p>
  </li>
  <li>
    <p><strong>Specimen count by county</strong>
A map showing the number of specimens collected in each county of California. Given the nature of the locality data, the map is only limited to California. Higher values are in yellow while lower values are in dark purple. Counties where we have no specimens are grayed out. Note, this map is generated with only georeferenced data.</p>
  </li>
  <li>
    <p><strong>Global specimen distribution</strong>
An interactive map (Feaflet) showing the global distribution of specimen localities. Adjust the zoom using the +/- sign on the top left corner of the map. Note, this map is generated with only georeferenced data.</p>
  </li>
  <li>
    <p><strong>Weights by sex</strong>
Simple box plots of each specimen’s weight based on sex (male, female, unknown). Raw data points are scattered over the box plots.</p>
  </li>
  <li>
    <p><strong>Detailed counts by year</strong>
Last is a long table including the counts of specimens by year and counts by year and type.</p>
  </li>
</ol>

<p><br /></p>

<p><img src="https://github.com/younghasuh/younghasuh.github.io/assets/22403928/b9580e36-3d97-4fcd-b004-7e15c012658b" alt="app_preview2" />
Example of application when you enter the catalog number “12345” in the LACM field.</p>

<h2 id="lacm-lookup">LACM lookup</h2>
<p>For looking up specimens based on LACM number. It will provide information on species, collection date, collector, and locality. There are a few instances where you will enter a number but have no results; this is likely that there is missing information on the specimen. This is a feature that will be fixed in the next update.</p>]]></content><author><name>Young Ha Suh</name></author><category term="blog" /><summary type="html"><![CDATA[Last year I made a shiny app that will allow me to quickly assess what type of specimen is needed for the collections given the species. Over the past few months, I’ve come up with ways to make it more informative and interactive and you can now find the link here. This is still very much a work in progress as I add more features to make our collections data more easily accessible and understandable.]]></summary></entry></feed>