Conference Tracker - An Advanced Hybrid App Tutorial

Follow the in-depth tutorial here

What you will build

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.

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

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

Plugins

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

Social Share Plugin
Calendar Plugin
Toast Notification Plugin
Status Bar Plugin
Keyboard Plugin
Device Plugin
InAppBrowser (for social media OAuth)
Console Plugin
NetworkInformation/Connection Plugin

Other Skills You Will Learn

Setting icons and splash screens
Debugging with Safari, Weinre and more
Testing with the PhoneGap Developer App
App Store Submission Tips
Using Google font libraries
How to setup OAuth.io with your social media accounts

The plugin details will be covered along the way. Take a look at the Official Cordova Plugin Registry here to explore further as well.

Setting up the Ionic App

Ensure you have Ionic installed (and are using latest version)
Create a new Ionic project
```
 ionic start ConferenceTracker
```
Replace the /www folder with the /www folder from this project.
Add the InAppBrowser plugin (needed for Facebook OAuth on device)
```
 cordova plugins add org.apache.cordova.inappbrowser
```
Add the dialogs plugin (for native style alert dialogs)
```
 cordova plugin add org.apache.cordova.dialogs
```
Add desired platforms (when ready to test on device)
```
 ionic platform add ios
```
Run on desired platform
```
 ionic run ios
```

IMPORTANT NOTE: Facebook integration for Login with Facebook and Profile menu option currently only works when running with the browser via http://localhost:5000/#/app/sessions after setting up REST services below. It does not yet work via Ionic run/serve. Working on it.

Setting up the REST Services

** Copy the /server folder from this repo into the Ionic project root folder created above

Install server dependencies. Navigate into /server folder from the command line and type:
```
 npm install
```
Start the node server
```
 node server
```
Go to http://localhost:5000/sessions to test your node service in your browser and make sure you see session data returned in JSON format.

Test the app in the browser with: http://localhost:5000/#/app/sessions

** Login with your Facebook credentials from the Login screen if you want to see your profile info in the Profile menu option.

hollyschinsky/ConferenceTracker