Hybrid App

Uses the same codebase to provide the same interface across devices

Like responsive web design but with more pizzazz

Represent Me

Uses actual legislation data to compare your stance on topics against our current representatives to help citizens decide who to vote for.

Uses WordPress for data & Ionic for the front end

http://ionic.io

A really useful tool to make hybrid apps

HTML / CSS / JS + a little Angular

CLI Tool: Add and configure libraries, track logs, integrate with services, EMail test versions to anyone, Plugs into your build tools (grunt, gulp, npm, etc)...

It's a busy space

Cordova / PhoneGap
Polymer
NativeJS
React Native
Titanium
Famo.us
Sencha Touch
...

Why does Represent Me use WordPress for the data layer?

The data's coming

from inside the app!

$scope.events = [
  { title: 'Hands on with Ionic', id: 1 },
  { title: 'Developing for Design', id: 2 },
  { title: 'An intro to POST CSS', id: 3 },
  { title: 'Atomic Design basics and open mic', id: 4 },
  { title: 'Open Mic Night', id: 5 },
  { title: 'Share your project / Lightning talks', id: 6 }
];
						

But we don't deal in static sites

3rd Party APIs

Ionic is a web tool. You can pull in data from any service

• Meetup API to get live event info
• The temperature gauge at the top of Bear Mountain
• Get a push notification if your site crashes
• Update your store app with sales

1st Party APIs

Build our own service

WP JSON REST API

Custom data types, meta, and user handling

Easy for anyone to update content

Plugin data can be accessed through endpoints (wp-api.org/guides/extending.html)

You get a free website if you need it

Super easy to setup

Install Ionic from the command line:

npm install -g cordova ionic
ionic start {appname} {template}
cd {appname}
ionic platform add ios
ionic platform add android
ionic serve
						

Super easy to setup

Get Ionic talking to WordPress

diff --git a/www/index.html b/www/index.html

     
+    

     


diff --git a/www/js/app.js b/www/js/app.js

 // 'starter.controllers' is found in controllers.js
-angular.module('starter', ['ionic', 'starter.controllers', 'ui.router'])
+angular.module('starter', ['ionic', 'starter.controllers', 'ui.router', 'ngResource'])
+
+.factory('resources', function($resource) {
+  var url = 'http://representmenow.co/wp-json';
+  return {
+    'posts': $resource(url + '/posts'),
+  };
+})

.run(function($ionicPlatform) {
	
	
diff --git a/www/js/controllers.js b/www/js/controllers.js

+  // Get the post data
+  resources.posts.query({
+    'type[]': 'legislation',
+    'filter[status]': 'publish',
+    'filter[order]': 'DESC',
+  },
+  function(posts) {
+    // Success callback
+    $scope.legislations = posts;
+  },
+  function(error) {
+    // Error callback
+    console.warn('An error occured:',error);
+    $scope.posts = [{
+      title: 'Error',
+      content: error.data[0].message,
+    }];
+  });


diff --git a/www/templates/legislation.html b/www/templates/legislation.html



- Content will go here
+ 
+  
+   
+  
+ 

	
						

Modular Design Components

IonicFramework.com/docs/components

Familiar CSS classes

Large Button
						

  
 This is a basic Card which contains an item that has wrapping text. 

						

A few custom elements

  
    
Front End Authority App
    
Hello, World!
  

						

AngularJS

With great power

comes great learning curves

Custom directives

Great platform for S.P.As

angular.module('starter', ['ionic', 'starter.controllers', 'ngResource'])	
.config(function($stateProvider, $urlRouterProvider) {
  $stateProvider
  .state('app', {
    url: '/app',
    abstract: true,
    templateUrl: 'templates/menu.html',
    controller: 'AppCtrl'
  })
  .state('app.home', {
    url: '/home',
    views: {
      'menuContent': {
        templateUrl: 'templates/home.html'
      }
    }
  })
  .state('app.events', {
    url: '/events',
    views: {
      'menuContent': {
        templateUrl: 'templates/events.html',
        controller: 'EventsCtrl'
      }
    }
  })
  .state('app.event', {
    url: '/events/:eventId',
    views: {
      'menuContent': {
        templateUrl: 'templates/event.html',
        controller: 'EventCtrl'
      }
    }
  });
  // if none of the above states are matched, use this as the fallback
  $urlRouterProvider.otherwise('/app/home');
});

						

Thanks!

Now lets code

Hands on with Ionic

The plan:

Make an app for Front End Authority

Where to go to learn more

http://ionicframework.com/docs/guide

http://docs.ionic.io

http://learn.ionicframework.com/formulas

-- BREAK 1 --

Folder Structure

• HOOKS: Custom actions taken as your app moves through the Cordova development process
• MERGES: Overrides for specific platforms
• PLATFORMS: Contains the core files for native environments (avoid unless you're doing custom native hacking!!)
• PLUGINS: Extra packages for the native apps
• RESOURCES: Platform specific asset files
• SCSS: Precompiled CSS
• ROOT FILES: config.xml, bower and gulp, ionic.project, package.json

Folder Structure 2: www/

• CSS: Styles
• IMG: Images
• JS: JavaScript
• LIB: Where Ionic and any other libraries you want to use can be placed. Follows Bower formatting
• TEMPLATES: Views and includes (pages)
• Index.html: The main page for your Single Page App

Data Requirements

CORS

-- BREAK 2 --

Brainstorm what your app will do and get started

Challenges:

• Use Ionic Components to create a list or cards for the events
• Follow the routing structure in www/app.js to add some more pages

Resources:

Get sassy

Styles are applied to the app in www/css/style.css

Add sass support from the command line with:

ionic setup sass

Data (continued)

Data is requested from a server in an HTTP request

Meetup API Console lets you build the request and copy it as a shareable Signed URL: secure.meetup.com/meetup_api/console

-- BREAK 3 (final)--

Challenges:

• Add some Ionic utility classes to add some style to the app
• Add custom styles to make your app look unique
• Request more data from the Meetup API (event comments, member stats, etc)
• Add a 'submit a topic' form

Cool stuff to do next

Ionic View: Share and test your app - view.ionic.io

Testing - AngularJS is great at it

Caching - Don't waste your user's data

User Authentication

Reading and Resources

• http://ionicframework.com/docs/guide
• http://docs.ionic.io
• http://learn.ionicframework.com/formulas
• Sharing Data Between Views
• Ionic YouTube Channel
• Pluralsight Course

DEMOS