Use Google Docs and TabletopJS to Host Data for News Apps

Our data desk uses templates to make News Apps quickly. We have a Style Book that contains a set of News App templates we can modify and publish very fast.

One problem of this approach has been how to get the data from the journalist to an app template smoothly. Journalists usually don’t code, so we needed some easy, flexible tool for this.

Our solution is to use Google Docs and TabletopJS as CMS for News Apps. Basically we try to separate News App code and content from each other.

When journalist wants to make a News App from a template, he or she enters the data to a preformatted Google Spreadsheet (with our help). The app then gets the data from Google Docs. Journalists can concentrate on the content and coders can make any twists to template that might be needed.

Benefits for this approach are tangible.  Journalists can do their work in their own pace and they see instantly the preview of the changes they make. This also reduces our work, as we don’t need to hardcode the content. Plus, the the journalist can make as many revisions as they please just until the deadline. Many people can work on one  spreadsheet, so it makes work faster and there are no problems with version control.

Technically, an app fetches data from Google Spreadsheets using TabletopJS by Jonathan Soma. Data is in JSON and later an array in Javascript. When we push the app to production, we pull the data from Google Docs to a local proxy. This is done by simple Ruby program from Tabletop package. Sometimes we also have a cron script updating the proxy if the data is changing regularly.

Using proxy is important, as Google Docs API has rate limits. Before we implemented proxy, one very popular app failed during the first rush after it was published.

Google Docs  and TabletopJS work best with numeric data and short texts. For example our quiz template stores all question texts in Google Docs. With longer texts this approach is not very flexible. Texts in our web layouts (like this) are still hard-coded. We are still looking for a solution that would allow us to use texts in similar way.





Leave a Reply