12.2 Work with ui.r and server.r files - Video Tutorials & Practice Problems

<v ->When building a full Shiny app,</v> it is generally a good idea to have a dedicated folder, and in there having a UI.R file and a server.R file. So let's go ahead and save this file as the UI file. We'll say save, create new folder, we'll call it Shiny app, and will call this UI.R. We'll create another new file with control + shift + N. We'll save this as Server.R. Notice our GIP panel shows we have a new folder with files in it. Now, you can mostly leave the server empty as we build out the UI side, but we need to put in at bear minimum library of Shiny. And it is a good idea to actually run this line and that way we can use auto complete. We say, Shiny server, and that takes on a function, which itself takes in input and output. And if we just create this blank server, we'll be able to go ahead and start building the UI out. And we'll come back to the server later. The UI also starts with, library Shiny. Then we declare, Shiny UI. And to keep track of our parenthesis, I'll put them in as we go. There are many different layouts you can use. I normally recommend using the shiny dashboard layout, but for simplicity's sake today, we are just going to use fluid page. Within fluid page, the first thing I'm going to do is create a title panel. In here, I'm just going to give it the title, Sample App. I'm going to save this. And notice how, where it says run and source and rerun up here, when I save it, it will become, run app. So this way we can run the Shiny app. All that exists right now is the title panel. Let's go ahead and build this thing out more. So we put a comma, 'cause these are all more arguments to fluid page. We are going to use the sidebar layout. So we say, sidebar layout. Open that, and let's not forget to close it. In there we need to put both a sidebar panel and a main panel. So in the sidebar panel, we'll open it. You'll just say h2, this is the sidebar. Then, in the main panel, we will say, h1, this is the main. I wanna run this block of code here, but first, we need to stop our Shiny app. Now we have the console back, we can run main panel of h1. You can see it prints out a bunch of divs. In fact, let's do the whole sidebar layout. We get a bunch of divs. What the UI.R file does, is generate the HTML holdings for the app. But let's run the whole app now, using control + shift + enter, and see what it looks like. We get an error. It's just saying the connections reset by peer, nothing to worry about. And we look at the app, you have the sidebar and the main panel. It doesn't really look like a sidebar and main, that's just because the window's so small. Let's open it in a browser. Now we can see how this is on the side, and this is the main panel. Let's go ahead and actually put stuff in here. So in the sidebar I'm going to get rid of the h2, and I'm going to create an input panel. Don't forget to close the parenthesis. The one thing I'm going to put in here, is a checkbox group input. Checkbox, group, input. The input ID is equal to checkgroup underscore cut. The label is, diamond cut. Choices equals a list. And here we will just manually put, the levels of cut. So that is, ideal, premium, good, very good and fair. And we will start it off with selected equals ideal. We should be able to run this now. And our sidebar panel now has a selector for diamond cut. If we go back to the browser, and hit refresh, the sidebar is updated there now, too. Now that we have this information, let's go use that by generating an interactive plot. To generate the interactive stuff, we need to go over to the server file. In the server file, we need to create an output slot, holding out plot. So we say, output, dollar, and we will call it diamondsPlot get's renderPlot. And here we will put a curly brace, just in case there are multiple expressions. Because we would want to check that at least something is selected. We won't, but you could put multiple expressions in here, because of the curly braces. We now say, ggPlot, diamonds. And let's subset it, according to that check group. So we say, diamonds, dollar, cut, is in, input, dollar, checkgroup, underscore, cut. Close that off. We will drop to the next line, and say, ADS, X equals caret, Y equals price, color equals cut. Plus, GM, underscore, point. We can save this. Now if we just ran this, using command + shift + enter, nothing would change. That's because we need to make a place for this in the UI. So we go back to UI.R. And inside main panel, we will get of h1, and we will put, plot output. Then, as a string, the name of the output slot, which was diamondsPlot. We may now run the document. And it couldn't find the function ggPlot. Now we need to figure out why. We come over here to where we generated the code, and it turns out, we never actually loaded the ggPlot package. So we come up to the top and say, library, ggPlot2. So now we run the app, using control + shit + enter, and we see we do have a plot there. Let's pop it out to a browser. And as we make selections for the cuts, the graph changes appropriately. This is just a very simple illustration of what Shiny can do. This can use all the power of HTML and JavaScript. And if you use HTML widgets packages, like Bouquet or Leaflet, you could have highly user interactive plots. Making this a beautiful display of web information, and rivaling some expensive dashboard solutions.