R Shiny for Data Science Tutorial – Build Interactive Data-Driven Web Apps

Learn to use R to build an interactive data  driven application with the R shiny package.  

Dr. Chanin Nantasenamat, also known as the  Data Professor, teaches this course. Besides  

teaching on his YouTube channel, he is also a  university professor. You probably know that the  

our programming language can help you to perform  statistical analysis. But did you know that you  

could use our to build an interactive data driven  web application. In this course on Free Code Camp,  

you will be learning about how you could use  the our shiny package to build an interactive  

and data driven web application that will  range from a simple application that allows  

you to print user inputs, web applications that  will allow you to display data visualization,  

as well as web application that will allow you  to make predictions from machine learning models.  

Finally, you'll be learning how to deploy  the web applications that you have created  

to the cloud by means of the Heroku platform.  All codes that are used in this tutorial will  

be provided in the video description.  And without further ado, let's dive in.  

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 j, s 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 Digital Ocean  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. Okay, so  what we will learn today, first of all,  

we will learn about the structure of a shiny  web application. And then we're going to 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 called server dot r.  And then the shiny app function will fuse 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 text box, 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 websites. 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 the gallery available from  SHINee. And you can see that there are a lot  

of examples. So there are the integration of  maps, right insights, 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, K, downloading files, uploading files,  

subsetting, 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 we 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 are 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.  

Can you could play around with the  input parameters, 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. So 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. k.  

k means 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 slash osfp. So as I'm  a bioinformatics researcher, and data scientist,  

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  

oligomer 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 tetra mer. 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 tetramer.  

And it predicts it to be an ollie Gomer. 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 case.  

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 Chem informatics.  Okay, so let's go back to the slide.  

And let's get started. We're creating  our own web app using SHINee. So what  

you want to do now is fire up your our  studio or our studio cloud K. 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 slash 001 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 safelink s,  

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 a credit to Winston  Chang for developing this template by which  

we greatly modified and simplified to make this  app dot our file. 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 has the  given name and the surname Okay, so let's go ahead  

and type the given name john and insert name is  still okay, and so the name john doe will appear  

in the output here and the name of the app this  my first app, you can also modify this to your  

own liking, okay, and in this example, we have  three navigation bar so we intentionally left  

it blank here, according to the original template  by Winston Chang. Okay, so the code that we have  

is located on the nav bar dot one so a point in  notice that you can also create several web apps  

inside different navigation bar. Let's say that  you want to modify the name like let's say given  

name is Jennifer. So then you'll see that the  name is automatically updated. So notice that  

there is no Submit button and whenever you type in  an updated name, it will automatically update the  

results. So in our they implement reactive, let's  have a 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.  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  the 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. So let's  look under the hood, what does the code 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 43k, lines  19 until lines 43. This is the UI or the user  

interface, and then a lines 47 until 52 is the  server component. So you're going to notice that  

we're not doing anything much here. We're just  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 fused in 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 C raelian. theme. Okay. And the  C rolling theme is the blue theme that you've  

seen a moment ago. Let's say I want to change  it to United. And I can click on the reload,  

or I need to save it first. And then I'll click  on the reload, and then it changes to the United  

Can I want to change to say Yeti, save it,  and then it becomes the Yeti theme. So maybe  

you're wondering, what's the available options for  you. So if you search for shiny themes in Google  

key, the first results and just click on it.  So here, this is how a civilian looks like,  

if you like that you could type in zulian there's  Cosmo Cyborg darkly, paper, lumen journal, flatly  

readable? sandstone, simplex, slate, Space Lab,  superhero, united and Yeti. Let's try superhero.  

Okay, so it's john doe. Okay. There you go.  

By just default back to civilian. So let's  envisage the code as modular components. So you're  

going to see that inside the UI, you're going to  have a fluid page, you can within this fluid page,  

you're going to define the theme. And inside  the fluid page, aside from the theme, you're  

going to have a navigation bar page, right? So  the navigation bar page is 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 tab panel comprises of nav bar, one nav,  

bar, two nav, bar, three can inside and out  more. One, you have the sidebar panel right here  

to the left, right, you have here sidebar panel,  and your sidebar panel contains tag h3, h3 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 let's 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 header one output one john  doe, which is the result. So in main panel one,  

right Heather one is inside the h1. So h1 is the  tag, which is the biggest tag available. And h4 is  

a smaller tag, right? 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 couldn't even  

make this a stream as well. Right, so you've 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 three, as we have previously mentioned,  it is intentionally left blank. Okay, 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 UI 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 a surname  

is txt two, okay. Now, this stat make a note of  that, how about I put it in the comments t x T one  

and T x T two, okay, and make a note of this to  t x t out. txt or UT okay. So, these two will be  

sent to, to the server TFT to will also be sent to  the server t x t out is generated from the server.  

Okay, so let's go back to the slides.  Okay, why don't I create a new slide.  

So let's duplicate this slide. So let's  call this the first web app. And we're  

going to modify this to reflect the contents  of this web app. So the input data is txt one.  

And txt to write and the output is txt  out, right. So it will send txt one and 62  

to the server. And so actually, the server sends  write txt out and the TTL will be displayed.  

displays. txt out. So here txt one  and txt two will be sent to the server  

txt one and txt two here is input dollar sign  txt one and input dollar sign txt to Okay,  

and so the question is, how does it send it as a  txt out, it's right here output dollar sign txt  

out, and it's going to use this function called  render text. Okay, so there's several render  

function like render table render text, right that  you can modify. So you can also find out from the  

SHINee documentation, okay, so this output txt  out, what is essentially does is it will use the  

paste function to combine TF T one and T two and  separated by a MP space. And then it will produce  

the result as the concatenated text of TF T one  and T two 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 a 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 relate a 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 can there's several tips and tricks which  

we use 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 Our file will contain three components  the UI component, which is the user interface,  

it will accept input, which is the txt one and  txt two, 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 tasty one and  txt two and put it inside a txt out variable. And  

then this TFT out variable is embedded inside the  verbatim 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 first web app, which is essentially  starting from the basics, so nothing fancy here,  

just a simple web app where you can 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.  

Okay, so this video represents the second episode  of the web apps in our series. In the first video,  

we covered how you can develop your very first  shiny web app, and the web app allows you to  

