My Icenium Journey: Getting Started

This is the first in a series of blog posts that will chronicle my journey through Telerik's Icenium mobile development platform. In this intro, I'll talk about my experience setting up the Icenium environment, and running my first project on both the simulator and my test device.

Two Sides of the Same Coin

Icenium is available in two flavors: an installable Windows application (called Graphite) as well as a full-fledged online IDE called Mist that runs in your browser. Both offer a complete environment for developing and testing your apps, and even have the availability to sync your projects, allowing you to continue your work from any machine using Mist. Although Mist is impressive, going forward I'll be focused mostly on the installable Graphite application.

Installing Icenium Graphite

The first of many impressive aspects to Icenium is how easily and quickly you can get started, thanks to Telerik's Click-Once distribution of the Graphite IDE. This ensures not only a quick, simple install, but since it updates automatically with each launch, ensures you are always running the latest version. Once installed, Graphite will prompt you to login, which you can do with your regular Telerik credentials, or any other provider you've connected to Icenium, such as Facebook, Google, or your Microsoft Live ID.  If you do not have a Telerik or Icenium account, you can click to create one, and Icenium will launch your browser to the registration page, which will also set you up with their 30 day free trial. Once you're logged in to an active Icenium account, you're presented with a dashboard with several ways to get started, including links to documentation, latest updates, discussion forums, as well as helpful starter projects of different types.  We'll take a closer look at these in later posts, but for the purposes of getting started, we'll focus on the Clone tab. This helpful section not only allows you to import a project from repositories like GitHub and Bitbucket, but also points to several sample projects provided by the Icenium team so you can immediately experience the full potential of the platform.  There are several excellent examples available, but the Kendo Mobile Music Store (based on the full Kendo UI Music Store sample) looks like it might be the most full-featured one, so that's what I chose for this entry. Cloning the repository downloads the full project into Graphite, including all the external references (such as jQuery, Kendo, and Cordova) required to run the project. In other words, this project is ready to go, out of the box!

The Simulator

To begin, simply click the Run menu option and select "In Simulator" which launches a fully-interactive simulator, allowing you to preview the application as it would appear on a real device.  The simulator also allows you to switch devices on the fly, previewing your app running on different Android and iOS devices and tablets in different orientations and even different OS versions.  It's important to note that the Icenium platform allows you to target both device Operating Systems with a single code base. This is accomplished by using Kendo UI Mobile, which is a cross-platform toolset that handles switching themes on the fly automatically, so you can focus strictly on the code. We'll look closer at some of these components in later posts. In the meantime I want to mention what I believe is probably the most impressive (not to mention helpful) feature of Icenium. The IDE includes Chrome-like developer tools, exposing a suite of tools for inspecting elements, monitoring network resources, and even debugging JavaScript, just as you would with the Chrome browser.  Also worth mentioning is the fact that any changes made to the application HTML or CSS are immediately refreshed on save, allowing to preview your changes right away. Very handy!

Device Testing

Icenium also has the ability to connect and deploy your project directly to a connected phone or tablet for a live, hands-on preview. This does require additional setup, such as installing iTunes for Apple devices, or installing the Google Android drivers for your specific phone. In addition you need to change your device settings to allow Icenium to deploy apps to the device. Each device is different, so for more information on the prerequisites and requirements for connecting Icenium to a device, be sure to consult the Icenium Documentation: Running Apps on Devices. Once your device is ready and connected, Icenium will report it in the Devices section, accessible from the footer of the Graphite application.  Simply select the device, then again open the Run menu, and this time select Build and Deploy to send the app to your device. Icenium will compile the application and publish it to your device, launching it for immediate use. Here is a photo of my LG G2X running the same exact app shown earlier, launched through Icenium without changing a single line of code.

Testing on iOS with Ion

Deploying an app to your Apple device is also a breeze with Icenium Ion, which is a container application for deploying your apps, completely eliminating the need to provision them! Ion can be installed from the Apple store and includes a convenient QR scanner to automatically load apps from Icenium with just a quick scan.

LiveSync

Icenium also offers a helpful feature called LiveSync, which automatically pushes any changes you make to your project, such as adding or updating files, including HTML and JavaScript directly to your deployed app on the device. This automatically refreshes the screen revealing your changes immediately in the application, achieving truly rapid development on all of your connected devices.

Wrapping Up and Next Steps

As you can see here, Telerik made it dead-simple to get started with Icenium, giving you a complete, ready-to-use environment right out of the box! With dozens of sample projects and extensive documentation, Icenium has everything you need to utilize your HTML and JavaScript skills to create native-looking apps that target multiple devices from a single code base. Next time we'll look closer at the different components that make up an Icenium app to create a "Hello World" project from scratch. Stay tuned!