Tag Archives: cordova

Hands on with Cordova in Visual Studio

At TechEd this week, Microsoft announced Apache Cordova support in Visual Studio 2013. A Cordova app is HTML and JavaScript wrapped as a native app, with support for multiple platforms including iOS and Android. It is the open source part of Adobe’s PhoneGap product. I downloaded the preview from here and took a quick look.

There is a long list of dependencies which the preview offers to install on your behalf:

image

and

image

The list includes the Java SDK, Google Chrome and Apple iTunes. The documentation explains that Java is required for the Android build process, Chrome is required to run the Ripple emulator (so you could choose not to install if you do not require Ripple), and iTunes is required for deploying an app to an iOS device, though a Mac is also required.

The license terms for both Chrome and iTunes are long and onerous, plus iTunes is on my list of applications not to install on Windows if you want it to run fast. Chrome is already installed on my PC, and I unchecked iTunes.

Next, I ran Visual Studio and selected a Multi-Device Hybrid App project (I guess “Cordova app” was rejected as being too short and simple).

image

An annoyance is that if you use the default project location, it is incompatible because of spaces in the path:

image

The project opened, and being impatient I immediately hit Run.

When you build, and debug using the default Ripple emulator (which runs in Chrome, hence the dependency), Visual Studio grabs a ton of dependencies.

image

and eventually the app runs:

image

or you can debug in the Android emulator:

image

A good start.

Microsoft has some sample projects for AngularJS, BackboneJS and WinJS. This last is intriguing since you could emulate the Windows Phone look and feel (or something like it) on Android on iOS, though it would look far from native.

The preview is not feature-complete. The only supported device targets are Android 4.x, IOS 6 and 7, Windows 8.x Store apps, and Windows Phone 8.x. Windows Phone debugging does not work in this preview.

A little bit of magic from Adobe PhoneGap: instant app preview on a device

Adobe has released an update to its PhoneGap tools (build mobile apps using HTML and Javascript) which enabled instant preview on a device. You don’t need to compile and deploy; it is enough simply to save your changes using a text editor, and the running app preview on the connected device will refresh.

I tried a quick demo on Windows 8. PhoneGap installation or update is easy since it uses the node.js package manager: open a node command line and type npm install –g phonegap.

I had to update the Android SDK to version 19, which was the usual tedious update using the Android SDK Manager, but also worked smoothly.

Then I created a PhoneGap app and ran it in the emulator. So far so goo.

Next, I went to an Android phone and installed the PhoneGap Developer App.

image

Back on the PC, I started the built-in web server that serves the app refreshes to the device. Simply navigate to the app folder in the node command line and type: phonegap serve

Then on the device I ran the PhoneGap Developer App, and connected to the PhoneGap development server (IP no and port). The app preview appeared on the phone.

I then used Notepad to change the app home page slightly. Saved. The app preview refreshed almost instantly.

image

Here it is on the device:

image

A cool feature, though with some limitations. See Raymond Camden’s post for a few more details.

Currently iOS and Android are supported, with Windows Phone coming soon.

Intel fights back against iOS with free tools for HTML5 cross-platform mobile development

Today at its Software Conference in Paris Intel presented its HTML5 development tools.

image

There are several components, starting with the XDK, a cross-platform development kit based on HTML5, CSS and JavaScript designed to be packaged as mobile apps using Cordova, the open source variant of PhoneGap.

There is an intriguing comment here:

The XDK is fully compatible with the PhoneGap HTML5 cross platform development project, providing many features that are missing from the open source project.

PhoneGap is Adobe’s commercial variant of Cordova. It looks as if Intel is doing its own implementation of features which are in PhoneGap but not Cordova, which might not please Adobe. Apparently code that Intel adds will be fed back into Cordova in due course.

Intel has its own JavaScript app framework, formerly called jqMobi and now called Intel’s App Framework. This is an open source framework hosted on Github.

There are also developer tools which run as an extension to Google Chrome, and a cloud-based build service which targets the following platforms:

  • Apple App Store
  • Google Play
  • Nook Store
  • Amazon Appstore for Android
  • Windows 8 Store
  • Windows Phone 8

And web applications:

  • Facebook
  • Intel AppUp
  • Chrome Store
  • Self-hosted

The build service lets you compile and deploy for these platforms without requiring a local install of the various mobile SDKs. It is free and according to Intel’s Thomas Zipplies there are no plans to charge in future. The build service is Intel’s own, and not related to Adobe’s PhoneGap Build, other than the fact that both share common source in Cordova. This also is unlikely to please Adobe.

You can start a new app in the browser, using a wizard.

image

Intel also has an iOS to HTML5 porting tool in beta, called the App Porter Tool. The aim is to convert Objective C to JavaScript automatically, and while the tool will not convert all the code successfully it should be able to port most of it, reducing the overall porting effort.

Given that the XDK supports Windows 8 modern apps and Windows Phone 8, this is also a route to porting from iOS to those platforms.

Why is Intel doing this, especially on a non-commercial basis? According to Zipplies, it is a reaction to “walled garden” development platforms, which while not specified must include Apple iOS and to some extent Google Android.

Note that both iOS and almost all Android devices run on ARM, so another way of looking at this is that Intel would rather have developers work on cross-platform apps than have them develop exclusively for ARM devices.

Zipplies also says that Intel can optimise the libraries in the XDK to improve performance on its processors.

You can access the HTML5 development tools here.

PhoneGap 2.0 released with WebView, Windows Phone support

Adobe has released PhoneGap 2.0, its framework for creating cross-platform mobile apps using HTML and JavaScript. Using PhoneGap, you can wrap a web application as a native app, taking advantage of the browser control available in all the major mobile platforms.

New features in PhoneGap 2.0 include Windows Phone support, WebView which lets you embed a PhoneGap fragment into a larger native application, improved tooling and a unified JavaScript API across all platforms called Cordova-JS.

The Mac tooling has been improved and no longer depends on Xcode templates. Instead, you create a new project at the command line. However, you do need Lion or Mountain Lion to use PhoneGap.

The associated Apache Cordova project is “nearing graduation from incubation”, according to Adobe’s release.

image

PhoneGap is Adobe, Cordova is Apache

The hot cross-platform mobile toolkit PhoneGap was created by Nitobi, a company acquired by Adobe last year. Almost at the same time, the project was submitted to Apache as an open source project. However, the Apache project is not called PhoneGap; it was briefly known as Callback and is now called Cordova (the name of the street in Vancouver where Nitobi was based).

A new official log post explains why PhoneGap was renamed at Apache, but also makes the point that the PhoneGap brand will continue.

PhoneGap is a distribution of Apache Cordova. You can think of Apache Cordova as the engine that powers PhoneGap, similar to how WebKit is the engine that powers Chrome or Safari. (Browser geeks, please allow me the affordance of this analogy and I’ll buy you a beer later.)

Over time, the PhoneGap distribution may contain additional tools that tie into other Adobe services, which would not be appropriate for an Apache project. For example, PhoneGap Build and Adobe Shadow together make a whole lot of strategic sense. PhoneGap will always remain free, open source software and will always be a free distribution of Apache Cordova.

Read it carefully, because it is still potentially confusing. Note that PhoneGap “will always remain free, open source software” though it may gain hooks into commercial Adobe tools. At least, that is how I read it.

I would also expect that Adobe will come up with design and development tools for which PhoneGap (or Cordova) is invisible to the user. You will just be able to build for multiple platforms.

The post adds:

Currently, the only difference is in the name of the download package and will remain so for some time.

I will add that there is great brand-awareness of PhoneGap and what it is, and little for Cordova, so if you want to be understood talk about PhoneGap.