Skip to content

Commit

Permalink
minor ammendments
Browse files Browse the repository at this point in the history
  • Loading branch information
GABurns committed Jun 22, 2023
1 parent 3181422 commit be81103
Show file tree
Hide file tree
Showing 4 changed files with 118 additions and 21 deletions.
4 changes: 2 additions & 2 deletions _site/blogs.html
Original file line number Diff line number Diff line change
Expand Up @@ -162,7 +162,7 @@ <h1 class="title">Blogs</h1>

<div class="quarto-listing quarto-listing-container-grid" id="listing-listing">
<div class="list grid quarto-listing-cols-3">
<div class="g-col-1" data-index="0" data-categories="R,Shiny" data-listing-date-sort="1687302000000" data-listing-file-modified-sort="1687421819878" data-listing-reading-time-sort="7.715">
<div class="g-col-1" data-index="0" data-categories="R,Shiny" data-listing-date-sort="1687302000000" data-listing-file-modified-sort="1687426306921" data-listing-reading-time-sort="8.12">
<a href="./posts/DeployingShiny.html" class="quarto-grid-link">
<div class="quarto-grid-item card h-100 card-left">
<p class="card-img-top">
Expand All @@ -181,7 +181,7 @@ <h5 class="no-anchor card-title listing-title">
</div>
</div>
<div class="card-text listing-description">
This was a simple Shiny application deployed on Shinyapps.io that highlighted some of the lessons learnt in going from desktop analysis to deploying on cloud.
Discussing the lessions learnt going desktop analysis to deploying on Shiny application in the on Shinyapps.io using a simple example to highlight potential pitfalls to a…
</div>
<div class="card-attribution card-text-small justify">
<div class="listing-author">
Expand Down
90 changes: 83 additions & 7 deletions _site/posts/DeployingShiny.html
Original file line number Diff line number Diff line change
Expand Up @@ -8,7 +8,7 @@

<meta name="author" content="Gareth Burns">
<meta name="dcterms.date" content="2023-06-21">
<meta name="description" content="This was a simple Shiny application deployed on Shinyapps.io that highlighted some of the lessons learnt in going from desktop analysis to deploying on cloud.">
<meta name="description" content="Discussing the lessions learnt going desktop analysis to deploying on Shiny application in the on Shinyapps.io using a simple example to highlight potential pitfalls to a novel user">

