WP-Powered Ionic

http://ionic.io

A really useful tool to make hybrid apps

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

Why use WordPress for the data layer?

It's awesome. D'uh

• 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

1: Install & activate the JSON REST API plugin

Get site data at:

yoursite.com/wp-json/***

example: representmenow.co/wp-json/posts

Super easy to setup

2: 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

3: 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
+ 
+  
+   
+  
+ 

	
						

Next steps

• Lock down the endpoints (security)
• Finish Post to Post relationships
• Build through WP interface (menus, widgets, user data)

The Represent Me team is looking for more help.
It's a great project to jump on and get experience making
WP-powered apps