Applause Dynamic Infographic Generator Assembly Specification

1.     Project Overview

1.1     System Description

The client (Applause) would like to develop service (Infographic Generator) that generates infographic for apps based on analytics data gathered by the client, the infograpic would be used for web presentation and print publication. The app testing and analytics data are provided through a standard web-based API call in JSON format.

This application (Infographic Generator) will be implemented using Python and deployed on Google App Engine, it is responsible for pulling and parsing analytics data from the web API, and generating the infographic based on the collected data.

This assembly will implement the entire application.

1.2     Competition Task Overview

A complete list of deliverables can be found in the TopCoder Assembly competition Tutorial at:

http://apps.topcoder.com/wiki/display/tc/Assembly+Competition+Tutorials

Note: Please read the whole Application Design Specification first. All the details not mentioned in this specification are provided in that document.

1.2.1     Google App Engine & Code Organization

This application will be developed and deployed on Google App Engine, please refer to the official tutorial to get started if you are not familiar with Python development on Google App Engine.

The code of the application should be organized as attached document.

1.2.2     Python Classes & Modules

The following classes and modules on "Main Class Diagram" are in scope of this assembly:

• InfographicData
• Attribute
• Tip
• Feedback
• Offering
• InfographicDataException
• infographic_data.py
• InfographicHandler
• handlers.py
• settings.py
• main.py

Extensive implementation details are provided at TCUML class and method documentations.

1.2.3     Infographic jinja2 template

Data Mapping

Basically the infographic will be a web page written with HTML and CSS. jinja2 will be used as the template tool. If you're not familiar with jinja2, please get started with this.

An UI prototype built using HTML and CSS will be provided to assemblers, and assemblers are expected to replace hard-coded infographic information/data with jinja2 variables. A single root variable "data" (of type InfographicData) is available to the jinja2 template. Since the business logic for analytics data extraction is taken care of by InfographicHandler and infographic_data module, no complex control structures (such as if-else) are expected in the jinja2 template.

The following summarizes the mapping from infographic data item (see "Applause Infographic Data Mapping.docx") to jinja2 variables:

Data Item	Variable
1. Users are saying	{{data.headlines[0]}}
2. Test in the Wild	{{data.headlines[1]}}
3. Uncover issues in real time	{{data.headlines[2]}}
4.  Logo for application	{{data.app_logo}}
5. Title	{{data.app_title}}
6. Applause Score	{{data.applause_score}}
7. Positive feedback	Rating: {{data.positive_feedbacks[0].rating}} Text: {{data.positive_feedbacks[0].text}}
8. 9. Negative Feedback	Rating 1: {{data.negative_feedbacks[0].rating}} Text 1: {{data.negative_feedbacks[0].text}} Rating 2: {{data.negative_feedbacks[1].rating}} Text 2: {{data.negative_feedbacks[1].text}}
10. Best attribute	{{data.best_attributes[0].name}}
11. Spider Graph	{{data.spider_graph_url}}
12. Positive Card	Tip Title: {{data.best_attributes[0].tips_and_tricks[0].title}} Tip Description: {{data.best_attributes[0].tips_and_tricks[0].description}} Tip Title Image: {{data.best_attributes[0].tips_and_tricks[0].title_image}} Tip User Image: {{data.best_attributes[0].tips_and_tricks[0].user_image}} Offering Name: {{data.best_attributes[0].offerings[0].name}} Offering Image: {{data.best_attributes[0].offerings[0].image}} Attribute Score: {{data.best_attributes[0].applause_score}} Attribute Trend: {{data.best_attributes[0].trend}} Note different "trend" value will correspond to different icons. Attribute Category Score: {{data.best_attributes[0].category_score}} Review: TBD
13.15.16.  Negative feedback 1, 2, 3	data.worst_attributes[0] data.worst_attributes[1] data.worst_attributes[2] Mapping for each attribute is the same as "12. Positive Card".
14. Positive Token	The image of the positive token will be based on {{data.best_attributes[0].name}}
17. Negative tokens	The image of the negative tokens will be based on {{data.worst_attributes[0].name}}, {{data.worst_attributes[1].name}}, {{data.worst_attributes[2].name}}

Positive/Negative Tokens

Note that since the numbers of positive/negative tokens are fixed on the infographic, it is assumed that the token positions are fixed (i.e. the positive token is near the START of the lane, negative tokens are near the FINISH of the lane). In summary, from left to right on the racing lane are data.worst_attributes[0], data.worst_attributes[1], data.worst_attributes[2] and data.best_attributes[0].

Spider Graph

Since client provides the Spider Graph for each app as a web page (e.g. https://mjohnson.applause.com/radarchart?appids=333903271&width=500 ), the infographic web page will embed the Spider Graph in an iframe with proper CSS style to hide borders and scroll bars. Please also note that the "width" of the iframe should be set as the value of "width" query parameter in the Spider Graph URL, so that the iframe can fit to the infographic web page best.

e.g.

<iframe src="{{data.spider_graph_url}}" frameBorder="0"              style="width:500px; height:500px; overflow-y: hidden; overflow-x: hidden;"> </iframe>

 

1.3     Technology overview

• Python 2.7
• HTML
• CSS
• JSON
• Google App Engine
• webapp2 (latest version at Google App Engine)
• jinja2 (latest version at Google App Engine)

1.5     Existing Documents

·         Class Diagrams

·         Sequence Diagrams

·         Application Design Specification

·         Assembly Specification

·         Applause Analytics Data Service JSON Sample (client-provided)

·         Applause Infographic Data Mapping Document (client-provided)

·         Infographic Graphic Design (client-provided)

Final Submission Guidelines

Deliverables

• Source code and configuration files.
• Deployment guide to configure and verify the application.
• It is important that the application must be deployed to Google App Engine.