PhoneGap NewsFlash!

February 25, 2016By 0 Comments

cat-newsThere have been some significant updates in PhoneGap land recently in case you missed them. Read on below for a summary and links to where you can find out more!

New PhoneGap Forums

You’ve got questions? We’ve got answers! We’re super happy to announce our new PhoneGap Forums to help support all of your PhoneGap development endeavors. We’re committed to help and will be ensuring these forums are backed with enough resources from our team and the awesome Adobe Community Professionals that volunteer their time to help get your problems solved quickly and questions answered in a timely fashion. Check out yesterday’s official blog post with the specific links and details!

pg-logo

Template Support & PhoneGap CLI 6.0.0

PhoneGap CLI 6.0.0 was also announced this week with support for the latest version of Apache Cordova. One of the biggest features in the latest version of Cordova is support for templates and we want to make sure developers are aware of this new option and how to use it from both PhoneGap and Cordova.

Templates allow you to create a project based on another starter project other than the default Hello World to help you get started quickly. For instance, if you are a more advanced user that wants to start off with the most basic project shell enabled for Cordova/PhoneGap then you can just use the blank template and start coding without having to delete a bunch of code first. Plus, we now have templates available to get you started quickly with a Framework7 or React project. All you need to do is specify a --template flag with the create command specifying a local path, an npm package name or a GitHub repo URL. The PhoneGap CLI also supports the use of a shortcut name for our own team maintained templates and includes an extra template list command ($ phonegap template list) you can use to find out the available shortcut names for the currently supported templates.

For example, using the shortcut for the blank template with the PhoneGap CLI:

$ phonegap create myApp --template blank

From the Cordova CLI you would specify the npm package name:

$ cordova create myApp --template phonegap-template-blank

All PhoneGap team templates are available in npm prefixed with phonegap-template-* and searched using keyword cordova:template.

The GitHub URL template option can be particularly useful for creating projects based off other frameworks not currently available in a PhoneGap team template, like those created with Ionic, Onsen UI or Kendo UI. For example: $ cordova create onsen2App --template=https://github.com/OnsenUI/onsenui2-quickstart

Be sure to check out the official blog post regarding this update for more details. Additionally, we’re currently working on adding support for templates in the PhoneGap Desktop app as well so stayed tuned!

Browser Support

We believe developers should be able to start testing and debugging their PhoneGap apps as quickly as possible and the easiest way to do so is by leveraging existing well-known web developer tools; aka your favorite browser with the built-in dev tools we already use daily. To enable this more easily with PhoneGap, we’ve updated our middleware used when you run the phonegap serve command via the CLI to turn on browser support by default. We’ve also ensured all the core PhoneGap plugins can run in the browser via a proxy without issue and fall back to any APIs the browser already supports. You will see which plugins are using a proxy (not supported directly by the browser) in the output of the serve command, for instance:


[phonegap] [console.log] adding proxy for Device
[phonegap] [console.log] adding proxy for File
[phonegap] [console.log] adding proxy for Capture
[phonegap] [console.log] adding proxy for Camera
[phonegap] [console.log] adding proxy for Accelerometer
[phonegap] [console.log] adding proxy for Compass
[phonegap] [console.log] adding proxy for NetworkStatus
[phonegap] [console.log] adding proxy for Globalization

The workflow is simple to get started quickly.

  1. Open your command line or terminal app and install the latest PhoneGap CLI

    npm install -g phonegap

  2. Create a project

    phonegap create myApp

  3. Serve it up

    phonegap serve

  4. Open your browser to the IP Address served and start debugging!

Screen Shot 2016-02-25 at 10.07.16 AM

To enable Chrome developer tools as seen in the screenshot above, use Cmd+Opt+I on Mac or Ctrl+Shift+I on Win to open the DevTools or access it via the View -> Developer menu in Chrome. Also check out their developer tool docs for more usage help.

Also, be sure to check out the official blog post regarding this new browser support for all the details. For more general help on getting started with the PhoneGap CLI, check out our documentation.

Mixed Native & Hybrid Project/Docs

native-web

We’ve seen a lot of interest in mixing native and web components by embedding Cordova webviews in a native project to allow you to get the best of both worlds. I recently created a prototype with CocoaPod specs for iOS to help make this much easier and documented it in the PhoneGap docs here. It essentially allows you to enable a native iOS project with Cordova and the core plugins easily using CocoaPods. This approach works with both Objective-C based projects and Swift-based projects and definitely helps lower the barrier to entry for developers who want to try it.


PhoneGap Desktop App

The PhoneGap Desktop App also underwent a recent update and fixes the EADDRINUSE :::3000 issue as well as adding auto update for users running on OSX. There are more details regarding this update and links to the release notes here.

Filed in: CordovaMobile DevelopmentPhoneGap Tags:

About the Author ()

Leave a Reply