Intel XDK is great tool for creating HTML5 powered mobile apps.In this tutorial I will discuss about creating your first mobile app with Intel XDK.This is a basic step by step tutorial to get new users familiar with Intel XDK.I am assuming that you have installed Intel XDK.If not then you can download it for free from this link and install it.It will be good to have it installed before reading the post.That way you can read the steps and follow the same.
First Step – Create New Project
After installing Intel XDK start it.You will see Projects screen as shown in the below image.Note you will have to create and Intel XDK account for getting started.Creating account is totally free.You can sign up with your Gmail,hotmail or any other mail id.
To create a new project (app) there are three options.
Templates option groups the bundled themes shipping with Intel XDK.You can think of them as small projects which help you get started easily.These are the functionality which most of the apps need. So Intel XDK team has bundled them as theme and put them under this option.If you click the Templates option you will see three sub options Blank,Layout and User Interface and Games.
Blank option does not have any starter code.It is blank slate with default libraries and dependencies taken care of.You need to create your app from scratch defining the layout and logic.Click on the blank option.After clicking the blank option you can see two blocks displayed on right hand Standard HTML5 and HTML5 and Cordova.If you are planning to use Cordova (phonegap) plugins in your app you should select HTML5 and Cordova.
After selecting any one of them you need to click on Continue button at then bottom right hand.Do not forget to click on Use App Designer option with the blocks.App designer is drag and drop interface designer.It helps you create your app interface quickly with ease.So I recommend selecting this option.You can any ways edit the app code as per your need.Selecting App designer option does not impact that.
Layout and User Interface
Layout and User Interface option lists some of the common navigational needs of an app.If you are going to use any of the feature then you can select this option.It will generate the source code and layout for that navigational app.You can then built your app on top of that.These templates are also very helpful to learn about Intel XDK and the way it works.
It also saves the development time.You need to click on the app type you want.After that just click on the continue button at right hand bottom.The common layout are Single view app,Flip view app,List view app,Grid view app,Side menu app,Tab view app and Login view app.Single view app is the most basic one.If you want to choose blank template you can go with this one as well.
Games are one of the most popular mobile app type.Intel XDK supports Cocos2d,Phaser,Pixi and EaselJS. The support for these libraries help you built awesome HTML5 based games with less effort.Just as above you can click on any one of the options and click continue to get started.The libraries and other dependencies for these libraries are automatically included.
This saves the development time.Including the libraries manually is considerable effort.Also if you fail to include them properly in your application or miss any of the dependencies then app will not run.Intel XDK does the heavy lifting.You can just focus on development of your Games.
Samples and Demos
The samples and demos section contains small apps from Intel XDK.You can use these as initial template for your app development.You can also use them to learn more about Intel XDK.Each of the sample tackles different problem statement.So you can browse through these samples for example code.The section is divided into two sub sections General and Games.
The General tab lists around 30 odd apps.The apps are categorized into two parts Standard HTML5 and HTML5 + Cordova.HTML5 + Cordova apps use cordova plugins and can run only on Mobile platform.The standard HTML5 app can run on desktop platforms as well like Facebook,Chrome app.You can click on any one of them and get started.
Games are the most popular apps on App store be it Android or iOS excluding the social networking apps.Intel XDK has demo apps for all the libraries mentioned above.The most examples are on Cocos2d.Other libraries have only single example.You can click any one of them and get started.It includes all the dependencies and you can focus on Game coding only.All the demos are HTML5 + Cordova based.There is no pure HTML5 based implementation example in this section.
Second Step – Modify your Project
If you select the Blank template above and click the continue button then Intel XDK will show select HTML5 UI framework.On this screen you can see different HTML5 UI framework supported by Intel XDK like Topcoat,App Framework,jQuery Mobile,Bootstrap and Ratchet.I personally prefer using Topcoat or App Framework.If you have chosen Demos or sample app template then this HTML5 UI framework screen may not be displayed to you.
For now you can use any demo code or simple Hello World coding.Next we will see how to test your app in emulator and built the app for different platforms like Android,iOS and Windows.
Third Step – Test your Project
Intel XDK has built in emulator.You can emulate different devices running of platforms like iOS,Android and Windows.This way you can see how your app will look like on different platforms.Not only that it also supports devices with varying sizes like Tablet,Phablet and Smart phones.So if you want to develop app which supports smart phone along with tablets then Intel XDK emulator is good way to test it out.
You can save your changes and click on Emulate button to test your app on Emulator.You can also test your app on a real device.There are two ways for it.In both the options you need to install Intel App preview on your device.After installing Intel App preview click on the Test button on Intel XDK.Then you can sync your app with testing server.Your app will then be accessible on your device through App preview.Now you can launch your app inside App preview and test it like an real app.
The second way also need App preview but you will not have to sync the app with Intel testing server.You need to switch on wifi on your mobile.After that on App preview you can see the current app under local apps options of App preview.You can then launch the app and test it out on your device.Testing on device is important as Cordova plugin testing is not supported on Emulators.So if you are using Cordova plugins in your app then you need to test it on your device before creating buld for it.
Fourth Step – Build your Project
Now that you have tested your project it is time to build the App store files.Before creating platform installers you need to define Build parameters and also screen shots and logos for those platforms.Below is the list of parameters you need to define as part of Build settings.The build settings page is accessible from Projects tab located on left top.
- App ID – unique id of your app something in format of a.b.c (for example I use com.udinra.appname)
- App name – Name of your app (Which you want to use on App Store display name)
- App description – Description of your app in couple of lines
- Author – Your App store name
- App version – version of your app for example 1.0.0
- Domain list – If you are accessing any website from your app then give that website name.You can give * for all websites.For example udinra.com if your app access this website
- Cordova CLI version – Leave the field as it is.
- Full Screen – Leave unchecked and Orientation leave the value as Default.If you want to make your app Full screen you can check the box nad if you want to set an orientation for your app then you can make it Portrait or Landscape
- App version code – Version code of your app.It is a whole number like 1,2 etc
- Minimum Android version and Maximum Android version – The versions of Android you want to support.You can get the list at http://developer.android.com/guide/topics/manifest/uses-sdk-element.html#ApiLevels (You need to mention Api levels in the options corresponding to the Android version mentioned on the link)
- Install location – Recommended setting is Auto.Keep it as it is.By this option you can decide the location your app will install
- Signed – Keep the option checked.On APP permission you can leave the field blank.Intel XDK adds required app permission to your app.
Below the build options you have Launch icons and splash screens.The image dimensions are mentioned.You can add images as per your app requirement.The images should be of same dimension as mentioned on Intel XDK.After making above changes you are ready to build your app for uploading on App store.
Fifth Step – Download App package
Now click on the Build option of Intel XDK.On that page if you are connected to Internet then you can see different build options.Click on the build option to create installer for that platform.The process is very easy and self explanatory.You just have to click few times and then download the app package for the platform.You can then upload the app package to respective App store.
I have used Intel XDK for my mobile app development and absolutely love it.It does not overwhelm you with lot of options.It is simple and yet very powerful.I have used Visual Studio for app development as well.I had to consult documentation to understand different options present on IDE.But with Intel XDK it was very easy ride for me.
Feel free to share your thoughts and queries.