Full Course

Unit 1: Introducing the course
Unit 1: Introducing the Course
Unit Objectives
After completing this unit, you will:
be familiar with the Intel XDK features and user interface
be able to choose the proper Intel XDK edition for your needs
understand what the course is about
be able to find, download and install the software
understand the work flow for implementing an app
be able to view HTML source code
About the course
What does it do? How does it work?
Logistics
Reviewing the course objectives
Reviewing the course prerequisites
Required software
Reviewing the course format
Demo 1-1: Watch Intel XDK in use
Walkthrough 1-1: Installing the courseware
Walkthrough 1-2: HTML preview
Key words
Unit summary
Critique
Unit Topics
1-1
2016 Intel Corporation.
Welcome to Intel XDK
Intel XDK
Cross-platform Development environment for mobile

apps anD Games
Intel XDKs built-in streamlined workflow offers essential
tools to rapidly design, debug, tune, and build HTML5,
Web, and Hybrid apps for Android*, iOS*, and Windows*
app stores.
Choose your style using templates and popular UI

frameworks. Use hundreds of Cordova* APIs and services to
make great user experiences.
Time-saving tools to make mobile apps better, faster, and

ready for market. Debug apps in real time, tune app quality
and performance.
Build for one and publish to all app stores faster, with one
click. Deliver across Android*, iOS*, and Windows* app
stores, and mobile devices.
Free download at: http://XDK.Intel.com

Windows*, OS X*, and Ubuntu* Linux:
1-2
Course Content
Unit 1: Introducing the Course

Unit 2: Getting started with Intel XDK
Unit 3: Design Thinking
Unit 4: Building and Running Apps
Unit 5: Testing and Debugging with Intel XDK
Unit 6: Understanding HTML5
Unit 7: App Designer
Unit 8: Plugins and Cordova
Unit 9: Debugging, Revisited
Unit 10: Marketing and Monetizing
1-3
Intel XDK - More than an IDE

IDE == Integrated Development Environment. Most IDEs incorporate an
editor, a file structure tree, a debugger, an emulator or simulator and a
packaging tool. Intel XDK has all these features that enable you to easily
create, test, and package cross platform HTML5 mobile apps. But it is
more than just a typical IDE for mobile cross platform development. Intel
XDK has the additional feature of allowing you to modify code while you
are testing on your mobile device. This enables you to easily monitor what
your app does, as you modify code. We will explore testing in the
debugging units.
The Intel XDK
Intel XDK runs on Windows* 7 or higher?, OS/ X* and Ubuntu* hosts.

Apps are written once and can be built for iOS*, Android* and Windows
devices. You no longer need an OS X system to create an iOS application.
You can use any of the hosts mentioned as your development machine
for any of the target devices. You can test a tethered Android* device
using an OS X device host and you can test an iOS device using a
Windows system.
Intel XDK seamlessly integrates many best-of-breed development
technologies into an easy-to-use, integrated development environment:
1-4
The Brackets editor

The Microsoft* TACO Simulator (as of August 2016 the Apache*
Ripple emulator which is shown in the images, was replaced by
TACO)
Chrome* Developer Tools (CDT or Chrome Dev Tools)
Intended Audience
Intel XDK is a free tool for people who want to create mobile apps. Whether you are a college
student who wants to learn HTML5 to create mobile apps, or an experienced web developer
who knows HTML5 but has never created a mobile app, this guide can take you through the
features of Intel XDK from design, through implementation, to publishing, in order to get
apps on many devices in minimal time.
1-5
Following is a map to help chart your course through this guide. Use the entire guide or
choose the parts that you need.
1-6
Students you are likely to make use of the entire guide.

Professional Developers with no HTML5 experience You will
likely make use of most or all of the guide, but you will be able to
skim quickly through certain parts. For example, if you are familiar
with other IDEs, you will take less time to understand many of the
features and functionality available in Intel XDK.
Professional Developers with HTML5 experience You will be
able to skim through most of this guide quickly and even skip
parts of it. However, beware of skipping too much. Even if you are
expert in certain areas, like CDT, for example, be sure to read unit
5, debugging, so that you will know what options are available.
Industry Professional
Without
HTML5 Experience
College/University
Student
Industry Professional
with
HTML5 Experience
Welcome
Introducing the course
Getting started with Intel XDK

Design thinking
Building and running apps
Testing and debugging with Intel XDK

Understanding HTML5
App Designer
Plugins and Cordova*

Debugging revisited
Marketing and Monetizing
While doing the exercises throughout the following units, think about
the app you want to create and how each skill you learn applies to that
app.
1-7
About the Course

Beginners Guide to Intel XDK is designed to teach you how to create
mobile apps: design, implement, and package apps for Android*, iOS* and
Windows. The course is task-based, with references to documentation so
that you will know how to get more details about the features you want to
use. You will learn by performing a series of hands-on tasks and
reinforcing your knowledge with the documentation.
Through this course you will create a variety of small apps as you learn
the basics of Intel XDK and mobile app development. You will then be
able to use documentation, tutorials and samples to make robust apps
with many mobile-specific features such as geo-position, video playback,
push notifications, phone dialing, sending email, and more!
Along with covering Intel XDK functionality, the course focuses on best
practices and design, stressing the importance of usability, optimization,
and maintainability of cross platform applications.
You can use a computer with a Windows, OS X (Mac), or Ubuntu* Linux
operating system to develop apps for Android*, Windows* iOS* devices
there is documentation with instructions for using each of these.
1-8
The next several pages introduce some details about Intel XDK.
A critical distinction host vs. target

When you write software to run on a computer, depending on the
distribution of your software, you may not think about the distinction of
where you are developing vs. where you will run your program it is all
done on the computer. However, when you are writing a program to run
on another device, you have two computers the host computer where
you do your development, and the target device where your program will
run. Throughout this course these two terms will be used to make this
distinction. For example, you downloaded Intel XDK onto your host, and
you downloaded App Preview onto your target.
Choose a Framework
Intel XDK supports several popular frameworks. A framework is a layer
between your code and the program interpreter that
provides functionality for invoking methods on your user
interface (UI) widgets. You may be familiar with a particular
framework for styling HTML5. If not, start with Twitter
Bootstrap for now and switch later if you like. Following are
some of the frameworks supported by Intel XDK.
Twitter Bootstrap PRO: a very clean UI framework that relies

primarily on CSS with very little JavaScript trickery. Thriving third-party
ecosystem with many plugins and add-ons, including themes. Probably
the best place to start, especially for UI beginners. CON: some
advanced mobile UI mechanisms (like swipe delete) are not part of this
framework.
Ionic PRO: a very sophisticated mobile framework with many features.

If you are familiar with and comfortable with Angular this framework may
be a good choice for you. CON: tightly coupled with Angular, many
features can only be accessed by writing JavaScript Angular
directives. If you are not familiar or comfortable with Angular this is not a
good choice!
Intel's App Framework PRO: an optimized for mobile library that is

very lean. App Framework includes the ability to automatically change
the theme as a function of the target device. For example, on an Android
device the styling of your UI looks like an Android app, on an iOS device
1-9
the styling looks like an iOS app, etc. CON: not as widely known and
supported as some other UI frameworks.
Intel XDK integrates an easy-to-use, drag & drop App Designer with
Brackets, a highly-regarded, open-source editor with syntax helpers and
auto-completion.
The integrated Brackets* code editor
Emulate Popular Devices

Use the built-in device simulator. Change geographic locations, vary
bandwidth conditions and change orientations. Use the integrated Google
Chrome Dev Tools (CDT) to troubleshoot runtime issues.
Using the built-in device simulator
1 - 10
You can trust that it works, because you can verify itBy loading Intel App
Preview onto your mobile devices, you can:
Run your app on physical devices.
Debug your app while it's running on a device.
Change your code while running and watch the display change.
Conduct performance profiling.
Intel App Preview is available for iOS, Android, and Windows 8+ devices in
their respective app stores.
Test your app on physical devices with Intel App Preview
Test as shown above, starting in the Test Tab, untethered, running on

your device via the cloud, or as shown below in the Debug Tab, tethered,
running on device.
1 - 11
1 - 12
Package for App Stores

After you've completed your testing, use Intel XDKs integrated Apache*
Cordova* framework to build native apps for the popular mobile
platforms.
Build your app for multiple devices
Integrate Native Features

In the old days of mobile development 2007-2011 (the birth of the
iPhone to the birth of PhoneGap), it was necessary to program natively if
you wanted your app to have access to such things as the camera and the
accelerometer. But now, with Cordova plugins (previously PhoneGap
plugins), developers can code in one language and rely on plugins to
translate to native code in order to gain access to native features,
including:
Accelerometer
Android multi-touch
Contacts
Geolocation
Enhanced audio
Accelerated canvas
1 - 13
Logistics
When should you upgrade your Intel XDK version?
Usually immediately.
How much does it cost?
Nothing.
Frequent Upgrades
Intel XDK is a developing product. As such, it is being improved
constantly with upgrades available aproximately every 6-8 weeks. Though
it is usually best to use the latest version, you have the option of
remaining on an older version when a new version is released.
For example, when your app is nearly ready to publish, you may want to
continue using your current version of Intel XDK for a few days while you
finish testing and building.
NOTE: when a new version of Intel XDK is released, before upgrading to
the new version, make a backup copy of your project folders.
Cost
Free.
Apps can be developed with Intel XDK from idea inception, to built files ready for an app
stores, with no cost involved. When you submit your app to one or more app stores you must
meet their requirements, which may involve cost.
Reviewing the course objectives
Develop apps for mobile devices
Program in HTML5 HTML, JavaScript and CSS
1 - 14
Code, debug, test on device, and build for multiple devices all in Intel
XDK
Course Prerequisites
The prerequisites for this course are:
A willingness to explore software tools
A willingness to explore online resources to find out how to find

solutions
A desire to create mobile apps
Required Hardware and Software

You need a host machine and a target device.
Host machine is the machine you are programming on. Target device is
the tablet or phone on which you will install and run your app.
The following software is required to be installed on your host machine:
Intel XDK
http://xdk.intel.com/
The following software is required to be installed on your target device.

This app will act as a wrapper in which your app runs while testing your
app on your device.
Intel App Preview
Available at no coston iOS, Android, and Windows stores.
1 - 15
Reviewing the Course Format

This course is divided into 10 units, each of which presents new
information with hands on activities, followed by a summary and a short
review to test your knowledge of the units content. There is a critique link
for feedback so that we can continually improve this curriculum. The
following icons are used throughout:
Concepts introduce new information.
Demos illustrate new concepts.
Walkthroughs guide you, with the instructors assistance, through

procedures in a hands-on context.
Labs let you practice new skills on your own.
Summaries provide a brief synopsis of the units content.
Reviews test how well you remember the concepts from the unit.
1 - 16
Best Practices provide you with helpful insights and information.
Demo 1-1: Watch Intel XDK in Use

Observe as your instructor (or the video) introduces the main features of
the Intel XDK that you will be using yourself, very soon.
Watch Matts video (4:31)
There will be an activity in the next unit based on what you see in this video.
There are many, many videos and tutorials available and the Intel XDK team
frequently adds new ones. If there is any particular part of Intel XDK that you
want to know more about, there are tutorials and videos available. Use the
search box on the top right to find what you are looking for. This is part of IDZ
(Intel Developer Zone) which is the portal to many Intel software tools, so be
sure to type xdk along with the other terms in your query, otherwise you may
be selecting videos for VTune Amplifier or Parallel Studio or some other Intel
product.
Walkthrough 1-1: Installing the Courseware

In this lab, you will perform the following tasks:
Install Intel XDK on your host machine
Install Intel App Preview on your target mobile device
Steps
Download and Install Intel XDK on your host machine
Host machine is the machine you are programming on. Target device is
the tablet or phone on which you will install and run your app.
1. Open a web browser to the following URL http://xdk.intel.com/
2. Click the Download Intel XDK button.
OS X Users:
1.
1 - 17
Open the downloaded .dmg file

2.
Double-click on the .pkg file
3.
Complete the steps in the installation wizard.
4.
Select Go > Applications and verify that Intel XDK is present.
Microsoft Windows 7+ Users:
1.
Open the downloaded .exe file
2.
Complete the steps in the installation wizard
Log in to Intel XDK
1. Launch Intel XDK

