PhoneGap Day 2016

Intermediate Workshop


What You Will Build

In this workshop you will learn how to create a mobile app that interacts with the Spotify Web API using PhoneGap. Some best practices and performance techniques will be taught along the way and you will be introduced to useful plugins to add additional functionality that will enhance the app and provide a more native experience.

The sample app project is located on my associated GitHub repo here. The slides that I used in the workshop at PhoneGap Day US can be found here.


We will be using PhoneGap, Framework7 and the Font Awesome Icon Font library to help us build this app. The following plugins are also used in the final version.

  <plugin name="cordova-plugin-whitelist" spec="~1.2.0" />
  <plugin name="cordova-plugin-statusbar" spec="~1.0.1" />
  <plugin name="cordova-plugin-media" spec="~1.0.1" />
  <plugin name="cordova-plugin-console" spec="~1.0.1" />
  <plugin name="cordova-plugin-x-socialsharing" spec="~5.0.9"/>

What You Will Learn


A mobile device or a Mobile SDK is not a requirement for this tutorial. You will able to test your application in the browser or with the PhoneGap Developer App with some limitations. If you want the full support of the native APIs then you will need the mobile SDK for that platform (iOS SDK, Android SDK, etc.) installed on your system.

Useful Resources

  1. Pocket Guide - a similar app and workshop with a vanilla approach to a single page architecture and walks through specific tips and tricks to make your app feel and perform natively outside of a specific UI framework doing the work for you.
  2. PhoneGap Workshop - a similar app with a workshop that goes step by step creating the routing, templates and views to understand Single Page Architecture.
  3. Conference Tracker - a conference app built with Ionic/AngularJS with some more advanced features