Build A Weather App With Ruby On Rails

what's going on guys John elder here from Kona me.com and in this video I'm going to show you how to build a weather app with Ruby on Rails hi guys like I said in this video I'm gonna show you how to build a weather app with Ruby on Rails but before we get started if you like this video want to see more like it be sure to smash the like button below give me a thumbs up subscribe to the channel and be sure to check out coda me.com where i've dozens of courses with hundreds of videos to teach you to code use coupon code youtube to get $22 off membership it's all in my courses videos and books for a one-time fee adjust $27 which is insanely cheap alright this video is gonna be one long video of my course how to build a weather app with Ruby on Rails alright guys I've said it before you don't necessarily need to know the Ruby programming language in order to use Ruby on Rails but it definitely helps and especially if we want to get into more advanced Ruby on Rails things you really need to understand Ruby and I have got a book that I published several years ago intro to Ruby programming beginners guide series it is awesome it is a couple hundred pages long no it is a hundred and sixty odd pages long and this has been the number one best-selling Ruby book on Amazon in the Ruby programming category off and on since I published it almost three years ago so if you're interested in learning Ruby in much greater detail and you want a reference guide that you can just you know kind of flip to and look up things as you go which is really handy check this out it's like 20 bucks or something I don't know it's not that expensive twenty four dollars something like that ooh I've got it on here so I'll put a link in the description below but here it is there's paperback for 27 Kindle fur it looks like 10 bucks Wow good deal get the paperback come on it's nice to have it as a you know a quick reference guide you don't like to be searching through a kindle book for something when you want to look up something really quickly you can just flip to the table of contents go to page you know 53 and see what you want to see and much much better I've also got this Ruby on Rails book that I published I don't know five years ago or so and this has also been the number one best-selling Ruby on Rails book in the Ruby on Rails category at amazon.com off and on since I published it see there's the back and same thing I'll put a link in the description below if you're interested in this book I build a clone of the website Pinterest and you follow along and build your own copy little bit bigger 215 pages it looks like but very cool book if you're interested I know this is a video you know I know this is YouTube when we do videos but sometimes you just like to have a book to grab off your shelf and look something up really quickly instead of hunting through videos for you know half an hour so if you're interested check out those books so this video is my how to build a weather app with Ruby on Rails course that you can get on udemy or my website Kota me so I've just smooshed all the videos together into one long video and I'll put in the description below I'll try to put like a timeline thing so you can click through if you want to look up specific things but this is gonna be a long one it should be good so let's get started all right my name is John elder from Cody me calm and I'll be your instructor today and this course I'm going to 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 and onto 100 go sort of outputs the screen 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 connect to this error now government website that shows current ozone levels air quality levels in your area so they have an API we're going to connect to that API and pull data and then do stuff with it in the app and then output it onto the screen so a very very simple website but it's gonna teach you all kinds of really cool things how to you know pull data from an API how to connect from to it how to manipulate the data afterwards how to do logic you know if the numbers above a certain level put green orange yellow that sort of thing basic things but it 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 four thousand something above sea level we're way up there and you know ozone has an impact on us so it's nice to have this little app I could just pull up and it shows me my my ozone in my level right now is ninety which means moderate we've got 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 we'll 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 them all step-by-step and they're pretty simple and we'll get started in the next video 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 a node a node 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 Mac or Linux you can use the terminal that comes with Mac or Linux you just go up 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 type things we have something called the powershell 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 gonna use the git bash terminal it's very similar to what you're gonna use on a Mac or a Linux so it's all sort of nice and easy for everyone to follow along if you're on a different operating system we also need something called the Heroku toolbelt we're gonna be pushing our code up to Heroku for third-party web hosting and we need a 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 we'll 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 okay so first things first we need to install node.js now this is kind of weird for me I'm not a big node person I use it I I know how to use it but sort of having to install it in order to install a Ruby on Rails doesn't quite sit right with me for some reason just kind of weird but not a big deal chances are you already have node 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 to 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 node 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 command our control panel and I just found this on the Windows Start menu and come down here to uninstall a program and then I'm just gonna click anywhere and then type the in key on my keyboard and you see here nodejs I do in fact have it down installed already so I'm just gonna right click and click uninstall and are you sure yes blah blah I get this little thing preparing to remove and do that and I'm just gonna go ahead and pause the video very quickly here while this sort of does its thing there's nothing for us to do it'll remove it for us and then we'll get a little message when it finishes so I'm gonna pause the video we'll pick it up right when this finishes okay so the 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 then just type in node and just gonna search for a node at Google the first thing that pops up nodejs org is what we want and you'll notice when we come here it comes from 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.1 5.3 LTS which stands for long-term support and I believe and then 12.1.0 current and this has the latest features now if these numbers are different by the time you watch this video if they probably will be these are always you know updating and you know putting out newer versions no big deal just download the the most recent ones whatever is listed there is gonna be okay so which one of these do we want we want this LTS one now you're gonna see this 12.1 and you're gonna be like ooh 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 going to 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 a 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 saved it and double-click it there I'm 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 gonna see a different screen you're gonna see something that asks whether you want to update or remove or fix or do something like that so you're going to 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 click Next you got the license next you can install this 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'll 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'll say you know installation complete please restart your computer note does not do that but I'm telling you right now you definitely want to restart your computer it's just node 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 to go ahead and do it anyway so we are almost done with this I think so I will maybe pause or maybe just talk for a minute until this creeps along yeah all right here we go come on okay so no js' 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 restarting 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 is 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'll be good so in the next video we'll install our text editor and our git bash terminal okay so we've got node installed we're good there next I want to talk about installing our text editor and this is the text editor we're going to be using it's 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 Visual Studio code or notepad 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 the most popular ones totally free if if you want you can throw those guys some money every once well 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 type in sublime text first thing pops up is the sublime text calm website and this is it so to download this you just click this link right here and right now we're on sublime text 3 build 3207 it will likely change that number by time you watch this video no big deal download whatever current version it is and it's the same thing you just click this we can save it anywhere save it to your desktop it'll download and then just click that button I'm not gonna walk you through this one because it's super simple there's nothing for you to do just take the defaults click Next and it will start in order to use this some live text 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 the git bash terminal so I'm gonna go get bash Google here and the first thing that pops up is this git - SCM com /downloads and that's what we want and right here we're on version 2.2 1.0 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 Mac or Linux you can download this but you don't need to you can just use the terminal that comes with Mac or Linux it works just as well as the git batch terminal 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 download it 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 going to be using and it happens to have the sublime text as the default one but there's a whole bunch of different ones you can pick but the weird thing is we never use the git bash terminal with a text editor they they're 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 sublime 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 Heroku and github comm for version control I'll talk about that later on same thing with this open SSL library we want that checked and this top check out windows style it just doesn't really matter but we could just go ahead and leave that as the default same thing with this mint ety thing and finally leave these to default and then come down 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 and the little box will pop up and you know you get the scroll bar and it'll show you the status and all that you just wait for it to install and you're good to go same thing with the 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 I pull this over and this is the get bash terminal we'll talk about this a little bit more 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 I said other web sites like github comm to push our code up for version control Heroku to push our code up for web hosting things like that you need an SSH key so we'll generate one of those in the next video okay in this video I want to generate an SSH key with our git bash terminal so rails Ruby on Rails requires I believe at this point a SSH key for some stuff behind the seams but we also need one to push our code up again hub for version control we'll talk about that in a bit and also to push our code up to Heroku we'll talk about that a little bit as well so we just need an SSH key it's just a security thing we need to do so I've opened up the git bash terminal and if you see here there we go if I type in PWD now if you don't know how to use this terminal no big deal I'm gonna 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 we're in and you can see we're in C slash users slash flat planet flat planet is the name of my computer it's the username that I'm logged in as I don't think the world is flat I just find a hilarious that people do so I kind of named my computer that whatever your user name is your computer name whatever whatever that is it'll 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 mkdir current command stands for make directory and then just type period ssh and a period on a directory means that the the directory is hidden the folder is hidden it won't show up and that's what we want for security related SSH key 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 wet planet slash SSH you can also notice it says it right there so now if we type LS to list the stuff that's in this directory there's nothing there so that's good I'm gonna type clear to clear the screen so now we just need to generate our SSH key and it's super easy it 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 because it has stuff like that just built in which is very cool so to generate an SSH key we just type in SSH - heeey Jenny XE this is gonna run a little program that generates our 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 Heroku or push our code up to github 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 really do that I just leave this blank and in that case when we push our code up to github later on it won't even ask for the password so it's just one less thing to remember I don't think hackers are gonna steal anything with this so I get an extra password on top of this it 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 and hit enter nothing will appear on the screen but for me right now I'm not even going to do that I'm just gonna hit enter and then it says enter the same pass phrase again I hit enter again and boom it's generated our key so if I clear the screen now if we type in LS to list the stuff in our directory we see these two files ID underscore are say an ID underscore RSA pub and this is what we want this is the public key and later on we're gonna have to take this key and upload it to github 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 catalogue the file and then ID underscore RSA dot hub and you can see this whole thing is our SSH key it looks like a bunch of gobbledygook it's just a security hash type thing and 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 Heroku toolbelt and that'll 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 okay so we've got our SSH key now we want to install the Heroku toolbelt and Heroku if you're not aware is a third party web hosting company that sort of specializes them things like Ruby on Rails and they've been around forever they're one 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 a nun of 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 low and things like that so for our purposes for testing and for building cool new things Heroku is great so that's we're going to use so in order to sort of talk to her okay behind the scenes from our terminal here in order to push our Ruby on Rails code up we need something called the Heroku toolbelt so we'll download and install that right now so head back over to Google and I'm just gonna type in Heroku toolbelt and this is a little weird it doesn't pop right up here this is an ad for Heroku we don't want that we don't want the pricing we want this Heroku CLI and the website address is dev center Heroku comm four slash articles forward slash Heroku CLI and CLI stands for I think command-line interface so our terminal is a command line so we need an interface to interface our command line to Heroku so that's what we want here so if you come down here you see there's a Mac there's a Linux version here we want the Windows version likely you're on a 64-bit computer because pretty much all computers are 64 bit or higher these days so go ahead and click this to install same thing as before we can install it we can download this anywhere we want I'm just going to download it to my desktop click Save and boom there it is and again you can navigate to your desktop and click it there just click it right here so we will open this / now the most important thing is to make sure this is checked set path to Heroku 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 Heroku directory in order to run it so if you add it to your path you can run from anywhere which is what we want so it's checked by default so you just leave it like that click Next again you can install this any words take the default it is a hundred nine megabytes so just be aware of 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 will why we'll need node in order to run this as well so you need node for everything these days seems like so I'm gonna go ahead and pause the video while this finishes its thing we'll 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 Heroku - - version and it says right there it gives us the current version that's been installed so that means it's been installed correctly if you get a command or a message that says like Roku 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 bash terminal thing here so I'm gonna 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 type in git again and pull this over just when you install things like that that work with this terminal just a good idea to restart it give it another start just to make sure everything's been installed correctly so that's it those those are those are all the tools that we need to install Ruby on Rails in the next video we will jump right in download and install 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 okay so it is finally time to download and install Ruby on Rails now you're likely going to want to go to Ruby on Rails dot-org this is the official website of Ruby on Rails and you can see right here they have the latest version five point two point three and you're gonna want to 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 going to go to something called rails installer org and this is a Windows installer I think there's a Mac version as well and this is like an executable 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 does it for us and it's super super useful so we have a couple of different options here we can 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 vs 5.0 which is this one right here versus the current version is four point or five point two three 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 four point something four point two 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 two point three the latest one with rails 5.0 or five point one you can see it comes with Ruby 2 point three point three rails five one bundler get we've already got our get bash terminal it has get installed already so we don't need that sequel Lite 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 so those things go together and that's cool so let's go ahead and just click this save it anywhere you want I'm gonna save it 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 a hundred and twelve megabytes it downloads pretty quickly though so I'm gonna go ahead and pause it very quickly and we'll pick it up as soon as this finishes downloading okay that was like 20 seconds later there's probably no need to stop the video but we can 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 click Next and I'm gonna uninstall this this checkbox right here because we already have get it came with our git bash terminal so we're good to go there we definitely want to add executables ruby dev kit and get if above to the path we talked about path before this means that you know we can run Ruby and 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 has been checked so we can go ahead and click this button to install now this is going to install five hundred and plus megabytes of stuff it's something like close to twenty-five thousand 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 C rails installer directory if you're curious I don't know why you would be now I'm gonna go ahead and pause this we'll pick it up as soon as it finishes doing its thing okay so the its completed the installation we get this nice little screen here to end it and we're good to go we can go ahead and click finish and we're done so now 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 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 gonna do in this video we're gonna create a simple test project not our main project just to make sure that Ruby on 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 git bash terminal and I should mention I close this terminal and restarted it I opened a new version of it or a new instance of it because Ruby on Rails needs to be the git bash terminal needs to be restarted in order to take into effect the changes that the Ruby on Rails installer just did so if we come here to PW and type in 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 going to change directory and type in C and PWD again to 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 mkdir 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 have n 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 so you can see 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 install 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 that rails installer things so what it's doing here is it's fetching all of the gems and all the dependencies that we need from probably from a website yeah right here you can see from rubygems.org 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 can take a minute or two get an error message towards the end of this and I hope it happens this time doesn't always happen for some reason but sometimes it does and I'm hoping it does this time so that I can walk you through what to have what you should do if you get an airman and there we did we get that error message so this is cool we can 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 ask me but you're gonna 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 I'm gonna scroll back up here and let's see grab this command it wants us to grab to do so I'm just gonna highlight it right click and copy and then just scroll back down and right click and paste and we just want to install the bundler thing say enter and it laggs 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 2.0 0.1 if it's a different version don't worry no big deal okay so that's taken care of now let's look at this so to see why this ignition failed to compile please check to make now we don't want to do that let's see let's just see gem files remain and install if we look through here I'm seeing like right here sequel light that's a database sequel light that's a database sequel light database so obviously there's a problem with sequel light and if we look through here an error occurred while installing this and bundler cannot continue to make sure that the gym install sequel like three of all the law succeeds before bundling so normally 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 tea in here and google it so like right here I might say make sure the gem bla-bla-bla succeeds I might highlight this and click copy and then just head over to Google and paste that in 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 do and people that have gotten that error 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 can see this guy did the same thing he's got all this things installing and then this is not what we need right so okay we can go through and look at all of these and maybe one of them in there will 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 if we scroll up we get even more error messages checking for sequel light so we this dot H thing what is that who knows um here says sequel a three dot H is missing install blah blah blah first it's telling us to download 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 paste that in unable to install 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 oh maybe this isn't the one I don't 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 are no good we want something more current right so I'm gonna keep looking down here see anything so let's say let's do this there we go one for 2019 right so a lot of times this is a lot more work than you'll have to do most times when you copy in your error message the first thing that pops up is going to work but for some reason this particular one takes a little while and so you'll just have to read through until you find the answer but this is only the one we want late one 2019 and we can look through here the guys got the same error codes that we have and you can see right here here's the answer rails tries to automatically install the latest version of sequel Lite three but the new version doesn't work with rails yet so you need to specify an older version in order to 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 you're not quite sure what to do so I'm gonna open up my sequel Lite or my sublime text editor and very quickly show you how to do that so to add all of our new Ruby on Rails stuff to our sublime text just go up to project and we want to add folder to project so now we just head over to our C Drive and we saved all that stuff in that rails test I think yeah 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 to open that directory in sublime so go ahead and click that and then the rails project we created was tester so you just highlight the project don't click through it just highlight it cuz we want to select the folder and when we do well boom all of the Ruby on Rails files that we need show up there so we want to come to the gem file and I'll talk about what the gem file is more later on we see there's this reference right here to sequel i3 and this is what's throwing up an error so instead 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 going to hit ctrl s on my keyboard command s if you're on a Mac to save it or you can 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 we want to change into that directory oops CD tester / there we go so you can see now we're in tester right and let's clear the screen now we want to type the command bundle install this will install that sequel light thing we just put in the gem file it will also make sure everything else is current at them at the moment right so all right fetching all this stuff from rubygems we'll 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 entered a sequel f3 version 1.3 if we look here we're saying install sequel light 3 with a version less than 1.4 and what we got was version 1.3 and now everything will work correctly that error message is 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 we'll create an actual new project in fact that's what that's how we'll confirm that this little fix worked well actually it won't confirm because it'll we'll get that error 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 oops at the time so that'll be cool and 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 okay so let's dive in and get started first thing we need to do is create a new project we're not going to use the tester one like I said and so let's head back to our terminal and we need to 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 type in rails new and let's name this thing and let's call this ozone it doesn't really matter what you call it pop-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 with the project add folder to project and we just want to navigate to our 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 gem file and right away let's just fix this sequel like thing and get rid of that and while I'm here I'm gonna get rid of all these comments I always like to do that starting out 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 our terminal and give this a bundle install to go ahead and fix that oh you know we're still in the C directory we need to change into ozone alright clear the screen now queue it a bundle install and we should be good to go let's run the rails server just to make sure and so we can see our project is running at localhost 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 good to go so I'm not gonna spend a whole lot of time talking about what all these files and folders are 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 basics you'll probably be okay 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 pull up our terminal here I'm gonna close ctrl C 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 our 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 it as popped up so that's cool but we know how we want to change the route we don't want it to be home indexed we want it to just be our localhost URL so head back over to let's see close this out we want config routes here's our route file let's create a 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 to home index and hit reload this page will no longer exist all right we get an error but if we go to our main URL localhost 3000 that page now does exist so alright we've got the framework we've got a web page built 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 let's call this ozone app if we save this come back and hit reload that says ozone app so we've got our framework and in the next video we're going to jump in and install the bootstrap CSS framework so we can start making this page look nicer and that'll be in the next video in this video I wanted to install the bootstrap CSS framework if you're not familiar with bootstrap head over to get bootstrap comm and you can see we're on version 4.3 if it's changed by the time you watch this video you can toggle different versions right there but if we just come up 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 it into our app and it just works of course first we have to install bootstrap and that's what we're gonna do in this video so head over to rubygems.org rubygems.org is the place where you can find gems to add to your project familiar with that let's go to bootstrap that in and here we go four point three point one which corresponds with this guy right up here four point three so go ahead and click this and grab this gem file reference copy it 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 and copy this to this application s CSS file inside of our app assets stylesheet directory so we can head up over here here's app assets stylesheets and you can see we have this application dot CSS file but it wants us to have application dot CSS CSS just different file extensions so instead of that we can do that but I always just call this let's 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 Lee dot CSS CSS so it ends in dot s CSS like the documentation wanted us to I've also put CSS in there it's just a I've always done it this way we can put CSS in this in this file if we want to and we may I'm not I haven't decided yet we have that option by naming it dot CSS and I named it bootstrap Lee the documentation asks us to name it application I don't think we need to do that if 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 alright we've done that now let's see it says we also need to add jQuery rails to our jump file so copy this and back to our gem file right here and paste that in and save it and it says it wants us to add these things to our application j/s file and so we can copy this head back over here in app assets JavaScript application Jas and just come up here and above this require a tree line alright 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 and save that alright so now I think we're done we can head over to actually I'm going to open up a new get bash terminal because we've got the server running in this one and I just want to let the server keep running so let me pull this over real quick resize it all right now we need to change directory in to see ozone okay so now we just need to bundle install to install the jQuery gem as well as the bootstrap gem that we just added to our gem file okay so that looks to be good now you want to head over to your the terminal where you have your rails server running and ctrl C to exit and then run this again it's a good idea to restart your server when you add new gems and especially the the bootstrap because it ties into everything so it's just a good idea to do that and it looks like alright we're ready to go so head back over to our website now take a look at the text write notice the color and the position and the font when I hit reload it should change slightly if bootstrap has been installed correctly boom you can see it's up closer to the screen the font has changed it's 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 our app with a navbar we'll get that from bootstrap and that'll be in the next video okay so we've got bootstrap installed we are ready to go now I want to add a nav bar at the top of this page here all websites have nav bars at the top so let's go ahead and do that head back over to get bootstrap comm click on components and then just scroll down until you see nav bar and I'm just gonna grab the first one 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 a not a new folder we want to create a new file and just paste in all that code we just copied now I'm head over here to file save as and we want to save this as underscore nav bar dot HTML GRB and all web pages end and dot HTML but in rails they also end in dot e RB that allows us to do embedded Ruby on our HTML page which is really really cool go ahead and save 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 HTML and right here above yield we want to create a partial tag and we just have been render and then home slash navbar so this will create a partial it'll put all that code that's in our navbar file that we just created right here it'll output it onto the screen right there and since it's in the application dot HTML file that means it'll be output on every single web page we create now we're not going to 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 everything we have this nav bar at the top now the first thing I always do with a nav bar is change this at the very top line here from nav bar light didn't have Bart dark I just prefer the dark one if you've taken another one of my courses I always always do that so this head back over here and hit reload and boom now it's dark so that's very cool and the next thing I always do is get rid of all 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 look through here for the word disabled and it's gonna be towards the bottom there it is and then just go up and find the Li that wraps around it and when you high when you click on it here that the closing Li tag highlights so you know you can delete that so save this and hit reload just to make sure it works okay next we want to get rid of this drop down thing a same thing just look around till you find the word drop down there it is and then here's the Li 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 hit the li highlight and delete so save that reload okay so we want to change this from nav bar to the name of our website so come up here and I don't know let's call it my ozone it doesn't really matter let's save that alright that's looking better and finally I want to 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 webpage onto the screen so above it I just want to create 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 and 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 VR that's just an 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 a Jumbotron to make it look nicer and we'll do that in the next video okay 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 gray button so head back over to bootstrap and click on buttons and we see the secondary that's the color that I want so we just have to call BTN secondary so head back over to our navbar and then look around for the search thing and here we see search and here's the button class so instead of success we want it to be secondary bootstrap just said all right so head back here and hit reload okay now it looks grey looks a little bit better okay so now I want to play around with this area right here I want to add something called a Jumbotron I think maybe a card this is a card let's go Jumbotron let's look around here there it is Jumbotron and a Jumbotron is just this big box that's sort of gray colored right 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 head back over it hit reload and okay now it says hello world very cool yeah that's looking a little better now I think is we're gonna add our ozone thing right there our ozone readout any text below it I don't know for now let's just go this is the current ozone air quality readout or my neighbor hood and Las Vegas and then down here we can go I don't know I'm just kind of playing right now hit reload in your web browser to update the reading I don't know save this I don't know we could play around with this and we will as as we move forward do we want to change the color of this one for fun might as well so instead of BTM primary we learned we can go secondary I spell that right all right reload boom okay so it's looking good now I think we're pretty much done here layout why is it you know this is a great looking website but we're not going for amazing design here we just want something functional we can get online and and make it look halfway decent I think this looks halfway decent we can play around with this all day I think in the next video we're gonna start to connect to the API or at least talk about it and I'll show you where you can get your API code and all the good stuff and we'll do that in the next video okay so we've got our framework built or a little web app built now I want to talk about the actual data that we're going to be connecting to and using so I use this website airnow gov and you can come here and type in your zip code and it'll 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 pisode 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 to air pollution USG the next one 101 to 150 that's general public is usually okay but people with lung disease older adults and children are great risk from exposure to ozone whereas people with heart and lung disease older adults and children are at a greater risk blah 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 they're they're numbered you can see 201 to 300 151 to 200 101 250 150 51 to 100 and 0 to 15 we'll use those numbers and it's also kind of nice that they have color coding as well we'll also use coal coding in our app so it's a very cool thing I didn't start really looking at it 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 we're in a valley surrounded by mountains and I love to hike in the mountains and the ozone really does affect you especially so high up in the mountains so I begun 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 API this is a government website all government data is usable by the public and this is no exception so head over to Doc's dot air now API dot org 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 API it's completely free it's automatic you just have to fill out this form come to the login page and click request an air now API account and then just fill out this form right so first name last name login name password email address phone and you can leave the comment blank blank agree to their terms and then request an account and immediately they'll send you an API key and we need that key in order to actually access the API and there's some rate limits you can only access so many times per hour but it's high enough to where 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 so that 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 login and when you do 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 API is to choose from and we're going to be using this observations by monitoring site one at least for now and we want to search by zip code you can also search by like longitude and latitude but who knows their own longitude and latitude I sure don't I mean we can 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 you know forecasts and what else do we have stuff in the past historical observations if you want that for some reason like I said that we just want the current ozone number for our reporting area by zip code so we can go to this and go to the documentation and maybe we will here in a second what we really want is the query URL 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 JSON we want this information returned to us as JSON because we can then parse that in our app much better so once you do that click build and now you have this URL and you can you notice it has your API key in it already I might fuzz this out so you can't see my key not a big deal but whatever and so then if you click run 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 it explains what all that stuff is it returns all of this stuff right the date our time zone the reporting area your state latitude longitude parameter name and then here's the thing we want a Qi 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 we don'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 okay so we've got our API key and we got this 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 apps controllers and home controller and this is the controller we created with our generate command a 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 are database stuff views are the web pages and the controllers sort of 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 you are a variable called URL and this is an instance variable since we're in a Ruby methods we put a little @ sign in front of it and put equal to and then some quotation marks and I'm just gonna paste in that API URL 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 first one is we have to require these little programs and the first one is called net HTTP and that does just what it sounds like it goes up onto the Internet to websites HTTP web sites and it collects data now we also need to parse that data once we collect it and bring it back to our app and to do that we use something called a JSON in quotes alright so remember when we click this here it's returning stuff in JSON format which looks like this this is JSON format so we need to be able to parse that JSON format there's a little program that does that called JSON now there's a couple of different ways to sort of install JSON let's 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 JSON 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 rubygems.org and let's just search for json and here it is we can go ahead has 261 million downloads that's probably it so we can 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 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 JSON with native extensions so we should be okay but you could also just type in gem install JSON 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 our URL but now we need to do a couple more things so we've got this URL now we need to actually connect to it and get the information so I'm gonna create another variable called URI URI stands for Uniform Uniform Resource indicator it's a URL type thing and what we need to do here is set our URI to at URL which is this guy so basically we're saying hey turn this into a URI you know for resource indicator I think it just all has to do with this this net HTTP module it's just how it works so now let's create another variable called response and set that equal to net colon colon HTTP which is you know this guy up here ah get now we want to pass in that at URI 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 I'm gonna call it output call it anything you want but here's where we parse the response right so we go json 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 okay so we've got this output that will have our output and we want to put that on our screen so I head back over to our website and 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 app here and hit reload and you can 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 inside of the array arrays are designated with these square brackets say opening and closing square brackets inside of here is a ruby hash and those are designated with the squiggly brackets right so we can see just kind of looking through here so this is the first hash opening squiggly bracket closing squiggly bracket and inside of here there's even more and here's the second one is that it just I kind of went fast in that last one there no here's this second one ends right there and then the third one I guess is this so there's three items in our array so we want this AQI 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 first one but that's not how it rays work the first one in an array is zero so we put zero if we save this and hit reload boom only that stuff will appear and you can notice no swirly or no square brackets anymore so now inside of here you'll notice these things are key value pairs they're all paired up see here's a pair here's the key here's the value here's another pair and these are designated with commas so they're separated by commas so here's a a key hours of observed here's the value here's the key here's the value here's the key here's the value you can see the little hash rocket thing designates key from value so again key value key value key value key value key 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 Qi I'm going to 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 Qi so if we save this and hit reload boom we have 50 oh right which is the number we want which is right well let's hit reload looks like it went down it did not go down oh we've got a different maybe that's a different area code maybe not area code uh what am I looking for distance so let's go 25 build run I is 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 want to ride 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 paste that in right 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 API or something like that so we need to sort of manage for that and we'll start to look at that in the next video okay so we're connecting to the API we're 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 API the API 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 going to do is I'm going to come here to zip code I'm just going to type in a gibberish one and build the URL and then run it and when you do you see it returns these two brackets right so this is like an error well this isn't a bracket this is a a ruby array and it's an empty array so we can actually test to see if the results that are returned are an empty array or not if they're an empty array we'll 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 one two three four five and save this head back over to our app and reload we're gonna get a big angry error 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 paste that thing back in let's do an if statement let's go if at output dot empty question mark 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 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 error now let's go capital error so if it returns empty then this final output will be error and if that's the case when it prints it out on the screen it will print out error right otherwise else it's 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 let's kind of some of this up okay so let's put a little comment here check for empty return result I don't know so let's save this and head back over to our website and hit reload and we're still getting an error because I must not have ctrl s save this file which will s make sure that files saved all right now let's it reload okay so sooo we get this error right now if we come back up here and change our zip code back to 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 for instance 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 if at output well we've create an else if block else if there is no at output again we would say something like error save this come back here and hit reload it works fine if we change this back to [Music] 1 2 3 4 5 and hit reload you get error Oh how else can we flummox this thing nothing at all we get error that snow seems to be working pretty good so just some basic error 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 okay this video we're gonna 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 so that our app works so all right color coding we have this error now website it has these green yellow orange red purple and I don't know 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 to bootstrap 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 okay that's a real easy way to do it but you can see we only have four or five one two three four five six colors basically and we need one two three four five six but we want them 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 and it's pretty easy to do and we can do that and that's what we're going to start to do in this video so head back over to our app assets stylesheets remember we created this bootstrap ly1 we can just put in any kind of CSS we want right here and then we could just call it so let's go I don't know it's called green and then inside of here we just call background - 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 let's see what do we want green yellow orange red purple and maroon I guess purple maroon so green yellow orange red how's that purple and maroon I don't even know what my room is but and then just change these maroon purple red orange and yellow alright 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 now if we save this and head back to our website hit reload boom orange so alright 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 ok 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 wrote this little thing in a notepad here so good is 0 50 there green 0 50 yellow 51 to 100 orange 101 to 150 etc cetera et cetera down the list so now I head back over here one thing we need is let's head back to our code and to our bootstrap Lee CSS let's create another one of these for the error all right so if we if it returns an error we want to change that color too so let's just put that as 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 let's call this the API color okay so I'm going to copy this and save it now if we hit reload here there is no API color yet so this will just default back to gray the regular bootstrap color all right so now we want to probably do this in our controller and what we're doing here is we we 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 going to go ahead and end it so if at final underscore output equals double equal to sign equals error then API color equals gray gray there we go right now we can do multiple tests right so we can go else if and if we go final output now we can start testing against numbers so we can say if it's less than or equal to 50 which is this right here right then at API color equals green all 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 undersquare output is say less than there we go there we go less than or equal to 100 then at API underscore color equals what yellow right okay I think we could just copy this so yellow orange a purple maroon so I'm just gonna come through here and change all of these from green yellow orange red purple and maroon eat that a bit all right so yellow is 51 to 100 orange is 101 to 150 right red is 151 to 200 and I'm just getting these numbers from right here right let's see purple is 201 to 300 and finally maroon is 301 to 500 all right so if we save this so looking through this again it's just a simple if statement right if the final output is error our color will be gray otherwise if it's less than or equal to 50 it'll be green if it's fifty one to a hundred it'll be yellow if it's 101 to 150 it'll be orange if it's 151 to 200 it'll be your red if it's 201 to 300 it'll be purple 3 or 1 to 500 maroon this is just basic Ruby here this is an if else if statement we have multiple conditionals 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 or just on the cusp of moderate a very very close and it seems to be working so let's give it a test one one time here let's come back up here to our zip code and let's put in that gobbledygook save this and return here and run it again and boom well that's dark gray do we like that color I don't know let's head back over to our let's change gray to silver I don't know if that's an actual color get reload that's looking better alright so yeah seems to be working I head back over to our index page now our home controller page and change our zip code back hit reload mmm all right so it's working with it does everything we want now I think it'd 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 okay so I hope you enjoyed this video this is the first half of my build a weather app with Ruby on Rails course you want to see the rest of the course unfortunately you have to pay for it that's one of these deals so there's a couple of different ways you can grab this course the first is to go to my website Kota me calm and scroll down here to the bottom and find the build weather app with Ruby on Rails course go ahead and click it it is $29 you can do that I don't recommend you do that what I do recommend is you go to code me calm and just sign up for total membership now total membership is usually $49 if you click the signup button you can see it's 49 bucks but you can use this coupon code youtube and when you do it Knox $22 off membership so you pay just $27 and you get access to all of my courses I've got I don't know over 40 courses I try to add a new course every couple of weeks and when that happens you get those absolutely free you get access to me you get access to other students you can ask questions interact you get the PDF versions of all my books on my coding book so I mentioned at the beginning of this video I have these I have these two Ruby and Ruby on Rails books if you're interested in this these are each I don't know 27 bucks I think on Amazon if you buy the paper bags you can get the PDF version of both of these and a bunch of other books that I've written for free when you sign up for the total membership so that's very cool I just remember coupon code youtube' you get twenty two dollars off and that's really cool you can come to the main website here at code me calm and just scroll through here and you can just kind of glance and see all the courses that I'm offering we got a ton of Ruby on Rails courses we got a couple of Ruby programming courses if you just want to learn Ruby all kinds of stuff very cool you can click on each of these to read more about them well like I said they're normally 29 bucks each but if you send it for total membership using that coupon code you get them all for twenty seven dollars that's a one-time fee there's no extra charge ever there's a nice not like a yearly fee or a monthly fee or anything you have access to the course for life that's very very cool so check that out if you're interested another way to get the rest of this course is on udemy and if you come to John elder comm /u to me dot PHP this lists all my courses on udemy and if you scroll down here and find that weather app right here you can click on this this will send you over to you to me and you'll get the course at the current lowest price that I can offer and that's probably gonna be somewhere around fifteen dollars that's just how you to meet works they kind of tie my hands as to how low I can put that price so if you just like you to me and you like their format and their way of watching videos and stuff you can check that out there otherwise I would suggest just go over to my coding me website sign up for all my courses for that one low fee over twenty seven bucks you can't even buy a pizza for that these days I also check that out so if that's all for this video if you liked it be sure to smash the like button below subscribe to the channel and check out coding me calm or you can use coupon code youtube to get $22 off memberships a pages $27 to access all my courses hundreds of videos and the PDFs of all my best-selling coding books join over 60,000 students learning to code just like you my name is John elder from coda be calm and we'll see in the next video

Channel: Codemy.com

Views: 7,565

Keywords: Ruby on Rails, ruby on rails tutorial, ruby on rails tutorial for beginners, ruby on rails 2020, ruby programming tutorial, ruby programming examples, ruby programming tutorial for beginners, Ruby Programming, ruby code beginners, ruby coding for beginners, Ruby on Rails Coding

Id: 0mYK8DmTMzE

Length: 91min 55sec (5515 seconds)

Published: Mon Dec 16 2019