Difference between revisions of "JMO"
(→Download link to sample web app) (Tag: Visual edit) |
(Tag: Visual edit) |
||
(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| | + | |[[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| | + | |[[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| | + | |[[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| | + | |[[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| | + | |[[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| | + | |[[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| | + | |[[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| | + | |[[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| | + | |[[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=" | + | ! colspan="3" |New features of our WebApp |
|- | |- | ||
− | |[[File:Preview.PNG|thumb| | + | |[[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 15:33, 7 December 2016
Contents
- 1 List of group members
- 2 Introduction
- 3 Genesis
- 4 Time schedule
- 5 How you are dividing tasks within the group
- 6 What we achieved to implement
- 7 Screenshots and screen flows
- 8 Documented learning during project
- 9 Suggested improvements to APIs etc
- 10 Link to repositories
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.
3. Then the image is posted, and will be visible on the Facebook wall.
Implementation (technical point of view)
- 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) (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").
- Connect the DHIS2 user to the prefered social media account
- 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.
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.
Then he picks the file he wants send (local file on computer).
Next, he click on the reply button to send the file.
The other user receives the message with a download link.
When the user click on the download link, the file is downloaded to the computer.
If the recieved file is an image, a preview will be displayed within the chat service.
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.
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).
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).
Final solution social part
Modification of the DHIS dashboard | ||
---|---|---|
Publish on Facebook ( Part 1) | |
---|---|
Publish on Facebook ( Part 2) | |
---|---|
Publish on Twitter (Part 1) | |
---|---|
Publish on Twitter (Part 2) |
---|
New Dashboard design for maps and chart |
---|
New design of pivot Table with our Dashboard WebApp | |
---|---|
New features of our WebApp | ||
---|---|---|
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.