PhoneGap Build

Learn PhoneGap Build: The Basics

473880-636021952776340473_338x600_thumb

PhoneGap and its open-source sister Apache Cordova simplify cross-platform app development. You can code an app once, and then compile it to run anywhere: iOS, Android, or Windows Phone. PhoneGap Build is the cloud-based version, which allows you to take apps built with HTML, CSS, and JavaScript and compile them into native, store-ready mobile apps. All without any SDKs.

In this course, Chris Griffith introduces the PhoneGap ecosystem and the basics of PhoneGap Build. He shows how to set up an account for development and create, configure, and compile your first project with PhoneGap Build. Once you’ve mastered these fundamentals, Chris shows how to extend your app plugins, debug your app, and then prep it for release in the App Store, Google Play store, or Windows Store.

Duration: 1 hr, 24 minutes

Check it out!

Learn Apache Cordova: The Basics Released!

lynda-cordova

Apache Cordova is the open-source version of PhoneGap, the leading tool for cross-platform app development. It’s a write-once, run-anywhere solution specifically designed for mobile. But to ensure a smooth cross-platform workflow, it helps to know some setup and configuration basics. In this course, Chris Griffith introduces Apache Cordova and the PhoneGap ecosystem, including the two command-line interface (CLI) tools and the PhoneGap desktop app. He shows how to set up your local system and how to create, configure, and build your first project with the Cordova CLI. Once you’ve mastered the fundamentals, Chris shows how to extend your app with native and third-party plugins that enable features such as QR code detection and geolocation, and debug your app, preview it in an emulator or on an actual device, and then prep it for release in the Apple Store or on Google Play.

Duration: 1 hr, 24 minutes

Check it out!

ConfiGAP 2.0a released!

Leif Wells (@leifwells) and I are proud to release the new version of ConfiGAP! This version was a complete rewrite of the entire application. We moved off using Adobe AIR and Flex as our technology stack, onto one based on Electron and AngularJS.

advanced_settings

There were a lot of learning pains along the way, but that was part of the reason to migrate, to learn a new set of skills.

icon_settings

The development took a bit longer than expected, in part, some additional technology migrations. Our early efforts were based on using nwjs as our desktop shell, but as that project seemed to slow in its development, we shifted over to the Electron shell.

Also, our initial UI layer was built using Bootstrap, but we opted to explore using Zurb for Apps instead. Although we got the job done with Zurb, we are now looking to migrate again, this time to Angular Material. In addition, we are also planning to upgrade from Angular 1.x to 2.

advanced_settings

There are some additional features that we will be adding in coming weeks (Better Windows Platform support).

We hope you find ConfiGAP useful in your PhoneGap Build workflow. Drop us a line if you find an issue or want a feature. Download it from configap.com.

-Chris & Leif

Building Mobile Apps with the PhoneGap Command-Line Interface

Building Mobile Apps with the PhoneGap Command-Line Interface

My latest title on lynda.com has been released! It is Building Mobile Apps with the PhoneGap Command-Line Interface. Here is the description of the course:

PhoneGap’s command-line interface is a great way to build mobile apps, whether you want to use it to initialize new projects or take apps all the way through testing. In this course Chris Griffith offers a thorough overview of building, emulating, and deploying Android and iOS apps with this powerful tool. He’ll show you how to configure your development environment, and create brand-new projects with the PhoneGap CLI as well as the Apache Cordova CLI (the framework PhoneGap is built on). Then he’ll demonstrate how to test your app, customize and extend the platform to suit your workflow, and compile your app with PhoneGap Developer or PhoneGap Build. Start watching and learn how to kick-start your apps from the command line now with the PhoneGap CLI.

It was a lot of fun recording this title. Hope you enjoy it!

PhoneGap Development Mistakes and How to Avoid Them

Recently I have downloaded a few applications that were built using PhoneGap/Cordova and I was shocked at their poor quality. What was shocking about them, was these errors were actually fairly simple to solve if the developers took just a little bit of time. I am not going to name the apps publicly, but let me outline the issues and their solutions.

Custom Splash Screens

Default PhoneGap Splash Screen

One of the first thing a user sees when they launch an application is the splash screen. By default if you use the PhoneGap Command Line Interface (CLI), it will auto generate a collection of default splash screens and icons, like this one.

It is a fairly straight forward process to replace this assets with your splash screen. You do need to make multiple variations to support the wide range of device screens and orientations.

