Telerik blogs

Let's start with two questions:

  1. Are you a Sublime Text user?
  2. Do you want to develop native iOS and Android applications using HTML, CSS, and JavaScript?

If you answered yes to both questions then I have great news: Telerik AppBuilder now has a command line interface (CLI) and Sublime Text integration—meaning, you can develop iOS and Android applications with the editor that you know and love, without having to worry about managing a collection of SDKs across different operating systems.

If you're not a Sublime Text user, checkout the other IDE choices AppBuilder offers.

In this article, we'll walk through the process of developing a mobile app using the Telerik Platform and Sublime Text. You'll create a new project, test it on actual devices and develop apps that are app store ready.

Setup

Before we get started, there are a few things you need to have installed.

When you're all set, you should see an AppBuilder menu under the main Tools menu.

Now that the package is installed, let's see how to use it.

Creating New Projects

To create new projects you need to use the AppBuilder CLI, specifically the appbuilder create command. The following creates a vanilla Kendo UI Mobile project named "hello-world".

> appbuilder create hello-world

You can create projects using libraries other than Kendo UI using the --template option. For details, run appbuilder create --help.

Next you need to open the project in Sublime Text. I have a subl command setup on my Mac, so I use the following command. (You can also use the File --> Open... menu within Sublime Text.)

> subl hello-world

In Sublime you'll see the project structure shown below.

Now you have a project in place, but how do you test it... or even see what this code is doing? Well to start, even though we're building a mobile app, this is still a Web project; therefore you can open the project's index.html file in your browser of choice. This is what your newly-created project looks like in Chrome on OS X:

While running in a local browser is good for quick testing, there are several limitations for hybrid applications:

  • Cordova calls to access native device features will not work, since the local browser is not actually on a device.
  • AJAX calls are subject to cross-origin restrictions. (PhoneGap/Cordova/AppBuilder allow whitelisted access to external domains that are not restricted by CORS).
  • It's not the same browser. Even in Chrome—which is a fairly recent fork of WebKit—there are still major differences between it and mobile browsers, including touch event interactions, support of new APIs, and even simple things like the dimensions of the screen.

There's no replacing testing a mobile app on actual mobile devices. But how do you take our project, build it into a native Android or iOS application, get it on a device, and test it?

Using the Companion App

We'll start with iOS. The easiest way to get your AppBuilder app on an iOS device is to use the AppBuilder companion app—which you can download from the App Store. With the companion app installed, and your iOS device connected, run the following command from the command line.

> appbuilder build ios --companion

This command performs a build of your newly-created project that is specifically targeted for the iOS companion app. When the build completes, AppBuilder opens a new tab in your default browser with a QR code. Scan that code within the companion app and you'll see it live on your device. This workflow is shown below.

This simple workflow is quite powerful, as within the companion app, your project is running in an iOS Safari UIWebView; therefore you are directly testing on the platform your app will target.

But there are still some limitations with this approach. While this code is running in a UIWebView, it is running within an AppBuilder-provided shell. This means that you have no way of testing icons or configuration settings. Also custom Cordova plugins do not work in the companion app. To completely test your app, you must perform a native build.

Performing Native Builds

For this step, let's switch over to Android. With an Android device connected, you can build a native Android .apk file, and deploy it to a device, by selecting the Tools --> Telerik AppBuilder --> Build and Deploy menu option within Sublime Text.

This generates an .apk file for your project in the cloud, places it in the project's root directory, and deploys it to your connected Android device automatically. The process of deploying your "hello-world" project to a connected device (in this case a Nexus 7) is shown below.

But here's the cool part: if you toggle on the Tools --> Telerik AppBuilder --> LiveSync on Save option, every time you make a change to your source code in Sublime Text, AppBuilder pushes that change to the built Android application on the connected device. This is shown below.

LiveSync only works for changes to HTML, CSS, and JavaScript files. If you change configuration files or icons, you must perform a full build to see the changes. It's still totally awesome though.

The above animated gif summarizes my personal workflow well. I do my coding in Sublime Text, connect mobile devices, use LiveSync to test as I code, and then use remote debugging for iOS and Android when things go wrong.

What about iOS and Windows Phone? This same workflow for native builds works for iOS, but you must setup iOS provisioning profiles first. For more information see our documentation on code signing for iOS. Windows Phone support is not yet available in AppBuilder's Sublime Text package because it is not yet available in AppBuilder's CLI; however support is coming in our next release.

Developing Our Application

With a project created, and builds setup, now you just have to develop the application (The easy part!). Don't worry too much though. Since this is still the Web, and most of the knowledge you already know still applies. You can still bring in your JavaScript and CSS frameworks of choice.

There are, however, a few concerns that are unique to hybrid development.

  • Cordova—All AppBuilder projects have Cordova included automatically. Cordova provides over a dozen core APIs to access native device features such as contacts and geolocation. Additional plugins are availble at http://plugins.cordova.io/, or with AppBuilder CLI's find-plugins command. You can install plugins using the CLI's fetch-plugin command (run appbuilder fetch-plugin --help for details).
  • Icons and Splash Screens—Each platform—iOS, Android, Windows Phone, etc.—has its own conventions for how icons and splash screens are stored and used. AppBuilder provides default icons, but you'll need to switch to using your own icons before submitting to app stores. The default images you'll need to update are in the project's App_Resources directory. For details, see our guide on managing icons and splash screens.
  • Configuration—Even though we are building with Web technologies, at the end of the day we are building native apps; therefore we have to deal with the same configuration files that native developers have to. For iOS and Android this means the four files below. You can edit these files using the CLI's edit-configuration command.
  • Backend—By their very nature, hybrid apps do not have a traditional backend—you can't inject .NET, PHP, Java, etc. code right into your HTML. Instead you must access backends over HTTP. You can either expose your own services, or use a backend that lives in the cloud, such as Telerik Backend Services.

When your app is ready to go, see our documentation on publishing to the iOS App Store and publishing to Google Play.

Wrapping Up

With a full CLI and Sublime Text support, Sublime Text users can now leverage the full functionality of Telerik AppBuilder without having to leave the editor they love. And with Windows Phone support coming to the CLI soon, Web developers can use the Telerik Platform to build native apps for the three major mobile platforms with familiar HTML, CSS, and JavaScript technologies.

If you'd like to see any topic discussed here in more detail, or run into any issues using AppBuilder from Sublime Text, please let us know in the comments and we'll see what we can do.

Try Telerik AppBuilder

TJ VanToll
About the Author

TJ VanToll

TJ VanToll is a frontend developer, author, and a former principal developer advocate for Progress.

Comments

Comments are disabled in preview mode.