With WP-AppKit you set your app content from the WordPress backoffice and generate the corresponding mobile application sources formated as a PhoneGap project package. Doing so, App Kit addresses two very different technical issues:
- Exposing WordPress through web services.
- Building a PhoneGap mobile application.
The WordPress Plugin
A WordPress plugin is made of PHP, using the WordPress API. Here are the main technical concerns for WP-AppKit from a WordPress plugin development point of view:
- Content displayed in your app is your WordPress content (i.e. posts, pages, custom post types), grouped/filtered with WordPress taxonomies. The App Kit plugin doesn’t add (or retrieve) any app specific contents or meta: it has no influence at all on your content. However, in future versions we’ll certainly add some content meta (linked to geolocation for example) and handle some third party plugins compatibility, allowing to easily display content from those plugins in apps.
- You create your app and configure it from the WordPress backoffice choosing from the WordPress content you want to see in the app. Each app has an edit panel in the backoffice where you drag ‘n’ drop your WordPress content into app components and navigation, and choose your app theme.
- On one WordPress instance, you can create as many apps as you want: one app per platform (Android, iOS…), one app per content theme… The plugin implements apps as WordPress custom post types, which allows you to integrate app management seamlessly in the WordPress backoffice UI.
- WordPress exposes app content through web services. Each app created with the plugin has its own set of JSON web services allowing the app to synchronize with the chosen WordPress content. The plugin web services implementation is specific to WP-AppKit: it is not RESTful as the app must be able to retrieve all of its content (of different natures) at once, so that we can handle offline consumption.
- Web services are secured. Web services URLs have a “token” part. Only apps that can compute this token have access to the web service information. The token computation is fully customizable using hooks so that you can implement your own web service security.
- You generate and export the PhoneGap project sources for your app directly from WordPress. Once an app is built and tested in the browser, you set its PhoneGap specific settings (that will generate the PhoneGap config.xml) from the app edition, and clicking the “Export” button generates a zip directly submittable to the PhoneGap Build.
- Key plugin core processes, entities and web services are hookable. So you can easily customize content sent to the app, customize web services security and even create your own app components.
PhoneGap Mobile Apps
WP-AppKit apps fundamentally aim to retrieve WordPress data and to display it in a mobile app fashion.
From the start, WP-AppKit’s purpose has been to allow web developers and designers (and especially WordPress ones) to make their own app using technologies they know.
So we didn’t go with one of those “all-in-one” frameworks, we chose to keep core and UI concerns separate using specific low-level tools that just served our needs: make an app connected to WordPress and let frontend developers use their own skills and favorite mobile UI rendering libraries (Topcoat, Bootstrap… or hand made) to build their app leaning on a “WordPress-like” app theme logic.
A Backbone Core.
Backbone.js Models and Collections structure our app contents (posts, post lists, navigation items…) in a very flexible and robust way. Corresponding Backbone Views handle app components rendering. Navigation within our single page app is handled by the Backbone’s Router.
Ajax And DOM Manipulation
jQuery is used at different app levels for DOM manipulation, and AJAX calls to web services.
And that’s all that is technically imposed on you by App Kit core.
Once your app components, navigation and theme are set up in the WordPress backoffice, tested in your web browser and exported as a PhoneGap project ZIP package, it’s time to make a native app out of it. This is where the WP-AppKit plugin role ends and where the PhoneGap compilation adventure begins.
There is two ways to build native apps:
- Install the PhoneGap environment (which relies on node.js) on your local system and use the PhoneGap Command Line Interface (CLI) to build your app.
- Use the very convenient PhoneGap Build that allows you to build apps directly in the cloud by uploading your ZIP export or connecting it to your GitHub repository.
The result of a PhoneGap compilation is a file (.apk for Android and .ipa for iOS) that you can install directly on your phone and submit to app stores.
Of course, a PhoneGap app can be more than a classic website encapsulated in a native container: it allows you to access built-in phone features such as camera or geolocation to enhance user experience and make the most out of our smartphone’s abilities. For now, by default, WP-AppKit doesn’t include pre-build tools or modules related to those specific PhoneGap phone features APIs. But, when building your theme, nothing prevents you from using the PhoneGap APIs to interpret your user location or take pictures from your app. Embedding a built-in phone features management (using Phonegap API in the background) in the core of the WP-AppKit plugin is for sure one of the main concerns on our minds for the future.
This article has been carefully edited by our friend Jenny Beaumont. A thousand thanks Jenny! All mistakes are ours.Have something to say about this article? Great! Comments are there for that. Please remember that comments are moderared. SPAM or off-topics comments won’t be published.