enter the first name and last name, and the  web app will display the output for a sample.  

If you enter the first name as john and the  last name as Doe, then the output panel will  

then output john doe. So in this video, we're  going to show you how you can develop your second  

web app in R. And so the web app today is really  quite simple. The web app will display a histogram  

of the air quality data set, particularly the  ozone levels, and the user will be able to  

adjust the bin size, and then the histogram will  adjust accordingly. Okay, so let's get started.  

So what you want to do now is go to the data  Professor GitHub, so click on the code folder,  

and then click on the shiny folder, and then  click on the 002 histogram. And then what you  

want to do now is click on the app dot r, and then  right click on the raw link, and then save link  

as and then save it to a desired destination.  So since I have already downloaded the file,  

so let's open up the app dot our file. So why  don't we go ahead and run the application.  

So as you can see, the web app has the title  as the ozone level and the side panel shown on  

the left as the number of bins as a slider input  value. So you can adjust this by sliding to the  

left or right and then the resulting histogram  will be updated automatically in real time.  

So let's say that we adjusted to seven bins,  and you will see that in the histogram,  

there will be a total of seven bars. If  you adjusted to 12, then the number of bins  

or the number of bars will then be adjusted to  12. So what is the bin and then in a histogram  

is essentially the number of bars and each bar  represents a range in the value for a sample  

from the range of zero to five or zero to 10.  And so if you adjust it to one bar, then you  

will see only one bar here. And if you adjust to  two bins, you will see two bars, right and etc.  

And for a maximum of 50 bars. Okay, so let's go  back to the code. So in this app dot our file, you  

will see that on line number nine, it essentially  loads the shiny library and line number 10 will  

load the air quality data set into the memory.  And I have already pin the UI in red here.  

And the server in red, and the shiny app  function in red. So as in the previous  

video, I have already mentioned that the shiny app  has essentially three major components consisting  

of the UI component, which is the user interface  and the server component that will accept the  

input value from the UI, and it will do some  processing as shown here. And finally it will  

generate the output and the output will then be  sent back to the UI for display in the main panel.  

Okay, so let's recap that again. So this UI  is the user interface and it will allow you  

to specify the name of the title panel here which  is specified as also level. So let's have a look.  

So ozone level is specified by the title  panel. So you can modify this name if you like.  

Okay, so let's say you want to call it just ozone,  and then you have to save it and then re Load the  

app can and the app will then be called ozone.  Okay. Okay, so this is the title panel here.  

And the next block of code here will be the  sidebar layout. And the sidebar layout will allow  

you to specify the sidebar panel and inside the  sidebar panel will then be a slider input. And the  

slider input is essentially the number of bins,  right number of bins in the UI, and it will have  

an input ID of bins, which the server component  will recognize. Okay, I'm going to show you in  

just a moment. And so the minimum value here is  one and the maximum value of the band is 50. And  

the default value is 30. So you see here that the  minimum is one, the maximum is 50. And the default  

value is 30. So you can adjust the maximum to say  40. And the fall, you can test it with 20. And  

then we will save it and reload the app can and  you're going to see that the web app automatically  

updates to 140. And with a default of 20. Okay,  and you when you slide it, it'll update as before.  

So here you can see that the step size  is one because when you slide the button,  

it will incrementally increase by one. Let's say  that you want to modify the step size to another  

number. Can you do that? Yes, you can. So you  want to specify step to be equal to let's say,  

two. And the minimum you want, adjust it to  zero, save it and reload the app. And here  

now the step size becomes 2k. So 18 and then you  move it it becomes 20 you move it it becomes 22k.  

So you notice that I've also modified the  minimum to be zero because if it's one then  

a step size will be 13579. But if you make  it into a even number, then the step size  

will be also even number Okay, so let's have  a look if the step size is one, it will be 135  

right it will be 135. So I cannot select  20. Okay, so it has to be only odd numbers.  

So if you want it to be even number then  you want to put the minimum to become zero.  

Okay. So here now, you can even  make the step size to be five.  

Right? 05 1015 2025 30, right. Okay, so notice  that the slider input has an input ID of bins,  

and let's go into the server component. And let's  find bins where spins, spins, it's right here  

and bins is right here. Okay, so the server  component will have two bins, the input bins, and  

it will be the value of the argument and breaks,  okay, so it will allow you to specify the number  

of bins in the histogram and x will be the  air quality data set. And then we use the  

dollar sign to specify the column called ozone.  Because in air quality data set, let me stop  

the shiny app. First, let's have a look air  quality dollar sign. And then notice that you  

have ozone you have solar you have when you have  temperature month. They Okay, so we specify ozone.  

And we'll also notice that also on has some  missing data. Right, it has some missing data  

here showing us and a the what we're going to  do with the missing data is to omit it from the  

data set using the NA dot omit function and  then save it back into the x variable. Okay,  

and then the bins variable will then  determine what is the minimum value of the bin  

and what is the maximum value of the bin.  Okay, so moving on to the next function  

is the histogram function where x is the input  data, which is the air quality or sown column  

and the breaks will be equal to the number of  bins that we specify here can so the color will  

be discolor, which is bluish color, and the border  will be black. So this is the blue color mentioned  

in here and the border is black. So we see a  black line and the x label is also on level.  

So the x label is right here. And then the main is  histogram of ozone level. So main is right here,  

right? So you can just label or also the main  text as well. So in this output dollar sign  

dist plot, we will use the render plot and then  this will generate an output called output dist  

plot. And then we're going to know this. If we  screw up to the main panel of the UI component,  

the plot output function We'll have an output ID  equals to this plot. Okay, so the name, this plot  

here and this point here are the same object.  So the server will generate this output object  

called this plot and sends it to the UI component  for display on the main panel. So the main panel  

is located right here. Okay, so finally, the shiny  app function will fuse together the UI component  

and the server component. So you're going to see  that the code communicates between the UI and the  

server, right, so the UI will accept the input,  which is the number of pins and it will send a  

number of pins to the server component, and the  server component will generate the histogram plot.  

And the histogram plot will be contained  within this output this plot and it will  

be sent to the plot output function in the  main panel of the UI. And so you will see  

the resulting histogram being generated. And if  you adjust the value of the input bin number,  

