Cross Platform Development using Intel XDK tutorial

Cross Platform Development using Intel XDK tutorial !

Cross platform development stands for write a single codebase and that will eventually be used for the different operating system.

In this blog, we are focusing on cross-platform mobile application development.

As we all know ,In current time there are large numbers of mobile users and mobile applications are increasing rapidly ,day by day.This rapid enhancement of users and applications is inspiring the mobile application development.

There are many mobile operating systems:

Naturally, You can not learn all of those at a time ,and even so, any native mobile application development has different code structure and pattern than the other one.

If you are a web designer or developer and you are fitly aware with HTML,CSS and jQuery/javascript then the cross-platform is a sovereign remedy for you and a better option  to become a mobile application developer.

The features of cross-platform mobile application :

  • It uses HTML5,CSS and jQuery.
  • Easy to design.
  • Re-usability of Codes.
  • Developer Friendly.
  • Rapid Development.

Re-usability of Codes:

One of the best things about cross-platform mobile application development is, once the app is developed, it can be launched on multiple OS. It is not needed to write codes or sequences for each platform individually. Instead, you can simply reuse those bits in upcoming projects and different platforms.


Cross platform framework is entirely based on developers’ comfort. The frameworks majorly comprise of dynamic and scripting languages, which is easy for any developer to handle with. Building cross-platform apps only require HTML5, Javascript and CSS3, which will certainly be on the fingers of any web developer. The developer can make use of the common hardware features on all mobile devices and have the UI specific for each OS platform.

Plugins :

Most of the cross-platform frameworks include plugins that let you create a native library and integrate it to the SDKs’ like PhoneGap, Appcelerator’s Titanium and Rhodes. This helps you develop apps with most advanced features and tasks.

There are many tools in the market which provide the cross-platform mobile application development environment.

  • PhoneGap
  • Xamarin
  • Sencha
  • Intel XDK
  • Adobe Air

Among, those we have chosen Intel XDK for developing a cross-platform mobile application.

Because Intel XDK is

  • PhoneGap
  • Easy to Install.
  • Easy to learn and use.
  • Vast support from intel community

It provides following frameworks for design development

  • App Framework 3
  • Ratchet
  • Ionic
  • Framework 7
  • jQuery Mobile
  • Topcoat

Apart from that, it supports Cordova Plugin support, so that you can create your app with advanced features and more hardware interactions.

Let’s start Cross Platform Development using Intel XDK tutorial step by step Guide

First of all download intel XDK. and install on your machine.

It has an ordinary installation like other software in your machine.

After installation ,Execute it and you will be asked for username and password, under them there is a link to create an account if you don’t have,You must have an account to  develop an app.Register and log in.

1.After login, you will get the following screen.

Initial XDK screen

Initial XDK screen

2.Click on Start A New Project.

Start with intel XDK

Start with intel XDK

3.You will be asked for platform selection,Choose HTML5 + Cordova and also check Use App Designer feature, This will enable UI development kit for designing layout. and press continue right bottom corner.

4.After that you will be asked for a project name ,Give any project name and press OK button.

5.After that you will get the following screen,for designing framework selection,Here we have chosen Bootstrap.

Select design framework

Select design framework

Here is your initial screen after creating a project,In screen, you can see the left sidebar displays the directory structure of a project,then the UI elements are given to draw design layout.

Top left corner two buttons are given Code|Design ,The current view is design view, while you click on Code ,it will take you to code window.





6.Now, back to design view and drag some UI elements from the left side panel,First of all, we will put the header and set the title of the application.

Set header

Set header

7.Click on a blank white portion,you will get some options in right side panel,such custom style ,background etc.

Now, set up the background colour by clicking the background and new.You will be asked for a name of background.





8.Now ,Drag and drop text box from the left panel,and set initial styling of a textbox ,shown in the following image at the right top.

-Check/Uncheck label option to add/remove the label.

-Select label position,type(text,password,email..),placeholder,value..

As we are creating a login screen,

-put two row from layout option(Left-UI panel).You can change the height of row by pulling and pushing.

-put two textboxes  in every row.

-Add the button either inside the row or outside the row.

put textbox

put textbox

9.Now ,Navigate to code and bind the button click event.Find your button in code and give it an id (‘at_login’),and write following code.

               window.location='success.html'; //on click of button,it will redirect to success.html page

10.Now, create a new file named success.html,by right-clicking on www. and write any message to this page.



11.Now, focus on top header portion,You will found options like Develope,Emulate,Test,Debug,etc .Click on Emulate ,You will get the following screen,you can also change the device from left panel devices option.



Here you can test your application.

12.Now, Navigate to Test option from header portion.

If you want to test your application on the actual device ,Intel XDK provides testing and debugging option,so that you can test your application real time and actual environment.

By clicking on Test menu ,you will be asked for the following option ,click sync to upload your entire code to the server, after that the testing will available for you, One more thing is that you need to download and install INTEL app preview to test your application in your device .You can get it from the marketplace of your mobile OS Read More.

For debugging,You need to enable developer mode from your device and install the drivers for your device to your machine.After that connect your device to the computer using a USB cable.



Testing and Debugging are extremely important while creating a real-time and advanced application.Right now It does not need testing and debugging.

13.Now click on build option to build your application.

Building option

Building option

You can see the multiple building options are given here. The core feature of Cross platform development,write once and use this code for the various platform.Right now we will choose android . Click on build button.

14.After a few minutes ,you will found a screen with build your app button click on it.

Build your app

Build your app

15.After a time ,your app will be ready.Click the download button to download it.You can also mail the application from here.It will take some time for downloading.

Cross Platform Development using Intel XDK

Download the app.

[sociallocker]Download the complete source Code[/sociallocker]

To learn more about intel XDK ,Visit our blog regularly.

Contact Us for creating cross-platform mobile application development

I hope you will find this post very useful regarding Cross Platform Development using Intel XDK . Let me know any questions if you have in comment regarding Cross Platform Development using Intel XDK. I will reply you ASAP.

Have you got a cool idea about Cross Platform Development using Intel XDK ? Contact us Now to get a free consultation on your idea. Alphanso Tech is rated as one of the best Cross Platform Development company in India.

Post by Milan Sanathara

I am iOS Application Developer with an aspiration of learning new technology and creating a bright future in Information Technology.

Leave a Reply

Your email address will not be published. Required fields are marked *