Web Apps in R: Building your First Web Application in R | Shiny Tutorial Ep 1

welcome back to the data professor YouTube channel if you're new here my name is Tennant asana mod and i'm an associate professor of bioinformatics on this youtube channel we cover about data science concepts and practical tutorials so if you're into this kind of content please consider subscribing so in previous episodes we were talking about how you can deploy your machine learning model in python and are and particularly if you want to deploy your machine learning model in our language you want to use the shiny package and so i'm happy to introduce to you a new series of videos that will be on this youtube channel which will be called web apps in our where we will guide you how you can develop your web apps using our by means of the shiny package before we begin let's cover the basics of what is a shiny package so shiny is an art package that allows you to build an interactive web application there are several extension packages that will allow you to extend the function of shiny including shiny themes shiny dashboard shiny JFS and several others and once you develop your web app in shiny then you want to deploy it so you have two options you want to deploy it on your own server for example using a service like digitalocean or to a shiny apps IO there are lots of example codes that can get you started and this is available in the shiny gallery so the links are in the slides ok so what we will learn today first of all we will learn about the structure of a shiny web application and then we're gonna have a look at some of the examples of the shiny web application and finally we will show you step-by-step how you can build your interactive web application so let's have a look at the structure of a shiny web application so essentially a shiny web app comprises of three components so the first component is the user interface which is housed within a file called UI dot R and the second is the server function which will perform the processing of the data which is housed in the file cost server dot R and then the shiny app function will feed the UI and server components together so the UI is the front end that accepts the user input values the server is the back end that processes these input values to finally produce output results that are displayed on the website okay so you see that input data will flow into the user interface which is the website that you see and then you will enter data into the textbox and then the data will be submitted to the server the server processes the information and then it will produce the result and the result is displayed on the web sites okay and then the user will see the results okay so let's have a look at some of the shiny web applications so let's go to this link okay so this is a gallery available from shiny and you can see that there are a lot of examples so there are the integration of maps right inside shiny application and also interactive scatter plots you can also embed Google charts as well you could perform k-means clustering you could create some bar charts using available data set from the data set package and then you could also create a word cloud okay and there are several others and then there are witches like buttons tables slider input slider okay downloading files uploading files sub setting data set and all that okay so there are several examples on how you can develop custom shiny web apps so why don't we click on one the first one okay so this map is interactive if you click on it we can zoom in right so you click on the color and then it will update the map based on your input or also data Explorer so it's an interactive table you can also sort the data as well okay or how about a word cloud generator and you could play around with the input parameters the minimum frequency of each word for example if it's 25 it means that the current word like love has to be present at least 25 times or 26 times in order for it to be counted here how many words are we limiting to be displayed here okay and these accept input from the books of our choice a Midsummer's Night Dream The Merchant of Venice or Romeo and Juliet we have to click on the Change button okay Cayman clustering using the iris dataset right okay okay and then the next one is to have a look at some of the web applications coming out of my own research lab so let's have a look let's go to code stop bio /os FP so as I'm a bioinformatics researcher and data scientists so what we do in our lab is we try to apply machine learning in order to make sense of biological data and chemical data as well and so the objective of this web server is to take as input the protein sequence and then we will predict whether the protein sequence is an oligo mer or a monomer okay so let's click on the insert example data and then the input will be a fast a format of the protein sequence so the first line which contains the greater than symbol followed by the name of the protein is given here so we see that the first protein is a monomer and the second protein is a tetramer and let's click on the submit button to make the prediction okay and so we see that the prediction is correct on both occasion because the first one is a monomer and it predicts it to be a monomer and the second one is a tetra mer and it predicts it to be an oligomer okay so this is the interface of the prediction web server and if we click on the other buttons it will look like any other ordinary website okay so these are description on how to use the web server and they are written in markdown okay so this shiny app can also embed markdown inside as well okay so we also provide the data set for download as well and we host it on the github and if you're interested in reading this paper you can click on the link okay so this is the paper that we published back in 2016 in the Journal of cheminformatics okay so let's go back to the slide and let's get started with creating our own web app using shiny so what you want to do now is fire up your our studio or our studio cloud okay and so the code that will be used today is available on the data professor github so if you go to github.com slash data professor okay and then you click on code and then find SHINee / 0 0 1 first app and then you want to click on app dot R and then you want to right-click on the raw button right here and then you want to click on the Save Link As and then select a suitable position where you want to save the file and because I already have it I will just click on cancel but if you don't have it yet click on the Save button okay so let's open up the app dot our file right inside the our studio okay so before we begin accredit to Winston Chang for developing this template by which we greatly modified and simplified to make this app dot our file and so if you want to check out the full version go ahead here links are provided here okay so in this simplification we're going to start with the baby steps so this web app is an interactive web application whereby it will accept input values in the form of text primarily the given name and surname so let's have a look okay so the app will accept input which is the given name and the surname okay so let's go ahead and type the given name John and in surname is still okay and so the name John Doe will appear in the output here and the name of the app is my first app you can also modify this to your own liking okay and in this example we have three navigation bar and so we intentionally left it blank here according to the original template by Winston Cheng okay so the code that we have is located on the nav bar art one so a point you notice that you can also create several web apps inside different navigation bar let's say that you want to modify the name like say given name is Jennifer so then you see that the name is automatically updated so notice that there is no submit button and whenever you type an updated name it will automatically update the results so in our the end moment reactive let's have look shiny reactive reactive expressions reactivity and overview okay so it's based on the principles of reactive programming which is used by the shiny package okay so we're not going to go into detail but if you're interested I can also provide the links in the file as well concepts about reactive programming used by SHINee okay so I'm going to provide a link for you here okay so a moment ago we have taken a look at how the web application will look like which is the end outcome of this code and so let's look under the hood what does the coat looks like okay so in the slides I've shown to you that it comprises of three components so let's have a look so the first component is the UI is right here so it's on line 19 until lines 43 Alliance 19 until lines 43 this is the UI or the user interface and then aligns 47 until 52 it's the server component so you're gonna notice that we're not doing anything much here which is displaying the results and so the code is very concise and the third component is the shiny app function so this thing will piece together the UI and the server so it's essentially just saying that okay this part here is the UI this part here is the server and fuse them both to create a shiny app object okay so that's all there is to it at the conceptual level so let's have a look at the components inside the UI object okay so here is using inside the fluid page tag it's using the theme argument and it's telling that we want to use the cerulean theme okay and the cerulean theme is the blue theme that you've seen a moment ago let's say that I want to change that to unite it and I can click on the reload oh I need to save it first and then I'll click on the reload and then it changes to the United and I want to change - let's say Yeti save it and then it becomes the Yeti team so maybe you're wondering what's the available options for you so if you search for shiny themes in Google ok the first results and just click on it so here this is how a cerulean looks like if you like that you could type in cerulean there's Cosmo cyborg darkly paper lumen journal flatly readable sandstone simplex slate Spacelab superhero United and Yeti let's try a superhero okay so it's John Doe okay there you go but just before fancy or civilian so let's envisage the code as modular components so you're gonna see that inside the UI you're going to have a fluid page you can within this fluid page you're gonna define the theme and inside the fluid page aside from the theme you're gonna have a navigation bar page right so the navigation bar pages right here it's this bar and so the name of the app is my first app so this is the name of the navigation bar page inside the nav bar page there is the tab panel okay so tap panel comprises of nav bar one bar two nav bar three again inside number one you have the side bar panel right here to the left right you have here side bar panel and your side bar panel contains tag h3h3 is the heading third level heading input and then text input is the given name and the text input is the type of input so if you change this to something else it will look differently here and there are a lot of widgets okay so you can find what you want you can shop for what widget you like and then just replace it right here in the code okay so the given name is right here displayed here and then this thing here is the default value so let's say that I could type in John Doe and save it and reload the app so you see that John Doe will automatically by default appear in the text box okay but I can also leave it blank as well right so this is the contents of the sidebar panel so the sidebar panel will accept the input right and then the main panel is right here where we see Heather 1 output 1 John Doe which is the result so in main panel 1 right Heather 1 is inside the h1 so h1 is a tag which is the biggest tag available and four is a smaller tag so we have in order of from big to small we have h1 and h2 h3 h4 right so for the input here we use h3 if we change it to h1 it will be bigger it'll be the same size as the header one here but it's too big so I'm going to change it to just h3 we can even make this h3 as well alright so it got a little bit bigger for the output one here right so you can play around with changing the options here okay and so verbatim text output is simply a text box that will return the output value so it's just a simple text box and then the nav bar to nav bar 3 as we have previously mentioned it is intentionally left blank ok so there's that's all there is to the UI but the confusing part is how does UI and server interact how do they send information back and forth right how does you I send the input value to the server and how does the server accept the input value okay let's have a look right here so notice that the text box has this thing called text one.txt one right in the given name okay and the surname is txt too okay notice that make a note of that how about I put it in their comments txt 1 and txt - okay and make a note of this - txt out txt oh you T okay so these two will be sent to to the server TFC 2 will also be sent to the server txt out is generated from the server okay so let's go back to the slice okay why don't I create a new slide so let's duplicate the slide so this card is the first web app and we're gonna modify this to reflect the contents of this web map okay so the input data is txt one and txt to write and the output is txt out right so it will send TX t1 and t2 to the server and so actually the server sends right tht out and then tht out will be displayed displays txt out so here TX T 1 and T 2 T 2 will be sent to the server TX T 1 and T X T 2 here as input dollar sign TX T 1 and input dollar sign txt - ok and so the question is how does it send it asks - txt out it's right here output dollar sign txt out and it's going to use this function called render text ok so there's several render function like render table render text right that you can modify so you can also find out from the shiny documentation okay so this output txt out what it essentially does is it will use the paste function to combine TX t1 and t2 and separate it by a empty space and then it will produce the result as the concatenated text of th t1 and t2 inside the txt out variable and then this variable will be called from within the verbatim text output and then it will display the text inside the text box that's all there is to this shiny web application it will seem a bit confusing but if you get the concepts straight it will be very simple and you could create any web application to your own imagination you can make this web application data-driven you could ask input you could upload file of the input data and then the input data will be sent to the server right and then in the server you could create a machine learning model and then once the machine learning model is built it would then relay the results back into the UI and then the UI will display the predicted results okay so this will be very powerful as a model deployment approach for your machine learning model and there are several tips and tricks which we used in our research lab and we can share this in a future video and so if you're finding value out of this video please smash the like button okay so let me recap this process in summary this app dot our file will contain three components the UI component which is the user interface it will accept input which is the TX t1 and T X t2 which corresponds to the given name and the surname and when you input the given name and surname it will be sent to the server and then the paste function will combine 61 and 62 and put it inside a txt out variable and then this txt out variable is embedded inside the verbotene text output which is a text box on the UI and as a result you will see the input values that you typed in displayed in the text box okay so this is a first web app which is essentially starting from the basics so nothing fancy here just a simple web app where you could type in the name the first name last name and then it will display the result okay so in future videos of this series called the web app in our we're going to have several other videos and if you have ideas on what application you would like us to develop let us know so please comment down below and I'll see you in the next one thank you for watching please like subscribe and share and I'll see you in the next one but in the meantime please check out these videos

Channel: Data Professor

Views: 64,807

Rating: 4.9690371 out of 5

Keywords: data professor, dataprofessor, shiny, webapp, web app, webapplication, web application, appdev, application development, web development, webdev, rshiny, machine learning, model deployment, deployml, deploy machine learning, data science project, learn r, r programming, learn r programming, data science, data mining, big data, data science workshop, data science tutorial, ai, artificial intelligence, r shiny tutorial for beginners, r shiny, r shiny tutorial

Id: tfN10IUX9Lo

Length: 20min 53sec (1253 seconds)

Published: Thu Jan 16 2020

Reddit Comments

[u/FortNox24]

Yeah, but why?

[u/khaberni]

Shiny is great. You go from R code to a webapp in no time. No need to write JavaScript. I use it all the time. It just makes it easy to build and expose your R work without dealing with engineering.

[u/Not-the-best-name]

In R????? What??

[u/stochastaclysm]

y tho

[u/sheepdog69]

Anyone have any "real world" experience with rpy2 or reticulate?