then the plot will also update automatically  using the reactive function of SHINee. Okay,  

so you can customize the color  if you like, let's make it  

003366. Okay, so it's dark blue? Or what if we  just call it blue? Or how about let's use red.  

Okay, so the plot will  become red, if we use green.  

So the histogram will also be green. So here,  you can customize the color to your own liking  

and experiment. And don't forget to upload this  to your GitHub so that you can start building your  

portfolio for data science projects, and then  you're going to have several repository in your  

GitHub in no time. Congratulations, you have  built your second shiny web application in our  

Okay, so this is the third episode of the web apps  in our series. So today, we're going to build a  

play golf web application. So probably you're  wondering what is a play golf application. So  

the play golf web application that we're going  to build today is going to be based on the  

weather data set provided by the weeka data mining  software. So let's have a look here. So the data  

set is a relatively small data set where it has a  total of five variables. So four variables are the  

outlook temperature, humidity, and when and the  class label would be to play or not play golf,  

which is a function of the weather and the  condition, right, like whether it is sunny  

weather, the temperature is high, whether the  humidity is high, or low or medium, and whether  

there is win or not true or false. And then the  final decision is to either play or not play golf.  

Okay. So before we dive into the code, let's have  a look at how this the web application looks like.  

Okay, so the web app looks like this. It's a very  simple application. So the name of the web app is  

play golf. And so here there is the input  parameters comprising of the four variables that  

I have mentioned. The first one is the outlook.  And so the user can select one of three outlook,  

whether it is sunny, whether there is overcast of  cloud, and also whether there is rain or not. And  

the second variable is to temperature. And so this  is a slider input, so the user can slide the input  

value, and then the humidity is also a slider  input. And then windy is either a yes or a no,  

which is a drop down menu. And then when you're  ready to make a prediction, you just click on the  

submit button. Okay, and here you see a prediction  is being made. And the prediction says yes,  

and then we also see the underlying probability  in that the know has a 27% probability. And the  

yes has a 73% probability. And so you could  play around with this, right? If, for example,  

if it is sunny, and the humidity is very high, and  the temperature is very high, and there is when  

should you play golf? No, right? I mean, really,  if the temperature is high, it's very humid, and  

it's very windy and it's sunny, right? Probably  not. Right. Okay. What if What if the humidity is  

low temperature is quite cool, and it's sunny,  and it's not so windy. Would you play golf,  

right? Yes. Right. So there's an 87 probability  for Yes, and a 13% probability for No. Okay, so  

this is the web app we're going to build today. So  let's go ahead and stop the web app for a moment.  

Okay, so what you want to do now is Go to the  

data Professor GitHub. And then you want to  click on the code directory, and followed by  

clicking on the shiny directory. And finally  clicking on the 003, play golf directory.  

And then click on the app dot our file. Okay,  so what you want to do is right click on the  

raw link, and then save to file. So I'm going  to save it into the weather folder, save it,  

okay, it's right here, click on it,  make sure that the app works. Okay,  

it works. prediction has been made. Okay, cool. So  let's just clear up this by pressing on the ctrl  

and L button. Okay, so let's have a look under the  hood, what does the app dot our file looks like?  

So the first couple of lines, which is import  libraries used by this app dot our file. So  

this comprises of the shiny package, shiny themes  package, the data dot table library, the our curl  

library and the random forest library. Okay,  so next line of code would be to create a data  

object called weather by reading the CSV, which  is downloaded from the data Professor GitHub  

in the data folder. And the file is called  weather dot weeka dot CSV panelists have a  

look at the data set. What does it look like?  I'll click on the line weather and then I hit on  

the control and enter button. And then let's type  in weather. Okay, so this is wanting me to see,  

let's go with head and then weather. Okay,  and so we see that there are five columns  

outlook, temperature, humidity, windy and play.  Right. And let's have a look at the data type  

of the data set, we see that the outlook  has three factor levels play has two factor  

levels. So these are categorical label. No,  yes. And the outlook is overcast, rainy and  

sunny. Windy is a true and false humidity and  temperature are integers. And so a random forest  

model will be created by using the four variables  comprising of Outlook temperature, humidity,  

windy as the input variable, and the play variable  here will be used as the output variable or the  

variable that we want to predict. Okay, and in  the data equals to weather, which is the weather  

data object here. And we're going to use number of  three to be five lines read. And because there are  

four input variables, we're just going to use em  try a four. Okay, so let's try building a model  

and the model has been built. And let's apply  the model for prediction, shall we, I mean,  

just to test that the code is working properly.  So let's try applying the model on the input file  

that I have previously mentioned about. And so  we're going to run this line and putting the data  

into the variable called test can and we're going  to assign the factor because if we don't do it,  

then it'll provide an error. So before we run this  line of code, let's just try to make a prediction  

model. And we should be able to see a error coming  up. Okay, so we got this error error in predict  

random forest type of predictor in new data do  not match. So what we notice is that if we type  

in the str, and then we type in weather, and then  we notice that the outlook has factors with three  

level, but if we type in str, and then the test  variable, notice that the outlook has a factor of  

only one level. And this is because the input data  has only one line of data, which is essentially  

one row of data. And so the outlook is only sunny  for the prediction being made has only one role.  

And but in reality, it should have three levels of  the factor. So we're gonna define that by telling  

the code that there are three possible factors  there are overcast, rainy, and sunny. So let's  

run that line of code and then run the prediction  again, okay, and it works. And then print outputs.  

And here we go, we got the prediction, which  is exactly what is going to be displayed on the  

web application. Let me show you. Right, we make  the prediction, and shown here. So this table you  

see here is shown right here. So the model works,  and let's go to the other lines of code. So the  

next one would be the user interface. Right. As  I mentioned in previous video, the user interface  

represents the first component of the shiny web  app. And this is followed by the second component,  

which is the server and then this is followed by  the third component, which is the fusion of the  

user interface and the server component using  the shiny app function. So let's talk about the  

UI. So this UI object makes use of the fluid  page function And we're going to use the theme  

equals to the shiny theme united. And so  the United theme will give the buttons  

a red color. So if we change it to thoroughly and  then we're going to have the thruline color theme,  

which is a bit blue. Okay, so please refer to the  first video of the web apps in our in order to  

