IntroductionWelcome| 00:00 | (music playing)
| | 00:04 | Hi! I'm Ryan Stewart, and I'm going to
get you up and running with PhoneGap.
| | 00:08 | This course will show how web
developers can build mobile applications with
| | 00:12 | languages and tools they know.
| | 00:14 | I'll cover why you'd want to use PhoneGap and
how to get started setting up an application.
| | 00:19 | In this course I'll start by showing you
how to begin with a basic HTML page and
| | 00:23 | turn that into a mobile
application with PhoneGap.
| | 00:26 | See how to use command line tools that
come with PhoneGap to generate a project
| | 00:30 | you can use as a base.
| | 00:32 | You'll see how to use some of the core
APIs so you can leverage device features
| | 00:36 | without ever touching native code.
| | 00:38 | You'll see tips for how to debug, test, and
emulate your application before you deploy it.
| | 00:44 | Finally, you'll see how you can extend
PhoneGap and how you can target multiple
| | 00:48 | platforms with PhoneGap Build.
| | 00:50 | After going through this course, you
will have seen how PhoneGap works, so you
| | 00:53 | can start building mobile
applications with HTML, JavaScript, and CSS.
| | Collapse this transcript |
| What you should know| 00:00 | You don't have to know a lot of
programming to be successful in this course, but
| | 00:04 | you should be familiar with web development.
| | 00:06 | Since PhoneGap exposes device features
to applications built in HTML, JavaScript,
| | 00:11 | and CSS, knowledge of
those languages is important.
| | 00:15 | Knowledge of jQuery isn't required but
will help in understanding some of the samples.
| | 00:20 | This course uses the Terminal during a
few movies, so being aware of how to use
| | 00:24 | Terminal and command line tools will
also make the course easier to follow.
| | 00:29 | Finally, while you don't need to know
native mobile development, knowing how to
| | 00:33 | use native IDs like Xcode and Eclipse will help.
| | 00:36 | If you aren't familiar with some of
the technologies we will be using, I'd
| | 00:39 | recommend checking out these courses
here in lynda.com online training library.
| | Collapse this transcript |
| Using the exercise files| 00:00 | If you're watching this tutorial,
you'll have access to the exercise files.
| | 00:04 | The exercise files are organized by
chapter and movie, and I've put them on the
| | 00:08 | desktop to make them easy to access.
| | 00:11 | Most of the course builds on previous
chapters, so the exercise files follow
| | 00:15 | along and add functionality as we go.
| | 00:18 | Included in the exercise
files are code snippets.
| | 00:21 | These snippet files are blocks of
code that I'll copy and paste into the
| | 00:25 | application as I build it.
| | 00:27 | In addition to the exercise files,
you'll want to make sure you have a text
| | 00:30 | editor handy that you can use to
edit the HTML, JavaScript, and CSS.
| | Collapse this transcript |
|
|
1. Overview of a Mobile Web ApplicationWhat is a mobile web application?| 00:00 | There are many different ways to
deploy content to devices for developers.
| | 00:04 | The main distinction is between
content that runs inside the device's web
| | 00:07 | browser, just like any website, and the
content that runs as an application on the device.
| | 00:14 | Mobile applications give you a lot of benefits.
| | 00:16 | They give you access to device
features and sensors that aren't normally
| | 00:20 | available to websites.
| | 00:21 | These are things like camera, offline
storage, and information on the device like
| | 00:26 | what's in the phone's contact list.
| | 00:29 | All the major platforms tend to
have very different ways to build
| | 00:32 | mobile applications.
| | 00:34 | They each require their own tools and
languages to deploy applications and
| | 00:38 | create content for them.
| | 00:39 | A good example is Xcode and
Objective-C for building iOS applications, and
| | 00:45 | Eclipse and Java for
building Android applications.
| | 00:48 | Some technologies allow you to build
hybrid applications, or mobile applications
| | 00:53 | that use web technologies.
| | 00:55 | These hybrid applications let you
build mobile applications using HTML,
| | 01:00 | JavaScript, and CSS that's
supported by the device.
| | 01:04 | They also have access to the
exact same device APIs and sensors and
| | 01:08 | information as regular mobile
applications, but the user interface is mainly
| | 01:13 | HTML, JavaScript, and CSS.
| | 01:16 | These applications can also be
deployed and distributed to app stores in the
| | 01:20 | exact same way as other mobile
applications. That means to the user,
| | 01:24 | there won't be a difference between
a hybrid application and the native
| | 01:27 | mobile application.
| | 01:29 | Mobile web applications provide the
functionality of native apps but use web technologies.
| | 01:34 | This makes it easy for web developers
to take advantage of the application
| | 01:37 | ecosystem and build apps using
languages and technologies that you know.
| | Collapse this transcript |
| The responsive layout (handhelds / tablets)| 00:00 | One of the critical parts of creating
applications for devices is taking into
| | 00:04 | account the form factor.
| | 00:05 | This includes the size of the
screen or the resolution of the device.
| | 00:10 | There are many applications that
are built specifically for phones or
| | 00:13 | specifically for tablets, but there are
some inherent web technologies that can
| | 00:17 | be used to target both
with mobile web applications.
| | 00:21 | One of the most common tactics for
creating content that works across devices is
| | 00:25 | with responsive design.
| | 00:27 | Responsive design lets you specify
different CSS files for different form factors.
| | 00:32 | So instead of creating entirely new
content or an entirely new application for
| | 00:36 | smartphones or tablets, you can reuse
content and simply swap out new CSS rules
| | 00:42 | depending on the size of the screen.
| | 00:43 | The easiest way to do this is with CSS
media queries, which lets you specify a
| | 00:49 | different set of CSS rules and CSS
content for certain parameters like screen
| | 00:53 | size or even device dpi.
| | 00:56 | Within mobile web applications, you
can use media queries in an application
| | 01:00 | context, so that your application will
use different style sheets depending on
| | 01:04 | the form factor of the device.
| | 01:07 | Some of the examples of when you
would want to use CSS media queries within
| | 01:10 | PhoneGap would be if you want to
change the design for portrait versus
| | 01:14 | landscape, if you want to change the
design for a form factor, if you want to
| | 01:18 | change the design for a tablet, and if
you want to alter the design for retina
| | 01:22 | and other high-dpi screens.
| | 01:25 | Responsive design is beyond the scope
of this course, but for more information
| | 01:28 | about responsive design fundamentals
and creating responsive web design,
| | 01:32 | check out these courses here in the
lynda.com online training library.
| | 01:35 | By thinking about responsive design
when building your mobile web application,
| | 01:38 | you can create something that will
work across phones and tablets while
| | 01:42 | leveraging the same content.
| | Collapse this transcript |
| Creating an HTML application template to use in the exercises| 00:00 | To create a mobile web application, the
first step is to build out an HTML page,
| | 00:04 | just like you would if you
were building a mobile website.
| | 00:07 | However, there are a few HTML meta tags
which will make your application behave
| | 00:11 | like an application and not like a website.
| | 00:14 | I am going to switc over to Sublime Text,
although you can use any text editor
| | 00:17 | that you want, and we're going to start
off by just building a basic HTML page.
| | 00:22 | So I will set the DOCTYPE to html.
| | 00:25 | We'll set the html tag, start with our head.
| | 00:31 | I'll set my first meta tag, which will
set the character set to UTF-8, so the
| | 00:38 | browser knows how to render it.
| | 00:40 | Normally, when we're browsing
websites on a mobile phone and the browser
| | 00:44 | encounters a phone number, it will
often make that phone number link
| | 00:47 | clickable, so that we can click it from our
browser and it will take us out to the call screen.
| | 00:52 | This is handy within the context of a
mobile website, but in an application when
| | 00:56 | we want to control the entire
experience, it's not as desirable.
| | 01:00 | Luckily, we can use metadata tags to
specifically instruct the browser not to
| | 01:06 | create links from those phone numbers.
| | 01:08 | To do that we're going to create a
meta tag and we're going to give the name
| | 01:13 | attribute a value of format-detection.
The content attribute is going to be
| | 01:18 | set to telephone-no.
| | 01:21 | That's going to make sure that this
browser doesn't turn any phone numbers
| | 01:25 | into clickable links.
| | 01:28 | The next phone we're going to create
is all about how the viewport or how the
| | 01:31 | screen renders to the user.
| | 01:33 | By default, when you're browsing a
website on a phone, you have a lot of control
| | 01:37 | over pinching and zooming and
setting the scale of how that content is
| | 01:41 | rendering. But in an application
you don't have that same control,
| | 01:45 | so we need to use metadata to make
sure that our HTML content is going to
| | 01:50 | behave more like an application, when it comes
to how the user can interact with the screen.
| | 01:55 | So to modify that, we'll set another
meta tag, and the name attribute for this
| | 02:00 | is going to be viewport, and the content
attribute is going to be a string of items.
| | 02:09 | The first one we're going to set is
user-scalable, and we want that to be no.
| | 02:14 | This just means that the user won't
be able to pinch and zoom our content;
| | 02:18 | it's going to be static in one
place and always the same size.
| | 02:22 | We also want to set the initial-
scale to 1, and we're going to set the
| | 02:26 | minimum-scale to 1, as well as the
maximum-scale to 1. And this is just so that
| | 02:34 | the user will never see a zoomed-out
or zoomed-in version of the application.
| | 02:38 | It's always going to be
displayed at a 1:1 ratio.
| | 02:42 | Next, we want to set the size of the
viewport, and we want to make sure that the
| | 02:45 | viewport or our HTML content
is taking up the entire screen.
| | 02:49 | So we can make sure that it's
doing that by saying width is equal to
| | 02:53 | device-width and height
is equal to device-height.
| | 02:59 | Lastly, we want to make sure that our
content is being rendered at the same dpi
| | 03:03 | that's on the device.
| | 03:04 | DPI is a measure of how many pixels
are on the screen per inch, and so some
| | 03:08 | high-resolution displays will have more
pixels than some of the lower-resolution
| | 03:11 | displays. And we want to make sure
that our content is being rendered at the
| | 03:15 | native dpi for that device.
| | 03:17 | We can do that by setting target-
densitydpi equal to the device-dpi.
| | 03:25 | So those two meta tags will give us
the exact experience that we want, from an
| | 03:29 | application standpoint, and make sure
that our content doesn't behave the way it
| | 03:33 | would if it were being rendered
inside of a regular mobile web browser.
| | 03:38 | The next thing we're going to do is
set a title for our application, and this
| | 03:41 | title isn't going to be visible anywhere
to the user, so we can say whatever we want.
| | 03:45 | Just as a placeholder we'll use Our Application.
| | 03:49 | We'll specify the actual title of the
application later on in the PhoneGap
| | 03:52 | configuration files.
| | 03:55 | We also want to create a link to an
external style sheet, which is going to be
| | 03:59 | where we will style and customize the look
and feel of our application. So we'll do
| | 04:03 | link rel="stylesheet" and
we'll set href="css/main.css."
| | 04:16 | That's all we need for our head tag,
so we'll go ahead and close the head, and
| | 04:21 | we'll create a body tag with a
placeholder div tag in it for our content later
| | 04:28 | on, and we'll close the body
and finally close the HTML tag.
| | 04:33 | To make sure your mobile web
applications behave like applications and not like
| | 04:38 | websites, use the meta tag with
specific attributes to control behavior.
| | 04:43 | Even though all of this is running as
HTML, JavaScript, and CSS, these meta
| | 04:47 | tags are important for an
application experience, as opposed to a mobile
| | 04:51 | website experience.
| | Collapse this transcript |
|
|
2. Overview of PhoneGapWhat is PhoneGap?| 00:00 | PhoneGap lets you build mobile
applications with HTML, JavaScript, and CSS.
| | 00:05 | It exposes native APIs and
functionality through JavaScript so you can use
| | 00:10 | web technologies to create applications with
full access to device sensors and features.
| | 00:15 | This means that as a web developer
| | 00:17 | you have full access to what the device can do.
| | 00:20 | PhoneGap uses something called a web
view, and provides a full-screen chromeless
| | 00:24 | browser window that uses the underlying
HTML renderer on the device to display content.
| | 00:30 | This means that if your application is
running in, say, iOS, your content will be
| | 00:34 | displayed using the mobile WebKit renderer.
| | 00:38 | If your application is running on
Windows Phone, it will be using the same HTML
| | 00:42 | renderer that Internet Explorer uses.
| | 00:45 | PhoneGap comes with a JavaScript
library that acts as a native bridge
| | 00:49 | between JavaScript's code and the
native API, which gives you access to all
| | 00:53 | the device features.
| | 00:55 | This means that as a developer,
you don't have to write native code;
| | 00:58 | you simply write against that
JavaScript API to access the device features.
| | 01:03 | PhoneGap applications are packaged
and deployed just like any other mobile
| | 01:07 | application. They can be put on app stores and
marketplaces and distributed in the same way.
| | 01:13 | Users will also download them and use
them in the same way that they would
| | 01:16 | any other application.
| | 01:18 | One of the benefits of PhoneGap is
instead of having to write a different
| | 01:21 | application for every platform with a
whole new set of tools and technologies,
| | 01:25 | you can take a single chunk of HTML,
JavaScript, and CSS content and build an
| | 01:30 | application for multiple platforms.
| | 01:32 | PhoneGap currently supports iOS,
Android, Windows Phone, Blackberry,
| | 01:37 | Symbian, WebOS, and Bada.
| | 01:40 | PhoneGap provides web developers a way
to create mobile applications that have
| | 01:44 | access to device APIs.
| | 01:46 | The entire UI is HTML, JavaScript,
and CSS, meaning that many of the same
| | 01:51 | workflows for web design and
development translate perfectly to building
| | 01:55 | PhoneGap applications.
| | Collapse this transcript |
| PhoneGap apps are mobile web applications| 00:00 | One of the key differentiators of
PhoneGap is the fact that as a developer
| | 00:04 | you're writing HTML, JavaScript, and
CSS, and that's exactly what's going to
| | 00:08 | display to the user.
| | 00:10 | Because PhoneGap runs within a browser
instance, the HTML content you create
| | 00:14 | will render the same way as it would
ifitwe were running in a browser on the
| | 00:18 | device. But with PhoneGap you have
access to all the device's sensors and APIs
| | 00:23 | that native applications do.
| | 00:25 | The web view that PhoneGap runs in
acts as a full-screen browser instance, and it
| | 00:30 | renders your content the same way that
it would if it were being displayed in
| | 00:33 | the browser on the device. Because
PhoneGap is all HTML, JavaScript, and CSS, that
| | 00:39 | means you can use any framework or
technology with PhoneGap that you would use
| | 00:43 | with other HTML-based projects.
| | 00:45 | So, if you're familiar with jQuery
or you want to use LESS and Sass or
| | 00:49 | Backbone and JS or others, you can incorporate
those and use those within your PhoneGap project.
| | 00:54 | PhoneGap still has access to
almost every device-specific feature.
| | 00:58 | PhoneGap exposes the sensors and device
APIs through JavaScript, so that means as
| | 01:03 | a web developer, you're not writing native code;
| | 01:05 | you're simply writing JavaScript
calls to access those device features like
| | 01:09 | camera, geolocation, and storage.
| | 01:12 | PhoneGap applications are also
distributed the same way as other applications.
| | 01:16 | That mean users interact, download, and
purchase PhoneGap applications in the
| | 01:21 | same way as they would any
other mobile application.
| | 01:24 | With PhoneGap you can use web
technologies you use on other projects within
| | 01:27 | your mobile application.
| | 01:29 | The PhoneGap JavaScript API gives you
access to device features like camera,
| | 01:33 | notifications, device-specific
information, and offline storage.
| | 01:37 | Even though the development and user
interface is in HTML, JavaScript, and CSS,
| | 01:42 | PhoneGap applications work the
same way as other mobile applications.
| | Collapse this transcript |
| Extending the mobile web template with PhoneGap| 00:00 | The JavaScript library that PhoneGap
provides is the link between your HTML,
| | 00:04 | JavaScript, CSS code, and the native device APIs.
| | 00:08 | It includes all of the functionality
and events that are needed to create a
| | 00:11 | mobile application with access to
the sensors and events on the device.
| | 00:16 | That JavaScript file is specific to
each platform, and is available after
| | 00:20 | you download PhoneGap.
| | 00:21 | So let's go ahead and take a
look at downloading PhoneGap.
| | 00:24 | To download PhoneGap you can just go
to phonegap.com, and the Download button
| | 00:29 | should be the first thing that you see.
If it's not there for any reason, you
| | 00:33 | can just go to phonegap.com/download
and you'll have the download link, there,
| | 00:37 | the big blue button.
So go ahead and download that.
| | 00:39 | When it's finished downloading, go
ahead and go to the location where you
| | 00:45 | downloaded the file and unzip it, and
now we have PhoneGap on our computer.
| | 00:52 | When you go into the PhoneGap folder,
you'll see there is a folder called doc.
| | 00:55 | This is the documentation
that ships with PhoneGap.
| | 00:58 | So if you ever have need of offline
PhoneGap documentation, you can just
| | 01:01 | point a web browser at this doc
folder and you'll access to all the PhoneGap
| | 01:05 | docs for this version.
| | 01:06 | The files we're looking
for is in the lib directory.
| | 01:09 | In the lib directory are all the
folders for all the platforms that PhoneGap
| | 01:13 | supports. The one we're
looking for right now is iOS.
| | 01:17 | And then we'll go into the CordovaLib
directory, and this cordova.ios.js file is
| | 01:22 | the one that we want to copy over to
our project so we can use the device-
| | 01:26 | specific features and
the APIs from this library.
| | 01:29 | So we'll copy this and place it in
our exercise folder, and now I'm going to
| | 01:35 | open up the index.html file and start
adding PhoneGap-specific API calls to my project.
| | 01:41 | The most important event inside of a
PhoneGap application is the device ready event.
| | 01:45 | This is an event that gets sent by
the native platform to our PhoneGap
| | 01:49 | application that tells PhoneGap it's
ready to call the native device APIs,
| | 01:54 | that the device is essentially
ready to handle all of our calls.
| | 01:58 | Let's start by adding an onload event to
the body. So we're going to say onload,
| | 02:03 | and we'll call that function init.
| | 02:05 | The next thing we want to do is create
our script blocks, and the first script
| | 02:10 | do we need is that cordova.ios
script that we just brought in.
| | 02:14 | PhoneGap is actually an open-source
distribution of Cordova, so that's why it's
| | 02:16 | called Cordova, and we'll talk
about that in a later section.
| | 02:20 | So we'll say script, and the source for
this script is going to be cordova.ios.js.
| | 02:29 | And then we'll close that script tag, and
we'll open up a new one for the scripts
| | 02:34 | that we're going to code.
| | 02:37 | The first thing we'll add is that init
function, so we'll say function init.
| | 02:43 | Within this init function we're
going to create an event listener on the
| | 02:47 | document to listen for that
device ready event, so we'll say
| | 02:50 | document.addEventListener and
we're going to be listening for the
| | 02:56 | deviceready event. And this is a
PhoneGap-specific event, so you have to
| | 03:00 | include the cordova.ios.js library
for this to work. And then the callback
| | 03:05 | function we're going to use is
onDeviceReady, and we'll set that to false, so
| | 03:12 | it doesn't propagate.
| | 03:14 | Next, we need to create our
onDeviceReady function, so we'll say
| | 03:17 | function onDeviceReady.
| | 03:22 | Everything within this function is
going to be called after the device ready
| | 03:25 | event has successfully fired, so that's
telling PhoneGap everything is ready for
| | 03:29 | the device and you can call
device sensor APIs successfully.
| | 03:33 | To make sure this function is fired
successfully, we'll say alert('It works!')
| | 03:38 | with an exclamation mark,
| | 03:40 | so that then when the event fires and
it calls that device ready function,
| | 03:44 | we'll see an alert pop up that says it works
and we'll know that we can now call device APIs.
| | 03:49 | The cordova.js file and the onDeviceReady
event are the two cornerstones of PhoneGap.
| | 03:54 | cordova.js provides all of the APIs
that you will need to access device
| | 03:58 | features. Listening for the
onDeviceReady event will ensure that the
| | 04:01 | application can call those APIs.
| | Collapse this transcript |
|
|
3. Setting Up Your Development EnvironmentInstalling the device simulators and native SDKs| 00:00 | Most of the editing that this course
will need will be done in a text editor,
| | 00:04 | but for compiling and debugging,
the native SDKs can provide helpful features.
| | 00:08 | We're going to focus
first on getting iOS set up.
| | 00:11 | To do iOS development,
you need to download Xcode,
| | 00:15 | and Xcode is available from the Mac App Store.
| | 00:17 | Simply open the Mac App Store, search for
Xcode, and you can download Xcode from there.
| | 00:22 | I have already got it installed,
so I can go ahead and open it.
| | 00:26 | And there are a couple of things in
Xcode that we want to make sure we have
| | 00:30 | installed so that we can compile
and test PhoneGap applications.
| | 00:35 | Go to Xcode > Preferences > Downloads and
you'll see a list of tools that you can
| | 00:41 | optionally configure and install.
| | 00:44 | We want to make sure that the
iOS 5.1 Simulator is installed.
| | 00:50 | And we also want make sure that
Command Line Tools are installed.
| | 00:53 | With these two things installed,
we now have access to the Xcode Command Line
| | 00:57 | Tools, which I'll use later to show
off the PhoneGap Command Line interface.
| | 01:01 | We also have access to he iOS Simulator,
which we'll be using to test and debug
| | 01:06 | our PhoneGap content.
| | 01:07 | Using the iOS Simulator, we'll be able
to debug things like location, so we can
| | 01:12 | test our geolocation APIs, and we'll
also be able to set specific parameters
| | 01:16 | around device size and version.
| | 01:22 | It's important to remember that Xcode
is only available for Mac OS X, so if
| | 01:25 | you want to build PhoneGap applications
with Xcode, you'll have to be working on a Mac.
| | 01:30 | The same is true for Windows.
| | 01:31 | If you want to create content for
Windows Phone using the native tools, you'll
| | 01:35 | have to be on a Windows machine.
| | 01:37 | The next SDK we're going to go get
is the Android SDK, and the Android SDK
| | 01:42 | is available for both Mac and
Windows, so you can use it on whichever
| | 01:45 | platform you're on.
| | 01:46 | To get started with the Android SDK,
go to developer.android.com/SDK/index.html.
| | 01:55 | The easiest way to get the Android SDK is
just to download the SDK bundle for Mac.
| | 02:00 | This will include Eclipse as
well as the Android plugin.
| | 02:03 | It will include the SDK tools, and it
will also include the Simulator that you'll
| | 02:07 | need to test PhoneGap content in Android.
| | 02:12 | When that's finished downloading,
you can unzip the ZIP file, and inside that
| | 02:20 | unbundled ZIP file you'll
find all the tools that you need.
| | 02:24 | The one we're going to use is Eclipse.
| | 02:25 | Now you can run Eclipse from anywhere,
but you may want to copy the Eclipse
| | 02:29 | folder to somewhere more permanent on
your hard drive than the Download folder,
| | 02:33 | so you can use it later on.
| | 02:35 | The first thing you'll see
is the Workspace Launcher.
| | 02:37 | This is where you have to tell Eclipse
and the Android SDK where you want your
| | 02:42 | documents and projects to go.
| | 02:43 | You can use the default,
which is just fine, and push OK.
| | 02:47 | Next it will prompt me to contribute
usage statistics, which is lets Google know
| | 02:51 | how people are using the product.
| | 02:52 | I'll select No, but you can select Yes;
it won't affect the project at all.
| | 02:56 | And now I'm in a screen where I
can start creating my application.
| | 02:59 | The tool that we'll be using the most
is called DDMS, and if you close that
| | 03:04 | initial window out and open up the
other perspective, you'll see DDMS.
| | 03:11 | This is going to be where we control
the emulator and we're able to look at
| | 03:14 | things that are happening, including
console output, and it'll be the central
| | 03:17 | place when we do Android
development using PhoneGap.
| | 03:21 | The next platform we're going to
download and install is Blackberry.
| | 03:24 | To download the Blackberry SDK, I can go to
| | 03:26 | https://developer.blackberry.com/html5/download.
| | 03:34 | There are a bunch of different SDKs
that you can download for Blackberry.
| | 03:37 | The one that we're most worried about
today is the Blackberry 10 Beta SDK.
| | 03:41 | And specifically, we're going to download the
Ripple emulator as well as the WebWorks SDK.
| | 03:47 | I'll first start by
downloading the Ripple emulator.
| | 03:50 | The Ripple emulator for Blackberry
makes it possible to emulate and test
| | 03:54 | content for a PhoneGap application
from within Chrome and the browser itself.
| | 03:58 | It's installed as a browser extension,
so there are a few steps you'll have to
| | 04:02 | go through to make sure
that it gets set up correctly.
| | 04:04 | First, go ahead and download the
.crx file. And it will try to add it
| | 04:08 | automatically to Chrome, but
Chrome recently disabled the ability to
| | 04:12 | download and install extensions automatically,
so we're going to have to do a manual install.
| | 04:16 | We're going to start by going to
about:settings, and then we can click on the
| | 04:24 | Extensions tab and it's going to
tell us we have no extensions or you may
| | 04:27 | have extensions already installed in Chrome.
And I'm going to go find my download location,
| | 04:33 | so go open the Finder. And then I am
just going to drag this ripple_ui.crx file
| | 04:38 | over to my Extensions folder.
| | 04:40 | And it will go ahead and
ask me if I can install it.
| | 04:43 | I'll click Add, and now I have the
Ripple Emulator (Beta) added to Chrome.
| | 04:51 | You'll also want to make sure you
have the SDK to package your application.
| | 04:54 | So to do that, we can just download the
Blackberry 10 WebWorks SDK for Mac OS X.
| | 05:00 | Blackberry includes a
Simulator that runs in VMWare.
| | 05:02 | To get the Simulator working, you've to
download the VMWare appliance and run it
| | 05:06 | with the appropriate VMWare
software for your platform.
| | 05:09 | We're primarily going to use the
Ripple emulator, so you'll not need the
| | 05:12 | Simulator for this course.
| | 05:14 | With the native SDKs installed, you can use
the native tools for debugging and testing.
| | 05:19 | In addition, PhoneGap can use the
native SDKs to package up mobile applications
| | 05:23 | for app stores and marketplace distribution.
| | Collapse this transcript |
|
|
4. Creating an ApplicationWhat we'll build| 00:00 | The application we're going to
build is a note-taking application.
| | 00:03 | I'm going to be using the iOS Simulator
because it's a very popular choice,
| | 00:07 | but you can follow along with
any of the supported platforms.
| | 00:11 | The first API we use is the
connectivity API, to check and see if the
| | 00:15 | application is offline.
| | 00:17 | Clicking the New Note
button brings up the Note screen.
| | 00:20 | All of the notes are
geotagged with the geolocation API
| | 00:23 | so I can see where I am on the map.
| | 00:24 | Clicking the Add a Photo button
brings up the photo library, so I can save
| | 00:29 | a photo with my note.
| | 00:30 | We're using jQuery mobile to
render the UI form elements.
| | 00:42 | When I scroll down and click the Save
Note button, it'll be saved when offline
| | 00:46 | database using the local storage API,
| | 00:48 | so it will be available when
I open the application next.
| | 00:56 | With this application,
I introduced some of the PhoneGap APIs.
| | 00:59 | At the end of the chapter, I'll show you
some of the other APIs, so you'll have
| | 01:03 | more information and can extend
the application however you want.
| | Collapse this transcript |
| Starting a project with the iOS template| 00:00 | PhoneGap comes with a number of tools
that can help in the packaging and testing
| | 00:04 | of mobile applications.
| | 00:06 | Among these are the command line
scripts that leverage the native SDKs and what
| | 00:10 | you create, package, and
debug with a single command.
| | 00:15 | In this video we'll walk through the
steps to create a PhoneGap application and
| | 00:19 | make sure you're familiar with
the PhoneGap project structure.
| | 00:22 | PhoneGap is a distribution of the
open-source Cordova project, and Cordova is
| | 00:27 | part of the Apache foundation,
| | 00:28 | so it's open source under
the Apache open-source license.
| | 00:32 | Right now there isn't a lot of
difference between the code in Cordova and
| | 00:35 | the code in PhoneGap.
| | 00:36 | Cordova is divided into individual
operating system projects, while PhoneGap
| | 00:41 | includes all supported mobile platforms.
| | 00:43 | If you haven't done so, go ahead and
download PhoneGap, and you can do that by
| | 00:48 | going to phonegap.com/download.
| | 00:52 | Once you've downloaded it, go to the
location on your hard drive where it's
| | 00:56 | downloaded; for me it's in the downloads folder.
| | 01:01 | Go to the lib folder, and here are folders
for all the projects that PhoneGap supports.
| | 01:05 | The one we're going to focus on is iOS.
| | 01:09 | Here is all the code that makes that
native bridge connect to JavaScript and
| | 01:13 | HTML and lets you build mobile
applications with HTML, JavaScript, and CSS.
| | 01:18 | Included in this folder is a bin folder
with a bunch of command line tools that
| | 01:23 | makes it easy to create,
generate, and test PhoneGap projects.
| | 01:27 | Open up the Terminal and go to that directory.
| | 01:31 | For me, it's Downloads/phonegap/lib/ios/bin/.
| | 01:41 | Now we'll use the Create command line
tool to generate a skeleton project.
| | 01:46 | Now, by default the command line
tools will use this templates directory
| | 01:50 | to create the project.
| | 01:52 | You can see when I go into it
| | 01:54 | I've got the Xcode project template, as
well the www folder, which has all the
| | 01:58 | HTML, JavaScript, and CSS that will be
created when I generate this project
| | 02:03 | from the Command Line.
| | 02:04 | Go back to Terminal and type /create,
and you are going to have to set a
| | 02:09 | couple of parameters.
| | 02:10 | The first one is the location for where
this project will be created, and we're
| | 02:14 | going to put this on the desktop.
And we'll call it ios-project.
| | 02:20 | Second, you need to give it the ID,
which is usually a reverse domain, something
| | 02:24 | like com.example.ios. It should be unique.
| | 02:29 | Lastly, we have to give it the name
of the project, and we'll call this
| | 02:33 | ios-project. Push Enter and that script
will create that project on the desktop.
| | 02:41 | Go ahead and browse to the desktop
in the Finder window, double-click on
| | 02:47 | ios-project, and you can see here is
our Xcode project, which includes all the
| | 02:51 | files that we just generated.
| | 02:54 | We'll go ahead and click Xcode project
to open it in Xcode, and we can now see
| | 02:59 | our PhoneGap project running here in Xcode.
| | 03:01 | There is the www folder, which contains
our HTML, JavaScript, and CSS files, as
| | 03:08 | well as all the native files which
go into making a PhoneGap project.
| | 03:13 | One of the benefits of using a tool like
Xcode is that we can use the tools that
| | 03:17 | are part of Xcode for
testing and debugging our content.
| | 03:21 | In this case, I can use the iOS Simulator
to test how my content will look on a device.
| | 03:26 | To do that, I select iPhone 6
Simulator and then push the Run button.
| | 03:34 | That's going to compile my application,
and it's going to install it on the Simulator.
| | 03:38 | So I can now see that deviceready
is fired, and I'm ready to start
| | 03:42 | writing PhoneGap code.
| | 03:43 | We're going to use this project going
forward, so keep this on your desktop, and
| | 03:47 | we'll be referring back to it.
| | 03:48 | Using the command line tools in
conjunction with tools from the native SDK
| | 03:52 | provides everything you need to create
and customize a PhoneGap application.
| | 03:56 | Let's move on and get
started building our application.
| | Collapse this transcript |
| Starting a project with the Android template| 00:00 | PhoneGap comes with a number of
tools that can help in the packaging and
| | 00:03 | testing of mobile applications.
| | 00:05 | Among these are the command line
scripts that leverage the native SDKs and let
| | 00:09 | you package, create, and
debug with a single command.
| | 00:13 | In this video we will walk through the
steps to create a PhoneGap application
| | 00:17 | and make sure you're familiar
with the PhoneGap project structure.
| | 00:21 | PhoneGap is actually a distribution
of the open-source Cordova project, and
| | 00:25 | Cordova is part of the Apache
foundation and is open sourced under the Apache
| | 00:29 | open-source license.
| | 00:31 | There isn't much difference currently
between the Cordova code and the PhoneGap code.
| | 00:35 | The main difference is Cordova is
divided into individual operating-system
| | 00:39 | projects while PhoneGap
includes all supported mobile platforms.
| | 00:44 | If you haven't downloaded
PhoneGap, go ahead and download it at
| | 00:46 | phonegap.com/download, then go to the
location where you downloaded it, from
| | 00:51 | Downloads, double-click on it, go into
the lib folder, and you'll see a folder
| | 00:56 | for every platform that PhoneGap supports.
| | 00:59 | The one we're concerned with is
android, so double-click on that.
| | 01:04 | Here you'll see the Java files and
the JavaScript files that make up a
| | 01:07 | PhoneGap Android project.
| | 01:09 | In the bin folder are number of
scripts that will help us create and test our
| | 01:15 | content, and if you look in the
templates folder, you'll see the skeleton of the
| | 01:20 | project that gets created when
you use these command line scripts.
| | 01:23 | There's the Java file, the Android
manifest, and then in the assets file, inside
| | 01:28 | the www folder, you'll see the HTML,
JavaScript, and CSS files that make up the
| | 01:34 | PhoneGap project that gets created when
you use these command line scripts.
| | 01:37 | Go ahead and open up the Terminal.
| | 01:39 | One of the first things that we have to
do is set the environment variables to
| | 01:42 | point to the Android SDK so the
command line scripts can use the proper tools.
| | 01:47 | On Windows you can set your
environment variables by right-clicking on My
| | 01:50 | Computer and clicking Properties.
Then you should be able to change them in the
| | 01:54 | Advanced System Settings menu.
| | 01:56 | On Mac we want to create a profile for
our Terminal, and we do that by typing, in
| | 02:02 | the Terminal, touch ~/.bash_profile.
| | 02:09 | That's going to create
the profile that we'll use.
| | 02:11 | Then we want to open this in
Sublime Text, and to do that, we say open,
| | 02:18 | ~/.bash_profile -a, and the path
of Sublime Text, which for me is
| | 02:25 | Applications/Sublime\Text.
| | 02:29 | Now we have to use the Export command to
tell our bash profile where the Android SDK is.
| | 02:34 | We do that by typing export PATH, in all
capital letters, equals dollar sign curly
| | 02:41 | brace PATH and then a colon, and now we
are point it to a couple of folders that
| | 02:47 | are a part of the Android SDK.
| | 02:49 | Your path may be different, but my
Android SDK is in my Applications folder,
| | 02:54 | under the adt-bundle-mac-x86_64 folder.
| | 03:00 | If you downloaded it following the
instructions in a previous movie, it may be
| | 03:04 | in a similar place for you.
| | 03:05 | I am going to copy the name of this
folder, go back to Sublime Text, and then
| | 03:12 | Applications, the name of the
folder--sdk--and inside this folder I want
| | 03:19 | platform-tools. Follow that with
another colon, and then I'm going to copy this
| | 03:26 | entire string, paste it after that
colon, and remove the platform-, so it just
| | 03:38 | says tools. And then I'll save my bash profile.
| | 03:44 | Those two folders contain a bunch of
the SDK tools that the command line tools
| | 03:48 | that ship with PhoneGap are going
to use to create and test projects.
| | 03:53 | To use this I'll quit Sublime Text and I'll
also quit my Terminal and open it back up.
| | 04:00 | Now I can use those Android scripts that
come with PhoneGap to create a project.
| | 04:04 | So I'll go into the PhoneGap
directory, which is still in downloads for me,
| | 04:08 | phonegap-2.3.0/lib/android/
bin/, and there are the tools.
| | 04:17 | If you're on Windows, you can use
create.bat, but on Mac I'll use create and
| | 04:23 | then I'll pass in the same
parameters that I would if I were on Windows.
| | 04:27 | First, we need to give a location
for our project, and I'll put it on the
| | 04:31 | Desktop, Desktop/android-project.
Then I'll give my project an ID, which usually
| | 04:39 | takes the form of a reverse domain, so
it's unique, com.example.android.
| | 04:45 | And finally, I'll give my
project a name: android_project.
| | 04:49 | You won't be able to use dashes in
the name of the project, so keep that in
| | 04:53 | mind. Push Return and behind the
scenes it's not going to create my Android
| | 04:58 | project for me on the desktop.
| | 05:01 | If I go back to Finder and go
to the desktop, I'll now see my
| | 05:06 | Android project with all of the
native Android files there that I need to
| | 05:10 | start building this for PhoneGap.
| | 05:11 | So now we can open up that Android tool
that we downloaded in the previous movie.
| | 05:16 | Go to Eclipse, open up Eclipse,
select the default workspace, and now I can
| | 05:24 | import that existing Android code into
my workspace by browsing to its location
| | 05:32 | on the desktop. android-
project, Open, and Finish.
| | 05:38 | Now we have the native Android project here
in the native development tools for Android.
| | 05:44 | The next step to get this running is to
set up the Android virtual machine, which
| | 05:47 | I can do by clicking the
Android Virtual Device Manager button.
| | 05:51 | Here we can set up the emulator.
| | 05:53 | I'll do that by creating a new virtual machine.
| | 05:56 | I'll give it the name NexusS,
which will reflect the device we were planning on
| | 06:02 | using. Give it a target of
Android 4.2 and I'll click OK.
| | 06:10 | Now we have our virtual device set up.
| | 06:14 | I can select my projects, go to the Run
menu, and Run As > an Android Application.
| | 06:23 | That's going to compile my Android
project, and this will start the emulator and
| | 06:27 | start your application loading.
| | 06:29 | This can take a little while,
and there the application is running.
| | 06:37 | We can also use the PhoneGap command
line tools to run the emulator from the
| | 06:41 | command line. Go to the Terminal and
go to the place where you created the
| | 06:46 | project. For me it's Desktop/android-project.
| | 06:52 | Inside that directory is a Cordova
directory which contains a bunch of script
| | 06:56 | files that we can use to
build and test the project.
| | 07:02 | In this example, we're going to use
the Run command, so we just type /run,
| | 07:08 | and it's going to build and compile
the project and then deploy it to our
| | 07:12 | Android virtual machine.
| | 07:18 | If you prefer not to use the Eclipse
tools, you can use the command line tools
| | 07:22 | as a more lightweight way and more
flexible way to deploy content of the device.
| | 07:27 | Using the command line tools in
conjunction with the tools from the native SDK
| | 07:31 | provides everything you need to create
and customize a PhoneGap application.
| | 07:35 | Let's move on and get
started building our application.
| | Collapse this transcript |
| Starting a project with the Windows Phone 8 template| 00:00 | Most of the editing that this course
will need will be done in a text editor,
| | 00:04 | but for compiling and debugging,
the native SDKs can provide helpful features.
| | 00:09 | Let's look at how to get set up with
PhoneGap in the Windows Phone 8 SDK.
| | 00:13 | Start by downloading the latest version
of PhoneGap. Then you'll need to browse
| | 00:18 | to the Windows Phone 8 SDK
page and download that as well.
| | 00:23 | Once those are installed and
extracted, go into the PhoneGap directory.
| | 00:28 | In the lib directory, you'll see Windows Phone 8.
| | 00:32 | The Window Phone 8 distribution
comes with two types of templates.
| | 00:36 | The full template is a prebuilt DLL
containing all of the framework code for PhoneGap.
| | 00:41 | Using this template will make your
project easy to update because you can
| | 00:45 | replace the JavaScript and the DLL in
the project and then rebuild it when a new
| | 00:49 | version of PhoneGap comes out.
| | 00:51 | The problem is that the DLL contains all
the PhoneGap APIs and will thus require
| | 00:56 | all the permissions, even ones you don't use.
| | 00:59 | This can be an issue when you submit
your application to the Windows store.
| | 01:03 | The standalone template includes
all of the source code for PhoneGap.
| | 01:06 | This template is easier to
customize to be sure that you're using only
| | 01:10 | features you need, but will be harder to
update new versions of PhoneGap when they come out.
| | 01:15 | To start off, we're going to copy
the full template over to the templates
| | 01:19 | directory in Visual Studio.
| | 01:21 | So copy the zip file and
browse to My Documents/Visual Studio
| | 01:26 | 2012/Templates/ProjectTemplates and
inside that folder, paste the zip file.
| | 01:36 | Next, open up Visual Studio. And now, if
we go to New Project, at the top of the
| | 01:46 | page I have my Cordova Windows Phone 8
template. Click OK and it'll create a new
| | 01:52 | PhoneGap project for me
in Visual Studio Express.
| | 01:56 | Here's the www folder, and inside that
www folder is the CSS, JavaScript, and
| | 02:03 | HTML that we will be
modifying throughout the course.
| | 02:06 | To test this application make sure the
emulator is selected above and press the
| | 02:13 | green arrow key to start emulation.
| | 02:17 | That will start the Windows Phone 8
Emulator, and we can see our PhoneGap
| | 02:21 | project running inside.
| | 02:23 | Now we have our PhoneGap application
running in Windows Phone 8 and we're
| | 02:26 | ready for development.
| | 02:27 | With the Windows Phone 8 SDKs
installed, you can use the native tools for
| | 02:31 | debugging and testing.
| | 02:32 | In addition, PhoneGap can use
these native SDKs to package up mobile
| | 02:36 | applications for app stores
and marketplace distribution.
| | Collapse this transcript |
| Adding UI features with jQuery Mobile| 00:00 | jQuery mobile is a powerful framework
for building mobile web applications.
| | 00:04 | It is built on top of jQuery, but
includes mobile-specific components and
| | 00:08 | transitions that speed up the
process for building an application.
| | 00:11 | Originally, jQuery mobile was
intended for mobile web content, but with the
| | 00:15 | popularity of PhoneGap, it is often used
create mobile web applications as well.
| | 00:19 | jQuery mobile provides a robust UI
library that is touch- and mobile-friendly.
| | 00:24 | It includes a lot of mobile UI paradigms like
pages and transitions as well as touch events.
| | 00:31 | jQuery mobile also will degrade
gracefully, which means that if for some reason
| | 00:36 | you can't load all the JavaScript or
all the CSS files, all the content on the
| | 00:40 | page is still viewable.
| | 00:41 | This is less of an issue with
applications, but it can still be good to know.
| | 00:46 | A full explanation of jQuery mobile
is beyond the scope of this course, but
| | 00:49 | you can find other jQuery mobile titles
here in the lynada.com online rraining library.
| | 00:55 | Let's go to exercise files and open up
the placeholder document that we created in
| | 00:59 | earlier movies. So remember, this is
just a structure of a document we created,
| | 01:04 | and we added some PhoneGap-specific
content to it so that we could be ready for
| | 01:08 | the onDeviceReady event.
| | 01:10 | If you open up your exercise files,
you'll see code-snippets.txt, so go ahead and
| | 01:16 | double-click that. And we are going to
copy this and bring that into Sublime
| | 01:24 | Text and replace our
placeholder div with that content.
| | 01:30 | Now, this gives you a sense of how
jQuery mobile is structured. It's divided up
| | 01:34 | into pages, which will be rendered
screens when running on the device.
| | 01:39 | You can either have your pages in one
file, like I have them here--this page
| | 01:43 | and this page--or you can create separate
HTML documents for separate jQuery mobile pages.
| | 01:49 | If we save this and open it in a
browser--and we can do that by dragging over the
| | 01:56 | index.html page--you'll see that it
doesn't really look like an application.
| | 02:00 | There's not any styling
too it. Some content's there.
| | 02:03 | We have a link here that
goes to a hash URL right now.
| | 02:08 | And what jQuery mobile is going to do
is take this document structure and turn
| | 02:12 | it into something that looks polished
and like a regular mobile application.
| | 02:17 | The first step to using jQuery mobile
is to go download the files that you'll
| | 02:21 | need, which you can do at
http://jquerymobile.com. Click on the download link,
| | 02:27 | and when you get to the download page
you'll be given a whole bunch of different
| | 02:30 | options for ways to incorporate
jQuery mobile into your content.
| | 02:35 | What jQuery mobile recommends is that copy
and paste this snippet for CDN-hosted files.
| | 02:39 | The reason jQuery mobile recommends this is
because when jQuery mobile is used on a website,
| | 02:45 | this can help speed up its loading
time. But we have to make sure that the
| | 02:49 | files are available even when there's
no Internet connection, because we are
| | 02:51 | running an application.
| | 02:53 | So we want to download the ZIP file that
contains all of the JavaScript, CSS, and images.
| | 03:00 | When that downloads, open up the
download location and unzip the ZIP file.
| | 03:06 | Then double-click on the jquery mobile
folder and you'll see a whole lot of
| | 03:12 | CSS and JavaScript, as well as some
folders that include the images that ship
| | 03:16 | with jQuery mobile.
| | 03:17 | The folder we want to worry about his demos.
| | 03:20 | We're going to double-click on demos,
and we're going to copy the CSS and
| | 03:25 | JavaScript folders into our exercise folder.
| | 03:30 | Go back and paste them with
Ctrl+V or Command+V on the Mac.
| | 03:36 | Inside the CSS and this JavaScript
folder are all the JavaScript and CSS
| | 03:40 | files that we need.
| | 03:41 | We have jquery, we have the jquery.mobile
JavaScript file, and we also have the CSS
| | 03:47 | files that we can
incorporate into our application.
| | 03:49 | So as the next step, go ahead open up the
index.html page that we saved in Sublime Text.
| | 03:55 | And we're going to bring in those
jQuery mobile files and reference them from
| | 03:59 | here in the document.
| | 04:01 | The first thing we want to do is
reference that CSS style sheet to incorporate
| | 04:05 | the jQuery mobile theme.
| | 04:07 | We do that by saying link rel="
stylesheet", and for the href we are going to
| | 04:14 | point to css/themes/default/jquery.mobile-1.2.0.css,
Then, above the
| | 04:28 | cordova.ios.js script tag or
cordova.android.js if you're using android,
| | 04:34 | you'll want to add the two JavaScript
files that we need for jQuery and
| | 04:38 | jQuery mobile respectively.
| | 04:41 | So go ahead and do script src= js/
jquery.js. As I mentioned, jQuery mobile is
| | 04:51 | built on top of jQuery, so we still
need to incorporate the jQuery JavaScript
| | 04:55 | file, so that we can make use of all
the things jQuery provides within our
| | 05:00 | jQuery mobile application.
| | 05:02 | The second script tag right
below that, we're going to add
| | 05:05 | js/jquery.mobile-1.2.0.js and close
that script tag. Now save this and open it
| | 05:21 | back up in the browser.
| | 05:22 | Let's go ahead and drag our
index.html file over to the browser window.
| | 05:29 | Now that same exact content, just by
adding some CSS and JavaScript files, has
| | 05:34 | been transformed into something that
looks very much like an application.
| | 05:38 | That link has been turned into a button,
and when I click on that button, it'll
| | 05:43 | give me a nice transition to what
will become our Note Detail page.
| | 05:46 | As a final step we want to go back to
Sublime Text and we're going to create a new file.
| | 05:53 | This is going to be our CSS file that
we're going to associate with our content,
| | 05:57 | and we're going to add some CSS rules.
| | 06:00 | So let's go ahead and change
the plain text version to CSS.
| | 06:05 | If you have a text editor that
supports this, you'll want to do that as well.
| | 06:09 | Next, we're going to create a class
called logo and we're going to give it a
| | 06:14 | property of text-align:
center. And then we'll go ahead and save it
| | 06:19 | into our exercise folder, in
the CSS folder, as main.css.
| | 06:27 | Go back to the browser window. We can refresh.
| | 06:29 | Now we have our logo centered, and
we're ready to start adding more content.
| | 06:33 | With jQuery mobile integrated into the
application, we now have something that's
| | 06:36 | starting to feel like a real mobile app.
| | 06:38 | With the user interface defined, it is
time to move on to adding device-specific
| | 06:42 | features to the application.
| | Collapse this transcript |
| Adding other JavaScript frameworks| 00:00 | Because PhoneGap is just HTML,
JavaScript and CSS content, it's possible to use
| | 00:05 | almost any framework, tool, or
technology that leverages those languages.
| | 00:09 | This means as a web developer or
designer, you can use the familiar workflow in
| | 00:13 | building PhoneGap applications.
| | 00:15 | It also means that your application
can make use of the many great web
| | 00:18 | technologies that exist.
| | 00:20 | In this movie, I'll take you
through how to do just that.
| | 00:23 | Something that can be very helpful
for web content is templating, or reusing
| | 00:27 | core HTML code, but with some variables that
we will change the content inside of the HTML.
| | 00:33 | There are a number of great templating
frameworks like _JS, Handlebars, and Mustache.
| | 00:39 | I'm going to use Mustache today,
because it's one of the most widely used
| | 00:42 | templating frameworks, and has
support for many different languages.
| | 00:45 | It's also simple and lightweight.
| | 00:47 | For more complex applications, you may
want to look at Handlebars, which is a
| | 00:51 | superset of Mustache.
| | 00:53 | So it works with the Mustache templates,
but has a few extra features that can
| | 00:57 | come in handy when creating bigger applications.
| | 00:58 | The first thing we need to do is
download mustache.js, which we can do by going
| | 01:03 | to http://mustache.github.com.
| | 01:06 | Mustache is available in many
different languages, but the one we're most
| | 01:09 | worried about is JavaScript.
| | 01:10 | The easiest way to get mustach.js is
simply to go to mustache.js in GitHub,
| | 01:17 | click on the file, go to the raw version,
and then save this into our exercise folder.
| | 01:25 | And we're going to save it
in the JavaScript folder.
| | 01:27 | Once we've got mustache.js downloaded,
let's open up our exercise folder.
| | 01:35 | Specifically open up index.html.
Now to use mustache.js, we first need to
| | 01:41 | reference that script file.
| | 01:42 | So below your cordova.ios.js script,
source or cordova.android.js if you
| | 01:48 | are following along for Android, create
script src js/mustache.js and close the script tag.
| | 01:57 | To use mustache.js, you first need to
set up a template, which is the code that
| | 02:01 | will be rendered when we call mustache.
| | 02:04 | Mustache uses double curly
braces to define variables.
| | 02:07 | Those variables are populated by a data
variable that is passed into the mustache call.
| | 02:12 | In the exercise file, you'll find
code-snippets.txt. Open that in a text editor
| | 02:19 | and you'll see the data, as well as the
HTML template that we are going to use.
| | 02:23 | Copy that, go back to Sublime Text,
and at the very top of the script
| | 02:29 | block, paste it in.
| | 02:36 | Notice the template file, which includes
the HTML I want Mustache to render for me.
| | 02:41 | Also notice the double curly braces, which are
variables that correspond to the data above.
| | 02:46 | When we call the Mustache template,
it's going to look at that data and create
| | 02:50 | the HTML based on the data source above.
| | 02:52 | Now let's take a second to
talk about jQuery mobile events.
| | 02:55 | Similarly to PhoneGap, jQuery mobile
has an event that triggers when it's safe
| | 03:00 | to use other jQuery mobile features.
| | 03:03 | This is called the page init event.
| | 03:05 | So anytime we want to call something
with jQuery mobile, we will put it inside
| | 03:09 | that page init handler.
| | 03:11 | On top of the init block, we're going
to add an event listener to the document
| | 03:16 | using jQuery syntax, and we're going
to listen for pageinit. And when that
| | 03:23 | pageinit is called, we're going to
do everything within this function.
| | 03:28 | For this template we want to use the
HTML down in the new note page below, and
| | 03:33 | to do that, we want to listen for
the page create event on that object.
| | 03:37 | So we'll create a jQuery event
listener on our newnote page, and set to
| | 03:45 | pagecreate, and then create the function
that will be called when that event fires.
| | 03:51 | Inside of this function is where
we'll start to call our mustache template.
| | 03:55 | Mustache renders into HTML, so we'll
first create a holding object for that
| | 04:00 | HTML. Then we'll call the Mustache
library and the to_html function, which is
| | 04:09 | going to take that template data
and turn it into HTML we can use.
| | 04:12 | So we'll pass in the notetemplate,
as well as the data structure that will be
| | 04:19 | rendered based on that template.
| | 04:20 | Once we have the HTML, we want to
insert the HTML into the page below.
| | 04:24 | We can do that with jQuery by
selecting the notedetail content and inserting
| | 04:31 | the HTML we created into the HTML property.
| | 04:34 | Go ahead and save this file and then
load it in the browser by dragging it from
| | 04:41 | Finder or from your
location to the browser window.
| | 04:46 | Now we have our application,
and when we click newnote,
| | 04:49 | it's going to render the template,
so we'll have the other jQuery mobile
| | 04:52 | components there that can start using.
| | 04:54 | Now you've seen how easy it is to
incorporate other frameworks and
| | 04:57 | technologies into PhoneGap.
| | 04:59 | This makes PhoneGap a powerful tool
for web developers who want to take
| | 05:02 | advantage of frameworks or
technologies that they already know.
| | 05:05 | Many of them work to make
PhoneGap applications more robust.
| | Collapse this transcript |
| Using the Connectivity API| 00:00 | PhoneGap provides access to native
device APIs through a JavaScript bridge.
| | 00:05 | That means all developers need to do in
order to use the APIs is write JavaScript.
| | 00:10 | All the data from the device sensors
are passed back to the application through
| | 00:15 | the bridge, which means developers
never have to worry about accessing or using
| | 00:20 | the native API directly.
| | 00:22 | For a lot of applications it is
helpful to know if the device currently has
| | 00:25 | an Internet connection or not; that way you
can adjust the user experience accordingly.
| | 00:30 | There is a native API that provides
this information, which is bridged through
| | 00:34 | PhoneGap's connectivity API.
| | 00:37 | Let's go ahead and open index.html and
scroll down to the onDeviceReady event.
| | 00:43 | If you'll recall, whenever we are calling
PhoneGap APIs, we need to make sure they
| | 00:47 | happen after DeviceReady.
| | 00:49 | The easiest way to do that is to put
calls within the DeviceReady function.
| | 00:55 | For this example we'll delete the alert,
and we're going to create a variable to
| | 01:00 | store the network state: var networkstate.
| | 01:04 | Now we can call the PhoneGap API.
| | 01:08 | Most PhoneGap APIs are on a navigator object.
| | 01:11 | So we'll type navigator.
| | 01:13 | Now we can call the connection API,
which includes a type string that's going to
| | 01:18 | return the type of connection we currently have.
| | 01:21 | This could be WiFi,
cellular, or could be none at all.
| | 01:25 | Once we know the network state, now we want
to customize the application based on that.
| | 01:30 | Down here, at the bottom of my
application, I have this Offline mode class.
| | 01:36 | I don't yet have a CSS style associated
with it, so it's always going to show up,
| | 01:40 | but I have a CSS style that we're going
to create later that's going to hide it,
| | 01:43 | unless we have an offline connection.
| | 01:47 | So up here onDeviceReady, I'm going to
say if(networkstate == "none"), which is
| | 01:54 | the value that navigator connection
object will return if I don't have an
| | 01:57 | Internet connection. Then I'll create
a selector on the offline class that's
| | 02:03 | going to change my CSS
visibility property to visible.
| | 02:08 | Now let's go set that
class up inside of my CSS file.
| | 02:13 | Go back to the exercise files, go
into to the css folder, and double-click
| | 02:18 | main.css to open it in Sublime Text.
| | 02:21 | Now, below the logo class,
we're going to create offline.
| | 02:26 | The properties for offline are
going to be visibility: hidden; color:
| | 02:32 | red; and finally font-style:
| | 02:36 | italic. And save that file.
| | 02:40 | Now we want this to run
inside of the iOS Simulator.
| | 02:44 | To do that we're going to take all of
the files from this Exercise folder--using
| | 02:49 | Command+A or Ctrl+A on
Windows to select them all--
| | 02:52 | and we are going to copy all of these
into the iOS project on the desktop that
| | 02:56 | we created as a
placeholder in the previous movie.
| | 02:58 | So double-click on ios-
project, double-click on www.
| | 03:03 | I'll select everything in this folder,
and then I'll use Command+Delete or
| | 03:08 | Shift+Delete on Windows to
delete them from my project.
| | 03:11 | Finally, we'll paste our five items
from the exercise folder in, move back to
| | 03:17 | the main level project,
| | 03:20 | double-click on the Xcode
project to open it up in xcode.
| | 03:23 | Now I can run this in the Simulator by
making sure that iPhone 6.0 Simulator is
| | 03:27 | selected and pushing Run.
| | 03:32 | And here's our snap!note application
with no offline mode down here, because we
| | 03:37 | have an Internet connection.
| | 03:38 | But let's see what this looks
like without an Internet connection.
| | 03:41 | Let me go ahead and quit the
Simulator, and then I'm going to go to the
| | 03:47 | Network Preferences.
| | 03:50 | The iOS Simulator uses the network
connection coming from the computer to
| | 03:54 | determine its own network connectivity.
| | 03:56 | So in order to simulate offline mode
with the Simulator, you have to actually
| | 04:00 | turn off the Internet
connection on your computer.
| | 04:02 | Other simulators let you have more
control over the kind of Internet connection
| | 04:06 | that's coming into the emulator.
| | 04:07 | And if you need to disable your
Internet connectivity for any reason, you can
| | 04:10 | also do this on Windows.
| | 04:12 | On Mac, I'll go ahead and go
from DHCP to Off, push Apply.
| | 04:16 | And now I'll go back to xcode and run my
application in the Simulator once again.
| | 04:24 | This time when it loads, it detects
that we don't have an Internet connection
| | 04:27 | and it's going to display that red
Offline mode so that users of the application
| | 04:31 | know they're currently offline and
don't have an Internet connection.
| | 04:34 | The PhoneGap APIs give you
everything you need from JavaScript.
| | 04:37 | The connectivity API is one of the
most basic APIs to use, but it can be very
| | 04:42 | handy when customizing
an application experience.
| | Collapse this transcript |
| Using the Geolocation API| 00:00 | Another common API that applications
make use of is the geolocation API, which
| | 00:05 | uses a combination of GPS and
wireless to provide a user's location.
| | 00:09 | This video will cover how to use
the geolocation API in PhoneGap.
| | 00:14 | In order to use geolocation on Android,
you need to explicitly call out the
| | 00:18 | permission in the manifest file.
| | 00:20 | On iOS, the user will be prompted to
allow the application to request their location.
| | 00:25 | Most devices have two ways to get location.
| | 00:28 | One is the GPS sensor,
which is the most accurate.
| | 00:32 | This is often called fine location.
But many devices also can get location by
| | 00:37 | looking at the wireless networks around
and calling a web-based location service,
| | 00:41 | which is less accurate.
| | 00:43 | This is often referred to as coarse location.
| | 00:45 | Go ahead and open the exercise folder
and double-click on index.html to open it
| | 00:51 | in your text editor.
| | 00:53 | The first thing we have to do is add
the scripts that we're going to call
| | 00:56 | from Google Maps, so that we can
insert a map in our application after we've
| | 01:00 | called the location.
| | 01:01 | Open up code-snippets.txt in the
exercise folder and copy the first two lines:
| | 01:07 | the style sheet and the script tag.
| | 01:11 | Go back to your text editor and right
below mustache.js, paste those two lines
| | 01:15 | of code into the editor.
| | 01:19 | Normally, when calling PhoneGap events,
we want to make sure we call them in
| | 01:22 | onDeviceReady, but in this example we're
going to be waiting for a second page load,
| | 01:27 | so we're going to put the
event in the pageinit function.
| | 01:30 | Start off by creating an event
listener for the newnote page.
| | 01:36 | And we're going to bind this event listener
to the pageshow event. Pass in the function.
| | 01:44 | Inside this function we're
going to call the geolocation APIs.
| | 01:48 | We do that by typing navigator.
geolocation. And the method we're going to call
| | 01:54 | on the geolocation object is getCurrentPosition.
| | 02:00 | getCurrentPosition takes
two different parameters.
| | 02:02 | The first one is the function will be called
when we successfully get the user's location.
| | 02:07 | We'll call this onGeoSuccess.
| | 02:11 | The second is the error function that
will be called when something goes wrong
| | 02:15 | with trying to get location.
| | 02:16 | This will be called onGeoError.
| | 02:20 | Scroll to the bottom of the script block
and right below onDeviceReady, create a
| | 02:24 | new function onGeoError.
| | 02:27 | It takes one parameter, which is an error object.
| | 02:31 | So if we have an error, we want
to tell the user to turn on their
| | 02:37 | geolocation services.
| | 02:38 | Now we want to create the onGeoSuccess function.
| | 02:47 | Go to the exercise folder and open up
code-snippets.txt again, and select the
| | 02:53 | onGeoSuccess function. Copy that.
And in between onDeviceReady and onGeoError,
| | 03:01 | paste the new function.
| | 03:04 | The Success function takes a single
object, position, which will include the
| | 03:07 | latitude and longitude
of the geolocation object.
| | 03:10 | It is then going to set that
latitude and longitude object to a current
| | 03:13 | position, and this is the code that's
going to load Google Maps and display
| | 03:17 | the map on the screen.
| | 03:19 | Scroll to the top of the
page and add var lat, lon.
| | 03:23 | This will ensure that later in the course,
other parts of the application can access
| | 03:27 | latitude and longitude.
| | 03:29 | The last step is to go to the main.css file.
| | 03:33 | In the exercise folder, under the
css folder, double-click on main.css to
| | 03:38 | open it in a text editor.
| | 03:40 | And we're going to create a CSS rule for map.
| | 03:42 | We're going to give it a width of
100% and a height of 200px. Save that.
| | 03:54 | Save the changes to your index HTML file.
| | 03:58 | The next step is going to be to copy
what's in this directory into www
| | 04:02 | directory of your project.
| | 04:04 | Select all of these files, copy
them, and on the desktop, open up the
| | 04:11 | ios-project, or if you're following
along an Android or another platform, open
| | 04:15 | up the folder for that platform.
| | 04:17 | Go to the www folder, select everything
with Command+A or Ctrl+A, delete it, and
| | 04:24 | paste in the new files.
| | 04:28 | Go back and open up the
project in your native IDE.
| | 04:31 | In this case, I'll click on Xcode
project to open the iOS project in xcode.
| | 04:37 | When that's loaded, run the
application in your Simulator.
| | 04:41 | In the iOS Simulator and most other
emulators, you can change the location
| | 04:45 | dynamically by setting a
preset or adding a custom Location.
| | 04:50 | In our application when we click New
Note, it's not going to prompt us to allow
| | 04:55 | the application to use the user's location.
| | 04:56 | Click OK and now the location loads
in our Map and we can geotag this note.
| | 05:02 | Geolocation is one of the first great
examples of how mobile applications can
| | 05:06 | tie into device sensors to
create a custom user experience.
| | Collapse this transcript |
| Using the Camera API| 00:00 | One of the most common features
on mobile devices is the camera.
| | 00:04 | PhoneGap provides access to camera
data in a number of ways, including the
| | 00:08 | ability to access the photo as a
file or get the raw photo data if the
| | 00:12 | application needs or wants to modify it.
| | 00:15 | This video will cover how to add
camera functionality to an application.
| | 00:19 | The first thing we're going to do is
add the event listener by which we will
| | 00:24 | call the camera, and we're going to put that
in the pageinit function we created earlier.
| | 00:28 | To add the event listener add a jQuery
selector on addphoto, which is the ID of
| | 00:35 | the button that's going to invoke the camera.
Use the bind method and bind it to the tap event.
| | 00:41 | The tap event is a jQuery-mobile-
specific event, and it's often a lot better than
| | 00:46 | using the click event because tap
events are more efficient than click events.
| | 00:50 | The tap event is a jQuery-mobile-
specific event, which is specifically
| | 00:54 | targeted at mobile devices;
| | 00:56 | it's more efficient and faster
response time to use the tap event, so use it
| | 01:00 | whenever possible in lieu of the click event.
| | 01:03 | Second, create the function
| | 01:05 | that's going to hold the code that we
will call when the tap event fires.
| | 01:09 | The camera API introduces options which allow
you to customize how the API call will be made.
| | 01:15 | In this case, you want to
customize two options: the source type and
| | 01:19 | the destination type.
| | 01:21 | To do that we'll first to create an
object called options, and inside that object
| | 01:28 | we can specify what options we want to use.
| | 01:31 | We'll start with source type. Source type
| | 01:33 | lets you switch between using the camera
or using the photo library on the device.
| | 01:38 | For the purpose of this course,
we're going to set the source type to
| | 01:41 | Camera.PictureSourceType.PHOTOLIBRARY.
| | 01:49 | The reason for this is on the iOS
simulator we can't simulate the camera.
| | 01:53 | On Android and other platforms you can
simulate the camera, so feel free to use
| | 01:58 | camera here if you'd like.
| | 01:59 | The second one we'll use is
destinationType. destinationType lets you reference
| | 02:05 | the photo as a file on the
file system or as a data URL.
| | 02:09 | It can be handy to access it as a data
URL if you want to manipulate the pixels
| | 02:14 | and change how the image is going to appear.
| | 02:16 | But keep in mind, because of high-
resolution cameras on the device, using data
| | 02:21 | URL here could result in a very high
memory footprint, so I really, really
| | 02:25 | recommend that you use file URI
instead, which is what we're going to do.
| | 02:29 | We do that by setting
Camera.DestinationType.FILE_URI.
| | 02:37 | You can see the PhoneGap
documentation for a full list of camera options.
| | 02:41 | Next, let's use the camera API.
| | 02:44 | We do that by calling
navigator.camera.getPicture.
| | 02:51 | The getPicture method takes three parameters.
| | 02:53 | The first one is the function that will be
called when the camera call is successful.
| | 02:58 | The second is the function that will be
called if something happens and there's
| | 03:01 | an error with the camera call.
| | 03:03 | The third one are the options that we
just passed in that will help customize
| | 03:07 | the camera experience.
| | 03:09 | Let's call the first
parameter onCameraSuccess.
| | 03:14 | For the second one we'll use onError,
and the third one will be the options
| | 03:18 | object that we created above.
| | 03:21 | Now scroll down to the bottom of the
script tag and below on GeoError, create a
| | 03:27 | new function called onError.
| | 03:29 | And onError will take a message property,
which is just a string that returns
| | 03:35 | the error message to the user. So we can
show them that by saying alert, the message.
| | 03:41 | Next, scroll to just above the
onGeoError and create a new function. Call this
| | 03:48 | one onCameraSuccess.
| | 03:51 | This function is going to take an
image URI property, which is going to be a
| | 03:55 | string representation of where the
camera data is on the file system.
| | 04:01 | In the template above that we
created with Mustache.JS, we have an image
| | 04:05 | placeholder that will display the
image when it comes back from the camera.
| | 04:09 | So in this function we're going to set
the source attribute of that image to
| | 04:14 | the image URI that we get back from
the camera and we're going to make sure
| | 04:17 | that it's displayed.
| | 04:19 | We do that by adding a jQuery selector
to noteimage, which is the ID of that
| | 04:24 | image, and we'll use the attribute
method to change the source attribute to the
| | 04:29 | imageURI from the camera.
| | 04:33 | Next, we'll do the same selector,
but this time we'll change the CSS property
| | 04:39 | display to block, which is
going to show it on the screen.
| | 04:44 | The last step here is to go into
main.css and set some parameters for how the
| | 04:48 | image will display by default.
| | 04:50 | So go back to the exercise folders, click on
css, and open up main.css in your text editor.
| | 04:56 | Below the map selector, create a new one
for noteimage and set the width equal to
| | 05:03 | 200 pixels, the height equal to
200 pixels, and the display to none.
| | 05:10 | This is because we don't want the
user to see a broken image icon,
| | 05:14 | so we're going to just hide the image
until we've already created and set the
| | 05:17 | source. Make sure that's saved.
| | 05:23 | Go back to the main exercise folder
and copy all the files to the clipboard.
| | 05:29 | Next, go to the desktop
and open up the iOS project.
| | 05:33 | If you're following along with Android
or one of the other platforms, go into
| | 05:37 | that project for your platform, go into
www folder for your platform, select all
| | 05:43 | the things that are already there, and
either delete them or replace them with
| | 05:47 | the new objects by pasting over.
| | 05:50 | Next, go back to the main project file
and if you're following along on Xcode,
| | 05:55 | open up the Xcode project.
| | 05:56 | If you're using Android or one of the
other platforms, open the project in your
| | 06:00 | native IDE. Go ahead and open the
Simulator by running the project.
| | 06:07 | By default, most emulators and
simulators won't have anything in the photo
| | 06:11 | library that we can use, so we're
going to have to populate it ourselves.
| | 06:15 | On iOS, this is a fairly
straightforward process.
| | 06:18 | You'll have to double-check the
instructions for Android or your other platforms
| | 06:21 | for getting files into the photo
library for that specific platform.
| | 06:26 | If you're following along with iOS,
go to the exercise files and select
| | 06:33 | img27.jpg. Make sure you're on the
home screen of the simulator and drag the
| | 06:39 | image file to the home screen.
| | 06:41 | It will load that image file in the
browser. Click the Share button and click
| | 06:47 | the Save to Camera Roll button to
put that image in our photo library.
| | 06:50 | Now go back to the home screen and run
the project. Select New Note. It's going
| | 06:59 | to prompt us for our location again.
Select the Add Photo button and it will
| | 07:03 | bring up the photo library.
| | 07:06 | Notice we're using the native photo library UI.
| | 07:08 | This isn't something we had to create
custom. PhoneGap is using the same native
| | 07:12 | API, so it's going to use the same user
interface for selecting photos. Select
| | 07:18 | our save photo, and you'll see there
it is, rendering as part of our note.
| | 07:23 | The camera API gives you access to the
photos taken in that moment or the photo
| | 07:27 | library of the device.
| | 07:29 | It is an easy way to incorporate
user-created visuals into an application.
| | 07:33 | There are a number of options that we
will modify how the camera is called and
| | 07:37 | what kind of data is
returned to the application.
| | Collapse this transcript |
| Using the Storage APIs| 00:00 | Most mobile applications will want to
be able to store information offline.
| | 00:04 | PhoneGap offers two ways to store data,
and both track the W3C's web storage APIs.
| | 00:11 | The first lets developers use SQL
syntax to save information to a database that
| | 00:16 | can be called upon later.
| | 00:17 | The second uses a set of
name-value key pairs to store information.
| | 00:21 | Go ahead and open up the exercise
files in Sublime Text, and open index.html.
| | 00:27 | To use the storage APIs on Android,
you have to make sure that you request
| | 00:31 | storage permissions in the manifest file.
| | 00:33 | On iOS no permission is required.
| | 00:35 | The first thing we're going to do is
create some variables that we will need that
| | 00:39 | will give us access to the
database throughout the application.
| | 00:42 | So in the first line right below
your initial script block, create db,
| | 00:46 | dbresults, and itemindex.
| | 00:49 | In order to use this storage APIs,
you have to create a database that will be a
| | 00:55 | file on the device itself.
| | 00:57 | So scroll down to the onDeviceReady
event. Inside that event start with a
| | 01:03 | variable for the database, db, and
we're going to call window.openDatabase.
| | 01:10 | This is the function that's
going to create a file for us.
| | 01:14 | It takes four parameters.
| | 01:15 | The first is the name of the
database, and we'll call that Notes.
| | 01:19 | The second is the version of the database.
| | 01:22 | Go ahead and give that a version of 1.0.
| | 01:24 | The third is the display name for
the database, and call that Saved Notes.
| | 01:30 | Finally, set the size for the database.
| | 01:33 | This one won't require a large
database, so we'll do 200,000 bytes.
| | 01:39 | In order to perform transactions on the
database, you use the transaction method
| | 01:44 | on the database object.
| | 01:45 | So use db.transaction, and this
is going to take three parameters.
| | 01:51 | The first is going to be a function that will
contain the SQL calls that we are going to make.
| | 01:56 | Call this getDbNotes.
| | 02:00 | Second is the function that will be
called when an error happens with the
| | 02:04 | transaction. For this call onDbError.
| | 02:07 | And finally is the function that will be
called when the transaction is successful.
| | 02:13 | We'll call this onDbSuccess.
| | 02:17 | Notice that the order in the transaction
method is different from some of the other APIs.
| | 02:22 | In this one, the error comes
before the success callback.
| | 02:25 | Now, scroll down to the bottom of the
script tag, right below the onError
| | 02:30 | function, and we're going to
create our database error handler.
| | 02:34 | So create function,
| | 02:35 | call it onDbError, and it's
going to take a parameter of error.
| | 02:42 | When we hit an error we want to alert
the user to the issue, so we'll call the
| | 02:45 | alert tell them they have a Database
error and provide them with information
| | 02:51 | about the error message, like
printing out error.message.
| | 02:56 | Now, let's create the DB success method.
| | 02:59 | Scroll up to right below onCameraSuccess
and right above onGeoError, and create a
| | 03:06 | new function called onDbsuccess.
| | 03:10 | This function takes two parameters.
| | 03:12 | The first is the transaction.
| | 03:14 | The second is any results that may
come from the database transaction.
| | 03:18 | For this method we don't need to alert
the user that it's been successful, but
| | 03:22 | it's helpful to know from a
developer standpoint what's happened,
| | 03:24 | so use console.log and just leave the note
that says the Database call was successful.
| | 03:32 | To get DB notes is what's going to
contain the SQL statements that we want to
| | 03:36 | use to call against the database.
| | 03:38 | So, right below DeviceReady and above
onGeoSuccess, create function get DbNotes.
| | 03:46 | This takes one parameter, the
transaction, because we're going to write the SQL
| | 03:50 | statements to that transaction object.
| | 03:53 | We'll pass that in as tx.
| | 03:55 | To execute SQL statements, we use the
execute SQL method on the transaction.
| | 03:59 | So type tx.executeSql, and now we
can start typing our SQL statements.
| | 04:06 | For the first one, we're going to
create the table if it doesn't already exist.
| | 04:10 | We do that by using he SQL CREATE TABLE IF
NOT EXISTS, and we'll use the table name NOTES.
| | 04:19 | Then we'll give this table 5 columns:
| | 04:23 | notetitle, notedetail, imagesource,
notelat for note latitude, and notelon for
| | 04:34 | note longitude.
And finally, close the parenthesis.
| | 04:38 | The next SQL statement we want is going
to select any potential records from the
| | 04:42 | table so we can display those if
we've already saved notes offline.
| | 04:46 | To do this, we'll call executeSql
again on the transaction, and for the SQL
| | 04:52 | statement we're going to
call SELECT * FROM NOTES.
| | 04:57 | In this SQL statement we're also
going to pass some additional parameters.
| | 05:01 | In this case we're going to start with
an empty array, which would normally be
| | 05:05 | used if we want to pass
parameters into our SQL statement directly.
| | 05:09 | The third parameter is going to be the
function that gets called once the SQL
| | 05:13 | has executed successfully.
| | 05:15 | For this, we'll call
onSelectNotesSuccess, and finally, the function that will
| | 05:23 | be called if there's an error--and
for this you can reuse onDbError.
| | 05:29 | Once the notes have been selected
from the database, the goal is to display
| | 05:32 | those on the front page
as a list of saved notes.
| | 05:37 | Go ahead and go to the exercise files
and double-click on code-snippets.txt to
| | 05:41 | open it your text editor.
| | 05:45 | Select the onSelectNotesSuccess function and copy it.
| | 05:50 | Now go back to text main, and right below
the getDbNotes function, paste in this code.
| | 06:00 | This function also takes two
parameters: the transaction and results.
| | 06:04 | And the first thing that we're
going to do is save the results to the
| | 06:08 | global dbresults variable
| | 06:09 | so we can refer to it through
the rest of our application.
| | 06:13 | The second thing it does is sets the number
of results to a temporary length variable.
| | 06:18 | Then it loops through the length
variable, and for each record in the list it's
| | 06:23 | going to create an item in the list.
| | 06:27 | Finally, we call a jQuery function
listview "refresh" that's going to force
| | 06:31 | jQuery mobile to rerender
the list with our items.
| | 06:35 | The next step is to create the insert
statements so that we can save notes to he database.
| | 06:41 | Go back to the exercise files and
open up code-snippets.txt again.
| | 06:47 | Copy the savenote bind function
and go back to Sublime Text.
| | 06:56 | Scroll up to the pageinit function and
inside that function at the bottom,
| | 07:02 | paste the code from the snippets file.
| | 07:07 | This code is going to bind a tap
function to the savenote button, and when that
| | 07:12 | tap event happens, we're going to pull
the values from our forms and set those
| | 07:16 | to the notedata, so that we
can save them in the database.
| | 07:23 | Finally, we call a transaction on the
database that's going to save our note, and
| | 07:27 | we'll use the saveNote
function to create that SQL.
| | 07:31 | Open up the snippets file once
again by going to the exercise file and
| | 07:34 | double-clicking on code-snippets.txt.
| | 07:38 | Select the saveNote function and copy it.
| | 07:42 | Go back to Sublime Text and right below
onSelectNotesSuccess, paste the saveNote function.
| | 07:52 | For saveNote, we're going to call an
executeSql method on the transaction.
| | 07:57 | That executeSql method has the insert
SQL statement that we're going to use to
| | 08:02 | save the note to the database.
| | 08:04 | Notice here in the SQL statement
that we use question marks for values.
| | 08:08 | In this case we're going to replace those
question marks with an array of our notedata.
| | 08:14 | The next step is to make sure that when
we load an old note into the note detail
| | 08:17 | page that we will see the updated values.
| | 08:20 | Go back to the code-snippets.txt file
and copy the last code snippet, which says
| | 08:29 | newnote live "pagecreate," and copy that.
| | 08:34 | Go back to Sublime Text and
scroll up to the pageinit function.
| | 08:39 | We're going to select the old newnote
function where we introduced our Mustache
| | 08:44 | template, and we're going
to paste in the new value.
| | 08:51 | This function is going to first look at
itemindex to see if it's greater than 0.
| | 08:55 | If we click on a note, the code in
that link tag will set the itemindex so
| | 08:58 | that we know it exists.
| | 09:00 | After that, we're going to grab an
individual item based on the item index from
| | 09:04 | the database results that we saved.
| | 09:07 | Finally, we're going to pass in the
notedata from the results into the
| | 09:11 | notedata object that the mustache.js
template is going to use to parse and
| | 09:16 | load the application.
| | 09:20 | Finally, we have our original Mustache code
| | 09:23 | that's going to turn that into HTML
that we can insert into the DOM.
| | 09:29 | The last step is to make sure the image
shows up, and we have to do that within
| | 09:34 | the pageshow method.
| | 09:35 | So below the geolocation call, add an
if statement to see if the itemindex is
| | 09:40 | greater than or equal to 0.
| | 09:42 | If it is, we're going to use a jQuery
selector to call noteimage and change the
| | 09:50 | CSS property of display to block.
| | 09:54 | Go ahead and save index.html.
| | 09:57 | Now, the very last step is to
do a bit of visual cleanup,
| | 10:00 | so go into the exercise files and select
everything except for code-snippets.txt
| | 10:05 | and copy all those items.
| | 10:07 | Go to the Desktop, or wherever you are
keeping your projects, and double-click on
| | 10:11 | a project that you are using.
| | 10:13 | Go into the www folder and replace the
contents of that folder with the items just copied.
| | 10:19 | Now go back to the main part of the
project and open the Xcode project if you're
| | 10:26 | following along for iOS.
| | 10:27 | If you're following along for Android,
open the project in your native IDE.
| | 10:33 | Run the project in a Simulator,
create a new note, add some detail, add the
| | 10:48 | photo, and scroll down and click Save Note.
| | 10:54 | You'll see down in the console
that the call was successful.
| | 10:58 | Exit the application by clicking the
Home button or do whatever you need to
| | 11:01 | do on your platform.
| | 11:04 | Double-click the Home button to make
sure the application is closed, stop the
| | 11:10 | application, and run the simulator again.
| | 11:12 | There is the note, pulled from the
database, and clicking on it gives us the
| | 11:19 | details and the information
of the note that we have saved.
| | 11:22 | That provides you a look at how you
can save information to a database using
| | 11:25 | the localStorage APIs.
| | 11:27 | For more basic information you
can also use a localStorage API.
| | 11:32 | LocalStorage lets you use a set of
key-value pairs which you can create by doing
| | 11:36 | windows.localStorage.setItem.
| | 11:40 | You can then retrieve data either by
key or by index with a getItem call.
| | 11:46 | In general, the SQL APIs are good for
more complex data, while localStorage can
| | 11:51 | be handy if you have basic data
that you want to save very quickly.
| | 11:55 | That's a look at the two easy
ways to store information offline.
| | 11:58 | Both of these will persist so the next
time your application opens, all the data
| | 12:02 | stored will be saved and
ready for your users to use.
| | Collapse this transcript |
| Exploring other APIs in the PhoneGap documentation| 00:00 | We looked at some of the core APIs in
PhoneGap that you'll use when building
| | 00:03 | PhoneGap applications.
| | 00:05 | But there are also a lot of other
APIs that will come in handy while
| | 00:08 | working with PhoneGap.
| | 00:10 | The best place to get information
about those is the PhoneGap documentation,
| | 00:14 | which can be found at docs.phonegap.com.
| | 00:18 | The first thing to be aware of is in
the upper right-hand corner, you'll see a
| | 00:21 | version number for the PhoneGap documentation.
| | 00:24 | You can go back and look at old versions or
you can specify the version that you'd like.
| | 00:28 | You want to make sure that the version
of documentation you're looking at is the
| | 00:32 | version of PhoneGap that you're using.
| | 00:33 | Let's drill into this
specific API, the Contacts API.
| | 00:38 | The first thing you see is a
description of what the API does.
| | 00:41 | In this case the contacts object
provides access to the device contacts database.
| | 00:46 | Then you'll see an overview of the
methods, arguments, and objects that you'll
| | 00:50 | need for this application.
| | 00:52 | The first content you encounter when
using the documentation is permissions.
| | 00:56 | This shows the permissions that you'll
need to enable in the configuration file
| | 01:00 | or in your project for the different platforms.
| | 01:04 | Next, let's look the documentation for a method--
| | 01:07 | in this case the create method.
| | 01:08 | You get the information about what the
method does, the supported platforms,
| | 01:13 | because not all APIs are supported on
all platforms, as well as a quick basic
| | 01:17 | example of how to use the API.
| | 01:20 | That will follow with a full example
that will be a more robust pluggable
| | 01:24 | example that shows you how to use
the API and how to handle the events.
| | 01:30 | For some operations, you'll also get a
list of quirks for different platforms.
| | 01:34 | In some cases the APIs behave
differently on different platforms, and if they do,
| | 01:38 | those quirks or those differences
will be listed here in the API docs.
| | 01:44 | At the bottom, you'll see some of the
objects that you'll encounter when using the APIs.
| | 01:48 | For instance, the error objects will
have descriptions for what the properties
| | 01:52 | are, as well as some of the constants,
so when you get error codes, you can come
| | 01:56 | back to the API docs and see
what those error codes mean.
| | 01:59 | Let's take a look at some of the
other APIs that you'll find useful.
| | 02:03 | The Device API provides access to
information about the device, like the
| | 02:07 | platform, the model, or the name.
| | 02:09 | This information can be useful when
you're trying to create a customized
| | 02:12 | experience based on which device the user is on.
| | 02:17 | The File APIs give you full access to
the file system on the device and lets you
| | 02:21 | read and write files.
| | 02:24 | The Media APIs provide a way to
record and play audio on the device.
| | 02:29 | And finally, the Capture APIs provide
a robust way to hook into the video,
| | 02:34 | camera, and audio
recording features of the device.
| | 02:37 | Now that you've seen some of the
APIs hands-on and have seen how the
| | 02:41 | documentation is structured, you
should have enough information to extend the
| | 02:44 | application to do anything you like.
| | Collapse this transcript |
|
|
5. Compiling a PhoneGap ApplicationUse build.phonegap.com to compile binaries| 00:00 | One of the benefits of PhoneGap is that
it's possible to target multiple mobile
| | 00:03 | platforms with much of the same code.
| | 00:06 | Unfortunately, when doing that, it
can become time consuming to install and
| | 00:10 | use the native SDKs.
| | 00:13 | As a solution to that problem, Adobe
has a service called PhoneGap Build,
| | 00:16 | which will package PhoneGap
applications into multiple platforms without the
| | 00:21 | need for native SDKs.
| | 00:24 | To use PhoneGap Build, go to build.phonegap.com.
| | 00:28 | You can sign in with your
Adobe ID or with a GitHub account.
| | 00:32 | If you don't have an Adobe ID, you can
register for a free one by clicking the
| | 00:36 | Register button on build.phonegap.com.
| | 00:40 | Click Sign in and enter
your Adobe ID credentials.
| | 00:50 | PhoneGap Build has two
different ways to upload an application.
| | 00:54 | The first is by using a Git repository.
| | 00:57 | You can paste in the URL of the private
or open source GitHub repository and it
| | 01:01 | will create an application based on that code.
| | 01:03 | You can also upload a ZIP
file directly to PhoneGap Build.
| | 01:08 | Go ahead and go to the exercise
folder and you'll notice that we have a
| | 01:12 | couple of new files.
| | 01:14 | In the img directory I've
added icon and logo PNGs.
| | 01:17 | There is also a config.xml file.
| | 01:22 | Open the config XML file with
Sublime Text or your text editor.
| | 01:27 | PhoneGap Build uses the configuration
XML file to set some of the properties for
| | 01:31 | the application once it
is uploaded to the service.
| | 01:34 | In configuration, you can set the name,
description, author information, as
| | 01:40 | well as preferences.
| | 01:41 | We've been using PhoneGap 2.3, but
PhoneGap Build doesn't always support the
| | 01:46 | most recent version of PhoneGap, so in
this example we're going to use the most
| | 01:50 | recent version we can, which is 2.2.
| | 01:52 | I also we have a preference set for
webviewbounce, which is an iOS-specific
| | 01:57 | preference that makes sure the user
can't scroll the screen and bounce it.
| | 02:01 | Lastly, we can define icons and splash
screens here in the configuration file.
| | 02:07 | In this particular example, I've got
one for each, but config.xml supports
| | 02:11 | multiple sizes if you're creating an
application that needs to target multiple
| | 02:15 | devices or different form
factors like tablets and smartphones.
| | 02:18 | The PhoneGap Wiki has a couple of very
helpful resources for determining how big
| | 02:24 | your splash screens and icons
need to be for different platforms.
| | 02:31 | Go back to the exercise
folder and open up index.html.
| | 02:36 | One thing we should change is to
make sure that cordova JS is not
| | 02:38 | being referenced to a specific
operating system, so delete the .ios
| | 02:42 | and save index.html.
| | 02:44 | PhoneGap Build will just replace
whatever version of cordova you're using with
| | 02:48 | that cordova JS file.
| | 02:50 | Go back to the exercise files and select
everything in that folder and zip it up
| | 02:55 | using your built-in zip
functionality on your platform.
| | 02:59 | Name that ZIP file phonegap-build.zip.
| | 03:05 | Now go back to PhoneGap Build,
click the Upload a .zip file, and
| | 03:10 | select phonegap-build.
| | 03:11 | PhoneGap Build is going to take that
HTML, JavaScript, CSS and now package it
| | 03:18 | into an application.
| | 03:19 | Once it's finished, click
the Ready to build button.
| | 03:24 | Now, PhoneGap Build is going to start
the process of packaging an application
| | 03:27 | for all the platforms it supports,
which currently is iOS, Android, Windows
| | 03:32 | Phone, Blackberry, webOS, and Symbian.
| | 03:37 | You can also click on the application
name to get more information and change
| | 03:41 | some of the parameters.
| | 03:43 | We can see a list of the builds and the status.
| | 03:46 | And we can click on Settings to see
some of the settings that we've established
| | 03:50 | for our application.
| | 03:53 | There is the icon and there is
the app title and the package.
| | 03:59 | Notice we can't change these from
this screen because we're using the
| | 04:02 | configuration XML file.
| | 04:04 | If you don't use a configuration
XML file, you can make changes to your
| | 04:07 | application's configuration
here within PhoneGap Build.
| | 04:11 | In PhoneGap Build I can also define
collaborators, or people who can help me
| | 04:15 | test and deploy my application.
| | 04:17 | If I click on the Collaborators
section, I can add a collaborator via
| | 04:20 | their email address.
| | 04:21 | I can choose between two roles.
| | 04:23 | The Tester role gives the user
access to download the application, or a
| | 04:28 | Developer who can make changes and
upload new versions of my application.
| | 04:32 | I can also update the code by clicking
the Update code button, and I can just
| | 04:36 | send a new ZIP file which will
replace the old code with my new ZIP file.
| | 04:40 | Finally, I could also choose whether
people can download this application
| | 04:44 | without being approved collaborators.
| | 04:46 | If this is not checked then anyone who
has the URL can download the application
| | 04:51 | and install it on their phones.
| | 04:52 | Throughout the application I
always have access to the QR code.
| | 04:56 | This QR code links to a page where I can
download the binaries for each platform.
| | 05:01 | You can use your smartphone or other
device that supports barcode reading to go
| | 05:04 | directly to that URL and
download the application on your phone.
| | 05:09 | You will notice that iOS currently has an error.
| | 05:12 | Some platforms require me to sign my
application before I can create a binary.
| | 05:17 | To sign the application go through the
signing process for your platform then
| | 05:21 | select the Key dropdown and click add a key.
| | 05:25 | Here you can upload the key so you
can associate that with the application.
| | 05:30 | PhoneGap Build lets you target multiple
mobile platforms for the same application.
| | 05:34 | You can upload your application as
well as configure it and PhoneGap Build
| | 05:37 | handles the packaging for you.
| | 05:39 | In the end you have the binaries for the
major mobile platforms and you can take
| | 05:43 | these binaries and put them on
various app stores and marketplaces.
| | Collapse this transcript |
| Installing a binary on a device for testing| 00:00 | Once you're ready to deploy to a
device for testing, there are a couple of
| | 00:03 | ways you can do so.
| | 00:05 | One is to use the native tools for the platform.
| | 00:08 | For IOS and Android there are a
couple of great courses here in lynda.com
| | 00:13 | online training library.
| | 00:15 | I suggest chapter 1 and 2 from iOS
Essential Training, with Simon Allardice.
| | 00:21 | For Android, I suggest Android App Development
with Java Essential Training, with Lee Brimelow.
| | 00:27 | You'll find helpful information in chapter 13.
| | 00:31 | Secondly, you can use
PhoneGap Build to create binaries.
| | 00:35 | To use PhoneGap Build to log in to the
service. This is the application we used
| | 00:40 | when we first introduced PhoneGap Build.
To deploy to some platforms you need to
| | 00:44 | go through the signing process.
| | 00:46 | I'm going to going to use IOS as an
example because it requires a signed
| | 00:49 | certificate before it can
create a compiled binary.
| | 00:52 | But the steps are the same for
other platforms but require keys
| | 00:56 | during distribution step.
| | 00:57 | Click in the red iOS button. Next to iOS,
| | 01:03 | you'll see No key selected.
Select that drop down and click on Add a Key.
| | 01:10 | In order to submit a key to PhoneGap
Build, it needs to be in the p12 format.
| | 01:15 | For your platform you may have to
see how to convert the key to p12.
| | 01:19 | For iOS and MacOS 10, go to the
Keychain, select Keys, and then select the key
| | 01:28 | with the developer certificate.
| | 01:29 | I'll have an arrow next to it.
Right-click the developer certificate and
| | 01:34 | select Export. You'll get a dialog box
where you can save the exported key. Call
| | 01:41 | it ioscert, and save it to the Desktop.
| | 01:46 | Make sure the file format is
the p12 format and click Save.
| | 01:50 | You'll have to enter a password for
the key, and you'll have to remember this
| | 01:53 | password when you build for PhoneGap.
So you'll want to make it something you can
| | 01:59 | remember or write it down so can keep it later.
| | 02:01 | You'll be prompted to enter the
password for your user or computer, and then
| | 02:08 | the p12 certificate will save to the desktop.
Close Keychain Access, go back to PhoneGap Build,
| | 02:16 | and enter a title for this particular
Key. I'll call it iOS Developer Key. Under
| | 02:23 | the certificate p12 file, click the
box, go to the Desktop, and select your p12
| | 02:29 | file. Do the same for the provisioning profile.
| | 02:34 | I've gotten this provisioning
profile from the iOS Developer portal.
| | 02:37 | You'll have to make sure and grab yours
and download it to somewhere where you
| | 02:41 | can save it to PhoneGap Build.
| | 02:42 | Once you've submitted the p12 file and
the provisioning file, submit the key.
| | 02:49 | PhoneGap will prompt you to unlock the
iOS Developer Key, so use the password
| | 02:53 | that you set when you created the p12 file.
| | 02:56 | You could also choose to
set it as your default key.
| | 02:59 | PhoneGap Build will store your developer
keys for one month unlocked. After that
| | 03:03 | one month you will have to enter the
password again. Submit key and the iOS
| | 03:07 | platform will start to build
along with the rest of the platforms.
| | 03:12 | Once iOS has Built successfully, you
can use a barcode scanner on your phone to
| | 03:17 | go to the QR code and download the application.
| | 03:20 | One thing to make sure always clicking
on settings, and make sure that Only
| | 03:24 | approved collaborators is unchecked, so
that anyone who has the URL, or in this
| | 03:28 | case the QR code, can
download and test the application.
| | 03:32 | The other option is to keep this
checked and before you can download it to your
| | 03:35 | phone, you'll be prompted to log in
to PhoneGap Build on your device.
| | Collapse this transcript |
|
|
6. Extending PhoneGapIntroduction to PhoneGap plugins| 00:00 | While PhoneGap has a lot
of functionality built-in,
| | 00:03 | there are a number of plugins that let
developers extend PhoneGap's core feature set.
| | 00:07 | These plugins provide native code as
well as JavaScript, and work seamlessly
| | 00:11 | within PhoneGap applications.
| | 00:13 | PhoneGap Includes support for most of
the common device APIs and features,
| | 00:17 | things like geolocation, camera--all
things that are common across most of
| | 00:21 | the device platforms.
| | 00:23 | In some cases there are platform-
specific features or other functionality that
| | 00:27 | isn't supported widely enough to ship
by default with PhoneGap. A good example
| | 00:31 | is the gyroscope on iOS.
| | 00:34 | iOS is the only platform with gyroscope
support, so there is a plugin for IOS
| | 00:38 | that supports gyroscopes.
| | 00:39 | For these cases, PhoneGap includes an
extension API so developers can write
| | 00:44 | their own plugins.
| | 00:45 | A PhoneGap plugin is simply a set
of native code that ties into native
| | 00:49 | functionality on the device, as well as
a JavaScript file that exposes that
| | 00:53 | native code through to the PhoneGap application.
| | 00:56 | So even when developers are using
plugins, they are still only running
| | 01:00 | JavaScript don't have to worry
with native code behind that gives the
| | 01:04 | plugin functionality.
| | 01:05 | Because of this, plugins are platform-
specific; that means the same plugin
| | 01:09 | won't work on iOS as on Android.
| | 01:11 | So if you going to use plugins you need
to make sure that the plugin is going to
| | 01:16 | be available for all
platforms you want to target.
| | 01:18 | One example of why you would want
to use plugins include native SDKs.
| | 01:22 | Companies like Twitter and Facebook
spend a lot of time releasing native SDKs
| | 01:26 | that hook into their services.
| | 01:28 | With PhoneGap plugins you can use
those native SDKs, but then expose them
| | 01:33 | through JavaScript. So you get all
the same functionality within your
| | 01:36 | PhoneGap application.
| | 01:37 | There is a library of PhoneGap
plugins available on Github.
| | 01:41 | If you go to the PhoneGap Repository,
under PhoneGap plugins, you'll see a
| | 01:45 | folder for all the major
platforms that PhoneGap supports.
| | 01:49 | Within those folders are specific
plugins that are written with the native
| | 01:52 | code and JavaScript
interfaces for those devices.
| | 01:56 | The PhoneGap core API is focused on features
that are generally common to all platforms.
| | 02:01 | Plugins combine native code with
JavaScript to provide developers access to
| | 02:05 | some additional features on the
device that are platform-specific.
| | 02:08 | Plugins are written for specific
operating systems, so in order to use them,
| | 02:12 | developers need to get the plugin
for every platform being targeted.
| | Collapse this transcript |
| Using a plugin| 00:00 | A great example of when to use
plugins is dealing with the Keychain on iOS.
| | 00:05 | It's generally not secure to store
sensitive information like passwords inside of
| | 00:09 | local storage, because
local storage isn't secure.
| | 00:13 | iOS has a keychain
specifically for that purpose.
| | 00:16 | It's a secure encrypted database
that can only be accessed via its API.
| | 00:21 | Luckily, there is a PhoneGap plugin
that exposes the API to JavaScript, so
| | 00:26 | PhoneGap developers could
access the iOS keychain.
| | 00:30 | Android also includes a secured keychain,
but at this time there's no plugin for it.
| | 00:35 | The steps to install these plugins will
be generally the same across platforms,
| | 00:38 | though I am going to use iOS.
| | 00:41 | In this case I'm going to
download the Keychain plugin on GitHub.
| | 00:45 | Just click the ZIP file to
download the source for the plugin.
| | 00:50 | As of 2.3 PhoneGap, has introduced a
standard for creating and managing plugins
| | 00:55 | using a plugin.xml configuration file.
| | 00:58 | The process for installing these plugins
is easy, but requires a few steps to set up.
| | 01:03 | The first step is to
download and install Node JS.
| | 01:08 | We hit nodejs.org, click the Install button.
| | 01:12 | It should download node for your platform.
| | 01:14 | If you need other platforms,
you can click the Downloads link.
| | 01:17 | It will show you all the
platforms that node.js is available for.
| | 01:22 | Go to the location where you
downloaded node JS. Double-click on the Package
| | 01:28 | and start the install process.
| | 01:30 | In addition to node JS, it's also going
to install a package manager called npm.
| | 01:35 | We are going to use this package
manager so be aware of the install location
| | 01:39 | while node JS is installing.
| | 01:43 | Walk through the install process, and
when it's finished, remember to keep in
| | 01:51 | mind where npm is installed.
| | 01:55 | The next step is to download
plugman, plugman is available at
| | 01:58 | github/imhotep/pluman, and it's going
to help us manage PhoneGap plugins.
| | 02:04 | Click on the ZIP link to
download the source code for plugman.
| | 02:10 | Once it's downloaded, go to the
install location and extract both plugman and
| | 02:16 | the KeychainPlugin.
Then open up a Terminal window.
| | 02:21 | To install plugman we are going to use
npm. Browse to the directory where you
| | 02:26 | extracted plugman, and type sudo npm -g
install. And that will install plugman,
| | 02:36 | so you can use it from any directory.
| | 02:38 | The next step is to install the
plugin we want to use into our project.
| | 02:42 | If you go to the exercise files on the desktop,
in 6.2, you'll see a plugin-iOS-desk project.
| | 02:51 | We want to copy this project
and paste it onto the desktop.
| | 02:57 | In general, Xcode projects don't like
spaces in their folder structure, so it's
| | 03:01 | best to put the project in a place
where there's no spaces. Go back to the
| | 03:05 | Terminal window and go
into the project directory.
| | 03:11 | Now, the way to use plugman is first to
specify the platform, then tell plugman
| | 03:16 | which project you want to install the
plugin into, and finally, tell it which
| | 03:21 | plugin you want to install.
| | 03:22 | In this case, we will type plugman--
platform ios --project, is the directory we
| | 03:31 | are in now, so just . And finally,
--plug in and the location of the
| | 03:38 | KeychainPlugin, which for me is
Downloads/KeychainPlugin-master. Then push Return
| | 03:46 | and its going to install
the plugin into that project.
| | 03:51 | You can close Terminal, go into the
plugin-ios-project on your Desktop, and
| | 03:58 | double-click on ios-project.xcode.
| | 04:00 | When Plugman install out plugin, it
created the keychain.js file for us and it
| | 04:08 | also added the plugins to the plugin directory.
| | 04:12 | In addition, it added Keychain to our
configuration XML file, so they will able
| | 04:18 | to use it from our PhoneGap application.
| | 04:20 | Go to of the exercise files,
double-click on www, and open up index.html.
| | 04:28 | This project is a very basic
project that uses jQuery mobile.
| | 04:31 | We have a text input for password and
we have two buttons, one that's going to
| | 04:36 | savepassword and the other that's
going to getpassword back for us.
| | 04:40 | The first step is to make sure
keychain.js is part of our application, so we
| | 04:45 | will add that to the script block,
keychain.js, and close the script tag.
| | 04:55 | The next step is to create two event
handlers for the savepassword button and
| | 04:58 | the getpassword button.
| | 04:59 | So, do that using jQuery syntax and say
savepassword. And in this case we are
| | 05:08 | going to bind it to the click
event and create a function.
| | 05:11 | We will do the same thing for getpassword:
bind it to a click event and create a function.
| | 05:21 | Now, to use the plugin after we have
made sure that keychain.js is part of our
| | 05:26 | script tag, we also need to
create a variable reference for it.
| | 05:29 | Do this by going to the top of
the script block and saying var kc =
| | 05:33 | cordoba.require, and the
path to the plugin is going to be
| | 05:39 | ("cordoba/plugin/keychain").
| | 05:40 | Now that we have our reference,
we can start writing against the KeychainPlugin.
| | 05:48 | Then in the savepassword function, type
kc for our keychain, and we are going to
| | 05:56 | use the method setForKey.
| | 05:57 | setForKey takes a number parameters.
The first one is the function that will be
| | 06:03 | called and when we successfully save
something to the keychain, and we will
| | 06:06 | call this onKeySuccess.
| | 06:07 | The second one is what will happen when
something errors out and isn't successful.
| | 06:14 | We will call that onKeyError.
| | 06:17 | Next, we set the name of the key that
we are going to store, and we will call
| | 06:23 | this ("examplekeyname"). Next is the
name of the service that's going to be
| | 06:28 | associated with this key, in this case
exampleservice. And this so that you can
| | 06:33 | store multiple keys per service.
| | 06:36 | Finally, we have to pass in the
password that we want to save in the key store.
| | 06:41 | To do this I'll use a jQuery selector to
get the value of the password text box.
| | 06:48 | The next step is to create the
function for the getpassword button, so go
| | 06:53 | into that function block, type kc for
the Keychain, and the function we are
| | 06:57 | going to use is getForKey.
| | 06:59 | getForKey takes four parameters.
| | 07:02 | The first one is the success
call, which will be onKeySuccess.
| | 07:07 | The second is our error function,
onKeyError. And then we pass in the name
| | 07:13 | of the key and the name of the service.
In ours this is examplekeyname and exampleservice.
| | 07:22 | The last step is to create our two event
handlers, so go to the bottom of the
| | 07:27 | script block and type function
onKeySuccess. And this takes one parameter, just
| | 07:33 | to (success) object. And that's going to
be a string, so we can alert the user by
| | 07:40 | passing it into an alert function (success).
| | 07:43 | Second, we want to create the error
function, so function onKeyError, and that
| | 07:50 | also takes one parameter, an (error)
string which we can alert back to the
| | 07:55 | user. Save this and go back to your
xcode project, double-check to make sure
| | 08:04 | that everything got changed, make sure
the simulator is selected, and run this
| | 08:11 | project in the simulator.
| | 08:12 | Now we can type in our password and when
we are finished, we will click the Save
| | 08:25 | Password button, get the OK that
we've been successful, and we can click Get
| | 08:31 | Password to get back our password string.
| | 08:34 | One of the handy things about using the
Keychain is this data will even persist
| | 08:40 | after the application has been deleted.
| | 08:42 | If I delete the application and then
run it again, and simply click to Get
| | 08:54 | Password button, it's going to retrieve my
password using the keyname and the servicename.
| | 09:00 | The Keychain plugin provides a great
example of how you can blend native
| | 09:03 | functionality and expose that to
PhoneGap in JavaScript and HTML.
| | 09:07 | The Keychain plugin provides a perfect
example of why you would want to expose
| | 09:11 | more native functionality to PhoneGap.
| | 09:13 | By leveraging plugins, you can create a
deep mobile experience without having to
| | 09:17 | leave HTML, JavaScript, and CSS.
| | Collapse this transcript |
|
|
7. Testing and Debugging an ApplicationWEb Inspector REmote (weinre) basics| 00:00 | Debugging is arguably the most
important thing that developers need to be able
| | 00:04 | to do when creating applications.
| | 00:06 | And when building mobile applications,
nothing comes close to testing and
| | 00:09 | debugging on the device
for getting real-world data.
| | 00:13 | When using PhoneGap, developers can use
weinre, or WEb Inspector REmote, to test
| | 00:17 | and debug content directly on the device.
| | 00:19 | Weinre is built on top
of Google Developer Tools.
| | 00:23 | So if you've used the tools in
something like Chrome, you'll be very
| | 00:26 | familiar with the interface.
| | 00:27 | Weinre act as a server, and when the
device connects to it, it exposes the
| | 00:31 | Developer Tool features
to that connected device.
| | 00:34 | Because of this, you need to make sure
that the device can access the computer
| | 00:38 | that weinre is running on.
| | 00:40 | To get weinre, the first
step is to download node JS.
| | 00:43 | Once node JS has been
installed, open a Terminal window.
| | 00:47 | On Windows open a command prompt.
| | 00:49 | On Mac, you should be able to type
npm and use the node package manager.
| | 00:54 | On Windows, you have to browse to
the location where you installed npm.
| | 00:58 | Type sudo npm -g install weinre.
| | 01:04 | The sudo command is something
you'll only need on Mac, and it gives you
| | 01:07 | administrative access to
the command you're running.
| | 01:09 | On Windows, ignore sudo and
just type npm -g install weinre.
| | 01:15 | Push Enter, type your user password,
and npm will go out and grab all the
| | 01:20 | packages that are needed for weinre.
| | 01:22 | Now you can just type
weinre to start the server.
| | 01:25 | The server will start at localhost port 8080.
| | 01:29 | Browse to localhost port 8080 and
you'll see the web inspector remote website.
| | 01:34 | This site has all the information
you need about how to use weinre.
| | 01:38 | The two most important pieces are the debug
client user interface and the target script.
| | 01:44 | The way weinre works is you take the
script tag and you add that to your
| | 01:48 | PhoneGap application, you load the
debug client user interface, and then when
| | 01:52 | your PhoneGap application connects to
it, you'll be able to debug and perform
| | 01:56 | remote functions on the device.
| | 01:58 | Copy this script tag and open a
window to the debug client user interface
| | 02:02 | by clicking the link.
| | 02:04 | Now go to the Desktop where
we have our PhoneGap projects.
| | 02:07 | Select the platform that you've been working on.
| | 02:09 | I'm going to select iOS, but this will
work for any of the platforms that you've
| | 02:12 | been following along with.
| | 02:14 | Open the project in your native
editor and when it loads, open index.html.
| | 02:22 | Right after the Google Map style sheet
push Return and insert the script tag,
| | 02:26 | save the document, and run the simulator.
| | 02:35 | When the application loads, hide Xcode
and go to the browser where you have the
| | 02:41 | debug client interface running.
| | 02:43 | If the target is in green, that
means everything working correctly.
| | 02:46 | Normally, this will be running on the
device itself, so you'd be holding the
| | 02:50 | device in one hand and you
can inspect on your machine.
| | 02:54 | Example, we're going to resize the
browser and we're going to have the simulator
| | 02:57 | side by side, so we can see what's happening.
| | 03:00 | To use weinre, first click on the Elements tab.
| | 03:03 | This will give you a snapshot of all
the HTML that's running on the device.
| | 03:07 | As I hover over HTML elements, those
elements will be highlighted on the device.
| | 03:18 | I can drill down and I can
get more and more granular.
| | 03:21 | Within weinre, I have the ability to
change content on the device dynamically.
| | 03:25 | So in this span class, I can double-
click on New Note and I can change this to
| | 03:29 | Add New Note, to see how that looks.
| | 03:33 | I can also change CSS properties.
| | 03:34 | If I wanted to see how this font
looked in a different color, say red, I can
| | 03:40 | double-click the color property and
change the color to red, and it will update
| | 03:46 | automatically in weinre.
| | 03:48 | I can also see the resources that are
used-- there is the Notes database--and I
| | 03:54 | can see things that happen in the
console, like console log events, and I could
| | 03:58 | even run my own console commands.
| | 04:00 | So for instance, if I want to see the
output of the jQuery selector that's
| | 04:04 | going to pull the New Note page, I
can just say console.log, use the jQuery
| | 04:10 | selector for newnote, push Enter, and it's going
to bring back the console log for that element.
| | 04:18 | Weinre lets developers debug
and test content on the device.
| | 04:23 | Using weinre makes it possible to see
the console output, change CSS on the
| | 04:27 | fly, and execute JavaScript directly
on the device in the context of a
| | 04:31 | running application.
| | 04:32 | It is a vital tool for anyone
building PhoneGap applications.
| | Collapse this transcript |
| Testing the application in the Ripple emulator| 00:00 | Blackberry offers a Chrome extension
that helps debug PhoneGap applications in
| | 00:04 | the browser called Ripple.
| | 00:05 | Using Ripple, you can emulate
device-specific features in the browser.
| | 00:09 | Normally, Ripple works best if you are
hosting your content on the server, which
| | 00:13 | could be a local server on your computer.
| | 00:15 | But with just a bit of extra work, you can
also use Ripple with a file on the file system.
| | 00:21 | Start by opening up Chrome
and go to the Extensions menu by
| | 00:24 | clicking Window > Extensions.
| | 00:27 | The first thing you'll have to do is
allow access to file URLs in Ripple.
| | 00:31 | Now close Chrome and open up a Terminal window.
| | 00:34 | We're going to open chrome from the
command line, giving it a special switch that
| | 00:38 | enables file access to files.
| | 00:41 | This is how the command looks on Mac.
| | 00:43 | The switch that we're going to use is
the --allow-file-access-from-files switch.
| | 00:48 | On Windows your location for chrome will be
different, but the switch will be the same.
| | 00:53 | Push Enter and it will
load Chrome with that enabled.
| | 00:58 | Next, go to exercise files and
double-click on folder 07_01, then drag
| | 01:04 | index.html to the browser.
| | 01:08 | When that loads, in the upper right-
hand corner, click the blue Ripple icon and
| | 01:13 | say Enable Ripple Mission Control.
| | 01:17 | The first thing you'll have to do is
accept the EULA, and then you'll be brought to the
| | 01:21 | screen or you can start emulating
device features from the browser.
| | 01:25 | From the Ripple emulator, I can change
the device, so I can see how the device
| | 01:29 | will look on, say, an iPhone4. I have
information that's being pulled from the
| | 01:34 | configuration file, so the icon and the name,
| | 01:37 | and on the right side, I have
access to some device-specific settings.
| | 01:41 | At the bottom, I can see device-specific
events, like deviceready or button events.
| | 01:48 | It's also going to validate my
configuration file so I can see if I have anything
| | 01:52 | in the configuration file that's not valid.
| | 01:55 | And near the top, I can start to tweak
some of the device-specific settings, like
| | 01:59 | the network status or geolocation.
| | 02:03 | In this case the geolocation is currently
set to Waterloo, which is where RIM is based.
| | 02:09 | So if I click New Note in my application,
it's going to pull the geolocation for
| | 02:13 | that Waterloo location and geotag
my note with the location from Ripple.
| | 02:17 | The Ripple emulator is a fantastic tool,
| | 02:19 | and you can use it for your
PhoneGap applications, even if you're not
| | 02:22 | targeting Blackberry.
| | 02:23 | It provides access to device features
in the browser so is a quick and easy way
| | 02:28 | to test some of that functionality
before deploying it to a simulator or device.
| | Collapse this transcript |
| Testing and debugging with PhoneGap Build| 00:00 | PhoneGap Build includes a hosted
version of weinre called debug.phonegap.com.
| | 00:05 | This allows developers to use weinre
without setting up their own server and
| | 00:09 | making it accessible to the device.
| | 00:11 | Applications built with
PhoneGap Build can be configured to
| | 00:14 | use debug.phonegap.com.
| | 00:16 | If you prefer not to use PhoneGap Build,
you can also use debug.phonegap.com by itself.
| | 00:22 | Simply put your browser to
debug.phonegap.com and you'll see a very simple
| | 00:28 | Getting Started screen.
| | 00:30 | The first thing you will have
to do is select a unique ID.
| | 00:34 | This is because debug.phonegap.com is
available to anyone on the Internet.
| | 00:38 | For my ID I'll use ryan12349876.
| | 00:42 | To use this I'll first click this link
to start debugging, and I'll go ahead and
| | 00:47 | open this in a new tab
| | 00:48 | because I'm going to select this script
source, copy it, and I'm going to paste
| | 00:55 | this into my PhoneGap application project.
| | 00:57 | To do that I'll go to the desktop.
| | 00:59 | I'm going to double-click on the ios-project.
| | 01:00 | The steps will be the same for whichever
platform you're following along with, so
| | 01:05 | just open up your native
platform project in the native IDE.
| | 01:08 | I'll double-click on xcodeproj.
| | 01:12 | This should be the same application
| | 01:13 | we just looked at for using weinre
as a local server on our machine.
| | 01:18 | So to use debug.phonegap.com, all I have
to do is select the script, which is on
| | 01:23 | line 16, and paste the new version that
references debug.phonegap.com instead
| | 01:28 | of a local host weinre version.
| | 01:30 | Save the script, make sure you're
running in the Simulator or whichever
| | 01:33 | environment you plan on
using this on, then click Run.
| | 01:39 | Now, switching back to debug.phonegap.com,
we can see that our device is listed.
| | 01:44 | Now I want to see this debug
interface and the simulator at the same time,
| | 01:48 | so I'll make this window smaller.
| | 01:50 | Now when I select the Elements panel,
I can highlight elements in the simulator,
| | 01:57 | drill down, and change content in
the same way that I changed it before.
| | 02:09 | Since debug.phonegap.com runs over the
Internet, I don't need to have a weinre
| | 02:13 | server running on my machine
that my device can connect to.
| | 02:17 | One thing to be aware of, since this is
going through the Internet, is that you
| | 02:20 | may see a delay when you try to
change properties or inspect the phone.
| | 02:24 | But in general, this is a quick and
easy way to start using weinre from any
| | 02:28 | device in any computer.
| | 02:31 | We also have weinre support
included within PhoneGap build.
| | 02:37 | If you go to build.phonegap.com,
sign in, and select your application, in the
| | 02:43 | Settings menu you'll have
the option to enable debugging.
| | 02:48 | When you enable debugging you don't
have to manually put the script file that
| | 02:51 | points to the weinre server in your project.
| | 02:54 | PhoneGap Build will
automatically do that for you.
| | 02:57 | Save that setting and it will prompt a
rebuilding, so all the versions of your
| | 03:01 | application will now have debugging
enabled and when you install them on your
| | 03:05 | device, you can use the debugging portal
to go and remotely inspect the content.
| | 03:11 | To debug my device I click on the debug button
here, and that's going to take me to the portal.
| | 03:17 | Notice I have a unique ID there that's
being generated by PhoneGap Build.
| | 03:21 | Go back to PhoneGap Build and using a
phone, you can take a picture of the QR code,
| | 03:27 | go to the URL, and install
the application on your device.
| | 03:30 | Make sure that if you're using Android,
you allow installation of applications
| | 03:34 | from sources other than a play store.
| | 03:36 | Once your application is installed
and running, tab back over to the weinre
| | 03:40 | control panel and you'll see your device list.
| | 03:44 | You can use all the same functionality
that you can use with weinre, but now it's
| | 03:47 | running remotely on your device, so you
can test and debug on the device itself.
| | 03:52 | debug.phonegap.com provides a hosted
solution for debugging applications using weinre.
| | 03:57 | Applications using PhoneGap Build can
be configured to use this cloud service
| | 04:01 | and somewhat automate the process of
getting the application set up for weinre.
| | Collapse this transcript |
|
|
ConclusionWhere to go from here| 00:00 | PhoneGap provides an amazing
opportunity for web developers to create
| | 00:04 | mobile applications.
| | 00:05 | It blurs the line between web
technologies and device features.
| | 00:09 | There are a number of great resources
available for you to use to take the next
| | 00:13 | steps with PhoneGap.
| | 00:14 | The first is phonegap.com, which is where
you find all the up-to-date information
| | 00:19 | about what's happening with PhoneGap.
| | 00:20 | Second, I encourage you to look
at the docs, at docs.phonegap.com.
| | 00:27 | This will have all the information
about how to use the APIs, as well as some
| | 00:31 | great getting-started
guides for all the platforms.
| | 00:36 | Next is the PhoneGap blog.
| | 00:38 | Here you'll find out about community
events, potentially where the PhoneGap
| | 00:41 | developers will be at conferences, and
also news about release announcements.
| | 00:47 | Make sure to follow the
PhoneGap team on Twitter.
| | 00:50 | If you're looking for help with a
technical question, the PhoneGap Google Group
| | 00:53 | is a great way to get a response.
| | 00:57 | Finally, I encourage you to check out
the Apache Cordova project, which is the
| | 01:01 | open-source project behind PhoneGap.
cordova.apache.org has all the information
| | 01:06 | you need about the project.
| | 01:08 | It also includes a link on how to contribute,
| | 01:10 | so you can get involved in the
PhoneGap project from the start.
| | 01:13 | I look forward to seeing what you
build, and thank you very much.
| | Collapse this transcript |
|
|
