Intel® Developer Zone offers tools and how-to information for cross-platform app development, platform and technology information, code samples, and peer expertise to help developers innovate and succeed. Join our communities for Android, Internet of Things, Intel® RealSense™ Technology and Windows to download tools, access dev kits, share ideas with like-minded developers, and participate in hackathon’s, contests, roadshows, and local events.

About This Tutorial

The Intel® XDK is a comprehensive cross-platform development environment for cost-effectively creating, testing, debugging, building, and deploying HTML5-based web and hybrid mobile apps.

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.
Edit your app files with the built-in Brackets* code editor.
Preview app functionality on various virtual devices.
Debug your app with the built-in Google Chrome* Developer Tools (CDT) debugger and perform on-device debugging.
Evaluate how your app looks and performs on a real physical mobile device.
Configure build options to prepare your app for submission to various app stores and/or for hosting on the web and build it as a packaged bundle.

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

Prepare for the Tutorial and Access the Intel XDK

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 a real physical mobile device 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

Launch Intel XDK on your development machine.
If necessary:
- Log in.
- Sign up for an account. You can use your email address as your User Name.

Start a New App from a Demo

A typical Intel XDK project corresponds to an app and provides a container for your project files and associated settings. There are three main project types:

HTML5 + Cordova - This project code base uses HTML5 and JavaScript* code, and supports the use of Apache Cordova* APIs (via Cordova plug-ins). It can be built and deployed as a packaged hybrid mobile app for Android*, Android Crosswalk*, Apple iOS*, and Windows Phone* 8.1 or Windows 8 devices.
Standard HTML5 - This project code base uses HTML5 and JavaScript* code, may use W3C* standard APIs, but does not support the use of 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 Windows 8) or as a hosted web app for certain web- or OS-based platforms.
Internet of Things embedded apps (Intel® XDK IoT Edition only) - This project code base consists of embedded JavaScript* intended for execution on a Node.js runtime. This project type is only recognized by the Intel XDK IoT Edition. It requires an IoT maker board and is not built like mobile web apps for phones and tablets.

Let’s jump-start this tutorial using a working, HTML5+Cordova 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 START A 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	Templates - Use to build an app based on different types of app user interfaces. You can also choose a simple blank template to start with an essentially empty project.
	2	Samples and Demos - 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 Your HTML5 Code Base - 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, or Intel XDK device APIs.

Choose the Hello Cordova Demo App

On the START A NEW PROJECT palette on the PROJECTS tab, expand the Samples and Demos option to display a General library of Standard HTML5 demos.
Above the library area, click HTML5 + Cordova to display a General library of HTML5 + Cordova demos.
Click the Hello Cordova demo image.
Click the Continue button to start setting up your new project.

Create the XDKTutorial Project

Name your project XDKTutorial, save it in C:\Users\[userid]\XDKTutorial, and click the Create button to create your project.
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.
When the Quick Tour is complete, the Intel XDK displays the DEVELOP tab, which is where you perform most of your app development.

Edit Your App

Get to Know the DEVELOP Tab

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

1	Use the DEVELOP tab to edit files and add files to your project. You can use the built-in code editor or your favorite code editor.
2	Use the file tree to view the files associated with the active project, including image files, and to choose a file for editing.
3	Use the menu options (or equivalent shortcut keys) to perform common code editor functions.
4	Use the code editor view to edit file contents. Context menus are also available.
5	Use the Intel XDK toolbar buttons (present on all tabs) to access Help information for the displayed tab and general Help information, start the Quick Tour, display and change Intel XDK settings, view recent Twitter Tweets* about the Intel XDK, and display and change account settings.
6	Use the LIVE DEVELOPMENT TASKS palette to preview your code in a browser, on a real mobile device, or on virtual devices. Notice the XDKTutorial app is still running in the Intel XDK Emulator floating window and is set to restart after you save your changes to project files. With Live Editing Layout, code changes appear immediately after you make your edits using the built-in code editor, or after you save project files using an external editor.
7	Use the WEB SERVICES palette to explore built-in third-party web service APIs (cloud services) as well as integrate other third-party web service APIs. This tutorial does not cover web services. See the Develop Overview for more information.

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 Cordova 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 GUI layout editor is available only when you are editing HTML5 files created with App Designer.
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).