see the selection of web templates that you can  choose from. Okay, so let's run the app again.  

And I'm going to put the app just about right,  right here. So the header panel is play golf.  

And so this is right here, play golf. So if you  want to change the name, feel free to do so.  

And then the next one is the sidebar panel. So the  sidebar panel will accept the input parameters is  

located to the left, and there will be a total of  four input. And so the first one is select input,  

which is a drop down menu. And if you click on it,  you get three selections, Sunny, overcast, rainy,  

and when you hover on the drop down menu on sunny  it will secretly under the hood, select the sunny  

object, and if you select on the overcast also, it  will under the hood be equivalent to the overcast  

object. If you select on the rainy it will be  equivalent to the rainy object and the default  

is to select rainy, right here we'll select rainy  as the default What if you change it to sunny  

now let's change the value to be a high  value, let's say like 85 and humidity to be  

95. And it's windy, that's true. Reload the app  again, right. So high temperature high humidity  

windy, Sunny, don't play golf. Okay, so here you  can change the default value to your liking. Okay,  

so we have mentioned about the three data  objects four here, Sunny, overcast and  

rainy. So keep that in mind, we're going to  make use of data in the server function. And  

note that when we will refer to it later on in  the server function, it will be referred to as  

input dollar sign outlook input dollar sign  temperature input, dollar sign humidity and  

input dollar sign windy. Here, why don't we just  scroll down and have a look here input dollar sign  

outlook input dollar sign temperature input dollar  sign humidity input dollar sign windy, okay. And  

then let's move back up. Notice the spelling here  using the small letter not the Capital One. So the  

Capital One Here are the label. So it's exactly  what we're going to see in the web application  

outlook with the colon is right here on the label.  Okay, actually, you don't have to type in label  

if you don't want to, we could just you know,  delete it, and it will give the same results.  

It's just implied, okay. But if you want to add  the label argument, you could feel free to do so.  

Right? But if you do it for one, well might  as well do it for all. So that would actually  

make the code looks a bit more easier to read.  Right. So let me see here that okay, this is the  

object name, Outlook. And the label is outlook  with a capital O reload the app. Here you go.  

Right, it works as usual. So here, this outlook  here is that outlook object. And this temperature  

here is the temperature object. And this action  button here is the submit button. So this Submit  

button is added in order to overcome the reactive  function. So we're just at the familiar Submit  

button so that users can initiate the prediction  process when they feel ready to do so instead of  

having the web app being reactive and making the  prediction spontaneously upon sliding up and down  

of the input values. Because when it's reactive,  if you move it by one notch, and then you let go  

of the mouse, it'll make a prediction. But for  this one with the submit button, no prediction  

will be made until you actually click on the  submit button to actually this might be a good  

thing on the server side because the server will  work a bit less if the prediction being made is  

made only once versus if it is in the reactive  mode. If you slide the input value and you just  

change your mind later on. Then prediction will  be made at each point off the changing of the  

input value of the slider here or even the drop  down menu, right. But we do it once with the use  

of the submit button. Okay, and that's it for this  left sidebar panel. And then the main panel here  

will display the result from the output generated  by the server function. So we're going to talk  

about that in just a moment. So why don't we  note that the output being generated by the  

server component will be called contents and  table data. Okay. Okay, so let's hop on to the  

server function which is the second component. So  in this data set in Put variable it will comprise  

of the first component is it will create a data  frame which will accept four input values from  

the web application compressing off the outlook  temperature, humidity windy, which is right here  

outlook temperature humidity windy, and then it  will combine it with the play variable, which is  

the fifth column of the original data set and then  it will transpose the data set it will rotate it  

in will transpose it and then write a input dot  CSV file, it will read the input that CSV file  

back in into the test variable. And then it  will apply the factor function in order to tell  

that the outlook has three levels. And finally, a  prediction will be made using the model generated  

earlier by means of the random forest and apply  the prediction model to predict the input values  

from the user. And once the prediction is made, it  will be sent from here into the output dollar sign  

table data as the function data set input right  here. And then it's going to render the table  

as we will see in the web application. So the  table that is being rendered will be right here,  

which comprises of three columns to prediction  the know in the Yes, probability k and this status  

output textbox is just essentially this box right  here. So if we load the app for the first time,  

it will just say server is ready for calculation.  And if we click on the submit button, the text  

will change to calculation complete and it will  be followed by the prediction results table. Okay,  

so note that there are two output being generated  right here output dollar sign contents, output  

dollar sign table data. So these two outputs will  be sent to the UI component right here, table data  

and contents, table data will be displayed  as a table using the table output function.  

And the status of the prediction whether it  is ready for prediction or prediction has been  

made will be displayed by the verbatim text  output function K. And this is just a label  

of the status output text box shown right here  that we're going to have the H three font size,  

I mean, if you want to change it to H to  make it a bit bigger than you will notice  

that the font will become bigger, right? So  I'm just going to make it back to h3. Okay.  

So that's all right. And then the last component  shiny app function, which is fused the UI and the  

server together again, you have all of this in  121 lines of code. And so nothing fancy here,  

just a simple web application that you  can create using the shiny language.  

Okay, so this video represents the fourth episode  of the web apps in our series. And today we're  

going to cover about how we can develop a Iris  predictor, which is a machine learning model  

in the background. And the web app allows the  user to select the input values for the four  

input parameters and press on the submit button  and make a prediction. So without further ado,  

let's get started. Okay, so the first thing that  you want to do is go to the data Professor GitHub.  

Okay, once you arrive here, you click on the code  link, and then find SHINee, and then click on the  

serial zero for Iris predictor. So what you want  to do now is to download the first three files  

comprising of the app numeric dot, our app, slider  dot r and the model dot r, because the other three  

files found below will be generated automatically  when we run the code. Okay, so why don't we just  

click on each of them manually. And then for  each, right click on the raw button and click  

on the Save Link As a key and then you select  the location in your computer where you want  

to save the files. So you do this for all three  files, the app numeric that our apps are and the  

model dot r. Okay, so I have already done that.  And I will go back to the our studio application.  

Okay, so before we begin, let's have a look  at what the the iris predictor web application  

that we are going to develop today looks like so  you want to hit on the run app, you need to make  

sure that your working directory is at the folder  where it contains all of the necessary files to be  

