Difference between revisions of "JMO"

From mn/ifi/inf5750
Jump to: navigation, search
(Embedding images and send attachments to message)
Line 8: Line 8:
  
 
= Introduction =
 
= Introduction =
This page describes our project which take part of the course INF 5750 open source development at the university of Oslo.
+
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, composed by :  
+
JOM is a team of 3 master students from UiO :  
 
* Marius Munthe-Kaas
 
* Marius Munthe-Kaas
 
* Julien Vedrenne (exchange student from France)
 
* Julien Vedrenne (exchange student from France)
 
* Ophélie André (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 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
 
We chose the task : Messaging and integration with Facebook/Twitter
Line 38: Line 38:
  
 
===== Goal =====
 
===== 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  
+
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 
  
===== Proposed solution =====
+
Note! In the next example, we only focus on Facebook. In the final solution, Twitter will also be supported.  
 
 
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 then share his work with other people (not accociated with DHIS2) 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)
 
 
 
The following screenshot are schemes of a possible solution.
 
 
 
Note! In the next example, we only focus on Facebook. In the final solution, Twitter is also supported.  
 
  
 
====== User-perspective ======
 
====== User-perspective ======
Line 76: Line 68:
  
 
===== Current state =====
 
===== Current state =====
Currently, Only text messages can be sent between users of DHIS2. In case of support, it would be preferable to allow the user to attach an images. For instance, this could be a screenshot of an error message.  
+
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.  
  
 
[[File:Chat_example.png|400px|thumb|center|upright=0.35|"Currently state of message on DHIS2 App"]]
 
[[File:Chat_example.png|400px|thumb|center|upright=0.35|"Currently state of message on DHIS2 App"]]
Line 82: Line 74:
  
 
===== Proposed solution =====
 
===== 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 to the chat.
+
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 ======
 
====== User perspective ======
Line 99: Line 91:
 
[[File:Message_with_download_link.PNG|400px|thumb|center|upright=0.35|"Download link inside chat"]]
 
[[File:Message_with_download_link.PNG|400px|thumb|center|upright=0.35|"Download link inside chat"]]
  
When the user click on the download link, the file is downloaded on the computer.
+
When the user click on the download link, the file is downloaded to the computer.
  
 
[[File:File_download.PNG|400px|thumb|center|upright=0.35|"The file is downloaded"]]
 
[[File:File_download.PNG|400px|thumb|center|upright=0.35|"The file is downloaded"]]

Revision as of 10:16, 28 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>

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

Milestone

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

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 to/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

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