AppBuilder March Release: A Full CLI, Windows Phone 8 Support, Sublime Text Integration, and More

Fresh off the release of the Telerik Platform, we have an epic release of Telerik AppBuilder to discuss - packed full of several highly-requested features (including Windows Phone 8 support!). There's a lot to talk about, so let's dive right in.

Overview of This Release

• A Fully-Featured CLI
• Sublime Text Integration
• Windows Phone 8 Support
• Advanced Version Control Support

A Fully-Featured CLI

We're happy to announce the beta release of a command-line interface for AppBuilder. The CLI is open-source and available on GitHub for manual installation and hacking.

In fact, the CLI is already available on npm, so you can install it right now.

> npm install -g appbuilder

Don't have Node.js installed? You can get an installer for Windows and OS X at http://nodejs.org/.

Run appbuilder help to get a list of the commands available.

> appbuilder help
Usage:
    $ appbuilder  [command parameters] [--command ]

General commands:
    help                   Shows additional information about the commands in this list.
    login                           Logs you into the Telerik Platform.
    logout                          Logs you out from the Telerik Platform.
    user                            Prints information about the currently logged in user.

Project development commands:
    create                          Creates a new project from template.
    init                            Creates a project in the current folder.
    build                           Builds the project and produces a QR code for deploying the application package.
    deploy                          Deploys the project to a connected device.
    cloud-sync                      Synchronizes the project with the cloud to enable LiveSync for remote devices.
    livesync                        Synchronizes the latest changes in your project to connected devices.
    simulate                        Runs the current project in the device simulator.
    find-plugins                    Searches for plugins in the Apache Cordova Plugin Registry by keyword.
    fetch-plugin                    Imports an Apache Cordova plugin into your project.
    edit-configuration              Opens configuration file for editing.
    prop-add                        Adds more values to a list project property.
    prop-set                        Sets a project property.
    prop-remove                     Removes values from a list project property.
    prop-print                      Prints the value of a project property.
    list-projects                   Lists all projects of your account.
    export-project                  Exports one of your remote projects into a local AppBuilder project.

Device commands:
    list-devices                    Lists all recognized connected devices.
    open-device-log-stream          Opens the log stream for given device.

Certificate management and publishing commands:
    list-certificates               Lists all configured certificates for code signing
                                    iOS applications and Android applications.
    create-self-signed-certificate  Creates self signed certificate for code signing Android applications.
    remove-certificate              Removes certificate from the server.
    export-certificate              Exports certificate from the server.
    import-certificate              Imports certificate to the server.
    list-provisions                 Lists all configured provisioning profiles for code signing iOS applications.
    import-provision                Imports a provisioning profile from file.
    remove-provision                Removes a registered provisioning profile.
    appstore-list                   Lists all applications in iTunes Connect that are ready for upload.
    appstore-upload                 Builds the project and uploads the app to iTunes Connect.

Global Options:
    --help                Prints help about the command given in the rest of the command line.
    --path          Specifies the file path to the project. If not specified, the project is searched for
                          in the current directory and all directories above it.
    --version             Prints the client's version and exits.

There's a lot here, and we'll have subsequent articles to go into more detail, but for now let's look at what it takes to get a project up and running on a device.

We'll start by running running appbuilder create, which scaffolds a new project for us.

> appbuilder create

This new project uses Kendo UI Mobile, with the directory structure shown below.

.
└── app
    ├── App_Resources
    │   └── ...
    ├── cordova.android.js
    ├── cordova.ios.js
    ├── index.html
    ├── kendo
    │   ├── js
    │   │   ├── ...
    │   │   └── kendo.mobile.min.js
    │   └── styles
    │       ├── ...
    │       └── kendo.mobile.all.min.css
    ├── scripts
    │   ├── ...
    │   └── app.js
    └── styles
        ├── ...
        └── main.css

Don't want to use Kendo UI Mobile? appbuilder create can build jQuery Mobile, Kendo UI Mobile, Kendo UI DataViz, or blank projects. To switch from Kendo UI Mobile, set the --template option. Run appbuilder create --help for details.

We now have a project, but we want to want to see what this looks like on a device. To do that, first we need to go into our new app's directory.

