Intel XDK is the next big thing for HTML5 mobile development after Phonegap. Due to Intel XDK’s huge number of features, developers has started moving from Phonegap to Intel XDK. In this tutorial I will take you through basics of Intel XDK development and its architecture. You don’t need to know Phonegap to understand this tutorial and develop Intel XDK apps.
Intel XDK Architecture In Nutshell
Intel XDK is basically a software to build cross platform mobile apps using HTML5. Its the best fit for web developers to build mobile apps.
Intel XDK uses cordova framework to run HTML5 in mobile applications. Cordova is the same framework that is used by phonegap also.
This diagram show exact architecture how Intel XDK, cordova, native mobile apis and browser technologies work together to let you create HTML5 mobile applications.
HTML5 is executed inside a webview(i.e., a browser embedded inside a app). Cordova framework lets JavaScript running inside webview to access native mobile apis via cordova plugins. By default Intel XDK apis and cordova apis are installed and available. Intel XDK apis and cordova apis are actually cordova plugins. Intel XDK wraps cordova framework, native apis and webview inside a native app.
There is huge number of cordova plugins available. You can find them at Cordova Plugin Registry. Intel XDK provides complete tutorial on how to install plugins. You can also create your own cordova plugins.
Download and Installing Intel XDK
Intel XDK installer is available for Windows, OS X and Linux. The biggest benefit in Intel XDK is that you can create mobile app for any mobile operating system using any desktop operating system i.e., you can create iOS apps in Windows.
Creating a Intel XDK Project
When you open Intel XDK app it will ask you to sign up for an Intel account. After registration is finished you can create Intel XDK apps.
App Development Screen Workflow
Once you have created a project you will see a screen similar to this
Here you can see 6 different tabs: DEVELOP, EMULATE, TEST, DEBUG, PROFILE and BUILD. Let’s see each of their uses:
- Under “DEVELOP” tab you can edit the code of your app. All the coding work is done here.
- Under “EMULATE” tab you can run the app in the Intel XDK emulator. You can also debug the app there by clicking on the spider button.
- Under the “TEST” tab you can push your app to real physical hardware using the Internet instead of creating a full build and attaching USB cable to transfer and install the app. For this you need to need to install Intel App Preview in your mobile phone.
- “DEBUG” tab is same as “TEST” tab but with one extra feature. It allows you to debug the app in Google Developers Tools style while testing the app. “TEST” tab provides basic remote debugging options whereas this tab is very advanced and requires you to connect phone to desktop using USB cable. At present this tab is only available for android apps.
- “PROFILE” tab is also like “TEST” tab with one extra feature. It allows you to check JavaScript performance. At present this tab is only available for Android apps.
- “BUILD” tab compiles the complete source code into a app so that you can publish the app into platform specific vendor stores(App store, Google play store etc). There are two kinds of builds: Cordova/Phonegap and Legacy. If you are using appMobi api’s in your app then use Legacy build otherwise stick to Cordova. Legacy build uses Cordova framework 2.X and also doesn’t support third party plugins. Whereas cordova build build uses latest version of cordova framework and also supports third party plugins. These both build types support all Intel XDK included plugins i.e., basic cordova plugins and basic Intel XDK plugins. To test legacy apps without building binary cordova plugins you need to use Intel App Preview Legacy to test legacy apps. More on build.
Understanding Project Files and Simplifying index.html File
Under project tab you would see a “www” directory. Inside this directory you need to put all your HTML, CSS, JS and Image files. You will find a “index.html” file with a lots of code in it. Remove all the code and replace with this code
<html>
<head>
<title>Blank Hybrid App Project Template</title>
<meta http-equiv=“Content-type” content=“text/html; charset=utf-8”>
<meta name=“viewport” content=“width=device-width, initial-scale=1, user-scalable=no”>
<style>
@-ms-viewport { width: 100vw ; zoom: 100% ; }
@viewport { width: 100vw ; zoom: 100% ; }
@-ms-viewport { user-zoom: fixed ; }
@viewport { user-zoom: fixed ; }
</style>
<script src=“lib/ft/fastclick.js”></script>
<link rel=“stylesheet” href=“css/app.css”>
</head>
<body>
<script src=“intelxdk.js”></script>
<script src=“cordova.js”></script>
<script src=“xhr.js”></script>
<script src=“js/app.js”></script>
<script src=“js/init-app.js”></script>
<script src=“js/init-dev.js”></script>
</body>
</html>
This is the necessary code required to start working. We have loaded Intel XDK apis and cordova apis. And also we did some tweaks to make the app look and behave more native.
Further Reading
I covered basic Intel XDK architecture, workplace interface and files. To continue learning more on Intel XDK you can read Intel XDK official documentation. For creating UI of your app you can use Intel App Framework.
