Create a Weather App for Android, iOS, Mac & Windows - in 30 MINUTES!

in this video I'm going to show you how to create this gorgeous weather app from scratch and get it running and working on five different platforms iOS Android muck windows we're going to get this working in a web browser as well in 30 mother flipping minutes if you new here my name's Danny I'm an India developer and creator of budget if you want to learn how to create cross-platform apps for the web iOS Android Mac and Windows from a single codebase click subscribe and click the pal so you don't miss anything so let's take a look at this app we're going to build so it's got this beautiful gradient background a nice skyline at the bottom a title search bar and let's find my location boy if we click that then it will find our current location and tell us whether because it's the simulator it thinks I'm in San Francisco right now and if we click into the search bar we can search for a different location and it'll show us the weather there and we can see the location the weather type the temperature a nice icon to represent the weather type and also if it's nighttime in that country it'll show this dark gray background whereas if it's daytime and it'll show this blue background so how is it possible to create this up in 30 minutes well it's made possible with quasar framework an incredible new framework which allows you to create huge is up with a single codebase and deploy it to many different platforms so we can deploy it to a single page application a progressive web app and by the way I have a quasar PWA course coming soon so if you don't want to miss that go to Danny link slash quasar PWA to a server-side rendered up and we can create a hybrid mobile app using card over for both iOS and Android and we can create a desktop app using electron for Mac Windows and Linux we can now even create browser extensions for Chrome Firefox edge and any other chromium browsers and hopefully I'll do a video on that at some point but it also comes with tons of different components such as buttons banners chips carousels dialogues all the different farm components you likely to need and you can just click on this button and grab the code for that component paste it into your app and just start using it it also has tons of different utilities like inbuilt date formats in the ability to store data with local storage and hot reloading which means when you save your work you see the change instantly even if you're developing mobile and desktop apps and it also has platform detection built-in which means that you can for example display a particular element on the on desktop then display a different element only on mobile or you can fire a particular block of code only on mobile a different block of code only on desktop so quasar is probably the most complete robust and versatile framework I've ever used let's get started by creating a new quasar project so you want to go to quasar dev click on get started and then click on install quasar CLI and you want to run one of these commands to install quasar framework you also need to have note installed you can get that node.js org but once you have a quasar installed you can then create a new project with the quasar create command you want to make sure you're in your projects folder and then run quasar create give a name for the folder and I'm going to call this squeezer - whether it's asking us for some options I'm gonna just leave the default project name and the product name I'm going to call it quasar weather product description I'll leave that I'll leave the author and for the CSS I'm gonna choose sass with indented syntax and I'm going to choose auto import which means whenever we use a component in our project space I will pick it up and add that to our project automatically I'm going to disable yes lint I'm gonna enable Axios because we're going to be using that to access the weather API that we're gonna be using the card / ID this is just a unique ID you can use a reverse domain style URL such as comm Danny Connell doc quasar weather and I'm gonna use MPM okay it's finished great in our project we scroll up and the terminal we just need to CD into the folder and run quasar dev I'm just gonna drag it my folder into the S code and then open up the terminal and just run quasar dev and we can now see the basic quasar project running in the browser I'm gonna start by removing the header and the drops this is just going to be like a single page thing so I'm going to go to source layouts main layout doc view and I'm just going to collapse this header and just get rid of that that's the draw and get rid of that I'm not gonna need this essential links component anymore I'll get rid of that I'll just empty out this data objects as well so you don't need any of that now okay save that and we just have our page now so I'm going to open our page which is in pages index dot view and remove this image I'm going to remove this Flex Center class and add a column class so that everything in this page will be stacked they save that and we just have a blank page and I want to add a nice gradient background here so we'll add a style block and I'm using sass so I'm going to change that to suss and I'm going to go to a website called UI gradients calm and I want sort of a bluish gradient background so I'm gonna click on blue scroll down this one looks nice this turquoise flow so I'm gonna click on that I want it to be a gradient from top to bottom so I'm gonna click this rotate button click this get CSS button and grab the bottom line of CSS there and I'm going to assign this to the cue page element which has a class of cue - page and I'll just get rid of this semicolon because we don't need that this sass okay that's looking pretty sweet when I switch chrome into mobile view so we can get this looking code for mobile first okay I'm gonna add the search bar first so the user can search for a location so we're going to need an input so I'm going to jump to the quasar site go to view components found components and input text field scroll down to the standard ones and this one here looks good because I want to have a fine location button over here and then search button over here so I'm gonna grab this and then modify it so that's the fourth from the bottom so on one two three four grab the code for that I'm gonna stick this inside a coal so Dave Cole save that okay so I'm just gonna add some padding around this with gray tiles built-in padding classes so I'm gonna add Q - PT for padding top - LG for a large top padding and then allowed Q - px - m.d for a medium horizontal padded now I'm gonna split up these attributes on the Q input by the way I did that with my own vs code extension which you can find in the store just search for split HTML attributes and you can find it there and also the theme I'm using is the make apps theme you just search for makeups theme then you can find that there as well okay so back to this Q input and a remove the dance prop max length bottom slots and counter because we don't need any of that stuff I'm going to change the label to search we're gonna add a proper dark so this has white text so that's suitable for a dark background prop of borderless let's get rid of this border and I'm gonna change the label to a placeholder cars with the placeholder when you type into the field the placeholder text disappears I prefer it like that and I'm gonna remove this field hints lot because we don't need that and this icon on the left I'm gonna change the name of that to my underscore location so at this location type icon and this icon over here I'm going to change that to search so it has this search icon and you can find all these icons material dot io / tool slash icons I'm gonna change the v-model on this cue input to search and I'm gonna add that date to property to our data down here so we need a data method that returns an object or search in there and empty string to begin with okay so that's the search bar done okay so I'm going to add somewhere to display our location weather type temperature so when it collapses div with the search bar will add a new call give this a class of text right and a class of text center so we have white centered text in there I'm going to add another div with a class of text page four and text weight like to give it a nice light font I'm just going to stick Manchester in there looks pretty good and I'm gonna add another div for the weather description I want this to be a bit smaller so I'll give it a class of Tex h6 and again text weight light and I'll just put rain in there for now I'll add another div for the temperature and I want this to be quite big so I'm going to add a class of text h1 and this time I'm going to use a lighter font so I'm going to use text weight then and I'll just put eight and a degree symbol in there for now I'm gonna add a bit of vertical March into this temperature so I'm going to add Q - my for vertical margin - LG for large I don't want this degree symbol to be smaller than this number eight here so I'm gonna split the eight and the degree symbol up and surround them in span tags I'm going to make this degree simple smaller by adding a class of text h4 but this is pushed right down to the bottom here so so that I can position that degree symbol I'm going to add a class of relative position to this parent element which will just set position to relative and I'll add that class to the degree span as well so relative position and let's add some are we also need a class for that degree so so that we can target it for Styles a lot of class of degree and we'll set the top on that too let's try minus 40 pixels maybe a little bit more so minus 40 4 pixels okay that's looking pretty good okay so we need somewhere to show the icon that represents the weather such as the rain icon and I'm just gonna stick a placeholder image there for now so I'm gonna collapse this Col we've created with all this texts you can add another car also with a class of text center we stick an image in there and I'm just going to use a placeholder image for now so I'll use film Laurie for this so I'll just add to be wwe.com slash 100/100 so we get a placeholder image which is 100 pixels by 100 pixels just put bill in the alt attribute we want to add that skyline image so I'm gonna jump to site called pixabay.com and I'm going to search for a town silhouette I'm gonna set the image type to illustrations I'm gonna try and find a nice town silhouette image okay this one looks good so I'm going to click on that click download and I'm gonna drag this into my statics folder and I'll rename that to skyline dot PNG I'll jump back to our page collapses dip with the image in it and we'll add a new div with a class of Carl and a class of skyline we'll add some styles to add this skyline images of background image to that dot skyline so I'm going to flex property and set that to zero zero because I don't want it to shrink or grow and then 100 pixels because I want this div to be 100 pixels high then we're gonna set this skyline image is the background image so background:url dot dot slash statics slash skyline PNG then I'm gonna set the background size to contain so that this image is contained within that div then I'm gonna set background position to center button let's see how that's looking yeah pretty sweet if you found this video useful so far make sure you smash the like button and leave a comment tell me what you're doing with quasar okay so lets up the Start screen now so later on we're going to be grabbing some weather data from the open weather map API and then sticking that in a variable and we'll call that variable weather data now if there's no data in there so we'll set it to null initially if there's no data in there then we want to display our Start screen otherwise we want to display this weather information so these two coals here which have this weather information I'm going to surround those in a template tag I'm going to add a V TIF to this template be if where the data now if I save that we could see the weather information disappears if we put something in this weather data variable just say true and we can see the weather data so I'll set that back to null and then I'll add another template after this one with AV else directive so if we're not displaying the weather data we're going to display this and we'll put our Start screen in here so a lot of div with a class of cold class of column so everything is stucked in here class of Tech Center and a class of text white and a lot of dip for our headed so I'll give that a class of Col class of text h2 and a class of text weight thin and I'll just put quasar and then a break and then weather say that and then I'm going to find my location button underneath that so I'm gonna talk to the quasar site go to view components buttons button and I'm gonna use a button like this with a nice big icon and a label so I'm gonna click view source grab the code for that button and I'll paste it underneath this heading so I'll save that and I'm going to remove this teal color and we're at a class of Cole so that this stretches vertically and a lot of proper flat to this button to get rid of this 3d effect we just have a nice flat button then I'm gonna change the icon by changing this name prop to my location so same icon we using up here and I'll change the label to find my location okay that's looking pretty good let's get the user's location now if they click either this book and all this icon up here so I'm gonna add a click handler to both of these so how to click color to this icon this icon here split the attributes on that start a click Handler and we'll call a method called get location and then I'll find this button down here which is here split the attributes on that all right again click get location and we need to add this method so an out of methods object and add the get location method I'll just log out get location for now to make sure these buttons are working yeah so it works if we click this button and it works if we click this icon as well and now to get the users current position we can call navigator dot geo location dot get current position and this will return a position object for now we'll just log out this position variable so I'll clear the console click this button and we can now see this position object in the console and if we go into quads and we have the latitude and the longitude so I'll set up some data properties in our data to store these sort of lat so that's an all initially and lon set that to naught and then back in this get location method once we've got this position object we can grab the latitude and longitude and put them into these variables so we'll just do this dot that equals position quads dot latitude and then we'll do this dot 1 equals position dot quads dot longitude save that and we'll just check this is working by going to view dev tools and go to page index and we can see the lat Vaughn they're set to north if we click the button we get the position object it's not updated bullets to click off that and click back onto page index and we can see the Latin log in there so we can now use these coordinates to get our weather data using the open weather map API ok so once we've got our coordinates we want to trigger another method to grab the data from the open web map API so I want to trigger a method here called get whether by chords and I'll create that method here yet whether my quads we're going to be using the open weather map API so we want to go to open weather app dog slash API now this is current weather data API is free as long as you're not using more than sixty calls them in it you do need an API key but if you just click on sign up and follow the steps you'll receive your API key but once you're signed up you can just click on sign-in API keys and you can see your API key there so I'm going to copy that for later and then if we go to API and then API doc for the current weather data API and if we scroll down to by geographic coordinates tells us how to use this API here so we have an example API call here so I'm going to click that and open it in another tab and you can see it has a name for the location and the weather type and temperature and all sorts of stuff so I'm just going to copy this link and in our get weather microwatts method we're going to use Axios to reach out to that URL and I'll put this in backtick so we can interpolate our latitude and longitude and stuff we need to change this samples bit to API and I'm gonna copy the API URL up to before this question mark and put that in its own data property so I'll call that API URL paste that in there and then I'll interpolate that like this this dot API URL and we'll stick our latitude and longitude in there as well so I'll get rid of that 35 this doclet and I'll do the same for the longitude value there so this dot one I need to put my API key in there so I'll put that in its own variable so API key and that's in my clipboard so I'll paste that in there and we'll replace that down here so API K and by default the measurements we get are in imperial and I want them to be metric so we can just add another query parameter just add and units equals metric to make sure that we get metric results and this will return a promise or ladder then block will just log out the response for now save that go back to the app clear the console and click button says API key is not defined because I didn't put this at the start of the API key there so save that and clear the console and try again okay we can see the response from the API if we go into data and we can see all our weather API here so I can see my current location current temperature and all sorts of other stuff so once we've got all this data then we want to stick it in this weather data property here so I'm just gonna get rid of that console log and do this stop where the data equals response data save that and we'll just check that's working with the view dev tools so I'll click on find my location you can see it's now just playing the weather page and if we go into view dev tools and inside the weather data property we now have all this weather data so we can now use all this data to update our display here let's display all this weather data on our page now so I'm gonna find this title where it says Manchester at the moment which is here let's get the name of the location that's just going to be in weatherdata dot name so I'll change this to double curly braces then weather data dot name say that we can see that update and then the weather description maybe that's in Maine No maybe it's in this weather array okay there we go so that's in start the double curly braces that's gonna be in weather data darts weather and then first item in the array dot Maine save that and now so it's clouds there now it's fine the temperature so that's in weather data dot Maine dot temp so that's here weather data dot Maine dot temp alright doesn't look too good with the decimal place let's round that up so I'll just have math dot round around this variable say that yes better and for the image if we go back to the weather API page I'll just search for conditions we have a list of weather condition codes with icons so I'll just drag this image here into a new tab and copy the URL for that where's this image it's in here just get rid of that alt we want to buy into this source attribute and add backticks in there and I'll just paste that URL in there for now save that make sure that's appearing on the page and to get the correct icon we can just replace this bit here with the appropriate weather code so let's find that weather code in our data here in this weather array again here here's the icon code there so basically instead of this zero one D bit we can just spit out whether data dot whether first item in the array and then dot icon save that I mean I'll see the correct icon I've just realized we're not just playing the Celsius symbol here next to the degree symbol so and just find that degree symbol and I'll just stick the letter C next to that that's a bit better okay so we want to be able to search for a place as well if we enter say a city name in here and click on the search icon or hit enter so I'm going to find this queue input which is here and I'll had a key up dot enter handler which will be triggered every time we hit the enter key when were in that field and will trigger a method called get weather by search and we also want to trigger that method if we click this search button so I'll split the attributes on that add a click handler calling the same method get weather by search now we need to add that method and it's going to be pretty similar to this one so I'm just going to duplicate this get whether by quads and I'll rename that to get weather by search I'll just comment out this code here for now and just log out get weather by search to make sure our handlers are working so if I type something hit enter yeah we see get weather by search or if I click this button get weather by search ok so now if we jump back to the open weather map API go back to the API page I'll just search for search ok so two five weather by city name we just need to add a cube parameter to our query string and put the city name in there so I'm going to jump back to this get weather by search method I'm going to remove lat and lon [Music] but we need to leave the API key and the units metric bit so we just want to set Q equal to our search field which is just called search so we'll just interpolate that this dot search the response is going to be the same so again we just want to set where the data to response data so let's see if that's working so I'll search for New York okay looks like the weather in New York is the same as here let's try London let's try and find somewhere that's sunny let's try Cyprus there we go so I want to have a different background color depending on whether it's day or night time in the place that we're looking at and if we look at our weather data we can determine whether it's like our day from the icon code this icon code that we use to display this icon if it's daytime than this icon will end in a day if it's nighttime it'll end in an N so I'm gonna first of all buy into the class property on the queue page I will bind to a computed property called Fiji class and I'll create that computed property so we need a computed object and I'll stick that VG class computed property first of all we want to check if there's something in weather data so this doesn't error so if this dot weather data and then we can do if this dot weather data dot weather first item in the array dot icon ends with we can use the ends width method that ends with and then we're going to return BG night otherwise we're going to return BG day so I'll save that let's see if those classes are working so if I look for the weather here let me see the class BG day has been added but if you look for the weather in let's say Sydney I think it would be nighttime there yeah BCBG night and I've already grabbed some gradients from UI gradients calm and they're in my clipboard so just gotta jump down to Q page in the Style section so if the Q page has a class of BG night I'm gonna spit out this background and if it has a class of BG day I'm gonna spit out this other background so I'll save that and we can see the nighttime background in Sydney if we click on the find location button and we see the daytime background okay let's have some loading screens to this because sometimes it might take a while to grab the users location or to grab data from the API so we need to install the loading plug-in first so we need to open quasar conscious in the route research for plugins I'm just gonna up the loading plug-in basically I want to show a loading screen whenever the user tries to get their location so the top of the get location method and we're gonna add this dot dot like you loading show we want to trigger it on these methods as well so this dot dot Q dot loading dot show just copy that paste that here get rid of that console.log we also want to hide this loading screen whenever we get a successful response so inside the then blocks I like this dot dot Q loading dock hide I like that here as well so save that see if it's working so if I click find my location we see the loading screen the loading screen disappears let's try this search as well New York City we did briefly see the loading screen appear so the app is basically working for the web now let's create the map version of this up so if you're on a Mac this is really simple you can just close our dev process and run quasar dev - and electron and we can now see the Mac version of our app running in dev mode and we have a window with our developer tools as well for debugging so let's see if this is working click on find my location and it doesn't seem to be working and this is because the geolocation API doesn't work in electron Apps but we're going to implement a fallback just for electron apps so if we go to three geoip dot app we click on the Jason link then we can see some approximate latitude and longitude in this JSON object so we're going to use this as a fallback for electron apps so if I jump to the get location method after we show the loading screen I'm gonna add an if-else statement so if this dollar cube platform dot is dot electron so if it's an electron up then we're gonna grab data from this free geoip otherwise we'll use the geolocation API so I'll move that up into the else statement then in the if statement will use Axios to call this URL so this dot dollar Axios get then I'll paste in that URL and then a lot of then block with a response and so the latitude will be at response data dot latitude and the longitude the same this dot that equals response dot data dot attitude and then this dot lon equals response dot data table longitude and then we want to trigger the get whether by quartz method again so let's save that I can't find my location and it's not working so let's check the search is working yeah that seems to be working I'm just going to reduce the width and height of this window so if we go into our project we have this new folder source electron if we go in there then main process then electron main is there we could do all sorts of stuff here I'm just going to set the width and height to 450 by 700 save that and it should reload yeah that looks a bit better okay let's create the Windows version of our app now if you're working on a Mac this does require a bit of setup you need to set up a virtual machine with something like VirtualBox but what I'm going to do is I'm going to build the Windows version and then launch that on my virtual machine so we need to go to the quasar config file and search for electron and in this package of section we need to add platform win32 so this builds the Windows version and not the Mac version I'm just going to close the dev process and this time we run quasar build - M electron to build the Windows version okay let's finish building now and it tells us its output it to raise our weather / dist / electron so we have this dist folder now and then an electron folder then we have our quasar weather we could see the quasar weather react see there so I'm going to jump to my virtual machine now and I have my Mac dev folder shared with this machine so we can see my quasar weather folder there I'll jump in there dist electron great our weather then we can just launch this exe let's see if it works okay that seems to start it up you can see it's using the same dimensions as the mock-up so let's see if it works click on find my location yep that's working let's try searching for somewhere yeah all seems to be working I see this running on iOS now for that we can just run quasar dev - M iOS and you do need to have Xcode installed for this to work and we can now see our app running on iOS looks pretty good ok let's see if it's working I'll click on find my location and it's not working that's because we need to install the geolocation card / plugin so I'm gonna jump to my browser and search for Cordova geolocation I'll go to the Cordova plugins geolocation on the card / site scroll down tells us how to install it we can just run quasar plug-in add Cordova plug-in geolocation but before we do that we need to go into this source Cordova folder so I'm going to close that process CD into source Cordova and then run that command to install the plug-in ok that's installed but if we scroll down to iOS quirks we also need to add this bit of code to our Cordova config file that's just in the root of source code over and it's this config dot XML so I'm going to scroll down to the iOS bit paste that bit of code in there save that CD back up to our project folder and run quasar dev - and iOS again ok let's see if it's working now find my location is not working let's see if search is working New York yeah all seems to be working now I see this running on Android now now for this you do need to have Android studio installed and you need to have Android virtual device settle and I do explain how to do all that in my full course well I'm just going to go to Android studio then configure and then AVD manager Android virtual device manager then I'm going to launch this pixel device I've created here you can see our Android virtual device is now running so to get our app running on this we can just run quasar dev - M Android okay our app is now running on the Android simulator see if it's working okay find my location doesn't seem to be working and we can expect our up using Chrome to find out what's going on so I'm going to jump back to Chrome move it over here and if we go to crawl : / / inspect / hash devices then we can see our up here if we click on inspect then we have dev tools for this app and we can see this warning here get current position and watch position no longer work on insecure origins to use this feature you should switch to a secure origin such as HTTPS this is only happening because we're running the up in dev mode and it's loading the up from a local HTTP server not HTTP server but if we built this for production this wouldn't happen well - just fix this for now in dev mode we can jump back to our quasar compa is and I'm just going to search for dev server in here we can just set this HTTP to true let's try that save that and it's reloaded are up automatically let's see if that's working now okay still not working so it turns out that I couldn't get your location to work on the cue version of Android which I think is the latest so I downgraded this led to use oreo instead and it now seems to be working so let's give it another go click on find my location and it's now working now these images aren't working because they're being served over HTTP and not HTTP so we can fix that by just changing the URL of the images to HTTPS so the image is there so I'll just change that to HTTPS and we now see the correct image possibilities with quasar framework are absolutely insane I mean you can create your app once with a single codebase and publish it to the web and all these different app stores you could monetize your app with ads and in-app purchases on all these different platforms when you need to fix a book you just fix it once and redeploy to all the platforms when you need to add a feature you just add it once and redeploy again so for me as an indie app dev quasars the best thing that's happened with web technologies in a long time now this isn't a real-world app it doesn't have a back-end users can't log in or register doesn't have a settings page or error handling or foreign validation or anything like that but if you want to go deep with quasar I have a udemy course in which I teach how to create real world apps with quasar UJS view X and firebase along with all the things that real apps need like user authentication six pages file validation error handling real-time data sync across devices and much more by the end of this course you'll be able to take your own idea create a real-world app from it and publish it to the web and all the different up stores the course is packed with fifteen hours of content assignments a supercharge your learning and it has over a thousand students who are so happy with the course that it's now the highest rated course on udemy in the VJ s category so if that sounds interesting and you want to check out the first 23 videos for free click the link at the top of the description you

Channel: Make Apps with Danny

Views: 22,439

Keywords: create an app, how to create an app, create an app for android, how to create an app for android, how to create an app for ios, app tutorial ios, make an app in 30 minutes, how to create a mac app, android ios development, how to create an app for windows, electron tutorial, create an app in 30 minutes, quasar framework, create an app for beginners, cross platform app development for beginners, create a hybrid app, how to create a cross platform app, vuejs, weather app, weather

Id: kWRpEcv2nu8

Length: 39min 47sec (2387 seconds)

Published: Wed May 20 2020