> cd app

Then we can build it with the appbuilder build command. The following performs performs an Android build.

> appbuilder build android

Building requires you to be logged into a Telerik Platform account, so the build command first prompts you to login via a new browser before performing the build. (If you don't have a Telerik Platform account you can create one for free.) You can also login at any time using appbuilder login. After the login, the build command performs an Android build, and opens a browser with a QR code, as shown below.

You can scan this code to download the built .apk file and install it on your device - which is cool, but we can make the process even easier by connecting an Android device and using the deploy command.

> appbuilder deploy android

This command starts by building the project, but when the build completes, instead of showing a QR code, it actually opens the project on the connected Android device.

It gets even cooler with LiveSync, or our way of pushing code changes directly into built native applications.

For example let's say we decide that our template's heading isn't nearly exciting enough, and we want to change <h1>Welcome!</h1> to <h1>OMG Welcome!!!</h1>. We can go to our text editor of choice, make the change, and then run appbuilder livesync to push the change directly to our device - no re-build required! This workflow is shown below.

There's a lot more to the CLI than this. You can build, deploy, and live sync iOS projects; you can even upload apps to iTunes Connect directly from the command line (appbuilder appstore-upload), but we'll leave those topics to future blog posts. For now, let's talk about another of my favorite projects: Sublime Text.

There's also a more thorough walkthrough of the CLI basics available at its GitHub repo.

Sublime Text Integration

I'll start with a confession: as much as I love the tooling in the AppBuilder in-browser client, I had a hard time giving up Sublime Text. Luckily, I no longer have to be conflicted, because in addition to the CLI, AppBuilder now offers direct Sublime Text integration through a dedicated Sublime package.

There are two ways to install the package. The easiest is through Sublime Text's Package Control plugin.

If you're not not a Package Control user, or if manual installation and tinkering is your thing, you can also grab the code from GitHub. (Like the CLI it's also open source.)

After installing the package you need to restart Sublime Text, and then you'll see a shiny new AppBuilder menu under Tools.

Windows-based Sublime Text users also have a Run in Simulator option that opens the application in AppBuilder Windows client. OS X users will be getting a similar option in our next release.

Personally I'm a huge fan of the LiveSync On Save command. With LiveSync On Save set, changes made in Sublime Text are instantly rendered on a connected device. This is shown below.

What's really exciting to me is that the Sublime package is a fairly lightweight wrapper around CLI commands. The Sublime Text package's LiveSync Application command is a shorthand for running appbuilder livesync from the command line. So if your favorite IDE isn't Sublime Text (or Visual Studio which we also integrate with), let us know! Or better yet, since it's all open source, you can write one yourself!

For more on the Sublime package, including documentation on each menu option, and information on contributing to the package, see the package's GitHub repo.

Windows Phone 8 Support

If a CLI and Sublime Text integration weren't enough, we're also happy to announce beta support for Windows Phone. With this release you can design, develop, simulate, and build Windows Phone applications directly within AppBuilder. Let's look at each.

To start, our UI Designer has been updated to support designing Windows Phone apps with Kendo UI Mobile controls.

Next, our list of simulators has a new Windows Phone option to emulate the experience without needing to use an actual device.

And when you are ready for testing on a device, you can perform now perform Windows Phone builds in the cloud.

The build gives you a XAP file that you can deploy and run) on a registered Windows Phone device). Look for more details on this in a coming blog post.

Windows Phone support is in beta, and we have a lot more features on the way - including QR code-based deployment, CLI support, and more. Stay tuned!

Advanced Version Control Support

AppBuilder has always had robust support for git-based version control, but with this release we've made it even better by supporting creating, deleting, checking out, and merging branches directly within our in-browser and Windows clients.

For instance, here are just some of the things you can do at our in-browser client's version control screen.

When merge conflicts occur we have a new conflicts view to help you resolve them.

With full branching support, large teams can work on multiple features at once - and they never have to leave AppBuilder to do it.

Wrapping Up

There's a lot more to talk about - including Android 4.4 support, faster builds, and LESS file support - so look for more information over the coming weeks. For a full list of all updates and changes check out our release notes.