Difference between revisions of "JMO"

From mn/ifi/inf5750
Jump to: navigation, search
Line 46: Line 46:
 
What we would like to implement:
 
What we would like to implement:
  
Description : We would like to allow the user to share data from DHIS2 app on social medias. He could thus share his work with other people (outside world) and increase the visibility of DHIS2. We would like to propose the user to share graphs / pivot table / maps on famous social media : Facebook and Twitter.
+
Description : We would like to allow the user to share data from the DHIS2 app on social medias. He could thus share his work with other people (no accociated with DHIS2) and increase the visibility of DHIS2. We would like to encourage the user to share graphs / pivot table / maps on famous social media : Facebook and Twitter.
  
 
The following screenshot are schemes of what our solution might look like.  
 
The following screenshot are schemes of what our solution might look like.  
Line 52: Line 52:
 
<nowiki> </nowiki>[insert what it would look like + user story]
 
<nowiki> </nowiki>[insert what it would look like + user story]
  
If a user find useful to share a graphic / pivot table / map, he can click on the desired share button (Twitter or Facebook)
+
If a user find it useful to share a graphic / pivot table / map, he can click on the desired share button (Twitter or Facebook)
  
 
====== '''''Implementation (technical point of view)''''' ======
 
====== '''''Implementation (technical point of view)''''' ======
# Add a share button on each widget present on the dashboard  
+
# Add a share button to each widget present on the dashboard  
 
# Create an image of the widget, with appropriate dimensions (requirements of Facebook and Twitter API)
 
# Create an image of the widget, with appropriate dimensions (requirements of Facebook and Twitter API)
 
# Connect the DHIS2 user to  the prefered social media account
 
# Connect the DHIS2 user to  the prefered social media account
Line 81: Line 81:
 
[[File:Add_button_send.png|400px|thumb|center|upright=0.35|"Button send file and image"]]
 
[[File:Add_button_send.png|400px|thumb|center|upright=0.35|"Button send file and image"]]
  
After that it picks his file (present on his computer).
+
After that it picks his file (local file on computer).
  
 
[[File:Windows_pick_file.png|400px|thumb|center|upright=0.35|"Windows pick file"]]
 
[[File:Windows_pick_file.png|400px|thumb|center|upright=0.35|"Windows pick file"]]
Line 87: Line 87:
 
Click on the reply button to send the file.
 
Click on the reply button to send the file.
  
The other user receives this message and can download it or if it is an image he can see a preview of this image directly embedded on the chat service.
+
The other user receives the message with a download link. If the recieved file is an image, a preview will be displayed within the chat service.
  
 
[[File:Image_embedding.png|400px|thumb|center|upright=0.35|"Image embedding on chat"]]
 
[[File:Image_embedding.png|400px|thumb|center|upright=0.35|"Image embedding on chat"]]
  
 
====== Technical implementation ======
 
====== Technical implementation ======
We have to add a button which allows the user to select an attached file or image. After we have to upload and store this file to the database. This action allows other people to download it.
+
'''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.
 +
 
 +
'''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.  
  
 
= Time schedule =
 
= Time schedule =
Line 101: Line 103:
 
= Link to repository =
 
= Link to repository =
 
  https://github.com/mariusmu/dhis2-share-app
 
  https://github.com/mariusmu/dhis2-share-app
 +
The respository will be active from September 27th
 +
 
= Download link to sample web app=
 
= Download link to sample web app=

Revision as of 13:00, 25 October 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>

Summary of requirements

Introduction

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

JOM is a team of 3 master students from UiO, composed by :

  • 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 differents and implement it 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

Issue

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 he could share his work with other people (outside world) and increase the visibility of DHIS2

Proposed solution

What we would like to implement:

Description : We would like to allow the user to share data from the DHIS2 app on social medias. He could thus share his work with other people (no accociated with DHIS2) and increase the visibility of DHIS2. We would like to encourage the user to share graphs / pivot table / maps on famous social media : Facebook and Twitter.

The following screenshot are schemes of what our solution might look like.

[insert what it would look like + user story]

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

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)
  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)
  • Facebook SDK (javascript)

Embedding images and send attachments to message

Current state

Currently, We can just send text message to each other inside a textarea.

"Currently state of message on DHIS2 App"


Proposed solution

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

User perspective

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

"Button send file and image"

After that it picks his file (local file on computer).

"Windows pick file"

Click on the reply button to send the file.

The other user receives the message with a download link. If the recieved file is an image, a preview will be displayed within the chat service.

"Image embedding on 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.

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.

Time schedule

How you are dividing tasks within the group

Screenshots and screen flows

Documented learning during project

Suggested improvements to APIs etc

Link to repository

https://github.com/mariusmu/dhis2-share-app

The respository will be active from September 27th

Download link to sample web app