Getting Started Tutorial

About This Tutorial

 

The Intel® XDK is a comprehensive cross-platform development environment for cost-effectively creating, testing, debugging, building, and deploying HTML5-based hybrid mobile apps and web apps. It also supports developing Internet of Things Node.JS apps that use an Intel maker board.

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, Internet of Things (IoT) embedded apps, publishing your app to app stores, 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. In general, always update to the latest version of App Preview.

Access the Intel XDK

  1. Launch Intel XDK on your development machine.

  2. 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*, Apple iOS*, Windows Phone* 8.1, Windows 10, 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, iOS, and Windows 8) or as a web app for web-hosting or for the Google Chrome* Web Store.

  • Internet of Things embedded apps - This project code base consists of embedded JavaScript* intended for execution on a Node.js runtime. 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

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 (deprecated) Intel XDK device APIs.

Choose the Hello Cordova Demo App

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

  2. Above the library area, click HTML5 + Cordova to display a General library of HTML5 + Cordova demos.

  3. Click the Hello Cordova demo image.

  4. Click the Continue 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.

Edit Your App

 

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

 

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 Simulator 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 icon Reload App icon on the toolbar to update all files and restart your app when you return to the simulator.

  • 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:

    CODE / DESIGN buttons

  • The App Designer GUI layout editor is available only when you are editing HTML5 files created with App Designer from a Intel XDK template or sample that supports App Designer. If you imported your HTML5 project code into the Intel XDK, App Designer is not available.

  • 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

  1. Click the SIMULATE tab.
  2. Choose a platform and device to configure your simulation session.
  3. Click the  Start Simulator button to run your app on the configured device simulator.

Choose a Platform and Device Before You Start the Simulator

Your first step is to choose a platform and device. Before you start the simulator, the SIMULATE tab appears as follows:

SIMULATE tab in the Intel XDK, initial view)

In the upper-left, use the two drop-down menus and the Start Simulator button to start the device simulator:

1

Select the platform as shown above - choose Android*, Apple iOS*, or Microsoft Windows*.

2

Select a device associated with that platform to be tested.

3

Click the button to start the device simulator.

After You Start the Simulator

Be patient while the Apache Cordova* plugins are prepared. When the plugins preparation completes:

  • A visual representation of the selected virtual device appears in a new floating device window.
  • The SIMULATE tab now contains multiple palettes as well as its toolbar.

Get To Know the Floating Device Window

After you start the simulator , the virtual device window pops up in a separate window. You interact with this window as your app runs. Its appearance can change as your application executes code and Cordova plugins within the simulator. Your running app appears in a viewport for the selected device. A skin resembling that device appears around the viewport. The following screen shows the Hello Cordova sample.

Simulated virtual device window in the Intel XDK

1

Toolbar buttons let you control the zoom size of the displayed device, switch the orientation between portrait and landscape, and change the background color.

2

On your development system, test the virtual device by clicking on your app's buttons or controls to simulate a user using your app on a real device.

Use the floating device 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 Taco simulator 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.)

Get to Know the SIMULATE Tab After You Start the Simulator

After you start the simulator , the SIMULATE tab's control/debugger window contains multiple palettes below its toolbar. Most palettes appear because you have selected plugins in the PROJECTS tab (your screen will differ):

SIMULATE Tab Control/Debugger Window in the Intel XDK

Use this control/debugger window to start/stop the simulator, start/stop the debugger, reload your app, and open the palettes for the plugins you want to test:

1

The toolbar appears on the top row to the right of the platform and device drop-down. It provides easy access to frequently used buttons and controls. These buttons let you start or stop the simulator, reload the app, start the debugger, and control whether the simulator restarts automatically when a project file gets updated (using the code editor in the DEVELOP tab or a different editor).

2

The control/debugger window displays palettes below the toolbar. Although a few palettes always appear, most palettes appear because you have selected plugins in the PROJECTS tab.

Before you test your app in the SIMULATE tab, expand or close the palettes to prepare a configuration needed to test your app. After you start the debugger, the Chrome Developer Tools debugger appears in this control/debugger window.

Play with Your App, Virtual Devices and Palettes

Try:

  • In the SIMULATE tab control/debugger window, choose a different virtual device. Click the DEVICES palette drop-down arrow and choose among the devices listed.

  • In the SIMULATE tab control/debugger window, open and close several palettes by clicking the button. Expand a palette to view and modify its options.

  • In the device window, start the simulator to run your XDKTutorial app. Try clicking the Beep and Vibrate buttons and see what happens.

  • In the device window, change the virtual device orientation. Click the orientation icons in the DEVICES palette.

More Handy Information

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

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

  • The simulator 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 simulator 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 simulator 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 SIMULATE  tab approximately simulates your app running on a virtual device, it is not without its limitations. For more details, see Device Simulator Limitations.

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

 

Debug Your App

Using the Built-in CDT Debugger in the SIMULATE Tab

  1. Click the Launch debugger icon Launch Debugger icon on the SIMULATE tab  toolbar to open a built-in version of the CDT debugger in the SIMULATE tab.

  2. Click the Sources button to open a file

  3. Press Ctrl+O and choose a file from the list.

  4. It should display a window similar to the following: CDT Debugger from Simulate Tab

  5. 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 simulator. 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.
  6. Retest your app on the SIMULATE  tab to see your that your changes are now reflected. If not, click the Reload icon 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 SIMULATE 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

 

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.

  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

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 wifi 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 used 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 Information icon to email the App Preview download to your mobile device or copy the App Preview download link to your clipboard.

Configure Your Certificates and App Build Options

 

Now that you are confident the XDKTutorial app works properly on a real mobile device, let's check your app build options before you try to build your app.

View Your Known Certificates and Other Account Settings

