氣象

 

 

Overview

This app called Air (氣象). This is the first app I have ever made and submit to the App Store. It is a weather app. The functionality is really simple, you can view the current weather, temperature and 6 days forecast. I want to achieve an ancient scroll feeling to the app, while also containing some modern/minimalist design style. The app is available on App Store, you can download it now.

Start

Recently, I started learning iOS development. I bought a course on Udemy. After spending a week or so, I went through the most part of intermediate coding in that course. The rest of the course is some advanced coding like Machine Learning and AR, or how to design and marketing an app. I don’t think they are important for me right now, as I need more practices to absorb the knowledge I got from that week. So I decided to create an app myself.

One of the lessons in that course I purchased is to build a weather app. It seems to me it’s a great start point to build my app upon that lesson. So I settled on building a weather app.

I always want to design an app that using traditional Chinese character and vertical layout. In the ancient time, we write from right to left, top to bottom. Now, it’s rare to see anything that is designed and printed in a vertical layout, especially in the digital world. However, in Japan, there are huge amount people still try to use and popularize, you can see it from this dictionary app and this web vertical layout association. I think it’s a perfect time for me to design this app in vertical layout because I can actually build it to let more people use it

Japanese Dictionary

 

 

Japanese web vertical layout association
Japanese web vertical layout association

Design

For this app, I did not follow my usual design process as start brainstorming, wireframing, then testing, designing mockup and do more testing. I know the design needs to be very simple because otherwise, I won’t be able to code it. So I go straight to Xcode and start design and code at the same time. It is not the best way to do things, but I just want to make sure that I am able to code everything I design.

This is the first version I made, it didn’t use vertical layout because I wasn’t sure how to code it at that time. The functionality is super simple, it shows an icon of current weather which is using Oracle bone script. Then it shows the city name and temperature at the bottom. It has a search button at the top of searching other cities. It’s just one page, you can’t do any interactions other than search other cities.

This version looks alright, but I feel like something is missing here. So I looked at what kind of information I can get from the weather API. I decided to add feels like temperature, and 6 days forecasts. Then I was thinking since I want to do vertical layout, why not I just designed the app to mimic the old ancient scroll. So the app will start at right, showing information like city name, current weather, and temperature. Then users can scroll to the left to see 6 days forecasts. If users keep scrolling, there will be a credit page. Based on this idea, this is the second version I came up. When I do this version, I actually went back to Sketch to design everything, because it wasn’t really easy to design scroll-page layout in Xcode.

This is pretty much the final design of my app. Except I changed the font later when I start doing beta testing. I couldn’t afford to purchase the license for the font I want to use. So I need to find a free alternative. It took me quite awhile to find the free alternative I need. There is many options and my first choice was just so perfect for this design. Also, because I changed the font, I also add some extra code to make things work for me. I will discuss this later.

 

Code

Now, looking back at my code, they are actually not very hard to do. However, it still took me a good week to make most functionalities work. The basic functions, like getting the location and sending the location to weather API to get weather data, I learned from that course. For the rest, I basically googled them. Thanks for the awesome online developer community, I can find a lot of answers to my problems. Although, it still took me quite long time to find the right answer and apply it to my app. I am still very new to iOS development, sometimes I need to learn more before I can even understand the answers. I also ask few questions on sites like StackOverflow, people on there helped me save some trial and error time. If you are interested to see my code, you can view my Github Project.

 

Beta Testing

I didn’t do any testing during design and coding phase, so beta testing will be really important to me. I invited 200+ people through TestFlight. The feedback from this beta testing is really helpful, people found quite a few major bugs in my apps.

One of the biggest one is that couple people from some small cities in Canada and America told me they can’t get any weather info for their city. This was due to I use CLPlacemark to get user’s city name as location data, instead of latitude and longitude. So as the weather API I used is a Chinese API, it couldn’t recognize those small city name. I changed back to use latitude and longitude. Although I still have CLPlacemark because for these small cities, my API will return their English name, I need to use CLPlacemark to display their Chinese name if user’s system language is Chinese.

Then, someone in China told me that instead of displaying city name, the app will display the district name of that area. I never encountered this problem during my development, because I always use a latitude and longitude of a city for testing, it always gives the city name. This is an easy fix, I will just make sure it displays parent city name when there is a parent city value returned from API.

The last major one is that someone told me the weather data doesn’t refresh when he gets back to home from work. I realized that my app will only refresh data if it got killed in the background. If it’s just paused in the background. it will not refresh data after it goes live from the background. The solution is also quite simple after some googling. I just need to let the app send the location data to the API everytime it goes into the foreground.

There are few other things I changed during beta testing. As I mentioned above, I changed the font due to the license. The problem with the free font is it can only display Chinese traditional character. The weather API will only return Chinese tradition character for the Chinese cities, for other cities around the world, it will return simplified character. The old font will auto display traditional character regards the value is simplified or traditional character. It took me quite awhile to find the right library for me to translate simplified character to traditional character, as a lot of them are for Objective-C or old version Swift.

Future

Now, I am working on writing some articles for the press. So I can get more downloads of my app. Currently, I have 300 downloads, hopefully, I can get 1000 by the end of Jan. Also, I want to add features like today widgets and theme function. Possibly, add hourly forecasts. For me, the hourly forecast is quite important.

Overall, I am happy with what I have as version 1.0. It’s been a great learning journey for me. I am going to continue to learn iOS development and see where can I get. Again, you can download my app here.