AEM Podcast: AEM Phonegap, App Creation Tool

AEM Phonegap is a mobile development tool that uses Javascript, HTML5, and CSS3, letting you expand your development options and not just stick to platform specific API’s.  Adobe offers PhoneGap out of the box with AEM6.0.  In this podcast, we are joined by Adobe Certified Expert Eric Baggaley to discuss what PhoneGap is, its benefits when compared to other app creation software, what barriers there are to development, and how you can get started using AEM PhoneGap.

Music Intro: Code Monkey by Jonathan Coulton

Transcript:

P- We are joined today by Adobe Certified Expert, Eric Baggaley. Let’s start out by having you tell us a little bit about yourself. How long have you been a developer? How long have you been working on AEM?
Well, Peter, its good to be here today. As you said, I’m Eric, I’ve been doing development on many platforms for many years including much web development and architecting solutions. I have spent the last while (going on a year and a half) completely focused on AEM development. I spent most of my time in AEM doing standard website, traditional Content Management System integration and development. In my experience working with AEM, I have also spent some time working with the PhoneGap tool.

P- Today we want to spend some time talking about PhoneGap. So I guess lets start off with what is PhoneGap?
E- PhoneGap is a mobile development framework, that enables software programmers to build applications for mobile devices such as tablets and phones using JavaScript, HTML5, and CSS3, instead of relying on platform-specific APIs like those in iOS or Android. The PhoneGap code was contributed to the Apache Software Foundation (ASF) under the name Apache Cordova. There are thousands of applications for mobile devices that have been written using PhoneGap. You can go to the phonegap website www.phonegap.com and find a list of some of them if you are interested.

P- What are some of the benefits that you get using PhoneGap as opposed to other app creation software?
E- First of all, if you are a web developer, you don’t need to learn a new language. Applications are built using HTML5, CSS and Javascript. You can utilize your favorite Javascript libraries to simplify coding.
Benefits also include the ability to create apps for all mobile platforms and only code once - similar to java’s ability to write once run anywhere. The same application written using PhoneGap can run in iOS and Android or Windows 8 without re-coding anything.
A web application can do that via a browser, but PhoneGap do do more than a web application, more than the browser. It can utilize device specific features such as the camera or make a phone call using special libraries.

P- How does a developer utilize PhoneGap then?
E- Well, currently there are two possible ways to use PhoneGap. First of all, you can install and run the phonegap desktop application on your personal computer. This can be downloaded at www.phonegap.com. Another way is through the Phonegap build in the cloud. To get access building in the cloud go to the website build.phonegap.com. Both have free options if you are just interest in trying phonegap out without making a financial commitment.

J- What is involved in creating an app in AEM?
E- Creating a PhoneGap app is supported OOTB in AEM 5.6.1, but has become much more integrated in 6.0. I would start with 6.0 if you are going to use AEM. When you log into AEM's touch interface there is a main section entitled Apps specifically for creating PhoneGap apps. Just hit the create new App button and fill out the basic data. This is just like the creation of a new site in AEM. AEM creates the baseline for the application and allow you to integrate directly with either the desktop or cloud building capabilities. AEM is not required to create a PhoneGap application, it just does much of the legwork for you similar to the web it aids the building of a website. It simplifies the process.

J- How is Phonegap on desktop? user friendly? usable UI?
E- Well the desktop version allows you to work locally. Don’t expect a UI. It is a nodejs application and is completely command-line driven. You can install it like other NodeJS applications using the NPM installer tool.
To perform a build in AEM, you basically click a download button in AEM to render the web application and package it for phonegap build. You then take that zipped file and compile it into an application. To test thenew application, you can start up a server to serve up the new application content and then test application with a mobile app as long as you’re connected to the server to serve up data. This mobile app is an emulator application which can be downloaded for free on your mobile device which allows for testing directly on the device without having to upload a new application to your mobile device every time you make a change. Think of a browser serving up a web application. You just run the server on the desktop and the emulator connects to the server. Your application is served up for testing with the latest build you have created.
I need to mention that for the desktop version running on the Mac, the server did have some issues serving to my iPad emulator, but there are supposedly some fixes available with some manual effort. I didn't bother to try to get it working because the cloud build worked for me without issue.
There are several benefits to using the desktop PhoneGap tool. It will enable running the application within an emulator including on the mobile device. There is a PhoneGap app that is available for free on iOS and android where the application runs. In iOS just search the App Store for PhoneGap. Also there is no membership required to run the desktop tool. Just download the tool and create applications.

