Cross Platform Apps Development and using Intel XDK

What is a cross-platform app?

Cross-platform mobile development means development of mobile app that works on multiple platforms. Simply you are writing a single code that works on multiple mobile platforms like android, windows, ios etc. Cross platform development tools reduce the cost and increases the speed of the app.

The best cross platform tools are:

• Sencha
• PhoneGap
• Intel XDK
• Appcelerator Titanium
• Cocos2d
• Unity 3D
• Corona
• Qt
• Xamarin
• Alpha Anywhere
• 5App

Why HTML5 and Intel XDK?

Instead of mastering almost of the crowded programming technologies such as C# and Windows APIs and Visual Studio; Objective-C/Swift and iOS APIs and Xcode; Java and Android APIs and Eclipse; and so forth, you can take advantage of cross-platform HTML5 languages, APIs, and tools. Rather than porting code to a specific platform, you can focus your things that really matter: developing the right features for your app and perfecting the user experience. Because your code is written using HTML5, your app works on new devices as they hit the market.

The Intel XDK is an integrated set of development tools for HTML5 app development. It eases the development of HTML5 apps for many platforms and stores, allowing developers to realize the HTML5 write-once, run-anywhere.

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 featured and more hardware interactions.

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

Download

Click here to download the Intel XDK.

Available Platform

The Intel XDK supports all major platform including Microsoft Windows, Apple OS X, Linux and Other OS.

Microsoft Windows: The Intel XDK requires Windows 7  or higher.

Apple OS X: The Intel XDK requires at least version 10.7 of Mac OS X.

Linux/Other OS: The Intel XDK recommends Ubuntu version 12.x or higher.

Installation

Installation Instructions is very simple for this version of the Intel XDK. There are three simple steps for standard installation. This installation instructions  is for Microsoft Windows platform. Other platform installation instructions is almost similar to this one.

1. After download, locate and open the Intel XDK install file.
2. You will see a launch screen followed by a series of install screens. Click next until install is complete.
3. After install is complete, locate and launch Intel XDK.

Here is the first look of the  Intel XDK.

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

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

1.After login you will get a following screen.

Initial XDK screen

2.Click on Start A New Project.

Start with intel XDK

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

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

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

Select design framework

Here is your initial screen after create a project,In screen you can see the left side bar displays the directory structure of 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.

5.initial_screen

code_screen

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

Set header

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

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

name_background

set_background

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

-Check/Uncheck label option to add/remove 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 textbox  in every row.

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

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.

2 3 4 5

<script>             $("#at_login").click(function(){                window.location='success.html'; //on click of button,it will redirect to success.html page             });         </script>

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

create_new_file

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

Emulate

Here you can test your application.

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

If you want to test your application in 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 following option ,click sync to upload your entire code to 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 market place of your mobile OS Read More.

For debugging,You need to enable developer mode from your device and install the drivers of your device to your machine.After that connect your device with computer using data 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

A you can see the multiple building options are give here. The core feature of Cross platform development,write once and use this code for 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

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.

Download the app and Install it.