Difference between revisions of "JMO"

From mn/ifi/inf5750
Jump to: navigation, search
(Download link to sample web app)
 
(6 intermediate revisions by 2 users not shown)
Line 170: Line 170:
 
** Chose between Facebook and Twitter
 
** Chose between Facebook and Twitter
 
** Add a commentary with the shared data (limited to 140 characters for Twitter)
 
** Add a commentary with the shared data (limited to 140 characters for Twitter)
** Upload the data as an image on Facebook or Twitter
+
** Upload the data as an image (not a simple link to make the data accessible to anyone!) on Facebook or Twitter
 
* Like the facebook page of DHIS2
 
* Like the facebook page of DHIS2
 
* Contact the facebook page of DHIS2 via Messenger
 
* Contact the facebook page of DHIS2 via Messenger
Line 182: Line 182:
 
** Chose between Facebook and Twitter
 
** Chose between Facebook and Twitter
 
** Add a commentary with the shared data (limited to 140 characters for Twitter)
 
** Add a commentary with the shared data (limited to 140 characters for Twitter)
** Upload the data as an image on Facebook or Twitter
+
** Upload the data as an image (not a simple link to make the data accessible to anyone!) on Facebook or Twitter
 
* Like the facebook page of DHIS2
 
* Like the facebook page of DHIS2
 
* Contact the facebook page of DHIS2 via Messenger
 
* Contact the facebook page of DHIS2 via Messenger
Line 222: Line 222:
 
! colspan="3" |Modification of the DHIS dashboard  
 
! colspan="3" |Modification of the DHIS dashboard  
 
|-
 
|-
|[[File:Widget.PNG|thumb|420x420px|Add a share button on each widget present on the main dashboard of DHIS]]
+
|[[File:Widget.PNG|thumb|400x400px|Add a share button on each widget present on the main dashboard of DHIS]]
 
|[[File:Twi or fac.PNG|thumb|108x108px|Choose between Twitter or Facebook]]
 
|[[File:Twi or fac.PNG|thumb|108x108px|Choose between Twitter or Facebook]]
|[[File:Loading image.PNG|thumb|400x400px|We wait until the image is loaded ]]
+
|[[File:Loading image.PNG|thumb|500x500px|We wait until the image is loaded ]]
 
|}
 
|}
 
{| class="wikitable"
 
{| class="wikitable"
 
! colspan="2" |Publish on Facebook ( Part 1)
 
! colspan="2" |Publish on Facebook ( Part 1)
 
|-
 
|-
|[[File:Pop up comment facebook.PNG|thumb|450x450px|Pop up opened to present the image shared and to add a comment for the publication]]
+
|[[File:Pop up comment facebook.PNG|thumb|505x505px|Pop up opened to present the image shared and to add a comment for the publication]]
|[[File:Login facebook.PNG|thumb|453x453px|Login page to use your own account to publish content]]
+
|[[File:Login facebook.PNG|thumb|480x480px|Login page to use your own account to publish content]]
 
|}
 
|}
 
