The Intel XDK New is quickly becoming a very popular option to create HTML5 installed apps on mobile using Apache Cordova. Part of the reason for this popularity is the sheer diversity of platforms supported by the Intel XDK New’s cloud build service and the ease of getting started with the platform.
Getting Started
Download and install the Intel XDK New from Intel’s developer site. After installing the XDK, choose to create a new project and select the “Start With a Demo” option. This option will give you a working project to start from so you can become more familiar with development using this environment.
Choose the “Hello World” app. This app has an image, some text and a button. It provides a good simple base that isn’t so complicated that you’d have to understand a larger program structure to get going. Later on, once you’ve become comfortable, there are a variety of demo apps included with the XDK for you to use as exemplars of how to use the technologies that make up the XDK.
If this is the first project you’ve created using the XDK it will offer to take you through a quick tour of where the various features of the IDE are. I highly recommend accepting this option because it will save time getting you familiar with where to find things later on when you’re looking for them.
Basic Code Structure
HTML5 apps that are meant to be installed are built a little differently than your typical web app. In a typical web app, you would use .NET, Java or PHP to generate web pages that are delivered to the user’s browser. HTML5 apps on the other hand need the HTML, CSS and JavaScript to be able to stand on their own to render the user interface.
Outside of using the standard HTML, CSS and JavaScript you’re familiar with, the XDK can also include a special library even though you don’t need to include it on disk. The Intel XDK New will see the request for this file and dynamically include the right version of the library at run time.
<script src="intelxdk.js"></script>
The reason it needs to include the right version at run time is because this file contains the libraries that help you interface with native device code like the camera, accelerometer and accelerated canvas. Because these capabilities access native capabilities, the implementation is platform specific even though the XDK provides you with cross-platform JavaScript APIs to use. To get started with some of the native polyfills in the Intel XDK New, check out Real World Apps using HTML5.
Building
The Intel XDK New has the most comprehensive cloud build service of any HTML5/Cordova solution. It includes the ability to build for a variety of mobile apps including iOS, Android, Windows 8 Store Apps (desktop computers), Windows 8 Phone Apps, Tizen, Amazon (Kindle, etc.), and Nook. It also includes the ability to build as a web app, Chrome installed app (for the Chrome web store), and Facebook.
Each of these build options will build a native app for the selected platform including the meta-data necessary to submit the app to the corresponding app stores. Because every app store is different, you will need to enter in information for each platform you want to support.
Android is one of the easiest platforms to build for first because you can build an APK that you can install directly to a device without having to go through an app store and without needing to specifically provision the device. To enable your android device to install your apps without going through the market you will need to change the security settings. Go to “Settings”->”Security Settings”->”Device Administration” and check “Allow installation of apps from sources other than the play store”.
In the Build tab of the Intel XDK New, choose “Android”. A wizard will appear shown in the figure below. The first step of the wizard allows you to set the name of your app as it will appear in the market along with the permissions your app requires. Choose the minimum permissions required to make your app run successfully.
The “Select Code Base” option lets you choose how much of the Intel XDK New framework to include with your build. Depending on what you choose it will affect the file size of your created installer. If you don’t need to access any native resources, you can choose the “Lean” option for a smaller distributable.
The assets tab lets you choose images for your app’s launch icon and the splash screen that will be displayed when the app is loading. The credentials tab lets you set your app’s Facebook ID if you are using the Facebook API. If your app needs to use push messaging, you will need to set the project and API key.
Once you complete a build, you will get an email within a few minutes with a link to download your installer.
Platform Specific
The build screens are the same for most platforms except for a few details that are specific to how the apps integrate with their related app stores and push messaging.
iOS builds require an Apple developer ID and a device provisioned specifically through Apple to allow your device to run your app. Because the actual build itself is done in the cloud, you won’t even need a Mac running XCode to do an iOS build. You can register for iOS developer IDs at https://developer.apple.com/programs/ios/ and paying a $99/year registration fee.
Windows phone and store builds require a Microsoft publisher ID and app ID. You can easily get these IDs by registering at https://appdev.microsoft.com/ and paying a yearly fee of $19.00.
Unlike E-Mail or SMS, push messaging is platform specific. Each platform you want to support push messaging on you will need to provide an ID for the appropriate market or app store.
Each platform requires a different id from the corresponding platform for push messaging as the delivery mechanisms are platform specific.
Conclusion
It only takes a few minutes to get started and building apps using the Intel XDK New targeting every major platform out there. Integrated cloud build services saves you from having to have multiple development machines to build on and saves you from needing to copy your code between multiple development environments. Get out there and start building some apps!