run the one that you have just downloaded.  Okay, and once you have made sure already,  

you want to click on the run app button.  Alright, so this is what the app looks like.  

And it allows you to put in the four input  parameters. And so these are the default  

values which you can adjust accordingly. And  then when you click on the submit button,  

the prediction will be made. And  here the prediction is made to be  

that the input parameter is predicted to be a  Iris setosa flower and the probability of it  

being a Irish atossa is 100% sense, okay,  and so if you change the input parameters  

and so the prediction will also be changed  because the input parameter will be feed  

into the predictive model, which is a random  forest. And then the random forest will perform  

the classification. And it has classified this  input parameter as a Iris virginica with 100%  

probability. So let's have a look under the hood,  what does the code actually looks like? Okay,  

so the first code that you want to open up right  now is the model dot r. So in this tutorial,  

we're going to pre build the random forest  model, and then we're going to load it in,  

right. So as you recall, in the previous videos  of this channel, we have shown you how you can  

deploy your predictive model into a RDS file. And  so what you want to do is you develop the model in  

this model, dot our file, and you save it as an  RDS, right? So you're deploying that. And then  

you're going to read that in here on line number  15, you're going to read the model dot RDS n, and  

you're going to give it a name, the name is model,  and then we're going to use this model for making  

the prediction. So the advantage of this is that  the model is already built. And so there is no  

additional workload on the shiny application. So  it can just readily read in the model and perform  

the classification. So this will be beneficial in  the case in which the predictive model will take a  

long time to build the model. Okay, so let's have  a look at the model dot our file where we will  

be building the model. So the first steps that we  want to do now is to load in the libraries, which  

will include the our curl and the random forest.  So the our curl library will allow us to read the  

data Professor GitHub to download the iris data  set, and then the random forest will be used to  

create the prediction model. And we also need the  carrot package in order to do the data splitting.  

Okay, so Iris here will mean that we will create  a data object called Iris because we're going to  

read in the CSV, which will retrieve the CSV  file from the data Professor GitHub, and the  

file is called Iris dot CSV, okay, and it will  use the carrot package to perform data splitting,  

using a ratio of 8020 to 0.8. Here is to 80%  split, which will go into the training index, and  

then we will subsequently use the training index  to create a training set in which it will perform  

slicing of the original Iris data frame, and then  the remainder 20% will go to the testing set.  

So what we're going to do next is we're going to  write the training set and the testing set out  

into the CSV files, right, because that would help  to remedy possible shuffling of the data that will  

go into the training set and the testing set, so  it will allow reproducibility in the future. So in  

the future, we can just read in the training dot  CSV file, instead of performing the data splitting  

again, right. So here, we're going to read in the  training dot CSV file and give it the same name,  

which is the train set Canada, we're going to  delete the first column, which is the index  

number. And then we're going to build a model and  assign the built model into the model data object.  

And once a model has been built, we're going to  save it as the RDS file. So the we're going to  

deploy the model into the RDS format. So in this  random forest function code, we're specifying that  

we want to predict the species of the iris flower.  And we're going to use all four input parameters  

and the data set, we'll be using the training  set for making the model and then we're going  

to assign a entry value, which is the parameter of  the random forest to be five Heinz red, and we're  

going to assign the M try parameter to be four,  right, and then we're going to assign a true value  

for the importance argument, okay, and so so while  you want to do is you want to run all of this  

blocks of code, so you could just Ctrl A,  select everything and then Ctrl, enter.  

Okay, and then the data will be read, and then  a model will be built, and it will be saved as  

the model dot RDS. Okay, so this  concludes the model dot our file,  

and then we're going to close that. And  then we're going to open up the second file,  

which is the app gnumeric dot r k. So let's have  a look. The first few lines will be importing the  

necessary libraries, which will be the shiny  library, the data dot table, the random forest  

package, and then we're going to read in the  model that we have built in the previous step.  

And we're going to assign it into a model  object, right. And then like in previous video,  

the shiny web application will contain three  components. So the first component being the UI,  

and the second component being the server. And  the third component being the shiny app function,  

which will essentially piece together the UI and  the server. Okay, so let's have a look at the UI.  

And we're going to open up the web application  and have a look right at the same time.  

And for readability of the code, I would just add  additional enters to it and new line to it. So  

that when I open up the web browser, concurrently  The values here won't be hidden. Okay? Save it and  

go back to the web application. Alright, so here,  the name of this web application is called Iris  

predictor. And so it is in the header panel here.  So we put in the iris predictor, if you want to  

change the name, feel free to do so right here.  And then we're going to have the sidebar panel,  

which is on the left, and then we're going to  have the main bar panel, which is on the right,  

so as always, the left or the sidebar panel will  take in the input parameters, and then clicking  

on the submit button, which is right here, it will  send the input parameters to the server function,  

and the server will use that input parameters to  feed it in to the predictive model, which is the  

random forest model and make a prediction.  And once your prediction has been made,  

the resulting output value generated will then be  feed back into the main panel right here. And then  

the results will be displayed in the table data,  which is going to be occurring right below this  

text message. So the table data will be shown  right here, which is the prediction being made.  

Okay, so in the input parameters, we're going to  use the HTML tag and inside we're going to assign  

a size of the header to be h3 right, and a name  will be input parameters right here. So further  

showing the versatility of the shiny application  framework. So notice that the s and l are capital  

letter, and this is the ID of this input parameter  sepal length, and it is case sensitive. So we have  

to type it in exactly S is when we're going to  use it in the next step. So it's going to be  

like input dollar sign, and then CBOE dot length.  And then this will be the input parameter, which  

the server function will be using as the data to  be fed into the random forest model. Okay, and so  

the label here will be sepal length. And the label  means right here, the label and the value is the  

default value, which is five and here is five. So  if you change the default value to 5.1, and you  

save it, run the app again. So you see that the  5.1 will be updated right here in place of the  

5.0. Okay, so the same thing will be for the sepal  width, petal length and petal width, right with  

the label and with the value, which is the default  value right here. And then the next block of code  

here is the action button function. And this will  be the submit button. So it will overwrite the  

reactive function in which when there is no Submit  button, every time we modify the numbers in here,  

a prediction will be made. So that would put a  heavy load onto the server, because every time  