{| class="wikitable"
 
{| class="wikitable"
 
! colspan="2" |Publish on Facebook ( Part 2)
 
! colspan="2" |Publish on Facebook ( Part 2)
 
|-
 
|-
|[[File:Authorization facebook.PNG|thumb|452x452px|You have to authorize facebook to publish on your wall]]
+
|[[File:Authorization facebook.PNG|thumb|500x500px|You have to authorize facebook to publish on your wall]]
 
|[[File:Publish facebook.PNG|thumb|471x471px|Now the image it's added to your picture album and a publication is present on your wall with the commentary that you specified on the pop up ]]
 
|[[File:Publish facebook.PNG|thumb|471x471px|Now the image it's added to your picture album and a publication is present on your wall with the commentary that you specified on the pop up ]]
 
|}
 
|}
Line 241: Line 241:
 
! colspan="2" |Publish on Twitter (Part 1)
 
! colspan="2" |Publish on Twitter (Part 1)
 
|-
 
|-
|[[File:Pop up comment twitter.PNG|thumb|450x450px|The same Pop up than facebook we just add a limit of 140 caracters for one tweet ]]
+
|[[File:Pop up comment twitter.PNG|thumb|579x579px|The same Pop up than facebook we just add a limit of 140 caracters for one tweet ]]
|[[File:Login twitter.PNG|thumb|601x601px|We have to login with your twitter account to publish the image]]
+
|[[File:Login twitter.PNG|thumb|480x480px|We have to login with our twitter account to publish the image]]
 
|}
 
|}
 
{| class="wikitable"
 
{| class="wikitable"
Line 252: Line 252:
 
!New Dashboard design for maps and chart  
 
!New Dashboard design for maps and chart  
 
|-
 
|-
|[[File:New dash with searchbar.PNG|thumb|1200x1200px|The new dashboard ( a WebApp) with it's search Bar]]
+
|[[File:New dash with searchbar.PNG|thumb|1050x1050px|The new dashboard ( a WebApp) with it's search Bar]]
 
|}
 
|}
 
{| class="wikitable"
 
{| class="wikitable"
 
! colspan="2" |New design of pivot Table with our Dashboard WebApp
 
! colspan="2" |New design of pivot Table with our Dashboard WebApp
 
|-
 
|-
|[[File:Pivot table list.PNG|thumb|900x900px|New design for the presentation of report table with a list]]
+
|[[File:Pivot table list.PNG|thumb|700x700px|New design for the presentation of report table with a list]]
 
|[[File:Report table.PNG|thumb|Print report table with the DHIS plugin on our new dashboard webapp]]
 
|[[File:Report table.PNG|thumb|Print report table with the DHIS plugin on our new dashboard webapp]]
 
|}
 
|}
 
{| class="wikitable"
 
{| class="wikitable"
! colspan="2" |New features of our WebApp
+
! colspan="3" |New features of our WebApp
 
|-
 
|-
|[[File:Preview.PNG|thumb|400x400px|Preview functionnality of our dashboard webApp]]
+
|[[File:Upload webapp.PNG|thumb|350x350px|WebApp (Social App) upload on DHIS2 test server]]
 +
|[[File:Preview.PNG|thumb|350x350px|Preview functionnality of our dashboard webApp]]
 
|[[File:Facebook functionnality.PNG|thumb|We add facebook like and share DHIS page with your facebook account. Furthemore you can contact the page of DHIS with the Message Us plugin. ]]
 
|[[File:Facebook functionnality.PNG|thumb|We add facebook like and share DHIS page with your facebook account. Furthemore you can contact the page of DHIS with the Message Us plugin. ]]
 
|}
 
|}
Line 273: Line 274:
 
* React/Redux (where Redux are most preferable to use)
 
* React/Redux (where Redux are most preferable to use)
 
* Twitter API/Facebook Graph API
 
* Twitter API/Facebook Graph API
 +
* Twitter/Facebook developer apps
 
* OAuth-authentication
 
* OAuth-authentication
 +
* DHIS2 API and plugins
 
* Bootstrap
 
* Bootstrap
 
* Webpack-bundling and development-server
 
* Webpack-bundling and development-server

Latest revision as of 14:33, 7 December 2016

List of group members

Ophélie André <ophelia@ifi.uio.no>

Marius Munthe-Kaas <mariusmu@ifi.uio.no>

Julien Vedrenne <julienve@ifi.uio.no>

Introduction

This page describes our project which takes part of the course INF 5750 open source development at the University of Oslo.

JOM is a team of 3 master students from UiO :

  • Marius Munthe-Kaas
  • Julien Vedrenne (exchange student from France)
  • Ophélie André (exchange student from France)

We were asked to choose a subject from 7 proposed tasks and implement it as an app on the DHIS2 platform.

We chose the task : Messaging and integration with Facebook/Twitter

With the following requirements :

“Sharing favorites on Facebook / Twitter, and using fb / twitter api to post DHIS 2 Charts. Add support for sharing favorites of pivot tables, charts and maps to Facebook.

Also Support for 1) adding attachments and 2) embedding images in DHIS2 messages and . Useful for example to attach screenshots when supporting users. This should use the new Web API for file uploads and storage.”

Goal

General

Genesis

Sharing favorites (charts/maps/pivot tables) on Twitter and Facebook

Current State
Currently DHIS2 does not have functionality to allow users to share graphics. such as charts, pivot tables and maps.
Goal

Create a “easy to use” web interface that allows the user to share their favorite widgets to their friends on social media. Thus the user could share his work with other people and increase the visibility of DHIS2. We would like to encourage the user to share graphs / pivot table / maps on social media : (Facebook and Twitter

Note! In the next example, we only focus on Facebook. In the final solution, Twitter will also be supported.

User-perspective

1, If a user find it useful to share a graphic / pivot table / map, he can click on the desired share button (Twitter or Facebook)

2. Then he must accept the Facebook authorization message, to be allowed to publish the post on his wall.

"Accept Facebook conditions to share on your wall"

3. Then the image is posted, and will be visible on the Facebook wall.

"Post on your wall"
Implementation (technical point of view)
  1. Add a share button to each widget present on the dashboard
  2. Create an image of the widget, with appropriate dimensions (requirements of Facebook and Twitter API) (We collect an image of the map that the user wants to share with the API ( ex : "https://play.dhis2.org/demo/api/maps/ZBjCfSaLSqD/data?width=800").
  3. Connect the DHIS2 user to  the prefered social media account
  4. Use Facebook/Twitter API to publish this image ( with optional description/hashtags ) on the user’s own social page
Technologies to use: (might change)
  • React/Redux (ES2015)
  • Twitter SDK (javascript) / API
  • Facebook SDK (javascript) / API
  • DHIS2 API

Embedding images and send attachments to message

Current state

Currently, Only text messages can be sent between users of DHIS2. In case of support messages, it would be preferable to allow the user to attach images. For instance, screenshots of error messages.

"Currently state of message on DHIS2 App"


Proposed solution

Adding the opportunity for a user to send files inside a message. Furthemore, share image on the message section and embedding this image directly into the chat.

User perspective

The user have to click on a button to attach file to a message.

"Button send file and image"

Then he picks the file he wants send (local file on computer).

"Windows pick file"

Next, he click on the reply button to send the file.

The other user receives the message with a download link.

"Download link inside chat"

When the user click on the download link, the file is downloaded to the computer.

"The file is downloaded"

If the recieved file is an image, a preview will be displayed within the chat service.

"Image embedding inside chat"
Technical implementation

Sender (Write message): Add a button which allows the user to select an attached file or image. In case of an image, create a thumbnail, and attach this to the message. In both cases allow the user to supply a description of the file. The upload should happen in the background (prior to the post action)

Receiver (Read message): If the file is an image, preload the thumbnail, and link it to the full resolution image. Otherwise just print a link to the file within a box that includes the description.

Technologies to use: (might change)

  • React/Redux (ES2015)
  • DHIS2 API
  • React Router

Time schedule

Kick-off (till late October)

First meetings were used to :

  • meet the team
  • get to know each other (our skills)
  • analyze the requirements
  • get a clear understanding of goals and architecture
  • start looking into/playing with the different technologies (API, SDK, apps) and see what can be done with it

Table of group study time each week

Day Start time End time Number of hours
Tuesday 10.00 15.00 5 Hours
Friday 14.00 18.00 4 Hours
Week end 13.00 18.00 5 Hours

Development (late October till late November)

When we started the development, even with separated tasks, we decided to meet at least once a week (usually every Tuesday or Friday) to

  • review the progress of the project
  • discuss about different problems that each of us were facing
  • trying to find solutions
  • discuss about next functionalities to implement

Wiki documentation and presentation (early December)

Once the project was done and that we submitted it, we met to complete the wiki page and prepare the oral examination.

How you are dividing tasks within the group

Soon, we will devide the tasks within the group. At the current point, we have worked together closely to get an overview of what we are to implement.

After having carefully analyzed requirements, we divided the project into two smaller sub-projects, one focusing on the message functionality and the other one focusing on the social functionality. Indeed, the project was huge and the social part and the message part were not related to each other.

We decided to emphasize on the social functionality as it was dealing with more than one API (DHIS2, Facebook and Twitter) and thus two people (Julien Vedrenne and Ophélie André) worked on it; whereas the third one (Marius Munthe-Kaas) worked on the message functionality. 

What we achieved to implement

  • Social part
    • Native integration to the DHIS2 dashboard
    • Web app
  • Message part
    • Native integration to DHIS2

Social native integration to the DHIS2 dashboard

  • The sharing functionality
    • Chose between Facebook and Twitter
    • Add a commentary with the shared data (limited to 140 characters for Twitter)
    • Upload the data as an image (not a simple link to make the data accessible to anyone!) on Facebook or Twitter
  • Like the facebook page of DHIS2
  • Contact the facebook page of DHIS2 via Messenger
  • Share the DHIS2 website on Facebook

Social web app to upload in DHIS2

  • Display a sort of dashboard to the user with maps, chart and pivot tables
  • Sort by category
  • Search by names
  • The sharing functionality
    • Chose between Facebook and Twitter
    • Add a commentary with the shared data (limited to 140 characters for Twitter)
    • Upload the data as an image (not a simple link to make the data accessible to anyone!) on Facebook or Twitter
  • Like the facebook page of DHIS2
  • Contact the facebook page of DHIS2 via Messenger
  • Share the DHIS2 website on Facebook

Message native integration to the DHIS2 dashboard

  • Attach files to message conversation
    • Ability to add/remove multiple upload files to each new conversation reply (and new messages)
  • Display Images file as native HTML images (thumbnails)
  • Display regular-file attachments as link-to.
  • External storage of file
    • We made our own fileserver (specialized for our requirements)
    • One can easily replace the file upload/retrieval with Dropbox support (also included in comments)

Screenshots and screen flows

Final solution messsage

File attachment:

As in the proposed solution we decided to support two types of files – images and regular files. These are handled differently depending on the media-type. We wanted to allow the users share images that could be easily displayed for both the receiver and the sender embedded in the conversations. In our solution, regular files are shown as a link with a filename.

Attachment files are displayed either as images or link to the file

The text field are shown similar on "Write new message" and "Write reply". The technical implantation are somehow different in that in "Reply" the actual post-action happens within React, while in the "Write new message" the existing form field text are update with a stringified JSON-object (containing attachment and text).

The attachment is shown in the box under the text field

Technical implementation (summarized shortly)

This solution uses a combination of Redux and React's own state for state management. Redux is used where the state will be shared by multiple components, while React's own state is used where the states are more easily passed down the component hierarchy (and self-contained).

As for the link between conversation and attachment, we decided not to change the existing DHIS2 core API. Instead we simply used the conversation object's own text field to hold a parsed JSON object containing both file-link object as well as the raw text. Instead of transferring the entire message functionality to React, we only made the core functionality of file attachment, and updated the existing view files to work with those components. This required a change in both the "Read message" for parsing that object, and of course in the "Send message"-functionality.

Since DHIS2 currently not support regular file uploads we made our own additional file server (see the link below).

Sequence diagram

Final solution social part

Modification of the DHIS dashboard
Add a share button on each widget present on the main dashboard of DHIS
Choose between Twitter or Facebook
We wait until the image is loaded
Publish on Facebook ( Part 1)
Pop up opened to present the image shared and to add a comment for the publication
Login page to use your own account to publish content
Publish on Facebook ( Part 2)
You have to authorize facebook to publish on your wall
Now the image it's added to your picture album and a publication is present on your wall with the commentary that you specified on the pop up
Publish on Twitter (Part 1)
The same Pop up than facebook we just add a limit of 140 caracters for one tweet
We have to login with our twitter account to publish the image
Publish on Twitter (Part 2)
We could see the publication of the image with the right comment on my twitter account
New Dashboard design for maps and chart
The new dashboard ( a WebApp) with it's search Bar
New design of pivot Table with our Dashboard WebApp
New design for the presentation of report table with a list
Print report table with the DHIS plugin on our new dashboard webapp
New features of our WebApp
WebApp (Social App) upload on DHIS2 test server
Preview functionnality of our dashboard webApp
We add facebook like and share DHIS page with your facebook account. Furthemore you can contact the page of DHIS with the Message Us plugin.

Documented learning during project

We had variable knowledge of React development before we started the project, and no experience with DHIS2. We have used a lot of time trying to understand the structure of the DHIS2 system, and how to connect with the API. In our project external APIs like Facebook Graph and Twitter API is also used. During the project we have learned the limitations and functionality of the different APIs and how important APIs are for interfacing different systems. Additionally we have learned different kind of implementations techniques and the limitations of native implementation (change of DHIS2 view) and app-development.

Technical learning outcome:

  • React/Redux (where Redux are most preferable to use)
  • Twitter API/Facebook Graph API
  • Twitter/Facebook developer apps
  • OAuth-authentication
  • DHIS2 API and plugins
  • Bootstrap
  • Webpack-bundling and development-server
  • File-structure and how to use blobs
  • ExpressJS
  • Github (with branching/history)

Suggested improvements to APIs etc

  • Login: Add Cors-support foro /uaa endpoint (cannot get oAuth creation to work with javascript preflight option)
  • When you send messages to people you are not allowed to send to, an exception occures. It took us a while to understand that this actually was a permission error
  • Messages: In messageConversation replies, add support for different fields (not only raw text as body). Usefull for attaching other kinds of information
  • Conversations: When posting the reference id for the conversation should be return
    • {   "httpStatus": "Created",   "httpStatusCode": 201,   "status": "OK",   "message": "Message conversation created".   "id" : "here an id should be presented" }
  • Maps/Charts request favorites:
    • there were a lot of 505 Internal Server Error which limited us to access datas.
    • The final data (images) are not very sticky with the original content, and are sometimes empty.
  • Pivot Table Plugin: One downside of using it was that there is no callbacks when the data are loaded and that was kind of restrictive.

Link to repositories

https://github.com/mariusmu/dhis2-message-app/tree/message-app
https://github.com/mariusmu/dhis2-message-app/tree/social
https://github.com/AndreOphelie/dhis-web-dashboard-integration
https://github.com/mariusmu/dhis2-jmo-fileserver


All of the repositories are public.

  • Message-app: the message embedded image and attached files functionalities.
  • Social: the social web app.
  • dhis-web-dashboard-integration: the social functionnality directly integrated into the existing dashboard.