Build an Ozone Weather App With Ruby On Rails | John Elder | Skillshare

Build an Ozone Weather App With Ruby On Rails

John Elder, Learn To Code!

Play Speed
  • 0.5x
  • 1x (Normal)
  • 1.25x
  • 1.5x
  • 2x
27 Lessons (2h 4m)
    • 1. Course Introduction

      1:58
    • 2. Installation Overview

      1:48
    • 3. Install Node

      5:00
    • 4. Install Sublime Text and Git Bash

      4:52
    • 5. Create an SSH Key

      4:13
    • 6. Install Heroku Toolbelt

      4:04
    • 7. Install Ruby on Rails

      4:07
    • 8. Create Test Project and Error Handling

      11:25
    • 9. Create Project and Homepage

      4:28
    • 10. Install Bootstrap CSS Framework

      4:53
    • 11. Create Bootstrap Navbar and Partial

      4:36
    • 12. Create Bootstrap Jumbotron

      3:29
    • 13. Weather API Overview

      5:38
    • 14. Connect To Weather API

      5:19
    • 15. Output API Results To Screen

      4:20
    • 16. API Error Handling

      4:57
    • 17. Jumbotron Background Colors

      3:31
    • 18. Color Logic with Ruby

      6:35
    • 19. Change Ozone Description

      5:03
    • 20. Navbar Search Form

      3:31
    • 21. Search Functionality

      3:46
    • 22. Search Form Error Handling

      2:24
    • 23. Search Form API Connection

      7:00
    • 24. Version Control With Git

      2:31
    • 25. Push Code To Github

      4:55
    • 26. Intro To Heroku For Free Webhosting

      5:59
    • 27. Using Custom Domain Names With Heroku

      3:27

About This Class

36227730

Ruby on Rails can seem overwhelming at first, but it doesn’t have to be! In this course I’ll walk you through it step by step and you’ll be building your first web app in MINUTES. You’ll be amazed how quick and easy it is to create very professional looking websites, even if you have no programming or web design experience at all.

Watch over my shoulder as I build a cool Ozone Air Quality Monitoring Weather app step by step right in front of you. You’ll follow along and build your own copy. By the time we’re finished, you’ll have a solid understanding of Ruby on Rails and how to use it to build awesome web apps.

This course is aimed at the absolute beginner, you don't need any coding experience at all!

The course contains 28 videos – and is just over 2 hours long. Watch the videos at your own pace, and post questions along the way if you get stuck. You don’t need any special knowledge or software to take this course, though any experience with HTML or CSS is a plus. You don’t even need to know the Ruby programming language. I’ll walk you through EVERYTHING.

Ruby on Rails is a great web development tool and learning it has never been this easy.

What We'll Build...

We'll build a cool Ozone Air Quality Monitoring Weather app that pulls Ozone Air Quality weather data from a third party government API.

You'll learn how to use the free API in your app throughout the course.

We'll style the website using the popular Bootstrap CSS framework (I'll show you how to use it!)

This is a great course for someone starting out. You'll learn all kinds of skills that will help you build just about any kind of website or web app that you like.

Sign up today and I'll see you on the inside!

-John Elder

Transcripts

