Wildsparrow`s Weather App (March 2021 Challenge) Journal

This will be my first app (besides the apps from the free CwC beginner courses)

Must Haves

  • Current city
  • Current temperature, current feel-like temperature (being able to switch between °C and °F)
  • Current weather (icon or similar)
  • Temperature forecast (12 hours)

Nice-To-Haves

  • Different cities
  • Current location (GPS)
  • 3-day forecast (if possible with weather API)

Super-nice-to-have

  • Sound for current weather (thunder, rain, “sun” sound, and similar)
  • Landscape mode
  • Credits page

Structure
One page, portrait mode

  • Top left: City (Arrows to switch between cities) (City selector)
  • Top Right: 3-day forecast (temperature and weather icons)
  • Middle: Current temperature, feel-like temperature (Toggle to switch from °C to °F)
  • Bottom: 12 hour forecast for temperatures (nice-to-have: Link to credits (picture source))
  • Background image: Weather type (sunny, cloudy, raining, cloudless night and similar)

Project Plan and Milestones

  • Obtain assets (background images) :white_check_mark:
  • Define SF images/icons (for 3-day forecast, 12 hour forecast) :white_check_mark:
  • Obtain weather API (openweathermap) :white_check_mark:
  • Define layout (no variables, hard-coded “sample”) :white_check_mark:

Milestone 1 completed (get an energy drink) :white_check_mark:

  • Make variable data as variables: Current weather (background), 12 hour forecast, 3 day forecast (nice-to-have) :white_check_mark:

Milestone 2 completed (get an energy drink) :white_check_mark:

  • Make variable data as variables: Current city, city selector :white_check_mark:
  • Make variable data as variables: City selection by GPS :x:
  • Create video for showcase/reel :white_check_mark:

Milestone 3 completed (get an energy drink) :x:

  • If not yet completed: 3 day forecast :white_check_mark:
  • Credits page :x:
  • Add sound effects to current weather :x:
  • Make a landscape mode possible :x:
  • Update video for showcase/reel :x:

Milestone 4 completed (get an energy drink) :x:

2 Likes

So, the layout (needs some polishing for the font size, gray boxes etc) is done, but I have a strange behavior in the app:

My thinking is to have the different “parts” of the app in separate views:
image
They all come together in the ContentView.

But some views are not displayed correctly, so the hourforecast scrollable list view can be dragged correctly in its own view, but in the ContentView, is is aligned to the right (you see item 1 on the right, but you should see item12 on the left), and it always bounces back when I try to scroll in this view. Also, the top Text in the VStack is not shown in the ContentView.
Similar strange behavior can be seen in the currentTemperature view: There I have some text and a toggle, but this text is not displayed in the contentview. If I delete the toggle and its text and replace it by a simple text item, this text is also displayed in the contentview.

So, this view stuff is something I have to look into again. I keep you updated :slight_smile:

CurrentTemperature:

Hourlyforecast:

ContentView:

3 Likes

Wow, that was quick. This is looking good. I like the clouds in the background.

  • Are you planning on having the image change depending on conditions?
  • How many images do you plan to have?
  • Where are you finding the images?
1 Like

Yes, the images will change based on the current weather and time of the location which is displayed. I have pictures for cloudy, rainy, sunny weather, snowfall and thunderstorms. Except for the thunderstorms, I have pictures for daytime and nighttime. They are all free from unsplash.com

1 Like

Just the aspect ratio was missing for my toggle switch to appear … (see picture below)
Still, the scrollview is not showing as it should be.
I will figure that out. If not, I’ll put in two rows, each showing the temperature for the next 6 hours.

Next step: Link the actual weather data to the variable fields. Pretty sure that will take sooooome time to figure out, where to store the data and how to retrieve this data in the views. Also, the actual data needs to be pulled at app start and whenever the user changes something (i.e. select another city). As I work full time, I will not have an update before Wednesday.

Nice bro… you making some good progress

1 Like

Just a quick update.
I managed to pass the data between the views. I used the ObservableObject and EnvironmentObject for that. In the pictures below, by clicking on the “switch between Celsius and Fahrenheit” button, the °C and °F is updated (just a variable in the code). Took some time to grasp the concept.
Initially I had an issue with a crashed preview (but the simulator was working fine). Had to add .environmentObject(ModelData(units: “°C”)) in the preview area. Also, figuring out the exact syntax was not that easy. I remembered to add some values there, but did not know how exactly.
I also streamlined the graphics a little bit and cleaned up my code. Also, I exchanged some hard coded text with variables.
So, next step is to retrieve (that part I know) and store and use the data (that part I don’t know, yet) from openweathermap.
Following tutorials is easy, but building your first app from scratch is … let’s call it fun :joy:

1 Like

I managed to add/delete items in my array in a list view. Hooray :slight_smile:

Finally! With Ducky and lots of research I managed to load the Openweather API data (which I never did before, so this was quite a challenge). Currently linking all weatherData items to the appropriate variables.

In my screenshot, you see the weather data which is currently loaded with .onAppear (passing in lat&long) and printed into the console.

Next steps:

  • Convert City names to lat/long
  • Fix the hourly forecast (bottom line in my app)
  • Get the GPS localization to work

One week to go, should be feasible.

1 Like

Looking good!! Doing great so far! :clap::clap:

1 Like

Here is another update. Thanks to @chflorian ´s tutorial videos, I was able to get the openweathermap API working.

All data is now updated accordingly to Openweathermap. There is a 3 day forecast in the top right (I needed to figure out how to show only the first three entries of the 5 day forecast inthe ForEach loop), there is a 12 hour forecast in the bottom (gave me some headache with alignment, bouncing, etc) and the data is automatically converted between celsius and fahrenheit.

Just one more thing to do: Link the cities to their lat/long positions to update the weather accordingly.

1 Like

Here is my app. Not perfect, but for a first app I think it´s OK.

(looking forward for Chris´solution, especially getting the GPS location)

4 Likes