2. Click on Need to sign up for an Account?
3. Fill out the form, entering your name, email address, password, and
country. Note the following:
Passwords must be between 8-15 characters in length
Passwords must contain at least one alpha character
Passwords may not contain non-English characters
Passwords must contain at least one number
Passwords must contain at least one special character (!@#$%)
NOTE: this will be your login information for Intel XDK, Intel App
Preview and the Intel Developer Zone (IDZ) forums. Any apps you
build will be associated with your account this can aid emergency
recovery. Any apps you test via the cloud will be accessed via this
account this allows you to access your apps in the cloud without
being tethered to your computer. Logging in to the IDZ forums allows
you to ask questions and then track them.
4. Check the Terms and Conditions checkbox.
5. Sign up for the newsletters for Intel product information.
6. Click the Submit button.
7. Enter your username and password.
8. If you are on your personal computer you may want to select the
checkbox labeled Keep me logged in on this computer.
9. Click Submit
10. You will now be prepared to develop your app in the next unit.
1 - 18

Install Intel App Preview on your Mobile Device (You may do this part later
when you are ready to test on your device.)
1. Configure your mobile device to be on the same wireless network as

your computer.
2. Open your phones app store.
3. Search for Intel App Preview
4. Install Intel App Preview
5. When the installation process is complete, open the app.
6. Sign into the app using the Intel XDK credentials that you created
earlier in this exercise.
End of Walkthrough --
Walkthrough 1-2: HTML Preview

In this lab, you will perform the following task:
View the HTML source code for web pages. Though you will be
creating mobile apps rather than web pages, they are very similar and
you may use these techniques in your mobile development.
Steps
View HTML Source
Each browser is slightly different. There are steps here for Firefox*,
Chrome*, and IE* running on a Windows* system. But you may be running
on an OS X system or you may be using some other browser. These are
just three samples, shown so that you can see the similarities and
differences in the methods, so that you can figure out how to view source
in any browser.
First, open a website in your browser. Then do the following to see the
HTML source code for that page. (Images shown below.)
Firefox
Click the Open Menu icon in the upper right corner of the
browser
1 - 19
In the pop up window, click the Developer icon

.
In the window that slides out, click Page Source to view the
HTML source code appear.
Chrome
Click the customize icon in the upper right corner of the
browser
In the pop up window, select More tools > Developer tools to
view the HTML source code in a side-by-side tab.
IE (Internet Explorer)
Click the Tools icon in the upper right corner of the browser
In the pop up window click F12 Developer Tools to view the
HTML source code. This looks a lot like CDT that we will use for
testing later in the course.
Firefox
Chrome
Internet Explorer
Key Words - terms you either learned in class from your teacher, read in this
document or they are terms you should look up
.
HTML5
W3C
UI/GUI
Framework
Brackets
Simulator
Cordova/Plugin
Intel App Preview
Intel XDK
1 - 20
Unit Summary
This Unit summary will summarize things you learned in the previous pages, but some of
those things were not fully explained.
You are encouraged to look up things you dont fully understand (just like an experienced software
developer would do).
This course is presented through a combination of lectures and hands on

exercises.
The course has been designed assuming that you may not be familiar with
HTML, CSS or JavaScript. Experienced web developers can skip the parts
they know.
The course consists of 10 Units that cover the essentials of developing

mobile apps with Intel XDK.
The course focuses on developing apps for mobile devices.
You will create several small mobile apps.
Unit Review
Answer the following questions to verify that you learned the basic concepts covered in this unit.
1. You can use a computer with the following operating system(s) to
develop mobile apps with Intel XDK.
a
Windows
OS X
Ubuntu
All of the above
2. With Intel XDK you can develop apps for the following devices.
a
Windows mobile 8+
iOS
Android
All of the above
3. Do you need to install any software other than Intel XDK in order to
proceed through a robust development work flow, i.e. create, test,
build, and deploy a mobile app? If so, what?
4. Which physical device features can you test with the simulator?
1 - 21
5. You must develop mobile apps using Intel's App Designer (T/F)
Critique
Please take 1-2 minutes to answer survey questions to give feedback so
we can improve this course. Please keep in mind that it is intended as a
beginners course.
1 - 22
Unit 2: Getting Started with Intel XDK
Unit 2: Getting started with Intel XDK
Unit Objectives
After completing this unit, you should be able to:
recognize the sections of the Intel XDK UI
open and edit a project
test your app in the simulator
use App Designer to create an app
use the code editor to add JavaScript* to your app
test your app on the simulator
test your app in the cloud via the Test tab
understand in what circumstances you would choose cross platform

development over native development
get help
Introducing Intel XDK
Walkthrough 2-1 Changing colors
Walkthrough 2-2 Hello World
To choose or not to choose cross platform development
Getting help
Key words
Unit summary
Critique
Unit Topics
1 - 23
Introducing Intel XDK

The Intel XDK development system is for those developers who wish to
use HTML5 to build hybrid apps for mobile devices.
Navigating the Tooling Quagmire

Historically, one of the biggest challenges faced by mobile app
developers has been dealing with the lack of a truly integrated
development environment. Most developers spend their days toggling
between HTML design tools, a JavaScript code editor, a CSS editor, a
debugger, command-line build utilities, mobile simulators and more.
Intel XDK is the first truly integrated development environment (IDE)
whose application consists of a set of best-of-breed tools that help you
code, debug, test and build mobile apps for multiple target platforms.
Reviewing the Intel XDK Interface

Intel XDK is organized around the process sequence that HTML app
developers follow when they create and package an application, i.e. the
software development process, otherwise known as SDL (software
development life-cycle)
1. Develop
Use the Develop tab to see your code. You have the option of using
the visual designer (App Designer) to prototype your graphical user
interface, and handle user interactions by coding JavaScript with the
built in Brackets* editor. Or, if you are an experienced web developer
with a different favorite editor, use it. You may write code externally.
2. Simulate
Validate that your application looks and functions properly across
multiple screen resolutions, under varying bandwidth conditions, and
from different geographic locations, by using the embedded
Microsoft* TACO simulator. Debug application errors with the
integrated Google debugger.
3. Test, Debug and Profile
Verify that your app performs as expected by running from Intel's App
Preview container. Debug the app and chart its performance as it runs
on your device.
1 - 24
4. Build
Package the app for further testing and for distribution in app stores.
Designing Apps
As depicted below, Design mode in App Designer enables you to visually
prototype the look and feel of your application.
6
1
5
Develop / Design View with App Designer
The Project Selector (1) enables you to load pre-existing projects

or create new projects into the Intel XDK GUI.
Your app's views appear in the Project Files (2) panel.
While in Design view, you can drag and drop components from
the UI Controls Palette (3) onto the Design Canvas (4).
UI controls that you drop onto the Design Canvas may be

configured by changing settings in the Property Editor (5).
The Product Version (6) indicator shows the version of Intel XDK
that you are using.
Developing Apps
As depicted below, App Designer enables you to toggle from Design to
Code view. This enables you to modify the code generated by App
Designer, as well as edit JavaScript and CSS application assets (buttons
and other widgets). Code hints appear as you type.
1 - 25
Code/Design Toggle
Using the integrated Brackets editor to programmatically code an app
Running Your App in an Simulator

Clicking on the Simulate tab runs your app in the Microsoft* TACO
Simulator. At the time of this writing, Intel XDK was using the Apache*
Ripple emulator. A change was made in August 2016 to the Microsoft*
TACO simulator. Behavior is similar, except that TACO opens a window
separate from the Intel XDK window.
Device Selector
Simulate your app running on multiple devices.
1 - 26
Walkthrough 2-1: Changing Colors

Log into Intel XDK
Open a Sample project
Learn the file structure
Modify CSS to change button or text colors
Test your app in the simulator
Push your app to the cloud and run it on your device
Steps
Make sure you have watched Matts Getting Started video.
Create a New Project
1. Launch Intel XDK

2. Click on the Start a New Project button
3. Click on Samples and Demos/General/Standard HTML5/Buttons
4.
Click Continue on the bottom right of the window
5. Choose a project directory (again, adding a Developer directory keeps

your apps organized separately from your other files)
6. Name your project MyButtons, or whatever you like.
7. Make sure the Develop tab is selected.
8. On the left you will find the files under MyButtons. Open the www
directory. Notice index.html is both under MyButtons and above, under
Working Files if not, double click index.html. It is also open in the
editor.
9. Find and double-click the main.css file. Now main.css also shows up in
the Working Files area, and it is open in the editor.
Modify the code in main.css to change colors.
1. Matt was working in the main.css file.

1 - 27
2. Notice there is a large code section labeled SMARTPHONE and

another large code section labeled TABLET.
3. Do a search for background (Ctl-F or Cmd-F). Notice it appears in
several places. Look at those places. If there is a color or an rgb value
or a hexadecimal color value, hover over that value and you will see
the appropriate color appear.
4. Now, click on the Simulate tab. Spend some time becoming familiar
with the features here. Change the device type tablet to phone, iOS
device to Windows device, etc. Change portrait to landscape view.
5. Click the buttons and notice the font and button colors both before
and during clicking.
6. Go back to the Develop tab. Make sure main.css is in the editor
window. Go to the TABLET section. You will see
#buttonone.pressed{} and #buttontwo.pressed{} In the braces
there are two colors and a font size. These are the values that will be
used when the buttons are pressed. Change one of the values. Save
the file.
7. Go back to the Simulate tab and note the change when you press the
button. (If you are looking at a phone in the simulator, you will not see
your change because you only changed the tablet colors. Switch to a
tablet.)
8. If you made a mistake and something broke, you may need to re-load
the Buttons sample. That is okay, it will still be there. You are changing
your local copy, not the original sample.
NOTE: This brings up the point that when you are developing software and
youve made some important changes and things are working, make a
backup copy of your project DONT wait too long. In case you break your
working copy, you can restore a working version. This is called rolling back
to a working version.
Congratulations. You've just modified a mobile app!
End of Walkthrough
Add an Alert
Watch the following video to review what has been covered and to see
how to add alert pop ups for Android and iOS.
Dales Video https://software.intel.com/en-us/videos/develop-apps-in-html5using-the-intel-xdk
1 - 28
Walkthrough 2-2: Hello World

Create a new project
Design a Hello World app
Test your app in the simulator
Run your app on your device (via App Preview)
Steps
1. Launch Intel XDK

2. Click on the Start a New Project button
3. Open Templates > Blank
4. Choose Standard HTML5 (later, when you want to add plugins, you
will choose HTML5 + Cordova)
5. Click the box Use App Designer
6. Click Continue
7. Enter a project name: MyHelloWorld
8. Click the Create button.
9. Click the OK button on the Success popup
10. If the Select a Framework dialog is not showing, on the left panel,
open the www directory and click on index.html. The dialog will
appear.
11. Click on the App Framework 3 radio button.
12. Click on the Select button.
Design a page
1. From the Controls panel, drag a Header and drop it onto the design
canvas.
2. In the Header Settings panel, turn on the checkbox adjacent to the
Title property and enter the following title:
1 - 29

My Hello World
3. Turn on the Fixed checkbox.

4. From the Controls > Media panel, drag a Text control and drop it
underneath the Header on the Design canvas.
5. In the Text Settings panel, change the text to the following:
Welcome to my world!
Display your page in the Simulator
1. Click on the Simulate tab.

2. In the Devices panel, select Google Nexus 4.
3. In the Devices panel, toggle the orientation of the simulated device by
clicking on the landscape orientation button.
4. In the Device & Network Settings panel, note that you can simulate
different network lag conditions.
Run Your App on Your Mobile Device
1. Click on the Test tab.

2. Click the Sync button.
3. If you have not yet installed Intel App Preview on your device from an
app store, do so now.
4. Open Intel App Preview on your device.
5. To access your app from inside App Preview, either tap the Server
Apps button at the bottom of App Preview, or scan the QR code with a
QR code reader.
6. If you used the QR code, your app should launch. If you went to Server
Apps, then select your app from the list. Open the app. Try it out.
Congratulations. You've just created and (partially) tested a mobile app!
End of Walkthrough
Cross-Platform Development vs. Native

Development
There are two paths to creating mobile apps: native development and
cross-platform development. There are advantages to each. First,
1 - 30
remember that section in Unit 1: Integrate native features? In the old

days,if you did not program natively, you could not access many of a
devices native features. So the two choices were much more distinct:
program natively or know that your app cannot use native features no
barcode scanner, no geolocation, no compass, no motion detection, .
Wait! What IS native development?!?

Well, native development means that you will use the language, function
calls and possibly even a specific IDE for a particular operating system. So,
for iOS you would program in Objective-C or Swift, using iOS function
calls and Xcode as your IDE. For Android you would program in Java,
using Android OS function calls and Android Studio as your IDE. For
Windows you would program in C#, C++, Visual Basic, or JavaScript, using
Windows function calls and Visual Studio as your IDE.
What is Cross-Platform Development?

Cross-platform development means that you are programming in a single
language (though you may choose to write multi-lingually) in a single
environment with your app able to run on multiple devices, i.e. iOS and
Android. With cross-platform development, you can access native
features via plugins.
The Intel XDK development system is for those developers who wish to
use HTML5 to build apps for mobile devices. Lets look at the advantages
of each.
HTML5 Approach
The HTML5 approach is a cross-platform approach that enables access to native features via
plugins
1 - 31
Advantages of the HTML5 Approach

For most people and organizations, its that quicker TTM in the diagram above. Time to
Market. Imagine the scenario:
Youve spent the last year learning iOS and Xcode. Youve spent
the last six months creating an amazing app. You put it in the
Apple App store. People are downloading it. You are excited.
Now you want it in the Google Play store. Now you need to learn
Java and Android Studio. Thats great. You like learning. But you
want to spend time perfecting your app, but you cant because
you need to learn how to create it again, just in a different
language and environment.
Developers and corporate IT increasingly turn to HTML5 as a solution to

meet the critical, time-sensitive demands of their organizations.
1 - 32
Money: Companies that have enough money can hire an iOS

development team and an Android development team. But small
companies and individual developers have a hard time maintaining
multiple native apps in multiple play stores.
Time: Instead of learning and having to program three separate
code sets in Java (for Android), C++ (for Windows) and Objective-C
(for iOS), you can write one codebase to work in all three operating
systems. And if you have web development experience, you can
leverage your existing skills to create mobile apps without having
enormous ramp up time.
Getting Help
Intel XDK ships with online documentation and sample applications, and
has community support resources available as well. As illustrated below
by the dropdown help menu, help features are available by clicking on the
yellow question mark button.
Help Icon
Accessing help resources
Using the Intel XDK Documentation

Selecting the View Online Documentation link from the help menu
(shown above) opens your web browser to the Intel Developer Zone at
https://software.intel.com/en-us/xdk/docs/lp-index.
From here, you can quickly access detailed information about Intel XDKs
features.
The Intel XDK Help Page
After learning the basics, perhaps the most useful documentation pages
for Intel XDK beginners are the Testing and Debugging pages. There you
1 - 33
will find details about the differences in functionality of testing different

operating systems (iOS, Android, Windows).
Using the Forums

The Intel XDK developer forum, below, is a great resource for interfacing
with other developers and the Intel XDK development team. Post your
technical support questions here and receive quick responses from other
developers as well as members of Intel's XDK development team.
Intel XDK Developer Forum - You can search and read the questions and
answers without being logged in. But to post questions you must log in.
Intel XDK Developer Forum many posts are answered by Intel employees,
but it is also typical for developers to help each other.

1 - 34
Reviewing the Sample Applications

As you have seen, Intel XDK ships with several sample apps. These
samples demonstrate how to use commonly requested mobile app
features. Documentation for each sample can be accessed by clicking on
the sample, in the pop-up window click View Intel Developer Zone Article,
shown below. This linked article provides further documentation and
highlights the specific API calls that were critical in producing the desired
outcome.
As you are learning Intel XDK and HTML5, you can refer to the sample
apps to learn how to incorporate features, such as barcode scanning or
tab navigation, into your apps. So be sure to review the samples
occasionally so you know what resources are available to you.
Opening a sample app
1 - 35
Key Words - as before, find these terms either in this document or look
online
.
Host/Target
IDE
HTML5 (in this context, refers to HTML + CSS + JavaScript)
HTML
CSS
JavaScript
Code hints
Develop/Simulate/Test/Debug/Build (know what these are
individually, as well as what the set implies)
App Designer
Roll back
Pop up
Native App
Cross-Platform App
index.html
main.css
User Forum
Unit Summary
Intel XDK is an IDE for creating mobile apps built on HTML5: HTML,
JavaScript and CSS3.
Intel XDK integrates many best-of-breed HTML5 development tools

including the following:
Intel App Designer: WYSIWYG visual interface designer

Brackets code editor
Google Chrome Debugger (CDT) (we will see this later)
Microsoft* TACO Simulator
Intel App Preview mobile app launcher
WEINRE remote debugger (we will see this later)
Apache Cordova app packager (for the build)
appMobi cloud services (adds security in the cloud build)
You can develop your application using a variety of JavaScript

frameworks including Bootstrap* and Intel's App Framework.
1 - 36
App Designer allows you to switch between the visual editor and the
code editor.
You can create widgets (buttons, etc.) either using App Designer or
without App Designer in code.
Intel XDK ships with several sample apps that demonstrate frequently
requested mobile app features.
You can get help with Intel XDK by reviewing the sample apps, by
reading the documentation and by reading or asking questions on the
user forum.
Unit Review
6. What is the SDL? List at least 3 steps in the SDL.
7. Which tab do you use in Intel XDK to see your code?
8. Which tab do you use when you want to see what your app will look
like on a phone?
9. You must use Intel's App Designer to develop mobile apps with Intel
XDK (true/false), if not, in what other way can you create a button?
10. Which physical device features can you test with the Simulator?
11. What happens when you mouse over color numbers in css files in
Intel XDK?
12. How do you add an alert pop-up to an app?
13. What are the main advantages of developing a mobile app using web
standards instead of using Objective-C or Java? List and explain two
advantages.
14. Describe a scenario in which you would want to use native
development. Justify.
Critique
beginners course.
1 - 37
Unit 3: Design thinking

Scalability - Security - Support
Unit objectives
think about and plan for scalability
know where you should be concerned about security
prepare for the post deployment tasks required to support your app
Think Design
Unit topics
o
Scalability
Security
Support
Key words
Unit summary
Unit review
Critique
1 - 38
Think design
When you are developing an app, dont just think code, think design. Most
people who create apps think its fun. Well, because it IS fun. Its fun when you
first make a button do something. Its fun to see your first app run on an actual
device. Its fun to finish an app and put it in one of the app stores.
When we start creating our first app though, most of us dont think about what
will happen if several thousand people start using it. We might think about the
money and the marketing power, but we might not think about ensuring that
the app maintains efficient service.
Besides creativity and generating interest, there are several design issues to
consider when you start creating an app that you want to scale to many users?:
Scalability refers to the ability of your app to handle users as your user base
increases.
Security refers to hiding certain information that should be kept secret, for
example you dont want user B to see user As private information.
Support is that part of service that is considered a part of maintenance after
the app is created, ensuring that the users are well served.
Scalability
Unless you create apps strictly for fun and dont have any interest in monitoring
their usage, acquiring market share is important. You want people to download
and use your apps. But as you acquire market share you must retain it.
Scalability is the ability of a system, process, or network to increase in service
capacity to accommodate user growth.
Consider a highway you use on a daily basis to go to work or school. There are
times that you travel on that highway with no traffic, and there are times when
you have to wait for some time to move forward. Now imagine, the vehicles on
the road exceed the capacity of the highway. The results will be frustrating to
the drivers; ultimately, drivers may choose to use alternative routes to
commute. To apply this analogy to mobile app development, you can image
the highway to be the app, and the app user is the driver.
To build a highway there are many components that the architects and
engineers consider before actually starting to build the physical structure.
Those elements vary case by case. For example, they must think about weather
conditions. The mixture of asphalt ingredients in a hot, dry location differ from
1 - 39
those ingredients that would be used in a cold, wet location. The curve of the
road and the incline dictate the roads banking angle. The purpose heavy
trucks or light passenger vehicles dictate different attributes. In addition, the
safety of the contractors and engineers plays a part as well. These concerns and
many others must be addressed in the planning and forecasting BEFORE the
road is build. Of course if a road going around a steep curve is build flat, and
then the speed limit increases, the road can be torn out and rebuilt with a
banked curve. But that would be time consuming, inconvenient and expensive.
The same applies with app development. You want to plan as much ahead of
time as possible so that you do not waste time and money, and in addition,
make your users frustrated.
Just as in road development, an app developer should consider many aspects
of development before beginning to create an app. Of course, some parts can
be done in parallel such as researching how to access a site for its data, but it is
easy to get involved in the details before the plan is clear. Beware of working on
implementation too early. Define objective, usage, market demographic and
scalability.
For app development, if you want your app to have the potential to be
monetized, you should, from the early days in your development process
anticipate the number of potential users and how fast that might increase. The
anticipation of this and other aspects of your app usage allows you to better
understand the environment your app will function in and be more prepared to
make adjustments, as they become apparent, based on usage. This approach is
important because it allows you not only to have consistency across different
aspects of your development, but also promotes consistency of user experience
in the future.
As the figure shows, scaling faster than expected, with no contingency plan in
place, can make you and your users very sad. This app did not scale well from
1 - 40
100 to 1000 users. Perhaps it accessed data in a database on a server. Maybe

that server responded too slowly and the developer can just switch servers.
Maybe the database access queries were written well enough for 100 users, but
not efficiently enough for 1000 users. Or maybe the app could request data
more efficiently maybe it requests one piece of data at a time when it could
request a whole set of data. Whatever the reason, some pre-release thought
should be put into designing for scalability.
Security
In the beginning programming practices opened holes . . .
In 2008 2012 the world was waking up to the possibilities of mobile apps. As
with any new system, not all bases are covered in the initial stages. Security was
overlooked. This is especially easy to do in the beginning of the era of mobile
apps because companies had been protecting their data for years with stable
web applications allowing customers to access accounts securely. They did
not see that though the data is still on their secure servers behind virtual doors
that are well locked, access to that data can be circumvented when someone
opens the door in a way they hadnt envisioned. Additionally, they did not
envision the many ways that apps that work beautifully can leave their users
vulnerable in so very many ways.
In early 2014 the Starbucks app for paying for purchases was storing
passwords on device in clear text. That means that anyone who had physical
access to a device with a Starbucks app that had been set up could plug it in to
a computer and read the login information. Imagine if you automatically refill
your Starbucks card from a credit card. That credit card could be drained by
someone who had your login information and used it to buy themselves and
their friends daily coffee and food.
But Starbucks was not alone. At that same time early 2014 many mobile
banking apps were found to be insecure.
A security analysis of mobile banking apps for iOS devices from 60
financial institutions around the world has revealed that many were
vulnerable to various attacks and exposed sensitive information. See this
article to understand many vulnerability issues:
http://www.pcworld.com/article/2086320/security-analysis-of-mobilebanking-apps-reveals-significant-weaknesses.html
The article above specifically tested iPhones and iPads, but dont make the
mistake of thinking that only iOS is vulnerable. The operating system cannot be
held at fault when the app itself is programmed in such a way as to be
1 - 41
responsible for allowing information to be taken. There are many simple

security measures that you can take. You will learn one way in Unit 06 having
your JavaScript code in your index.html file allows hackers to take control, and
that this is easily avoidable. Unfortunately, not all early mobile app developers
thought about how to make their apps secure. In 2015 many mobile apps left
users vulnerable due to poor programming practices.
Mobile devices running iOS or Android are far from secure; the
latest Kindsight Security Labs report from Alcatel-Lucent highlights that
there are currently over 15 million infected mobile devices worldwide
a 20 percent increase from 2013.
https://securityintelligence.com/securing-mobile-banking-apps-youare-only-as-strong-as-your-weakest-link/
Security continues to improve. We, as developers must be aware of how to
protect our users, and as users we must be careful in choosing which apps to
trust.
The holes are closing . . .

As companies and developers become more aware of security issues that can
arise with mobile apps they are moving towards reducing vulnerabilities.
Programming practices are strengthening. We hope that mobile developers
now know not to store passwords in clear text format on devices. This will stop
anyone who borrows or otherwise has access to your phone from outright
reading your login credentials. A step beyond the reading of your passwords
is someone getting the encrypted passwords or data and attempting to decrypt
them. We must attempt to use strong encryption algorithms when we write
apps, and strong encryption algorithms when we sign our apps.
Note: App stores like Google Play, Windows Store and Apples App Store
require you to submit a signature a certificate with any app submitted so
that they can verify identity. This ensures that, among other things, no one but
you can update apps you have submitted.
SHA1, developed by the NSA (United States National Security Agency) was
considered to be a good encryption algorithm in the early 2000s. By 2005 it
was known to have become vulnerable to well-funded opponents, and by 2010
many organizations recommended SHA1 be replaced by a stronger encryption
technique. Google, Microsoft and Mozilla have stated that their browsers
(Chrome, Internet Explorer and Firefox, respectively) will no longer accept SHA1
certificates after the beginning of 2017.
Mozilla encourages using encryption algorithms stronger than SHA1
https://blog.mozilla.org/security/2015/10/20/continuing-to-phase-outsha-1-certificates/
As of February 2017 Microsoft Windows 7+ will no longer trust new
code that is signed with SHA1
1 - 42
http://social.technet.microsoft.com/wiki/contents/articles/32288.windo
ws-enforcement-of-authenticode-code-signing-and-timestamping.aspx
Google has been executing its plan to phase SHA1 out since 2014
https://groups.google.com/a/chromium.org/forum/#!topic/securitydev/2-R4XziFc7A%5B1-25%5D
Currently SHA256 with RSA encryption is considered to be a good encryption
algorithm. Unfortunately, not all devices support this algorithm. Older Android
devices do not support SHA256 with RSA. (https://software.intel.com/enus/forums/intel-xdk/topic/622990) What this means is that, as long as the app
stores accept the older encryption algorithms, you must either submit your
apps with weaker encryption, or submit multiple versions of your app, one for
older devices and one for newer devices.
The app stores have begun to facilitate secure apps by providing tools and
testing areas for ensuring that your apps are secure. See: http://androiddevelopers.blogspot.com/2016/04/enhancing-app-security-on-googleplay.html
Just as with any new technology, security in mobile app development is
growing. As a developer you are responsible for protecting your users so that
they feel safe and want to continue using your app(s).
Support
Support is strongly tied to scalability. There are several subsections of support.
You may have a server that you need to ensure is available 24x7. Or you may
need to add another server as your user base grows. This was discussed in the
scalability section above. However, it is in the support area where you can
monitor user issues and be alerted early that you need another server. You may
need to answer user questions. Enabling users to tell you what is wrong can be
a very good way for you to find issues with your app. And finally, you will want
to monitor various types of usage. In addition to monitoring such things as
demographics (covered in Unit 10) so that you will understand your user base,
you will want to monitor usage criteria that will help you determine when to
expand and what users want.
First, 24x7 availability. If you provide a server to store data for your app you
must ensure that downtime is minimal. If that server goes down, you should
have a recovery plan. If your app is a game and that game is becoming popular
and your server is down for 3 months because your server died and you cant
afford a new one yet, you may lose valuable impetus in your game acquiring
customers. However, if this is the case and you communicate with the
customers to come back in 3 months so that they dont get frustrated with
1 - 43
failed attempts, you may recover. If your app is, on the other hand, a business
app then your success may be more dubious. Typically when a business
decision is made to use a new tool and that tool fails, business decision makers
find a different tool to satisfy their needs. Always be honest with users about
downtime, but try to avoid the issues in the first place.
Second, response time to users. You or a partner or an employee should be
able to respond to user questions or issues within a certain amount of time. You
can define that time as something close to 24 hours. Actually solving their
problem may take longer, but responding quickly to acknowledge their
problem makes them feel good like someone is listening. Which you are,
because you care about your apps success. Some types of responses would be:
Thank you, we were not aware of that problem. We will look at it and
get back to you. Then make sure you do get back to them.
Try double-tapping on that selection. It should work then.
That is a known issue. We are working on a solution. Meanwhile, the
workaround is to repeat the double tap.
One bad app review can outweigh many good reviews. For your users to feel
comfortable using your app, they must know that they can get help when they
have a problem.
Finally, a valuable mechanism by which you can support users is monitoring. If
you monitor usage increase you can plan when to add another server without
being blind-sided. You also might want to monitor other patterns like the
length of time it takes to start your app on various devices, or how long a user
uses your app without taking a break. Monitoring, this third piece of support,
will help you support your users in both of the first two pieces. Take a look at
the app stores to see which analytics they will provide you when your app is in
their stores. Then decide if you need more analytics. If so, find or build analytics
capturing that you can include in your app to give you the data you need.
Key words
Scalability
Security
Support
1 - 44
Unit summary
Scalability should be considered early and monitoring will alert you

ahead of time that you need to employ new servers or new strategies
to increase usage.
Understand current security practices for mobile computing.
Plan to support your product both from the perspective of scheduling

time to answer user concerns and from the perspective of ensuring
that you have built-in analytic monitoring from the very beginning.
Unit review
15. What does scalability mean?
16. List two areas of security
17. What is good about encryption algorithms continuing to strengthen?
18. What is made more difficult in a developers work when encryption
algorithms continue to strengthen?
19. List three areas of support.
20. What is something you can do to be forewarned that you will need to
scale up?
Critique
beginners course.
1 - 45
Unit 4: Building and running apps
Unit objectives
create a production build of your app
install the production build on your device
lock the application into a specific device orientation
add a custom icon and splash screen
Create and install a production build
Walkthrough 4-1 Build and deploy Hello World
Making some changes
Key words
Unit summary
Unit review
Critique
Unit topics
1 - 46
Create and install a production build

You've made it to the finish line! Your app, from all appearances, works
great in the simulator and on Intel App Preview. Now you're ready to
create a production build and test it across multiple physical devices and
versions of Android, iOS and Windows. After you've completed device
testing, you can upload your app to Google Play, the Apple App Store, the
Windows Store or simply post it to a web server for download.
Your first step is to click on the Build tab in the Intel XDK window.
Walkthrough 4-1: Build and deploy MyButtons

Build and install MyButtons

o 4-1a for Android (Crosswalk)
o 4-1b for iOS
o 4-1c for Windows 8.1+
Run your app on your device
1 - 47
Steps
Build your App for Distribution
1. Launch Intel XDK and open your MyButtons app.
2. Return to Intel XDK on your desktop.
3. Click the Build tab.
4-1a Build your App for Distribution (Android)
1. Click the Crosswalk for Android build button,

2. If you are queried, click Upload Project
3. Click the Build App Now button and wait. This could take a few
minutes.
4. When you get the Successful Build message: Type your email address
in the Recipient list and click send. An executable Android app has an
apk file extension. The apk files will be sent in an email to you.
Note: if you want to ensure that the files are sent securely, leave the
secure link checkbox checked. Otherwise, uncheck the box. If it is
checked, then in the email you will click the link and need to log in to
get the apk
5. Find out the architecture of your device ARM or x86. On your device
go to Settings. Then go to About Device which on many devices is in
General. If your Kernel Version has x86 in its name, you have an Intel
chip and will use the x86 apk. If it does not have x86 in its name then
your device has an ARM chip.
6. Open the email on your Android device. There are 3 files: an ARM apk,
an x86 apk, and the one with both that you will submit to the Google
Play store when you are ready to publish, after testing.
7. For testing, in the email, tap on the apk file attachment that is
appropriate for your device (ARM or x86).
8. An installer will open, asking if you want to install the app. Install it.
Open it. Test it.
1 - 48

4-1b Build your App for Distribution (iOS)
You should have already created a certificate and provisioning profile. If

you have not yet created your provisioning profile, you need a OS X
system with Xcode* IDE installed. If you
have a developer account, follow the instructions here

do not have an Apple Developer account, follow the instructions
starting here which is nicely summarized in this post in response
183.
NOTE: You cannot submit apps to the Apple App Store until you
purchase a developer account.
1. Go to PROJECT (upper left) Build Settings, click the iOS tab, click in
the Ad hoc Provisioning File box, the folder pop up appears, select
your provisioning profile and it will appear in the text box where you
clicked
2. Click the iOS build button
3. Click Upload Project
minutes.
5. When you get the Successful Build message, type your email address
in the Recipient list and click send.
6. The built files will be sent in an email to you. An executable iOS app
has an ipa file extension.
7. On your iPhone/iPad, open the email, click the link, install the app.
Open it. Test it.
4-1c Build your App for Distribution (Windows 8+)
You need a Windows Developer account and Windows publisher ID if you

want to submit your app to the Windows Store. If you do not yet have a
developer account, and only want to test your app, you can use a
publisher ID of the following form: 22221111-0000-1111-2222333344445555. You may use any digits. However, before creating the
build for the Store, you must get an account, generate a valid publisher ID
and enter that ID in the Intel XDK build settings.
1. Go to PROJECT (upper left) Build Settings, click on the Windows tab
a) Type or paste your Windows Publisher ID into the Windows
Publisher ID text box.
b) Create a Publisher Display Name.
c) Go back to the Build tab and click the Windows 8 build button
minutes.
1 - 49
3. When you get the Successful Build message click the Download
button.
4. Save the zip file and extract it
5. Open the extracted folder
(mybuttons.cordova.windows8.someNumber)
6. Open the Test folder (CordovaApp.Windows_x.y.z.w_anycpu_Test)
7. Right click the ps1 file (Add-AppDevPackage.ps1), select Run with
PowerShell, answer the questions as needed to proceed until you get
to the Success message
8. After it is installed, search for the MyButtons app and click the app
icon to open it. Test it.
4-1d Build your App for Distribution (Windows Phone)
See section 4-1c about the publisher ID.

