Overview: Using the Intel XDK NEW Development Tools

Legal Information


The Intel® XDK NEW development system is for those developers who wish to use their HTML5 expertise to build hybrid HTML5 apps for mobile devices (e.g., phones and tablets) and other platforms that host HTML5 web apps (such as a Google Chrome* extension or a mobile web site). To get started you must first download and install the Intel XDK NEW on your Linux*, Microsoft Windows* or OS X* development system.

The Intel XDK NEW application consists of a set of development tools to help you code, debug, test and build mobile web apps and hybrid HTML5 apps for multiple target platforms. This document provides a general overview of the main Intel XDK NEW elements; detailed instructions for each tab can be found by referring to the links in this quick overview. Tabs in the tool are directed at different stages of the development process. These tabs are presented in the order that you will normally use them; but there is no requirement that you use them in the order presented, you can jump between the tabs as your development requires.

If you are unfamiliar with the concept of using HTML5 to build cross-platform hybrid apps, you can read Building Cross-Platform Apps with HTML5 before you begin using the Intel XDK NEW.

Managing Projects

Each project in the Intel XDK NEW corresponds to an HTML5 app. You can create an HTML5 project from scratch, by importing existing HTML5 apps or by modifying any of the provided sample apps. Whether you create an app from scratch or import an existing app, an app is considered a "project" by the Intel XDK NEW if it conforms to the following two rules:

  • All files are contained within a hierarchical set of folders emanating from one root folder.

  • An index.html file is located in that top-most (root) directory of the project's folders.

When a project is created or imported, the Intel XDK NEW creates a special <project-name>.xdk file and locates it in the same directory as the project's index.html file (in the project's root directory). This special <project-name>.xdk file is used by the Intel XDK NEW to manage your project; it does not contain project code nor is it required for your application to execute on a real device. If you delete, relocate or corrupt this file you can recover it by simply importing your project into the Intel XDK NEW and it will create a new <project-name>.xdk file.

Note: The currently active project is always highlighted in the project tab and is the project on which all other tabs operate. The tools in the Intel XDK NEW operate on only one project at a time.

Editing and Designing a User Interface (UI) Layout

Within the Develop tab you will find two tools: the Brackets* code editor and the App Designer UI layout editor. The Brackets editor is a text editor with features specific to editing HTML5 files (JavaScript*, HTML, CSS, etc.). App Designer is a drag-and-drop HTML layout editor with an emphasis on responsive design, especially related to different screen sizes and orientations. You can switch between Brackets and App Designer at any time during the editing process.

Note: You are not required to use either of these tools to edit your HTML5 project files (i.e., JavaScript, HTML and CSS files). If you prefer, you can edit your application files using your favorite code editor, even while the Intel XDK NEW is open; all of your project files are stored locally on your development system.

The App Designer is a "round-trip" editor; meaning that you can directly modify the HTML layout it creates and see your changes in App Designer. This works only as long as you do not modify the App Designer class="uib*" tag labels ("uib" stands for "user interface builder"). Any elements that the App Designer does not recognize will be still be rendered in the layout edit window, but will not be editable within the layout view. Within App Designer you can only modify those elements that App Designer recognizes as UI elements.

This round-trip feature of the App Designer is very powerful. Most UI design tools put you on a "one-way" street, where you can mockup a layout, generate code and then are left to finish the work by hand or restart from scratch if you find the layout does not meet your needs. With the UI designer your layout tasks now become part of a more powerful iterative process.

The elements you import into an App Designer layout are built on several popular UI framework libraries. When you first create a layout you choose the UI framework that App Designer will use to build the layout.

Debugging Your Hybrid Mobile App

Apps that only use standard HTML5 APIs and interfaces can be debugged in a standard desktop browser; however, apps that use APIs that go beyond the reach of a standard browser (such as Cordova* device APIs) require something more than a standard browser. Debugging hybrid HTML5 apps is complicated by the fact that hybrid apps have access to device sensors and other features that are "off limits" to standard browsers.

The mobile device simulator found under the emulator tab gives you the ability to debug your app's complete functionality, including device APIs, as well as preview your app's layout in virtual mobile devices that span the range from phone to tablet to Ultrabook™. Within this tool are panels that allow you to configure the virtual environment seen by the application under test. For example, the GeoLocation panel lets you select the location returned to your app when it calls the Geolocation API.

Selecting a virtual device determines the size of the visual frame rendering your application and allows you to see how your app reacts to orientation changes (from portrait to landscape mode). Testing your app this way, with different virtual devices and orientations, helps you to quickly determine how well your application will work with a variety of screen sizes and aspect ratios.

