I recently had the opportunity to author several new whitepapers for the folks at Ionic. They cover some very familiar topics for me. Enjoy!
I had the good pleasure of presenting to a full room at the recent SoCal Code Camp on the Ionic Framework. Here are my slides from the talk.
The Ionic Framework combines Google’s Angular with Apache’s Cordova to create fast and beautiful cross-platform mobile apps for iOS and Android (and Electron or Progressive Web Apps). Built atop the web technologies you know and love, this solution can help take your web skills beyond the browser.
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
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
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!
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.
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.
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
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.
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" />
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.
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.