Making Apps with Intel XDK

Intel XDK absolutely lives up to what it says on the tin - providing us with HTML5 cross platform tools. It can be downloaded from here.

Once downloaded, load Intel XDK and open the first project as plain HTML5 project. The screen look like this:

Intel xdk One

 

Main Parts

There are three components in the window that are easily recognizable:

  1. The left pane where major files are located
  2. The tabs for developing, emulating and testing
  3. The code window in which you write your code for the app

Now, let's make our first app on Intel XDK.

Launch Intel XDK and create your first project. Let's use HTML5 standard template for the project. This is what Intel XDK says about standard HTML5 template:

"Standard HTML5 - This project code base uses HTML5 and JavaScript* code, may use W3C* standard APIs, but does not support the use of Apache Cordova* APIs (aka Cordova* plug-ins). It can be deployed as a packaged hybrid mobile app on many platforms (Android*, Android Crosswalk*, Apple iOS* and Microsoft Windows 8*) or as a hosted web app for certain web- or OS-based platforms."

Now type the following code in the body section:

<h1>My First App</h1> <!-- Add your HTML here -->
<h2>Interactive Colour Ball</h2>
<p>The animation allows you to use the three primary colours - red, gree and blue - to produce any other colour that you can think of.</p>
<p> In theory, it can produce 16-million colours, depending on the values of red, green and blue.</p>
<div style="text-align:center;">
<canvas id="myCanvas" width="200" height="200" style="margin-top:15px;margin-bottom:15px;"></canvas>
</div>




Red0255
Green0255
Blue0255

Move the slider of colurs, experment with them and enjoy!


Let's turn to styling now; it is fairly simple. Type in the following code inside <style></style>, in addition to what is given by Intel XDK:

h1{text-align:center;color:blue;}
h2{text-align:center;color:olive;}
h4{text-align:center;}
.bot{text-align:center;color:olive;font-size:medium;}

Now, the most important part; the 'engine' of the app - JavaScript code - that makes the app fully interactive must be included. In this case, it is included inside the HTML5 document for clarity. Intel XDK recommends placing the code inside special folders.

<script type="text/javascript">
var canvas = document.getElementById('myCanvas');
var context = canvas.getContext('2d');
var radr; var radg; var radb;
context.beginPath();
context.arc(100, 100, 100, 0, 2 * Math.PI, false);
context.fillStyle = 'blue';
context.fill();
function fun() {
radr = eval(document.getElementById('redp').value);
radg = eval(document.getElementById('greenp').value);
radb = eval(document.getElementById('bluep').value);
var col = 'rgb(' + radr + ',' + radg + ',' + radb + ')';
context.clearRect(0, 0, 200, 200);
context.beginPath();
context.arc(100, 100, 100, 0, 2 * Math.PI, false);
context.fillStyle = col;
context.fill();
context.font = "16pt arial";
context.fillStyle = 'red';
}
</script>

Now, save the file and press emulate tab.There are emulators for all major mobile platforms:

  1. IOS
  2. Android
  3. Windows

You will see your first App. You will see your first app like this: Voila!

Intel xdk Two

 

Intel XDK has tools to check how the app works on real life platforms - Android or IOS. This is how it works on emulators:

Intel xdk Three

 

 

 

 

 

Resources at Fingertips

There is a significant selection of tutorials here, covering ASP.Net, HTML5, CSS3 and JavaScript. They are categorized clearly for you to access them easily on any device - desktops/laptops, smartphones and laptops.
There are quite a few of them on HTML5 Canvas and CSS3. In addition, there are tutorials on JavaScript and ASP.Net too.

Email: 

Stand Out - from the crowd

students

"There's no such thing as a free lunch."

The best things in nature are free with no strings attached - fresh air, breathtakingly warm sunshine, scene of meadow on the horizon...

Vivax Solutions, while mimicking nature, offers a huge set of tutorials along with interactive tools for free.

Please use them and excel in the sphere of science education.

Everything is free; not even registration is required.

 

 

Recommended Reading

 

The best book to master HTML5 canvas animations. The author tells you how to manipulate the canvas element with JavaScript in a progressive way - starting from the easier to harder worked examples. It is ideal for anyone who wants to be a game developer in HTML5.

Advertisements

Advertisement