J- What about the Phonegap cloud build?
E- To utilize PhoneGap cloud building, you’ll have to be an Adobe Creative Cloud member or sign up for a PhoneGap membership. They have premium memberships for a monthly fee or there is also a free membership but the access to functions is limited with the free version. As you might expect, building iOS applications requires an Apple developer membership. You can build on all platforms concurrently using processing power in the cloud, and it is very tied into AEM. All you have to do to do a build is click the build button in AEM once you have create a build configuration referencing your membership at build.phonegap.com. The AEM instance will connect to PhoneGap build and start the build up automatically. You can perform these same steps in the website directly as well for those who aren’t using AEM to create their app.

J-How specifically is a free PhoneGap cloud account limited?
E- The user is able to create unlimited public applications builds (meaning the application is open source and is downloaded from a public Git repository), but is only able to create one private application build at a time meaning, not from a public Git repository. There are size restrictions and there is a limitation which prevents you from creating your own plugins to work with phonegap for device specific features you might want to use when there isn’t an available plugin library which uses the functionality already.

P- What are a few highlights of PhoneGap for functional use?
E- PhoneGap is actually quite powerful in its libraries to use mobile device specific features. There are several plugin libraries that can be used even with a free membership to the cloud build. There are cordova plugins that are available, but third parties ahve developed plugins that you can use as well (even with a free membership). Remember that the code is all client side code. You do your functional coding in Javascript. You have all the power of javascript plus the extended power of plugins.

P- How easy would you say creating an app is for a new user?
E- A basic Hello World application is quite easy to create as you might suspect. Other more complex applications require typical web coding with special JavaScript functions to perform device specific functionality. The biggest challenge developers might run into in the AEM method of building PhoneGap applications is that the AngularJS libraries are used for development. Those familiar with AngularJS know that there is a learning curve there. By the way, AngularJS libraries are not necessary for non-AEM builds. This requirement is just a function of how AEM chose to implement their PhoneGap apps. Hello world can be created with standard out of the box components which are supplied by AEM.
For more extensive applications, you might have to create AEM components similar to what any user would generate to create an AEM website with custom functionality. The difficulties users may have building the application are those you might get with any new platform. The user needs to learn to use the extended libraries to do extended functionality. Fortunately, much of the libraries are already known to users who do web development with HTML5, CSS and Javascript. I think it would be easier for a web developer to use this path to building a new application then in learning a new language that he or she is unfamiliar with.

P- What’s the turnaround time from beginning creation to finished product.
E- This of course depends on the complexity of the application. Incidentally the application is very much a web application with the possibility of extended functionality. Users will be able to run their applications for the most part in a web browser to test them out. You just have an AEM publish instance running and publish your application content to the browser. Of course, the device specific features won’t work in a browser, but there is much that can be tested in the browser.
I would think a user can expect the development time to be the same as a standard web client application with extensive JavaScript. Schedule maybe a little more time because you will want to perform builds and run them on mobile devices. The more different types of devices, the more testing that will need to be performed.

J- With the integration of Phonegap in AEM 6. Is there any additional setup required or is it ready OOTB?
E- All libraries are installed. The user only needs to set up a configuration to utilize PhoneGap build. This is just adding the username and password assuming that the membership at PhoneGap build has already been created. It's pretty much all ready to go. Go to the Apps section and create a new app. There is also the ability to integrate adobe analytics tools into the PhoneGap application so you can get information about the usage of the PhoneGap application you create.