1. Go to PROJECT (upper left) Build Settings, click on the Windows tab
a) Type or paste your Windows Phone Publisher ID into both the
Windows Publisher ID text box AND the Windows Phone
Publisher ID text box.
b) Create a Publisher Display Name and type it in the text box.
2. Go back to the Build tab and click the Windows Phone 8.1 build button
3. Click Upload Project
minutes.
5. When you get the Successful Build message click the Download button
and save the build file. Then navigate in the File Explorer to the build
(mybuttons.cordova.windows8.someNumber.zip) and unzip/extract it.
6. To deploy the app onto the phone, at the time of this writing, it was
necessary to side-load the app onto the phone. To do this, follow the
instructions here.
7. After the app is installed, open it and test it.
8. If you followed the instructions in the link above, you saw that a
Windows Phone executable has an apx, appx, or xap file extension.
Congratulations. You've just built a mobile app!
End of Walkthrough
Are you happy with your design?

After deploying your app to your device, run it and decide if you like it the
way it is. If there is anything you want to change, think about how you
want it to be so that you can change it in your next iteration.
1 - 50
Configuring Build Details

We will look at more Build Settings later in the course. For now you have
learned where to enter app credentials (i.e. publisher ID, provisioning
profile, etc.).
Making some changes

You now have a working app that you have installed and can run on your device.
There are many things you can change about your app. One thing you will almost
always add before publishing are launch icons and splash screens.
Launch Icons and Splash Screens

When you clicked PROJECT (upper left), you saw Build Settings. Right
under Build Settings is Launch Icons and Splash Screens. A launch icon is
the icon you click on to open an app. Your apps splash screen is the
screen that shows as your app is loading. If you want to change either of
these, you must create images of the right size (using graphics tools) and
add each one by browsing to it. The different sizes are needed because
different devices have different sized icons and window sizes.
1 - 51
Key words as before, look these up if you need to

.
ARM/x86
apk/ipa/apx/appx/xap
Build settings
Launch icon
Splash screen
API
Unit Summary
Building an app is the process of creating an executable from source

code + assets (icons, splash screens, images) + plugins, etc.
Use the emulator for initial testing. But for thorough testing always
test your app on a physical device, preferably several, prior to
uploading to an app store.
To accommodate various devices, any icon and launch images you

include must be added in several sizes.
Use the intel.xdk.device methods to lock your app to a specific

orientation.
You can email apk files to your users or post them to a web server.
App distribution for Android does not require uploading your app to
Google Play.
Unit review
1. Which of the main tabs in the Intel XDK would you use if you want to
create an executable app to install on a device?
2. Name one executable file extension for each of the following:
a
Android
iOS
Windows Phone
3. The HIG is well-known to iOS developers the Human Interface

Guidelines. It outlines the many requirements for acceptance to the
Apple App Store, such as minimum tap-able area for an element
1 - 52
Apple will reject an app that has any element with a tap-able area
that is less than 44x44 points (though the element itself can be
smaller). (Points = pixels in a regular display, a point is half as wide as
a pixel in a retina display.) Look in the HIG here state the pixel size
for the launch image of an iPad2 when it is in the portrait position.
4. Describe the process for installing an apk file on a target device,
assuming the target already has access to the apk file.
5. Remember the two lines you added to hold portrait screen
orientation? Take a look at the methods and properties available the
cordova device plugin. Using those methods and properties write
pseudocode (since you may not yet know how to write conditional
statements in JavaScript) that will cause rotation if and only if the
screen rotation is in landscape mode.
Critique
beginners course.
1 - 53
Unit 5: Testing and debugging with Intel XDK
Unit objectives
debug in the emulator with Chrome Developer Tools (CDT)
test using the Test tab
test using the Debug tab
be familiar with the testing capabilities available for each target OS
Debugging your apps
Walkthrough 5-1: Viewing the DOM and setting breakpoints
Walkthrough 5-2: Using the CDT console
More thorough testing on device
Walkthrough 5-3: Remote testing untethered
Understanding the capabilities
Unit topics
1 - 54
Debugging your apps

As you develop your apps, you will need to find bugs which will need to
be eradicated. You will find many of your bugs when you run your app in
the emulator. Others may not appear until you run the app on a physical
device. Fortunately, Intel XDK has both of these scenarios covered.
Debugging in the Emulator

Intel XDK features an integrated developer tool (Chrome Developer Tool CDT) that you can
invoke by clicking the debugger button from the Emulate tab.
CDT allows you to inspect the DOM (Document Object Model) of your
application, review the HTTP requests, read the contents of cookies and
HTML5 local storage, and even provide hints as to how to optimize your
app's performance. Most importantly, it enables you to set breakpoints
and step through your code interactively while monitoring the contents of
variables.
Activate Debugger
Activating the debugger

When you activate the debugger with the bug icon, as shown, the CDT
window appears. It is organized into the following tabs.
1 - 55
Elements
Network
Sources
Timeline
Profiles
Resources
Audits
Console
We will focus on Elements and Sources in this unit, as well as scratching

the surface of the power of Console. Much more information about CDT
and how to use it can be found on the Chrome Developer site.
Label
Description
Elements
Enables you to click on any area in your browser and

inspect its markup. It also displays all the CSS applied
to the element and allows you to selectively enable,
disable, and modify individual styles.
Sources
Displays all of the JavaScript files that were loaded

into the browser as part of the request. You can set
breakpoints and step through your code one line at a
time. You can also define watch expressions to keep
an eye on the contents of your variables.
Console
Displays error messages as well as the output from

executing console.log() statements. You can also
execute JavaScript code interactively in this view.
Viewing the DOM elements

DOM, Document Object Model, refers to the HTML tag structure. In the figure below, notice the
following tags: <html>, <body>, etc. Anything directly following the open corner angle bracket,
<, is referred to as a tag in HTML. These tags form the DOM of the project.
1 - 56
The integrated debugger CDT
Walkthrough 5-1: Viewing the DOM and setting breakpoints

Experience how CDT works in conjunction with the Intel XDK

emulator
Mouse over DOM elements and see the effects
Set a breakpoint on a DOM attribute modification
View the JavaScript code associated with that breakpoint
Execute that JavaScript code
Steps
Practice using CDT in the emulator with the MyButtons app
1. Open Intel XDK this lab will take you back and forth between the
Emulator and CDT.
2. Open your MyButtons app from Unit 1
3. Go to the Emulator (click the Emulator tab at the top)
4. Click on the bug icon
as indicated by the arrow, Activate
Debugger. This will open a CDT window.
1 - 57
5. Arrange your Intel XDK window and your CDT window so that you can
see most of the emulator device and at least the left side of the CDT
window, like what is shown in the figure above.
4. In the debugger window, on the left side you should see the DOM. If
you do not, click the Elements tab.
5. Now click on the triangles
to expand the various parts of the
DOM. What we are interested in right now is the <div class=content>.
Expand that part and you will see the div tags for the two buttons.
6. One of the many powerful features of CDT is the mouse over feature.
After youve opened the content div and see buttonone and
buttontwo, mouse over (maybe youve figured it out intuitively, but
just in case you havent, to mouse over something means to pass
your mouse over an item on the screen without clicking) the HTML
DOM elements and watch the emulator view change. You should
see something similar to the figure above. When you hover over
(hover over means to hold the mouse still over something without
clicking) the buttonone line in the HTML code in CDT, your
emulator image in Intel XDK shows the elements boundaries and
tag.
Using this mouse over technique allows you to see which elements
in the UI are controlled by which elements in the DOM.
7. Another powerful feature of CDT is the ability to set breakpoints on

DOM attributes so that you can see things like which JavaScript code
is called when you press a button or start typing in a text box.
Right click on the buttonone line, select Break on, select Attribute
modifications (only if it does not already have a checkmark next to
it.)
1 - 58
Next, go to the Intel XDK emulator and press the top button in
your app device. It will look like the button is not working because
the breakpoint you set will pause execution right before the
button actually presses. The CDT debugger window should
automatically switch from the Elements tab to the Sources tab. If
this did not happen . . .
Troubleshoot tip #1: Check that the breakpoint is set: In
the Elements tab in CDT, right click on the buttonone line in
the DOM and select Break on. There should be a check
mark on Attribute modifications.
Troubleshoot tip #2: If Attribute modifications is checked,
yet the CDT window did not automatically switch to the
Sources tab, click on the Sources tab, in the window on the
right side open the DOM Breakpoints section (click the
triangle). Div#buttonone should be there but may be
unchecked check its check box. Now the breakpoint
should be set. Try clicking the top button back in the Intel
XDK emulator again.
8. After setting the breakpoint you will be looking at the Sources section
of CDT. There you will see that there are 3 windows: left, center and
right, with a 4th window, the console, open at the bottom. If the
console window is not open, find the hamburger icon
(usually top
right or bottom left of the CDT), and press it. It is usually useful to have
the console open to see messages and errors. We will look at this
window later in this unit. There are several things to notice.
First, the window on the left has its own set of tabs and should
default to Sources. So you should be in the Sources tab of the left
window which is in the Sources tab of the main window. Here you
can see the file hierarchy and open files.
Second, the center window should have automatically opened

main.js. The line of code where the button is about to be pressed
should be highlighted, as shown.
1 - 59
Third, the right hand window shows the breakpoints we only

made one breakpoint, but there could be several. There are many
kinds of breakpoints, the one we made is a DOM breakpoint
because we made it in the DOM of the HTML. Also, we specified
that our breakpoint would be an Attribute Modification breakpoint.
This means that a breakpoint will be inserted (the code will pause
execution) at any point where an attribute of the element is
changed in this case, when the class name of the button
changes.
9. Open the DOM Breakpoints section in the right hand window. You can
see that the breakpoint we set is on the buttonone div when one of its
attributes is modified.
10. Remember that at this point you have pressed the button in the
emulator and it did not change because the code stopped executing.
Now you will advance the code. You can use the debugger controls to
interactively step through your code. At this point, because you have
very little code, stepping through it is rather uninteresting. But later,
when you have more code, stepping through the code with a
debugger can be very helpful. Now press the Play button to resume
the script.
Using the debugger's step controls
1 - 60
Immediately you will see in the debugger that the file structure on the
left has disappeared and main.js is no longer in the middle window.
That is because this window shows the currently running code, but no
code is running.
NOTE: CDT is a third party tool that is embedded into the Intel XDK, Intel
did not create nor does Intel control the CDT.
WARNING: After hitting the play icon, your button should have released
and changed back to its original color and format. However, it may not
have done that. It is probably just fine. Do not assume it is broken. When
using CDT, there is debugger code that gets inserted amongst your code
and can interfere with the proper action of your app code. This is one of
the reasons you should test on device before publishing an app. Just like
any other system where a host and target are necessary, you are not
guaranteed to see all details of your app running precisely like they would
run in the real world, until you build and run on device.
Congratulations. You've just learned several ways to debug a mobile
app using CDT in the Intel XDK emulator!
End of Walkthrough
More on Breakpoints
You have already seen how you can set breakpoints with the CDT GUI, but
you can also set programmatic breakpoints by inserting the following
command into your JavaScript: debugger; wherever you want a breakpoint
set.
1 - 61
If CDT is active when this statement is encountered, execution of your app

will pause and your script will appear in the Sources section just like it did
when you set the breakpoint in Walkthrough 5-1.
You can also set watch expressions in order to view how your code
changes the contents of your variables.
Watch expression (i) and programmatic breakpoint
Outputting Variables to the Debugger Console

Use the console.log() command to output variable values and function
results. You can use this command in your program so that information is
output as it runs. Also, after pausing on a breakpoint you can type a
console.log() message to get information as you step through the
program.
Walkthrough 5-2: Using the CDT console

1 - 62
Use the console.log() command in code

Set a programmatic breakpoint
Use the console.log() command in the at runtime in the Console
Set a watch expression
Steps
Use the CDT console and the console.log() function
1. Open Intel XDK, open your MyButtons project, open the DEVELOP
tab, open main.js, find the touchstarthandler function shown
below. This function sets the buttons className attribute to
pressed.
2. Add the following lines to this function after the className is set but
before the ending brace of the function.
for (var i=0;i<5;i++) {
console.log(i);
}
3. Save main.js (right click the filename in the left window, click Save; or
ctrl-S (cmd-S on Mac))
4. Go to the Emulator tab
5. Start the debugger (click the bug icon)
6. Make sure the Console window is open (hamburger icon)
7. Click either of the buttons you should see 0 4 printed, as shown.
Add a programmatic breakpoint
1.
1 - 63
Now go back to main.js in the DEVELOP tab of Intel XDK.
2. Add the debugger; line before the other code that you added so that
touchstarthandler looks like the following.
// Touch start functionality for the buttons
function touchstarthandler(event) {
var button= event.target;
button.className ="pressed";
debugger;
for (var i=0;i<5;i++) {
console.log(i);
}
}
3. Save main.js
4. Go to the Emulate tab
5. If CDT is already open, click the refresh icon
CDT, otherwise click the bug icon.
to restart the app in
6. Click one of the buttons.