that you update the value here, a prediction will  be made. So imagine that you update the values 10  

times 20 times and 20 predictive models will be  created. Whereas in a situation where you have  

the submit button, you can spend all the time or  as many times as you need to update the values,  

right? Let's see if I went to and then I changed  my mind, I want to have it 4.9. So do this 10  

more times. And so the prediction model will  not be built, right. So it's going to wait for  

you until you click on the submit button and then  the prediction will be made. Okay, so this will be  

more economical on the server side. And also for  familiarity, where we normally would click on some  

button in order to initiate the process of the  prediction. Okay, and then the following block of  

code main panel will be right here. So in the tax  label h3 status output, it will be this part. So  

notice that this block of code is exactly the same  as the HTML block of code. So I'm just showing you  

the versatility of the shiny web application.  And you could use either one, okay, but this  

is the shiny way of doing things, right. So let  me show you by putting it right here. And then  

I'm going to comment that out and put in the APR  parameters here and then replace the value inside.  

Okay, reload the application, right, and then it  looks exactly the same, right. So you can do it  

both ways, right, and then the following text box  shown here will tell you that the server is ready  

for calculation. So this will be displayed upon  loading of the web application. And upon clicking  

on the submit button, the value will be changed  to be calculation complete. Okay, so this will  

be on the server side. So I will show you in  just a moment. Okay, so we finished with the  

UI component. And now let's go on to the server  component. And so here we're going to load in the  

function, okay, so this block of code here will  be the input parameters, which will be obtained  

from the UI component where the user will input  the input parameters and click on Submit button.  

And upon doing that, all of the input parameters  will come in as shown in this block of code here.  

And this block of code will essentially generate  the input CSV file, which will be read into the  

test object and then apply the model to  make a prediction on this test object.  

And once the prediction has been made, this block  of code data set input will contain the prediction  

and the prediction value will be inserted right  here, right and it's going to be encapsulated by  

a output table data variable name and then  This thing and then the input dollar sign,  

and then the output dollar sign table data will be  sent to the main panel in the UI to be displayed.  

So it's right here, right. So this one will  come from the table data right here, table data,  

right this highlighted in blue, and it will  be coming from the prediction results table,  

right, which we use the render table function  here, and the data set input here will contain  

the prediction which is coming out from the output  data object. Okay, so let me go specifically line  

by line here. So a data frame will be created, and  then name will be the name of the Heather variable  

name on the first row, and then the values will  take and the input parameter value from the UI.  

So input dollar sign, sepal length, sepal width,  petal length, petal width will come from the  

input text box right here 5.1 3.6 1.4 2.2. So  these text box will be the input dollar sign,  

sepal length, sepal width, petal length, petal  width, okay, and then we're going to create a  

data frame. And once we have done that, we  will write it out as a input dot CSV file.  

Now we're going to read it back in, and then  we're going to put it into the test object,  

and then we're going to create a output object  and a data frame will be created. And we apply  

the prediction function in order to make  a prediction using the random forest model  

on the input test data. And once the prediction  has been made, we will also tell the probability  

in three digits Okay, and once a prediction has  been made, it will then be sent to this output  

data object and it will print it out and it will  be representing the data set inputs, and this  

data set input will be inserted into the render  table function, and a table will be generated  

to show you the output prediction results shown  right here. Right. Okay. So that's essentially  

it for this Iris predictor in the numeric form.  So let's close this and hop on to the next one.  

Okay, so now we're going to proceed with the app  slider version. And before doing so you want to  

clean the workspace environment. So click on the  broom button. And then after you have done that,  

then you want to click on the app, slider  dot r and then Ctrl, a, and then Ctrl, enter.  

Right, and then the web app will be loaded. So  you see that now instead of a tap spots where  

we put in the numerical value, you're going  to have a slider, right and then you click on  

the input parameter by sliding here, and then  after you're satisfied with the input values,  

then you will click on the submit button, and  then the prediction will be made. And as always,  

it looks exactly the same, but the only difference  is the input parameters will have the slider bar  

instead of the textbox. Okay, so let's have a  look under the hood. So what new code did we  

add to this file, so we've added line 1718, and  19. And then we've also added two new arguments,  

which is the minimum and the maximum argument  into each of the inputs. And we also change the  

name from numeric input into slider input.  And that's essentially it, we just change  

a couple of lines of code and the web app will  look like this. Instead of a numeric text box,  

we're going to have a slider bar. So the value  of the minimum here will be taken as the minimum  

function and then the train set dollar sign simple  link, right. So I don't have to manually put in  

the minimum value or maximum value, but I will  do this programmatically. So I'm going to use  

the minimum function and inside the minimum  function as the argument, I'm going to say,  

Okay, I want to have the train set object. And I  want to have the simple link column. And I want  

to know what is the minimum value, right, it's  going to be like this. So let me close this,  

and I'm going to read in the file. So let me  show you how it looks like. And if I run the  

train set, it will look like this. And then  I'm going to run this line and then notice that  

the first column will be gone, right, I don't  want the index to be shown. So I just deleted out.  

And then when I say train set dollar sign  sepal length, where they get will be this,  

so it's going to be the values of only the first  column. And upon adding the minimum function  

in front, I'm going to get the minimum value. And  if I use the maximum function, I'm going to get  

the maximum value of this column. So the minimum  is 4.3. And the maximum is 7.9. So instead of  

putting in the values manually, 4.3 7.9, I'm going  to do it programmatically, and it's going to be  

so much easier, right? And then I just put it  in right here. And that's all for modifying the  

code and everything else works exactly the same.  And you get a new feel to the web application  

and it's not that difficult. Okay, So play around  and let me know what kind of web application you  

want to be made and Or the input data that  you want me to use for making the web app.  

Okay, so today represents the fifth episode  of the web apps in our series. And today we're  

going to cover about how you can develop a BMI  calculator. So if you're wondering what is a BMI,  

so essentially, BMI stands for body mass index,  and it is computed by dividing the weight in  

kilograms by the heights in square meters. So for  example, if you weighed 70 kilograms and you are  

170 centimeters tall, then you would first have to  convert the height to a meter. So 170 centimeters  

would then become 1.7 meters. And according  to the equation, you would take your weight,  

