Tutorial: Get Started with the Intel® XDK

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 promise.

This 15- to 20-minute tutorial helps you get started with the Intel XDK by walking you through a typical end-to-end workflow you can ultimately apply to your own app development process.

After you complete this tutorial, you should be able to:

• Create your new app and set app package options.

• Preview app functionality on various virtual devices.

• Edit your app files with the built-in Brackets* code editor.

• Debug your app with the built-in Google Chrome* Developer Tools (CDT) debugger.

• Evaluate how your app looks and performs on real physical hardware.

• Package your app for submission to various app stores and/or for hosting on the web.

This tutorial covers a core set of Intel XDK features to help you learn the app development workflow. It does not cover web services, on-device debugging, performance profiling, Internet of Things (IoT) with node.JS apps, or HTML5 game development.

Requirements:

• Intel XDK installed on a Linux*, Microsoft Windows*, or Apple OS X* development machine

• App Preview installed on a test mobile device on which you want to run the result of this tutorial, such as a smart phone or tablet

Install the Intel XDK on Your Development Machine

If you do not already have access to the Intel XDK on your development machine, download it from http://xdk.intel.com.

Install App Preview on Your Test Mobile Device

App Preview lets you run Intel XDK project files on real physical hardware without performing a full build.

If you do not already have the App Preview tool installed on your test mobile device, download this free Intel app from the Apple* App Store, Google* Play Store, or Windows* Phone Store.

Access the Intel XDK

1. Launch the Intel XDK on your development machine.

2. If necessary:

   • Log in.

   • Sign up for an account. User Name = Your email address.

A typical Intel XDK project, which corresponds to an app, is comprised of a code base of:

• HTML

• CSS

• Images

• JavaScript* language

• JavaScript* API references that let your app interface with the mobile device on which it is running

Let’s jump-start this tutorial using a working demo app as the base for your new app.

If:

• This is your first project in the Intel XDK - The Intel XDK displays the START A NEW PROJECT palette in the PROJECTS tab and offers an opportunity to take a Quick Tour when project setup is complete.

• You already have active projects in the Intel XDK - Click the PROJECTS tab drop-down arrow to display the YOUR INTEL® XDK PROJECTS dashboard. Then click the NEW PROJECT button to display the START A NEW PROJECT palette.

Get to Know the START A NEW PROJECT Palette on the PROJECTS Tab

	1	Start with a Template - Use to build an app based on different types of app user interfaces, such as a list view, tab view, or side menu. You can also choose a simple blank template to start with an essentially empty project.
	2	Work with a Demo - Use to open a complete, working project to jump-start your own app, learn how HTML5 apps work, or learn how the Intel XDK works. (This is what we will do in this tutorial.)
	3	Import an Existing HTML5 Project - Use to create an Intel XDK project by importing an existing HTML5 app, such as an app created using Adobe PhoneGap* or Apache Cordova* APIs, HTML5 APIs, Intel XDK device APIs, or the appMobi* XDK.
	4	Start with App Designer - Use to quickly create an app UI in common UI frameworks (App Framework, Bootstrap, jQuery Mobile, or Topcoat) using this drag-and-drop HTML5 layout editor that emphasizes responsive design layout.

Choose the Hello World Demo App

1. On the START A NEW PROJECT palette on the PROJECTS tab, choose the Work with a Demo option to display a library of available demos.

2. Scroll to and click the Hello World demo image.

3. Click the Use This Demo button to start setting up your new project.

Create the XDKTutorial Project

1. Name your project XDKTutorial, save it in C:\Users\[userid]\XDKTutorial, and click the Create button to create your project.

2. On the Congratulations! dialog box, click the LET'S DO IT button to take a Quick Tour that provides a basic explanation of the Intel XDK UI.

3. When the Quick Tour is complete, the Intel XDK displays the DEVELOP tab, which is where you perform most of your app development.

Because we started from a demo, we can immediately preview the XDKTutorial app in browsers, on real devices, or on virtual devices using the LIVE DEVELOPMENT TASKS palette in the DEVELOP tab.

1. In the LIVE DEVELOPMENT TASKS palette in the DEVELOP tab, click Live Layout Editing to display preview options similar to the following.
   
2. Click Run My App to display preview options similar to the following.
   
3. Click the Run in Emulator icon to display an Intel XDK Emulator floating window similar to the following.

Get to Know the Intel XDK Emulator Floating Window

Play with Your App, Virtual Device Skins, and Palettes

Try:

• Running your XDKTutorial app - How can you possibly resist clicking the Beep! button?

• Choosing a different virtual device - Click the DEVICES palette drop-down arrow and choose among the skins.

• Changing virtual device orientation - Click the orientation icons in the DEVICES palette.

• Opening and closing each palette - Click the palette header bar.

• Hiding and showing each palette column - Click the and controls.

