The Sharjah Investment and Development Authority, also known as Shurooq, is the driving force behind the technical transformation of the city of Sharjah, United Arab Emirates. Guided by their traditions and inspired by innovation, they are committed to enhancing the city’s appeal as an investment, tourism, and business destination. An independent government entity, they facilitate, partner and connect investors, corporations, and entrepreneurs with the right opportunities.

The Heart of Sharjah, the first development of its kind, is the region’s biggest heritage project to date in restoring the traditional heritage areas of Sharjah and linking them together.

Seeking to reflect what Sharjah was like over half a century ago, the project will restore and revamp the city’s traditional areas to create a tourist and trade destination with contemporary artistic touches, yet retain the feel of the 1950s.

The Sharjah Investment and Development Authority (Shurooq) approached Wonderland Collective to create a tourism based app that would assist visitors with planning their visit to the city; highlighting key points of interest and offering various routes based on the amount of time the visitor has available.

To build the mobile app, we made use of the Ionic Framework. At its core, Ionic is essentially a set of Angular directives which are compiled via Cordova as native iOS and Android elements. We then setup a WordPress site and enabled the REST API. Using the amazing Advanced Custom Fields plugin, we built a tailored admin experience to allow our client to easily manage the content in their app.

Customizing the REST API

By default, custom fields are not included in the JSON object for a post. However, by using a simple filter or two, your custom fields can be included in the exposed JSON object. For example, our custom fields include sub-headings, opening times, and post content in two languages, as well as some latitude/longitude information and images.

We also separated each of the primary app sections into unique custom post types within WordPress. So we have a single function that exposes these custom fields:

function json_custom_fields( $data, $post, $request ) {
$_data = $data->data;

$_data['featured_image'] = get_field('featured_image', $post->ID);
$_data['map_image'] = get_field('map_image', $post->ID);
$_data['gallery'] = get_field('gallery', $post->ID);

$_data['content_heading_ar'] = get_field('content_heading_ar', $post->ID);
$_data['sub_heading'] = get_field('sub_heading', $post->ID);
$_data['sub_heading_ar'] = get_field('sub_heading_ar', $post->ID);
$_data['main_content'] = get_field('main_content', $post->ID);
$_data['main_content_ar'] = get_field('main_content_ar', $post->ID);
$_data['times'] = get_field('times', $post->ID);
$_data['times_ar'] = get_field('times_ar', $post->ID);

$_data['contact_number'] = get_field('contact_number', $post->ID);

if (get_field('location', $post->ID)) {
$_data['lat'] = get_field('location', $post->ID)['lat'];
$_data['lng'] = get_field('location', $post->ID)['lng'];
}

$data->data = $_data;
return $data;
}

Then we simply used a filter to apply this function to each of the custom post types we have in use:

add_filter( 'rest_prepare_souq', 'json_custom_fields', 10, 3 );
add_filter( 'rest_prepare_museum', 'json_custom_fields', 10, 3 );
add_filter( 'rest_prepare_art', 'json_custom_fields', 10, 3 );
add_filter( 'rest_prepare_tour', 'json_custom_fields', 10, 3 );
add_filter( 'rest_prepare_event', 'json_custom_fields', 10, 3 );
add_filter( 'rest_prepare_hotel', 'json_custom_fields', 10, 3 );

And just like that, our JSON data object now includes all the custom fields and can now be used in the app.

As the app is provided in both English and Arabic, the CMS is set up to allow the client to enter content in both languages. Within the app, the user’s language choice is stored using localStorage and this then determines the content that is shown to the user.

Conclusion

The system is really quite elegant and works perfectly for informational apps like the Heart of Sharjah app because Ionic lets you write once, and compile to multiple platforms; using WordPress as the backend, means that our client can update the content within their mobile app themselves; and customizing the REST API endpoints, mean that you can send just the data that your app needs without any bloat.

Our client, the COO of the Sharjah Investment and Development Authority was obviously really happy with us and had this to say:

“Wonderland Collective’s expertise with WordPress combined with their incredible UX/UI experience enabled us to showcase a digital experience that has no equal in our region. This combined with their incredible service means that I have no problem whatsoever in recommending them for any digital build.”

Mark Bloomfield

Mark is a full stack developer at Wonderland Collective, Cape Town. When not coding awesome things with WordPress, he's probably drinking gin.

The post Using the REST API in Mobile App Development appeared first on Torque.

Share This