7. In CDT the Sources tab should have been invoked and main.js
should have opened showing that the app has stopped execution at
the debugger; breakpoint.
8. Now use the debuggers step controls that you saw in Walkthrough
5-1. Use either step-over or step-into, either one will work in this
case. As you press the step control several times, you can see the
numbers start to print in the console.
9. After you see the 1 or 2 or 3 print, click in the console to the right of
the arrow under the number that just printed. Type console.log(i)
and you will see the current value of the variable i.
NOTE: If you try to print the value of i after exiting the for-loop, i no
longer exists because you are out of the scope of the for-loop and
you will get an error message telling you that i is not defined try it
and see.
1 - 64
The CDT Console view
Set a Watch Expression
1.
In the CDT right hand window open the Watch Expression
section if it is not open by clicking the triangle next to it.
2. In the Watch Expression area click the + and type i in the box. It may
not be available at the moment, but when you click one of the
buttons in the Intel XDK emulator and start stepping through the
code you will re-enter the for-loop and i will then exist and have a
value.
Congratulations. You've just learned how to use the powerful CDT
console and how to set watch expressions!
End of Walkthrough
More thorough testing on device

The Test tab and the Debug tab give you two more powerful ways to test
and debug your apps. Here we will look at how to put your app on your
device using these two tabs. Additional debugging methods with these
two tabs are discussed in Unit 9 - remote debugging.
Testing via the Test tab

The Test tab allows you to push your app to Intels testing server in the cloud. After pushing to
the cloud you can access your pushed apps via App Center* and run them in App Preview* on
1 - 65
your device. You should have installed App Preview on your device already. If you have not, do
that now. The reason you need App Preview is because your app has not been built into an
executable program. Your app has its core pieces, but it needs some more parts to be able to
function as a full-fledged app.
Walkthrough 5-3: Remote testing untethered

Run your app on your device via the Test tab
Steps
Test your app via the Test tab
1. Ensure you have the latest version of App Preview installed on your
target device
2. In Intel XDK, open your MyButtons project
3. Click on the Test tab
4. Click on the PUSH FILES command and wait until the project is
uploaded
5. Open App Preview on your target device and log in with your Intel
XDK login. This takes you to App Center where your pushed apps will
be stored
6. Select your MyButtons project
7. It should open
8. Test it
End of Walkthrough --
1 - 66
Understanding the capabilities

Unlike a native app, you cannot use native debuggers to debug your
HTML5 code (other than logging (print statements) and similar limited
activities). You have learned a lot about using the Emulate tab features for
testing and debugging, but have only scratched the surface of other
options. You will learn about Web Inspector Remote (WEINRE) in Unit 9.
WEINRE provides additional, powerful debugging capabilities.
1 - 67

.
CDT
DOM
HTML tag
Breakpoint
Mouse over/Hover over
Hamburger icon
console.log()
watch expression
debugger;
untethered
WEINRE
Unit summary
You now have tried debugging via the emulator.
You know how to use CDT.
You can find the console and log messages there to track function
results and see variable values.
You can set breakpoints and walk through code.
You have tested on device and understand the some differences

between the Test Tab and the Debug Tab.
Unit review
21. How do you access the CDT window in the emulator?
22. Name the Intel XDK tabs where you can debug.
23. Name 8 things you can do to debug your code, for example, set watch
expressions in CDT.
24. What app do you need to download to use the Test Tab?
25. What does it mean to step over a function?
26. Which tabs could you use to test on device?
1 - 68
Critique
beginners course.
1 - 69
Unit objectives
Properly format an HTML document.
Format a page with css using the <style> tag as well as in a separate
file via the <link> tag.
Add functionality using JavaScript.
What is HTML5?
So what is HTML (without the 5)?
Lab 6-1: Putting it all together (content and tags)
Best practices
What is CSS and why do we want to use it?
Lab 6-2: Modify HTML content with CSS in <style>
Lab 6-3: Modify HTML content with CSS in a file
CSS selectors: id and class
Lab 6-4: Experiment with CSS
What about JavaScript?
Lab 6-5 a-b: Experiment with JavaScript
Better JavaScript design
Lab 6-5 c-e: Experiment with JavaScript (continued)
Wrapping it up
Unit topics
1 - 70
What is HTML5?
When people say 'HTML5', they usually mean a bit more than just the 5th
version of the "Hypertext Markup Language". Modern web pages and web apps
are generally composed of at least three components, so what people
often mean when they say 'HTML5' is the trio of languages; HTML, CSS3 and
JavaScript.
The 'HTML' part contains all the content, organized into a logical structure. This
is the part that an author might be most concerned about; the words, chapter
headings, figures, diagrams, etc. While there have been numerous versions of
HTML since its inception (at least 5, I'd guess), our focus in this course is the
most recent version, HTML5. HTML5 was developed as an attempt to provide
more powerful and flexible ways for developers to create dynamic web pages.
The 'CSS' part (version 3 being current) is all about the presentation or style of
the page; what it looks like without too much regard for the specific content.
We'll be going into more detail on that later in this course, but for now think of
it as the way you might specify a "theme" in a word processing document,
setting fonts, sizes, indentations and whatever else may apply to what it looks
like.
The 'JavaScript' part is about the actions a page can take such as interaction
with the user, and customizing and changing the page according to any number
of parameters. This is what allows a web page to be more than just a document,
but potentially a Web App, with nearly unlimited possibilities. JavaScript is an
important leg of the stool for modern web pages.
1 - 71
That's the situation now, but in the beginning there was just HTML, defined by
Tim Berners-Lee. HTML, combined with the Browser, gave birth to the World
Wide Web.
HTML5 in industry
Remember the discussion from Unit 2 about the native approach vs. the cross
platform approach of creating mobile apps? Lets remind ourselves what that is
all about. If your app must to be super-efficient, they might decide it is best to
program natively. For the rest of us who dont have time critical apps (like
running an Electrocardiogram machine) and want to make our apps work on
multiple operating systems, i.e. iOS, Android, Windows, heres the deal:
If you are not familiar with mobile development you must learn the event loop,
and either
HTML5 and on upgrades change one set of code, or
Objective-C, Java, and C# (you may swap Obj-C Swift and C# C++)
and on upgrades change three sets of code.
If you are familiar with mobile development and, say Objective-C, you need to
additionally learn either
HTML5 for the other two operating systems and change two sets of
code on upgrades, or
C# and Java and change three sets of code on upgrades.
Again, because time to market is critical in the business world and many of their
developers already have HTML5 in their knowledge base, more and more
companies are turning to cross-platform development and HTML5.
A little history
Ironically, Tim Berners-Lee did not start out as a Computer Scientist, nor did he
initially envision what has become the World Wide Web.
No, he was initially a Physicist, having received a degree from Oxford. Working
under contract at CERN, he came across a problem to be solved. Given the
complex nature of high energy experiments, there were usually many scientists
involved in a given project, and efficient communication was needed to keep
everyone up to date and quickly spread information. He needed an easy way to
organize and track information, and share it among colleagues.
1 - 72
The sharing part was done using existing network technology (TCP/IP) but for
the organization of information he defined a new format based on the existing
concept of "Hypertext".
Hypertext is built on the idea of linking information together, not unlike using
footnotes, except much easier and more flexible. The idea was to "Mark Up"
your document with links and define how to break it down into different
segments (chapters, sections, paragraphs, tables, figures, etc.)
Thus in 1989, he began to create a definition of HTML: Hypertext Markup
Language.
He envisioned a technology that would facilitate thoroughly interconnected
documents. He wanted authors to be able to connect an idea in one document
to the source of the idea in another, or connect a statement with the data that
backs up that statement. Traditionally this kind of thing was done with
footnotes and bibliographies, which can be cumbersome. This information
should be easily transferable from one place to another, so that in reading one
document, it's easy to access everything related (linked) to it. Tim Berners-Lee
imagined a "Web" of interconnected documents.
He used the metaphor of a Web to emphasize the importance of connections

between documents. It wasn't just a long list of details, but rather a sea of
1 - 73
information stretching out in all directions. This sea of information was

navigated by a new tool called a "Browser".
So what is HTML (without the 5)?

HTML, as stated above, is content. But it is content with tags. The content text
and images is marked up with tags that identify how you want your document
to be formatted.
Elements, tags, attributes and comments

The he "M" in HTML stands for "Markup", but what does Markup really
mean? Essentially it means to annotate a document with extra
information. Things like where different sections and paragraphs begin and
end, which part is the title, which things should be emphasized and so
on. There are many ways to markup a document, but HTML borrows a
technique from SGML which uses angle brackets ("<" and ">") to separate the
annotations from the regular text. In HTML these annotations are called "tags".
For example, consider the following chunk of HTML code:
<body>
<h1>A Tale of Two Cities</h1>
<p>
It was the best of times, it was the worst of times, .
</p>
...
<p>
. . . it is a far, far better rest
that I go to than I have ever known.
</p>
</body>
If you eliminated everything in between the angle brackets from the text, for
most purposes it would still read the same:
A Tale of Two Cities
It was the best of times, it was the worst of times . . . .
...
1 - 74
. . . it is a far, far better rest

that I go to than I have ever known.
Once you know that everything in angle brackets is "meta-information", it leaves
a lot of flexibility. You can put a lot of different things in between those
brackets without any of it showing up (directly) in your finished document. And,
though you don't usually see directly the bit that is in those angle brackets, that
bit can often have a big effect on what your web page looks like as well as how
it responds and interacts with you.
Elements
If you're sitting at a coffee shop next to a table of web developers, you'll
probably hear three words quite a bit: 'Tags', 'Attributes' and 'Elements' (or
sometimes 'DOM elements', same thing just more precise and
wordy). 'Elements' are the pieces themselves, i.e. a paragraph is an element, or
a header is an element, even the body is an element. Most elements can
contain other elements, as the body element would contain header elements,
paragraph elements, in fact pretty much all of the visible elements of the DOM.
So, thats nice, but how do we represent elements in a text file? Well, thats
where tags come in.
Tags
Tags are what we use to organize a text file (which is just a long string of
characters) such that it represents a tree of elements that make up the html
document. Tags are not the elements themselves, rather they're the bits of text
you use to tell the computer where an element begins and ends. When you
mark up a document, you generally don't want those extra notes that aren't
really part of the text to be presented to the reader. By using '<' and '>' as a kind
of parentheses, HTML can indicate the beginning and end of a tag, i.e. it's telling
the browser this next bit is markup, pay attention. The line below is an example
of this.
<p>This is my first paragraph!</p>
<img src="https://goo.gl/pVxY0e"/>
There are a few strange tags that do not have open and close versions, such as
the second line above. We generally refer to these strange ones as self-closing
tags.
1 - 75
Attributes
Most of what we'll cover about attributes will come later, but I wanted to
introduce the idea briefly. Basically, a given element on your webpage can be
distinguished by any number of unique or common attributes. You can identify
it uniquely with an 'id' attribute, or group it with a class of other elements by
setting the 'class' attribute. Attributes in HTML are written inside the opening
tag like this:
<p id="paragraph-1" class="regular-paragraphs">
Call me Ishmael . . .
</p>
In this case I've given this paragraph a unique identifier, "paragraph-1" and
made it part of a class of "regular-paragraphs". The letters inside the quotes
have no meaning to the computer, they just need to be consistent. They're
actually strings, which as we will soon learn, if you want to have another
paragraph in this class, it has to say "regular-paragraphs", not "regular" or
"Regular-Paragraphs" or any other variation. Again, the fact that the computer
doesn't much care what we put in those strings (except for some restrictions)
means we can use them to convey meaning to a human developer. I could just
as easily have said id='x' and class='y', but anyone looking at that would have no
hint what the significance of x and y are. Best practice is to name these things
to increase clarity, consistency and brevity.
More about attributes later.
Comments
Computers are great at reading computer languages, but it's not always easy for
humans. Comments are a way of adding some text that is primarily targeted at
human readers. Below is a simple comment.

And if you want a comment to span several lines, mark the beginning and
ending like in the following.
<!-If you want some good advice,
Neither a borrower nor a lender be,
For loan oft loses both itself and friend,
And borrowing dulls the edge of husbandry.
1 - 76
-->
Comments are also used to comment out code when you have lines that you
want to keep, but dont want to display at the moment, like the following.

It is important to know that just as HTML, CSS and JavaScript are three different
languages, they each have their own way of indicating comments. This might
seem confusing, but it is actually kind of important that the HTML comments, at
least, differ from the others. As for the exact form of those other comments, we
will cover that in good time.
Lab 6-1: Putting it all together (content and tags)

Basic format for an HTML5 document is the following.
<!doctype html>
<html>
<head>
</head>
<body>
<p>
As my English teacher used to say, 'One sentence does not a paragraph make!
</p>
</body>
</html>
This is a very light introduction to HTML. There are some other critical tags, like
<div> that you should learn if you are going to program in HTML5. There are
many resources where you can learn more, including free online resources to
find some go to a browser and search use search terms like learn html5.
1 - 77
Steps
Create a blank HTML5+Cordova project called HTML5Testing with the

Blank template without App Designer. You will see this format with a few
additional items (CSS and JavaScript).
Run it in the emulator and see what happens.
Change the title and the text output.
What happened?
What about the title? Where would it show in a desktop browser? To

see where it shows in a web browser:
o
Copy the contents of the index.html file into a text editor on your
host machine, like TextEdit or Notepad, save as test.html, close
the file, go to your file explorer and double click the file name.
Because you saved it with an html extension it will open in a web
browser (unless you have tweaked your extension options).
You can do some tricks to make the title appear, but for now just
state briefly a probable reason why the title does not show.
Congratulations. Now you can create a valid HTML document!
End of Lab
Best practices
The wisdom of our forefathers is in the simile, and my unhallowed hand shall
not disturb it.
- Charles Dickens
I love it when my kids ask lots of questions and challenge my
assumptions. Except sometimes. While it's a great sign of a curious and
reasoning mind, it can be overwhelming, and you can't really learn (or teach)
everything at once. Some things are better to be taken on faith in the short
term, until you fully understand the issue.
That brings up a term you might hear quite a bit in this class: Best practice. It's
often said that bad programs can be written in any language, and I can verify
from personal experience that's true (at least in every language I've
learned). Over time, developers learn that some habits are better than
others i.e. that some habits tend to make a program more readable and easier
to understand and maintain than other habits, It could also be about
1 - 78
performance, i.e. in a given language doing a particular task may be faster one
way than another.
To borrow an example from another profession, if you want to hammer a nail,
it's best to do it in as few strikes as possible (e.g. 2 or 3). That may not be
obvious to non-handy people like me, but I've been assured that's the best way
by people with a lot more experience than I, so I'll take it on faith (at least for
now).
In truth, there is a certain amount of subjectivity where best practices are
concerned. New techniques are discovered, new ideas are born, and
sometimes, fashions change. For our purposes and the duration of this
course, when we use the term "best practice" you can trust that it is, even
though we may not be able to explain it at that point in the course, so you'll
want to make it a habit.
Indenting and white space

Take a look at the apps you have worked with so far. MyButtons and
MyHelloWorld have files that are nicely formatted. Look at index.html, main.css,
app.css, init-app.js and main.js. All of them are nicely indented and have extra
white space. White space refers to the extra spaces and blank lines that are not
necessary for the computer, but make it easier for humans to see where
sections and parts begin and end.
Different engineers at Intel have created the different samples that are available
with the Intel XDK, but all of them know that proper indentation and plenty of
white space is critical to efficiency. Indenting and extra spacing does not make
the app run faster, but it makes it much faster for the app to be understood and
modified.
What is CSS and why do we want to use it?

Remember, the 'HTML' part of HTML5 contains all the content, organized into a
logical structure. This is the part that an author might be most concerned about
the words and other content. But the HTML part is limited in how it can define
placement and style.
CSS stands for 'Cascading Style Sheets'. For now do not worry about what the
'Cascading' part means and just focus on the 'Style Sheets'.
1 - 79
Using CSS we can determine the visual appearance of our HTML elements
independent of the HTML itself.
Recall the metaphor we used for HTML with the journalist and the publisher.
Where HTML represents the author's work, CSS corresponds to the work the
designer does: deciding how things look.
In the early days, there was no CSS, so any control over what the page looked
like was done with tags that controlled the form of the webpage. Tags like 'font'
to choose a font, 'b' for bold, 'i' for italic, &c. were added to have some control,
lest your page be at the mercy of whatever browser the reader was using. There
are several problems with this approach. First, it violates our paradigm of HTML
containing only content. Second, and more practically, the tags only applied
where they were used. For instance, if you originally wrote your document with
all of the paragraphs indented a certain amount and then later you were
decided to change the indentation then you would have to modify every single
paragraph in your document. It would be nice if there were a central way to set
such rules, i.e. one place that said "I want all my paragraphs to be indented this
much", much like master sheets in a word processor. CSS helps to solve this
problem.
Let's see CSS in action. Below we see two identical copies of HTML. But styled
differently.
Here is the HTML:
<p>She looked over the top of her book and whispered
<q>I'm pregnant.</q>My heart stopped.<p>
And now two very different looks:
Both of these use the exact same HTML. It is the CSS that makes them so
different. So let's get started.
1 - 80
CSS tags
<style> tag
The best practice when working with CSS is to keep it in an external file using
the <link> tag, but when starting it is simpler to merely place it directly into the
document under edit.
To place CSS directly into an HTML document, we use the <style> tag. This tag
can appear anywhere in an HTML document, but the most common practice is
to place it in the <head>. Like so:
<!DOCTYPE html>
<html>
<head>
<style>
/* CSS will go in this area */
</style>
</head>
<body></body>
</html>
This line above, /* CSS will go in this area */, is a comment discussed below.
<link> tag
While <style> is convenient, the better practice is to put the CSS into a separate
file. One of the key advantages of using a separate file is that the CSS styles can
easily be re-used between your different .html pages. Another advantage is that
when you are changing your content you dont accidentally change the style, or
vice versa. Many authors further divide their CSS up into different files (for
example one for text styles, one for layout).
Simply put your CSS into a separate file. This file does not need any HTML
markup (ie, no <style> tag required). Use the .css file extension and use
a <link> tag to bind it in. The <link> tag must appear in the <head> section. By
convention, css files are kept in a directory named css.
Use <link> to specify your css file:
1 - 81
<link rel="stylesheet" href="css/my_styles.css">
Here is an example HTML document with the CSS in a separate file.

<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="css/my_styles.css">
</head>
<body>
</body>
</html>
Best practices
CSS is a set of rules in curly braces, such as:
p{font-size: 12px; line-height: 15px; }
BUT . . . even though it the above rule set works just fine as is, best practices
dictate that putting each rule on a separate line is better:
p{
font-size: 12px;
line-height: 15px;
}
It is easier to find and read when separated onto different lines and indented as shown.
Comments
CSS comments are different from HTML comments. Comments in CSS are
placed between /* and */, such as:
p{
font-size: 8px; /* client insists small text makes them more 'professional'. */
/* I hope his idea of 'professional' includes paying on time. */
line-height: 24px; /* see above */
/* none of the stuff below is working. I don't know why.
1 - 82
margin-top: 5%;
margin-bottom:6%;
*/
}
This is the same as comments in many programming languages (including

JavaScript, as you will see soon).
CSS properties
There are hundreds of CSS properties. A complete list is here:
https://developer.mozilla.org/en-US/docs/Web/CSS/Reference
Below are just three of the most useful and common CSS properties.
FONT-SIZE
font-size can be used to size the text of a tag. The value for the font-size has
two parts: a number and a unit. Some of the most common units
are: px, em, %, vh . For example:
p { font-size: 18px; }
q { font-size: .8em; }
blockquote { font-size: 10vh; }
The units are discussed below.

