---

Tutorial: Get Started with the Intel® XDK

Submitted by Nancee Moster (... on Tue, 07/29/2014 - 10:05

About This Tutorial

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 use the:

PROJECTS tab to create your new app and set app package options
DEVELOP tab to edit your app files with the built-in Brackets* code editor
EMULATE tab to simulate app functionality on various virtual devices and debug your app with the built-in Google Chrome* Developer Tools (CDT) debugger
TEST tab and the Intel XDK App Preview tool to evaluate how your app looks and performs on real physical hardware
BUILD tab to package your app for submission to various app stores and/or for hosting on the web

This tutorial does not cover web services or live development (DEVELOP tab), on-device debugging (TEST and DEBUGtabs), or performance profiling (PROFILE tab).

Prepare for the Tutorial and Access the Intel XDK

Requirements:

Intel XDK installed on an Ubuntu* Linux*, Microsoft Windows*, or Apple OS X* development machine
App Preview installed on a test 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 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 device, download this free Intel app from the Apple* App Store, Google* Play Store, or Windows* Phone Store.

Access the Intel XDK

Launch the Intel XDK on your development machine.
If necessary:
- Log in.
- Sign up for an account. User Name = Your email address.

Start a New App from a Demo

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

HTML
CSS
Images
JavaScript* language
JavaScript* APIs that let your app interface with the 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 thePROJECTS 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 to display the YOUR INTEL® XDK PROJECTS dashboard. Then click the START A NEW PROJECT button (at the bottom of the dashboard) 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 Blank Project - Use to create an app from a starter HTML file and a JavaScript* library for device APIs.
	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	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.
	4	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, App Starter, or the appMobi* XDK.
	5	Use App Starter - Use to rapidly prototype an HTML5 app based on the App Framework mobile-optimized UI library.
	6	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

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.
Click the HELLO WORLD demo image.
Click the USE THIS DEMO 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.

View Your App on Virtual Devices

Because we started from a demo, we can immediately see a simulation of your XDKTutorial app on a variety of virtual devices. Click the EMULATE tab to display a window similar to the following.

Get to Know the EMULATE Tab

1	Use the EMULATE tab to simulate app functionality on a variety of virtual devices by using a device simulator based on the Apache Ripple* emulator. You can also use this tab to debug app functionality using a built-in version of the CDT debugger. (We will do this later in this tutorial.)
2	Use the EMULATE tab toolbar buttons to reload your app source files and restart your app, launch the built-in debugger in a floating window, display and change EMULATE tab 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 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.
5	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 EMULATE tab palette, hide and show the columns, move columns, and move palettes within a column.
6	Use the device visual representation view and test your app.

Verify the Reload Setting

Click the Emulator Settings icon on the EMULATE tab toolbar to open the Emulator Settings dialog box.
Make sure the When files change option is set to Always Reload.
Click the Emulator Settings icon again to close the dialog box.

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.

Undock the EMULATE Tab

Click the

Undock icon at the top right corner of the EMULATE tab label to display the EMULATE tab in a floating window similar to the following. (If necessary, resize the floating window so you can see the entire virtual device.)

Notice the

Undock icon at the top right corner of the EMULATE tab label changes to a

Dock icon, the EMULATE tab is disabled, and the main Intel XDK window displays the contents of the DEVELOP tab.

More Handy Information

The EMULATE tab 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 EMULATE tab 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 device, especially if that 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 EMULATE, TEST, and BUILDtabs; 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 ofappmobi.js with intelxdk.js.
The emulator does not support the use of *.mp3 audio files.

Edit Your App

Let’s add some functionality to your XDKTutorial app. Click the DEVELOP tab to display a window similar to the following.

Get to Know the DEVELOP Tab

1	Use the DEVELOP tab to edit files with the built-in code editor and add files to your project.
2	Use the file tree to view the files associated with the active project 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 LIVE DEVELOPMENT TASKS to preview your code in a browser or on a device. With Run My App, code changes appear after you save project files and reload/restart your app. 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. This tutorial does not cover live development. See Using Live Development in the Intel® XDK for more information.
6	Use web services 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 Tab for more information.

Use the Built-in Code Editor to Edit Your Code

Use the built-in code editor to uncomment <script src="js/debug.js"></script> near line 10.
Choose File > Save to save your edit and change the contents of the 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).
You can also edit project files using your favorite code editor – even while the Intel XDK is open.
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 EMULATE tab.
If you create an app using the App Designer or the App Starter (HELLO WORLD demo files were not created with the App Designer or the App Starter), 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 and the App Starter editors are available only when you are editing HTML5 files created with these editors.
Both the App Designer and the App Starter are round-trip editors. 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) or the App Starter class labels.
Any elements the App Designer and App Starter do not recognize are still rendered in the DESIGN view; however, they are not editable in the DESIGN view.

