The mobile industry has been using HTML5 for some time now. There has been enormous growth in the mobile market in recent years. From the ability to click a button to gestures, multi-touch, GPS, and a compass—pretty much whatever we could possibly desire is now available on our phones. The progress is quite astounding.
Regarding the platforms, Android and iOS have seen significant change. In this large mobile world, relatively few manufacturers have succeeded in providing their own platforms, such as Nokia’s Symbian and Samsung’s Bada. The question now is, “What is the future platform or programming language we should use to program our app?” because everyone dreams of being a developer and making their own app or game.
When it comes to mobile operating systems, there has been a significant development in mobile apps. Platform owners are increasingly recruiting them, rewarding them, and allowing them to monetize their apps, even if one platform’s success depends on an application that is needed by another platform.
However, this lands a problem for the developers who are as much confused about putting in their time and effort as they are worried about the monetization possibilities on these platforms. Some of the monetization channels are available in the form of subscription.
The hurdle of learning each and everything attached to new API and a new platform is a bigger issue than it is normally perceived. It is not meant that is complex and difficult but it takes time. Whenever the new API, updated version got released then it becomes complex.
Many of us have a standard platform like iOS, Android but similarly, we had so many problems like android is running on innumerable devices with various specifications, display sizes so it makes difficult to develop it.
A possible solution to these problems is HTML5. It is the technology that is supported by all devices. It is easily accessible irrespective to hardware. HTML always directly interacts with the hardware and runs in an interface with a part of the browser.
This provides an experience to the user which works almost at par with most native applications in the combination with other client-side technologies such as JavaScript and CSS3. This creates an interface which is flexible and responsive. Most of the social media shifted to HTML5. Sencha have already given their word how responsive HTML5 is. HTML5 uses cache and it helps to reduce server load and makes an application to available offline.
Advantages with HTML5 is once the application is developed it can be packed and can be run in a browser. It brings embedding audio and video media. It has inbuilt geolocation support. Keeping this in mind Intel have released the Intel XDK, HTML5 App Porter Tool, and many others.
Introduction of Intel-XDK
Intel-XDK can be simply defined as a sort of cloud-based IDE which supplements the HTML5 mobile app development. One of the main features of is the emulation of a lot of devices for HTML5 based apps and even hybrid native apps. Some of these devices include iPhone, iPad, Samsung Galaxy S, Galaxy Tab, Microsoft Surface, and ultrabooks.
It supports the features that never heard before like accelerometer emulation across all three axes, multitouch, geolocation and allows the developer to choose the current data connection type for emulated device.
Multitouch emulation has a nice touch to it too, one can just hold the right mouse button anywhere on the emulator screen and then left-click to provide multiple touch inputs. This is one of the functionalities which is supported by HTM5 apps. It offers a good compromise of providing access to functionality like the accelerator and other sensors which are unavailable to HTML5 tools.
In editor mode, one can very well choose to develop the app in their own IDE and upload their code in order to test in an emulator. The editor mode also supports the development of server-side components and has ready-made templates available for ASP and PHP.
Installing XDK
XDK can be installed on all three platforms which include Mac OS X, Windows, and Linux but you must have installed java and google chrome installed in it. There is also a Google chrome plugin available in the web store that provides a button to load XDK in its java applet.
Installation is very easy as we do for a software’s. After installation, it provides you a login screen if u don’t have an account just provide your valid Email after that you will be redirected to sign up a screen asking for further details. Once done you can log in and you will be providing Intel’s Hello World app. You can also browse and load other samples and demo’s bundled with the IDE.
Your first app
To begin creating your first app, click on the start new button on the top left corner and you will be presented with a setup of HTML5 application asking for the details of the project. Once done as you will be guided by the screen. It also asks you what you want to build up from the pre-existing demo.
Use app starter wizard or use the Game Dev Mode which integrates the features for ImpactJS and Ejecta based simulation for simple and 2D physics games. You can also upload a ready-made zip file of HTML and JavaScript for the app.
For the purposes of our demo, creating an app from the app starter wizard would be the best way to describe all the features provided by the XDK. Wizard is basically a three-step process which helps to make a template for our application.
It uses an app framework, a JavaScript library to supplement mobile application development. Intel app framework is a query selector JavaScript library which supports the Intel XDK and its HTML5 tools. It also includes the User Interface framework that works on all platforms and is known to be best supported by all WebKit browsers.
Wizard lets you select the theme for your app you will have a choice to choose between Frosty, Carbon, Slate, Volcano and Eco. Each has its own CSS (Cascading Style Sheet) to your HTML5 app. Then setting of your navigation icons. You can choose the Navigation Icon and Transition for each field. You can also preview your navigation bar there if you want by clicking Preview Navigation arrow. It gives you a preview of your app on mobile.
Lastly setting up your pages for each navigation icon and specify each CSS for your every page. Once done then click on the generate button and template application is generated for you. The source files for this template is viewed and edited in editor mode. You have a choice to edit these files in your text editor. It is very easy to complete the remaining process if you know HTML5 and JavaScript.
Testing can be done on the real device using an app lab mobile application. You can test it in a local wifi network. The debug console can be used to perform one of those benefits of using HTML5 where no action is required on part of the user, not even an application download.
You can set up such updates in four types, one is to just update the app immediately, load it at the next restart, request permission from the user to load an app or just to post a notification to the user when an update is available.
Multiplayer functionality for gaming is available in the form of leaderboards and achievements are also available. PushMobi functionality allows the user to subscribe to the developer messages. The Intel AppAds functionality allows you to monetize their application.
XDK also supports the integration of PhoneGap applications, which can be coded and built inside the XDK IDE. This integration solves the problem of PhoneGap developers, thus ridding them of the headache of setting up a local development environment.
To perform a test build of the application, you need to go to app development center to submit details about the application and its platform. You can choose
- iOS
- Android
- Amazon
- Nook
- Windows 8
- Windows Phone 8
You can also choose to be a desktop app. Even Facebook and chrome are available as a valid choice for target platforms. If you choose these platforms it asks about the credentials. It lies at the top right. Dev center allows you to build test builds as well as actual builds.
This helps you to publish your application directly to the respective application store but to perform this you have to fill some details like Project ID, API key in android similarly in other platforms version number, title, icon etc… once you are done you can see green build app now button. Once build is completed you can see a Build successful screen and then email including the link to the download of the final built application.
Dev center has an advantage that you need not develop the app inside XDK, you can code yourself, zip it and then build your application. You can also email the application bundle and also has a debugging script available to check the application.
Game development
XDK also supports so many game engines in HTML5 standards. The most famous is ImapactJS which is integrated to XDK interface with the Weltmeister editor to create levels tile by tile inside the Game Dev mode. There are other tools like Scirra which provides drag and drop game creation who doesn’t have much programming experience. Other engines are like LimeJS, Box2DJS, and the Render engine.