Apache Cordova Customer Spotlight: WeatherPerfect

Visual Studio Blog

In this blog we typically share updates and improvements to Visual Studio itself. We also want to highlight examples of how developers use these tools to build compelling mobile apps.

Meet Sverre Nøkleby, a developer from Norway who’s been building the very cool WeatherPerfect app using Apache Cordova. I interviewed him recently over Skype and email. Among other things, we discussed how he built the app and his recommendations to developers that have a great new app idea they want to bring to reality.

Meet Sverre and WeatherPerfect

Tell me a little about your app. What prompted you to build it?

As a runner with a family and full time job, I often struggle with finding time to run. And where I live (Bergen, Norway) we have a lot of rain, which I would like to avoid when being outdoors. My wife and I pretty much organize our lives using shared calendars, so I ended up switching between the calendar and the weather forecast to find a good time to run. To make this process easier, I built WeatherPerfect. It is an app that combines the weather forecast and the user’s calendars to find the best time to run.

How long have you been developing software?

Professionally since 2002; as a hobbyist I started with Turbo PASCAL 1995. I’ve been involved in all layers of the [web development] stack at some point, with a focus on front-end development the last years. The last 5 years I’ve been using ASP.NET MVC. I’ve also been doing hobby-projects involving web-sites for around 10 years now. I also built tagdef.com, which has been reasonably popular and now has over 70,000 user-added definitions of hashtags.

What’s your background with mobile development?

I [built] an iPhone app a couple years ago with native iPhone development using Objective-C. I made a super simple Android app, as well. [WeatherPerfect] was my first take on using [Apache] Cordova.

Also, the web development I’ve done the last 2-3 years has taken mobile into account. We were the first bank in Norway to completely replace our “mobile bank” with a responsive web app.

Why did you decide to use Visual Studio?

There were multiple reasons. Because I’m an Android-user, I decided to target this platform first. But Android Studio and the Android emulator runs really slow on my old computer. I tried using it, but it got frustrating quickly. Visual Studio 2015 was out as a release candidate, and I had read that it supported multi-platform development using Cordova. It also turned out to run smoothly on my old PC.

Using Visual Studio and Cordova meant that I could develop in an environment and technology I’m familiar with. I’m pretty sure being able to use HTML5 and debugging in the browser gave me a flying start, compared to native development.

Why did you choose to build an application using Cordova?

[I’ve] been building web applications for 5 years, so the technology was very familiar to me. I didn’t have to learn the Java/Android stack.

I didn’t have to spend extra money beyond hiring a designer. The tools were free. Even though I chose to target Android first, the possibility to target other platforms without a total rewrite is a nice bonus.

Going from idea to published app

How long did it take you to build your application?

It took about two months from idea to publishing the app in the Google Play Store. I spent evenings and weekends to assemble the app in my spare time.

I tried to also allocate time to doing stuff we coders often ignore: making proper screenshots for the app-store, doing some user testing, trying to figure out a way to make the app known to the world, etc. I guess the fancy word for much of this is “App store optimization.”

What was your development process like?

Even though web development in general is familiar ground, I decided to use this project as a way of learning some new technology or library. So this was the first time I used ReactJS in a real project.

I started with the key functionality: Fetching the weather forecast from a REST API, rating the different time period based on preferences, and fetching items from the user’s calendars from the phone.

I got external help on the design. The design was delivered as PDF, but the designer also provided CSS for the basic components, colours, fonts etc. This made the transfer from PDF to app much easier.

I did most of the initial testing and debugging directly in the browser on my computer. This meant I could adjust the GUI directly with the developer tools, edit code and run it instantly, and in the worst case edit code in Visual Studio and hit F5 in the browser. […] When the app got a bit more complex, I also used the browser for performance profiling.

A bit into the development process, I started testing more on real devices. I used an online tool [called TestObject] for this, which gave me access to all sorts of devices. I also used [the NodeUnit] library to add unit tests.

I set up Gulp in Visual Studio [to compile TypeScript, generate JavaScript from .jsx files, compile LESS and SCSS, and run unit tests].

What was the most difficult part of building your app and how did you overcome that challenge?

Making the app look like a native Android app with material design.

Perhaps this is due to my mediocre CSS skills, but you can still tell that the app behaves a bit different from a native app with material design. For example, when sliding between tabs, WeatherPerfect doesn’t have the smooth transitions that good native apps have. I honestly don’t know if this is something you get out of the box with native development, but this was one thing that I just had to cut in the initial version. I focused on making the GUI fast, and used some of the many CSS libraries and code-examples that emulate the material design look.

I ended up using very little external JavaScript and CSS for that. I was in the lucky position that my designer had made a design that followed many of the material design guidelines, and provided me with the CSS for colours and shapes. Again, a nice feature with Cordova is that CSS is a universally known design language.

Advice for other developers

For developers new to Cordova development, what advice would you give?

Try to identify the deal-breakers early on. If you are accessing native OS functionality, are there Cordova plugins available for the platforms you target? If not, it might not be many lines of code to make the plugin yourselves. I made a plugin for better geo-location on Android with very little Java or Android specific knowledge.

Remember that even the newest phones are much slower than your desktop computer. So keep an eye on JavaScript performance. Modern browsers have great support for debugging this.

If you get an error on a physical device that you cannot reproduce using the emulator on the computer, remember that you can attach the phone to the computer and do remote debugging from the browser.

What learning materials/sites did you use while building your app?

• 99designs.com for hiring a designer
• testobject.com for testing the app on many different devices
• The material design guidelines
• Visual Studio Tools for Apache Cordova documentation
• Thousands of web searches and hundreds of visits to stackoverflow.com 🙂

Wrapping up

A huge thank you goes to Sverre, for taking the time to share with me his experience and advice for Cordova developers! You can follow along with the WeatherPerfect app now by downloading it for Android devices and follow Sverre on Twitter.

I hope you found this interview interesting as we discussed the creation of the WeatherPerfect app using Visual Studio TACO. If you have an app you’d like to share with us, let us know by tweeting us on Twitter (@VSCordovaTools) or email us with your suggestion (vscordovatools –at- microsoft.com)!

Visual Studio Blog

Follow