Test Your App on Virtual Devices

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 device, so performance problems are typically not visible in the emulator.

Notice there are two new buttons in your XDKTutorial app in the floating window: Good and Bad.
Click the Good button. Notice the header changes to Hello Good!
What do you think will happen when you click the Bad button? Try it. Not what you expected? Guess it is time to debug.

Re-dock the Emulator

Click the

Dock icon at the top right corner of the EMULATE tab label to close the floating window and re-enable theEMULATE tab. (You can also just close the floating window to re-enable the EMULATE tab.

Use the Built-in CDT Debugger to Debug Your App

Click the EMULATE tab.
Click the Launch Debugger icon on the 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 the debug.js file.
Scroll down to near line 46 to display a window similar to the following.

There's the problem!

Correct App Code

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

Close the Developer Tools window.
Click the DEVELOP tab.
In the file tree, open the js folder and choose the debug.js file.
Scroll to near line 46 and comment out var breakDebugger = invalidVariable;>
Choose File > Save.

Retest App Functionality

Click the EMULATE tab to see the result of your edits.
Now try clicking the Bad button. Better? If not, click the the Reload App icon on the EMULATE tab toolbar and try again.

More Handy Information

What you are actually debugging is a simulation of a real 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.

Run Your App on a Real Device

Now that you are confident your XDKTutorial app works properly on virtual devices, it is time to run it on a real 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 TESTtab 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 real physical hardware 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 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 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 hardware using the TEST tab and the weinre* (which stands for web inspector remote) debug console. This tutorial does not cover on-device debugging. See the Test Tab and Debug Tab for more information.

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

Step	On Your Development Machine	On Your Test Device
1.	Click the PUSH FILES button to push yourXDKTutorial app to the test server in the cloud. The Uploading Bundle message disappears when the upload is complete.
2.		Make sure the test 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 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 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 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* devices: If you cannot access the Google* Play Store, click the Information icon to email the App Preview download to your device or copy the App Preview download link to your clipboard.

Check Your App Package Options

Now that you are confident the XDKTutorial app works properly on a real 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

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 theYOUR 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: If you plan to build your app using Cordova* 2.x APIs instead of Cordova* 3.x APIs, specify package options in the BUILD tab instead of the PROJECTS tab. Use CORDOVA 3.X HYBRID MOBILE APP SETTINGS to generate platform-specific `intelxdk.conf.<platform>.xml` configuration files when you upload your app to the build server for packaging. These configuration files are then 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 PLUGINS AND PERMISSIONS to specify core Cordova* 3.x 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. See the Projects Tab for more information.

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 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 PROJECTS tab YOUR INTEL® XDK PROJECTS dashboard.
The EMULATE tab 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.

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

1	Use the BUILD tab to: Package your app and deploy it as 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 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 3.X HYBRID MOBILE APP PLATFORMS to create a native app package suitable for submission to app stores. Packages support Cordova* 3.x core APIs and selected plug-ins, and Intel XDK APIs. See the Projects Tab 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 Runtime Overview for more information.
4	Use LEGACY HYBRID MOBILE APP PLATFORMS to create a native app package suitable for submission to app stores. Packages support Cordova* 2.x APIs and Intel XDK APIs. See the Build Tab for more information. The Tizen* OS is an open source, standards-based, software platform for devices such as smart phones, tablets, netbooks, in-vehicle infotainment devices, and smart TVs. See the Build Tab for more information.
5	Use BUILD A WEB APP to create an HTML5 package suitable for submission to certain app stores (such as the Google Chrome* Web Store) or for placement on web servers. There are fewer targets because there is less overhead involved putting HTML5 on the web. These packages are mostly convenience functions to create the necessary infrastructure.

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

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

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).
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* device, and iOS* packages use the Apple Safari* browser webview built into the iOS* 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.	User Name = your email address.
Start a new app from a demo	Open the START A NEW PROJECTpalette in the PROJECTS tab. Choose the HELLO WORLD demo app as the base for your XDKTutorialapp. Set up the XDKTutorial project.	A project in the Intel XDK corresponds to an HTML5 app. You can create apps by starting from a blank project, working with a demo, starting with a template, importing an existing HTML project, using the App Starter, and using the App Designer.
View your app on virtual devices	Open the EMULATE tab. Verify the reload setting. Play with yourXDKTutorial app, the virtual device skins, and the palettes. Undock theEMULATOR tab to a floating window.	Use the emulator to simulate app functionality on a variety of virtual devices by using a device simulator based on the Apache Ripple* emulator.
Edit your app	Open the DEVELOP tab. Use the built-in code editor to editXDKTutorial app code.	You can edit project files with the built-in code editor or your favorite code editor (even while the Intel XDK is open). Use the undockedEMULATOR tab to see your edits rendered in a floating window when you save your file. If you create your app using the App Designer or the App Starter, 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.
Test your app on virtual devices	Test XDKTutorial app functionality in the undocked EMULATE tab. Re-dock and open the EMULATE tab. Use the built-in CDT debugger to debug your XDKTutorial app. Return to the DEVELOP tab to correctXDKTutorial app code. Return to theEMULATE tab to retest XDKTutorialapp functionality.	The processor on your development machine is probably faster than the processor on a real device, so performance problems are typically not visible in the emulator. If you use an editor external to the Intel XDK, click the Reload icon on the emulator toolbar to reload your app source files and restart your app when you return to the emulator. Use the Debug icon on the emulator 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. The emulator is designed to provide a general idea of how your app will render on various devices; always run your app on a real device before building.
Run your app on a real device	On your development machine: Open the TEST tab; push yourXDKTutorial app to a test server in the cloud. On a test device: Launch the App Preview tool; scan the QR code on the TEST tab; test yourXDKTutorial app.	Use the Intel XDK on your development machine and the App Preview tool on your test device to evaluate – over the network – how your app looks and performs on real physical hardware 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 device are connected.
Check your app package 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. The Intel XDK supports Cordova* 2.x and 3.x plug-ins, Intel XDK plug-ins, and third-party plug-ins.
Build your app	Open the BUILD tab. Package yourXDKTutorial app as a Cordova* 3.x hybrid mobile app for an Android* 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. Legacy Cordova* 2.x build package options appear in the BUILD tab, while Cordova* 3.x build package options appear in thePROJECTS 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 device. It interacts with users and onboard sensors.
onboard sensor: Built-in sensor available on a real 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 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.

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
Intel XDK Documentation at: http://www.intel.com/software/xdkdocs

