Women Who Code London

What You Will Learn

In this workshop we will walk through several lessons designed to point out specific things you should learn about building hybrid mobile apps using a sample template developed by the PhoneGap team called Star Track. This app interacts with the Spotify Web API and was built with Framework7, a mobile UI framework. The chosen framework could have been anything but the goal was to use something with a familiar syntax and since Framework7 has a built-in DOM manipulation library with the same syntax as jQuery, it’s the easiest to get started with. We will enhance the Star Track app with some additional features and the resulting app can be found in this Women Who Code London Star Track repo from my github.

We will focus less on the Framework7 library and more on the certain aspects of mobile development you should be most aware of when building hybrid apps in general. This includes best practices and performance techniques as well as adding and using Cordova plugins to add additional functionality that will enhance your apps and provide a more native experience.

The sample app project is located on my associated GitHub repo here.

Dependencies

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="~2.1.3" />
  <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.12" />
  <plugin name="cordova-plugin-network-information" spec="~1.2.1" />

What You Will Learn

• Common mobile app development paradigms (navigation, view stacks, routing) and how to implement them using Framework7.
• How to use PhoneGap plugins in your mobile apps to play media, detect offline status and use native sharing.
• How to interact with the Spotify API to retrieve data.
• Tips on handling specific mobile challenges to make your apps feel native and perform well.
• How to configure your apps (preferences, icons, whitelisting etc).

Requirements

• PhoneGap CLI 6.2.3 or greater (npm install -g phonegap) > PhoneGap CLI 6.2.2 had a bug that could interfere with certain parts of this workshop so please ensure you’re not using that version. To check simply run the command phonegap -v.
• A code editor, a modern browser, and a connection to the Internet.
• A working knowledge of HTML and JavaScript is assumed, but you don’t need to be a JavaScript guru.

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. Simple Spotify Browser - a tutorial to walk you through build out a simple spotify browser (different than Star Track) from start to finish with helpful lessons along the way.
2. 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.
3. PhoneGap Workshop - a similar app with a workshop that goes step by step creating the routing, templates and views to understand Single Page Architecture.
4. Conference Tracker - a conference app built with Ionic/AngularJS with some more advanced features

Issues/Feedback

• Please create an issue here if you run into any problems or if you have feedback.

• You can also use the Comments section at the bottom of each module to ask a question or report a problem.

• You can contact us on Twitter:

  Follow @macdonst

  Follow @aniskadri

Slides

Presentation Slides