Understanding Discord NSFW Servers A Guide for Responsible Users.pdf
Building Mobile Apps in WordPress - WordCamp Toronto 2011
1. Building Mobile Apps
in WordPress
Presenter: Trevor Mills
Web: topquark.com
Email: t@topquark.com
Twitter: @topquarky
Phone: +1(416)579-3655
Tuesday, November 8, 2011 1
2. About me...
Studied Engineering, specializing in Quantum
Physics at University of Toronto
Programming Web Sites since 2003
Working with WordPress since 2010
Bass player in the Juno Award-Winning band
Digging Roots
Tuesday, November 8, 2011 2
3. Web Development in 2011
WordPress maturity with Version 3.x
15% of the top 1,000,000 sites run WordPress
Mobile is overtaking desktop usage
Mobile apps are where it’s at!
Tuesday, November 8, 2011 3
4. Web vs. Native Apps
NATIVE APPS
Proprietary languages
Long process for App Store
Different versions for
different devices
WEB APPS
Web languages - HTML, CSS &
Javascript
No app store, run from browser
One version for all devices
Tuesday, November 8, 2011 4
5. Bridging the Phone Gap
PhoneGap is an HTML5 app
platform that allows you to author
native applications with web
technologies and get access to
APIs and app stores. PhoneGap
leverages web technologies
developers already know best...
HTML and JavaScript.
*
* ACQUIRED BY ADOBE IN OCTOBER 2011
Tuesday, November 8, 2011 5
6. WordPress as Mobile App
WPTouch & WPTouch Pro
Native App Builders
WordPress Mobile Pack
JAMES G.
PEARCE
Tuesday, November 8, 2011 6
7. Javascript Frameworks
James
Pearce
Sr Director,
Developer
Relations
Tuesday, November 8, 2011 7
8. Javascript Frameworks
James
Pearce
Sr Director,
Developer
Relations
David Kaneda
Tuesday, November 8, 2011 7
9. Javascript Frameworks
James
Pearce
Sr Director,
Developer
Relations
David Kaneda
Creative
Director
SENCHA TOUCH IS THE MOST ADVANCED JAVASCRIPT
FRAMEWORK AVAILABLE FOR BUILDING NATIVE-FEELING,
CROSS-DEVICE WEB APPS
Tuesday, November 8, 2011 7
10. An Actual Example...
THE WORDCAMP APP
http://topquark.com/wordcamp/app/2011-toronto
Tuesday, November 8, 2011 8
11. An Actual Example...
THE WORDCAMP APP
Data is managed in
WordPress
App is rendered by a
WordPress plugin
Runs on Sencha Touch
http://topquark.com/wordcamp/app/2011-toronto
Tuesday, November 8, 2011 8
12. Features of The
Conference App
Works offline (using HTML5 LocalStorage)
Includes Twitter feed and Google map
Allows you to favourite speakers & sessions
Includes Sponsors
Tuesday, November 8, 2011 9
13. How the app...
...bypasses the WordPress theme
...gets data from WordPress
...is able to work offline
TAKE A DEEP BREATH...
...LET’S GET INTO CODE!
Tuesday, November 8, 2011 10
14. Bypassing WP Theme
Use the option_rewrite_rules filter to add your own rewrite rules.
Note: Permalinks must be on for this to work
add_filter('option_rewrite_rules','conf_app_rewrite_rules');
function conf_app_rewrite_rules($rules){
! $p = conf_app_get_option('path');
! // don't allow hijacking bloginfo('url')
! if ($p == ''){
! ! return $rules;
! }
!
! $i = 'index.php?';
!
! $r[$p.'/?$'] = $i.QUERY_VAR.'=on'; // the app
! $r[$p.'/proposals/?$'] = $i.QUERY_VAR.'=on&'.DATA_VAR.'=proposals'; // sessions data
! $r[$p.'/speakers/?$'] = $i.QUERY_VAR.'=on&'.DATA_VAR.'=speakers'; // speakers data
! $r[$p.'/manifest/?$'] = $i.QUERY_VAR.'=on&'.MANIFEST_VAR.'=on'; // cache manifest
! $r[$p.'/appscript/?$'] = $i.QUERY_VAR.'=on&'.APPSCRIPT_VAR.'=on'; // app js
!
! // I want the CONF_APP rules to appear at the beginning -
! // thereby taking precedence over other rules
! $rules = $r + $rules;
!
! return $rules;
}
Tuesday, November 8, 2011 11
15. Bypassing WP Theme
Use the query_vars filter to register your own valid query vars.
add_filter('query_vars','conf_app_query_vars');
function conf_app_query_vars($query_vars){
! $query_vars[] = QUERY_VAR;
! $query_vars[] = DATA_VAR;
! $query_vars[] = MANIFEST_VAR;
! $query_vars[] = APPSCRIPT_VAR;
! return $query_vars;
}
Tuesday, November 8, 2011 12
16. Bypassing WP Theme
Use the pre_get_posts action to build the pieces of your app.
add_action( 'pre_get_posts', 'conf_app_template_redirect' );
function conf_app_template_redirect(){
! if ($q = get_query_var(QUERY_VAR)) {
! ! // Instantiate the containers
! ! conf_app_load_topquark();
! ! global $topquark_objects;
! ! $tq = & $topquark_objects;
! !
! ! switch(true){
! ! case get_query_var(DATA_VAR) != '': $include = 'the-data/index.php'; break;
! ! case get_query_var(MANIFEST_VAR) != '': $include = 'the-manifest/index.php'; break;
! ! case get_query_var(APPSCRIPT_VAR) != '': $include = 'the-app/the-app.js.php'; break;
! ! default: $include = 'the-app/index.php'; break;
! ! }
! !
! ! include($include);
! ! exit();
! }
}
Tuesday, November 8, 2011 13
20. Taking the App Offline
HTML5 provides two features to make this possible:
Cache Manifest & LocalStorage
Specify URLs to cache Saves Key/Value pairs
Apps get 5MB for free Value can be an array
Tuesday, November 8, 2011 17
21. Taking the App Offline
The Application Cache (Cache Manifest)
DECLARING IT... RESULT...
CACHE MANIFEST
<html manifest="http://topquark.com/wordcamp/app/manifest"> # Version 1
# The Main App files
http://topquark.com/wordcamp/wp-content/plugins/the-conference
http://topquark.com/wordcamp/wp-content/plugins/the-conference
GENERATING IT... http://topquark.com/wordcamp/wp-content/plugins/the-conference
http://topquark.com/wordcamp/app/2011-toronto/globals
http://topquark.com/wordcamp/app/2011-toronto/appscript
<?php header('Content-type: text/cache-manifest'); ?> http://maps.google.com/maps/api/js?sensor=true
CACHE MANIFEST
# Version <?php echo conf_app_get_option('manifest_version'); ?> # The App Images
http://topquark.com/wordcamp/wp-content/plugins/the-conference
# The Main App files http://topquark.com/wordcamp/wp-content/plugins/the-conference
# ...etc. http://topquark.com/wordcamp/wp-content/plugins/the-conference
http://topquark.com/wordcamp/wp-content/plugins/the-conference
http://topquark.com/wp-content/uploads/2011/06/TopQuarkLogo.pn
# The Speaker Images
# ...etc. # The Speaker Images
http://topquark.com/wordcamp/wp-content/blogs.dir/5/files/asse
<?php do_action('the_conference_app_print_manifest'); ?> http://topquark.com/wordcamp/wp-content/blogs.dir/5/files/asse
http://topquark.com/wordcamp/wp-content/blogs.dir/5/files/asse
#Everything Else http://topquark.com/wordcamp/wp-content/blogs.dir/5/files/asse
NETWORK: http://topquark.com/wordcamp/wp-content/blogs.dir/5/files/asse
http://topquark.com/wordcamp/wp-content/blogs.dir/5/files/asse
* http://topquark.com/wordcamp/wp-content/blogs.dir/5/files/asse
http://topquark.com/wordcamp/wp-content/blogs.dir/5/files/asse
http://topquark.com/wordcamp/wp-content/blogs.dir/5/files/asse
http://topquark.com/wordcamp/wp-content/blogs.dir/5/files/asse
http://topquark.com/wordcamp/wp-content/blogs.dir/5/files/asse
http://topquark.com/wordcamp/wp-content/blogs.dir/5/files/asse
http://topquark.com/wordcamp/wp-content/blogs.dir/5/files/asse
http://topquark.com/wordcamp/wp-content/blogs.dir/5/files/asse
http://topquark.com/wordcamp/wp-content/blogs.dir/5/files/asse
http://topquark.com/wordcamp/wp-content/blogs.dir/5/files/asse
http://topquark.com/wordcamp/wp-content/blogs.dir/5/files/asse
http://topquark.com/wordcamp/wp-content/blogs.dir/5/files/asse
http://topquark.com/wordcamp/wp-content/blogs.dir/5/files/asse
http://topquark.com/wordcamp/wp-content/blogs.dir/5/files/asse
Tuesday, November 8, 2011 18
http://topquark.com/wordcamp/wp-content/blogs.dir/5/files/asse
22. Taking the App Offline
The Application Cache (Cache Manifest) - Updating & Resetting
UPDATING
App Cache refreshes from server only if manifest file changes
window.applicationCache.addEventListener('updateready',
function(){this.swapCache(); window.location.reload();},
false);
RESETTING
Chrome has chrome://appcache-internals/
Tuesday, November 8, 2011 19
24. Taking the App Offline
LocalStorage - Updating & Resetting
UPDATING
Use timestamps to see if a store has new data
If there is new data, load the Online Store from the server
Then...refresh the Offline Store with the data from the Online Store
RESETTING
Chrome has chrome://settings/cookies
Tuesday, November 8, 2011 21
25. Wouldn’t it
be nice if...
...there were a WordPress
plugin to do this dirty work?
Tuesday, November 8, 2011 22
26. Introducing...
BY:
...NOW IN THE REPOSITORY
Tuesday, November 8, 2011 22
27. The App Maker
Creates an Apps custom post_type
Build the app using shortcodes
Upload splash images, icon & stylesheet as
attachments
Lots of hooks to build customizations
No ads (unless you want to put them in)
Tuesday, November 8, 2011 23
28. Hello World App
/**
In the beginning, there was an app...
And the coder declared, let there be options:
* _is_debug_on = false (default) or true --+ sends Javascript messages to console.log()
via a maybelog() call. Loads debug version of Sencha library.
* _is_using_manifest = false (default) or true --+ saves data to the user's device. An
app gets 5MB for free without having to ask the user for permission.
* transition = slide (default), fade, pop, flip, cube, wipe (buggy) --+ the CSS3
transition to use between pages
* manifest_version = (string) --+ a version number for the manifest file. Useful for
forcing new manifest load.
****************************************************/
[the_app transition=cube]
http://topquark.com/wordcamp/apps/hello-world
Tuesday, November 8, 2011 24
29. Hello World App
/***************************************************
Then the coder said,
let there be [ app_item ]
may it render HTML5 markup in a variety of ways
* _is_default = false (default) or true --+ makes this item the first one that appears.
* title = (string) --+ the title of page. Also the title on the bottom toolbar icon.
* icon = action, add, arrow_down, arrow_left, arrow_right, arrow_up, compose, delete,
organize, refresh, reply, search, settings, star (default), trash, maps, locate, home
* post = (int) --+ $post->ID of any WordPress post (optional)
* ]]Any HTML5 markup [[ or_wordpress_shortcode ]] can be contenticized [[/ --+ create a
page from scratch. (note: markup must pass WordPress editor valid elements)
***************************************************/
[app_item title="Testing" icon=arrow_up]This is some content with <strong>markup</
strong> and <a href="http://topquark.com">a link</a>[/app_item]
[app_item post=1] [/app_item] +-- Note the space
http://topquark.com/wordcamp/apps/hello-world
Tuesday, November 8, 2011 24
30. Hello World App
http://topquark.com/wordcamp/apps/hello-world
Tuesday, November 8, 2011 24
31. Hello World App
/*********************************************************
At this point, the coder paused for a smoke, whence he
predicted someone might want to group items together to
appear as a list, and so
let there be [ app_item_wrapper ]
* title = (string) --+ the title of page. Also the title on the bottom toolbar icon.
* icon = action, add, arrow_down, arrow_left, arrow_right, arrow_up, compose, delete,
organize, refresh, reply, search, settings, star (default), trash, maps, locate, home
* _is_default = false (default) or true --+ makes this item the first one that appears.
***************************************************/
[app_item_wrapper title="Excellent" icon=star]
[app_item title="Testing" icon=compose]This is some content with <strong>markup</
strong> and <a href="http://topquark.com">a link</a>[/app_item]
[app_item post=1] [/app_item] +-- Note the space
[/app_item_wrapper]
http://topquark.com/wordcamp/apps/hello-world-2
Tuesday, November 8, 2011 25
32. Hello World App
http://topquark.com/wordcamp/apps/hello-world-2
Tuesday, November 8, 2011 25