Sunday, 14th September 2014Case Study - NickJr. Colour CMS & API - Feedback sought!

In true web developer fashion it's been an embarrassing amount of time since I last blogged or did anything to my site! I've started to create some content but before I submit it as a case study on Drupal's site I'd love to have some feedback, it's been years since I wrote case studies so a little rusty. Is it of interest? Does it help? Does it answer the right questions? Are there any questions you'd like me to answer? Of course I'm also available for projects, this case study is for a relatively small project I built a few months back but now I've started to team up with other community members around the world I can take on larger projects - more on that soon, meanwhile TIA for any feedback!

Brief overview

Viacom’s Nick Jr. is a digital television channel aimed younger children, home to popular shows including Dora the Explorer, Angelina Ballerina, and PAW Patrol. 'Colour' is a section of the Nick Jr. website where, daily, tens of thousands of users interact with predefined line-art drawings using paint brushes and stickers. They can then, if they wish to, send pictures they create to their friends via email. The mostly Flash-based front-end currently connects to a legacy back-end system which is being replaced with Drupal.

Completed Drupal site or project URL

http://www.nickjr.co.uk/create/#!/colour

Why Drupal was chosen

Drupal's core and contributed modules along with customisable web administration interface provided all the functionality required out-of-the-box and is already used widely throughout the organisation.

Describe the project (goals, requirements and outcome)

Project Goals

The goal of this project was to provide a bespoke back-end CMS based on Drupal to replace the legacy system, along with introducing new functionality enabling Send to Gallery and Pic of the Week features. The CMS needed to as simple as possible for content managers to use, and the whole system had to be able to cope with the tens of thousands of users using the API on a daily basis.

Deliverables

The site was to be delivered as a Drupal install profile so it can be adapted and re-used – an initial step towards creating internal Nickelodeon-specific distributions of Drupal, further lowering costs and time-to-market for future projects with similar requirements. Purkiss built a similar system a few months prior for Universal Artists uView Augmented Reality App and have extensive experience integrating Drupal with 3rd party services so were ideally placed to deliver this type of Drupal project.

Theme

First we set up the install profile with Shiny, the administration theme which comes with Drupal Commerce Kickstart, to be the main theme to the site. Shiny is a great theme for this kind of system where there's really only one main display the content managers interact with – it's easy on the eye with good typography and spacing.

Legacy Migration

We then re-created what functionality was required from the legacy system using Drupal Services – the calls for saving images, retrieving images for a show, etc. There was a major difference here as the legacy system stored all the data in flat XML files with no user data linked. Drupal is a relational database system so we have user accounts, content types and taxonomies – this proved to be an exercise in both education of the client as to the benefits of hooking into the Drupal API, along with re-architecting of the current content model and workflow.

Features

We used a Features-based approach to development with each of these features, along with the install profile, having their own private Git code repository in the cloud in order for issue tracking and maintenance to be easier.

The features we delivered were as follows:

• Content Types
  • NickJr Colour Image – stores the user’s image along with a Canvas ID which refers to the line art used, a taxonomy field to link to the associated show, and two flags – one to show if the user has sent the image in to Nickelodeon for consideration to be included in the showcase, and one to denote whether it is in the associated show’s showcase.
• Fields
  • User Profile Fields – extra profile fields to store the user’s name and age.
• Rules
  • Redirect after login – redirects to the front page view after logging in.
  • Pic of the Week – Views Bulk Operations Component – one rule to set and one to unset an image as Pic of Week
  • Showcase – one to set and one to unset an image as to be in a Show's Showcase
• Services
  • NickJr. Colour API – the Services settings for the custom API endpoints.
• Taxonomy
  • Shows Taxonomy – with Pic of the Week field
• Variables
  • Always harmonize views filters – Allows views to use both contextual and exposed filters for views
• Views
  • Front Page – Displays all images, defaults to only show images Sent to Nick
  • Showcase – Displays images in showcase, all if no show_id sent through
  • User Profile – Displays users images on their profile page

Schedule

Project timescale and budget was for an incredibly tight 10 days which we delivered in, however were subsequently hired for a further 7 days to re-factor the API and provide a few final additions to the administration interface.

Out-of-the-box, Drupal Services module provide a standard set of API calls so you can do things like create a user, a node, etc. so all the functionality required was there however required a number of calls to the API to achieve the desired workflow. It was decided to spend extra time creating custom API endpoints which would hide this functionality, reduce the number of API calls required, and make it easier for future users of the API.

The downside to this approach is the technical debt introduced when diverting away from the *.drupal.org infrastructure of support, i.e. core and contributed modules. In this instance the code was simply wrapping existing API calls and the client has access to technical resources so the decision was to take on the technical debt in order to produce a more tailored outcome.

Outcome

We used the extra time to create a RESTful API which abstracted away from Drupal Services out-of-the-box API endpoints along with coding an auto account creation system to link up user data from the front-end without users having to enter their email address, a requirement of Drupal’s user account creation. We documented the API using Drupal’s inbuilt help module and passed the system over to the client, helping them through building the system from the Drush make file.

Summary

The resulting system is a clean, simple-to-use CMS with RESTful API handling thousands of users on a daily basis. Content managers have a separate role with very restricted access so can only do what they need to do on the system.

We really enjoyed delivering this project, however alert anyone thinking of building similar to allow extra time, especially if it is their first Drupal experience - no matter how good specifications are, issues usually arise in one form or another. Also often once people do start using Drupal and see the possibilities available, requirements change and it is good to allow for those to be taken into account.

About Purkiss

Purkiss helps organisations onboard Drupal through consultancy, development, training and support. For more information about Purkiss services please visit http://purkiss.com

Modules/Themes/Distributions

boolean_formatter
cors
eva
features
filter_harmonizer
mimemail
rules
services
shiny
smtp
strongarm
views_bulk_operations
views

Why these modules/theme/distribution were chosen

• boolean_formatter – makes the user interface a little nicer by providing icons for boolean fields such as ticks and crosses
• CORS – required for connecting to the front-end
• EVA - we used an Entity Views Attachment to display users pictures on their profiles
• features - features allows you to export configuration settings to code
• filter_harmonizer - Views Filter Harmonizer fixes an issue when using multiple filters on views
• mimemail - used to send images via email
• rules - as described above, used for redirecting user on login and for custom views bulk operations
• services - used for the RESTful API
• shiny - an administration theme we are using for the entire site
• smtp - for sending email
• strongarm - for storing variables in features
• views_bulk_operations - to enable easy workflow, such as adding an image to a showcase
• views - so we can display the data we want easily

Community contributions

As the API is specific to the client and used mostly existing functionality we had no code to contribute. The only custom code was for automatic account creation and there are existing modules which provide similar functionality which we used the code from but is too specific to this install to re-use externally.

This is however the second time we’ve been asked for this sort of system, and with the growth of mobile apps we are currently working out whether it would be possible to create a distribution which will help get most of the way there - at least have relevant modules and perhaps an example scenario based on the simple image requirements for this project.

tags: case studiesDrupal PlanetPlanet Drupal