Using Icenium with Mobile Music Store Demo

One of the things that shipped alongside Kendo UI is an extension to the Kendo UI Music Store demo (kendouimusicstore.com). The Kendo UI Music Store demo is a complete showcase that shows you how to use Kendo UI Web and DataViz in a “full scale” web application scenario. It illustrates best practice (or at the very least, “good practice”) concepts for building awesome stuff on the web with Kendo UI.

Until this week, though, it didn’t offer any guidance for mobile.

Enter the brand new Kendo UI Mobile Music Store demo! This mobile app demo uses Kendo UI Mobile to build a cross-platform hybrid application that automatically adapts to both iOS and Android phones. It consumes the same JSON web services that power the Music Store web interface, and once again, it showcases top-notch architecture and patterns that will help you understand how to build polished, complete hybrid applications using Kendo UI Mobile.

The demo is super cool and huge props go out to Jeff Valore on the Telerik Pro Services team for making it happen.

I want to take a couple of minutes and explain how you can get this demo app running on your devices, and how, with the help of Icenium, you can have your own copy of this app ready to customize in seconds!

Deploying to Your Device

The cool thing about the Kendo UI Mobile Music Store demo is that it is an app. Not a mobile website. A mobile app. That means it can be deployed and installed on a mobile device like any other mobile app. And since it is built with Kendo UI Mobile, the app can (and will) automatically adapt to look native on platforms like iOS and Android (we’ve not optimized for Windows Phone 8 or BlackBerry just yet, even though both are supported by Kendo UI).

Deploying to Android

Deploying to Android is easy peasy since Android devices allow you to “sideload” applications without any kind of jailbreaking. All you need to do is follow these three steps:

Make sure your Android device settings are configured to allow “Unknown sources.” (Settings > Security). This is an opt-in feature, so by default unknown sources (that is, apps not from Google Play) are not allowed. A simple checkbox change and you’re all set.

Visit the Kendo UI Music Store website and select “Android” as your target mobile platform. This will display the QR code (provided by Icenium) to download the Android build of the Kendo UI Mobile Music Store demo.

Finally, take a picture of the QR code with your Android device. This will automatically download the Android app package (from the Icenium cloud) and prompt you to install it on your device. When this is done, you’ll have the Kendo UI Mobile Music Store running on your Android device!

Deploying to iOS

Deploying on iOS is a little bit different than Android since iOS devices have no option to sideload apps without jailbreaking. Fortunately, with the aid of Icenium’s free Ion app for iOS, we can easily load the app using Ion as a “proxy container.” Here’s what you need to do:

Download and install Icenium Ion on your iOS device from the Apple App Store. The app is free and the install is quick. You will use Ion to “host” the Kendo UI Mobile Music Store demo on your device.

Once Icenium Ion is installed, visit the Kendo UI Music Store website and select “iOS” as your target mobile platform. You will see two QR codes: one for Ion and one for the actual demo app.

Finally, as with Android, use a QR scanner app on your iPhone (here’s a link to a free QR scanner app I use often if you need it) and scan the 2nd QR code displayed on the page (highlighted in red above). This will automatically launch Icenium Ion and download the Kendo UI Mobile Music Store demo. When the download is complete, you’ll see the demo running “full screen” on your device. To launch it from the home screen, just re-open Ion.

Why No App Store?

You may be wondering why we didn’t just publish this app to the actual app stores. In truth, we tried, but as we expected, the app was rejected due to its purpose as a “demo” app. Specifically, from the Apple app reviewers:

“Apps that are in beta form, or that are for demonstration or trial purposes only, are not appropriate for the App Store and are not in compliance with the App Store Review Guidelines.

Specifically, we found that your app is a demo app.
It would be appropriate to complete, remove, or fully configure any partially implemented features and/or to remove any references to "demo", "trial", "beta", or "test" in your application description and release notes, and from within the app.”

So there you go. We knew this kind of app was not suited for the app stores, but we submitted anyway so you could see how app stores treat “demo” apps.

Editing Your Own Copy of the App

Now that you’ve had a chance to play with the app on your device, how would you like to have a copy of the app’s code so that you can edit and try changes for yourself? If you use Icenium, this is a SUPER simple and fun process.

For everyone else, you can follow these simple steps and have a live, editable version of the demo that you can easily deploy to your device for some fun hacking:

To do this, you’re going to use Icenium Mist, the browser-based development environment. It’s cool. No downloads or installs required. Just visit http://app.icenium.com and log-in with your favorite identity provider (Telerik ID, Google ID, Facebook...you get the idea).

After you log-in, on the next Mist screen, you’re going to see the option to “Clone.” Select that option and then paste the GitHub project URL into the “Repository Uri” textbox. This will allow Icenium to automatically copy all of the code from GitHub to your local Icenium project.

Once Icenium is done importing, you’ll land in Mist with all of the Kendo UI Mobile Music Store files in the Project Navigator. At this point, you can choose to “Run” the app on your device just to prove everything is working. Icenium Mist will walk you through the steps, but it’s basically just like you did before to run the demo app using QR codes. If everything is working correctly, you should see the demo app load on your phone.

Now the fun part! Try making a simple change in the project. For example, open the “index.html” file and change a simple string. In this case, I’ve changed the “Genere” and “Artist” text used for the demo app’s toggle buttons to “G” and “A.” Save your changes and go back to your phone.

From within Icenium Ion (on iOS) or the app (on Android), initiate an app update. In Ion, this simply requires a three-finger tap-and-hold on the screen. In Android, just press your device’s “Menu” button and the app will be refreshed. In both cases, the latest version of the app will be immediately downloaded from the Icenium cloud.

And just like that, you’ll see your changes immediately deployed and running live on your device! It’s super cool.

Using this workflow you can now go to town playing with the source of the Kendo UI Mobile Music Store demo, making and testing changes on devices (or in the Icenium simulators, if you choose).

We hope that this new demo helps you build awesome mobile apps using HTML5 and Kendo UI Mobile, while showing some of the cool things Icenium can do to make hybrid mobile app development easier and more fun. Give it a try and have fun being a mobile app hacker today!

Todd Anglin

Todd Anglin
is an avid HTML5, CSS3, and JavaScript advocate, and geek about all things web development. He is an active speaker and author, helping developers around the world learn and adopt HTML5. Todd works for Telerik as VP of HTML5 Web & Mobile Tools, where his current technical focus is on Kendo UI. Todd is
@toddanglin on Twitter

Progress, Telerik, and certain product names used herein are trademarks or registered trademarks of Progress Software Corporation and/or one of its subsidiaries or affiliates in the U.S. and/or other countries. See Trademarks or appropriate markings.