Preview Your App on Virtual Devices

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

Get to Know the EMULATOR Floating Window

1	Use the Intel XDK Emulator floating window to quickly identify and fix defects before you test your app on an actual mobile device. You can simulate app functionality on a variety of virtual devices using this device simulator based on the Apache Ripple* emulator. You can also launch a built-in version of the CDT debugger from this floating window to debug app functionality. (We will do this later in this tutorial.)
2	Use the toolbar buttons to reload your app source files and restart your app, launch the built-in debugger in another floating window, display and change emulator settings, and stop executing the app in the emulator.
3	Use the Auto Zoom icon to zoom the device visual representation to the maximum size that fully fits in the window, and the slider to manually resize the device visual representation.
4	Use the palettes in the accordion-style columns to configure various virtual devices that help you quickly determine how well your app works in different orientations and a variety of screen sizes and aspect ratios. You can open and close each palette, hide and show the columns, move columns, and move palettes within a column.
5	Use the device visual representation view and test your app.

Play with Your App, Virtual Devices and Palettes

Try:

Running your XDKTutorial app - Try clicking the Beep and Vibrate buttons and see what happens.
Choosing a different virtual device - Click the DEVICES palette drop-down arrow and choose among the devices listed.
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 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.
The emulator does not support the use of *.mp3 or *.mp4 audio files.

Use the simulator to quickly debug and test your app logic before you test and debug your app behavior on a real device. While the EMULATE tab approximately simulates your app running on a virtual device, it is not without its limitations. For more details, see Device Emulator Limitations.

See this more comprehensive tutorial about the EMULATE tab's simulation features, such as motion, geolocation and compass.

Debug Your App

Using the Built-in CDT Debugger in EMULATE tab

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.
Click the Sources button to open a file
Press Ctrl+O and choose a file from the list.
It should display a window similar to the following:
Correct App Code
- Caution: If you think modifications to your code are necessary, you can do it via the debugger window. However, modifying code in the debugger window only impacts future app behavior in the emulator. It does not modify actual source code. So make your source code modifications in the DEVELOP tab.
- Close the Developer Tools floating window.
- If necessary, click the DEVELOP tab.
- In the file tree, open the file that needs to be modified.
- Choose File > Save.
Retest your app on the EMULATE tab to see your that your changes are now reflected. If not, click the the Reload App icon on the toolbar 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.

For more information about how to debug on the EMULATE tab, click here.

Using the DEBUG Tab

Refer to this tutorial to learn how you can use the Intel XDK DEBUG tab to debug your app on a real mobile device.

Run Your App on a Real Mobile Device

The Cordova beep notification does not work properly in the versions of App Preview on iOS based on Cordova-iOS 3.8. As of this note the current iOS version of App Preview was 2.5.0, which utilizes Cordova CLI 5.1.1. This feature does work in a built app when building with CLI 4.1.2 or higher.

You may need to increase the notification volume on your Android device to hear the beep. On some Android devices the notification beep may be silenced. The notification beep is a system notification, meaning that your Android device and Android system settings determine how loud the beep is and what the beep sounds like.

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

Click the TEST tab.
Click the I HAVE INSTALLED APP PREVIEW button - because you already did this, right? ;-)
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

1	Use the TEST tab to evaluate - over the network - how your app looks and performs on a real physical mobile device without performing a full build.
2	Use the MOBILE button to test via a test server in the cloud. Advantages: Requires minimal setup; avoids potential firewall and network topography issues; you can pull your files down anytime from anywhere in the cloud. Use the WIFI button to test via a local Wi-Fi network to which both your development machine and test mobile device are connected. Advantages: Usually faster once set up; does not consume mobile data; pulls files directly from your development machine.
3	Use the instructions as a refresher for testing via mobile or Wi-Fi, with or without the App Preview QR code reader.
4	Use the PUSH FILES button to push the most recent project files on your development machine to the test server in the cloud.
5	Use the QR code with the App Preview QR code reader (accessible from the camera icon) to launch your app on your test mobile device. Tip: Alternatively, you can launch your app from the Server Apps list (MOBILE mode) or Local Apps list (WIFI mode) on the App Preview tool.
6	You can also remotely debug your app while it runs on real physical mobile device using the TEST tab and the weinre* (which stands for web inspector remote) debug console. This tutorial does not cover on-device or remote debugging. See the Test Tab and Debug Tab for more information.