Additionally, font-size supports a more readable set of values that many
authors prefer: xx-small,x-small, small, medium, large, x-large, xx-large
and relative sizing (relative to the text of the parent): larger, smaller
p { font-size: medium; }
q { font-size: small; }
blockquote { font-size: larger; }
LINE-HEIGHT
1 - 83
Whereas font-size may drive the size of the text itself, the line-height property
drives the height of the space it is drawn into. A large line-height will give the
text more spacing. A small line-height will smash the text lines together.
For example, all of the Middlemarch text below has font-size:16px; But on the
left we see line-height:8px; and on the right, line-height:30px;
line-height supports the same units that font-size does ( px, em, %, vh, etc)
MARGIN
We will examine layout in a later unit. But the margin property is the lynch-pin
for positioning elements. Whenever you want to move something a little the
margin property should be your first thought. When having layout problems, it
is the first thing you should check.
The margin can be a bit confusing. Depending upon context, it will space an
item away from its immediate neighbors (in the HTML) or from the edges of its
parent. Also, there is not only one margin property, but 5:
p { margin: 10px; } /* a 10 pixel margin will be applied around all four sides of the item */
p{
margin-left: 10px;
margin-right: 10px;
margin-top: 10px;
margin-bottom: 10px;
}
Units px, em, rem, %, vh

font-size, line-height, margins and many other CSS properties expect some sort
of dimension value. Dimension values support a wide variety of units. But the
most common and useful ones are: px, em, rem, % and vh.
px
'px' is short for 'pixel', which is a single dot on the screen. So text with fontsize:20px is 20 pixels tall on-screen. In actuality, due to browser zooming, retina
displays, or other factors, this may or may not match to 20 physical on-screen
pixels. px is useful for both horizontal and vertical dimensions.
1 - 84
em
'em' is a typographic term that has come to the web. On the web, em units are
usually used for vertical dimensions. One 'em' maps to the height of one capital
letter in the parent context.
p { font-size: 0.9em; } /* text in a paragraph tag is smaller than its parents */
h1 { font-size: 1.2em; } /* but an h1 will be bigger than the parent */
i { font-size: 0.5em; } /* and any italicized text will be half as big. */
All the text sizes above are relative to the pages base size. You'll see radically
different results on the rest of the page from either of these rules applied to the
body, but relative to one another they'll remain sized correctly.
html, body { font-
btml, body { font-
size: 50px; } /* 50
size: 20px; } /* 20
px base text size */
px base text size */
rem
'rem' is much like 'em'. But while 'em' sizes an element relative to its parent,
'rem' always derives its size relative to the root. In an HTML document with lots
of nested elements, 'rem' will generally prove to be more reliable than
'em'. rem is supported in all modern day browsers, including mobile. But not
older ones.
Using the CSS rules from the em section immediately above, nested paragraphs
(<p>one<p>two</p></p>) would get increasingly smaller. But if rem units were
used, they would be the same size.
Note to ensure you are setting the root size,
use both the html and body selectors.
html, body { font-size: 20px; }
%
Whereas em is a measure relative to the parents text size, the percentage unit
(%) is relative to the parent dimension. This is a useful unit for both horizontal
and vertical dimensions, though often more useful in the horizontal.
p{
margin-left: 10%;
margin-right: 10%; /* 10% of parent width will be spent on the two side margins */
}
Initially, the percentage unit may seem very handy (and it is), and many
developers fall in love with it. But the love affair is usually short lived. One of
the limitations of this rule is that for it to work correctly, the parent must have
an explicit width or height set. This limitation is particularly noticeable in the
vertical dimension. If the parent element doesn't have an explicit height set
then child percentages may be percentages of 0.
1 - 85
vh / vw
'vh' stands for viewport height, and 'vw' for viewport width. The vh and vw units
work much like the percentage ( % ) unit. But instead of percentage of the
parent, it is percentage of the screen (aka viewport). Obviously, vh is for vertical
dimensions, and vw for horizontal dimensions.
vh and vw do not suffer the parent limitation that the % unit does. Most
modern browsers support these units, but there are some exceptions on older
mobile browsers.
p{
margin-left: 10vw;
margin-right: 10vw; /* 10% of screen width will be spent on the two side margins */
}
Lab 6-2: Modify HTML content with CSS in <style>

Create a new project, tryingCSS6_2, in Intel XDK and add the following HTML
to it (in the index.html file).
Add CSS in the <style> area to format the poem. Be creative!

Make at least 3 visible changes.
<!DOCTYPE html>
<html>
<head>
<title>A Poem</title>
<style> /* CSS */ </style>
</head>
<body>
<h1>A Lover</h1>
<address rel="author">Amy Lowell</address>
<p>If I could catch the green lantern of the firefly
<br> I could see to write you a letter.
</p>
</body>
</html>
1 - 86
Lab 6-3: Modify HTML content with CSS in a file

Create tryingCSS6_3. The HTML that follows is for a simple list. Add it to your
index.html file. Change it to a properly formed HTML file and format it. Save it
and look at it in the emulator. Then do the following:
space the list items at least 20 pixels from the left edge of the page
space the list items at least 10 pixels from each other
center the header
keep the list at least 50 pixels from the header
the book titles in the list should not be displayed in a serif font
the header should use a different font than the list
the text of header should be dark red
break the CSS rules into two different .css files. One file should contain any
spacing rules, the other should contain any rules governing font faces or
coloring. Bind both into your HTML document. Note: to add a file, right
click on the folder where you want to create the new file, in the menu popup
select New File.
<h1>Books</h1> <ol> <li>A la Recherche de Temps Perdu</li> <li>Middlemarch</li>

<li>Ulysses</li> <li>Don Quixote</li> <li>Moby Dick</li> <li>Hamlet</li> <li>War and
Peace</li> <li>The Odyssey</li> <li>The Great Gatsby</li> <li>The Divine Comedy</li>
<li>Madame Bovary</li> <li>The Brothers Karamazov</li> <li>One Hundred Years of
Solitude</li> <li>The Iliad</li> <li>Lolita</li> <li>Anna Karenina</li> <li>Crime and
Punishment</li> <li>The Sound and the Fury</li> <li>Wuthering Heights</li> <li>Le Rouge
et le Noir</li> </ol>
CSS selectors: id and class

ID SELECTOR
The id attribute is short for identifier. This attribute can be applied to an HTML
tag to uniquely identify the element. The value for any given id attribute can
only appear once in a document. No two tags are allowed to have the same id.
You may also recall that the id cannot contain spaces, nor most punctuation,
nor begin with numbers.
1 - 87
In the HTML below, there are two paragraph tags. So to style them individually
we can apply unique id attributes to the paragraphs. ( id="p18" and id="p19" ) In
the CSS, we will use the id selector. The id selector is indicated by a hash sign
(#) followed directly by the id.
CSS:
#p18 { color: blue; }
#p19 { color: green; }
HTML:
<p id="p18">He is Ulysses, a man of great craft, son of Laertes. He was born in rugged
Ithaca, and excels in all manner of stratagems and subtle cunning.</p>
<p id="p19">Madam, you have spoken truly.</p>
Result
He is Ulysses, a man of great craft, son of Laertes. He was born in

rugged Ithaca, and excels in all manner of stratagems and subtle
cunning.
Madam, you have spoken truly.
CLASS SELECTOR
The class attribute is similar to the id. But, whereas the id must be unique and
singular, the values of the class attribute can be shared by multiple tags. And,
multiple classes can be assigned to a tag by simply separating them with
spaces.
HTML
<ul>
<li class="bird flying">eagle</li>
<li class="bird">ostrich</li>
<li class="insect">ant</li>
<li class="insect flying">moth</li>
</ul>
The class selector is simply a period (.) followed by the class name itself.
CSS
1 - 88

.bird { color: blue; }
.insect { color: green; }
.flying { text-decoration: underline; }
Result
eagle
ostrich
ant
moth
.
Being able to define a CSS selector in terms of a tag, class or id is very powerful.
But it's not practical to classes on every tag in your document, much less to put
unique ids throughout. It's also inconvenient to constantly repeat CSS
rules. But by combining composing selectors all that can be avoided.
COMMA SEPARATED SELECTORS

Let's say we want to make all our <blockquote> tags, <q> tags, and anything
with "speech" in it's class string, to be red italic text. How might we do
that? We could make three separate rule sets. Or, better, we can separate our
selectors with commas (,) before one rule set. Like so:
Separate
blockquote {
color: red;
font-style: italic;
}
q
{
color: red;
font-style: italic;
}
.speech {
color: red;
font-style: italic;
}
joined
blockquote,
q,
.speech {
color: red;
font-style: italic;
}
The joined version on the right is much easier to read and maintain.
1 - 89
If the "speech" items need to also be bold, that can simply be added by an
additional rule:
blockquote,
q,
.speech {
color: red;
font-style: italic;
}
.speech { font-weight: bold; }
SPECIALIZED SELECTORS
If two selectors of different types (like tag and class) appear next to each other
with no spacing separating them, then they form a specialized selector. To
match a candidate must match both rules. If a tag selector is used, it must
appear first.
This is most useful with class and tag selectors, like so:
blockquote.speech { font-color: green; }
In the example above, the a.speech selector is blockquote tag selector

combined with a .speech class selector. So this rule will not necessarily apply
to every blockquote nor every element with the speech class. Instead, it will
only apply to those blockquotes that also have the speech class.
Another way to join multiple classes is this:
.insect.flying { text-decoration: underline; font-weight:bold; }
html
css
result
<ul>
.insect.flying {
parrot
<li class="bird flying">parrot</li>
text-decoration: underline;
ostrich
<li class="bird">ostrich</li>
font-weight: bold;
ant
<li class="insect">ant</li>
wasp
moth
airplane
<li class="insect flying">wasp</li>

<li class="insect flying">moth</li>
1 - 90
<li class="flying">airplane</li>
</ul>
Lab 6-4: Experiment with CSS

W3Schools, though it does not strictly follow W3C guidelines, has a great tool
to help you learn HTML5. Youve learned a lot of CSS in the last several pages.
Its time to play so you can figure things out. Each of the lines in the buttonone
id definition below has certain functionality. Go to
http://www.w3schools.com/cssref/pr_class_position.asp , click the Try it
yourself button and make changes in the h2 statement. Click the See Result
button so that you can see what your changes do. Play with it until you can
explain the purpose of each of the lines. Also search online to find information
about each of the css properties.
#buttonone {
position: absolute;
top: 50%;
left: 50%;
margin-top: -85px;
margin-left: -130px;
}
What about JavaScript?

Now you know what HTML is and why you want to use CSS with it. But what
about JavaScript? Every mobile app should have some JavaScript. We need
JavaScript to help us know when the app has been loaded and the device is
ready, otherwise we may try to load data into the app before there is a place to
put it. In addition, JavaScript allows us to add interesting functionality.
Adding functionality
As you have seen, with HTML and CSS you can make very nicely formatted
views for your mobile apps. As you move forward designing your views it is
important to keep aesthetics in mind. There is just one more thing. You need
your app to react to the user: to perform actions based on such things as touch,
text entry or data calculations. For this we need JavaScript. In the remaining
1 - 91
sections of this unit you will experiment with various JavaScript commands and
see how to incorporate JavaScript with HTML and CSS.
Lab 6-5: Experiment with JavaScript

Previously, you modified text with CSS. In this lab you will modify text with
JavaScript as well. You will learn how to modify color, font and size of text.
Lab 6-5 a: Change text with lines of code in index.html

Change text using the <script> tag to embed JavaScript directly in index.html
Steps
1. Start a new project: Go to the PROJECTS tab Samples and Demos
General Select the Blank Cordova Starter App to create your project
2. Run the emulator to see what the app does
a. Where is the code that makes that happen?
b. Use the Find Find in Files (just under the Develop tab) to find
where that comes from notice which file it is
3. Go back to the Develop tab and open the www directory, open index.html
4. Paste the following code just above the closing </body> tag
<p id="p1">Hello World!</p>
<p id="p2">Hello World!</p>
<script>
document.getElementById("p2").style.color = "blue";
document.getElementById("p2").style.fontFamily = "Arial";
document.getElementById("p2").style.fontSize = "larger";
</script>
<p>The paragraph above was changed by a script.</p>
5. Save the file and emulate

6. What happened differently? Look back at the code. What do you notice
about p1 and p2? Are they interchangeable? What happens if you change
some of them?
Lab 6-5 b: Change text with lines of code in index.html, but now with the click of a
button
Change text using the HTML <button> tag, invoking JavaScript with the onclick event, again,
directly in index.html
1 - 92
Steps
1. Use the Blank Cordova Starter App again, either the one you created in 6-5
a, or create another one
2. In index.html paste the following two lines of code just above the ending
</body> tag (if you are using the same project as in 6-5a, you can paste this
new code either above or below the other code)
<h1 id="id1">My Heading 1</h1>
<button type="button"
onclick="document.getElementById('id1').style.color = 'red'">
Change Color</button>
a. What happened?
b. Was it what you expected?
That was super simple, right? Changing text formatting and using buttons is really easy.
Unfortunately, those two examples use bad JavaScript design.
Better JavaScript design

When you write apps you want to make them secure, so no one can maliciously
use your app to gain access to something they should not have access to.
Moving JavaScript code out of index.html makes it much more difficult to break
into your app. In addition, you will save a lot of time and headaches if you get
used to doing it right now. Debugging is a lot easier when you have your
JavaScript code outside of your DOM description.
Lab 6-5 c: Same as 6-5 b, but now not in index.html

Knowing that you can do this in two lines it will seem ridiculously complex to do the same
thing in the following way. But it is important that you understand good design. So we take
this simple example and show what the pieces are and where they go. Here we change text by
adding an event listener (listening for that button to click) that will invoke a JavaScript
function to change the text color.
Steps
1. Use the Blank Cordova Starter App again, either the one you created in 6-5
a, or create another one
2. In index.html past the following lines of code just above the ending </body>
tag (and this time, lets make better id names)
1 - 93
<h1 id="id_headerTxt">My Heading 1</h1>

<p class="align-center">
<input type="button" id="id_BtnChgColor" value="Change Color">
</p>
PAUSE
3. Before we continue, lets check something out . . . do you see that
class=align-center? You learned about the CSS classes earlier in this unit.
What if I suddenly want everything left justified? How would I turn off those
centers?
a. First, emulate to see what is centered, then look at the code and
make sure it matches (where ever there is an align-center the text
or button is centered)
b. Then comment the <link> tag line that is at the bottom of the
<head> section
c. Now, emulate.
d. Okay, after all your oohs and ahhs, uncomment the <link> if you
want things centered again.
UNPAUSE
4. Now go to the app.js file in www/js
5. Paste the following function anywhere in that file (not inside the other
function) this part colors the text red
// called when change color button is pressed
function myEventHandler2() {
document.getElementById('id_headerTxt').style.color = 'red';
}
6. Now go to the init-app.js file in www/js and paste the following lines near
the bottom of the initEvents function under the NOTE:s this part invokes
the coloring function
// button changes header text color
var colorElement ;
1 - 94
colorElement = document.getElementById("id_btnColorChg") ;
colorElement.addEventListener("click", myEventHandler2, false) ;
7. Voila! Save all the files and emulate.
That was crazy complex. Why, you might ask, couldnt all the JavaScript code go in app.js. That
is a nice, friendly place it even says this is a place for your code. Well, you could try that.
Maybe it will work, maybe it wont. It didnt work for me. The reason it didnt work for me is
because my DOM was not finished creating itself before my code attempted to attach the
handler to the button. If the button doesnt exist yet, the code will fail to attach any handlers
to it because that button doesnt exist and then the button wont work. The app just wasnt
ready. The app will still work, but the button action cant happen.
This app-not-ready reality is why we started with this more complicated Blank sample
(instead of the Blank Template, which is much simpler). This Blank app has the parts in place
to verify that both the DOM (all your elements) and the Cordova (all the document stuff) are
both ready. Otherwise you could try to do something that fails because some part is not ready
yet.
The initEvents function in the init-app.js file is a safe place to put any function invocations
because initEvents is invoked after all the code in www/xdk/init-dev.js makes sure that
everything is ready. You can look at the init-dev.js file and see what bits and pieces are
checked for readiness things such as Is the Window loaded? Is the device ready? And so
on.
Device ready example

Imagine you have code that adds a start button to your initial game screen. But
your code does not check if the device is ready. So the code that is supposed to
add the GO button is processed then the device becomes ready resulting in the
button going into a black hole because there was nowhere to put it when its
definition was available.
Using JavaScript you can verify that the device is ready before you try to add
buttons or process data. You can also use JavaScript to ensure that base
structures are ready before adding data or sprites to them.
An example that is quite common for beginner app developers is to set up a
structure, like a table, such as the one below, with animals and their
corresponding sounds, and attempt to fill it with data, but access the data
before the table is ready so that the data has nowhere to go. In most cases, the
app wont crash, it will just leave you with a dissatisfied empty feeling because
you know you wrote the code to add the data, but it doesnt get written. So you
should ensure that your table structure is ready before you attempt to put data
1 - 95
in it. If your code accesses the data and it has nowhere to be placed, then you
end up with a nicely drawn table with nothing in it.
Dog
Woof
Cat
Meow
Cow
Moo
Adding the appropriate JavaScript conditions and checks will ensure that things
happen in order.
Lab 6-5 d: Change text visibility

This time you will figure out what code to put where, in order to have a secure, easily
debuggable app.
Steps
1. Use the Blank Cordova Starter App again, insert the following code, as
before, in index.html
<p id="id_phrases">
Wikipedia is fun to read.
https://en.wikipedia.org/wiki/A_rose_by_any_other_name_would_smell_as_
sweet
That which we call a rose

By any other word would smell as sweet;
Who is credited for writing this?
</p>
<input type="button" value="Hide text"
onclick="document.getElementById(id_phrases).style.visibility='hidden'">
<input type="button" value="Show text"
onclick="document.getElementById(id_phrases).style.visibility='visible'">
a. Test the buttons.
b. What happened?
1 - 96
c. Was it what you expected?

3. Now change the design to match the best practices described above in
order to ensure:
a. the JavaScript is not in the index.html file;
b. the JavaScript is placed such that a race condition* will not cause the
button to fail (i.e. neither access to the element (button or text) nor
the call to the handler is not attempted before both the DOM and
the Cordova pieces are loaded and ready);
c. any handlers should be in app.js
* Race condition: when two or more things are happening at once and the end
result may not be as expected if the order of events cannot be controlled i.e. both
the DOM and Cordova must be ready before the code executes or the code may
not behave as expected.
Lab 6-5 e: Animation moving objects

Here is one more sample to try. This time you will move the JavaScript into js files and the CSS
in css files.
Steps
1. Use the Blank Cordova Starter App again, insert the following code in
index.html the <style> code goes in the <head> section and everything
else goes in the <body> section.
<style>
#myContainer {
width: 400px;
height: 400px;
position: relative;
background: purple;
}
#myBox {
width: 50px;
height: 50px;
position: absolute;
background-color: mediumpurple;
}
</style>
<p>
<button onclick="myMove()">Click Me</button>
</p>
1 - 97
<div id ="myContainer">
<div id ="myBox"></div>
</div>
<script>
function myMove() {
var elem = document.getElementById("myBox");
var pos = 0;
var id = setInterval(frame, 5);
function frame() {
if (pos == 350) {
clearInterval(id);
} else {
pos++;
elem.style.top = pos + 'px';
elem.style.left = pos + 'px';
}
}
}
</script>
a. Test the button.
b. What happened?
c. Was it what you expected?
3. Now change the design to match best practices techniques.
a. Remember, the <style> code is CSS and should go into a css file (put
it in app.css), then add a <link> tag, if one does not already exist, to
incorporated the css file, as you learned in the CSS tags section
earlier in this unit.
b. Arrange the other code as you learned in Lab 6-5 c and practiced in
Lab 6-5 d.
Wrapping it up
The information here about HTML5 is very sparse just to give you a taste of
what it looks like and how the pieces, JavaScript, HTML and CSS, work together.
Much of this is learned best by doing, but it is also important to have resources
to help guide you. There are many resources available. The w3schools site is
great because it is set up for you to try out samples on the spot to see what
happens without having to run your code externally. edX has some very good
6-week courses, many free, that you can attend online to learn more about
HTML5. You will learn a lot as you create apps.
1 - 98

