Exploration with Intel XDK

• Download Geolocation.rar - 6.3 KB
• Download Abhishek3.rar - 425.1 KB
• Download Abhishek3.crosswalk.x86.20140824201436.rar - 19.6 MB
• Download Geolocation.android.20140824193305.rar - 1.1 MB
• Download Abhishek.android.20140824204443.rar - 2.6 MB
• Download Abhishek.android.20140824204443.zip - 2.7 MB
• Download Abhishek3.crosswalk.x86.20140824201436.zip - 19.6 MB
• Download Abhishek3.zip - 434.9 KB
• Download Geolocation.android.20140824193305.zip - 1.1 MB
• Download Geolocation.zip - 6.5 KB

Introduction

This article covers building apps with GPS,Touch and Motion Sensors. I have used Intel XDK as IDE and HTML 5 and JavaScript to build the apps.The apps built here have used different demo project that are there in  Intel XDK.

Background

This is an attempt to bring in Three.js ,Crosswalk and WebGL touch examples to android platform. This app also uses Geolocation API to access the position of the user. This also touches a simple Accelerometer example.

Things that will be covered

 Using the flavor of cross platform IDE and then finalizing the  app for Android

HTML 5

Using HTML 5 to explore the opportunities of creating apps targeting to motion sensor and others.

The major part will show how to use HTML and Intel XDK to setup and compile apps for Android    Platform.

As I have already covered Intel XDK ,let me discuss it again it in brief .It is a cross platform IDE  from Intel which is free to use and can be used to build apps for different platforms. Intel  XDK allows you to simulate the app and then finalize it for the build.

What  I will be using   for  this tutorial

• JavaScript Libraries
• Three.js  :- to show the touch examples
• The inbuilt CrossWalk  app to extend the app for Android
• Geolocation API :-The inbuilt Demo for Accelerometer for Android in Intel XDK and extend it

Geolocation

Start  a new project  from Intel XDK and then start with a blank template

Name the project.

you  need to modify the index.html page for  accessing the GeoLocation API .I have used a project that is already described at (http://www.html5rocks.com/en/tutorials/geolocation/trip_meter/)

let's see how the author has implemented Geolocation API and how we integrate in the index.html page

I am using the Geolocation API from (http://dev.w3.org/geo/api/)

This Api allows us to find where user is and is an easy way to see how Geolocation works

Checking for the Geolocation object

Saving the project and checking it in emulator helps us to see how it behaves

Next we need  create the build for the project.

On the build page click on build app now

The app will be build

Build log is created

TIPS

Using Intel XDK we found that we can easily build a geolocation app for Android platform using the blank template. Further  we were able to simulate the app and then build the APK(which will be created at Cloud and then we download it).

It's an easy wish for a HTML 5 developer to create  an android app without doing anything out of the zone.

TOUCH

For the  touch example I will be using the Intel XDK plus the CROSSWALK build from the demo app to finalize the app. The basic thing here is I will be using Three.JS Library to create a good GUI experience for the project. The Crosswalk build for Android allows us to build WebGL  based apps to android  platform.

We start the project creation by using the demo that is already there in the Intel XDK that is the Crosswalk demo and then name it to our liking

we use two Three.js libraries(stats.min.js  and three.min.js)

as we have already seen in my previous article for Intel XDk we use the same understanding as declare the Java Script accordingly.

Now we need to a simulation of the project to see how the touch behaves

The simulation allows us to check how the project will behave when the apk is created. Here you can check the effective usage of Three.JS library

Now on the build menu there will be a popup that says the build should be of crosswalk platform for Android. The next menu will ask for that all Cordova  plugins are selected. Then click on build. There will be two builds for the project(one for X86 and other for ARM devices)

TIPS

The things we learnt in here is to bring to life WebGL with Android we need to have the crosswalk build for the app.  I can use a demo app as my base and then extend it to my liking to increase the functionality of the app. Intel XDK allows us to quickly create a touch enabled app without any hassle and keeping the basics of HTML 5 intact.

MOTION SENSOR

For this project I will be using the demo  that's given in  Intel XDK  for Accelerometer and modify it some changes.I will be using Accelerometer example the rolling can demo for the app.

I will change the image icons in the directory to give the feel for Bob(Codeproject frame)

after adding the images in the folder we get the following result as shown in simulator.

Now the build. Build will be the normal Android App .We are ready to get rolling with accelerometer.

TIPS

Easily we made changes to the simple images and I get a different looking app alltogether.So its easy to create accelerometer or motion sensor based app using HTML5 and JavaScript APIs.

References

• http://aerotwist.com/tutorials/getting-started-with-three-js/
• http://threejs.org/docs/
• http://xdk-software.intel.com/
• http://learningthreejs.com/
• http://code.tutsplus.com/tutorials/webgl-with-threejs-basics--net-35688
• http://blog.teamtreehouse.com/the-beginners-guide-to-three-js
• http://www.johannes-raida.de/tutorials/three.js/tutorial02/tutorial02.htm
• http://en.wikipedia.org/wiki/Main_Page
• https://github.com/mrdoob/three.js/
• http://www.html5rocks.com/en/tutorials/geolocation/trip_meter/

History

The first update made