Debugging in the mobile device simulator is nearly identical to debugging in a desktop browser. The "bug" icon located in the toolbar opens a built-in copy of the Chrome DevTools* for direct debugging of your app's JavaScript code, CSS rules and DOM elements.

Using the built-in Chrome DevTools (CDT) you can set breakpoints, single step and display variables in your JavaScript code. You can also do full Document Object Model (DOM) debugging; that is, you can display the HTML elements that are being rendered, see their relationship to the display, and set breakpoints on DOM events. You can also see the effects of CSS on the DOM. You also have access to the CDT JavaScript console, where you can view your application's console.log messages and interact with your app's JavaScript context by manually inspecting properties and executing methods.

Testing on a Real Device

While the device simulator (described above) is a very useful debug tool, ultimately you will want to see how your app looks and performs on real hardware. You can always perform an ad hoc (aka test or debug) build of your app and load it onto a real device, but your ability to debug using this approach is very limited. In addition, the time and effort required to make changes to your app, build your app and then reload your app onto a real device may limit your willingness to take this approach when testing your app. Fortunately, there is an alternative.

From the Test tab you can push your app remotely to a real device, over the Internet, without having to perform a full build. Your app is loaded into a container app on the real device that is representative of the native wrapper included with your app when you build (or package) your app (see next section). Using this process you can evaluate how your app behaves on a real device, and remotely debug your app while it runs on the real device using a tool similar to CDT (above).

Remote debugging means you debug the code running on the real device using a debugger that runs on your development system. Remote debugging allows the debug user interface to not be confined by the display limitations of the mobile device under test. Remote debugging offers many of the same capabilities as debugging in a standard desktop browser or the mobile device simulator (above).

Remote debugging is implemented using an open source tool named weinre*, which stands for Web Inspector Remote. Weinre provides a subset of the capabilities found in CDT; in particular it does not support JavaScript debugging (setting breakpoints, single stepping, etc.). It can, however, access the DOM rendered in the target system and capture console output.

Before you use the remote debug features of the Intel XDK NEW you must first download and install the special container app described earlier in this section. This application can be downloaded from the primary store for your device (e.g., Apple Store* and Google Play*). For more information please refer to the detailed instructions for the Test Tab found in the quick overview.

Note: At this time the remote execution and debug features described above are limited to Apple iOS* and Google Android* devices.

Packaging Your App for Distribution

By now you are probably aware that HTML5 apps are not limited to execution in a desktop or mobile browser. By packaging your HTML5 web app you can deploy it as a locally installed hybrid mobile app. This enables the use of the same distribution and monetization channels as native mobile apps, as well as the same app installation and launch experience.

In order to deploy your application as a hybrid mobile app you must build it. The build process packages your app into a format that can be submitted to a mobile app store and, ultimately, downloaded and installed on your customer's mobile device. All of the popular mobile platforms (Android, iOS, Windows 8*, Amazon* and Nook*) as well as future mobile platforms (Tizen*) are supported by the Intel XDK NEW. Builds are performed in the cloud, so you do not need to install and configure the SDK for each target platform on your development system, as you need to do if you are building a Cordova (aka PhoneGap*) app.

Like a native app, in order to submit your hybrid app to a store you must obtain the proper developer credentials for that store. The procedure and costs associated with becoming a developer for a specific store vary and are not facilitated by the Intel XDK NEW. In those cases were you wish to use the Intel XDK NEW to package your app for submission to a store you will have the opportunity to include your developer credentials in the package, minimizing the effort required to go from the build step to the submission step.

Note: Submission of your packaged app to the respective app stores is not a feature of the Intel XDK, it must be performed manually, outside of the Intel XDK NEW.

Including Third-Party APIs and Web-Service APIs

Just as in the case of a web app designed to be hosted by a server and viewed in a desktop or mobile browser, you can use third-party cloud services (web services) and JavaScript libraries within your packaged hybrid mobile app. The same Cross-Origin Resource Sharing (CORS) restrictions (if any) that apply to server-hosted web based HTML5 apps also apply to packaged hybrid apps.

Within the Services Tab of the Intel XDK NEW you will find third-party web services that either provide direct support for applications built using the Intel XDK NEW or have a relationship with the Intel XDK NEW. You are under no obligation to use any of the services presented in this tab. Likewise, you may use any cloud services that are appropriate for your app. Please contact your third-party cloud services provider for information regarding service costs, licensing and technical help.

For more information please refer to the detailed instructions for the Test Tab found in the quick overview.