.
HTML (yes, youve seen this term before, but now you have a much
greater understanding of what it is and can say much more about it)
Web app
Tim Berners-Lee
Element/Tag/Attribute
<body> <head> <p> </p> <img>
 Be careful with this one. If you cut and paste into Word and
then back into an html document, it will change to a single dash which
will not work correctly.
Self-closing tag
<!doctype html>
Best practices
Indentation/White space
CSS
<style>
<link>
/* */
font-size line-height
px, em, rem, %, vh
id
class
JavaScript
race condition
Unit summary
HTML is a markup language that is the content part of HTML5.
You read about web apps in Unit 2. Now you should be able to grasp
the idea a bit better. A web app refers to an application (like a mobile
app) that (usually) runs in a mobile devices native web runtime (NOT
in a web browser). A web app uses web technologies. A wholly native
app, on the other hand, does not use a devices web runtime, it
communicates directly with the operating system of the device and
uses the native API.
Tim Berners-Lee was approached by companies who wanted to buy

his web technology, but he worked hard to make sure that it would be
available to the public and free for everyone.
1 - 99
There are many, many tags. Only a few of which are covered here. This
unit is intended to give you a good start in HTML5, but dont hesitate
to keep learning.
Comments markers are different in different languages.
Best practices are important.
Commenting, indentation and white space all help readability of code.
With respect to CSS, id can only be used once, class can be used many
times.
Unit review
27. What does a slash indicate in the following context - </p>?
28. What tag would you use to make a bulleted list (not numbered)?
29. Why are best practices important?
30. Which selector is indicated by a hash sign?
31. Which selector is indicated by a dot?
32. Explain the functionality of each line of the following statements. (If
you arent sure, revisit lab 6-4).
a
b
c
d
width: 400px;
position: static;
background: green;
background-color: green;
33. There are four values for the css position property: static, relative,
fixed and absolute. Explain why, in activity 4, the myContainer position
is relative and myBox position is absolute.
34. If you have an app.css file, how would you turn it off?
35. What characters do you use for commenting in:
a HTML?
b JavaScript?
c CSS?
Critique
beginners course.
1 - 100
Unit objectives
use App Designer to lay out your GUI
modify your GUI programmatically (via code)
connect your GUI elements to code functionality in multiple ways
(More information about App Designer)
Creating your apps UI with App Designer
Lab 7-1: Now create your own App Designer app
Lab 7-2: Create buttons with functionality
And theres more . . .
Unit topics
1 - 101
Creating your apps UI in Intel XDK App Designer

Sometimes you want to lay out your user interface (UI) elements quickly
or prefer drag and drop methods of placement. App Designer offers you
the option of creating your user interface by dragging and dropping
elements rather than creating them programmatically. You are never
required to use App Designer, but it is a powerful option that allows you
to add and alter elements and connect them to functionality. Also, you
can create a button in App Designer, then go to the code and create
another button there.
Some of the things you can do are add buttons and other elements,
change fonts, add columns, add animated sidebars and specify
conditional placement of text based on device size.
After creating the elements, whether you did it in code or in App Designer,
you will need to connect them to some sort of functionality. App Designer
has a feature that allows you to add some code. You can use that or you
can toggle from Design to Code at the top left of the Intel XDK window.
Note: the Code/Design toggle buttons only show if you created a project
with App Designer.
Learn some of the features available in App Designer

The Intel XDK team has created several short videos to help users learn how to use App
Designer. Each shows a different aspect of App Designer. Watch the following 7 videos. This is
just a subset of those available. Feel free to watch more (when you are on the page for any of
the following links, scroll down to see the collection of App Designer videos).
Intel XDK App Designer - Getting Started (4:47)

Intel XDK App Designer - Controls (2:15)
Intel XDK App Designer - Row and Column Layout (1:43)
Intel XDK App Designer - Responsive Layout Design (1:49)
Intel XDK App Designer - Styles (3:26)
Intel XDK App Designer - Media Queries (3:15)
Intel XDK App Designer - Animated Containers (1:30)
As an emerging product, Intel XDK is on a fast paced development cycle,

constantly adding features and improving the product. Because of this, as
you learned in Demo 1-1, the Intel XDK team is frequently adding new,
updated videos and offering live webinars. Remember to search IDZ if
there is something in particular you want to learn.
1 - 102
Lab 7-1: Now create your own App Designer app

Now that youve seen several App Designer videos you know how to
create an app using App Designer.
Watch this App Designer video. (30:20)
Using App Designer create an app that has your image on top and a
button to which you will soon add functionality.
Note in the following image in the properties pane how to change
source files for your apps image. To be able to access your image, you
must close Intel XDK and add your image to the www/images folder.
If you created a Developer folder and created your app in there, then
the folder will be Developer/<YourAppName>/www/images. After
youve added your image to the folder, open Intel XDK, add the image
widget to your device view in the Design section of the Develop tab,
then choose your image in the Properties pane src dropdown. If you
try to add the image while Intel XDK is open, things may get out of
sync.
Congratulations. You know the basics of App Designer!

End of Lab
Lab 7-2: Create buttons with functionality

Now that youve seen several App Designer videos you know how to
create an app using App Designer.
Watch the first 9 minutes of this App Designer video. (28:17)
1 - 103
Create 3 pages, each with 2 buttons. The top button goes to the next
page (with page 3 advancing circularly to page 1). The other button
invokes an alert that says something different for each page.
Windows* Note: The Windows* Webview does not implement the
HTML alert() message. So here is a way to work around that limitation
in Windows*:
1. Include this line before any other lines that include JavaScript
in the <head> section of the index.html file: <script
type="text/javascript" charset="utf-8" src="lib/xdk-win8xcompat.js"></script>
2. Add xdk-win8x-compat.js to your set of JavaScript files.
Go to GitHub: https://github.com/xmnboy/xdk-win8xcompat.js/tree/master
On the right side, below the thick yellow line is a
Download ZIP button. Click it.
After downloading, extract the files and add the js file to
your js folder, usually in www/js or www/lib.
Read the README file to understand how to create the
alert message.
Congratulations. You have created pages and alert messages!
End of Lab
And theres more . . .

In addition to the videos and the App Designer Overview documentation
mentioned above, there is an extensive article covering widget layout. This
article - the Layout Docs - can be accessed from the Intel XDK itself. If
you are in the Layout view of a project that includes App Designer, click
the help icon
on the upper right and select Layout Docs.
This page contains detailed information about layout controls.

Understanding these controls will help you lay out and align widgets and
text precisely as you would like them to appear. Refer to this page
regularly as you learn more about App Designer.
1 - 104
Key words
.
App Designer
App Framework
Controls/Controls Layout/Controls Buttons/
Widget/Element
Properties/Properties Pane
Style
Interactivity Pane
DOM Tree View
Grid View
Media Queries
Sidebar/Kitten
Page
Alert/popup
Code view/Design view
Unit summary
App Designer allows you to create the GUI part of your app without
using code.
Though App Designer has some features that allow you to add
functionality to your widgets without using any JavaScript, these
options are very limited. For most functionality you need to use code
to control your widgets.
You can add a custom script to a widget Intel XDK will automatically
switch to Code view for you
An animated sidebar is a view that slides into view and partially covers
your current view, usually giving you some options until you select
something and then it goes away
An alert is a popup that gives you a short message
The DOM view shows your GUI view structure (the structure imposed
by the tags)
If you turn on the Gridlines icon it helps you align widgets.
1 - 105
Unit review
36. What is a framework and how do the various frameworks differ?
37. In which folder should you add images?
38. After creating at least one extra page, look at the DOM tree in Design
view in the Pages section and compare that to the DOM structure in
the index.html page. (To find the code that pertains to the new page,
search (ctl-F) for uib_page.) Notice that it is the div tag that creates
the page in HTML.
39. True or False You must create your GUI with App Designer.
40. In which section will you find the button widget? Controls, Pages,
Themes or Properties You can find out by selecting and deselecting
each of these sections to see when the
disappears.
widget appears and
41. What does Styles refer to?

42. Name one use case for the row and column layout feature.
Critique
beginners course.
1 - 106
Unit 8: Plugins and Apache* Cordova
Unit objectives
Successfully create apps that require plugins
Upgrade apps to Apache* Cordova so that you can add plugins
Add plugins to apps
Know the best ways to test apps
Why would I want a plugin?
Walkthrough 8-1: Screen orientation
What is an API?
Lab 8-1: File I/O
A note about testing with plugins
Walkthrough 8-2: Camera Plugin
Unit topics
1 - 107
Why would I want a plugin?

Remember your MyButtons app from Unit 4? Maybe you decide it should
always be in portrait mode. So you want to lock the screen orientation.
This will require a plugin because we need to access native functionality.
Sensors such as the accelerometer and the compass and some other
features of mobile devices, like the contact list, can only be accessed by
native code. But Intel XDK was created so that you would not have to
write your code in several languages. So instead, Intel XDK makes it easy
for you to incorporate plugins into your project. Plugins are bits of code
that translate for you into the native code. So you use the plugin API
commands using JavaScript and the translation is done behind the
scenes for you. You only need to make sure
you have the right plugin to do what you want

that the plugin will work for your target devices
that you add the plugin to your project
So a plugin translates code and gives developers access to sensors and

other features that cannot be accessed using JavaScript.
Screen orientation
It is often the case that the layout for a particular application is more feasible in either portrait
or landscape view, but not in both. In this case you will want to lock your orientation so that
the user cannot change it. In order to do this, you will add some code and add a plugin.
Walkthrough 8-1: Screen orientation

In this walkthrough, you will perform the following tasks:
Add screen orientation code to your main.js file.

Add plugin to your project.
Test your app.
Steps
Setting and locking screen orientation
6. Open your MyButtons app

7. Go to your MyButtons app, to main.js and find the onDeviceReady()
function.
1 - 108
8. Add the following two lines to your onDeviceReady() function.

intel.xdk.device.setRotateOrientation("landscape");
intel.xdk.device.setAutoRotate(false);
9. Your function should then look like the following . . .
. . . EXCEPT . . . it wont work yet because those function calls are

part of a plugin API that MyButtons does not have access to.
Well, it may have access to the functions in that plugin API via
App Preview. But you need to make sure you dont depend on
App Preview because its extra functionality will not be in the
MyButtons build that you will publish in app stores. Actually,
there is another issue. MyButtons, in its current state, cannot
have plugins at all. It is a standard HTML5 app. Take a look at the
PROJECTS view under Project Info you can see the Project Type
is Standard HTML5. We need to upgrade it to a Cordova app to
be able to add plugins.
10. Before adding the plugin, build your app and test it on your device to
see that device orientation does not change. Whether you have
portrait or landscape in the code, the device cannot detect its
orientation. (Remember to change the App ID in the build settings if
you are going to install on the same device where you have installed
that same app before i.e. if it is xdk.intel.buttons, change it to
xdk.intel.buttons2.)
11. Now upgrade your project. In the PROJECTS tab, in the Project Info
section, next to Project Type is the Upgrade label with the Apache*
Cordova icon. Click the icon to upgrade to an Apache* Cordova project
so that you can add plugins. You will get a popup window with
information about plugins and upgrading. Read the information, then
click the Upgrade button. Almost immediately you will see the project
type change and the upgrade option no longer available. Also, you
may have noticed that another sub-section appeared in the next
1 - 109
section of the PROJECTS page. Now there is a Plugin Management

section that does not exist for standard HTML5 apps.
12. Now add the plugin. Open the Plugin Management sub-section (click
on the + sign. In the new section that appears Add Plugins to this
Project, click its + sign. In the new popup window, on the left click on
Core Plugins. In the list of Plugins click on Device. On the right read
about the Device plugin, then click the Add Plugin button.
13. Test your device again and see the orientation is landscape.
Congratulations. You've just added and used a plugin!
End of Walkthrough
For more fun with screen orientation learn how to set, change and lock the screen
orientation: see this documentation.
What is an API?
API is a very commonly used term in the software world. It stands for Application
Programming Interface. It is the set of commands that you would use to gain access to
someones software. Okay, fine . . . but what does that mean?
Plugin APIs
Well, for mobile app plugins the software you are accessing as stated earlier is a translation
mechanism from JavaScript to the native language for a target device. You include the
plugin and use the command you want, like with the screen rotation you would use
device.setRotateOrientation() to change the orientation or device.orientation() to check what
the orientation is.
Finding the right plugin

If you are new to cross platform mobile app development you wont yet
be familiar with the plugins that are available. First become familiar with
the plugins that are available within the Intel XDK. Each plugin has a
description and a link to further documentation. Read those descriptions
so that you know what the plugins will do for you. This will familiarize you
with what functionality requires plugins.
1 - 110
Always remember to check the documentation to be sure that the plugin

will do what you need and will work with your desired target devices.
Lab 8-1: File I/O

In this lab, you will perform unsophisticated file I/O:
Replace the index.html file with the file below that contains file I/O
functions.
Add the file core plugin to your project.
Test your app on your device.
o Store a line of text:
Write to a file
Save the file
Clear the entry from the text box
Read the file you should see what you wrote
reappear in the text box
o See what happens when you write to the file several times.
Make the app more secure and more easily debuggable by moving
the JavaScript out of the index.html file. Refer back to Unit 6 if
necessary.
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1, userscalable=no">
<script src="cordova.js"></script>
<script>
document.addEventListener("deviceready", function(){
}, false);
function writeFile(){
window.resolveLocalFileSystemURL(cordova.file.dataDirectory, function(dir){
dir.getFile("log.txt", {create: true}, function(fileEntry){
fileEntry.createWriter(function(fileWriter){
fileWriter.seek(fileWriter.length);
fileWriter.write( document.getElementById("text").value + "\n");
alert("file written");
}, function(error){
alert("Error: " + error.code);
});
}, function(error){
});
1 - 111

}, function(){
alert("Error");
});
}
function readFile(){
dir.getFile("log.txt", {create: true}, function(fileEntry){
fileEntry.file(function(file){
var reader = new FileReader();
reader.onloadend = function (evt) {
alert(evt.target.result);
};
reader.readAsText(file);
}, function(error){
});
}, function(error){
});
}, function(){
alert("Error");
});
}
function removeFile(){
dir.getFile("log.txt", {create: false}, function(fileEntry){
fileEntry.remove(function(){
alert("file removed");
}, function(error){
});
}, function(error){
});
}, function(){
alert("Error");
});
}
</script>
<style>
body {font-family: arial}
button {font-size: 20px; padding:12px}
input {font-size: 20px; padding:10px}
</style>
</head>
<body>
<br>
<h1>Cordova File API</h1>
<input id="text" placeholder="enter text to write" />
<button onclick="writeFile()">Write</button>
<br>
<br>
<button onclick="readFile()">Read File</button>
<br>
<br>
<button onclick="removeFile()">Remove File</button>
1 - 112

</body>
</html>
End of Lab
A note about testing with plugins

If you arent already, become familiar with the documentation pages in
this case the Debug and Test Overview, in particular. Here you will find
information about which of the Intel XDK testing methods will reliably test
which kinds of plugins for which target devices.
For example, you can test an app with any non-third-party plugin in the
Test tab for iOS, Android and Windows targets. And you can test those
same apps in the Debug tab for iOS and Android targets. But you cannot
test with non-core plugins in the Debug tab for Windows targets. As
always, keep in mind that Intel XDK gains new capabilities regularly, so
keep in touch with the documentation to know the latest and greatest
strengths and abilities.
These bits of information are important to know for two reasons.
1. So that you know you have tested your app as thoroughly as
possible.
2. So that you dont get frustrated when your app crashes because
the testing method you are using cannot access one of the
plugins you added. (A way to avoid such a crash is to
conditionally make the plugin API calls. But then you need to
remember that those plugin portions of your app need testing
via a different method.)
As always, things work best when you know your tools.
Walkthrough 8-2: Camera plugin

In this walkthrough, you will perform the following tasks:
Add an image and text to an app.

Add the camera plugin to your app.
Add code to take a photo and replace the current image with the
new camera image.
Test your app.
1 - 113
Steps
Setting and locking screen orientation
1. Create a new project Standard HTML5 from the Blank Template

2. Download this image: http://i.imgur.com/ytM5xOy.jpg and save it as
image.jpg in your www directory (to find www, either right click on it
in the left panel in Intel XDK and select show in finder or show in
explorer, or find the path in the PROJECTS tab)
3. At the bottom of the index.html file there should be one line of
Hello code in the body. Replace that code with:
<img src=image.jpg width=100%> (***)
4.
5.
6.
7.
8.
9.
Verify that the image appears in the emulate tab.

Add a header line above the img line <h2>Welcome</h2>
Verify that the text shows in the emulate tab.
Upgrade to Apache* Cordova.
Add the Camera Core Plugin
Add the following JavaScript code right before the </head> tag (which
is just above the <body> tag in index.html)
<script>
function takePhoto() {
navigator.camera.getPicture(
function(data) {
document.getElementById(image).src = data;
},
function(error) { // error
},
{ destinationType:Camera.DestinationType.FILE_URI,
sourceType:Camera.PictureSourceType.CAMERA
}
);
}
</script>
This function will invoke the Apache* Cordova Camera API and
update the image in the app if a photo was successfully captured
using the mobile devices camera.
10. Add a button to take a picture.

<body>
<div class=view>
<header>
<h1>Welcome</h1>
<a class=button icon camera
onclick=takePhoto()></a>
</header>
<div class=pages>
<div class=panel selected=true>
<img id=image src=image.jpg (***)
width=100%>
</div>
1 - 114

</div>
</div>
</body>
11. Preview in the emulator and in the Test tab.

12. Verify that the camera functionality work on device.
Congratulations. You've just used another plugin!

End of Walkthrough
There are many plugins available. Some of the more popular ones are directly available
through simply selecting them in Intel XDK like you did for the File plugin. But there are many,
many more written by many people. Be sure when you are adding a plugin that it will do what
you want. If you want to target both Android and iOS, either be sure that your plugin choice
will work for both, or find one plugin for Android and another for iOS. Also, make sure you get
the version that does what you want and works on the target devices you are interested in.
Sometimes a plugin will work for Android 4.3 for example, but not for 4.1 or 4.2. Any plugin
can be added via the Intel XDK plugin manager. You just need to know where to find it.
1 - 115
Key words
.
Plugin
Screen orientation
Plugin API
Third-party plugin
Unit summary
For any features that require native code development, you can use
plugins instead of learning how to work with native code for each
target operating system
Know which testing features will work with your app based on which
plugins you are using.
You can find more information at:
http://www.html5rocks.com/en/tutorials/geolocation/trip_meter/
http://www.codeproject.com/Articles/811068/Exploration-withIntel-XDK
Unit review
43. Name two things a plugin does.
44. State the basic steps you should follow to add a plugin.
45. What does the onDeviceReady() function do? Why is it important?
46. Give an example of a plugin API call and state its purpose.
47. Can you debug apps with third party plugins in the Debug tab?
1 - 116
Critique
beginners course.
1 - 117
Unit 9: Debugging, revisited
Unit Objectives
Use the Test Tab to debug via the cloud (untethered)
Use the Debug Tab to debug via USB cable (tethered)
Know which testing capabilities to use with each target operating

system
Know how to access WEINRE
Debugging apps remotely

Walkthrough 9-1: Remote debugging untethered
Walkthrough 9-2: Remote debugging tethered
Testing capabilities differ . . .
Unit Topics
1 - 118
Debugging apps remotely

