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


Thanks! 

Gracias! 

謝謝

Grazie!

Merci! 

благодаря! 

obrigado!


PhoneGap and the Command Line

By Giorgio Natili

PhoneGap and the Command Line

  • 2,301

More from Giorgio Natili