App Development

hybrid mobile app development tutorial

Advanced PhoneGap Hybrid App Tutorial  August 19, 2017 – 06:00 pm
Apache Cordova Tutorial: Mobile Applications with HTML, CSS & JS

In this tutorial you will learn everything you need to take a hybrid application from scratch to app store lesson by lesson. This tutorial builds upon the previous Beginning PhoneGap Workshop where we built a basic Conference application using no particular MVC framework. In this advanced version we will build an app using a more opinionated approach with Cordova/Ionic/AngularJS and a Node/ExpressJS REST API backend data service. Also check out the basic Ionic Tutorial by Christophe for more details.

Throughout this tutorial you will be advised on how to handle different challenges and learn many useful tips. This app implements the following features that you will learn to add in the following lessons:

App Features

  1. Side Menu - Side menu navigation with icons
  2. Custom Status Bar - Set the font and icons to white to match the title bar text
  3. Custom Keyboard Accessory Bar - keep accessory bar for drop-down options on sort
  4. Login with Facebook, LinkedIn or Twitter - in addition to a custom login option using OAuth
  5. Profile - display the user's profile based on the social media logged in with
  6. Facebook integration - using a non-plugin approach
  7. Add to native calendar - easily add a session to your native calendar with all session details
  8. Favorites Management - add to favorites / remove from favorites by tapping heart again or via the Favorites menu option list manager
  9. Swipe to share from list
  10. Share with native sharing system on device
  11. Uses native notifications/dialogs
  12. Toast-style alerts
  13. Modal login panel upon open
  14. Popover 'About' screen
  15. Sort options - sort sessions by different criteria
  16. Filter/Search - Search all data with a search term
  17. Handling offline
  18. Numerous AngularJS directives and patterns used including: -routing -repeat -filtering -sorting -ngSwitch -ngShow -ngHide -ngClass -ngClick


The following plugins will be added along the way to help provide the above features:

Other Skills You Will Learn

  1. Setting icons and splash screens
  2. Debugging with Safari, Weinre and more
  3. Testing with the PhoneGap Developer App
  4. App Store Submission Tips
  5. Using Google font libraries
  6. How to setup with your social media accounts


  • To complete this workshop, all you need is 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.


  • You can also use the Comments section at the bottom of each lesson to ask a question or report a problem.
  • You could also contact me on Twitter:


  • This tutorial is still a work in progress and modules are being updated. The GitHub project has the entire app and code to support the features mentioned above, however, in the meantime. Please continue, please continue to check back for more details on each module and how each feature was implemented as I'm working on adding the details asap.


Related posts:

  1. Android mobile apps development
  2. Windows store app development tutorial
  3. Android mobile app development tools
  4. HTML5 mobile app development tutorial