Ionic 3 Mobile Weather App Build 

What do you guys think of doing this same project in React Native? Let's get to 1,000 likes and Ill do it :)

Brad is the real deal. Probably one of the few teachers out there who I feel like paying to watch and learn their stuff.

Fantastic video. To the point, let the code do the explaining, build a real application, and showed how to deploy. The hero we wanted and deserved. Great videos keep them up!

Thank you for making these videos, Brad. My college classes suck, but I know I can always learn a lot here.

every cases in my head have been solved in every videos which you explain in every tutorial. Thanks man, God bless you!

The Angular documentation recommends doing async calls not in the constructor, but in the first lifecycle method following it in ngOnInit or I'm guessing for Ionic ionViewWillEnter since it is closest related lifecycle method. It makes it much easier for testing purposes is the general idea, but both will work. Got to get in on that async/await instead of then also haha. As always awesome tutorial. It got be up and running with my new project.

I thought that after DevTips was over, that was all for me in youtube...but since i've found your channel...I get back to life! cheers mate, thk you so much..you're gonna make me get a new job :)

Thank you Traversy Media. I watch your videos with curiosity and interest...And i'm making. You have a fluent and understandable expression.

Congratulations Brad..!! you now have 150.000 + subscribers ... you have Great content and very easy teaching..

Hey, you can't imagine how much u helped me now. I have a ionic project to develop and it's a simple app consuming some existem apis. Thank you so much for this!!!

If you are using Angular 5 and having res.json() is not a function error; you can just use res => res(be sure response is json in other weather api websites.)

Absolutely the very best Ionic course in existence (and I've looked through all of them). This is even better than the official docs on IonicFramework.com. Once Ionic 4 is stable and released to the public, if you create a Udemy course for it that goes into extensive detail and teaches by making 5, 10, 15 different apps, I'd pay top-dollar for that course for sure.

Great initiator for me Brad, bunch of thanks for comprehensive step-by-step details

Awesome tutorial, I watched during the day, did an all-nighter and reproduced it. Because I already do angular though 😊

5am for me right now so I’ll go check this out when I’m fully awake lol! Seems promising though, thanks!

I think the Angular Ionic framework has been updated since this was released. . I love your work!

Great video. Just want to add that you don't actually have to import the settings page and add it to the declarations/entryComponents. Just refer to it as 'SettingsPage' (with the ' ') instead of SettingsPage, and it'll still work.

Helped me to understand Ionic. This was my first time in hybrid app and I actually understood lot of stuffs. I hope I would be expert in this like I am in Android. Enjoyed your video. Great content!!

thank you so much man . you are my hero in coding and i have followed you step by step and finally got my Iweather app

Wow, this is by far the best Ionic 3 training video I've seen so far, thanks!

For anyone wondering, around 36:40 that we are updating the app.module.ts to contain the httpModule the code now should be: import { HttpClientModule } from '@angular/common/http'; instead of import { HttpModule } from '@angular/http'; and down in the @NgModule imports accordingly: imports: [ BrowserModule, HttpClientModule, IonicModule.forRoot(MyApp) ]

Great video! Thanks for making it easy to follow. So many people make videos in which they cut and paste and then say, "See, it's that simple." You walked through each step, explaining along the way. Good job! I strayed from your example a little. I created a Location class with a constructor which compressed the setting of city and state to one line. export class Location { city: string; state: string; constructor(c: string, s: string) { this.city = c; this.state = s; } }

Dude I flipping love your videos! I've bought 3 of your courses on Udemy and looking to get your newest one soon, keep up the good work

Why my toolbar and tabs doesn't change the colors ? I coded what you code in variable.scss . Maybe should i declare a variable where those toolbar and tabs place ? sorry for asking I'm just starting using Ionic for my Thesis project .. and this video really helps me .. My app was a Math Tutorial, Please ! Thank you.

Use $tabs-md-tab-color-inactive: color($colors, dark); (for 26:10)

Whoo, that new (or is it old) intro screen looks polished as hell!

Dude. you are just rocking it. Great work. Great attitude. Love to see your videos.

Great job on the video! My instructor recommended this video to learn to help build apps.

If someone is having problems with .map you just need to import the map operator by pasting: import 'rxjs/add/operator/map'; on top of your code. check out line 3 in the video

Thank you Brad. It was nice tutorial to get overview and basics of Ionic.

Great video. Built the app alongside the video and everything went really well! Thank you so much for doing this project. I wrote this in 2018, with the latest version of ionic, so there are a few changes that need to be made for anyone who is just finding this now. - The API is deprecated, and now must be purchased, so i used openweathermap.org instead. Process is very similar, just different structure of JSON object returned; - The HttpModule is deprecated, and has been replaced by HttpClientModule, so import "import { HttpClientModule } from '@ionic/storage';" instead of whats in the video. (and add "HttpClientModule" to the imports array) Thanks again!

Recently started watching your videos Brad, they are amazing. Thank you for all the great content. Could you please do more videos on Ionic in the future? Thanks again.

Brad great tutorial, as always. Would you ever consider doing a tutorial on how to build a Web Developer Portfolio from scratch? I have looked on You Tube, Udemy, various platforms, and there are no tutorials on building a great portfolio from scratch. I'm sure you would make an excellent, and comprehensive Tutorial for all aspiring Web Developers.

Thanks for the video! By the way, in VS Code, you can duplicate a line of code with Ctrl-C Ctrl-V at the end.

Amazing job @TraversyMedia! I definitely learned so much from this tutorial. Thanks a bunch and keep up the great work!

Is it weird to love this man

great, if u are with angular 5, you should import { HttpClientModule } from '@angular/common/http'; not httpModule :D

Very nice tutorial thank you. ...my Bro. .. I have question my dear I'm start learning ionic and react-netive little little. ..which one good for me create the mobile app. . Ionic or react-netive ..... thank You

at around 30:20 you ponder why ionic doesn't add page to the app module but it does add the providers. the reason is the ionic lazy loading page system. when generation a page it creates a page module for that page and add's a decorator to the page component.

Thanks for great job! Bought your courses recently. Superb content

If you're getting an error at the part that starts at 36:30 try { HttpClientModule } from '@angular/common/http'; instead (and remember to put HttpClientModule in your imports)

Thanks for your hard work Brad, recently purchased one of your udemy courses too. I can tell that you put a lot of work into your videos :)

