WordCamp GR 2012 Web Apps for the Masses

Web Apps for the Masses

@davidscotttuftsdavidscotttufts.com

Photo by razorray15

We are the 16.7%

Photo by Tim Wilson

WordPress Evolution1. Blog2. Multi-User3. Custom Post Types4. CMS5. What’s next?

Illustration by Rob Green

State of the Word 2012

Slide from Matt Mullenweg’s presentation

Popular Web Apps

Features of Web Apps Offer a service Safe-keeping of your

personal data Access to your personal

data through an API Roles and permissions

for controlled and/or restricted access

WordPress Web Apps

Building a WordPress Web Application

Framework• Use the existing plugin framework• Build the plugin to be extendable• Build in a robust public facing API

Photo by Pietro Zuco

WordPress App Stack1. WordPress Core2. Plugins, Themes, Actions, Filters & APIs.3. Custom: Post Types, Fields & Taxonomies4. Build a Web Application Framework Plugin5. Make Products—Bundled plugins and themes6. Build Web Apps—Registration, profiles,

friending, subscriptions, public facing API, in-app social features, sharing, etc.

Photo by Pietro Zuco

Photo by Sarah Fleming

No WordPress core files or database tables should be harmed in the production of a plugin

#1 Rule:

KickPress Features

• Module based App Engine• Public facing API• Custom post type & taxonomy

manager• Custom roles & capabilities• Custom “related posts”• Custom workflows• Front end editing

Photo by Brad Coy

Why APIs matter when building

web apps,and why you should care.

With no API, users are limited in how the can access their data

Illustration by Eric Tufts

Separating contentfrom presentation

Illustration by Eric Tufts

Illustration by Eric Tufts

Sample User Interfaces

Advanced custom post type management

Advanced roles and capabilities for managing user permissions

API Requests

1. // Request for a full page from the themekickpress_is_fullpage();

2. // Request for a page fragment via Ajaxkickpress_is_ajax();

3. // Remote app request or actionkickpress_is_remote_app();

3 kinds of requests to the server

1. Full Page Requests

Triggering the KickPress API

{site}.com/how-to/ {Archive page for custom post type called “How To”}{site}.com/how-to/api/add/{site}.com/how-to/api/save/{site}.com/how-to/using-powerpoint/api/edit/More Examples:{site}.com/2012/08/18/wordcamp/api/edit/{site}.com/2012/08/18/wordcamp/api/save/{site}.com/2012/08/18/wordcamp/api/delete/{site}.com/2012/08/18/wordcamp/api/bookmark/{site}.com/2012/08/18/wordcamp/api/add_term[category]/featured/

API Parameters are appended to the end of the standard WordPress permalinks:

2. Ajax Requests

Theme ModificationsAdd an extra conditional comment to the top of these theme files:

header.phpfooter.phpsidebar.php

<?php if ( kickpress_is_ajax() ) { return; }

?>

Theme ModificationsAdd a conditional blocks for any code that should be ignored on AJAX requests:

<?php get_header(); ?> <?php if ( kickpress_is_fullpage() ) : ?>

<div id="content-wrapper"> <?php endif; ?>

<?php $post_type = get_post_type(); ?> <?php get_template_part( 'loop', $post_type ); ?>

<?php $args = array( 'post_type', $post_type ); <?php kickpress_ajax_reload( $args, 'content-wrapper‘ ); ?> <?php kickpress_is_fullpage( '</div>‘ ); ?> <?php get_sidebar(); ?> <?php get_footer(); ?>

3. Remote API Requests

Authentication

Photo by Jon Worth

Two levels of remote authentication.• Remote apps• Registered users

interacting with your site’s content remotely through authenticated web or mobile apps.

Remote Application Authentication

API Serialized Response{

"status":"success","messages":{

"note":"Term Added"},"data":{

"terms":[{"term_id":"7","name":"Featured","slug":"featured","taxonomy":"category","count":"26"}]

}}

Use KickPress to Build your next Web App in WordPress

http://kickpress.org/getting-started/