which is 70 kilograms divided by 1.7 meter  squared, okay, so let me calculate that. So 1.7  

times 1.7, would be 2.89. And if I weighed 70  kilograms, divide that by the squared heights,  

then my BMI would be 24.2. Okay, so let's have a  look at the scale of the BMI in adults. So if you  

have a BMI below 18.5, then it would mean that you  are underweight. If you have a BMI in the range  

of 18.5 and 24.9, then it means that you have a  healthy weight. And if your BMI is between 25 to  

29.9, it means that you are overweight. And if you  have a BMI of greater than 30, then you are obese.  

Okay, so in the previous example, a BMI of 24.2  would mean that the weight is a healthy weight.  

So without further ado, let's get started in  developing our BMI web application. So you  

want to go first to the GitHub of the data  professor. And so click on the code folder,  

find shiny and click on the shiny folder.  And then find the 005 that BMI click on that.  

And then you want to download both the  about.md and the app dot r into your computer.  

So why don't we do that, right, right  click on the raw to save link as because  

we're going to download it into a BMI folder. We  save it there. And then download the second file,  

right click on the raw link, safely add as save  it to the folder BMI. Okay, and now we have  

to upload the folder. Okay, there you have it,  you have two files at that R and about.md. So  

let's have a quick look at what this file look  like. So as you show the app dot r is the art  

code comprising of the three major components, the  UI, the user interface, number two is the server.  

And number three is the signing out function which  fuses both the UI and the server function. And in  

the second file, you have the about.md. So this is  written in the markdown language. And it's going  

to be used by the app dot our file. So we're going  to see that in just a moment. So before we dive  

deep into the our code, let's have a look what the  web application looks like. Click on the run app.  

Okay, so this is a simple web application where  you can put in your input height and your weight,  

so the height will be in centimeters and the  weight will be in kilograms. So the minimum  

value here is 40 for the heights, and 250 for the  maximum value, and for the weight, the minimum  

value is 20. And the maximum value is 100. So  please note that this BMI calculator is developed  

for adults and it's not suitable for children.  If you want to develop a BMI for children, then  

we will have to refer to this second link here.  Okay, so as you notice that when they click on  

the about link on the navigation bar, it shows  the information in the About page. So originally,  

the code was written here in markdown language and  here in the website. It displays it as a Normal  

webpage. So here you can add boldness to the  text, you can add superscript make it stand out  

as an equation, you could add italic font, right.  So all of this is within the markdown language,  

right? For example, if you for example, if you  use two asterisks, it will mean that the tests  

will be in bold text. So meaning that you have  to use two asterisks before and after the test,  

you want to meet both. And if you use the for  hash tag, it means that you are going to use the  

Heather level for tag, which is the h4 tag  in HTML. And if you're using the greater than  

symbol here, it means that it's going to display  this light gray bar to the left. So you know that  

it's a equation. And if you use one asterisk, then  it means that the tax will be in Tillich form,  

right. And here we use it for hash  tagging in and so it becomes a header.  

And then we make the BMI calculator in Italy  form by using the asterisk before and after,  

and even add the links to the website, right.  So the taps that you want to make into a link,  

you have to put that in bracket and immediately  following that, you have to put in parenthesis the  

URL of the webpage. And so this is format to like  a normal web page. And so the web application,  

and so the web application, it's mobile friendly,  and you can use it on your mobile phone, okay,  

it would look something like this on the phone.  And if you click on it, and you get the BMI,  

right, in my previous example, a  height of 170 and a weight of 70,  

you will get a BMI of 24.2 to 145. And because  we're rounding it, and therefore we get 24.22.  

Okay, so this web application seems simple enough,  okay. And so let's dive deep into the code. Okay,  

so let's have a look at the code of the app dot  our file. So the first two lines here will be the  

loading in of the library package of shiny and  shiny themes. And then following that we have  

the user interface. So inside the UI optic, it's  going to be the fluid page function. And here,  

we will define that we're going to use the  shiny theme of united and first run the app and  

have a look. So here at the nav bar page function  shows that we're going to use the name of this  

navigation bar to be BMI calculator. And then the  tab panel will have the first navigation tab here  

to be home. Okay, and inside top panel here, we're  going to use the sidebar panel and the main panel.  

So as usual, the sidebar panel is right here to  the left, and to the right, in the status output,  

we're going to have the main panel, right so the  sidebar panel will contain the input parameters,  

which comprises of two input parameters, the  height and the weight, and we're using a slider  

input, so you can slide the bar here, and then you  get the desired value, click on the submit button,  

and then you get the calculated BMI value. Okay,  so the slider input here is responsible for this  

slider button. And so the name of this slider  input is called height here in label height.  

And the first one will be the ID of this specific  slider inputs. And so this slider input has an ID  

of heights, notice the small h and then the second  slider input has a value of weights and notice the  

small W and so these two slider input will then  be used in the next step, it will be used by the  

server function as the input dollar sign  weights and input dollar sign heights in order  

to calculate the BMI, okay, and then the action  button function will be the red button that you  

click to initiate the calculation process.  And so the main panel will have h3 tag here  

showing the status outputs Okay, and then the  verbatim text output will contain the contents  

ID, which is from the output in the server  function. And in the table output is also  

from the output of the server function, it is  called the table data. And this is the table  

data containing the computed BMI value. So let  me recap that again. So here the slider input,  

we have to work them height and weight and so it  will be referred to as input dollar sign heights  

input dollar sign weights. And as the user  slides this value, it will adjust the value  

to the height parameter or the weight parameter  and the input dollar sign height value and the  

input dollar sign weight value will then go to  the server function. I will show you right now,  

right here. So we go to the server function in  the equation that we're going to create puti BMI.  

So here we're taking the input dollar sign weight,  dividing it by the in parenthesis, the input  

dollar sign height divided by 100, right, because  we want to convert the centimeters to become  

meter, so we have to divide the centimeter value  by our friends read, and that will then make it  

a major form. And then we're going to multiply the  height by itself so that we get the squared height  

value. And then we're going to divide the weight  by the height in order to get the BMI. And we're  

going to encapsulate the BMI value inside a data  frame so that we can display it in the final  

output here below in the output contents, it will  show that the server is ready for calculation or  

the server has already completed the calculation.  So this will be modified by the submit button,  