Remember in Unit 5 we looked at debugging and you saw a lot of CDT in
the Emulator? Well there are more testing and debugging features
available to you. You saw just a glimpse of the Test Tab and the Debug
Tab. Here we will look at remote debugging so that you can test and
debug more thoroughly than you can test in the emulator.
Debugging on the device with the Test Tab

If your application invokes methods from the Cordova API, or uses device
features that are not natively supported by JavaScript, it may be it may be
most effective to troubleshoot the app when it is actually running on a
physical device.
Using a desktop debugger to inspect an app running on a device is called
remote debugging. Intel XDK supports remote debugging via the WEINRE
remote debugger.
Add the <script> from the Test tab onto all html pages that you need to remotely
debug.
For remote debugging in the Test Tab to work properly, you must:
1 - 119
1. Embed the following code into your HTML files:

<script
src="http://debug-software.intel.com/target/target-scriptmin.js#{unique
identifer}"></script>
Where {unique identifier} is indicated on the Intel XDK Test panel.

2. Launch the app on the device via App Preview.
3. Click the Begin Debugging on Device button in the Intel XDK Test
Tab.
As depicted by the following image, after you click the Begin Debugging
on Device button, the WEINRE extension for the Chrome browser appears,
enabling you to troubleshoot your app as it runs on your device. The
debugger functionality is very similar to the debugger you used in the
emulator.
Invoking the WEINRE remote debugger.
You can inspect the browser's DOM, review network traffic, review
runtime errors, and even interact directly with the app through the
debugger's Console view.
1 - 120
Using the WEINRE remote debugger.
Walkthrough 9-1: Remote debugging untethered

In this lab, you will perform the following task:
Use the WEINRE debugger via the Test Tab to step through code in
your app running on a physical device
Steps
Use the Test Tab for remote debugging
1. In the Intel XDK New, click the Test tab.

2. Scroll down the page to the On Device Debugging section.
3. Copy the script tag displayed at the bottom of the page to your
clipboard.
4. Click the Develop tab.
5. Open the index.html file in Code view.
6. Paste the <script> tag just above the </head> tag.
7. From the code editing menu bar, select File > Save.
8. Click the Test tab.
9. Click the Push Files button.
10. Run Intel App Preview on your mobile device.
11. Tap on the Camera button and scan the QR code from the Test tab.
12. On your mobile device, tap OK to launch the app.
13. In the Intel XDK Test tab, click on the Begin Debugging on Device
button.
1 - 121
14. Click on the hyperlinked target reference.

15. In the WEINRE debugger, click on the Console button.
16. In the app running on your mobile device, tap the Debug Me button.
17. Note that the console output from your mobile app running on your
device appears in the WEINRE remote debugger console view.
18. Click on the End Debugging Button to end your remote debugging
session.
End of Walkthrough
Walkthrough 9-2: Remote debugging tethered

Configure your phone for remote debugging
Run your app on your device via the Debug tab
Steps
Configure your iOS or Android device for remote debugging (Windows and
Windows Phone devices cannot be used with the Debug tab at this time)
1. Ensure App Preview is installed on your target device

2. Enable USB debugging by following the instructions on the Debug tab.
This step is quite lengthy. Follow the instructions carefully.
Run and test your app via the Debug tab
3.
4.
5.
6.
Once your device is configured for remote debug, go to Intel XDK

Go to the Debug tab
Connect your target device to your host machine via USB
Select your device from the drop down list at the top of the Debug tab
window.
End of Walkthrough
1 - 122
Testing capabilities differ . . .

As stated in Unit 5, unlike a native app, you cannot use native debuggers
to debug your HTML5 code.
But there are a variety of techniques available to help you debug the
HTML5 code in your Intel XDK app. In Unit 5 you learned about the
emulator debugger and now you can also use WEINRE. Now you will
learn how to test and debug apps with 3rd-partty plugins. Remember to
check the documentation because Intel XDK supports the various target
devices differently. Below is a key to which techniques will work with
which target devices. This is an excerpt from the documentation. Which
technique is best to use depends on a variety of factors:
The target device (Android*, iOS*, Windows*, etc.)

Your development system (Windows, OS X* or Linux*)
Inclusion of third-party Cordova plugins
Workstation to device connection (local WiFi, USB, Internet, etc.)
Debugging HTML or CSS or JavaScript
To help you decide on the optimum debug option, see the following list.
Note that some of the options in this list may not make sense until you
read the rest of this document.
If you are debugging on Android, use:
The Emulate tab for basic JavaScript logic and approximate layout
The Debug tab for accurate Crosswalk behavior (including thirdparty plugins)
"debuggable" equal "true" with remote CDT for very accurate
behavior (esp. with third-party plugins)
The Test tab with Intel App Preview and WEINRE * (for everything
but third-party plugins)
WEINRE with a built app (esp. with third-party plugins)
If you are debugging on iOS, use:
The Debug tab for accurate behavior (for everything but third-party
plugins)
Web Inspector Remote with a OS X for very accurate behavior (esp. with
third-party plugins)
The Test tab with Intel App Preview and WEINRE (for everything but thirdparty plugins)
1 - 123
If debugging on Windows 8 or Windows Phone 8.1, use:
The Test tab with Intel App Preview and WEINRE (for everything but third-
party plugins)
1 - 124

Remote debugging
WEINRE
Tethered
Unit Summary
WEINRE offers a way to test and debug apps with 3rd-party plugins.
There are many criteria to think about when determining which

debugging methods will be most useful in your current development
step.
Unit Review
48. Where do you find information guiding you on which testing methods
to use?
49. What are your testing options if you create an app with 3rd party
plugins for Android? What if you want to expand to Windows targets?
50. Explain why you would want to use the Emulator for debugging.
51. State 4 criteria you would consider when deciding whether to test in
the debug tab or in the emulator debugger.
Critique
beginners course.
1 - 125
Unit 10: Marketing and Monitizing
Unit 10: Marketing and Monetizing
Unit objectives
After completing this unit, you should:
Be able to define your purpose in creating an app
Know several monetizing options
Create a business plan
Determine your purpose
Monetizing options
Determine your target audience, Keep your app fresh
Strategic planning: Integrating M&M early
Good sales techniques vs. fraud
Case study: Business plan
Key words
Unit summary
Unit review
Critique
Unit topics
IoT - 126
Determine your purpose

Wait. What?!? My purpose? Well . . . to make money . . . .
Yes, by far, the majority of people ultimately want to create a revenue stream
from their app submissions. However, not everyone needs revenue
immediately. Some of the best business plans either defer monetary gain or
establish monetary gain as a secondary goal.
Whatever your business plan choice, make it a conscious choice. Many apps fail
because there is not a clear business plan going forward. You want your users
to be excited about your app, not frustrated that you keep changing how you
monetize.
A word about failure: failure does not necessarily mean that your app is not fun
or useful. You may have created one of the most useful, creative apps on the
planet, but it is not well received due to unclear marketing or frequent, major
purchasing changes.
Social Benefit
Some people want to make apps for a living, but they also are very
interested in helping to make the world a better place. Someone who has
had a weight problem may develop an app to help people lose weight. A
personal trainer who loves her job may have a great idea for an app that will
match peoples habits with an exercise program that works for them. A math
teacher who has great success with a game to help students understand
how to solve quadratic equations wants to create and app to share this
game with other students.
These people might create their apps and not charge. Or they might charge
later. Or they might not charge but include health or education ads. More
about the monetizing options later.
Example Several apps require users to commit to exercise or healthy
eating habits. Those who meet their commitments get paid. Those who do
not meet their commitments pay. And the app creator gets paid.
Brand Loyalty
If you already have a company and need to get the word out about how
great your company is, you might create a game app that tells the story
about your company. If you have a company that is well known, you might
create an app that will draw people to your product.
Example most big name athletic shoe companies have created free apps
to track exercise statistics. Some require you to buy a device that works with
IoT - 127
the app. Others do not require you to buy anything, but allow you to select
your particular shoe if it is one of their products and then track how many
miles you have on each shoe you use.
Revenue
Maybe you just want to make some money. In this case it is essential to
think about the future of the app and monitor it as time goes on to
determine what if any changes should be made. You may try a monetizing
method that doesnt work as well as you had hoped, so you can alter the
monetizing method or you can alter the app. Either way, track your changes
and the market response to your changes so that you can make informed
decisions.
Awesome App
Maybe you just have fun developing apps and want to create something you
think is really fun or really useful. You can create it and just put it out there.
Or after making it available in the app stores, you track it and notice that it is
doing really well. As you watch its progress you may come up with a
different idea and get excited about trying the new idea and comparing the
market reception of the two ideas.
Monetizing options
Finally! How do I make money . . . ?
You can make money directly or indirectly. You can use a single method or
mixed methods. You can entice with a free app, then start charging for it later.
No matter the method(s) you as you should always be planning 3-5 years out.
Whether you stick to your plan or alter it along the way, having a plan helps you
visualize what might happen and also makes you more aware of how you are
progressing over time.
Paid apps
You can charge for your apps up front. Most apps are very low cost with
developers hoping to gain income from a large number of sales.
Ads in apps
You can charge nothing for your app up front and include ads. Each time a
user sees an ad, money is added to your account in the store. Ads can be
banner ads that can continue on the top or bottom of the view during the
IoT - 128
time that the user is using the app, or they can be intersitial ads which ocupy
the entire window in between game levels or other pauses.
In-app purchases
You may not charge and not include ads but have in-app purchase options.
These are often used in games to allow the user to advance more quickly or
gain more power or gain access to more levels. In order to reduce negative
comments so that your app remains in the top listed apps in the stores, you
may allow users to buy a higher level of functionality while still allowing
those who dont pay to continue full use but at a slower rate. For example,
users may automatically get 5 free lives per day in a game. They may
purchase more or wait to continue playing until the next day. Games like this
are quite popular. You do not want to generate disgruntled users because
then your app is less likely to be seen in the stores as it generates negative
ratings.
Mixed methods
Many apps combine monetizing methods. The app may be very inexpensive
but also offer in-app purchases. Or an app might be free and have banner
ads and in-app purchases. A way to entice users is to have a basic app that
is free and then charge for fuller functionality in a business app or more
game levels in an entertainment app.
Determine your target audience, Keep your app fresh

Decide who your target audience is. If it is business people, chances are they
dont want ads interfering with their business activities. They might prefer to
pay a larger initial cost to avoid frustrating delays. But if your audience is young
children they might not be annoyed at intermitent interruptions by interstitial
ads or blinking banner ads.
In addition to choosing monetizing methods based on your target audience, it
can be beneficial to track the demographic within that target audience and
modify various aspects of your app accordingly.
It is no secret that companies market to their chosen demographics. As an app
creator you can do some data mining and monitoring to find out the
demographic that is downloading your app. By studying that demographic, you
can improve retention of users by gearing your feature enhancements to ensure
that your app remains relevant and interesting to that cultural group. As trends
occur you can modify your app to re-engage your users. For example, colors
and styles change. Whether it is a color and style change or a content change
you can alter your app to continue to appeal to your audience.
IoT - 129
Know that about 90% of consumers will not buy anything and a consumer who
buys once is likely to buy again market to that demographic.
Strategic planning: integrating M&M early

Marketing and monetizing M&M think about it early, plan it early.. No matter
the revenue methods you use, you should have a 3-5-year plan. Create a
business strategy by setting goals and monitoring adoption of your app. Having
a plan helps you develop better marketing techniques and also focus on the
nuances and market fluctuations that may be helping or hurting your app sales.
Durables and consumables
Balance durables and consumables. Durables are purchases that can be
retained forever like swords or space ships, or in a business application,
particular templates. Consumables are items that get used up, like health
points or gold, and must be purchased again.
If you create an app with in-app purchases and offer only durables, then
users never having to spend more. Of course you can always offer a special
new sword or trendy, new templates. There will likely be users who want
those new items. But there will likely be users who are happy to play your
game or use your business app reaping the benefits without feeling the
need to spend more. If part of your goal is revenue and you are going to
offer in-app purchases, balance your offering between durable and
consumable items.
IoT - 130
Discoverability
Build in discoverablity. Discoverability is the measure of how easy it is for
users to find your app.
One way to increase this measure is to ensure that your app
has high visibility in searches. In 2014 the major app stores
started indexing apps this means that your app will be
identified more appropriately, but only if you market it
correctly. For example, when you submit to an app store be
sure to choose the correct catagories, i.e. Game, Children,
Shopping, etc. In addition to developers actively choosing
catagories, the app stores are improving their ability to help users figure out
which apps to buy. They may classify apps as amateur vs. professional
based on such things as the apps documentation and quality. Thus, as
important as it is that your app function well, it is equally important that you
have a clean UI, good UX and good documentation.
Pirating is it always a bad thing?

Another way to increase discoverability is to make it easy for people to
encourage their friends to play/use your app. Think of the scenario in which
someone named Tom pirates your app, Dick purchases your
basic version, and Harry purchases the premium edition. Tom
loves your app and tells 35 of his buddies how great it is
causing 20 of those people to buy your app. Dick loves your
app upgrades to the premium edition and tells a couple of
buddies how amazing it is. Harry also loves your app but does
not talk to anyone about it. Think about the behavior that is
most valuable to your business.
Think about peoples behaviors while developing your business strategy

sometimes the ratio of behavior to revenue is counter intuitive. Maybe
having a free version will help you make money.
Build in social media support. Make it easier for your app lovers to share
with their friends.
Retention
Getting new downloads is great. However, a high number of downloads in
your first week followed by a high number of uninstalls in your second week
will be detrimental to your revenue. You must focus on retention.
IoT - 131
Dont release before your app is ready, even if you have to delay a bit. An
on time release of a business app that adds incorrectly will kill the app,
whereas delaying the release to fix the bug is often not a big issue.
Dont make a game so hard that the player dies before the user gets the
purchase offer. This seems obvious, but has happened at least once to a
big-name gaming company. Ensure that your marketing and sales are
incorporated appropriately.
Over time introduce new and exciting components. For a business app
use trending colors. For a game add levels, add items and/or add
background or music options.
Send one message only. Imagine you have a great app for people who
love movies and your app also renders images in the most amazing 3D
ever. If you market with both of these messages, someone who wants a
movie app may only notice the 3D message and have no interest in that.
Decide what is most important and make that your message.
Purchasing Psychology
User: Why would I want to buy that?
A person might not consciously think this when looking at a product, but
people are constantly weighing their options. They look at the item and
often want it, then they look at the price and decide if it is worth it. What can
you do to make users think that is it worth it to buy your products your
apps and your in-app purchases?
There are several sales gimmicks that marketers use to sell products. One is
having a sale lowering the cost for a limited time. Clothing stores have
sales. Grocery stores have sales. They do this either to move a product
quickly, or to entice people into their stores. This is not new. It has been
tried and tested in one version or another for thousands of years. Well, for
apps this does not work. Based on history having proven that lower costs
draw people and move products, it is counterintuitive that sales ultimately
reduce revenue. Over the last few decades it has be shown that if there is a
sale in an app, users will no longer pay full price. They will wait for the next
sale. So the first sale will help move product quickly and bring in revenue
i.e. in-app purchases will go up during the sale period, but after the sale,
users wont buy. So revenue drops. They are now expecting a sale. This is
called sale-hangover.
But there are methods that do work.
A limited time offer inspires urgency.

o If something is available for a short time and will never be
offered again, it gains value in the eyes of those who think they
IoT - 132
might want it, creating a sense of urgency. It is a scarce item.

Folks know that they have to choose it or lose it.
o Plan early. In order for this strategy to be most successful you
must inform the user up front that the offer is limited.
o Do not waver from your strategy. If you ever waver decide a few
weeks or months later that a particular item did really well after
offering it this way, and you decide to offer it once more you
will lose customer trust. Then the next time you offer a one-timeonly item, your users will suspect that you may offer it again
thereby decreasing their sense of urgency.
Acquire customers.
o Offer a beta version at a lower price than the product will cost
when the real version is released. If a customer decides this may
be a worthwhile app, they are more willing to pay a small amount
knowing that others will pay more when the production version
is released. *Note: small amount is relative maybe $10 for a
business app that records financial data, $100 for a photography
app or $0.99 for a game.
o Again, plan early. A less expensive beta version must be
marketed as such for this to be a successful strategy.
Prototype
Build a prototype early. Just as you would storyboard to ensure you have a
good storyline or process flow, prototype to make sure your app works as
you expect.
Sprites and other images you dont need to wait until your artist
creates your images to create your layouts. Create placeholder sprites
circles or rectangles work fine to see whether your views are over
crowded or placement is aesthetically pleasing.
Technical interaction maybe you know that you are planning to create
an app with a large number of views as well as using web services to
fetch data. Good software design process incorporates reducing risk. If
you spend most of your planned development time completing the
design and implementation of your views yet have not tested the web
service you will be using, you might run into a snafu late in the process
that increases your time to market which can impact your revenue. To
reduce risk be sure to test features and interactions as early in the
process as you can.
Playtest
IoT - 133
Playtest. Playtest. Playtest. ~ Ellen Beeman, Digipen

Having people test your app before it goes to market will help you find
issues that you never suspected.
Use people who have never seen it otherwise testers will already know
the flow and not find parts that may not be intuitive.
You may discover issues in several areas.
o Performance maybe data download takes too long in a certain
part of your app so you will need to rearrange your code to run
some parts asynchronously.
o UI Design maybe you have put controls in the area where
peoples hands cover, so they cannot easily reach those controls.
o UX Design maybe you have the process flow out of order. Your
financial app requests details for a transaction before allowing
you to name the transaction so that if a user is interrupted by a
phone call and comes back to where they left off, they cant
remember what transaction these details belong to. Or your
game allows you to choose items to buy without letting you see
the cost, causing you to waste time on items you cant afford.
Know the game play habits of your targetted demographic. Intel XDK is
primarily targeted at mobile app creation. So if you are reading this, you
are likely creating. In that case it is wise to know that a large percentage
of mobile apps are played/used in 30-60 second increments. We can
call this the standing-in-line entertainment/productivity phenomenon.
As you can see, there are many aspects to think through as you develop your
business strategy and work through creating your app. You may have also
noticed that many of the aspects of business strategy cross over into app
design territory. You dont want to bog down your business plan with a lot of
detail about app design, however it is good to be aware of anything in your
design that may inhibit the desirability of your app as you walk through your
business plan.
Dont let yourself get bogged down with planning details, but do spend some
time each day or each week laying out one more piece of your plan until it is
complete, thereafter reviewing it occationally. Also test the parts of your app
that are least understood so that you move forward productively and have your
surprises early in the process rather than later when there is less recovery time.
IoT - 134
Good sales techniques vs. fraud

If you want to monetize it is good to know where the line is between a great way
to make a sale and fraud. Unfortunately, there are many situations where that
line is hazy. There are, however, some scenarios to be aware of that will help
you ensure that your great new marketing method is not fraud.
Unclear value proposition This is when you entice the user to purchase
something that is great the first time, but then when you entice the user in the
future, that thing is not so great.
An example: your app is a card game. You offer a set of 5 cards for $2.
Those cards turn out to be very powerful. But then future sets of cards for
the same price are not nearly so powerful.
It is okay to have offers with varying value, just as long as you make the
value proposition clear. If your offering is more powerful, advertize it as
such a one-time only, very powerful set such as a starter deck or a high
value booster pack. Make it clear that you are not tricking the user.
As a rule of thumb, dont coerce your customers into buying anything.
Case Study 10-1: Business plan