• Moving a palette - Click and drag a palette header bar to move it up or down the palette column or to another column.

More Handy Information

• The emulator is also accessible from the EMULATE tab.

• The Intel XDK Emulator floating window is also accessible by clicking the Undock icon at the top right corner of the EMULATE tab label.

• The Undock icon at the top right corner of the EMULATE tab label changes to a Dock icon and the EMULATE tab is disabled when the Intel XDK Emulator floating window is displayed. To re-enable the EMULATE tab, either close the floating window or click the Dock icon at the top right corner of the EMULATE tab label.

• The emulator is actually a web app that runs inside a node webkit. Your app runs within an inner HTML frame.

• The runtime engine rendering your HTML5 code in the emulator is based on the Chromium open source browser. This up-to-date web runtime engine may implement HTML5 features more correctly than the web runtime on a real mobile device, especially if that mobile device has an old OS version.

• You must include these <script ...> tags to implement Cordova* 2.x and 3.x core APIs, and Intel XDK APIs in the emulator:

  <script type="text/javascript" src="cordova.js"> <script type="text/javascript" src="intelxdk.js">

• These intelxdk.js and cordova.js references are needed to use the Intel XDK emulator and TEST and BUILD tabs; however, the intelxdk.js and cordova.js files are not needed within the project because the emulator serves them automatically within the emulator environment.

• Previous versions of the Intel XDK or appMobi* software refer to appmobi.js in source files. Replace all mentions of appmobi.js with intelxdk.js.

• The emulator does not support the use of *.mp3 audio files.

Let’s add some functionality to your XDKTutorial app. If necessary, click the DEVELOP tab to display a window similar to the following.

Get to Know the DEVELOP Tab

Use the Built-in Code Editor to Edit Your Code

1. Use the built-in code editor to uncomment <script src="js/debug.js"></script> near line 10.

2. Choose File> Save to save your edit and change the contents of the Intel XDK Emulator floating window.

More Handy Information

• The built-in code editor is based on the Brackets* editor, so you can easily add Brackets* extensions (File > Extension Manager).

• If you use a code editor external to the Intel XDK, you must click the Reload App icon on the toolbar to update all files and restart your app when you return to the emulator.

• If you create an app using the App Designer (Hello World demo files were not created with the App Designer), the Intel XDK offers the CODE and DESIGN views in the DEVELOP tab so you can switch back and forth between the built-in code editor and the drag-and-drop HTML5 layout editor:
  

• The App Designer editor is available only when you are editing HTML5 files created with the editor.

• The App Designer is a round-trip editor. For example, you can start creating your apps in the App Designer, switch to the code editor to view the code corresponding to your layout efforts, modify code in the code editor, then switch back to the App Designer to view those modifications – as long as you do not change the App Designer class=”uib*” tag labels (uib stands for user interface builder).

• Any elements the App Designer does not recognize are still rendered in the DESIGN view; however, they are not editable in the DESIGN view.

Let’s check the result of your edits to your XDKTutorial app.

Test App Functionality

Caution: The processor on your development machine is probably faster than the processor on a real mobile device, so performance problems are typically not visible in the emulator.

1. Notice there are two new buttons in your XDKTutorial app in the Intel XDK Emulator floating window: Good and Bad.

2. Click the Good button. Notice the header changes to Hello Good!

3. What do you think will happen when you click the Bad button? Try it. Not what you expected? Guess it is time to debug.

Use the Built-in CDT Debugger to Debug Your App

1. Click the Launch Debugger icon on the Intel XDK Emulator toolbar to open a built-in version of the CDT debugger in a floating window.

2. Click the Sources button to open a file.

3. Press Ctrl+O and choose the debug.js file.

4. Scroll down to near line 46 to display a window similar to the following.
   

There is the problem!

Correct App Code

Caution: Modifying code in the debugger window impacts future app behavior in the emulator; however it does not modify actual source code, so make your source code modifications in the DEVELOP tab.

1. Close the Developer Tools floating window.

2. If necessary, click the DEVELOP tab.

3. In the file tree, open the js folder and choose the debug.js file.

4. Scroll to near line 46 and comment out var breakDebugger = invalidVariable;>

5. Choose File> Save.

Retest App Functionality

Now try clicking the Bad button in the Intel XDK Emulator floating window. Better? If not, click the the Reload App icon on thetoolbar and try again.

More Handy Information

• What you are actually debugging is a simulation of a real mobile device using the Chromium desktop engine augmented with Cordova* and Intel XDK APIs. This simulation is designed to provide an idea of how your app will render on various devices and form factors. Some visual aspects of your app may render differently on real devices, especially if the real devices have an old OS version.

