PhoneGap
cordova-cli + plugman + harness
presented by Giorgio Natili
html5 code show #2
Rome, 30 may 2013
about me
e-mail: g.natili@gnstudio.com
twitter: @giorgionatili
blog: webplatform.io (coming soon!)
community: codeinvaders.net
what is phonegap?
- It's a cross platform mobile development framework
- It's a solution to create native apps using web standards
- It's an open source project under the Apache umbrella
Giorgio Natili | g.natili@gnstudio.com
Why the command line
- It's faster executing commands and more flexible (due to the variety of arguments)
- It offers some actions not available in the UI
$ rename .bak .txt *.bak
- Everything is in one place, no more switches between multiple softwares
Giorgio Natili | g.natili@gnstudio.com
cordova-cli
what is cordova-cli
- The command line tool to build, deploy and manage Cordova-based applications
- It's a tool to boos your productivity that makes intuitive common mobile tasks (build, emulate, etc.)
- Requires node.js to run and optionally npm to easy install and update it
Giorgio Natili | g.natili@gnstudio.com
getting started with cordova-cli
- The main command is the create one, it just create a cordova project in a specified directory
$ create path [id [name]]
Giorgio Natili | g.natili@gnstudio.com
project folders
myApp/
|--.cordova/
|-- merges/
| |-- android/
| |-- blackberry/
| `-- ios/
|-- platforms/
| |-- android/
| |-- blackberry/
| `-- ios/
|-- plugins/
`-- www/ Giorgio Natili | g.natili@gnstudio.com
cordova-cli commands
-
$ cordova platform add [platf.]|rm|ls
-
$ cordova prepare [platform]
-
$ cordova compile [platforms]
-
$ cordova build (prepare + compile)
-
$ cordova emulate [platforms]
Giorgio Natili | g.natili@gnstudio.com
cordova-cli drawbacks
- Evolves very fast so you have to carefully follow the deprecation policies of the project
- You have to manually change the owner of the cordova directory installed as a npm module
$ sudo chown -R username /usr/local/lib/node_modules/cordova
Giorgio Natili | g.natili@gnstudio.com
cordova-cli and ripple
- Apache Ripple™ is a web based mobile environment simulator designed to enable rapid development of mobile web applications
-
$ cordova serve platform [port]
-
$ cordova ripple platform
Giorgio Natili | g.natili@gnstudio.com
plugman
phonegap plugins
- It's a native code exposed to the app using JavaScript
- The native part extends or implements platform specific classes or interfaces (e.g. CordovaPlugin, CDVPlugin, etc.)
Giorgio Natili | g.natili@gnstudio.com
what is plugman?
- Plugman is an open source command line utility distributed as an npm module to facilitate the installation and uninstallation of plugins
- It supports the Android, BlackBerry 10 and iOS platforms
- Once installed you can use several commands from your command line tool
Giorgio Natili | g.natili@gnstudio.com
plugman commands
- $ plugman --fetch
- $ plugman --platform android --project PLATFORM_PROJECT_PATH --plugin
- $ plugman --prepare
- $ plugman --platform android uninstall --project PLATFORM_PROJECT_PATH --plugin
Giorgio Natili | g.natili@gnstudio.com
plugman drawbacks
- It works only if the plugin implements a specific folder structure
foo-plugin/
|- plugin.xml # xml-based manifest
|- src/ # native source for each platform
| |- android/ |
| `- Foo.java |
`- ios/ |
|- CDVFoo.h
| `- CDVFoo.m
|- README.md
`- www/
|- foo.js
`- foo.png - The plugin manifest has to be carefully filled
Giorgio Natili | g.natili@gnstudio.com
app
harness
what is app harness?
- An App harness for Cordova that can download and run Cordova apps as well as Chrome packaged apps
- It enables local development of apps without needing the Android / iOS SDK
Giorgio Natili | g.natili@gnstudio.com
app harness commands
- Install and test multiple applications.
- Install crx files directly or from the Chrome App Store.
- Run apps locally or run them directly from cordova serve.
- Edit and Refresh workflow with cordova serve.
- In App context menu to switch between apps.
- Firebug Lite and Weinre support for debugging.
- harness' bundle. (In development)
Giorgio Natili | g.natili@gnstudio.com
q&a
learn more (since july)
Giorgio Natili | g.natili@gnstudio.com