Hi Brad, Ref the icon color, just put: $tabs-md-tab-icon-color: color($colors, light); into the variables file... Dave

God bless you man for all this hard work. very very goood job. regards from Costa Rica, pura vida!

Traversy, how do you learn so fast wow man!! 😎 I am just starting to learn... Wow inspiration!!! 😎

Great and useful video tutorial, thanks Brad. Can I suggest adding a part 2 with ability to get current location of user?

This is my favourite channel on RU-vid

1000x better and simpler than college class

Great video. Can’t wait to try it out!

Hi, this video is great, i love it. but while trying to follow the steps, i was unable to change the color of the header which i think is because of the upgrade of ionic 3. the content in my variable.scss is different from yours and when i try to run the code in the video to change the header color no changes. please help me through. or if there can be a new video for the same app using the latest ionic 3

Very nice video! I just got the app not rendering after the saveForm() function got created and even though I deleted it and delete the HomePage import and try to get it to the last working state, I couldn't. Anyways that's an excellent video tutorial to keep us going on Angular and Ionic frameworks. Really nice!

Great stuff. Did you get to test it on a device, if so what's your opinion regarding performance? If you're building the same app on react-native it would be nice if you could compare the end results on a device. Keep up the great work!

Great video...Saw your visual studio video with visual studio community 2017 installation so are you using the same or its just visual studio code...

@Traversy Media, this was sick. Keep em comin.

Thanks so much man! Please do more mobile apps!

Thanks man, you're a explanation is simple and easily followed

Why don't you put space before curly bracket `{` and after colon `:` in SCSS ? However other things are great.

Thank you so much for this video. I watched it three times and enjoyed every second of it.

Is there a reason at 27:40 why the homepage is styled in the app.scss folder rather than in the homepage's personal scss folder?

What's the difference between "$tabs-background" and "$tabs-md-background"? I used both and got the same results. I ask because if I'm working by myself, I want to know when to choose which.

