Create a weather app from scratch with this SwiftUI Crash Course
HTML-код
- Опубликовано: 7 июл 2024
- Create a simple weather app from scratch with SwiftUI. 🌤
We'll learn how to get the user's current location, get the weather from that location, and display everything in a beautiful UI!
Access the written version of this tutorial and the source files:
➡ Part 1: designcode.io/quick-apps-swif...
➡ Part 2: designcode.io/quick-apps-swif...
➡ Part 3: designcode.io/quick-apps-swif...
🔗 Links mentioned in the video:
➡ OpenWeather website: openweathermap.org/
➡ HTTP Request with async/await: designcode.io/swiftui-advance...
➡ Data from JSON section (for preview data): designcode.io/swiftui-advance...
➡ OpenWeather API endpoint for New York's current weather (replace YOURAPIKEY by your API key): api.openweathermap.org/data/2...
➡ Reverse geocoding the coordinates: developer.apple.com/documenta...
👩🏻💻 Source code on Github:
➡ github.com/stephdiep/WeatherApp
🪄 Join our channel and unlock members-only perks:
➡ / @designcodeteam
👋🏻 Let's connect!
➡ Twitter: / diepsteph
Part 1
0:00 - Introduction
1:17 - Create Xcode project
2:51 - Get the coordinates
13:14 - Test the application
Part 2
14:25 - Get the weather
20:38 - Test the application
21:09 - Prepare the WeatherView
Part 3
24:08 - WeatherView UI
30:21 - Detailed weather information
36:13 - Conclusion
![Skilla Baby - Misfits (Feat. Polo G) [Official Video]](http://i.ytimg.com/vi/IjsylSnNMyw/mqdefault.jpg)
![mgk - I Think I’m OKAY (with YUNGBLUD) (Sad Version) [Official Music Video]](http://i.ytimg.com/vi/7AC1uqQLIg4/mqdefault.jpg)
Thanks Stephanie! I have experience in ObjC and Flutter, so this tutorial gives me all I need to get started in SwiftUI!
Great tutorial. Clear, fast paced and informative. Keep ip the great work look forward to watching other videos from you.
Glad it was helpful!
This gave me a boost in my SwiftUI learning path!
Excellent, I’ll rewatch this again
Thanks for watching until the end!
It took me 6 hours to complete this demo. This tutorial was a great start for my iOS app development. Thank you so much. I learnt a lot, my next step is to learn SwiftUI elements and add more functionality on top of this, like automatically changing metric to imperial and vice versa on the user input. Changing the icons automatically when the weather is hot, humid, cold, sunny, changing the background theme (day, night) based on the timing.
I could make this explanation easier tbf
thanks for kickstarting my iOS dev career...much love❤️
You're welcome, thanks for watching!
Best channel for iOS dev, thank you!
Glad you like it!
Thanks, good pacing and the final result is very polished-looking
Thank you!
Excellent presentation and explanation, thank you!
Glad you enjoyed it!
nice and detailed tutorial. thanks
Thank you so much for the tutorial :))
Fantastic tutorial.
best tutorial to swift !
Thanks Stephanie for this awesome tutorial it was definitely really useful. Keep it up. God bless you.
I'm exhausted! Thanks
third time around, 1st time I just copied your code, app worked. But now I'm trying to understand the coding...
Thanks ,great tutorial.
You're welcome!
You are amazing!
Hello from Montréal 😀 amazing tutorial
It was very helpful thank a lots
Good work 👍
감사합니다.
You can actually use simulator to test the app AND get the location. Just select Features/Location and choose any you want. So it's not mandatory to use your iphone.
Her accent made me stick to the very end. And great tutorial. Thank you
great video
at 12:10 swift does not permit you to write that on separate lines it will have to be a continuation or else you will get an error
Would it be possible to give us a tutorial on how to include unit tests on swiftUI please? It would be great!! 😊🙏
It should give you the option when first creating the project.
I wanted to ask you what method is used in this course, is it MVC, MVVM or something like that...just because I am curious please 🙏
I'm having an unkown error in the do catch part in ContentView (19:57), wherein my program keeps on crashing. It says to see backtrace for more information, but it says that there is an unknown error in the do catch part.
Does anyone know the solution to this problem I'm having?
Good stuff
Thank you!
How do you get the information from the JSON, having difficulty finding it, thank you
Where do I get the response body?
Thank you for this tutorial🙃 how can i make autoreload? For example every 1 hour data reload automatically?
Great job. Obj-C dev here - Swift is much easier.
It sure is!
hey guys! so im stuck on the location manager in the code location = locations.first?.coordinate, it isn’t reading the first location tag and is giving me an error. any suggestions?
The weather logo doesn't change in the WeatherView. For example, even though its cloudy, the logo displays systemName: "sun max".
Yes, that's why in the conclusion I mentioned this as a possible feature to improve the app! :)
- Stephanie
why me getting this error Fatal error: No ObservableObject of type LocationManager found. A View.environmentObject(_:) for LocationManager may be missing as an ancestor of this view.
When I try to connect my phone with mac, the build fails and I get this errror
Signing for "weather" requires a development team. Select a development team in the Signing & Capabilities editor.
in 18:07, were did you get the huge chunk of code?
^
I'm getting a fatal error thread one whenever i try to fetch the data... how do i work around that?
Awesome
Appreciate it!
Where do you get the struct ResponseBody and the others below it in the Weather manager?
Here you go, from the GitHub: github.com/stephdiep/WeatherApp/commit/d0210ed7d4b9775d58d48f6fb842d04b9fd7a1a1
struct ResponseBody: Decodable {
var coord: CoordinatesResponse
var weather: [WeatherResponse]
var main: MainResponse
var name: String
var wind: WindResponse
struct CoordinatesResponse: Decodable {
var lon: Double
var lat: Double
}
struct WeatherResponse: Decodable {
var id: Double
var main: String
var description: String
var icon: String
}
struct MainResponse: Decodable {
var temp: Double
var feels_like: Double
var temp_min: Double
var temp_max: Double
var pressure: Double
var humidity: Double
}
struct WindResponse: Decodable {
var speed: Double
var deg: Double
}
}
extension ResponseBody.MainResponse {
var feelsLike: Double { return feels_like }
var tempMin: Double { return temp_min }
var tempMax: Double { return temp_max }
}
Mam it shows like Thread 1: EXC_BAD_ACCESS(code=2, address=0x7ffee5163ff8) what is the solution ?
if for example I want to replace the coordinates in this code with the coordinates depending on the location how do I do it?
let coordinates = Coordinates(latitude: 12.123456, longitude: 98.987654)
Hi, the code already gets the current location of the user. If you wish to hard-code some coordinates, you'll need to create a CLLocationCoordinate2D (see developer.apple.com/documentation/corelocation/cllocationcoordinate2d).
- Stephanie
where did you get icon folder?
Hello, Stephanie! I'm studying for iOS while watching tutorial videos. I have a question while watching the video. The weather app area is in New York, USA. Can I change it to Seoul, Korea? Or should I use it in New York like a video?
Hi! New York is only the location for the dummy data, but you can change it to whichever location you wish, it doesn't matter! Also, the real data you'll get once you build the app will be the current weather conditions from your physical location. ☺️
- Stephanie
is it possible to give us the assets? would be really helpful
where can I get Jason file ?????
This is my First Programming Tutorial I used to code in javascript but I hate js I am thinking of relearning my coding skill from scratch
Excuse me, I think this is a problem about weatherRow the top and bottom on this design are not on the same line how to fix it
I’m lost on the part about the json file
I'm really confused about the code you can get from the text content to copy and paste. I don't understand where it is.
Hi, it's available on designcode.io:
Part 1: designcode.io/quick-apps-swiftui-weather-app-1
Part 2: designcode.io/quick-apps-swiftui-weather-app-2
Part 3: designcode.io/quick-apps-swiftui-weather-app-1
How can we add a radar?
I keep getting the error "Value of type 'Double' has no member 'roundDouble'" Does anyone have any ideas.
She made extension func for this
How do you find apis and libraries for other apps/ programs
Just do a simple research on Google for the service you're looking for with "API" at the end of your search terms and I'm sure you'll find an API/library for that. Otherwise, there's this list of public APIs hosted on Github: github.com/public-apis/public-apis
Hope that helps!
- Stephanie
Where can i find the assets???
I imported your code from github and it still doesn't work. is anything outdated?
Hi, great work on the App. I'm getting an error in the Content View when I try to load the weather data. The "if weather = weather " code in the Content View code is throwing an error and advising I use boolean
Leaving this answer here in case someone needs it in the future: This is most likely because you haven't yet used the variable weather yet. So the suggestion is that if you are not planning on using the variable, replace it with a boolean conditional instead
Leaving this answer here in case someone needs it in the future: This is most likely because you haven't yet used the variable weather yet. So the suggestion is that if you are not planning on using the variable, replace it with a boolean conditional instead
@@michaelvarghesethomas8878 Hi, you seem to understand quite a lot, I have copied her code word for word but on the weatherView page it can never make the preview as it says that there is a fatalerror in the ModelData? any ideas?
How can I get images just like you?
Do we need to have an iPhone to test if location permission is working or not?
nope, location works fine in emulator
How to get assets?
❤️
🙏
Thank You for the tutorial. I've created the app but I can't see the weather.name in the Weather App in my device - iPhone 11 Pro Max. Its the same case for 11 Pro Max in iOS simulator. But in iOS 13 Simulator I can see it. Any particular reason? Very good tutorial regardless. Thank You!
Hi Tharindu! The weather.name shouldn't be a problem on any device. Just make sure that when you query the data from the API, you get the name in the data you fetched.
- Stephanie
I have the problem too. Always show progressview .I debuged fetched api data,but not show weatherview.
You can simulate location on Simulator, so you don't need the real device.
I'm getting an error saying 'cannot find previewWeather In scope' is there a way to fix it?
Hi! You'll need to add the preview data yourself by adding the load function with dummy JSON data for the weather: ruclips.net/video/X2W9MPjrIbk/видео.html
The Data from JSON section can be found (with the load function) at designcode.io/swiftui-advanced-handbook-data-from-json
- Stephanie
@@DesignCodeTeam great, thank you so much!
can you link where you copied new york weather from ? Very good Video ❤️
Hi!
Just replace the YOUR_API_KEY by your own:
api.openweathermap.org/data/2.5/weather?q=New%20York&appid=YOUR_API_KEY&units=metric
- Stephanie
whats does it mean "manager.delegate = self" - 4 min 56 sec
We need to assign a delegate to our CLLocationManager instance, so we're assigning the class we're in (LocationManager) as its delegate
- Stephanie
I'm having a fatal error that states "Couldn't parse weatherdata.json as ResponseBody" does anybody have any idea on how to fix this error?
Literally going through this problem now as well. Have you checked spelling, not that that solved it for me!
same issue, something is wrong with the way she is parsing that weatherData.json
@@khaleelobrien2277 did you get it?
did you fix it?
When I get to testing the application it fails. Shows nothing but a black screen and gives me and error code. EXC_BAD_ACCESS. I have checked ove the code several times and cant sort the bug.
Hi! Try to Clean Build Folder (Shift + Command + K) and build your application again. Also, you won't be able to get the weather on the Simulator, so make sure to test on an actual device.
- Stephanie
@@DesignCodeTeam I get the same error, even when testing on an actual device. I'm using Xcode 13.2.1 and iOS 15.2. It's occuring on "@main" in the main app swift file (which points to ContentView()).
I tried to run the app on simulator it crashed! Can't we just run it on simulator? it showed me some error in fatalError like Thread1: FatalError
Hi! You're supposed to be able to run it in the Simulator, and see the WelcomeView. However, you can't get the location on the Simulator (it's not a feature supported by the Simulator) and you'll need to test it on an actual device.
- Stephanie
@@DesignCodeTeam Actually you should be able to use the location inside the Simulator as well. Check Features > Location in the Simulator menu, there you can select predefined locations or even use a custom one.
When I archive the project I've Cannot find 'PreviewWeather' in scope
Oh, sorry about that! ModelData.swift should've been moved outside of the Preview Content folder. Then the Archive will succeed 🙂
-Stephanie
@@DesignCodeTeam Greate thanks, And how can I add the forecast weather and some animation ? thanks
Just head over to openweathermap.org/api to learn which endpoint to call to get forecast weather. You can get the 4 days, 16 days or even 30 days forecast with the OpenWeather API. As for the animation, I suggest you to follow Meng's tutorials where he teaches how to make animations with SwiftUI!
- Stephanie
I can't get the decode chunk at 18:05 because its locked behind a paywall. either I'm missing something or that's just shitty
Hi,
You can get it in the source code: github.com/stephdiep/WeatherApp
- Stephanie
best part was you hide your location coordinates .... hahaha
If i use windows, can i do ios apps with swiftUI?
Hi! In the tutorial we're using Xcode, and it's only available on Mac, unfortunately 😕
- Stephanie
You can try cloud services, but it's expensive, some like 100$/month for remote screen access to device, and it's has problems with testing on your iOS device
For some reason the weather is displayed in kelvins
how can get full source code ?
Hi, you can access it here: github.com/stephdiep/WeatherApp
👍
Tell us about your secret resources
Hi! I would say the tutorials about SwiftUI on Design+Code, as it's a big library covering many different concepts related to SwiftUI, as well as Hacking with Swift. Those are the resources I go back to the most!
- Stephanie
i get fatal error "error fetching weather data" any idea why?
I’m also getting this error, were you able to fix it?
@@Owen02_ yes, you need to remove the double quotes when adding the api key in the link and check for any extra spaces added
@@Owen02_ If you get any error. copy paste the code and add "keep the code 100% as it is and fix the errors only" in chatgpt. it will keep the code styling as it is and fix the error for you. Then you can ask what was the error and how it fixed it
@@ShreddderrrWhich quotes specifically? And also Is it the part of the code that’s made in the video at 16:39 ?
@@Owen02_can you copy paste your code
can anyone help me out
Yes İ can help
小姐姐的母语是中文嘛？
this doesn't work - fails at too many levels.
I dont know how to code, i just came because she looked cute
Send #🥺
Thank you so much for the tutorial :))
You're welcome!