This case study walks you through business plan development.
Imagine this scenario: your friend Jessi wants to create a game app to
increase awareness of preventable problems in babies. For example, she
wants to make people aware of how to help parents determine if their
baby has jaundice by telling them about the app that University of
Washington created to detect jaundice in newborns. [See news article.]
Steps
Introduction
Jessi has a great idea for the game action and a general idea of how the
user will interact with the game, but before she can fully design the app
she needs to make some business decisions. She calls her app
HelpTheBabies!
Name this object:
IoT - 135
1
2
1
17
91
3
1
16
91
15
91
4
1
14
91
15
13
91
12
91
6
1
7
1
10
9
91
1 8
1
11
91
Game play involves connecting dots to form an image, with the challenge
being the users choice of either minimum time or minimum number of
connections needed to name the object. When the image is identified
correctly, the user will be rewarded with gold coins and a Did you know?
window will pop up with a tidbit of information to help babies in some way.
Purpose of the app
Jessi is still in high school and supported fully by her parents. She has some
spending money from her part time job at Bubble Car Wash. She does not
need to make money, but would like to have more spending money.
However, she really wants to help people, so she decides to create an app
that is free and has in-app purchases.
Scope
Though the details of scope are more of an app design topic than a part of
the business plan, it is good to state top level scope in your business plan to
help you stay focused.
Jessi knows she wants it to atract adults so that they will be informed,
thereby helping to prevent problems in babies. She also wants to market to
the soccer-mom demographic (the parent, dad or mom, who runs errands
and transports the kids) those parents who have 5-10 minutes of
downtime several times during the day when they would want to occupy
their time for a few minutes at their kids soccer practice, in line at the
grocery store, at the post office, at DMV, waiting for a dental appointment.
So a game level must conclude within about 3 minutes, but also reliably
stores play progress if the game is suspended by the phone ringing or by
getting called in to see the doctor.
Integrate M&M and Keep it fresh
The app will be free, and there will be in-app purchases. Users earn gold by
identifying the item. Users can choose to buy additional gold that will allow
IoT - 136
the user to play for longer periods of time, advancing more quickly, much
like purchasing health points.
In version one of HelpTheBabies the gold coins will allow the user to
advance levels. In version two there will be genre options to select from
fruit, mountains, house pets, etc., each costing a number of coins.
The color scheme will change twice/year according to the current fashion
trends. In version two, as well as some genres that are purchasable
indefinitely, there will be a quarterly offer of a genre that will never be
available again.
Incorporate analytics to track download numbers, user demographics and
game play frequency
Business Plan for Jessis Apps

App Name
HelpTheBabies
Create a mobile app that will inform people of ways to help
babies avoid preventable diseases. The app will be a dot-to-dot
Introduction
game with the goal of identifying the object in question.
Purpose
Priority 1: Prevent diseases in babies.

Priority 2: Long term revenue gain.
The reward for identifying an object will be gold coins.
In-App Purchases
Version 1
Monetization
Version 2
Demographic
Freshness
Timeline
Ability to purchase extra gold coins in order to

advance more quickly through game levels.
As well as using gold coins to advance through the

levels, they can be used to select the genre of objects to
identify.
Every quarter, for 1 month, an additional genre will be
available that will never be offered again.
People who typically have many errands to run, thus several

short wait times during the day:
Change the color theme twice/year based on current fashion.
Year 1: Initial Development
July-December:
Create working prototype that will have the game
flow game entry, appearance of apple object,
user types apple, acknowledge success or failure,
IoT - 137
either award gold and display baby info or

present next object, after user has 100 gold
advance to next level (no drawing capability, no
in-app purchasing)
Create dot images
o July-Sept make drawings on paper at
least 300 images
o Sept-Dec digitize drawings and find best
way to implement the dot-to-dot drawing
o Organize images into levels
January March:
Incorporate dot-to-dot drawing functionality in
prototype
Add in-app purchasing capability
Determine which analytic measures are available
most important to track. Decide whether to use a
3rd party analytics tool, or Apple and/or Google
app analytics that are supplied to Store users.
April June
Test
Incorporate analytics functionality
Test More
July
Release v1
Year 2:
July August
Focus on handling bugs and initial user concerns
August continuous
Create and digitize at least 30 new images/month
Organize images into genres
Select the one-time-only genres
September - January
Implement the one-time-only functionality
Test
February
Release v2
This is Jessis first iteration of her business plan. Like any business person, she
will continue to evaluate her plan and make adjustments as time goes on. She
IoT - 138
will remember to review game progression when she makes changes to insure
that she does not inadvertently make any unclear value propositions.
IoT - 139
Key words.
Banner ad
Interstitial ad
In-app purchase
Target audience
Demographic
Durables/consumables
Discoverability
Pirate
Retention
Fraud
Unclear value proposition
Unit summary
Purpose in creating an app clearly define why you are doing this.
Establish your goals early.
Monetizing strategies do you want to earn money now or later? both

or neither?
Target audience and demographic know to whom you are marketing

so that you can more easily figure out how to appeal to your audience.
Long-term business strategy Establish your long term goals
App design:
Durables and consumables what items will you create to last,

what items will you create to continue increasing revenue
Retention of users focus not only on new users, but also on

retaining users
Purchasing psychology make the user want to buy
Prototype and playtest make sure the app really is useable the way
you think it is
Unit review
52. Name three reasons for creating apps.
53. Name three ways to monetize an app.
54. Why would you want to determine your target audience? Give a
counter example.
55. List three goals for your strategic plan.
56. List three items in an app that would likely be durable
IoT - 140
57. List three items in an app that would likely be consumable

58. List three ways to retain users
59. List three ways to entice users to make a purchase
60. Who would you choose to test your app? List three characteristics of
the user.
61. Review the app design case study and write your own: describe an app
(it can be an app in existence, but cite it); list the durables and
consumables; state the monetizing strategy; state fraud potential for
the strategy.
62. Review the business plan case study and write a 3-year business plan.
<< State how you could continue to market (i.e. earn money or
reputation). This might be a combination of app design and business
strategy.>>
Critique
beginners course.
IoT - 141
Unit IoT: Internet of Things

Content for this unit created by Giselle Gomez, Intel
Unit Objectives
Write a device app that will control LED lights.
Connect the device to the internet to get data.
Understand and intelligently discuss IoT and IoT apps.
What is the Internet of Things?
Walkthrough IoT: Weather Lamp
Additional Ideas enhance with clouds and music
Useful notes
Key words
Unit summary
Critique
Unit Topics
IoT - 142
What is the Internet of Things?

The Internet of Things (IoT) refers to many devices being connected to the
internet, thereby allowing us to do things like get information to display
or to control processes remotely. For example, I might want to use a
phone app to check the temperature at my house when I am away from
home, so I connect a temperature gauge to the internet, put it in my back
yard, and check it from my yardTemp app while I am at work. Or I want to
control my home thermostat when I am on vacation. Perhaps I was away
for a week in the summer and turned the thermostat to 80F, but I am on
my way back home and want the house to be cool when I arrive, so I use
my homeTemp app to lower the temperature before I get home.
The things are phones, computers, sensors, cameras, thermostats
anything that can be connected to the internet. These things can control
other things or be controlled themselves.
What can I do with IoT?

There are two kinds of apps that you might write. The app on the device
a device app can access the internet and either invoke sensors based on
the data from the internet or access commands from another app. This
other app is called a companion app.
The app you will create in the walkthrough in this unit is a device app. It
does not need to be controlled by anything. The app will be installed on
the circuit board, it will get the weather by accessing Weather
Underground and it will light LEDs in various combinations according to
the data it receives.
At the end of the walkthrough there are links to additional features you
can use in combination with your lamp, such as connecting to a Bluetooth
device to play sounds or songs based on the same information the
weather patterns or time of day.
What special software and hardware do I need?

Depending on the project you want to do, you may need sensors, LEDs
and other special bits of hardware. For all projects you need some sort of
processor and board to connect things to. For the project here you will
need the following.
Hardware
IoT - 143
Intel Edison Module

o Find the circuit board (otherwise known as the breakout
board) with the Intel Edison chip at
https://software.intel.com/en-us/iot/hardware/edison/devkit see diagram below.
o NOTE: You can use an Intel Galileo Module instead of
Intel Edison. If you choose to use an Intel Galileo board,
you will need expansion boards for the Wi-Fi and Bluetooth
because they are not built in.
Base Shield from Seeed Studio

o Find this in the Grove starter kit at
https://www.seeedstudio.com/item_detail.html?p_id=1855
o The Base Shield is an extender that allows you to connect
more than one LED to the breakout board.
One each red, blue and green LED
o These and several other bits of hardware are included in the
Grove starter kit above. You may find the other bits of
hardware useful as you continue exploring the world of IoT.
And, of course, you need your host machine that youve been using
throughout this course to create Intel XDK apps.
Software
You will need a standard SSH client.
IoT - 144
If you are using Windows, you will need to download one,

PuTTY, for example.
o If you are using Mac, OS X has a built in SSH client called
Terminal.
o Ubuntu has a built in SSH client called OpenSSH which is
included by default.
In order to get data from Weather Underground, you will need a
Weather Underground API key. Directions for that are included in
the walkthrough.
And, of course, you will need Intel XDK on your host machine.
o
Walkthrough IoT: Weather Lamp

This weather lamp lights various colored LED lights based on how sunny or
cloudy the weather is. It also dims at sunset and brightens at sunrise, based on
the location you set in the app.
Become familiar with the hardware and software that will be used in
this unit to create IoT apps
Download the Weather Lamp project
Learn how to connect the various cables and hardware to the board
Learn how to set up a board and load device drivers in order to

connect to you host computer for development
Load the built app to the device
Steps
1.
Download and unzip a copy of the project Weather Lamp from
https://github.com/gomobile/sample-weather-lamp/ to a convenient
place on your host machine. If you havent used github before, that is
okay, you dont need to sign up, just click on the Download button and
download the ZIP file.
2.
Launch Intel XDK
3.
Instead of Start a New Project, this time click the Open an Intel
XDK Project button
4.
In the window that popped up, locate the Weather Lamp project
that you unzipped. Select the file with the .xdk extension.
IoT - 145
Modify the source files.

5.
In Intel XDK look at the source files in the Develop Tab. Find
config.json and open it. In the file, under Location specify your
weather location.
a. For cities in the United States, specify location with a two letter
state abbreviation followed by the name of your city, for example,
OR/PORTLAND for Portland, Oregon.
b. If your location is outside of the United States, specify location
with COUNTRY/CITY, for example, CA/TORONTO for Toronto,
Canada. To find your countrys abbreviation code look in ISO
Country Codes (https://www.iso.org/obp/ui/#search/code/).
6. Now you need to get a Weather Underground API key so the IoT
app can make calls to Weather Underground to get weather data.
a. Go to https://www.wunderground.com/weather/api/ and follow the
instructions to get your key.
b. Once you have your key, go back to your project and open the
config.json file if it is not already open. Add your API key. The file
should now look something like:
{
"WEATHER__API_KEY": "714XXXXXXXXXXXXX",
"LOCATION": "OR/PORTLAND"
}
7.
To complete modification of the location information, now go to
the index.js file to modify the time zone. At or around line 270 you will
see the time zone for Los Angeles, CA, as shown below. If that is your
time zone, no need to change anything. Otherwise change it to your
city by finding the appropriate city code in
https://en.wikipedia.org/wiki/List_of_tz_database_time_zones
var time =
moment.tz("America/Los_Angeles").format("HH:mm"); //will
need to change here
Connecting the hardware.

8.
Before powering up your IoT board, connect your Base Shield
board. See the image below. Just place it as shown and press down.
No need to secure it in any other way.
IoT - 146
9.
Now connect your LEDs to the three PWM pins of your Base
Shield. These are the D3, D5 and D6 sockets on the Base Shield. In the
sample project the LEDs are configured as green on D3, red on D5 and
blue on D6.
10. After you have connected the LEDs power up your IoT board
using the wall adapter. And connect your USB cable from your
IoT - 147
development system to the serial communication port on the IoT

target device your board set up. This serial connection is key to
configuring the network connection needed to load to communicate
between your IoT board and the Intel XDK software during
development.
11. Now that your board is wired, you need to set up the network
connections. See detailed instructions for your host OS:
a. Windows*: https://software.intel.com/en-us/setting-up-serialterminal-on-system-with-windows
b. OS X*: https://software.intel.com/en-us/setting-up-serial-terminalon-system-with-mac-os-x
c. Linux*: https://software.intel.com/en-us/setting-up-serial-terminalon-system-with-linux
Configure your Intel Edison boards Wi-Fi.

12. Before you can connect your Intel Edison board to the Intel XDK
you need to make sure your host and target are connected to the same
network. Below is the command you would enter in PuTTY on Windows*
(similar for Terminal on OS X*):
root@Edison: configure_edison wifi
IoT - 148
This will open the Wi-Fi menu where you can select the network you
would like the target (board) to connect to. Follow the prompts to
configure and connect your Intel Edison Wi-Fi. When successfully
connected a message like the following will display.
Done. Please connect your computer to the same network
as this device and go to http://10.0.157 or
https://myedison.local in your browser
The name of your Intel Edison device may be different from what is
shown above. Log this IP address for reference later. You will need this in
Intel XDK later to connect host to device.
NOTE: For an in-depth explanation of how to set up your Intel Edison WiFi connection, read this Intel Developer Zone tutorial
https://software.intel.com/en-us/connecting-your-intel-edison-boardusing-wifi - it describes alternative methods of connecting to Wi-Fi, as
well as how to connect using an alternative operating system.
NOTE 2: If you ever need to check the IP address of your board, use the
following command in your serial connection (PuTTY or Terminal):
root@Edison: configure_edison showWifiIP
This will display your target IP address.

Load your project onto the Intel Edison board.
13. Once the Wi-Fi connection is fully set up we can open the Intel XDK
and load our project to the Intel Edison.
a. Go to the project you previously opened. At the bottom of the project
page there will be a section that reads IoT Device.
b. Either search for an Edison nearby that is on the same Wi-Fi
connection as your computer or make a manual connection using
your IP address, the default port number, and your Edison board
credentials.
c. After the Edison is connected successfully you can press the
downward facing arrow, which is the download button.
d. The project will not auto start, so if you would like to run it once it has
downloaded you will need to manually do so by pressing the play
button in the same section as the download button.
e. Now the LED lights should light up based on the data returned from
Weather Underground!
Congratulations. You've just finished an IoT project!
End of Walkthrough (but see below for ideas and notes)
IoT - 149
Additional Ideas enhance with clouds and

music
Make it pretty
Get some white or clear non-flammable material to cover your LED lights
so that it looks like a cloud with the light shining through.
Thoughts for use

If you are a parent whose child has gone off to college far away, set the
location to your childs college town and feel more connected. This is
especially useful if your time zones are very far apart. The lights dim at
night, so you wont accidentally call and wake them up before sunrise on
a Saturday.
If you have a young child use your location to teach about weather, and
then change the location in the app and reload it onto the board to teach
about weather and sunrise times in other locations.
Add a companion app enhance your app with music

Play music or based on the weather pattern. Sound an alarm at sunrise or
sunset. You can find the companion app on github at
https://github.com/gomobile/sample-weather-lamp-companion
Useful Notes
Time is already configured in the app. If you want to understand the
formatting process and why it is necessary, read on.
Weather Underground returns time in a particular format (hh:mm). Current
time is formatted in a different way when called on (hh:mm:ss). To be able
to compare the times correctly you must put the two different times into
the same format (either hh:mm or hh:mm:ss). Below are some
explanations that will help you understand that part of the code in case
you ever want to compare time in another app.
1. Moment Timezone There is a dependencies section in your apps
package.json file with moment-timezone details. It should look like the
following.
IoT - 150
"dependencies": {
"express": "^4.13.3",
"moment": "^2.10.6",
"moment-timezone": "^0.5.0",
"superagent": "^1.3.0"
}
This is required because Timezone has a dependency of Moment,

meaning that the dependencies section in this file must list Moment
and the version needed. moment-timezone can be 0.5.0 or above, and
moment can be 2.10.6 or above.
2. Functions to use on Moment objects (not normal times)
a
add
Subtract
isAfter
isBefore
isSame
format
and any other modifier functions listed on the Moment website:

http://momentjs.com/timezone/docs/
3. In order to change the format of a formatted time you need to wrap

the time in a moment object like so:
// declare the format we want for our time
var newtime = moment(oldtime, "hh:mm:ss");
Note that hh gives 12 hour time (am/pm) and HH gives 24 hour time.
4. If you would like to read further documentation on both moment and
moment-timezone take a look at the following websites
a
http://momentjs.com
http://momentjs.com/timezone/
IoT - 151
Key words.
IoT
Device app
Companion app
Edison/Galileo
Breakout board
Base Shield
LED
SSH Client
Weather Underground
Wi-Fi
PuTTY/Terminal
IP Address
Git Hub
Unit Summary
You can use Intel XDK to create apps for IoT devices.
A Breakout board typically has various connection ports and sockets

that allow you to hook up various devices to various CPU boards, such
as the Intel Edison.
IoT devices can execute apps independent of a controller when you

want your device to automatically do certain things. Or you can write a
companion app to control the device by invoking certain functionality
on the device app.
Weather Underground is a site where you can view weather, In

addition, it has an API that allows developers, such as yourself, to write
apps to access the weather data.
Unit Review
1.
What is IoT useful for? Give an example.
2.
What is one use of a serial port?
3.
What is the purpose of adding the Base Shield?
4.
Think of an IoT use. What would it be? What data would it access
from what site(s)? What hardware would you use?
IoT - 152
Critique
beginners course.
IoT - 153

Full Course

Uploaded by

Document Information

Copyright

Available Formats

Share this document

Share or Embed Document

Sharing Options

Did you find this document useful?

Is this content inappropriate?

Copyright:

Available Formats

Full Course

Uploaded by

Copyright:

Available Formats

Unit 1: Introducing the course

Unit 1: Introducing the Course

be familiar with the Intel XDK features and user interface

understand what the course is about

be able to find, download and install the software

understand the work flow for implementing an app

be able to view HTML source code

About the course

What does it do? How does it work?

Reviewing the course objectives

Reviewing the course prerequisites

Reviewing the course format

Demo 1-1: Watch Intel XDK in use

Walkthrough 1-1: Installing the courseware

Walkthrough 1-2: HTML preview

2016 Intel Corporation.

Unit 1: Introducing the course

Welcome to Intel XDK

Cross-platform Development environment for mobile

Choose your style using templates and popular UI

Time-saving tools to make mobile apps better, faster, and

Free download at: http://XDK.Intel.com

2016 Intel Corporation.

Unit 1: Introducing the course

Unit 1: Introducing the Course

2016 Intel Corporation.

Unit 1: Introducing the course

Intel XDK - More than an IDE

The Intel XDK

Intel XDK runs on Windows* 7 or higher?, OS/ X* and Ubuntu* hosts.

2016 Intel Corporation.

Unit 1: Introducing the course

The Brackets editor

2016 Intel Corporation.

Unit 1: Introducing the course

Students you are likely to make use of the entire guide.

2016 Intel Corporation.

Unit 1: Introducing the course

Getting started with Intel XDK

Testing and debugging with Intel XDK

Plugins and Cordova*

2016 Intel Corporation.

Unit 1: Introducing the course

About the Course

2016 Intel Corporation.

Unit 1: Introducing the course

A critical distinction host vs. target

Twitter Bootstrap PRO: a very clean UI framework that relies

Ionic PRO: a very sophisticated mobile framework with many features.

Intel's App Framework PRO: an optimized for mobile library that is

2016 Intel Corporation.

Unit 1: Introducing the course

The integrated Brackets* code editor

Emulate Popular Devices

Using the built-in device simulator

2016 Intel Corporation.

Unit 1: Introducing the course

Run your app on physical devices.

Debug your app while it's running on a device.

Conduct performance profiling.

Test your app on physical devices with Intel App Preview

Test as shown above, starting in the Test Tab, untethered, running on

2016 Intel Corporation.

Unit 1: Introducing the course