the red button that we clicked right here. So  when we don't click the button, it will say  

server is ready for calculation. But upon clicking  on the red button, the BMI will be calculated.  

And then in this text box, the text will change  to calculation complete kn in the following output  

results here is called the output dollar sign  table data. And inside here, we're going to  

use the render table function. So the results  from the data set input will be the computed  

BMI value right here in the print BMI. So let  me recap again, let's have a look at the web  

application again. So this web application will  take two input parameters, the height and weight,  

and they are in the centimeter unit and the  height and the weight will be referred to as  

input dollar sign heights and input dollar sign  weights. And upon clicking on the red button,  

it will be sent to the server function into this  BMI calculator function. So it will then take the  

input weights and the input height and perform  the calculation and return the BMI value. And  

then we put the BMI value into a data frame. And  then we print it out and the results of the BMI  

is printing out is part of the data set input  variable. And that is called within the render  

table function of the output dollar sign table  data and the output dollar sign table data  

will go to the main panel right here in the  main panel to be displayed in the table output.  

And it looks like this right here. So you see  that it's called BMI and then we have to BMI  

value right beneath it, right. And that's all  there is to building this BMI web application.  

So you can play around with this code. And you can  change the default value, for example, the height,  

you can make it 180 and the value of  the weight, you could make it say 75,  

right and then run the code again. So the default  value then becomes updated to be 180 and 75.  

So let's say that you want to update the  maximum value to be 300, minimum value to  

be 50. And the weight, you want to update  it to say 30. And the maximum would be 120.  

And then we load the application and here you  see the minimum values and maximum values are  

updated accordingly. So you see here,  if the weight is maintained the same and  

the height increases, then the BMI becomes less.  But if the height decreases, then the BMI is high,  

right because of the equation  of the BMI, whereby the  

weight is divided by the height squared, okay,  and so you can play around existing values,  

playing around with the template. So let's say  you want to change the United theme to become a  

Boolean. Save it, reload the app, and  here you go, you get a different colored  

web application. Right. So the types of theme  could be obtained by looking at the websites.  

You can Google that Google for shiny themes,  click on the click on the art studio.github.io  

slash shiny themes. So I'll provide the link in  the description down below. So check that out.  

In this video, I'm going to show you how  you could deploy a shiny web application.  

And without further ado, we're starting right  now. Okay, so the first thing that you want  

to do is head over to the GitHub of the data  professor. And you want to click on repositories,  

then find and click on the iris, our Heroku.  

And so all of the files that are needed to deploy  your app is found here. So feel free to clone this  

to your own GitHub or also you could download the  entire folder content here by clicking on the code  

and then download zip file. So let's have a  look here. So you're gonna see that we have  

the UI dot r, which is the user interface. And we  also have server dot r, which is the server side  

component of the web app. So essentially, the our  shiny web app will be comprised of two components,  

the user interface and the server component. And  then we're going to have the training data set  

and the testing data set as the CSV file. And the  actual model will be contained within the model  

dot RDS. And so the machine learning model is  saved as the model dot RDS. And it will be loaded  

into the web application when we run it. And then  there are two additional r files. Let's have a  

look. So the first one is in that dot r. And so  let's have a look here. So it will allow us to  

install the necessary libraries. So we're going to  install the random forest and the data dot table.  

And the run dot r will allow us to run the R  shiny and assign the proper ports. Okay. And  

so that's all there is to having the necessary  components for deploying your our shiny web  

application. So let's head over to Hiroko. And  so you want to click on new create new app.  

And then you want to give the app a  name. So let me call it VP, Iris, our  

create app. And then I want to connect to GitHub.  And I'll find Iris or he Roku. So for your case,  

you want to find your own GitHub and you want  to find your own RSR he Roku and then connect.  

And then this is very important, because you  want to click on settings. And in order to have  

the support for our, you're going to need to add  the custom build pack. And so you want to click on  

the Add build pack. And you're going to notice  that there are some officially supported build  

packs. So by default, you're going to have Python,  right, and you're going to have others like PHP,  

Ruby, Java, node j s. And so for our we're going  to use a third party. And the third party link to  

the build pack for R is given here. So I'm going  to provide you this link in the description of  

this video. So you want to copy that and then put  it here as well. And then click on save changes.  

And then you're going to see that it has been  added successfully here. Now you want to head  

back to deploy, scroll down and you want to  click on deploy branch in the manual deploy.  

So at this point, you want to take a break, grab a  cup of coffee and wait for the web app to deploy.  

So we're gonna see the log  of what is happening here.  

So initially, it is installing version 3.6,  point three here. And it is downloading  

the bill pack directly from Amazon Web  Service, and also having shiny as well.  

Right, so it's installing  the data dot table library.  

And right now it's building the environment.  

So this web application has already been built  in a previous video. So the link to that video  

will be provided in the description down below.  And in the meantime, maybe I could show you that  

shiny and it is number four Iris predictor.  

And so you're going to notice that we've been  using the testing and training and for the app,  

we divided the components of UI and  server into these separate files.  

Okay, and so it's compressing the environment  from 499 megabytes to 121 megabytes.  

Although the our packages occupies 121 megabytes,  okay, so it has compressed it down to 152.  

And it is deploying the web application  to dp that's Iris dash r dot e Roku  

app.com. And so in just a moment, you're going  to see a link to view the deployed websites.  

Okay, finished. And so it says that your app  was successfully deployed. Let's click on it.  

Alright, so it says here that server is ready  for a calculation. Let's submit All right,  

so predictions seems to work and it is predicted  to be setosa with the probability of 100%.  

k this predicted to be pseudoscience. Well,  

same thing she told us and now  it was predicted to be virginica.  

100% virginica. Thank you for watching  until the end of this video, and I hope  

that this video was helpful to you. And for  more tutorials in data science, Bioinformatics,  

as well as Python and our coding tutorials, please  check out my YouTube channel at the data professor  

and also my new and second YouTube channel  decoding professor. And you can also find  

me on the medium platform where I blog about  data science as well as doing Python tutorials.  

And last but not least, I would like to thank  Free Code Camp for this awesome collaboration.  

And please don't forget to smash the like button,  subscribe if you haven't already. And until next  

time, the best way to learn data science is to  do data science, and please enjoy the journey.