“Knock Knock” – it’s the project manager at your cubicle. “I want you to build our mobile strategy so we can have a single development codebase, but target all mobile platforms for customers”. You get the team together to do a performance versus reach analysis and decide that a hybrid mobile app approach would work best, given the flexibility and the web development background of the team members.
You also need centralized control so your developers can work comfortably from their varied IDE’s on a single AppBuilder project that syncs from a source control repository. You need an easy way to build and deploy projects for simulator/device testing. And you may choose to customize the development or build process in future with scripting. The answer to all this is the AppBuilder CLI (Command Line Interface). Command line tooling can be incredibly powerful for building workflows, but at times takes a little finesse to set up. In this article, we take a step by step look at how to set up AppBuilder CLI on both PC and Mac.
First up, make sure to check the OSX requirements of running AppBuilder CLI. Here are the steps to get set up:
$ sudo npm install -g appbuilder
The Node package manager installer for AppBuilder requires “Super User” administrator access. That’s what the
sudo command does and it will require you entering the machine administrator password before continuing. Once all is set, the AppBuilder CLI should install after taking care of several magical pieces in the background.
Again, first check the Windows requirements for running AppBuilder CLI. Here are the setup steps:
npm install appbuilder –g
Voila – AppBuilder CLI is ready to go for Windows.
Now that we have AppBuilder CLI installed in both OSX and Windows, our paths converge with standard commands – let’s look into the basics. AppBuilder CLI supports a large number of operations. If, at any time, you need help, simply type the following command in OSX Terminal/ Windows DOS prompt:
$ appbuilder help
Now, before we start working with AppBuilder projects, I like to create an AppBuilder folder under my primary user’s Home directory in OSX/Windows in order to keep things organized. This is obviously optional and you can organize your projects however you prefer in your file system. A quick way to check where you are in your system is the
pwd (Primary Working Directory) command in OSX or the
echo %cd% (Current Directory) command in Windows.
Let’s navigate to our preferred folder, through the Change Directory command:
$ cd AppBuilder
And now for the magical one-liner:
$ appbuilder create hybrid MyHybridApp
This AppBuilder command will create a new hybrid mobile project in your current directory (named MyHybridApp) and started with the default Kendo UI Mobile core project template. You could choose any of the other supported project templates as well, as shown below.
The upshot – the named project folder is created in the current directory, as you can see for both Mac and PC.
Now, let’s navigate inside our AppBuilder project:
$ cd MyHybridApp
With our AppBuilder project structure ready, we could get cracking on actually building our hybrid mobile app. But given that this is a hybrid mobile project, where exactly do we expect this to run? Let’s write our next CLI command:
$ appbuilder simulate
What we fired up is the native OSX AppBuilder Simulator, showing our hybrid app running in iOS to start off. But worry not, click on the Device menu and you can easily change not just the Mobile OS, but also supported OS versions. How cool is that? Below you’ll see the same hybrid app (unchanged from project template) running in iOS and Windows Phone.
Care for some Android love? Just change the device type, as seen in the Android simulator below. But also notice that the same app looks a little different, particularly the tab strip being on the top as Android users would expect. This comes thanks to the adaptive and responsive rendering of Kendo UI Mobile widgets.
If you are on Windows and run the
appbuilder simulate command, you fired up the Windows AppBuilder Simulator, which starts off running your app in Windows Phone, as shown below. While nothing beats on device testing, these AppBuilder simulators can be very handy for testing apps – they allow simulation for device orientation, user contacts, geolocation and network strength.
If you are satisfied with your app and testing through the simulators, the next obvious step is deployment on a real device. Here, AppBuilder CLI shines by providing easy build options for each mobile platform and the resulting app package artifacts can be easily side-loaded onto mobile devices. The easiest way to achieve this is to use the AppBuilder Companion App, which can be found in respective Apple, Google and Microsoft App Stores.
In the OSX Terminal or Windows command prompt, let’s navigate inside the AppBuilder project folder and fire up the command below, based on which platform you want to build for:
$ appbuilder build ios –companion $ appbuilder build android --companion $ appbuilder build wp8 --companion
Each of the above CLI commands leads AppBuilder to suck up your hybrid project resources, fire up a build in the cloud and return app packages which can easily be deployed to respective mobile devices. After the operation completes, the AppBuilder CLI opens a new tab in your browser and shows a QR code for deployment in the companion app. Simply scan the QR code with the built-in scanner in the Companion app and, just like that, your creation is deployed on a real mobile device.
Even better, you do not need to rebuild and reinstall the app every time you make a change. After you modify your code and save the changes in your code editor, run
appbuilder cloud-sync in the command prompt, and tap and hold with three fingers on the device screen to sync the changes. This feature, called LiveSync, saves a whole lot of debug time as you are developing your apps.
It can be difficult at times to remember the various commands, along with the templating options. If you prefer a little UI to help you with these sorts of things, you will love what’s next – an UI (User Interface) over your most commonly used CLI commands, right inside one of the most popular text editors.
Sublime Text has long enjoyed tremendous developer love for its simplicity and productivity enhancements. And AppBuilder CLI tooling is integrated inside Sublime as the AppBuilder Package for Sublime Text. First up, check the requirements, then download and install the AppBuilder Sublime Text package.
Once the installation completes, fire up Sublime Text and choose the File – Open menu option. Point the File Open dialogue to the root AppBuilder project folder, like you see with my MyHybridApp project below.
The entire project structure including all folders and nested files will open up in Sublime Text – kind of like the Solution Explorer in Visual Studio. This should satisfy that developer friend who never wanted to leave the comfort of Sublime Text all day.
Once you have made some development progress, look under the Tools menu. You can build/deploy, enable live sync and fire up AppBuilder simulators – just like we did with the CLI commands – without ever leaving Sublime Text.
Although it takes a few steps to install and configure AppBuilder CLI on Windows or OSX, it is a one-time process. If you are developing hybrid mobile apps with AppBuilder, you will be thankful down the road that you took the time to understand and use CLI commands. The command line tooling provides incredible power for developer productivity and is open for usage inside customized build/deploy scripts.
PS: Cheers for my buddy TJ VanToll for all the help with this article!