• Using the built-in version of the CDT debugger, you can set breakpoints, single-step, display variables in your JavaScript* code, do full DOM debugging, and see the effects of CSS on the DOM. You also have access to the CDT JavaScript* console, where you can view your app console.log messages and interact with your app JavaScript* context by manually inspecting properties and executing methods.

Now that you are confident your XDKTutorial app works properly on virtual devices, it is time to run it on a real mobile device.

1. Click the TEST tab.

2. Click the I HAVE INSTALLED APP PREVIEW button - because you already did this, right? ;-)

3. Your development machine displays a Please sync with our testing server message the first time you click the TEST tab for a project. Click the DISMISS button so we can first explore the TEST tab.

Get to Know the TEST Tab

Update, Launch, and Test Your App on Real Physical Hardware

More Handy Information

• App Preview keeps track of all the apps you upload to the test server.

• What you are actually testing on the real physical hardware is your app loaded into a platform-specific container app that is representative of the native wrapper included with your app when you build your app.

• Android* mobile devices: If you cannot access the Google* Play Store, click the Information icon to email the App Preview download to your mobile device or copy the App Preview download link to your clipboard.

Now that you are confident the XDKTutorial app works properly on a real mobile device, it is time to build your app. But let's check your app package options first. Click the PROJECTS tab to display a window similar to the following.

Get to Know the PROJECTS Tab

Explore Your App Package Options

Take a moment to check out your app package options.

When you are ready to submit your own apps to various app stores, you will need to supply values, such as App ID, App Name, and App Description. The default values are sufficient for this tutorial.

More Handy Information

• Each project has a <project-name>.xdk file in the root directory. This file does not contain any application code and is not required for your app to execute on a real mobile device.

• Deleting a project from the project list does not delete the project files or directory from your development machine. You can later reopen your project and add it back to your project list using the OPEN AN INTEL® XDK PROJECT button on the YOUR INTEL® XDK PROJECTS dashboard on the PROJECTS tab.

• The emulator notes the core Cordova* plug-ins chosen on the PROJECTS tab and presents to your app the APIs corresponding to those core Cordova* plug-ins when your app runs inside the emulator. The emulator presents to your app the complete set of APIs provided by the Intel XDK plug-ins, regardless of what is chosen on the PROJECTS tab.

• At this time, only the BUILD tab makes use of third-party plug-ins specified in the PROJECTS tab.

It is time to build your app! Click the BUILD tab to display a window similar to the following.

Get to Know the BUILD Tab

Package Your App as a Mobile App for an Android* Store

1. Click the Android BUILD button in the CORDOVA 3.X HYBRID MOBILE APP PLATFORMS region to connect to the build server, upload your XDKTutorial app to the cloud, and display a window similar to the following.
   

2. Notice all packaging configuration has already been performed (in the PROJECTS tab); there is nothing preventing you from building your XDKTutorial app right now. Click the Build App Now button to build the XDKTutorial app as an Android* mobile app and ultimately display a window similar to the following.
   

   If the build fails, click the link to review a more detailed build log.

   The Intel XDK does not provide actual store submission services for your app; however, it does explain a variety of possible next steps (which we obviously will not perform for this XDKTutorial app).

3. Close the Build Page.

More Handy Information

• Builds are performed in the cloud, so you do not need to install and configure an SDK or native development system for each target platform (as you must do if you are building a Cordova*/PhoneGap* app).

• You must obtain the proper developer credentials to submit apps to most app stores.

• With the exception of Crosswalk for Android* packages, all packages use the built-in webview (embedded browser) that is part of the target mobile device firmware to execute (render) your app. For example, Android* packages use the Android* browser webview built into the Android* mobile device, and iOS* packages use the Apple Safari* browser webview built into the iOS* mobile device.

This tutorial walked you through how to get started with the Intel XDK.

Next step: Apply this knowledge to use the Intel XDK to code, debug, test, and build your own HTML5 apps.

The following terms are used throughout the Intel XDK tutorial:

• mobile app: App that executes on a real mobile device. It interacts with users and onboard sensors.

• onboard sensor: Built-in sensor available on a real mobile device, such as an accelerometer, geo location, and similar features.

• plug-in: JavaScript* API plus native code modules that support the JavaScript* API. In essence, when your app calls the plug-in's JavaScript* API, it is redirected to the underlying plug-in native code that implements that API on the device.

• real device: Actual, physical hardware, such as a smart phone or tablet.

• virtual device: Software environment that simulates a real mobile device. It is convenient for testing how an app will look and function on actual, physical hardware.

• web app: App that executes on a web server. To use this type of app, a mobile device uses a web browser and Internet access.

For more information about the Intel XDK and HTML5 development, access the Intel® Developer Zone:

• The main Intel XDK page at: http://xdk.intel.com

• Intel XDK product overview at: http://www.intel.com/software/xdkdocs

Legal Information  *Other names and brands may be claimed as the property of others.

Visit Support Forums

Submit feedback on this page