From mn/ifi/inf5750
Revision as of 10:45, 1 December 2016 by (talk | contribs) (removed duplicate entry)

(diff) ← Older revision | Latest revision (diff) | Newer revision → (diff)
Jump to: navigation, search


Project C

Social integration with Facebook and Twitter using their respective APIs to share favourites of maps, charts and pivot-tables.

We will do this by making a Webapp

Group members

  • Christopher Bauge (
  • Fredrik Hov (
  • Mathias Næss (


Create page - Check

Milestone 1: October 28

  • Document features and architecture on Wiki
  • Show understanding of your project task

Milestone 2: November 4

  • Skeleton app and database running

Milestone 3: November 10

  • Able to fetch and display charts and maps. Fetching pivot tables

Milestone 4: November 20

  • Facebook and twitter share working

Milestone 5: November 24

  • App installed on DHIS2 Test

Summary of requirements

  • Get app framework up and running
  • Pull data from API, for maps, charts and tables. HTML to canvas for easily shareable tables.
  • Implement share to Facebook and Twitter

Features and Architecture

The project has changed as of 26.10.2016, and no longer includes extending the core messaging function to handle attachments or embedded images.

Currently planned features:

  • Easy to use GUI [DONE]
    • Show available resources (type)
    • Show available items (defined by type)
    • Filter on Name [Cancelled]
    • Dynamic preview of data (only charts/maps, not on mobile for now) [Cancelled]

Optional wanted features:

  • Change dynamic preview to grid + thumbnail [not implemented]
  • Filter by Country [not implemented]
  • Responsive design [not implemented]
  • Selection based settings configuration with a list of possible other data-objects that can be shared (double list, arrows choose item/all items active) [not implemented]


The application will be built as an App available for install with the DHIS2 App management. After implementing a simple frame for the items to be contained in, we are looking at dividing the application into some main parts. One part should handle settings and preferably a linking option for facebook or twitter so that the user can disconnect their account from the service. If there is time,for implementing a selection based configuration for what items should be available to share.

We are mainly looking at using React to handle the application since the virtualDOM will allow us to take "cache" the different previews after the user has hovered the item, this will be especially useful if we are able to implement the grid based selection, as the grid would be our "root" for the virtualDom. We will be using HTML2Canvas for handling the translation of the pivot tables into images.

Short List of technologies/libraries(Subject to change)

Time schedule

   -  4th of November: App running
 5 - 11th of November: Live preview
12 - 18th of November: Posting to facebook/twitter
19 - 25th of November: Extra features
25 - 26th of November: Polishing/Tweaking
     27th of November: Delivery

How we are dividing tasks within the group

Everyone has worked on everything mostly.

We have not had a clear division of tasks mostly because we are learning as we go, so one person might at one point scrap the code of another in favour of something easier to write.

Screenshots and screen flows

Documented learning during project

Starting out we had little to no experience with javascript and nothing with react.

After fooling around trying to figure out how we wanted to do the assignment, we landed on an initial whiteboxed design on paper. Implementing this proved difficult as we had no experience with react what so ever. After turning to Youtube to follow a series of tutorials on "React for dummies" we got started with the initial design. The design was broken down into components step by step, starting with the larger components that mounts smaller components within them again, and then subfolders for the items mounted by a parent component. This proved to be a logically sound way of doing it, and the work progressed quite a bit when broken down like this.

Early on we had decided on a dropdown picklist that after selection brings forth a list of available maps presented through the API, this was functioning okay, and we drew some experience from a previous project in INF3331 about how to make the list reasonable. The first draft of the design included separate buttons below the list of available items that would either share to facebook or twitter, and conversely we had made a comments-section that was supposed to be attached as the message, but this was scrapped later due to moving away from that solution and rather using an npm package to generate the necessay components enabling sharing to facebook/twitter.

Suggested improvements to the API

Link to repository

The repository can be found at

Download link to sample web app