Congrats !This project can build on ionic 4.6 ? Tks !

Hey Brad, thanks for another amazing tutorial! What do you think of doing an AWS tutorial? Maybe a series? =D

Hello Sir Thank You for this tutorial...Sir want to ask which plugin can be used in creating an ionic app for deleting temporary files.?

Watched it, Built it! :P Thank you Travery Media

Great video, Brad. Thanks for putting this together.

$list-md-tab-color-inactive will change the color of the inactive icons, Brad. Thanks for the video!

Any idea ? Using Angular 5 and having the following: "Property 'subscribe' does not exist on type 'Observable'. Did you mean 'subscribeOn'?"

Great video! How should you modify the constructor to include the API key in the header for the GET request?

can i go through this video as a newbie in ionic..it will be my first ionic video i will watch...

No more free api key for wunderground weather. What to do now?

About 25:30 $toolbar-background: color($colors, primary); $tabs-background: color($colors, primary); $tabs-tab-color-active: color($colors, light);

wonderful tutorial please make more apps from scratch tutorials

this local storage thing is cache in the browser right ??? so if we clear cache the storage also gets deleted ?

Please help me! My setting page is not working properly. The newly updated city and state is not getting updated and also page is not going to home page after it, as it should be.

Cool, I've been waiting for this. Currently studying your angular video in udemy, it help me alot. Willing to buy your ionic 3 video on udemy :)

Learnt a lot, do a Flutter vid tutorial, its the future of mobile development and uses Dart(which has a syntax similar to Java & JavaScript partially combined)

What type of keyboard are u using? sounds lovely

Great tutorial. I would be great if you made a full fledge course on the latest ionic. I would definitely buy it ;-)

I got this error, ...."No cities match your search query" type : "querynotfound"... may you suggest me where to look??

Brad, you are amazing... i love all your videos, keep it up

How can you change the toolbar text color?

Dear Traves, can update this video to latest ionic and angular , since ,most of us getting errors due to updated angular and ionic. (ionic 3.9.2 ) (angular 5.2.9)

awesome video :) however i am currently facing an issue where the content (weather data) in the home tab arent showing at all although i did exactly everything the same, yet still facing the issue... can someone help me here please

where do i find the free weather API keys ?? @Traversy Media, can you plz suggest me ?

Hi Traversy and Everyone, Great content! I'm an ionic developer but I get stuck on creating a solid Ionic 2/3 workflow for quality product development especially when working on teams and we creating an Ionic app. Do you have any workflow suggestions? For example, at the movement, my workflow is Jtest for unit testing, Airbnb ESLint style, and on our repo we have a Docker container that runs test and builds before we can merge to the production branch but I'm still not sure if this is rock solid because we don't sign the apk file on that is build on the cloud, anyway I just wanna hear your suggestions on a solid workflow for production app for ionic applications

Great tutorial, thanks a lot Brad.

love this stuff - going to buy some of your courses now

Hey would you be able to create a tutorial about creating an app with ionic and reactjs with great UI like on flutter

Would anyone have a link to the code? . I got to 50 minutes and lost the project folder back in February.

Hi, can't import map from 'rxjs/add/operator/map' is there any other way? I'm using the latest version of Ionic and angular

I have an error(Emulator: emulator: ERROR: Unknown AVD name [Nexus_5X_API_24], use -list-avds to see valid list.) when i try to launch the Emulator. Why it isn't correct name?

Do you have any complete course on IONIC with Firebase on UDEMY?

Im getting an error when targeting the weather.response (or other attribute of the object) variable in the template home.html. weather seems to be undefined when the app try to get data. need help

Thank you! Great course! Simple and useful

Just excellent as always....

Wunderground is not providing free keys anymore, any alternate for key?

Awesome video. Having trouble with the DEVAPP install that runs automatically. it's saying: [ERROR] An error occurred while running npm i (exit code 1): then tries to install node-sass@4.5.3 and node scripts/install.js any ideas what this error is about?

Finally I was waiting for this for months

thank so much Traversy Media!

For those who having issues displaying the object, try this: Instead of: weather.display_location.full, Try: weather.current_observation.display_location.full