Shiny is an R package that makes it easy to build interactive and data-driven web apps straight from R.

We just published a course on the freeCodeCamp.org YouTube channel that will teach you how to use R Shiny.

Dr. Chanin Nantasenamat, also known as the Data Professor, teaches this course. He is an Associate Professor of Bioinformatics at a Research University and has more than 15 years of experience in data science.

Apps created with Shiny can be hosted on a standalone webpage or embedded in R Markdown documents. Shiny makes it possible to build these web apps from R and also to create them using only R code.

This R is a little shiny. :)

In this course you will first will learn the basics of Shiny. Then you will learn how to use Shiny to build the following apps:

  • Print User Input
  • Display Histogram
  • Machine Learning (Weather Dataset)
  • Machine Learning (Iris Dataset)
  • BMI Calculator

After building those apps, you will learn how to deploy them using Heroku.

Watch the full course below or on the freeCodeCamp.org YouTube channel (90-minute watch).

Transcript

(autogenerated)

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.