Coding a Cross-Platform Mobile App in Just One Day

New Product Marketing Manager Gaurav Verma takes us through his first days on the job—and he’s already coding beautiful cross-platform mobile apps with Telerik Platform and NativeScript.

"Hello World!"

In my first week at Progress as a Product Marketing Manager, I focused on making a working example of iOS and Android apps that used mobile backend services combined with NativeScript, or {N}, the promising JavaScript framework with native controls and UI. I was blown away with what I saw.

Mobile Apps, Anyone?

Let’s face it. In today’s world, mobile apps are a big trend, and you often hear someone say, “There’s an app for that.” The truth is, both developers and enterprises want to make responsive apps with a great user experience that work on every device and mobile OS, all “without re-writing code.” Write once, run everywhere is in. Not surprisingly, reusability has always been a big mantra in coding. {N} truly delivers on this promise (and much more!).

To Be or Not To Be… That is the Question

In full disclosure, I had developed Android apps using MIT AppInventor, the drag-and-drop tool that allows you to code logic using visual blocks, but this was a different ballgame altogether. MIT AppInventor’s limitation is that it doesn’t allow you to make iOS apps. But {N} helps you make apps for multiple OSes with a single code base. To make this work, I needed to know JavaScript, which I didn’t. Sure, I had coded in C++ and Java before, but that was… a decade ago? However, I’ve always taken the bull by the horns and embraced challenges for learning things quickly. I said Yes. Hold the thought.

Mobile Backend Services?

Now, let’s try to understand what mobile backend services really are. As they say, having both beauty and brains is a killer combination. The Mobile UI controls of the Telerik Platform deliver the beauty aspect of the app (with all the CSS combinations). The brains are the back end services, or extended API calls, that get more stuff done. Together, they both deliver a powerful package for a great user experience.

There are so many services to choose from: user authentication, social media integration, push notifications, cloud storage, data connectors, security, etc. These services or API calls push off a lot of processing load to the cloud infrastructure and make the mobile app not only light, but also powerful. I chose to implement simple user authentication using a RESTful API published by Progress.

Back to the Challenge

Jumping back to the “challenge” thought, I used the browser based Telerik Platform, coming away impressed with its intuitive visual editor and easy to figure out user flow. All the time I was starting to do this, I still couldn’t get over the fact that I could write code once and run it on both platforms! This was a big deal for me.

The groceries list app tutorial in the Get Started section of nativescript.org is just awesome. I followed the step by step sections by adding UI components, laying them out well, making them beautiful with CSS edits, building navigation between screens, calling a backend user authentication service, and also calling a NativeScript plugin to validate the email value input. The result was a responsive mobile app for entering, retrieving and deleting grocery items for a user. All this in a day for a guy who didn’t know any NativeScript before. Personally, very inspiring.

The Groceries List App—User flow

An example is worth a thousand words. Let me walk you through what came out of this exercise. To start with, a user can register with the grocery list app with an email ID and password, and then log in with the combination to be able to add grocery items one by one. Here is the screenshot confirming the registration of a new user:

Soon enough I got this email as well (Yay! It really worked!):

A Rewarding Experience

I couldn’t help thinking about the eCommerce app that I have been wanting to build for the non-profit that I volunteer for. The Telerik Platform also offers usage analytics on the app to the developers, which would be incredibly useful for me to understand how users are interacting with the app, whether users are being loyal to the app, how many time it crashes and if so, what is the stack trace. Now, I have found the perfect solution to make it happen.

There are tons of starter templates on GitHub and other code snippets on nativescript.org that I could base off my future projects on too. Woohoo! Here’s looking forwarding a world of discovery and creativity in 2016. I’d definitely encourage you to give it a try for yourself!