Update, Launch, and Test Your App on a Real Physical Mobile Device

Step	On Your Development Machine	On Your Test Mobile Device
1.	Click the PUSH FILES button to push your XDKTutorial app to the test server in the cloud. The Uploading Bundle message disappears when the upload is complete.
2.		Make sure the test mobile device is connected to the Internet.
3.		Launch the App Preview tool. If necessary, log in with the same user name and password for the Intel XDK.
4.		Use the camera icon (top right) in the App Preview tool to scan the QR code on the TEST tab and display the test server URL for your XDKTutorial app.
5.		Choose OK in the launch confirmation dialog box to launch your XDKTutorial app.
6.		Beep away!

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 mobile device your app is 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.

Configure Your App Build Options

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 build options first. Click the PROJECTS tab to display a window similar to the following.

Get to Know the PROJECTS Tab

1	Use the PROJECTS tab to manage projects and project information, including options to package your app for submission to app stores.
2	The YOUR INTEL® XDK PROJECTS dashboard lists all known Intel XDK projects on your development machine. The Intel XDK operates on only one project at a time. The currently active project is always marked in the YOUR INTEL® XDK PROJECTS dashboard and is the project on which all other tabs operate.
3	All your project files are stored locally on your development machine. The Source Directory is the root location of your sources, including the index.html file, which is the main entry point to your project. The Source Directory and the Project Path may or may not refer to the same directory location, but the root Source Directory must be at or below the Project Path.
4	NOTE: Before you build your app to use Cordova 4.x/5.x APIs, select plugins, build setting options, and graphical assets in the PROJECTS tab. Use CORDOVA HYBRID MOBILE APP SETTINGS to generate platform-specific intelxdk.config.<platform>.xml configuration files when you upload your app to the build server for packaging. These configuration files are stored in your project directory. Plug-ins provide a way to extend your app JavaScript* APIs, resulting in a tighter integration between your app and mobile device software and hardware. Use PLUGIN MANGEMENT to specify standard Cordova CLI plug-ins, featured and custom Cordova plug-ins, Intel XDK plug-ins, additional third-party plug-ins, and any platform-specific permissions in addition to permissions required by chosen plug-ins. Use BUILD SETTINGS to specify details typically needed when building your app for app stores. Use LAUNCH ICONS AND SPLASH SCREENS to choose orientation, icons, and splash screens. See the Projects Overview for more information.

Explore Your App Build Options

Take a moment to check out your app build 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, except for Android mobile devices, only the BUILD tab makes use of third-party plug-ins specified in the PROJECTS tab.

Build Your App

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

NOTE: If your app is a Standard HTML5 project type instead of an HTML5 + Cordova project type, the Build tab also includes a BUILD AS A WEB APP region with its build tiles enabled.

1	Use the BUILD tab to: Package your app and deploy it as a locally installed hybrid mobile app, thereby enabling the use of the same distribution and monetization channels, as well as the same app download, installation, and launch experience as native mobile apps. Create an HTML5 bundle you can submit to certain app stores (such as the Google Play* store, Apple App Store, Windows store, or Google Chrome Web Store) or place (hosted) on web servers.
2	Use the PREVIOUS BUILDS palette to view (and refresh) a list of previous builds. You can also hide/show the entire PREVIOUS BUILDS palette.
3	Use CORDOVA HYBRID MOBILE APP PLATFORMS to create a native app package suitable for submission to app stores. Packages support Cordova CLI 5.x core APIs and selected plug-ins, and Intel XDK APIs. See the Projects Overview for more information. Crosswalk is an HTML5 application runtime based on a variety of open source projects. The Intel XDK distribution of the Crosswalk runtime also supports many cutting-edge APIs under consideration for standardization by the W3C* organization. See Crosswalk Overview for more information.
4	Use BUILD AS A WEB APP to create a web app package suitable for use as a web-hosted app or for submission to the Chrome Web Store*. See the Build Tab Overview for more information.

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

Click the Android BUILD button in the CORDOVA 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.
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).
Click the Close Build Page button.

More Handy Information

Builds are performed in the cloud, so you do not need to install and configure an SDK, Cordova CLI, or a native development environment for each target platform on your development system.
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.

