Difference between revisions of "Groupname.js"

From mn/ifi/inf5750
Jump to: navigation, search
(Milestones)
 
(34 intermediate revisions by 4 users not shown)
Line 1: Line 1:
 +
 +
= DHIS2 app for sharing graphs, maps and tables to Facebook/Twitter =
 +
Group project in INF5750 - Open Source Development.
 +
 
== Group members ==
 
== Group members ==
 
* Rune Johan Borgli (runejb@uio.no)
 
* Rune Johan Borgli (runejb@uio.no)
Line 5: Line 9:
 
* Joakim Misund (joakimmi@student.matnat.uio.no)
 
* Joakim Misund (joakimmi@student.matnat.uio.no)
  
== Milestones ==
+
Repository: https://github.uio.no/matiashf/groupname.js
Create page - Check
+
 
 +
== Running our app ==
 +
 
 +
<source>
 +
git clone https://github.uio.no/matiashf/groupname.js.git
 +
cd groupname.js
 +
npm install
 +
npm start
 +
</source>
 +
 
 +
Open your browser and go to <code><nowiki>http://localhost:8081/</nowiki></code>. If nothing loads, make sure you are logged in on the [https://play.dhis2.org/test DHIS2 test server]. See our [https://github.uio.no/matiashf/groupname.js/blob/master/README.md README] for further instructions.
 +
 
 +
= Summary of requirements =
 +
Implement listing and sharing of favorites to Facebook and Twitter as a DHIS2 webapp using javascript.
 +
 
 +
Required features:
 +
* List favorites by type (maps, charts, tables)
 +
* Share favorite to Facebook
 +
* Share favorite to Twitter
 +
 
 +
Desired features:
 +
* Show enlarged favorite
 +
* Sorting
 +
* Filtering/searching
 +
 
 +
= Architecture / Tools =
 +
 
 +
