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 Chinese 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.
Recently, I started learning iOS development. I bought a course on Udemy. After spending a week or so, I went through the most of the intermediate coding part of that course. The rest of the course is more advanced and marketing stuff. I didn’t think they were important for me at that time, as I needed more practices to absorb the knowledge I got from the previous week. So I decided to create an app myself.
One of the lessons in that course is about teaching how to build a weather app. It seemed 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 wanted to design an app that using traditional Chinese character and vertical layout. In the ancient time, we wrote 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. In Japan, there are a huge amount of people are trying to use and popularize this layout, you can see it from this dictionary app and this web vertical layout association.
日本語は妥協しない。国語辞典はやっぱり縦書きが一番です。Japanese should not be compromised. Vertical writing is the best for Japanese dictionary.
So I wanted to build this app as a mean for joining this movement and bring more people’s attention to vertical layout. We don’t have to design the app the way we do. There are more possibilities.
For this app, I did not follow my usual design process, which starts from brainstorming, wireframing, then testing, designing mockup and do more testing. I know the design will 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 again, 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 first. 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 the lack of information makes this app pretty useless for someone who wants to check out the weather. So I went back to the data that weather API provider provides. Based on the vertical layout and my experience with checking the weather. I picked out city name, current weather, current temperature. feel temperature and 6 days forecast to display on my app. I got rid of the search function because most of the time people will only need to check the weather in their local area. I was thinking to add the hourly forecast to the app, but I decided to leave that for future updates.
Based on the information, I went back to Sketch to finalize the design. The first screen shows the city, the weather, and temperatures. Next screen shows the forecast. The last one is a credit screen. In the final production, I had changed the font due to expensive license. This font is a perfect choice, but I have to go with a free alternative. Also, because of this change, I had to add some extra code to make things work. I will go into details later.
From here, I began the actual coding process.
The basic function was mostly completed from that online course. I just needed to adjust the code to my weather API and made sure the design is right.
I did a lot of googling to figure out things. For instance, I wanted people to scroll through screens. I had no idea how to do it since all I learned is clicking buttons to navigate through screens. Luckily, I found a youtube video that teaches how to use xib files to build the scroll-like screens. I had some many questions during the projects, thanks to the awesome online developer community, I could find answers to a lot of my problems. Although, sometimes I needed to learn other things before I could even understand what the answers say. I also ask few questions on sites like StackOverflow, people on there saved me a lot of trial and error time.
Now looking back at the code I write, they are not that hard to do. There are also a lot of ways to make things cleaner and more efficient. If you are interested to see my code, you can view my Github Project.
I didn’t do any testing during design and coding phase, so beta testing was 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 ones was 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 that I used CLPlacemark to get user’s city name as a parameter to request the weather data, instead of latitude and longitude. Since the weather API I used is a Chinese API, it couldn’t recognize those small English city name. So I changed back to use latitude and longitude as the parameters. I kept CLPlacemark because, for these small cities, my API will return their English name, which I don’t want that. So I used the Chinese city name I got from CLPlacemark to display on the screen.
Then, someone in China told me that instead of displaying city name, the app will display the district name of that area. For example, my app will display “Westend” as city name rather than “Vancouver”. I never encountered this problem during my development, because I always used the exact latitude and longitude for a city to test, it always returned the city name to me. This was 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 got back to home from work. I realized that my app will only refresh data if it got killed in the background. If the user just quit the app and let it stay in the background. it will not refresh data after it went back to the foreground. 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. So the app can get new weather data.
Another thing as I mentioned above, I changed the font to a free font. So in order to display everything in Chinese traditional characters, I had to use an OpenCC framework to translate everything that might be in Chinese simplified characters into traditional one.
Someone also suggested being able to switch between weather description and the Oracle bone script. It’s not very easy for people to understand the Oracle bone script. So I made it that you can tap on the icon to switch between description and icon.
Now, I am working on writing some articles for the press. So I can get more downloads of my app. Also, I want to add features like today widgets and theme options. Possibly, add hourly forecasts.
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.