---
copied from: https://software.intel.com/en-us/html5/articles/intel-xdk-guided-tutorial
---

-

- -

Friday, October 10, 2014

Get Started Tutorial with the Intel XDK

Tutorial: Get Started with the Intel® XDK

About This Tutorial

Prepare for the Tutorial and Access the Intel XDK

Install the Intel XDK on Your Development Machine

Install App Preview on Your Test Device

Access the Intel XDK

Start a New App from a Demo

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

Choose the HELLO WORLD Demo App

Create the XDKTutorial Project

View Your App on Virtual Devices

Get to Know the EMULATE Tab

Verify the Reload Setting

Play with Your App, Virtual Device Skins, and Palettes

Undock the EMULATE Tab

More Handy Information

Edit Your App

Get to Know the DEVELOP Tab

Use the Built-in Code Editor to Edit Your Code

More Handy Information

Test Your App on Virtual Devices

Test App Functionality

Re-dock the Emulator

Use the Built-in CDT Debugger to Debug Your App

Correct App Code

Retest App Functionality

More Handy Information

Run Your App on a Real Device

Get to Know the TEST Tab

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

More Handy Information

Check Your App Package Options

Get to Know the PROJECTS Tab

Explore Your App Package Options

More Handy Information

Build Your App

Get to Know the BUILD Tab

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

More Handy Information

Intel XDK: Tutorial Summary

Key Terms

More Resources

No comments:

Post a Comment