You need to create or import a certificate and associate it with this project before you build your app. The cloud-based build system uses the selected Android or iOS certificate to digitally sign your Android or iOS app. For Windows builds, a Publisher ID is used instead.

Intel XDK account settings

1 In the upper-right, click the person button to view your Intel XDK account settings.
2 Under DEVELOPER CERTIFICATES, view the certificates known to the Intel XDK for your account. To add an Android keystore certificate(s), either import a keystore certificate (such as from Android Studio*) or create one using the Intel XDK.

Import or Create an Android Certificate

If you do not have any Android certificates known to your account settings (shown above), use the instructions at Managing Certificates to either:

  • Import a new Android keystore using the Intel XDK - click + Import existing keystore. If a Legacy certificate appears, you can import it for the limited purposes of this sample project.
  • Create an existing Android keystore - click + Create keystore.

In either case, record the passphrase(s) and put them in a safe place. After you import or create a certificate, that certificate is known to the Intel XDK, so it appears when you view your account settings. Later, you will use the active project's Build Settings to select it so it gets used in a build.

Get to Know the PROJECTS Tab

Click the PROJECTS tab to display a window similar to the following.

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 permissions required by chosen plug-ins.

Use BUILD SETTINGS to specify details typically needed when building your app for app stores, such as the App ID, Cordova CLI information, and digital signing details.

Use LAUNCH ICONS AND SPLASH SCREENS to choose orientation, icons, and splash screens. See the Projects Overview for more information.

Explore Your App Build Settings, Launch Icons and Splash Screens

Take a moment to check out your app build settings.

When you are ready to submit your own apps to various app stores, you will need to supply values, such as App ID and App Name  as well as Cordova CLI and digital signing information. Except for the Developer Certificate field, the default values for Build Settings and Launch Icons and Splash Screens are sufficient for this tutorial. 

Select a Certificate in Build Settings

Open Build Settings and:

  1. Locate the Developer Certificate field. The red triangle on the right indicates a certificate is not yet selected.
  2. Click within that field to display the drop-down list.
  3. Select one of your known certificates for Android

select certificate for this app

 

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 simulator uses the core Cordova plug-ins chosen on the PROJECTS tab as your app runs inside the siulator.

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

Select Target Platforms, Unlock the Certificate, and 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

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 WEB AND PACKAGED APP TARGETS 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 package 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

You can view the date-time that this project's files were last uploaded (pushed) to the build server.

After you select build targets and unlock certificates, you initiate the build by clicking the Start Builds button.

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. See the Projects Overview for more information. For this tutorial, we have only selected the Android platform target. The Android build tile shows that Its certificate is selected but it needs to be unlocked.

You can build an Android app with either a modern Crosswalk WebView runtime (embedded browser) or use the stock Android WebView provided with each Android device. Crosswalk is an HTML5 application runtime available for Android 4+ devices. This is the default build option for Android builds. Using the Crosswalk runtime provides more consistent app behavior and supports many cutting-edge APIs under consideration for standardization by the W3C* organization. See Crosswalk Overview for information about the open-source Crosswalk project.

4

Use WEB AND PACKAGED APP TARGETS 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

  1. Click the upper-right triangle in the Android build tile so it appears blue enable build platform.

    All other build targets should be unchecked (not blue), so only the Android build platform is selected. Notice that you previously specified all packaging configuration (in the PROJECTS tab), so there is nothing preventing you from unlocking your certificate and building your XDKTutorial app right now.

  2. In the Android build tile, unlock the Android certificate keystore you selected previously:

    • Click the button.
    • Choose the unlock duration as either until the next build or until you close the Intel XDK (up to 48 hours).
    • Enter your Key passphrase.
    • If needed, enter the Keystore passphrase.
    • Click the Unlock button.
    • View the Android build tile to verify that the certificate keystore is now unlocked (not red) and the project settings are complete - .

     

  3. Click the Start Builds button to connect to the build server, upload your XDKTutorial app, its build settings, and associated plugin and asset files to the cloud.

  4. After a build completes successfully, a Build Complete message appears
    Android Build completed successfully
    Click buttons to:
    -View the build log after each build. This provides a link to a more detailed, full build log.
    - Download the built package to your development system.
    - Share the build location by sending an email containing the link.

  5. If a build fails, after you click to view the summary build log, click the link to view the full detail build log.

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 can select multiple build targets and build them all when you click Start Builds. For instructions, see Using the Build Tab and Projects Tab Build Settings.

  • You must obtain a developer account to submit apps to most app stores. The Intel XDK does not provide actual store submission services for your app; however, it does let you use the Publish tab to collect and upload publishing information and graphical images to multiple app stores.

  • With the exception of Android packages built with the Crosswalk WebView, 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 and 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. 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 SIMULATE 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.

A simulator based on the Taco simulator* is accessible from several places in the Intel XDK. Use it to simulate app functionality on a variety of virtual devices. The simulator 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 simulator. Use the Debug  icon on the simulator or DEBUG  tab toolbar to access the built-in CDT debugger. Modifying code in the debugger window impacts future app behavior in the simulator; 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 Certificates and App Build Options

Explore the PROJECTS tab to view project information, build settings, and launch icons and splash screens.

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. You need to add certificates to your Intel XDK account and then select one for this project in Build Settings. 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 MANAGEMENT to specify standard core Cordova CLI 5.x plug-ins, featured and custom Cordova plug-ins, additional third-party plug-ins. You can also select plugin versions and permissions required by chosen plug-ins. Use BUILD SETTINGS to specify details typically needed to build your app for app stores and select a certificate to digitally sign this project. 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, but you can use the PUBLISH tab to help you.

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:

For more complete information about compiler optimizations, see our Optimization Notice.