Integrating WordPress and an AppBuilder KendoUI App

Have you wondered how you can quickly integrate your wordpress site and a mobile app created in the Telerik AppBuilder. I have. Here’s a brief tutorial on how to do it.

If you haven’t setupped your wordpress site you better do it before doing anything else.

Next you need a plugin called JSON API to expose your content to the mobile application. You can try another plugin to do that, I’ve chosen this one because it serves my purpose and has good rating. I’m not a WordPress guru, you should be careful when using WordPress plugins!

Now enable CORS support by adding the following line in the constructor of the JSON_API class (found in the json-api/singletons/api.php file). This enables us to connect to the api from the AppBuilder Simulator – it calls the api from the domain app.icenium.com (Icenium is the old name of AppBuilder).

header("Access-Control-Allow-Origin: *"); 

Next thing to do is to create a mobile application from AppBuilder with the Kendo UI template.

Add a view with the following content.

    <div id="tabstrip-posts"
        data-role="view"
        data-title="WP Posts"
        data-model="app.postsService.viewModel">

        <ul data-role="listview"
            data-style="inset"
            data-bind="source: postsDataSource"
            data-template="posts-template">
        </ul>
    </div>

    <!--Posts template-->
    <script type="text/x-kendo-tmpl" id="posts-template">
        <a>
            <div>
                <div>
                    <span>${title}</span>
                </div>
                <div>
                    <span>${author.name}</span>
                </div>
            </div>
        </a>
    </script>

This assumes you have created a postsService containing the viewmodel for the view. Here’s the code for it. The listview widget will search for the postsDataSource member of the viewModel to populate it’s items. We have also defined a template for the row of the listview.

(function (global) {
    var app = global.app = global.app || {};

    PostsViewModel = kendo.data.ObservableObject.extend({
        postsDataSource: null,

        init: function () {
            var that = this,
                dataSource;
            kendo.data.ObservableObject.fn.init.apply(that, []);

            dataSource = new kendo.data.DataSource({
                schema : {
                    model:
                    {
                        id: "id",
                        nicename: "nicename"
                    }
                },
                transport: {
                    read: function (options) {
                    $.ajax({
                        type: "GET",
                		url: "http://wpapidemo.stavrev.eu/api/get_recent_posts/",
                        dataType: "json",
                        success: function (result) {
                            options.success(result.posts);
                            console.log("read success");
                        },
                        error: function (result) {
                            console.log("read error: " + result);
                        }
                    });
                }
                }
            });

            that.postsDataSource = dataSource;
        }
    });

    app.postsService = {
        viewModel: new PostsViewModel()
    };
})(window);

The code above defines a service in the app scope called app.postsService which provides a viewmodel with recent posts visible on our wordpress site. We get the data with an ajax call to the api/get_recent_posts endpoint supplied by the JSON API plugin (you have to activate the core controller and to enable user-friend permalinks to have the exact route enable – all this from the plugin and wordpress configuration screens).

That’s it.

Now go get the code of the demo application from GitHub!
https://github.com/GeorgiStavrev/wp-appbuilder

The post Integrating WordPress and an AppBuilder KendoUI App appeared first on Georgi Stavrev.