Difference between revisions of "JMO"
(→Embedding images and send attachments to message) (Tag: Visual edit) |
(Tag: Visual edit) |
||
(38 intermediate revisions by 3 users not shown) | |||
Line 8: | Line 8: | ||
= Introduction = | = Introduction = | ||
− | This page describes our project which | + | 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 | + | 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 | + | 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 28: | Line 28: | ||
General | General | ||
− | = | + | = Genesis = |
=== Sharing favorites (charts/maps/pivot tables) on Twitter and Facebook === | === Sharing favorites (charts/maps/pivot tables) on Twitter and Facebook === | ||
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 | + | 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. | |
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | Note! In the next example, we only focus on Facebook. In the final solution, Twitter | ||
====== User-perspective ====== | ====== 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) | 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 | + | 2. Then he must accept the Facebook authorization message, to be allowed to publish the post on his wall. |
− | [[File:Facebook1.PNG| | + | [[File:Facebook1.PNG|400x400px|thumb|center|"Accept Facebook conditions to share on your wall"]] |
3. Then the image is posted, and will be visible on the Facebook wall. | 3. Then the image is posted, and will be visible on the Facebook wall. | ||
− | [[File:Facebook2.PNG| | + | [[File:Facebook2.PNG|438x438px|thumb|center|"Post on your wall"]] |
====== '''''Implementation (technical point of view)''''' ====== | ====== '''''Implementation (technical point of view)''''' ====== | ||
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 | + | 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| | + | [[File:Chat_example.png|500x500px|thumb|center|"Currently state of message on DHIS2 App"]] |
===== 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 | + | 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 ====== | ||
The user have to click on a button to attach file to a message. | The user have to click on a button to attach file to a message. | ||
− | [[File:Add_button_send.png| | + | [[File:Add_button_send.png|600x600px|thumb|center|"Button send file and image"]] |
Then he picks the file he wants send (local file on computer). | Then he picks the file he wants send (local file on computer). | ||
− | [[File:Windows_pick_file.png| | + | [[File:Windows_pick_file.png|400x400px|thumb|center|"Windows pick file"]] |
Next, he click on the reply button to send the file. | Next, he click on the reply button to send the file. | ||
Line 97: | Line 89: | ||
The other user receives the message with a download link. | The other user receives the message with a download link. | ||
− | [[File:Message_with_download_link.PNG| | + | [[File:Message_with_download_link.PNG|600x600px|thumb|center|"Download link inside chat"]] |
− | When the user click on the download link, the file is downloaded | + | 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"]] | ||
Line 105: | Line 97: | ||
If the recieved file is an image, a preview will be displayed within the chat service. | If the recieved file is an image, a preview will be displayed within the chat service. | ||
− | [[File:Image_embedding.png| | + | [[File:Image_embedding.png|500x500px|thumb|center|"Image embedding inside chat"]] |
====== Technical implementation ====== | ====== Technical implementation ====== | ||
Line 115: | Line 107: | ||
* React/Redux (ES2015) | * React/Redux (ES2015) | ||
* DHIS2 API | * DHIS2 API | ||
+ | * React Router | ||
= Time schedule = | = Time schedule = | ||
Line 124: | Line 117: | ||
* analyze the requirements | * analyze the requirements | ||
* get a clear understanding of goals and architecture | * get a clear understanding of goals and architecture | ||
− | * start looking | + | * 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 | Table of group study time each week | ||
Line 148: | Line 141: | ||
|5 Hours | |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 = | = 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 = | = 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. | ||
+ | |||
+ | [[File:Conversations.PNG|none|thumb|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). | ||
+ | |||
+ | [[File:Attachment.PNG|none|thumb|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). | ||
+ | |||
+ | [[File:Attachment-sequence-diagram.PNG|none|thumb|Sequence diagram ]] | ||
+ | |||
+ | == Final solution social part == | ||
+ | {| class="wikitable" | ||
+ | ! colspan="3" |Modification of the DHIS dashboard | ||
+ | |- | ||
+ | |[[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:Loading image.PNG|thumb|500x500px|We wait until the image is loaded ]] | ||
+ | |} | ||
+ | {| class="wikitable" | ||
+ | ! colspan="2" |Publish on Facebook ( Part 1) | ||
+ | |- | ||
+ | |[[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|480x480px|Login page to use your own account to publish content]] | ||
+ | |} | ||
+ | {| class="wikitable" | ||
+ | ! colspan="2" |Publish on Facebook ( Part 2) | ||
+ | |- | ||
+ | |[[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 ]] | ||
+ | |} | ||
+ | {| class="wikitable" | ||
+ | ! colspan="2" |Publish on Twitter (Part 1) | ||
+ | |- | ||
+ | |[[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|480x480px|We have to login with our twitter account to publish the image]] | ||
+ | |} | ||
+ | {| class="wikitable" | ||
+ | !Publish on Twitter (Part 2) | ||
+ | |- | ||
+ | |[[File:Twitter publish.PNG|thumb|594x594px|We could see the publication of the image with the right comment on my twitter account]] | ||
+ | |} | ||
+ | {| class="wikitable" | ||
+ | !New Dashboard design for maps and chart | ||
+ | |- | ||
+ | |[[File:New dash with searchbar.PNG|thumb|1050x1050px|The new dashboard ( a WebApp) with it's search Bar]] | ||
+ | |} | ||
+ | {| class="wikitable" | ||
+ | ! colspan="2" |New design of pivot Table with our Dashboard WebApp | ||
+ | |- | ||
+ | |[[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]] | ||
+ | |} | ||
+ | {| class="wikitable" | ||
+ | ! colspan="3" |New features of our 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. ]] | ||
+ | |} | ||
= Documented learning during project = | = 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 = | = 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. |
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.