Intel XDK: Tutorial Summary

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

Step	Tutorial Recap	Key Tutorial Take-aways
Prepare for the tutorial and access the Intel XDK	Launch the Intel XDK. If necessary, sign up for an account.	If prompted, log into your Intel XDK account.
Start a new app from a demo	Open the START A NEW PROJECT palette in the PROJECTS tab. Choose the Samples and Demos option. Choose the HTML5 + Cordova project type. Choose the Hello Cordova demo app as the base for your XDKTutorial app. Set up the XDKTutorial project.	An Intel XDK project corresponds to an app and provides a container for your project files and associated settings. There are three main project types: Standard HTML5, HTML5 + Cordova, and Internet of Things embedded apps (Intel® XDK IoT Edition only). You can create apps by starting from a template (including a blank template), starting from sample or demo code, or importing an HTML project.
Edit your app	Go to the DEVELOP tab. Use the built-in code editor to edit XDKTutorial app code.	You can edit project files with the built-in code editor based on the Brackets* editor, or your favorite code editor (even while the Intel XDK is open). If you preview your code while you develop using LIVE DEVELOPMENT TASKS/Run My App, code changes appear after you save your edits. If you preview using LIVE DEVELOPMENT TASKS/Live Editing Layout, code changes appear immediately after you make your edits using the built-in code editor, or after you save project files using an external editor. If you create your app using the App Designer, you can also edit project HTML5 files in a drag-and-drop UI DESIGN view – and switch between the CODE and DESIGN views at any time.
Preview your app on virtual devices	Go to the EMULATE tab. Play with your XDKTutorial app, the virtual devices, and the palettes. You can simulate several features of your app including motion, geolocation and compass.	An emulator based on the Apache Ripple* emulator is accessible from several places in the Intel XDK. Use it to simulate app functionality on a variety of virtual devices. The emulator is designed to provide a general idea of how your app will render on various mobile devices; always run your app on a real mobile device before building.
Debug your app	Using the DEBUG tab, apart from being able to access the CDT debugger, you can also run and debug the XDKTutorial app on device.	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. Use the Debug icon on the emulator or DEBUG tab toolbar to access the built-in CDT debugger. Modifying code in the debugger window impacts future app behavior in the emulator; however it does not modify actual source code. Edit the actual source code in the DEVELOP tab.
Run your app on a real mobile device	On your development machine: Open the TEST tab; push your XDKTutorial app to a test server in the cloud. On a test mobile device: Launch the App Preview tool; scan the QR code on the TEST tab; test the XDKTutorial app.	Use the Intel XDK on your development machine and the App Preview tool on your test mobile device to evaluate – over the network – how your app looks and performs on a real physical mobile device without performing a full build. You can test your app via a test server in the cloud or via a local Wi-Fi network to which both your development machine and test mobile device are connected.
Configure Your App Build Options	Explore the PROJECTS tab.	All your project files are stored locally on your development machine. Each project has a <project-name>.xdk file in the root directory. The main entry point to your project must be an index.html file in the root source directory. All other files must reside in a set of folders below the root directory. Plug-ins provide a way to extend your app JavaScript* APIs, resulting in a tighter integration between your app and mobile device software and hardware. Use PLUGINS AND PERMISSIONS to specify standard Cordova CLI 5.x plug-ins, featured and custom Cordova plug-ins, Intel XDK plug-ins, additional third-party plug-ins, and platform-specific permissions in addition to permissions required by chosen plug-ins. Use BUILD SETTINGS to specify details typically needed by app stores. Use LAUNCH ICONS AND SPLASH SCREENS to choose orientation, icons, and splash screens.
Build your app	Open the BUILD tab. Package your XDKTutorial app as a Cordova hybrid mobile app for an Android app store, such as the Google Play store.	Use the Intel XDK to package your app for submission to various app stores and/or for hosting on the web. 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. Choose your Cordova build package options using the PROJECTS tab, and choose build package options for Google Chrome packaged apps in the BUILD tab. The Intel XDK does not provide actual store submission services.

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

Key Terms

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 mobile device, 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 an actual, physical mobile device.
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.

More Resources

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
The Introduction to Intel XDK
The Debug and Test Overview
Documentation and debugging tutorial for the Hello Cordova Sample

Intel XDK Documentation - Getting Started Tutorial