The simplest method is to just overwrite the sample files with your assets. But you can just as easily go into the proper config.xml file and the changes there.

In fact, that was one of the driving reasons I created ConfiGAP for PhoneGap Build in order to assist that process.

I was also surprised that the application made it through the Apple App Store approval process. Yes it met the requirement to have a splash screen, but you would think the gatekeepers would have flagged it.

Holly Schinsky has a nice blog post outlining all the variations of Icons and Splash Screens as well.

Network Access

In another application, I decided to run a simple test. Would the app still function if my device is in Airplane Mode? The reason behind this test was that this app was a companion application to a major technology conference. If you have been to any tech conference you know that connectivity is always an issue. A great way to check your application for this type of use case is to enable Airplane Mode and see how it handles it. So, what happened in this case?

Well, the app launched, and then sat there trying to connect to some remote server, forever. After several minutes, I closed the app. If you make use of ANY network based data or services, you have to check that you have access to the network.

PhoneGap has the Connection API (also known as the Network Information API) which makes this very simple to do. First, this API can identify the type of network you are using. You can leverage this information to estimate the rough data speed you might get and handle the user experience accordingly. This API will call??? send Online/Offline events, so you can respond to the device losing its network access.

In the case of this app, it should have done a simple API call to see if the network was available for locking up the app in a failed attempt to access the schedule serve

Remote Assets

One of the challenges of mobile app development is the approval process for submission into some app stores. This can be at odds with with development time, especially of you are working toward a fixed date (like a conference). One solution is to display the content as an externally hosted web page and use the In App Browser plug-in. If you are not familiar with this Plug-In, it enables another webview to be opened so you can show additional HTML content.

The developers of this conference app chose to use this solution to display their conference maps. Of course this is the issue that I spoke of before regarding “what if there is no network?”, but the issue here is that In App Browser is not the nicest container for the content. The maps were shown, but with an URL address bar (filled with some long content management system type URL) and some unclear user interface controls. The screen no longer looked like the app that I was just using. Probably not the best user experience for a feature that will be fairly well used.

Instead, the developers should have leveraged the File API, allowing one to download and create local files on the mobile device. After properly checking for network status, they could have downloaded the latest maps onto the device, and referenced them locally in their application to create a better user experience.

Disabling the Web Bounce Effect

Another classic mistake when working with PhoneGap is remembering to disable the web bounce effect. If you are not familiar with this, when you scrolling your content in a web view, when the user reaches the top or bottom, the web view will indicate it has reached that point by bouncing or flashing. This is something that screams web app and really makes the app look poorly developed.

To stop this effect, you simply need to add a few elements to your config.xml file:

If you are using it for Android, then use

<preference name="disallowOverscroll" value="true" />
<preference name="webviewbounce" value="false" />

And for IOS, use like

<preference name="DisallowOverscroll" value="true" />
<preference name="webviewbounce" value="false" />

Reviewing on Device

One of the last things to look at is the actual text. I was amazed at how small the text appeared was in the app across multiple devices and it was really poor. I was wondering if the developers actually spent time looking and using their application on a mobile device, or did they just stay on their desktops and using emulators/simulators?

One fundamental rule of mobile development is you have to get it on-device. Now this can be slow and cumbersome (creating signing certificates, installing provisioning profiles, developer settings configured correctly), but the new PhoneGap Developer App can reduce that friction greatly. If you are not familiar with the new tool, it is a free app available for iOS, Android and Window Phone, which allows you to have your local PhoneGap application to run within this on-device shell application. It pretty sweet. Save your file, use the PhoneGap CLI, and run your app on-device as it would truly run. There is no excuse for not seeing your app on a device and ensuring it looks good.

Summary

Hopefully, you have added a few things to your checklist when developing your next PhoneGap application. The platform can do some amazing things, but it does require some extra attention to a few items to help make your apps shine. If you have other lessons learned, please feel to drop me a note.

AppaloozaLA!

AppaloozaLA

I had to miss speaking at the one in San Francisco, but I am back in the saddle to speak at the Los Angeles stop! This is going to be a great event filled with some incredible speakers. Personally, I will be presenting on using PhoneGap Build to quickly build native mobile applications.

The event will be on Saturday, November 15, 2014 from 9:00 AM to 5:00 PM (PST) at the Art Institute of CA-Los Angeles.

For more information, visit the EventBrite page. Hope to see you there!