We will implement a DHIS2-webapp based on [https://github.com/dhis2/app-skeleton DHIS2 App skeleton]. We will use [https://facebook.github.io/react/ React] for code structure, [https://github.com/dhis2/d2 D2] to communicate with the backend, and [https://github.com/dhis2/d2-ui D2-ui] + [http://www.material-ui.com/ material-ui] for the frontend. Using [https://webpack.github.io/ Webpack], we will play around with ES2016 using [https://babeljs.io/ Babel]. Also, [http://sass-lang.com/ SASS] is cool!
 +
 
 +
While developing we will set up [https://github.com/dhis2/dhis2-live DHIS2-live] locally (alternatively depend on [DHIS2-play](https://play.dhis2.org/)).
 +
 
 +
= Milestones / Time Schedule =
 +
 
 +
* Milestone 1: 28/10 - Implementation plan
 +
* Milestone 2: 6/11 -  Implement core features
 +
* Milestone 3: 13/11 - Optional features and polish
 +
* Milestone 4: 27/11 - Final delivery
 +
* Milestone 5: 7-9/12 - Group Presentation
 +
 
 +
== Potential problems ==
 +
 
 +
* How do we do authentication with the Twitter API?
 +
* How do we handle errors loading images?
 +
* Images are overlays. How do we include the map underneath?
 +
 
 +
= How we divided tasks within the group =
 +
* Rune: Pagination, final refactoring, Twitter researcher
 +
* Pål: Designer, fetching additional data, general researcher
 +
* Matias: Initial project setup, [https://github.uio.no/matiashf/groupname.js/commit/ba6c1f2f765051464e51612ad2ddb7ca591d169d rewrote prototype to use d2] ([https://github.uio.no/matiashf/groupname.js/commit/719598b45b4618efaac694ab7c77cdf434e3f973 later reverted] due to [https://github.com/dhis2/d2/issues/101 a bug in d2]), minor refactoring and [https://github.uio.no/matiashf/groupname.js/commit/95852721b9b0c75473fc665b154b52d889e4847a unit testing], bugfixes.
 +
* Joakim: Created the initial prototype. Fetch function for  DHIS 2 API. Struggled with google maps.
 +
 
 +
=The process=
 +
 
 +
After a little discussion within our group we selected task C for several reasons.  We taught it could be useful to have some experience with Twitter and Facebook in the future. Within our group everybody was comfortable and experienced with java, and we wanted to challenge ourself with something we did not have that much experience with,
 +
so a task purely based on Javascript sounded interesting. 
 +
 
 +
We used the [https://github.com/dhis2/app-skeleton App-skeleton] by Mark Polak as base of our project.
 +
 
 +
An intuitive easy to use webapp was the goal of our project. To accomplish that, we started drawing up suggestions on how we wanted our UI to look and decided on something like this: 
 +
 
 +
[[File:UI-groupname.jpg|200px]]
 +
 
 +
Now we had something concrete to work against.
 +
 
 +
From there we experimented with different approaches. Much time was spent trying to figure out how to do it properly. 
 +
We wanted to use D2 for communication between DHIS and our webapp.
 +
Because of a [https://github.com/dhis2/d2/issues/101 bug in D2] this proved difficult, and we had to revert back to using jQuery.
 +
 
 +
Our next goal was to implement the main features of displaying the favorites and sharing to Facebook and Twitter. A challenge here, was when trying to display some of the favorites, they gave us errors. Our solution was to hide the representation for the favorite that caused an error and our webapp would not display it.
 +
 
 +
To our surprise, Facebook made it really easy for us to implement sharing. On the other hand, Twitter didn’t. This is explained more in detail on [what we tried that did not work].
 +
 
 +
For the last part of the project, our goal has been to eliminate bugs and make the app as pretty as possible. 
 +
 
 +
= Screenshots and screen flows =
 +
<gallery>
 +
File:Maps_groupname.png|Screenshot of maps
 +
File:Charts_groupname.png|Screenshot of charts
 +
File:ReportTables_groupname.png|Screenshot of report tables
 +
File:EventCharts_groupname.png|Screenshot of event charts
 +
</gallery>
 +
 
 +
=What we tried that did not work=
 +
 
 +
* Use the d2-library. It worked fine for maps, but not for charts. In the list-function an assertion was not passed, therefor nothing was returned. We spent 2 days on trying to fix it, but the complexity made us decide to use a selfmade solution.
 +
 
 +
* Have the maps overlay google maps. DHIS has a map-plugin, but it can only be used by apps uploaded to DHIS. We tried to use the google api directly, and got it working with one map. We did not find any way to have several maps on the same page. After failing to create the map-support ourselves we found some npm-libraries, none of which worked.
 +
* Implement twitter image uploading. Twitter requires the app to use the API to upload images. This also requires authentication in the form of OAuth. Unfortunately, we can not do this in our project as this would require the key and secret provided by Twitter to be readable by anyone. The solution would probably be to use a form of proxy, but that is not part of this course. This meant that we could only implement twitter sharing by supplying the link to the image in the tweet.
 +
 
 +
 
 +
 
 +
= Documented learning during project =
 +
* Twitter API taught us that OAuth with javascript is an issue as you can not hide the key and secret in an easy way.
 +
 
 +
= Suggested improvements to the API =
 +
 
 +
We have two suggested improvements to the API provided by DHIS.
 +
* The first one would be that we would like a way to know if a map, chart ect. has a /data file before fetching it. We would like there to be a element, '''hasData''', indicating this for example like this:
 +
<syntaxhighlight lang="xml">
 +
<maps>
 +
    <map id="zDP78aJU8nX">
 +
        <displayName>ANC: 1st visit coverage (%) by district last year</displayName>
 +
        <hasData>true</hasData>
 +
    </map>
 +
</maps>
 +
</syntaxhighlight>
 +
* The second improvement would be a way to extract images of maps with both the real map and all the overlays in .png format. The same would be for charts and all their plottings.

Latest revision as of 16:49, 1 December 2016

DHIS2 app for sharing graphs, maps and tables to Facebook/Twitter

Group project in INF5750 - Open Source Development.

Group members

  • Rune Johan Borgli (runejb@uio.no)
  • Matias Hermanrud Fjeld (matiashf@student.matnat.uio.no)
  • Pål Mathias Brandsvoll (paalmbr@uio.no)
  • Joakim Misund (joakimmi@student.matnat.uio.no)

Repository: https://github.uio.no/matiashf/groupname.js

Running our app

git clone https://github.uio.no/matiashf/groupname.js.git
cd groupname.js
npm install
npm start

Open your browser and go to http://localhost:8081/. If nothing loads, make sure you are logged in on the DHIS2 test server. See our README for further instructions.

Summary of requirements

Implement listing and sharing of favorites to Facebook and Twitter as a DHIS2 webapp using javascript.

Required features:

  • List favorites by type (maps, charts, tables)
  • Share favorite to Facebook
  • Share favorite to Twitter

Desired features:

  • Show enlarged favorite
  • Sorting
  • Filtering/searching

Architecture / Tools

We will implement a DHIS2-webapp based on DHIS2 App skeleton. We will use React for code structure, D2 to communicate with the backend, and D2-ui + material-ui for the frontend. Using Webpack, we will play around with ES2016 using Babel. Also, SASS is cool!

While developing we will set up DHIS2-live locally (alternatively depend on [DHIS2-play](https://play.dhis2.org/)).

Milestones / Time Schedule

  • Milestone 1: 28/10 - Implementation plan
  • Milestone 2: 6/11 - Implement core features
  • Milestone 3: 13/11 - Optional features and polish
  • Milestone 4: 27/11 - Final delivery
  • Milestone 5: 7-9/12 - Group Presentation

Potential problems

  • How do we do authentication with the Twitter API?
  • How do we handle errors loading images?
  • Images are overlays. How do we include the map underneath?

How we divided tasks within the group

  • Rune: Pagination, final refactoring, Twitter researcher
  • Pål: Designer, fetching additional data, general researcher
  • Matias: Initial project setup, rewrote prototype to use d2 (later reverted due to a bug in d2), minor refactoring and unit testing, bugfixes.
  • Joakim: Created the initial prototype. Fetch function for DHIS 2 API. Struggled with google maps.

The process

After a little discussion within our group we selected task C for several reasons. We taught it could be useful to have some experience with Twitter and Facebook in the future. Within our group everybody was comfortable and experienced with java, and we wanted to challenge ourself with something we did not have that much experience with, so a task purely based on Javascript sounded interesting.

We used the App-skeleton by Mark Polak as base of our project.

An intuitive easy to use webapp was the goal of our project. To accomplish that, we started drawing up suggestions on how we wanted our UI to look and decided on something like this: 

UI-groupname.jpg

Now we had something concrete to work against.

From there we experimented with different approaches. Much time was spent trying to figure out how to do it properly. We wanted to use D2 for communication between DHIS and our webapp. Because of a bug in D2 this proved difficult, and we had to revert back to using jQuery.

Our next goal was to implement the main features of displaying the favorites and sharing to Facebook and Twitter. A challenge here, was when trying to display some of the favorites, they gave us errors. Our solution was to hide the representation for the favorite that caused an error and our webapp would not display it.

To our surprise, Facebook made it really easy for us to implement sharing. On the other hand, Twitter didn’t. This is explained more in detail on [what we tried that did not work].

For the last part of the project, our goal has been to eliminate bugs and make the app as pretty as possible. 

Screenshots and screen flows

What we tried that did not work

  • Use the d2-library. It worked fine for maps, but not for charts. In the list-function an assertion was not passed, therefor nothing was returned. We spent 2 days on trying to fix it, but the complexity made us decide to use a selfmade solution.
  • Have the maps overlay google maps. DHIS has a map-plugin, but it can only be used by apps uploaded to DHIS. We tried to use the google api directly, and got it working with one map. We did not find any way to have several maps on the same page. After failing to create the map-support ourselves we found some npm-libraries, none of which worked.
  • Implement twitter image uploading. Twitter requires the app to use the API to upload images. This also requires authentication in the form of OAuth. Unfortunately, we can not do this in our project as this would require the key and secret provided by Twitter to be readable by anyone. The solution would probably be to use a form of proxy, but that is not part of this course. This meant that we could only implement twitter sharing by supplying the link to the image in the tweet.


Documented learning during project

  • Twitter API taught us that OAuth with javascript is an issue as you can not hide the key and secret in an easy way.

Suggested improvements to the API

We have two suggested improvements to the API provided by DHIS.

  • The first one would be that we would like a way to know if a map, chart ect. has a /data file before fetching it. We would like there to be a element, hasData, indicating this for example like this:
<maps>
    <map id="zDP78aJU8nX">
        <displayName>ANC: 1st visit coverage (%) by district last year</displayName>
        <hasData>true</hasData>
    </map>
</maps>
  • The second improvement would be a way to extract images of maps with both the real map and all the overlays in .png format. The same would be for charts and all their plottings.