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 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:
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 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.
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.
find-plugins
command. You can install plugins using the CLI's fetch-plugin
command (run appbuilder fetch-plugin --help
for details).App_Resources
directory. For details, see our guide on managing icons and splash screens.edit-configuration
command.
AndroidManifest.xml
(Android)config.xml
(Android)Info.plist
(iOS)config.xml
(iOS)When your app is ready to go, see our documentation on publishing to the iOS App Store and publishing to Google Play.
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.
TJ VanToll is a frontend developer, author, and a former principal developer advocate for Progress.