Shiny is an R package that makes it easy to build interactive web apps straight from R. I came across shiny apps early this year (2017) whilst looking at various ways of productionizing Data Science. However, back then I had only gone through online examples and tutorials. If you have any experience with the hosts of tutorials online, I’m sure you will have realised that working on tutorials and solving real life problems are two entirely different things. For one, there are various issues which arise when you work on real life problems, issues that one may not encounter when following a tutorial.
Last week, I was given the task of building a shiny app for a client on an on-going project at work. I had the option of looking through the myriad of solutions online and just simply tweaking some of these to suit my needs. Another option was to start from scratch and build step by step. The latter option ensures that you get a very robust and custom made solution, but In a fast paced system like ours, option 1 with a little blend of option 2 was the way forward! In this post, I will highlight the steps I followed in going from start to finish (well, close to finish 😊 )
Step 1: Have an idea of what you want to present
Basically, it’s always good to at least know what you want to present to the client in terms of visualizations, tables, etc. How do you want to present the data, how many tabs do you want? How many visualizations on each tab? This will be mostly dependent on what you believe the client will love to see based on your interactions with the client and other team members. It is a good idea to scribble a wireframe down on paper. The wireframe is simply a draft design of what goes where for each tab. If you’ve got time and skills, you can use any of the fancy tools like or for doing up your wireframe. Check a sample of mine below :D
Make as much notes as possible on your wireframes. The web is filled with many ideas for your app. . Don’t be afraid to play around. Note that this isn’t your final version.
Step 2: Organise your work
This is a follow up on the previous step and some of you may have already accomplished this in Step 1. So, you could call this step 1b if you want.
If your project involves multiple outputs that may not fit into one page or have different formats (images, tables, etc), it is advisable to put them in their own separate tabs. Tabs in shiny are like separate pages for our displays. You may want to display what is most required first. Clients tend to love visualizations so this should be in the first (opening tab). It’s very important to organise this part of your work before starting. However, note that you can move things around as you go on. This however isn’t as straightforward as you may think but something you will have to get the hang of as you go on.
Step 3: Templates are your best friend!
Unless you have all the time in the world and you are prepared to spend hours trying to fix simple problems, start developing your app using templates. If you have the time, then feel free to go through this tutorials (). However, if you are on the clock like I was (and still am), use templates.
That said, it is important to first learn how shiny works. Every Shiny app is composed of two parts: a web page that shows the app to the user (ui), and a computer that powers the app (server). The ui or user interface is what the users of the app will see and interact with. The server part is the engine that does the work in the background. I will speak more on this in another post when I break shiny down into its functionalities. For now, let’s go back to how useful templates can be!
For my project, the first operational object I wanted on my app was a way to load my data on to shiny. Most of the templates out there on the internet have pre-loaded .csv files (or other files) but I wanted a bit of flexibility where a user can upload his/her own file before doing any analytics. Luckily for me, I did not have to search too far to find this. As with most shiny objects, there are two sets of codes required for this, one is the interface (written into the ui section) and the other is the engine that is called when the user clicks on the upload button.
If you are familiar with R codes, you will immediately notice that the serve side of the code is basically an R script to read the file. In the ui section, you can define what files to restrict the user to. In my case, I want to read in RDS files so I use a readRDS() function. If you want it to read .csv and other files, simply add these to your ‘accept’ argument in the user interface and use the appropriate read in function on the server side. I have assigned my file to a variable ‘df’ to make it re-usable. You don’t have to do this but it’s convenient.
This is just one example of where using a template has been useful. Don’t expect to find a template that perfectly matches your needs. You may have to tweak it here and there or use a combination of templates. In my case for example, the load file code I found only allowed loading of csv files and used the read.csv() function. I had to edit this to suit what I wanted to achieve. Going forward, you can search the internet/books for sample codes to help you achieve your aim.
Step 4: Iterate, iterate, iterate!
As you develop your app, you will always feel the need to make changes here and there especially when you see other Apps with some functionalities you didn’t think of. Feel free to iterate. I say that with a warning: Be sure you have an idea of what you want to accomplish from start (step 1), complete this idea or at least get 90% of it done before you start making additional changes. This is because, if you are like me, you will always want to keep improving on your design and as there are so many beautiful designs out there, there’s a chance of continuous iterations thus delaying the project. This is why steps 1 and 2 are so important. Ensure you know what client wants. Make sure you achieve at least 90% of that, then you can make improvements to designs.
Step 5 Don’t forget to tidy up
As with all coding projects, remember to tidy up your code and design when you are done. Include additional comments ( I expect that you’ve been commenting whilst coding. Here you can add more comments), improve the aesthetics – colours, logos, icons (there’s an icon library here for shiny ().
In my next post, I will discuss the more technical details of building a Shiny App. Look out for that!