1. Course Introduction: all right. My name is John Elder from Kotomi dot com And I'll be your instructor today. And this course I'm gonna teach you how to create this really simple ruby on rails app that checks air quality in your area and allows you to search other areas to find the air quality in that area as well. So we go on down to 10 and it's sort of outputs the screen. Uh, not just the ozone number, but a sort of colored guide. So green is good. Yellow is a little worse. Orange is a little worse. Red is, you know, danger and that sort of thing. So what we're gonna do here is connected to this air now government website that shows current ozone levels air quality levels in your area. So they have an A p I we're gonna connected that a p I and pull data and then do stuff with it in the app and then output it onto the screen. So very, very simple website. But it's going to teach you all kinds of really cool things. How to, you know, pull data from an A P I had a connect from to it how to manipulate the data afterwards had to do logic. You know, if the numbers above a certain level put green, orange, yellow, that sort of thing basic things, but kind of cool. And, you know, I don't feel like me, but I get outside a lot as much as I can. I like to walk and and hike in the mountains. And ozone is important, especially high up in the altitudes. I'm out here in Vegas and we're 4000 something above sea level. Were way up there on, uh, you know, ozone has an impact on us, so it's nice to have a slap. I could just pull up, and it shows me my my ozone in my level right now is 90 which means moderate. A little blurb here and very cool. So not too terribly difficult of stuff, but it's still very cool. In the next couple of videos will start by downloading and installing ruby on rails. We need several tools in order to install rails so they're all free. I'll walk you through a mall step by step, and they're pretty simple, and we'll get started in the next video 2. Installation Overview: Okay, So before we get started, I want to spend just a minute talking about some of the things that we're gonna need. So in order to install Ruby on rails on a Windows computer, we have to download all kinds of different things. First off, we have to download node note is the JavaScript Web framework. And that's kind of weird that we need that in order to install and run Ruby on rails. But for some reason, we do so we'll do that in the next video. We also need a text editor, something to write our code on. We're gonna be using the sublime text editor if you have some other text editor that you like using absolutely feel free to use that you can use anything you want, really? Doesn't matter. But I like sublime is totally free. So we're gonna download that. We also need a terminal, something to write our commands on. And we're gonna be using something called Git Bash. It's also free. And if you're on a macro Lennix you can use the terminal that comes with Mac or Lennox. You just go to the top of your screen. The little search thing on your operating system. Type in terminal and it'll work fine. Windows users. We have a couple of terminal command prompt time things. We have something called Power Show and the command prompt which come with windows. But they don't really work that well. They don't allow us to do version control that well, and there's some other little things about them that aren't great. So we're used to get bashed terminal. It's very similar to what you're gonna use on a macro. Lennix. So it's all sort of nice and, uh, easy for everyone to follow along If you're on a different operating system. We also need something called the heroic Ooh, tool. But we're going to be pushing our code up to Roku for third party Web hosting, and we need, ah, some software to do that behind the scenes. It's also free, and I think that might be it. Of course, we also have to download and install Ruby on rails will get to that in a bit too. So a lot of things we need to do, but they're all free. They're all really easy to install, and we're gonna spend the next few videos sort of downloading and installing those. So that'll be coming up in the next video 3. Install Node: Okay, so first things first we need to install No Js. Now, this is kind of weird for me. I'm not a big node person. I use it, I know how to use it, but sort of having to install it in order to install Ruby on rails doesn't quite sit right with me for some reason. Just got a weird but not a big deal. Chances are you already have note on your computer because a lot of programs require node, and it'll sort of download in the background when you install something else, so there's a pretty a chance you have it. And if you do, we're gonna want toe uninstall it first. And the reason why is because we want the latest, greatest version of node. And sometimes especially if node got installed sort of behind the scenes with something else. It might have been a very old version of nodes, so that might not work with the newest version of Ruby on rails. So we just want to kind of clear the slate and make sure we get rid of it before we get started. So I'm gonna come to my windows, commit our control panel and I just found this on the Windows Start menu and come down here to uninstall it program. And then I'm just gonna click anywhere and then type the n key on my keyboard and you see here no Js I do in fact have it down installed already. So I'm just going to right click and click uninstall And are you sure? Yes. Blah blah. Get this little thing preparing to remove. Do that. And I'm just gonna go ahead and pause the video very quickly here, while this sort of dozens thing there's nothing for us to do. It will remove it for us and then we'll get a little message when it finishes. So when I posit, video will pick it up right when this finishes. Okay, so that little screen just disappeared. That means that it was removed successfully. We didn't get any other sort of confirmation, but that's all we need. So now we just head over to our Web browser and in just type in node and just going to search for noted Google. The first thing that pops up, no Js dot org's what we want and you'll notice when we come here it comes here straight to the download page, right? There's not even anything to read. Just boom. Here's your download. And there's two different versions. The 10.15 point three LTs, which stands for long term support, I believe, and then 12.1 point zero current. And this has the latest features. Now, if these numbers are different by the time you watch this video it they probably will be these air always, you know, updating And, you know, putting out newer versions. No big deal. Just download the most recent ones. Whatever's list of there is gonna be. Okay, so which one of these do we want? We want this. LTs one. Now you're going to see this 12.1 and you're gonna be like, That's a higher number. I want that one. But you probably shouldn't. This is the one that's sort of like the most current stable version, and that's what we want. We don't want the one with the latest greatest test features or whatever we want. The one that we know is gonna work. And so that's this one right here. So go ahead and click this and we can save this anywhere we want. I'm just gonna save it to my desktop click save, and it downloads really quickly. It's not very big file. So to install this, we just come down here and click it or you can navigate to your desktop or wherever you save. Didn't double click it. They're just gonna click this and we have this thing. Yes, we want to run it and we see this now. If you didn't uninstall it first and you did have note on your computer, you're going to see a different screen. You're going to see something that asks whether you want to update or remove or fix or do something like that. So you're gonna want to uninstall the old one first. So just follow those prompts. But for everybody else who's followed along so far, you'll see this screen like next to get the license. Next, you can install us anywhere. I'm just going to take the default and don't change anything here. Click next and then install, and this will go ahead and install. It will take a couple of minutes, so I'll go ahead and pause this in just a second. But one thing I will mention is when this finishes installing, it doesn't tell you to restart your computer. You know, when you install things, a lot of times it will say, you know, installation complete. Please restart your computer. No, does not do that. But I'm telling you right now, you definitely want to restart your computer. It's just note is just one of those things. You just want to give your computer a quick restart. It won't tell you to do it like I said, but just go ahead and do it anyway. So we're almost done with this? I think so. I will maybe pause Or maybe just talk for a minute until this creeps along. Yeah, Yeah, yeah. All right, here we go. Come on. Okay, so no jazz has been successfully installed. We're good to go. Like I said, there's no mention of restarting your computer, But listen to me. You're not gonna want to. Nobody likes restoring their computer, but do it. It's important. If you don't. Chances are a lot higher. We're gonna have an error later on. When we install ruby on rails and rails, it's hard enough to install as it is. We don't want to add any other option optional sort of problems into the mix. So restart your computer, click finish first, and then that will be good. So in the next video will install our text editor and our get bashed terminal. 4. Install Sublime Text and Git Bash: Okay, so we've got note installed. We're good there. Next. I want to talk about installing our text editor. And this the text editor. We're gonna be using its called sublime text. It's just a basic coding text editor. Like I said earlier, if you have some editor that you like to use, um, visual studio code or, uh, head plus plus or anything at all, if you're comfortable using that, feel free to use that. Absolutely. Use whatever you want. It really doesn't matter what text editor you use, but sublime text is an industry standard most people use. It seems like one of most popular one is totally free. If if you want, you can throw those guys some money every once in a little box will pop up asking for a donation. You can or you don't have to do that. So keep that in mind. So I'm gonna head over to Google again. Have been sublime text. First thing that pops up is the sublime tex dot com website and this is it. So to download this, you just click this link right here. And right now we're on sublime text. Three bill 32 07 It will likely change that number by time. You watch this video No big deal down low ever current version it is, and it's the same thing. You just click this, we can save it anywhere, Save to desktop. It'll download and then just click that button. I'm not going to walk you through this one because it's super simple. There's nothing for you to do. You just take the defaults. Click next, and it will start in order to use it. Some live tax. Just go to your Windows Start menu, type in sublime, and it'll pop right up. So the next thing we need and the more important thing is to get bashed Terminal. So I'm gonna go get Bash Google here, and the first thing that pops up is this. Get dash SCM dot com forward slash downloads and that's what we want. And right here we're on version 2.21 point zero again. If it's a different version by the time you watch this, no big deal. Download whatever the latest version is. And remember, if you're on a mackerel Lennix, you can download this, but you don't need to. You could just use the terminal that comes with Mac or Lennox. It works just as well as to get bashed Journal. I think it is a bash terminal, so you're good to go there. So go ahead and click this to download, and it will pop up automatically downloaded to your desktop. And this is, I think, 40 or 60 40 megabytes. But it takes a long time to download. For some reason, it always has. I have high speed Internet. It should download in, like, two seconds, and it's already been like 15 seconds now. So for some reason, it's always been like that. So if it takes a little while to download no big deal, I just go ahead and wait. I'm gonna go ahead and pause the video while we wait, and we'll pick it up as soon as this finishes downloading. Okay, so it's finished downloading, and again you can navigate to your desktop and click it there, or just come down here and click it and open this and click Run! Pull this over. Okay, So general license click. Next. Don't make any of these changes. Any changes in here? There's a whole bunch of stuff just We want all the defaults here. Now, this is kind of weird. It asks you what text editor you're gonna be using, and it happens to have the sublime text says that a fault one. But there's a whole bunch of different ones you can pick. But the weird thing is, we never used to get Bashed Terminal with a text editor. They are two separate things, so I have no idea why they asked this. It's not like it integrates into the text editor in any way, so you can just ignore this. If you're not using supply of text, you don't have to go in and find the one that you're using. Just click next. It's just a weird thing. Next, we want this lower this bottom button to be checked. It's the default one. So click next and again we want this checked. Also, it's the default. Ssh! Is a secure key thing that we're gonna be using to connect to things like Roku and get hub dot com for version control. We'll talk about that later on. Same thing with this open SSL library. Want that checked and this top check out window style. It just doesn't really matter. But we could just go ahead and leave that as that info. Same thing with this meant ET why thing And finally leave these to default and then come down here and click Install. Now, I've already installed this, so I'm not going to do this last step. But you will obviously click this install button in the little box will pop up and you know , you get the scroll bar and I'll show you the status and all that. You just wait for it to install and you're good to go. Ah, same thing with sublime text Editor. If you want to run this, you just go to your Windows Start menu, Go ahead and click. Cancel and this is off screen, so you can't see. But it's just get bash. You just type that into the search and it'll pop up Pulis over. And this is the get bashed terminal. We'll talk about this a little bit. Mawr, probably in the next video. In fact, in the next video we will look at this and I'll show you how to set up the ssh key. This will allow us to securely connect to said other websites like Get hub dot com to push our code of version control Roku to push our code up for Web hosting Things like that, you need an ssh keys. It will generate one of those in the next video. 5. Create an SSH Key: OK in this video, I want to generate an ssh key with our get bashed terminal. So rails ruby on rails requires I believe at this point a ssh key for some stuff behind the scenes. But we also need one to push our code up to get have version control, talk about that in a bit and also to push our code up to Roku. We'll talk about that in a little bit as well. So we just need an ssh key. It's just a security thing we need to dio. So I've opened up to get bashed terminal And if you see here, So there we go. If I type in PWD Now, if you don't know how to use this terminal, no big deal, I'm going to show you some commands here and there. And you only need a few. So there's nothing really you need to learn. So I just sort of follow along here. PWD shows us what directory were in. And you can see we're in c slash user slash flat planet Flat Planet is the name of my computers. That user name that I'm logged in as, uh, I don't think the world was flat. I just find a hilarious that people do. So I kind of name my computer that whatever your user name is, your computer name, whatever, whatever that is, it will be there. So that's that's what you want. So the first thing we need to do is create a directory to hold our ssh key. And we just use the m k D. I. Our current command stands for make directory and then just type period Ssh! And a period on a directory means that the directory is hidden. The folder is hidden, it won't show up. And that's what we want for security related. Ssh. Keys. So that's how we do that. Okay, so now we need to move into that directory. We need to change directory. So we use the CD command change directory, and then just type dot Ssh. And if we type in pwd again, you see, we are, in fact, in what planet slash ssh. You can also notice it says it right there. So now if we type el esto list the stuff that's in this directory, there's nothing there. So that's good. I'm gonna take clear to clear the screen, so Now we just need to generate our ssh key. It's super easy. Used to be hard in the old days. Used to have to download some software to do it. Now it's built right into this git bash terminal, which is one of the nice things about it. One of the reasons why we use it cause it has stuff like that just built in, which is very cool. So to generate an ssh key, we just type in Ssh Dash he gen dot e x c This is going to run a little program that generates are key for us, and it's asking us where we want to save this. And we just want to save it in this directory so we could just hit enter. And now it's asking for a pass phrase. And whenever we try and, like, push our code up to her Roku or who share code up to get hub, if we pick a password right now, it will ask for this password forever. So you need to remember what that password is. Personally, I don't ever to really do that. I just leave this blank, and in that case, when we push our code up to get hub later on. It won't even ask for the password. So it's just one last thing to remember. I don't think hackers we're gonna steal anything with this. So I an extra password on top of this seems to me not necessary. But if you want a password, type it in there. If you type it in right now, nothing will appear on the screen. That's a security feature. So don't worry. It is actually typing it in. So just type it in to hit enter. Nothing will appear on the screen, but for me right now, I'm not even gonna do that. I'm just gonna hit enter and it says, Enter the same pass raise again. I hit Enter again and boom is generated are key. So if I clear the scream now, if we type in el esto list that stuff in our directory we see these two files I d underscore r, say an i d. Underscore Arce pub and this is what we want. This is the public. He and later on, we're gonna have to take this key and upload it to get hub or wherever else we want to use it, And so we'll do that later on. But if we want to just look at it right now, we can type cat to catalog the file and an I d underscore R s a dock hub, and you could see this whole thing is our ssh key. It looks like a bunch of gobbledygook. It's just ah, security hash type thing. And, uh, no big deal. We just We have it now and we're good to go. So that's all there is to that. In the next video, we'll go ahead and install. I think the last thing we need to install before rails, the Roku tool belt and that allow us to push our code up to Web hosting for free later on, which is very cool. So we'll look at that in the next video. 6. Install Heroku Toolbelt: Okay, so we've got our ssh key. Now we want to install the Roku tool belt. And Hiroko, if you're not aware, is 1/3 party Web hosting company. That sort of specializes them things like ruby on rails, and they've been around forever. There will, in the most popular sort of ruby on rails Web hosting. And the reason why I like to use them is because they have a free tier, and the free tier allows you to upload your stuff and have it live online. It's just not very powerful, like not not many. Not many people can, like, visit your website at once. It will be very slow, but it's free. If you then want to upgrade it, you can and start paying, at which point your Web hosting becomes more powerful. More people can visit your website at one time before it gets slow and things like that. So for our purposes, for testing and for building cool new things, broker is great. So that's we're gonna use. So in order to sort of talk to Hiroko behind the scenes from our terminal here in order to push our ruby on rails code up, we need something called the Roku Tool belt. So we'll download and install that right now. So head back over to Google, and I'm just going to type in her Roku tool belt. And this is a little weird. It doesn't pop right up here. This is an ad for Roca. We don't want that. We don't want the pricing. We want this heroic who cli and the website address is deaf. Center dot Roku dot com for slash articles forward slash Roku a dash cli and CLI stands for , I think command line interface. So our terminal is a command line, so we need an interface to interface Are command line to Hiroko is That's what we want here . So if you could come down here you see there's a Mac. There's a Lennox's version here. We want the Windows version. Likely you're on a 64 bit computer because pretty much all computers or 64 bit or higher these days, So go ahead and click this to install same thing as before. We can install it. Weaken, download this anywhere we want. I'm just gonna download to my desktop click save and Boom. There it is. And again you can navigate to your desktop and click it there, or just click it right here. So we will open this all this over now. The most important thing is to make sure this is checked set path to Roku and with Windows , the path is important. Path means we can run this anywhere on our computer. We don't have to be in, like the Hiroko directory and run it. So if you add it to your path, you can run from anywhere, which is what we want. So it's check by default, so we just leave it like that. Click next again, you can install us anywhere to take the default. It is 109 megabytes, so just be aware that and then here we go. It takes a couple of minutes to do this. It's installing all kinds of stuff. I see a bunch of JavaScript being installed, So it's another reason. Probably Why? Well, why we'll need node in order to run. This is well, so you need note for everything these days. Seems like something to go ahead. Pause the video while this finishes its thing will pick it up right when it's done. Okay, so it says completed so we can come down here and click close. Now we want to head over to our terminal here, and we want to make sure this has been installed. So I'm gonna type in her Roku Dash dash version and it says right there gives us the current version that's been installed, so that means it's been installed correctly. If if you get a commander or a message that says like broke who command not found or something like that, that means that it hasn't been installed correctly and you need to reinstall it. But you're probably good to go. It also might mean you need to restart your terminal bash your bashed terminal thing here. So when I come up here and just click the X just in case, and then I'm gonna come to the Windows Start Menu that you can't see and typing, get again and pull this over. Just when you install things like that that work with this terminal, just a good ideas to restart it. Give it another start. Just make sure everything's been installed correctly. So that's it. Those those are all the tools that we need to install ruby on rails. In the next video, we will jump right in download, and it's still ruby on rails. Very exciting. Finally, it takes a while to do this, but we're almost done, and we'll start that in the next video. 7. Install Ruby on Rails: Okay, so it is finally time to download and install Ruby on rails. Now, you're likely won't gonna want to go to Ruby on rails, ord. This is the official website of Ruby on rails. And you see right here they have the latest version 5.2 point three, and you're gonna want it. Just click this and install it like this. Don't do that. This is the sort of official ruby on rails. It's a lot harder to install. There's a whole bunch of stuff you need to do. It's just kind of a hassle. Instead, we're gonna you go to something called rails installer dot org's and this is a Windows installer. I think there's, Ah, Mac version as well. And this is like an execute herbal file that we can just download and install. And it does all the stuff behind the scenes that we would have to do normally ourselves doesn't force, and it's super super useful. So we have a couple of different options here. Weaken do Ruby 2.2 or ruby 2.3. Now, Ruby is the programming language that rails is built with ruby on rails. Right. So it really doesn't matter which of these you download and install. This is the slightly newer one. It comes with rails 5.1 versus five point. Oh, which is this one right here versus the current version is four points or 5.23 So you're not getting the absolute newest version, but we really don't care. I mean, until just recently, I was still using Ruby on rails. Version for point, something 4.2 or something like It doesn't matter. You don't have to have the highest newest thing. But like everything else, if the version numbers changed by the time you watch this video, no big deal. Just pick one of these. I'm gonna go ahead and pick this, uh, 2.3. The latest one with rails. Five point. Oh, or 5.1. You could see it comes with Ruby. 2.3 point three rails. 51 bundler. Get. We've already got our get bashed terminal. It has get installed already, so we don't need that sequel. Light is a little database. We're gonna have to talk about that. Probably in the next video and a couple other things. Dev Kit. This goes with ruby eso Those things go together, and that's cool. So let's go ahead and click this. Save it anywhere you want. I'm going to save to the desktop, like always. And you can see it is a little bit bigger than some of the other files we've downloaded so far. It's 112 megabytes. It downloads pretty quickly, though, so I'm gonna go ahead and posit very quickly and we'll pick it up. Instances, finishes downloading. Okay, that was, like, 20 seconds later. There's probably no need to stop the video, But we could go ahead same as before. Navigate to your desktop and double click it there. Or just click it right here to install. And we want to run this guy, pull this over, and so we want to accept all of the licenses and all that good stuff next. And I'm gonna uninstall this, uh, this check box right here cause we already have get it came with our get bashed terminal. So we're good to go there. We definitely want to add executed a list Ruby deaf kit and get if checked above to the path we talked about path before. This means that you know, we can run Ruby on rails from anywhere on our computer. We don't have to be in the ruby on rails, directory or whatever. Same thing for Ruby. We can run the Ruby programming language from anywhere on our computer, not just the ruby directory. So we definitely need to make sure this one that has been checked so we could go ahead and click this button to install. Now this is gonna install 500 plus megabytes of stuff. It's something like close to 25,000 files. There's a lot of stuff going on behind the scenes here, so go ahead and click Install, and it's installing it in See rails Installer directory. If you're curious why it would be now, I'm gonna go ahead and pause. This will pick it up, Assumes that finishes doing its thing. Okay, so it's completed. The installation will get this nice little screen here to end it, and we're good to go and go and click finish, and we have done so now. Rails has apparently been installed, but we're not quite sure yet because we haven't actually tried using it, and it will need to try to use it by just creating a rails project. So we'll do that in the next video 8. Create Test Project and Error Handling: Okay, so we've installed Ruby on rails, we think, but we're not sure yet until we actually run it once. And to do that, we just create a project. So that's what we're going to do in this video. We're gonna create a simple test project, not our main project, just to make sure that ruined rails has been installed correctly. Because a lot of times you'll get an error at this stage. And so I'm gonna show you what to do if that happens as well. So I'm in my get bashed terminal, and I should mention I close this terminal and restarted it. I opened a new version of it or ah, new ah instance of it because ruby on rails needs to be the get bashed. Normal needs to be restarted in orderto take into effect the changes that the ruby on rails and Stahler just did. So we come here to Peter in type and pwd just to make sure which directory we're in, we see that we're in this directory here. We actually want to be in our C directory right now, so I'm gonna change, directory and type and see and pwd again make sure we're in there. So now we want to create a directory to hold our new ruby on rails test project we're about to create. So let's go M k d I r to make a directory. And let's just call this rails test. Okay, so now we need to change into that directory. So I just haven't CD rails test and pwd to make sure we're in there. Okay, So the command to create a new rails project is just rails and then new. And then let's just call this tester. I don't know, 60 boom is creating all these files. And the first little message we get is our We're not running the current version of the bundler, so we need to run this gem installed bundler command. So we'll do that as soon as this whole thing finishes doing its thing. We probably don't have to do that, But you want to be on the latest version, so we'll just go ahead and do that. It looks like it installed an older version when we use the rails installer thing. So what is doing here is it's fetching all of the gyms and all the dependencies that we need from probably from a website. Yeah, right here. You can see from Ruby gems dot ord, and we'll talk more about gems and dependencies later on. But that's what's going on here, just going and getting all those files and making sure that they're either installed or updated or whatever. So this could take a minute or two. Now, I often get an error message towards into this, and I hope it happens. This time doesn't always happen for some reason, but sometimes it does. I'm hoping it does this time so that I can walk you through what toe happen, what you should do if you get in a room. And there we did. We get that air message. So, uh, this is cool. We could talk about what happens when you get an error, and it's not just for installation. You'll get errors a lot using Ruby on rails because it's easy to make mistakes. And the important thing is to Google those errors. I mean, you can ask me while you're taking the course, but that's not the way you learn. You need to try it yourself first. If you can't figure it out absolutely asked me, but you're going to do a lot of Googling when you're using Ruby on rails. So she just sort of get used to it and we can start right now. But before we even look at this error gonna scroll back up here and let's see Grab this command. It wants us to grab to Dio. So I'm just gonna highlight right click and copy, and then just scroll back down and right click and paste. And we just want to install the bungler thing. Enter it lacks for a second, and then it'll jump and do it real quick here. So we just sort of wait for a second and it should do its thing. Hopefully, Okay. Successfully installed bundler two point. 0.1. If it's a different version, don't worry. Big deal. Okay, so that's taken care of. Now let's look at this. So to see why this exhibition failed to compile, please check that make. We don't want to do that. See, let's just see Jim files remain and its stall. If we look through here, I'm seeing look right here. Sequel life. That's a database sequel. Light. That's a database Equal light did best. So obviously there's a problem with sequel light. And if we look through here and there occurred while installing this and Boehner cannot continue, make sure that the gym is all sleep like three. But lost succeeds before bundling. So, Norman, I know what to do to fix this, but normally you wouldn't. So what do you do? Well, you want to just sort of grab something that kind of makes sense to you in here and Google it so great here, I might say Make sure that Jim Bob Loblaw succeeds. I might highlight this and click copy and then just head over to Google and paste that M. And you're likely going to see a lot of stack overflow articles. And that's a great website. It will be your best friend. It's sort of like a social network for coders, and it's a place where you can go and ask questions and say, Hey, I'm getting this error. What do I dio and people that have gotten that ever before will say, Oh, you just do this and they'll tell you it's fantastic. So we see this here. I would probably just click the first thing and start reading right there. Usually a couple pages long and not too bad. Now, in this case, you see, this guy did the same thing. He's got all this things installing, and then this is not what we need, right? So, OK, we can go through and look at all of these and maybe one of them in there. We'll have a suggestion. I happen to know what's going on here, so I know that that's not gonna do the trick for us. Instead, we want to come back here and let's look through here a little bit more. Um, we scroll up, we get even more air messages, checking for secret light with this dot each thing. What is that? Who knows? Um, here says sequelae. Three dot h is missing. Install blah, blah, blah. First, it's telling us to down load sequel Light the database. Now that doesn't seem right to me, but we can copy this at least and head back over to Google and see if we pace that in unable to install that I generally look for the sequel Light. And this one I happen to know is probably the one. If I didn't know that I would just spend, you know, half an hour reading through all of them until I found the one. But we come down here and maybe this isn't the one e I think it is. No. Oh, you know, what I often do is I'll look at the dates here. So it's 2017. 2015. These air No good. We want something more current, right? So keep looking down here, see anything? So let's say let's do this Air Ego one from 2019 right? So a lot of times this is a lot more work than you'll have to dio. Most times when you copy and your error message, the first thing that pops up is gonna work. But for some reason, this particular one takes a little while. And so you just have to read through until you find the answer. But this is definitely the one we want really want to 19 and we can look through here. The guys got same error codes that we have, and you can see right here. Here's the answer. Rails tries to automatically installed the latest version of Secret Light three, but the new version doesn't work with rails yet, so you need to specify an older version in order Teoh to run it. So we will just add this reference to our gem file and you don't know what a gem file is yet. So, uh, uh, you're not quite sure what to do, So I'm gonna open up my sequel, Light or my sublime text editor and very quickly Sure you had to do that. So you add all of our new ruby on rails stuff to our sublime tax. Just go to project and we want to add folder to project. So now we just head over to R C Drive. And we saved all that stuff in that rails test. I think rails test, and that, if you've forgotten already, is just this directory we're sitting in right here. Rails test. Right. So we just basically want open that directory in sublime going Click That And then the rails project we created was Tester. So you just highlight the project. Don't click through it just highlighted because we want to select the folder. And when we dio boom, boom, boom all of the ruby on rails files that we need show up there. So we want to come to the gym file and I'll talk about what the gym file is mawr later on. We see there's this reference right here to sequelae three. And this is what's throwing up in error. So instead, it's we want to come back to that website and highlight this and copy and then just paste it in there, right? And up here, we want to highlight out the old one or a comment out the old one. I'm gonna hit. Control s on my keyboard. Command s If you're on a Mac to save it or you come up here and click Save now we just need to install that. So head back over to our terminal. And since we're in the rails test directory, we can hit ls to see what's in there. And we see there's that directory. So you want to change into that directory tips CD tester slash. There you go. Legacy. Now we're in Tester, right? And it's clear the screen and we want to type the command bundle install. This will install that sequel light thing we just put in the gym file. It will also make sure everything else is current. A to moment, right? So all right, fetching all this stuff from Ruby Gems will talk more about what all these things are later on. And if we look down towards the bottom here when it finishes, it should show us that version ended a secret light three. Version 1.3. If we look here, we're saying install sequel Light three with a version less than 1.4. And what we got was version 1.3. And now everything will work correctly that error messages no longer necessary and we're good to go. So we have correctly and successfully, I should say, installed Ruby on rails. Everything is working good. We have our new little project called Tester. We're not going to use this. Going forward in this course will create an actual new project. In fact, that's what that's how will confirm that this little fix worked Well, actually, it won't confirm because it will get that air again next time when we create our new project. But we know how to fix it now, just by adding in this reference right here to our gem file lives at the time. So that would be cool. And, uh, so we're ready to get started and actually start building out our app so we'll start to do that in the next video. 9. Create Project and Homepage: Okay, so let's dive in and get started. First thing we need to do is create a new project. We're not gonna use the tester one, like I said, And so let's head back to our terminal and we need Teoh change into make sure we're in the C drive and we can pwd to make sure we're in there. Okay, so now we could just happen the rails new. And let's name this thing and let's call this ozone doesn't really matter what you call it . Up, up, up, up. It's doing the things okay? And we got that same error again. So let's head over to sublime and open This project to Project had folded project and we just want to navigate to R C drive and then look for that ozone directory that we just created and don't double click it. Just single click it, select the folder and Boom. So now we can open up our gen file on right away. Let's just fix this sequel light thing. Get rid of that. And while I'm here, I'm gonna get read. All these comments always like to do that. Starting out games ago, a couple more you don't have to do this. I just find that it's a little bit easier to read this file without all those comments. All right, so let's save this head back over to her terminal and give this a bundle Install to go ahead and fix that. Oh, you know, we're still in the sea directory. We need to change into ozone. All right, clear the screen now commit a bundle install, and we should be good to go. But let's run the rails server just to make sure and so we could see our project is running at local host 3000 so I can copy this and open up a Web browser. Paste this in and hit enter, and this is the screen that should pop up. If this pops up, everything's done correctly and we're going to go. So I'm not going to spend a whole lot of time talking about what all of these files and folders or I'm gonna kind of assume you already have a basic fundamental knowledge of ruby on rails. So I'm gonna go kind of quickly throughout the rest of this course. I have other courses. There's a stock market ruby on rails app that goes into a really great detail if you don't know the basics and you need to sort of understand what all these things are if you don't know the basis, you'll probably be OK throughout this course. But I'm just gonna go quick. I'm not gonna like deep dive and explain a lot of the things that I'm doing so right off the bat, let's just full of our terminal here. Close control, See to close out the server and let's just go rails G to generate a controller. Let's call it home and index. So this is gonna create a Web page for us and a controller to go along with that Web page. It's gonna be on our home directory in the name of the Web. Pages are index page, and so if we head back over here, we can go to APP views home. We have this index page, we can run the server again, rails s and then come back to our website and go to home slash index. And we see this page that we just created has popped up, so that's cool. But we know how we want to change their route. We don't want it to be home Index. We wanted to just be our local host. You are? L so head back over to Let's see. Close this out. We want config routes. Here's our route. File its creator route route. It's just gonna be home Colon index, and we can comment this old one out. Save this head back over here. And if we go back, Teoh Home Index and hit reload, This page will no longer exist. Alright, we get an error. But if we go to our main neural local host 3000 that page now does exist. So all right, we've got the framework we've got, ah, Web page belts. Very cheesy, but it works. And we can change this if we want by going back to app Views Home index. And then here we could see Ah, let's call this ozone app. If we save this, come back and hit reload houses, Ozone app. So we've got our framework. And, uh, in the next video, we're gonna jump in and installed the bootstrap CSS framework so we can start making this page look nicer. And that'll be in the next video 10. Install Bootstrap CSS Framework: in this video, I wanted to install the bootstrap CSS framework. If you're not familiar with Bootstrap, head over to get bootstrap dot com and you got the wrong version 4.3 of its changed. By the time you watch this video, you can toggle different versions right there. But if we just come here to the documentation, the great thing about Bootstrap is we can just add things to our website just by copying the code that's on this, these pages pasting in and interact, and it just works. Course. First we have to install bootstrap, and that's what we're gonna do in this video. So head over to Ruby gems dot org's Ruby Gems. Atago organs the place where you could find gems to add to your project. Familiar with that? Let's go, bootstrap that in. And here we go 4.3 point one, which corresponds with this guy right up here 4.3. So going. Click this and grab this gem file referenced, copied to your clipboard. And let's head back over here and open our gem file. And somewhere down here doesn't really matter. Just paste this in and save that now. Bootstrap is a little bit more complicated. There's a few more things we need to do. So let's go to the home page and look at the documentation. It'll tell us exactly what to do. First thing it says here is add the reference We just did that and now it says it wants us to add this. Copy this to this application dot SCS s file inside of our APP assets style sheet directory so we could head up over here. Here's app, assets style sheets and you can see we have this application dot CSS file, but it wants us to have application dot c A s CSS different file extensions. So instead of that, we could do that. But I always just call this click here and click new file and then paste in that code it wanted us to paste in. Now I'm gonna come up here and hit file save as and I'm gonna name this boot strap li dot CSS dot s CSS so it ends in dot s CSS like the documentation wanted us to. I've also put CSS in there just Ah, I've always done it this way. Waken put CSS in this in this file if we want to, and we may, I'm not having decided yet. We have that option by naming at dot CSS and I named a bootstrap Lee. The documentation asks us to name it application. I don't think we need to do that. You name it anything we want. So I just did that because we already have an application file in there. And it's kind of confusing to have two files with the name application, even though the extension on the end is different. So all right, we've done that. Now let's see, it says we also need to add J query rails to our jump. I also copy this and back to our Jim file right here and paste that in and save it. And finally, it says it wants us to add these things to our application dot Js file. Eso copy this head back over here and that's in APP assets. Java scripts application dot Js Just come up here and above this require tree line, right? This one needs to be the last thing on this page. But above that, you could just paste in those three things. So go ahead, say that. All right, so now I think we're done. We can head over Teoh actually going to open up a new get bashed terminal cause we got the server running in this one, and I just want to let the server keep running, so only pull this overall quick resize it. All right, Now we need to change directory into see ozone. Okay, so now we just need to bundle install to install the J query, Jim, as well as a bootstrap Jim that we just added to her jump file. Okay, so that looks to be good. Now you want to head over to the terminal, we have your rails, server running and control, see to exit, and then run this again. It's a good idea to restart your server when you add new gyms and especially the bootstrap , because it ties into everything. So it's just a good idea to do that, and it looks like All right, we're ready to go head back over to our web site. Now take a look at the text. Right. Notice the color and the position and the font. When I hit reload. It should change slightly. If bootstrap has been installed correctly, Boom could see its up closer to the screen. The fought his changes a little straighter looking, so that means it's definitely been installed correctly and we're good to go. So that's all for this video. In the next video, we're going to start to build out our app with a knave. Bar will get that from Bootstrap, and that will be in the next video. 11. Create Bootstrap Navbar and Partial: Okay, so we've got bootstrap installed. We are ready to go now. I want to add a knave bar at the top of this page here. All websites have nabbed wars at the top. So let's go ahead and do that Head back over to get bootstrap dot com, click on components and then just scroll down until you see naff bar. And I'm just gonna grab the 1st 1 we see right here and copy this and head back over to sublime. That's close. Some of these files out don't need any of this stuff anymore and go to home and then right click and create it. It's not a new folder. We want to create a new file and just paste in all that code we just copied. Now head over here to file Save as and we want to save this as underscored. Nab our HTM l dot e r b and all web pages in and dot html. But in rails, they also end in dot e. R. B. That allows us to do embedded ruby on our HTML page, which is really, really cool. I didn't say that. So now this is a partial. We've just created a ruby partial or rails partial to actually use this. We want to head over to our layouts and application dot html and right here above yield. We want to create a personal tag and we just have been a render and then home slash nab Our This will create a partial. It'll put all that code that's in our NAB our while that we just created right here it out , put it onto the screen right there. And since it's in the application dot HTM oh, file. That means it'll be output on every single Web page we create. Now we're not gonna create a whole lot of Web pages, but it's still a good idea to do it this way. So let's save this and head back over here and hit reload on our site just to make sure and boom, we have this nab our the top. Now the first thing I always do with a nab our is changed. This at the very top line here from nab our light didn't have part dark. I just prefer the dark one. If you've taken another one of my courses, I always always do that so save this and back over here and get reload and boom. Now it's dark, so that's very cool. And the next thing I always do is get rid of all of these other links. We might keep this link one, but the rest of the stuff we want to get rid of. So let's first get rid of this disabled one, and it's easy. We just kind of looked through here for the word disabled, and it's gonna be towards the bomb. There it is. And then just go and find the ally that wraps around it. And when you highlight when you click on it here that the closing ally tag highlights, so you know you can delete that. So save this and hit reload just to make sure we're OK. Next we want to get rid of this drop down thing, the same thing. Just look around till you find the word drop down. There it is. And then here's the ally that wraps it, so we know it's all of this stuff. Save that. I like to save it after each time and make sure and then finally, we want to get rid of this home. One And that is right there. Home. So again, the ally highlight and delete. So save that reload s. So we want to change this from knave Bar to the name of our website. So come up here. And I don't know, call it my ozone. It doesn't really matter to save that. All right, that's looking better. And finally, I want toe kind of push this code away from the edge here. So let's head back to our application dot html file in this yield tag. This is what yields out our web page onto the screen so above it. I just want to create a, uh, a div tag with a class like a type of container. This is just a bootstrap class, and we want to close that, and we can sort of move stuff around like that. Okay, So also Well, let's just save this to make sure that worked it reload. All right, so it bops it over. I also want to push it down a little bit, So same spot. I'm just gonna create a line break tag br That's just in html tag. Okay, so that's looking better now in the next video, I want to sort of work on this area right here. And we're gonna put some ah Jumbotron to make it look nicer. And we'll do that in the next video. 12. Create Bootstrap Jumbotron: OK, in this video, we're gonna sort of work on this area right here. We're gonna add a jumbotron. But first I forgot about this guy over here. We're just gonna leave this for now. We might use this, or we might not. If we don't use it, I'll go ahead and delete it. But for now, we'll leave it here. But I don't like that green button. I want to change it to sort of a grey button. So head back over the bootstrap and click on buttons and we see this secondary. That's the color that I want. We just have to call Bt and secondary. So head back over to our knave bar and then look around for the search thing and heresy search. And here's the button class. So instead of success, we wanted to be secondary. Who strap just said, All right, so back here and hit. Reload. OK, now it looks great. Looks a little bit better. Okay, so now I want to play around this area right here. I want to add something called a Jumbotron. I think maybe a card. This is a card. Uh, let's go. Jumbotron. Let's look around here. there does Jumbotron. And a Jumbotron is just this big box, that sort of gray colored rape. So I'm just gonna copy this code right here, and let's head over to our app views Home index page. And right here it says all of this stuff. I'm just gonna delete this and paste this whole thing in and save this and back over a hit Reload! And okay, now it says hello, world. Very cool. Um, yeah, that's looking a little better now. I think what we want to do is we're gonna add our ozone thing, right? There are ozone readout and do we want to put any text below it? Uh, I don't know. Now, let's just go. This is the current ozone air quality read out, or my neighbor Hood and Los Vegas. And then down here, we can go. I don't I'm just kind of playing right now. Hit. Reload In your web browser to update the reading. I don't know. Save this editor. We could play around with this, and we will, as as we move forward, um, you want change the color of this one for fun, but as well eso instead of btm primary. We've learned we can go secondary. That's about right. Alright. Reload! Boom! Okay, so it's looking good. Now I think we're pretty much done here. Layout wise. You know, this is a great looking website, but we're not going for amazing design here. We just want something functional. We get online and, uh, and make it look halfway decent. I think this looks halfway decent. We can play around with this all day. And in the next video, we're gonna start to connect to the A P I or at least talk about it. And I'll show you where you can get your A P I code and all the good stuff. And we'll do that in the next video. 13. Weather API Overview: Okay, so we've got our framework built, a little web app built. Now, want to talk about the actual data that we're gonna be connecting to and using? So I use this website air now dot gov and you can come here and typing your zip code, and it will give you the air quality currently at your zip code in your area. And it's really, really cool. You can see right now here in Vegas, it's moderate, which is okay. And down here there's a little example of each one. What they are so good. Air quality is satisfactory. Air pollution poses little or no risk moderate, which is what it is now. Air quality is acceptable. However, for some pollutants, there may be a moderate health concern for a very small number of people who are unusually sensitive air pollution. USG the next 1101 to 1 50 That's general public is usually okay, but people with lung disease older adults and Children are greater risk from exposure to ozone, whereas people with heart and lung disease, older adults and Children are at a greater risk, blah, blah unhealthy. Everyone maybe begin to experience health effects a very unhealthy health alert. Everyone may experience more serious health effects, and hazardous is a emergency condition run for your life type thing. So it's nice that there their number, you could see two. A 12 300 1 51 to 201 01 to 51 50 51 to 100 0 15 will use those numbers. And it's also kind of nice that they have color coding as well. We'll also use color coding on our app, so it's a very cool thing. I didn't start really looking at ozone until here recently, but I live in Vegas and most people think Vegas casinos, you know. But actually, the cool thing that I like about Vegas is the nature we live were in a valley surrounded by mountains, and I love the hike in the mountains, and the ozone really does affect you, especially so high up in the mountains. Eso I begin, you know, keeping track of it. And I found this website. It's very cool. The cool thing about this website is, though it has an a p I. This is a government website. All government data is usable by the public, and this is no exception. So head over to Doc's that air now. Ap i dot org's and you can click on the log in page and you actually need to register for this website in order to get access to the A P I. It's completely free. It's automatic. You just have to fill out this form. Come the log in page and click. Request an error. Now AP I account and then just fill out this form. Right, So first name, last name log in. Name, password, email, address, phone. And you can leave the comment blank blank, agree to their terms and then requesting account, and immediately they'll send you an A P I key. And we need that key in order to actually access the A P I. And there's some rate limits. You can only acts it so many times per hour, but it's high enough toward just for our personal use, it won't matter. I mean, I think you have to access it like thousands of times per hour before they cut you off. Um, so that shouldn't be a problem for us in this in this thing. So once you do that, you're ready to go and come back here and log in. And when you dio, you just get returned to this page. But now you're logged in and you can click on this Web services link. And now we have all kinds of different AP eyes to choose from. And we're gonna be using this, um, observations by monitoring site one at least for now. And we want to search by zip code. You can also search by longitude and latitude, but who knows their own longitude latitude? I sure don't mean we could go to Google and figure it out. But zip codes work just as well. So we're gonna be using this by zip code one. There's also forecasting if you want to get future forecasts And, um, what else do we have? Stuff in the past? Historical observations. If you want that for some reason, like said that we just want the current ozone number for our reporting area by zip code so we can go to this. You go the documentation and maybe we will here in a second. What we really want is a query. You are well, and this will allow us to build our URL that we can use in our app. So put in your zip code in the distance you want. I usually just put zero because I want it right around me and then change this to Jason. We want this information return to us as J Songs week and then parse that in our app much better. So what? You do that click build And now you have this You are Oh, and you Can you notice it has your a p I key in it already. I might fuzz this out so you can't see my key. Not a big deal, but whatever eso then if you click a run and you can see this is the data that it's going to return and this is a little complicated looking right here. If we go to the documentation that explains what all that stuff is, it returns all of this stuff, right? The date, our time zone, the reporting area, your state led to longitude parameter name. And then here's the thing we want a Q. I that's this number, say 45. That's what this number is right here. 54 and 54 is 51 to 100 which is moderate, which is yellow. So that's what we want, right? It also brings back category number and category. Name wouldn't really care about that. So yeah, that's pretty much all we need. All we need to do now is take this and integrate it into our app, and we'll start to look at that in the next video. 14. Connect To Weather API: Okay, so we've got our a p I key. We got this your URL that we've built with this little tool here. Now we need to add this into our app. So copy this and there's a few things we actually need to do first, but we can get started now, so head over to our APS controllers and home controller. And this is the controller we created with our generate command Few videos ago when we created our first Web page. This is the controller for our Web page Rails is a model view controller, platform models or database stuff. Views are the web pages and the controllers sort like the brains behind the scenes. That's what this guy is right here. So we can do all kinds of cool code stuff in here. And this is where we're gonna work with for the next video or two. So I'm gonna create a your ah variable called girl. And this is an instance Variable. Since we're in a Ruby methods, we put a little at signing from it and put equal Teoh and then some quotation marks, and I'm just gonna paste in that a p I. You are else that we just copied. Now, in order to connect to this website, sort of behind the scenes, we need a couple of little programs, and the 1st 1 is we have to require these little programs, and the 1st 1 is called Net H T T P. And that does just what it sounds like. It goes up onto the Internet toe websites http websites and it collects data. Now we also need to parse that data once we collected and bring it back to our app. And to do that, we use something called Jason in quotes. All right, so remember when we click this here, it's returning stuff in Jason format, which looks like this. This is Jason format. So we need to be able to parse that Jason format. There's a little program that does that call Jason. Now there's a couple of different ways to sort of install Jason. Um, pull back our code here. We don't have to install Net Http because it comes with Ruby already. It should already be in our system. Same thing with Jason. I think it comes with our app, but sometimes it doesn't. So I always just install it just to be sure. And like I said, there's a couple of ways you can do it. Head back over to our website here and let's go to Ruby gems dot org's and let's just search for Jason. And here it is. We go ahead as 261 million. Oh, that's probably it. So we could just copy this and head back over to our gem file and just kind of paste this in and click Save Head back over to our terminal here and just bundle install to install that app. Now, that's sort of the main way to do it. Um, that will probably work just fine, but I'll show you another way to do it as well. Just for fun. If one way doesn't work for you, try the other. Shouldn't have a problem. But whatever. Easy down here, it's installing J sound with native extensions, so we should be okay. But you could also just type in gym install Jason. If you want to do that, click enter and it'll install it that way as well. So either one of those ways should work. Now we are almost done. Head back over to our controller and we've created are you Earl? But now we need to do a couple more things. So we've got this year old now we need to actually connect to it and get the information. So I'm gonna create another variable called you Are I. You are I stands for uniforms Uniform resource indicator. It's a your all type thing. And what we need to do here is set are your eye to at your l which is this guy. So basically, we're saying, Hey, turn this into a U R I for resource indicator. I think it just all has to do with this. Ah, this net http module is just how it works. Eso now let's create another variable called response and said that equal to net colon Colon, http, which is you know, this guy up here dot Get now we want to pass in that at you. Are I. So basically, we're saying, take your uniform resource indicator that we just created and send it out into the Internet and get the results right, and we call the results response. The website is responding, right? You call it anything you want and then finally Let's create our final variable. Only call it output. Call it anything you want. But here's where we parse the response. Okay, so we go Jason dot parse and then just pass in at response. So that should do the trick. Now we can play with this variable on our index page. So down here, I'm just gonna hit put a line break, and this video is actually getting a little bit long, so we're gonna pause it right here. And in the next video, we'll pick it up right here and actually output this stuff onto the screen. 15. Output API Results To Screen: Okay, so we've got this output that well, uh, have our output. Now we want to put that on our screen. So head back over to our Web site, put a line break here, and let's just create a little embedded ruby and let's just paste in that output and see what it looks like. So save this and come back to our AP here and hit. Reload and you could see Boom. This whole gobbledygook is pasted out on the screen. Now, this should look familiar. It's just this stuff right here, right? Right. Same thing. Now this is a ruby array and insight of the array. A razor designated with these square brackets. See opening and closing square brackets. Inside here is a ruby hash and those air designated with squiggly brackets. Right, So we can see just kind of looking through here. So this is the first hash opening swiftly racket closing, squiggly bracket. And inside I hear there's even Mawr. And here's the 2nd 1 Is that it? Just It kind of went fast in that last one there. No, here's the 2nd 1 ends right there. And then the 3rd 1 I guess, is this so there's three items in our array. So we want this. A Q. I thing of 50 which is in the first item, which is this thing. So to access the first item of an array, we just call that item with square brackets and the number of it, and you would think it would be the 1st 1 But that's not how res worked. The 1st 1 in array is zero, so we put zero. If we save this and hit reload boom Onley, that stuff will appear and you can notice no squirrely or no square brackets anymore. So now inside a here you notice these things are key value pairs. They're all paired up. See, here's a pair. Here's the key. Here is the value. Here's another pair, and these air are designated with commas so separated by commas. So here's a key hours of observed. Here's the value. Here's the key. Here is the value. Here's the key. Here is the value you can see the little hash rocket thing designates key from value. So again, key value, key value he value he value he value. And this the one we want this key and this value. We want to get this number. Right now. It's 50 so we have to just call the key, which is a Q. I copy this and back over here and same deal. We put another square bracket and we just put in quotation marks. The key in this case is a Q. I say this and hit reload. Boom! We have 50. Oh, right, which is the number we want, which is right? Lets it reload. Looks like it went down. It did not go down. Oh, we've got a different. Maybe that's a different ah area code. Maybe not. Area code up. Um, What? I'm looking for distance. So let's go. 25 ILD Run a que eyes 54. Okay, so that's what this is. This is a 25 mile radius within our zip code. I just want a zero mile radius. I want to know what's right around my zip code. So that's why the numbers are slightly different. Interesting. But now we have access to that number. So let's just let's come up here and let's just grab this whole thing and instead of up here where it says hello world, let's just pace that in right? The boom 50. Awesome. So all right, we're starting to get through this now. Now there's some things we need to do. We need to do a little error handling in case you know, it's possible it doesn't return anything. There could be a glitch in the A P I or something like that. So we need to sort of manage for that. We'll start to look at that in the next video. 16. API Error Handling: Okay, so we're connecting to the A P. I were getting a result we're putting up on the screen, Everything's fine. But we could have errors along the way. There could be all kinds of things that go wrong. For instance, the internet could be down and you can't connect to the A P. I. The FBI website itself might be down. You can't connect to it. You might have put in a wrong zip code or something. You can't connect to it. So we need to bake in a little bit of error handling into our app just to make sure this will work under errors. And so I think I'm gonna do is I'm gonna come here to zip code. Just going to type in a gibberish one and build the URL and then run it. And when you dio you see, it returns these two brackets, right? So this is like an error. Well, this isn't a bracket. This is Ah, a ruby array. And it's an empty array. So we can actually test to see if the results that are returned or an empty array or not. If they're an empty array will put an error on the screen. If not, we'll put whatever on the screen so you can actually see if we come over here to our code and in our zip code. If we just put in, you know, gibberish went through for five and save this head back over to our AB and reload, We're gonna get a big, angry air. So how do we fix this? Well, let's write some code. First of all, head over to our index page and let's grab this and copy it instead of this. Let's call this final output right now in our controller, I'm just gonna pace that thing back in. Let's do an if statement. Let's go. If at output dot empty question Mark, uh, do something else, do something, and then we need to end our our if statement. Okay, so basically we're saying here is if the output returns empty, then we need to create something. Let's head over here and let's grab this at final output variable that we just made up and let's go. Final output equals, Yeah, let's go capital air. So if it returns empty than this, final output will be error. And if that's the case, when it prints it down on the screen will print out error, right? Otherwise, else, just a ruby else statement we want to make at final underscore output equal to that thing that we were putting out on the screen before. Right? So it's kind of I mean, some of this up. Okay, so let's put a little comment here. Check for empty return result. I don't know. Let's save this and head back over to our Web site and hit Reload. And we're still getting an error because I must not have control s save this file. Throw asked. Make sure that file saved. All right, now it's it. Reload. Okay, so So we get this error right now if we come back up here and change our zip code back, do you? My zip code Actual one that we know is gonna work. And if we hit reload. Now we get 54. So a little bit of error handling and you can play around with this. You can add more complicated error handling if you want princes. This just test to see if it returns empty. If it doesn't return anything at all, you know, you might go Something like, you know, uh, if at output uh, we created else if block else if and there is no at output again, we would say something like air. Say this. Come back here and it reload. It works fine if we change this back. Teoh Once you threw for five hit reload, we get error. Uh, how else can we flummoxed this thing? Nothing at all. We get error s so it seems to be working pretty good. So just some basic air handling. No big deal. In the next video, we will move on and start to work on the color coding part, which is all kinds of fun, and that will start in the next video. 17. Jumbotron Background Colors: Okay, This video, we're going to start to work on color coding. Before we get into that, though, make sure you change the zip code back to your correct zip code. Eso that our app works. So all right, color coding. We have this air now. Website has these green, yellow, orange, red, purple, And what color that is Maroon. Maybe so. We need those colors or something like them to pop up here. We want to make this whole Jumbotron a different color. Now, if you head over boots draft and hit the documentation and come down here to utilities, there's a color section here, and if we scroll down, we can see that it's easy to change the background color of a thing by just adding one of these to the thing. So, for instance, we can head over to our jumbotron and in the class jumbotron, we just put a space and go b g equals primary. Save this, come back here and hit Reload. And now it's blue. Right? So Ok, that's a really easy way to do it. But you could see we only have 45123456 colors. Basically and we need 123456 But we want him to be green, yellow, orange, red. If we come back here, we have green and this is kind of orange. We have no yellow, the Reds kind of funky. So what we want to actually do is, instead of using this, we want to just kind of create our own CSS to deal with this. It's pretty easy to dio and we can do that. And this we're going to start to do in this video. So head back over to our app assets style sheets. Remember, we created this bootstrap Lee one we could just put in any kind of CSS we want right here. And then we could just call it so, um, let's go. Uh, I don't know. It's called green. And then inside of here, we just call background dash color and then name the color. Now you can use hex codes if you want, or you just type it in. I'll probably we might use hex codes as well. So what do we want? We want green, yellow, orange, red. Now let's see what we want. Green, yellow, orange, red, purple and maroon, I guess for full maroon. So green, yellow, orange read that was that purple and maroon. I don't even know what maroon is, but and then changed these maroon purple read orange and yellow. All right, so if we save this now, we can access any of these guys by just calling this right. So head back over to our index page. And instead of this primary thing, we could just call orange, for instance, if we save this and head back to our website hit Reload, Boom, orange. So all right, that's a start. But now we want this to actually kind of change, depending on what this number is. So I think we'll look at that in the next video. 18. Color Logic with Ruby: Okay, So now we want to write some logic to change this color based on the number. So first things first head over here, and I just very quickly I wrote this little thing in a note pad here. So good is 0 50 greens or a 50 yellow, 51 to 100 orange, 101 to 1 50 etcetera, etcetera, etcetera. Down the list. So now head back over here. One thing we need is let's head back to our code and to our bootstrapped Lee CSS. Let's create another one of these for the error, right? So if it returns an error, we want to change that color too. So let's just put that is gray and change that. So Okay, save that now head back to our index page and where we put before orange or red or whatever color instead of doing that. Let's use some embedded ruby and we want to create a variable. And it's called this the AP eye color. Okay, copy this and save it. Now if we hit reload here. There is no AP eye color yet, so this was just a fault. Back to Gray of the regular bootstrapped color. All right, so now we want probably do this in our controller. And what we're doing here is way need to test against that final output. Because, remember, the final output will either be error or it will be a number. Right? So let's create a new if statement. So if and then I'm gonna go ahead and end it. So if at final underscore, output equals double equal to sign equals error, then a p I color equals gray. Great. There we go. Right now, we can do multiple tests, right? So we could go else if and if we dio, um, final output. Now we can start testing against numbers so we can say if it's, um, less than or equal to 50. Which is this right here, right then at a P I color equals green right else if at final output. So now if it's 51. So if it's greater than or equal to 51 and at final underscore output is say less than here we go less than or equal to 100. Then at a P I underscore, color equals what? Yellow, Right. Okay. I think we could just copy this. So yellow orange Read purple maroon. I'm just gonna come through here and change all of these from green, yellow, orange read. Okay. And maroon. All right, So yellow is 51 to 100. Orange is one a 1 to 1 50 Right. Red is 1 51 Teoh 200. And I'm just getting these numbers from right here. Right? I see purple is 201 300. And finally, maroon is 301 to 500. All right, so we save this. So, looking through this again, it's just a simple if statement, right. If the final output, his error, our color will be gray. Otherwise, if it's less than or equal to 50 it will be green. If it's 51 to 100 little yellow, if it's 101 to 1 50 it'll be orange. If it's 1 51 to 200 it'll be your red. If it's to a 1 to 300 would be purple three or 12 500 maroon. And this is just basic ruby here. This is an if else if statement we have multiple condition als That means that this has to be true, and this has to be true in order for the whole thing to evaluate. True. And that looks pretty good. So now if we head back to our site, boom. 51 is yellow. We come over here. 51 is in fact yellow. 51 to 100. Moderates were just on the cusp of moderate, very, very close, and it seems to be working. So let's give it a test 11 time here has come back up here to our zip code. And let's put in that, uh, gobbledygook Save this and return here and run it again. And boom! Well, that's dark gray. We like that color. I don't know. Let's have back over to our Let's change Great Teoh Silver. I don't know if that's an actual color. It reload. Let's look matter. All right, so, yeah, it seems to be working Head back over to our index page now our home controller Page and change our zip code back hit. Reload. All right, so it's working with it Does everything we want. Now I think it be a good idea to kind of put a little, like maybe right down here, something like an explanation of what yellow means. So I think we'll look at that in the next video 19. Change Ozone Description: Okay, so everything seems to be working well, but now, like, I don't remember exactly what yellow means. Right? So maybe we want to add a little message on here for each of these colors. So pretty simple to do. Let's head back over to, um let's look at our index page and right here. Let's just go at another p tag. Close R P tag. And inside here, let's go. Um, some embedded ruby. And let's create a AP I message, maybe. Or description. All right, so here we can save this and come back here and let's see Reload to make sure it still looks. Okay. Wow. We jumped up to 77 just now. Crazy. All right, So, uh, back to the home controller and inside of this block here for each of these guys, Let's just ah, create this right. And here and here and here and here and now inside here we can just kind of copy and paste each of these. So let's head back over to our little website here. And if we hover here, we get this little message kind of tricky, happy Cottrill C or you can right click to copy and I'm just gonna come back over to our code and kind of pace this. And now we can go down to yellow, do the same thing, or, you know, you can write any kind of message you want there. But I think it's just easy to copy and paste this. That's why I'm gonna dio if you were gonna make this website yourself, maybe right. You're a little message. Ah, let's grab this whole thing, even the top part. So we have to go back and change 1st 3 So what this one was Let's do that. I want the number to. All right. Did we get that one? Yes. And the green one here, with me or good. And you could even kind of, ah, use bold and stuff you wanted, Teoh. I'll leave that to you. All right, so All right, let's see. Were on red now. Okay. Hobby and paste. And then purple. Almost done. Happy based and finally maroon hazardous. Happy based. Save this head back over to our app and hit Reload and boom! We have this nice little thing. Now you can play around with this if you wanted Ah, whatever. And also I don't think we really need this button anymore, Do we? Go ahead and head back to the index page and just get rid of this button class, save it, reloaded and maybe see, I want to put a line breaker too. Between those. All right? Or maybe you could just take that out completely. Yeah, Let's just take that out completely. Okay? All right. So coming right along looking pretty good. Um, maybe we'll take out this Linkous. Well, we just do that right now. Head over to our nab our grab this link. Well, yeah. Let's take it out. Save it. So, um yeah, I think we're pretty much done with the main functionality. We haven't done anything with this little search guy. Think maybe in the next video, we'll start to play around with this so that we can type in our own zip code if we want, you know, different zip codes and search. Based on that, I might be fun. I think we'll do that in the next video. 20. Navbar Search Form: Okay, so now we want to play around with this search bar at the top here. So it's gonna take a few videos to knock this out. First thing we want to do is head over to our knave bar and find this form. It's a red at the bottom here, and this is a bootstrap form, but we need to create a sort of ruby form. A rails form instead. So we're gonna call the form underscore tag, and this needs to go to a path. I call it something underscore path. I'll change that a bit. Now, we want this to have a method equal Teoh, um, host. And then we want to do this is gonna be a loop. Okay. And then now down here, instead of form, we want this to end. I met Ruby. Okay, so now we need toe, have a skull, a sedative with a class of these things. Now, we've got two things here and input, but an input field and a button. So we need a rube if I ruby Fi this, uh, input box. So to do that, we go text underscore field underscore tag. That's what rails calls on input box and let's call this zip code and we always put nil. I'm not sure why. And then for a placeholder, let's go zip code or about search zip code, All right? And I think that will do. We also want to give this a class of all of these things. All right, so now get rid of that. Now, finally, we need a button, which is just a submit Underscore tag. And we want this to say what? Look up. Yeah, search. And we want to give this a class of all of this stuff, and then we need to close our tag, and so I think we can get rid of that. OK, so, um might work. Let's save this and see if I made a hash of exit. Did it very quickly. So this is what it used to look like. In fact, reload. Oh, we need a something path so very quickly. Well, I think this video is getting a little bit long, will pick this part of because we need to create a controller and a Web page to send this to and a route. And that's why we're getting an area here because we haven't created that yet, So we'll do that in the next video 21. Search Functionality: Okay, so now we need to create a zip code page so we don't get this air anymore. And we did it this earlier. When we created our home page. We use the rails generator, but this time I'm just gonna do it by hand. So head over to our home controller, and I'm just going to create a new method inside here called zip code. Thanks. Save this. Now, I'm gonna come over to our views home. And let's just create a new file on Let's call this zip code page. All right, if we save this as zip code dot html dot trb And if we head over to our rouse file, which is and configure outs, we can just we need to create a route for this. So I'm just gonna uncommon that old one and let's make this zip code. Now. We also need a route for our former itself in our form is posting data. So we need a post route, and I'm just gonna create this one right here. It's called zip code, and it points to this home zip code controller, which is this guy which is this guy. So if we save all this saver routes file again and back over here and hit. Reload. Hopefully up. Not we gotta change something there, too. So over here in our knave bar, we had something path earlier. Now it needs to be zip code path. So if we save this, you come back here and hit. Reload. Well, this now works if we, you know, type something in here and click this it goes to the zip code page. Also, if we go to home slash zip code, it also puts up that page. So all right, the form seems to be working well, the form and exist Now it's not actually working yet. So how do we do that? Well, forms used something called Haram's. And we can pass these Paramus around our program. And you could see down here. We created this field tag in our little search thing, and we called it zip code so we can pass a zip code Paramus to our controller and do stuff with it. So let's head over here and let's go. Um, let's call this at something for now. And then we just want to pass in Paramus and then cold colon, zip code, right? So if we save this and then open up that let's see where was it in views? Zip code dot html page a line break and let's just embed some ruby and we want to pass. What do we call that thing? Something not a great name will change that in a second. All right, so now we can save this and head back over here and let's type in the six. So 610 my old ZIP code in Chicago and boom! It passes that to the page, right? We can type just about anything in there right now. Right? So we need to do a little bit error handling. If we passed nothing, it sends nothing. So so that's not great. So at least the form is functioning. It's sending data to our controller. Once we get it in the controller, we already know what we can do with it in order to connect to the A P I. So that's just a matter doing that. So I think first, before we do that, though, let's do a little bit of error handling, and I think we'll do that in the next video 22. Search Form Error Handling: Okay, So in this video, I want to do a little bit of error handling, and we're not gonna do anything fancy, but we want to do at least a few things. So right off the bat, let's say if and let's copy this prams whatever equals nothing, then. Now, let's change the name of this from something to, um, Zip underscore query. Right. And we're also gonna have to put that on our ZIP code page. So instead of something changed this toe zip query, Say that and so Okay. Now, if that equals that, then what did I hit? All right, Uh, tools much just close this. All right. Well, I'm not really sure what's going on there, so we'll just leave that for now. I must have hit something weird on my keyboard, so Okay, we're at her. If grams equals nothing, then let's call at zip. Query equals Hey, you forgot to enter a zip code. All right. Else if if Haram's this exists, um, let's make a comment. Say, ah, do a p I stuff. So I think that I mean, just some very basic air handling. So now if we save this and let's head back over here to this page and hit Reload. Actually, let's go. Come up here and type in 62 63 Random hit. Enter. We get 62263 If we don't put anything at all Hey, you forgot to enter a zip code. Okay? So now we could get more complicated with the air handling. Um, but for now, I think we'll just leave it like that. So in the next video, we'll start to connect this thing that we just did to the actual A P I and go get results and return them and then put them on the screen. And that will be in the next video. 23. Search Form API Connection: Okay, so now we want to connect their zip code page to the A P. I and I just realized I created this home zip code a route almost by habit right here. We don't actually really need that page, so I'm gonna uncommon. I'm gonna comment that back out. All we really need is this post zip code. Let's go and save that. Now let's head back over to our home controller. And what we want to do is inside a here. We want Teoh do all the stuff that we did in our index controller, basically, right. So let's just copy all of this, right? And then head down here and I'm gonna make some space here because it's getting a little crowded. It's kind of hard for me to read it all. So all right again, we want to create a u R l. And but here, remember, we hard coded in this zip code, and we actually don't want to do that anymore. We want to just use this Well, this thing right here, all right, Or we could just okay, use this, or we could use this all right? Either one. So instead, we're gonna come down here and we're gonna find this and put a thing there, and we're just gonna con Canton Eight and Khan Canton eight again. Here we go. And inside a here, I'm just gonna put at Zip Query, and I think that will work. Let's make it to underscore s just to make sure change this in case the Zip query is a number you can't con candidate a number into a string. So I want to make sure that the strength we'll just do like that. Okay, so now hopefully that is correct already. So we can come back to our zip code page. Let's get rid of this. Let's go to our index page and let's happy all of this stuff and this pasted under a zip code page. So let's see what we got here. Final output, blah, blah is the stuff match up to our home controller? Let's say, um, copy all of this. Pop it over. All right, let's just save this and run it. I haven't actually looked through this, but, uh, go back to our home page, type in a zip code of six of 610 search 44. So Let's come up here and search for six of 610 I will. Chicago Neighborhood. It is currently 76. Are you sure about that? The documentation. Six. So 610 Bill, run a que I Was it 61? That is definitely not That s what has gone wrong. Let's take a look here. Uh, changed this. Just do this. Save this. 6610 search 61. There we go. We didn't actually have to convert it. Eyes. That right. 76 we want here is 61. All right, so that works, all right. A little convoluted. It's kind of what happens when you copy and paste 62 63 Likely know as an error. Oh, let's change this. Also here from Las Vegas. So head back over to our Is it? Could that html This is the current ozone air quality for my neighborhood. For the we call this zip code. Um, zip query. All right, let's save this. Six of 611 slightly different one. This is the current ozone air quality readout for the 64611 zip code. Awesome. And I want to know in my current one. It's the current ozone quality readout for the 89129 zip code. Um, John here, this is the current ozone air quality readout for the Johns. It go so you can put some error handling in there. If you wanted Teoh, change this message. I'm gonna leave that to you. And that's pretty cool. So notice. Well, right here. We have no link. Let's change that real quick and back over to our nab our come up here. And instead of this, let's create embedded ruby tag with a link underscore to, and we want this to go to our route. Underscore path. I want this to be my ozone root underscore path. We want to give this a class of this. Okay, Now we can get rid of this link tag. All right, save this. Come back here. Reload. Now, if we click on here, go to the home page. If we search or a zip code and then click on here, you to go back to the home page. Cool. All right. So I think that's pretty much it in the next video. Going to talk about version control so we can save our code, push it up to get hub. And then after that, I'll show you how to push all of this up to her Roku for third party Web hosting so we could make this an actual live website online, and those will be in the next couple of videos. 24. Version Control With Git: okay, this video really quickly. I want to show you how to set up. Get G i t. It's a form of version Control allows us to save our code and push it up to get hub for ah , you know, just to keep it safe on a different computer industry standard everybody uses. Get so head over to my personal upside. John elder dot com four slash code And this is just a website. I have that with some little code snippets and come down here to and picture me, man, that's an old motorcycle used to have do not own that anymore. And we click on get and then come down here. We just want to copy and paste these commands into our terminal. So highlight this copy and bring back to terminal and just right click and paste. Now type in your name and hit, enter and then go to the next one, and this is for your email address, and it's important to use the email address that you're going to use later on it. Get Hub, probably in the next video. When we push this code. John E. For 196 at gmail dot com. All right. Next we just copy and paste these based and a couple more I forget what these do have been using these for so long. I've completely forgotten why this is how you set up, Get four rails. Last one is just Get on it. Copy this and paste. Okay, So now, in order to save our code, we've turned get on. But now we need to save our code to get so we just have get ad, period and the period means it's gonna add all of the files in our project. You see, there's a bunch of them next we talk, get commit dash a M and then give it a little message. I'm gonna call this initial commit all right, now that saves everything. Now we've saved our code or get is running, and everything's fine. But now we want to push this code up to get hub for to keep it safe, to keep it on another place in case our computer crashes in case our house burns down. It's always a good idea to push your code up to 1/3 party and get hub is the industry standard is completely free. Everybody uses it. And I think I'll show you how to do that in the next video 25. Push Code To Github: Okay, This video, we want to set up, get hub for version control. So head over to get have dot com and silent for accounts completely free. This is my account. Here. Get hub dot com forward slash flat, and it should be a little button under here. If you want to follow me, that's fine. Doesn't really matter. Once you have your account set up, click on repositories and what we need to do is create a new repository in order to hold all this coat. So come over here and click new. Actually, before we do that, there's another step we need to do first. Let's do that. Right now it's come appeared a little icon and click on settings and then come down here to ssh and GVG keys. We need to add our ssh key from our computer that we created way back in the beginning of the course here. So to get that key, if you remember it is in, Let's see, Well, we catalogue it out and mine was in C ah users Flat planet, then dot dems dot ssh. And then it was I d underscore R s a dot hub. Believe right that look right? I think so. Enter and boom. There it is. This is our ssh key. So we just copy this whole thing starts with ssh dot rs a and then ends in your computer name, right? Click and copy. I head back over to get hub and click this new ssh key and just right, click and paste. And you can, you know, name it if you want. You don't have Teoh. So at ssh key is gonna ask you for your password again. See? What is my password? Okay. And boom, Now we're done. So now we can come back to our profile or come up here to our profile. Yeah, and then click on repositories and we want to create a new repository. And let's call this What do we want to call this? Um, rails, Ozone. Yeah, And it could be public or private. I'm gonna keep it public because who cares and click create repository. Now, there's two more steps. The very first time we need to copy these two lines of code and paste them into our terminal because we're pushing an existing repository from the command line, which is what it says right there. So right, click and copy. And this is where it's gonna um Well, it just doesn't thing. It's thing. But now this last one here, this is where it's gonna ask you for your ssh password if you created one way back at the beginning of the course. Remember when we created that ssh key? And I said, I don't make a passport, but some people dio if you do, If you did, it'll ask for your password. Now, I didn't create a password then, so it's not gonna ask me that. Yes, that was adding our ssh key. And boom, it's done. So if we head back over here, Teoh, our profile Look on repositories. We now have this rails. Ozone. Yeah. Now say we want to change this. Read me file. We do that real quick. Come down here to the very bottom of our stuff here and just find the read me file. And here it is, right here. Let's call this rails ozone app. And it's getting all this. Uh, this app looks up the current ozone level by zip code happy he right? See 2019 Kotomi dot com. John Elder. I don't. So we save this file now in order to push all this stuff up to get Hub From now on, any time we do that, we come back to our terminal and we go through the same steps. Get add, period. To add everything. There's only one file this time cause we only changed one file. Get commit Dash am and let's go tweaked. Read me while you just want to give this a little message to keep track and then finally to push it up to get hub. From now on, we just get push. Okay, so now we can confirm by coming back here clicking on well, hitting Reload. Look out on this rails, Ozone coming down and saying Yep, the really follow has in fact changed. You could see right here has changed. And here's that commit message. We just typed Very cool eso That's all of get Hub is that's what get version control is very simple. In the next video, I'll show you how to push your code up to Roku for third party Web hosting, and that'll be in the next video 26. Intro To Heroku For Free Webhosting: OK, in this video, I'm gonna show you how to push your code up to Roku. And if you're not familiar, Hiroko dot com it's just a ah Web hosting company. They have a free tier that we're gonna use. Now you can pay to have a more powerful website. We don't need to worry about any of that. We're just gonna use the free tier. Like I said, this is a popular Ruby on rails Web hosting service been around forever. Probably the most popular Ruby on rails, Web hosting service. And you can check out pricing if you're interested in paying more to make your website more powerful and faster and all that stuff we don't care about any of that. We're just gonna use it free tier. So go ahead and sign up for this. And before we push our code up to get her, we need to make a couple of changes. So head over to our gem file and look around here for this sequel light reference. This is a database that heroic who does not allow. So I'm gonna copy this and delete it and then just come down here to any of these development groups and paste it in there, and I kind of wanna line it up like that. So if we save this now, we're almost done. We need to create another group called Production and then end it. Now. Her Roku does require the A post Grads database. It's a type of database, more powerful one. Now we're not using a database in our app at all, but it could still throw up some errors if you don't sort of, ah, reference it in your gym file anyway. So head over to ruby gems dot org's and then just type in PG stands for post grass. And we could just grab this, this one right here, the most latest version. So I'm going to copy it and then head back over to our jump file and inside this production group, just paste that and go ahead and save this. Now we need to make a little bit of a change here. Normally, when we change your gem file, we type in bundle install. This time, we need to type bundle installed dash dash without production because we don't want that post press production group being installed on our local computer and we don't want the sequel light one to be referenced in the production one. So that's the command. We use that. So All right, that's all the changes we need to make. Now. Remember, we installed the Roku tool belt way back a t beginning of the course. Her row coup dash dash version You type in this command if you get something, it means that this has been installed. If not, you need to search a Google for her Roku tool belt and install that I go back and watch the video from the beginning of this course. So too sort of. Ah, connector. Hiroko, once you've created your account at Roku dot com, just I've been Roku log in, and it will ask you for your email address for your, uh, well, know they've changed this recently. So you press any key, uh, to open a web browser. I just hit enter, and then you log in. I've been your saying and your password those and click log in. All right, So you're logged in, head back over to your thing here. This is logged in, and it's just blinking, right. You need to hit control. C to break out of that. Um, you know, you're still logged in. It's just you have control your command prompt now. Okay, so now we need to create. Let's go eight, Roku, create rating app, and it's given us this You, Earl, if we copy this and back over to our web browser and paste it in Hey, we've got this new thing now. We need to now just push our code upto Roku. But before we do that, it's important that we saved this to get because we made a change to our gem file and we need to save that change. Added PG database. If we don't save this to get, we won't be able to push it up to her Roku correctly. So let's push this up to get hub get push. Okay, so now we've logged into Roco. We've created a new app. Now we need just need to push our code up to that new app. So we go, Roku, actually typing. Get add, Roku. Master, Run! Command, Get push. Roku, Master, There we go. Been a long day. Alright, So it's doing all the things this might take a little while. You can see it's it's installing Jason that we added, It's install in the PG that we added. So it's just doing all the stuff that it always does. So I'm gonna go ahead and pause the video, pick it back up, assume is it finishes doing its thing. Okay, it looks like we're almost done. We're getting a warning here. Get ignore. You need a bunch of other warnings where we can ignore. And now it's compressing launching. And here is our app. Okay, so let's head back over here and hit, Reload and see if this worked. And boom, it looks like it did get type in a different zip code. Awesome. 11115 error. Eso It seems to have worked very cool. So in the next video, I'll show you had it changed this year, Earl to your own domain name or even just something cooler than you know, all of this stuff and we'll look at that next video 27. Using Custom Domain Names With Heroku: Okay, So in this video, I want to show you how to change your u R L to either your own domain name or just something better than this. So let's head back over to terminal and clear this screen here so we can run her. Roku renamed to rename our AB Analysts. Try it, Ozone, ozone is already taken. So let's say my ozone, my ozone uh, it looks like Okay, that worked. So now we could head back over here instead of radiant journey. Whatever. We could type in my ozone dot Roku app dot com We need Teoh, actually start at the beginning here, and that seems to work. So 610 Cool. So that's how you can change it now, I've already taken my ozone. You have to change to something else if you want to do that, or you can use your own domain name. So, like, if you owned my ozone dot com, how would you connect that to your new apple? Roku? We'll just head back over to her Okun logjam because we're already logged in because we logged in in the last video and gonna hit reload and you could see I've got a lot of APS What, you want to look down here for the one you just created and in our case, is my ozone click on it and then come up here to settings and then scrolled down until you see this, uh, ad domain. So, for instance, if you owned my ozone dot com, you would just type it in there and then click save changes. And that's all you have to do at Roku. Now, to own a domain name to buy a domain name, you have to purchase it from something called a registrar. That's a company that sells domain names. They cost about 10 bucks a year. You got to renew him every year, and there's thousands of registrars, so each one of them will act a little bit differently in how you point your domain name to this heroic UAP. And I can't tell you how to do it because, like I said, there's thousands of them. But what you want to do? I use something called name sheep go. Daddy's a popular one. I would just go to Google and type in name and sheep and then her Roku and your register likely has a little article or tutorial showing you how to point your domain name to her Roku. And in this case, it's 1234 five Ah, six steps, and there's even pictures. Basically, you want to create a C name and then put your Roku no example dot Roku dot com Roku app dot com In our case, for us, it would be my ozone dot Roku app dot com. You would create a C name record for that at name Cheap click a couple of buttons and boom ! That's pretty much it. So, like I said, fine year domain registrar. Find the little tutorial. It's a couple of steps. It's very, very easy. And that's all you have to do. I think you have to put a credit card number into Hiroko in order to have a domain name. They won't charge you anything. They just use it to verify you. I think I'm not sure on. That's been a while since I've done that, but just that easy. So I think that's all for this video. In the next video, we'll say a few more things and wrap this up