Thomas Fischer

UX Designer & Front End Developer

Hybrid mobile apps with Apache Cordova

By Thomas Fischer | February 7, 2015 | 0 Comment

superheroes-in-nyc-logo

In this Article: {In} New York Apps & Guides, I talked about my project of my New York Movie tours on mobile.

superheroes-in-nyc-screens-2

In New York Apps are developed with the mobile development framework: Apache Cordova.

cordova-logo

Apache Cordova / Phonegap

What’s the difference between Apache Cordova and PhoneGap?

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.

Apache Cordova is an open source framework that allows developers to use standard web technologies, such as HTML5, CSS3 and Javascript for cross-platform development without losing the features of a native app.

Why Apache Cordova?

There is plenty technology available for mobile development: Native, Web Apps or Hybrid Apps.

Given that I wanted to deploy my Apps in various app store portals without needing to look at Objective-C,  Cordova was the best option, plus:

  • It’s HTML, CSS, and Javascript.
  • It’s multi-platform, it lets you target all the major operating systems: iOS, Android, Windows and Blackberry.
  • It’s open source

Cordova is simply the same as the native operating system. For iPhone App the output is an IPA file, for Android app the output is an APK file and for Window Phone it is an XAP file.

These are the same app packaging formats that are used by native apps and can be easily distributed through the appropriate ecosystems.

Firstly, the platforms that my first application should support were considered and mostly the goal was to launch for Android as well as iOS devices. Later, maybe I will  expand the support to BlackBerry and Windows devices.

store-ios

store-android

 

Technologies Used

The app executes as a WebView within the native application wrapper.

The application itself is implemented as a webpage that references whatever CSS, JavaScript, images. It mixing native application components with a Webview that can access device-level APIs.

The Web App

I have done a pure web app before, so I was aware of the pitfalls, as well as the benefits.

Some important features that are required by most of the applications are as follows:

  • Phonegap/ Apache Cordova: Core of the mobile application. It offers full documentation and great support.
  • Xcode and Android Studio: IOS Xcode and Android Studio(with Gradle) were use to set up the SDK environment and deploy {In} New York Guides apps for IOS and Android devices.
  • HTML5: With the objective of taking my Apps offline I needed the new Html5 feature: Storage. I used Web Storage to add offline capabilities, and I also used Application Cache by creating a cache manifest file.
  • CSS3: Although it is HTML and CSS the app must have a native ‘feel’, with animations, like a slide between pages. The use of translate3d pushes CSS animations into hardware acceleration to create smooth animations between the screens.
  • Javascript: Object-oriented programming & Prototype-based programming: intended to promote greater flexibility and maintainability in programming. I wanted to do a single page app, and for that job, I preferred used native Js, but I could have used AngularJS or EmberJS as well.
  • Responsive Web Design Techniques:  {In} New York Guides Apps support all mobile web browsers from iPhone and Android, Phablet and Tablets. To support a multitude of different screen sizes. I used SVG. Mediaqueries and responsive typography with REM.
  • Offline Map: To create a completely offline map, I used Leaflet | OpenStreetMap + Tilemill | MapBox (see details below).

 

Cordova Plugins

In New York guides Apps provide access to device and platform functionality:

  • Device: Gather device specific information. Capability to determine the kind of device that the application is specifically running on and the type of features that it supports.
  • Geolocation: Make your application location aware.
  • Network Information: The developer should detect if the users can easily access the data via the net. And Quickly check the network state, and cellular network information, to choose the right video format.
  • InAppBrower: Launch URLs in another in-app browser instance.
  • Splashscreen: Show and hide the applications splash screen.

Offline

The biggest challenge was to take these applications offline.

I wanted my apps to appear to behave the same way to the user whether or not it was connected to the server. This meant saving everything onto the device, and refreshing it with server values when it was connected.

With HTML5 Web Storage and Application Cache it’s easy to make an offline version of a web application.

I need to give users access to the content, even when they are offline.

This is done by caching any content the user views whilst they are online and storing a copy of the returned JSON in a database on their device.

Each time a cached page is accessed via their phone, the app will check if the user is online and to see if a more up-to-date version is available.

 

Offline Map

This New York Movie Tour comes with a detailed and fully functional Map to assist you explore the city and locate Movie locations.

superheroes-in-nyc-header

 

Leaflet + tilemill

This article of Martin Muller: PhoneGap + Leaflet + TileMill, explains how to render a tiled map with TileMill from OpenStreetMap data and make it available on iOS and Android for offline usage.

superheroes-in-nyc-mapIt helped me for:

  • Obtaining OpenStreetMap data
  • Storing the OpenStreetMap dump in a SQLite database
  • Rendering the tiles with TileMill
  • Importing the SQLite data
  • Exporting MBTiles

Because I decided to store the MBTiles into the app, the most important settings was the region/boundaries and the zoom levels, as they drastically influence the size of the exported MBTiles file. For mobile devices you want to keep it as small as possible to save bandwidth and storage space.

And I wanted to keep my app over the air limitation:  < 50mb.

 

SuperHeroes In NYC is available on AppStore and GooglePlay

TAGS

0 Comments

Leave a Reply

Your email address will not be published. Required fields are marked *