Phone Gap Chapter 4: Plugins
Cross-Platform Mobile App Development
CpSc 215
An aside on JQuery stacked pages
- These are really just divs within a single page.
- jump from one to another using internal (#) links
- JQuery makes them look like separate pages.
- You can still have actual separate pages that are linked in the normal way. They would all be in your project’s www folder. (Or a combination of both.)
To date
- Reviewed HTML and JavaScript
- Learned a lot of CSS and probably a bit more JS
- Implemented web pages with a goal of having them work on small screens
- Implemented our first actual mobile app
Plugins
Any web page or any of the sample games can be turned
into a mobile app by redesigning "for mobile"
it is mostly about screen size and look & feel (user interface stuff).
But to use the features of the device – camera, accelerometer, … -
we need a way to reach them from our (essentially) browser app.
That’s a plug-in.
Plugins
- give us a specific set of function calls (an API, or Application Programmer Interface)
- allow us to work with some aspect of the device.
- each plugin does its own small part, say camera access.
- you do not have to include the part about the accelerometer
(and everything else), just the camera
- we want small apps
- every plugin will increase the size of your app
- unfortunately,ch plugin will give us a specific set of function calls (an API, or Application Programmer Interface) to allow us to work with some aspect of the device. Each does its own small part, say camera access. That way, you have to include the part about the accelerometer (and everything else), just the camera – we want small apps. (Every plugin will increase the size of your app.)
Unfortunately, there are often several (say camera) plugins to choose among. My best advice is to treat the choice like selecting a clock app for your phone – how many downloads have there been and how many people seem to like it.
there are often several (say camera) plugins to choose among
- My best advice is to treat the choice like selecting a clock app for your phone
- how many downloads have there been?
- how many people seem to like it?
Examples
The author lists ~18 plugins starting on p. 53.
Let’s consider
- Device API – using this, your app would discover that my device is a
Samsung SM G930V. That would tell you my screen resolution (and much more).
Your app can work differently on different kinds of devices
(although actually doing that is beyond the scope of this course).
- StatusBar API – control the style and whether or not the status bar shows while using your app.
- InApp Browser API – (I had to toss this in.) Allows you to use links in your app without leaving your app.
Installing, removing, and listing plugins using the CLI
- If you are using Build or Desktop, you typically only have to specify the plugin in your project’s XML file before you use it.
- Installation is done for you.
- More commands needed (and perhaps plugman) to compile and run your CLI app.
Using the Device API
This is just a simple "can I get to the device" example.
You would never actually query and print this information,
though you might use it in your app.
As usual, both the Build & Desktop approach is simpler.
- check out plugins in the Build docs: http://docs.phonegap.com/phonegap-build/configuring/plugins/
- I tried to find a simple Device info video, with no luck.
Everyone wants to jump to the more interesting camera as a first demo – that’s coming up for us.
- This video emphasizes how easy plugins are with Build: https://youtu.be/RAxibkNZpI4
-
Actually doing the device info example using Build & Desktop.
http://docs.phonegap.com/plugin-apis/ https://github.com/apache/cordova-plugin-device
- Create a Desktop app using Helloworld
- Note that you should change the name of the app and use a different id than you did in the Hello World app
- As soon as you complete this step, you can start debugging using a browser set to display like a mobile device.
- Delete www/js/index.js
- This dealt with the device ready event. We are going to put that in (a script in) index.html
- Edit www/index.html to match author’s example (important – remove the index.js call & function, replacing with author’s JS code)
- Edit the code as directed in Steps 5, 6, and7 of your book on page 58
- Edit config.xml adding at the bottom
<plugin spec="https://github.com/apache/cordova-plugin-device" />
- test it on your phone and a department phone
- Phonegap Destop tracked all changes, as expected.
- For the CLI approach, use author’s walkthrough as your guide.