Let's start with two questions:
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.
Before we get started, there are a few things you need to have installed.
npm install -g appbuilder.
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.
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
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:
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?
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.
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
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
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.
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.
There are, however, a few concerns that are unique to hybrid development.
find-pluginscommand. You can install plugins using the CLI's
appbuilder fetch-plugin --helpfor details).
App_Resourcesdirectory. For details, see our guide on managing icons and splash screens.
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.
TJ VanToll is a frontend developer, author, and a former principal developer advocate for Progress.
Subscribe to be the first to get our expert-written articles and tutorials for developers!