<title>Data Burns - Planning, Implementing, Developing &amp; Deploying in Days!</title>
<style>
Expand All @@ -23,6 +23,69 @@
margin: 0 0.8em 0.2em -1.6em;
vertical-align: middle;
}
pre > code.sourceCode { white-space: pre; position: relative; }
pre > code.sourceCode > span { display: inline-block; line-height: 1.25; }
pre > code.sourceCode > span:empty { height: 1.2em; }
.sourceCode { overflow: visible; }
code.sourceCode > span { color: inherit; text-decoration: inherit; }
div.sourceCode { margin: 1em 0; }
pre.sourceCode { margin: 0; }
@media screen {
div.sourceCode { overflow: auto; }
}
@media print {
pre > code.sourceCode { white-space: pre-wrap; }
pre > code.sourceCode > span { text-indent: -5em; padding-left: 5em; }
}
pre.numberSource code
{ counter-reset: source-line 0; }
pre.numberSource code > span
{ position: relative; left: -4em; counter-increment: source-line; }
pre.numberSource code > span > a:first-child::before
{ content: counter(source-line);
position: relative; left: -1em; text-align: right; vertical-align: baseline;
border: none; display: inline-block;
-webkit-touch-callout: none; -webkit-user-select: none;
-khtml-user-select: none; -moz-user-select: none;
-ms-user-select: none; user-select: none;
padding: 0 4px; width: 4em;
color: #aaaaaa;
}
pre.numberSource { margin-left: 3em; border-left: 1px solid #aaaaaa; padding-left: 4px; }
div.sourceCode
{ }
@media screen {
pre > code.sourceCode > span > a:first-child::before { text-decoration: underline; }
}
code span.al { color: #ff0000; font-weight: bold; } /* Alert */
code span.an { color: #60a0b0; font-weight: bold; font-style: italic; } /* Annotation */
code span.at { color: #7d9029; } /* Attribute */
code span.bn { color: #40a070; } /* BaseN */
code span.bu { color: #008000; } /* BuiltIn */
code span.cf { color: #007020; font-weight: bold; } /* ControlFlow */
code span.ch { color: #4070a0; } /* Char */
code span.cn { color: #880000; } /* Constant */
code span.co { color: #60a0b0; font-style: italic; } /* Comment */
code span.cv { color: #60a0b0; font-weight: bold; font-style: italic; } /* CommentVar */
code span.do { color: #ba2121; font-style: italic; } /* Documentation */
code span.dt { color: #902000; } /* DataType */
code span.dv { color: #40a070; } /* DecVal */
code span.er { color: #ff0000; font-weight: bold; } /* Error */
code span.ex { } /* Extension */
code span.fl { color: #40a070; } /* Float */
code span.fu { color: #06287e; } /* Function */
code span.im { color: #008000; font-weight: bold; } /* Import */
code span.in { color: #60a0b0; font-weight: bold; font-style: italic; } /* Information */
code span.kw { color: #007020; font-weight: bold; } /* Keyword */
code span.op { color: #666666; } /* Operator */
code span.ot { color: #007020; } /* Other */
code span.pp { color: #bc7a00; } /* Preprocessor */
code span.sc { color: #4070a0; } /* SpecialChar */
code span.ss { color: #bb6688; } /* SpecialString */
code span.st { color: #4070a0; } /* String */
code span.va { color: #19177c; } /* Variable */
code span.vs { color: #4070a0; } /* VerbatimString */
code span.wa { color: #60a0b0; font-weight: bold; font-style: italic; } /* Warning */
</style>


Expand Down Expand Up @@ -131,7 +194,7 @@ <h1 class="title">Planning, Implementing, Developing &amp; Deploying in Days!</h

<div>
<div class="description">
This was a simple Shiny application deployed on Shinyapps.io that highlighted some of the lessons learnt in going from desktop analysis to deploying on cloud.
Discussing the lessions learnt going desktop analysis to deploying on Shiny application in the on Shinyapps.io using a simple example to highlight potential pitfalls to a novel user
</div>
</div>

Expand All @@ -158,11 +221,24 @@ <h1 class="title">Planning, Implementing, Developing &amp; Deploying in Days!</h

</header>

<p>Over 150 attendees at the PSI conference player the <a href="https://exploristics.com/">Exploristics</a> Higher or Lower web app - and <em>didn’t they all do well!?</em> I was delighted to see the game generated so much interest, many people expressed an interest in the how we deployed the app on the cloud and that’s the motivation for this blog. This app is a microcosm of developing and deploying a Statistical Shiny app on the cloud. This blog is aimed at people who are experienced in developing desktop R scripts and have a desire to take the next step to create a Shiny app and deploy on the cloud.</p>
<iframe src="https://www.linkedin.com/embed/feed/update/urn:li:share:7072905986994237440" height="400" width="504" frameborder="0" allowfullscreen="" title="Embedded post">
<p>Over 150 attendees at the PSI conference played the <a href="https://exploristics.com/">Exploristics</a> Higher or Lower web app - and <em>didn’t they all do well!?</em> I was delighted to see the game generated so much interest with many people expressed an interest in how we deployed the app on the cloud - that’s the motivation for this blog. This app is a microcosm of developing and deploying a Statistical Shiny app on the cloud. This blog is aimed at people who are experienced in developing desktop R scripts and have a desire to take the next step to create a Shiny app and deploy on the cloud.</p>
<iframe src="https://www.linkedin.com/embed/feed/update/urn:li:share:7072905986994237440" height="500" width="504" frameborder="0" allowfullscreen="" title="Embedded post">
</iframe>
<p>The premise of our app was simply to act as a hook to encourage attendees to visit the <a href="https://exploristics.com/">Exploristics</a> stand and learn more about the products and services we offer. The challenge was to gather requirements, design, develop, implement, test and deploy an application that was a simple game in <strong>only a few days!</strong></p>
<p>The Higher of Lower game is based on the classic card game: an initial card is drawn from a standard deck of cards. Another card is then drawn from the deck and the player must guess if this drawn card will be of higher or lower value than the initial card. From a statistical perspective this is quite a simple process – random sampling without replacement of the deck and a logic-based approach of the guess. Although the statistical method and issues faced may seem trivial, they provide tangible examples of many of common issues faced and I attempt to generalize the solutions. When you attempt to deploy more complex statistical models it’ll be easier to identify the issues you’re facing, how to debug your code and solver your problems.</p>
<p>The premise of our app was simply, to act as a hook to encourage attendees to visit the <a href="https://exploristics.com/">Exploristics</a> stand and provide a fun activity for participants to engage in whilst stimulating further discussions around simulations or issues in creating user interfaces for clients to interact and visualize complex statistical models. The <strong>challenge</strong> was to gather requirements, <strong>design</strong>, <strong>develop</strong>, <strong>implement</strong>, <strong>test</strong> and <strong>deploy</strong> an application in <strong>only a few days</strong> in time for the conference<strong>!</strong></p>
<p>The Higher or Lower game is based on the classic card game: an initial card is drawn from a standard deck of cards. Another card is then drawn from the deck and the player must guess if this drawn card will be of <strong>higher</strong> or <strong>lower</strong> value than the initial card. If the player guesses correct this process is repeated until</p>
<p>The R code to achieve this code is quite a simple process – <a href="https://medium.com/@UsmanZX6R/a-deck-of-cards-with-r-13b14529d376">create a deck of cards</a> as a <code>data.frame</code>, random sampling this <code>data.frame</code> without replacement a deck of cards using the <code>sample</code> function.</p>
<div class="cell">
<div class="sourceCode cell-code" id="cb1"><pre class="sourceCode r code-with-copy"><code class="sourceCode r"><span id="cb1-1"><a href="#cb1-1" aria-hidden="true" tabindex="-1"></a>drawnCard <span class="ot">&lt;-</span> <span class="fu">sample</span>(DeckOfCards, <span class="at">size =</span> <span class="dv">1</span>, <span class="at">replace =</span> <span class="cn">FALSE</span>)</span></code><button title="Copy to Clipboard" class="code-copy-button"><i class="bi"></i></button></pre></div>
</div>
<p>The outcome of the guess is also a simple logic-based approach using the <code>&gt;</code> and <code>&lt;</code> operators.</p>
<div class="cell">
<div class="sourceCode cell-code" id="cb2"><pre class="sourceCode r code-with-copy"><code class="sourceCode r"><span id="cb2-1"><a href="#cb2-1" aria-hidden="true" tabindex="-1"></a><span class="co"># In the Shiny app the guess is retried from the UI from the inputs</span></span>
<span id="cb2-2"><a href="#cb2-2" aria-hidden="true" tabindex="-1"></a>guess <span class="ot">&lt;-</span> <span class="st">"&lt;"</span> <span class="co"># or can be "&gt;" from UI</span></span>
<span id="cb2-3"><a href="#cb2-3" aria-hidden="true" tabindex="-1"></a></span>
<span id="cb2-4"><a href="#cb2-4" aria-hidden="true" tabindex="-1"></a><span class="co"># Assess if the logic of the guess is correct - TRUE</span></span>
<span id="cb2-5"><a href="#cb2-5" aria-hidden="true" tabindex="-1"></a><span class="fu">do.call</span>(<span class="st">"guess"</span>, drawnCard<span class="sc">$</span>value, handCard<span class="sc">$</span>value)</span></code><button title="Copy to Clipboard" class="code-copy-button"><i class="bi"></i></button></pre></div>
</div>
<p>Although the methodology may seem trivial, they provide tangible examples of some of the common issues faced. When you attempt to deploy more complex statistical models it’ll be easier to identify the issues you’re facing, how to debug your code and overcome these hurdles!</p>
<p>At <a href="https://exploristics.com/">Exploristics</a> we use Shiny apps to provide dynamic and interactive visualization tools to enable clients to interpret the complex multi-dimensional data or models generated by <a href="https://exploristics.com/keruscloud-platform-overview/">KerusCloud</a>. At the Jumping Rivers Shiny in Production conference, I spoke about the experiences and technology to create robust enterprise grade Shiny applications. However, the remit for the Higher or Lower application was very different from how we usually develop software – this was to be a one-off application to be used at the PSI conference and we only had a couple of days for development. This mean that many of our usual processes needed to be accelerated and we had to accept some trade-offs.</p>
<div class="quarto-video ratio ratio-16x9"><iframe src="https://www.youtube.com/embed/pHLT5IfgfM0" title="" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen=""></iframe></div>
<p>Although we have experience in developing Shiny apps using a new technology such as <a href="https://www.shinyapps.io/">Shinyapps.io</a> usually leads to unexpected changes that take time to resolve. The time frame was extremely short to deal with any technology issues and &nbsp;address any feedback from stakeholders. However, as our preliminary research into <a href="https://www.shinyapps.io/">Shinyapps.io</a> looked promising we decided to have a go!.</p>
Expand Down Expand Up @@ -197,7 +273,7 @@ <h2 class="anchored" data-anchor-id="but-it-works-on-my-machine">But it works on
<section id="youre-not-meant-to-use-the-app-that-way" class="level2">
<h2 class="anchored" data-anchor-id="youre-not-meant-to-use-the-app-that-way">You’re not meant to use the app that way!</h2>
<p>When you develop and subsequently test an application you have an inherent idea of how it should be used. Different people will have a range of IT abilities or understanding of terminology. This often leads to the application being used in a way you hadn’t anticipated, or they hit an unusual use case from a scenario that your testing hadn’t encountered.</p>
<p>When testing the game I’d only played from start to finish and then redeployed with subsequent changes. What I hadn’t realized was that my application had state, I’d reset the user details after each game but not the deck of cards. Effectively this meant a single deck of cards was used across games and eventually there were no more cards to draw from the deck and this caused the game to crash.</p>
<p>When testing the game I’d only played from start to finish and then redeployed with subsequent changes. What I hadn’t realized was that my application had state, I’d reset the user details after each game but not the deck of cards. Effectively this meant a single deck of cards was used across games and eventually when there were no more cards to draw from the deck and the application crashed.</p>
<p>I really enjoyed making the <a href="https://exploristics.com/">Exploristics</a> Higher or Lower app and I hope everyone enjoyed playing it too. Hopefully the lessons learnt by me will help you on your journey to creating interactive tools for your clients!</p>
<p>Follow <a href="https://exploristics.com/">Exploristics</a> on <a href="https://twitter.com/Exploristics">Twitter</a> or <a href="https://www.linkedin.com/company/exploristics/">LinkedIn</a> to get the latest updates clinical trail simulation, interactive data visualization and the</p>

Expand Down
Loading

0 comments on commit be81103

Please sign in to comment.