Difference between revisions of "Crappyengineering"
(→Summary of requirements) (Tag: Visual edit) |
(removed duplicate entry) (Tag: Visual edit) |
||
(15 intermediate revisions by 3 users not shown) | |||
Line 4: | Line 4: | ||
Social integration with Facebook and Twitter using their respective APIs to share favourites of maps, charts and pivot-tables. | Social integration with Facebook and Twitter using their respective APIs to share favourites of maps, charts and pivot-tables. | ||
− | + | We will do this by making a Webapp | |
== Group members == | == Group members == | ||
Line 13: | Line 13: | ||
== Milestones == | == Milestones == | ||
Create page - Check | Create page - Check | ||
+ | |||
+ | ==== Milestone 1: October 28 ==== | ||
+ | * Document features and architecture on Wiki | ||
+ | * Show understanding of your project task | ||
+ | '''Milestone 2: November 4''' | ||
+ | * Skeleton app and database running | ||
+ | '''Milestone 3: November 10''' | ||
+ | * Able to fetch and display charts and maps. Fetching pivot tables | ||
+ | '''Milestone 4: November 20''' | ||
+ | * Facebook and twitter share working | ||
+ | '''Milestone 5: November 24''' | ||
+ | * App installed on DHIS2 Test | ||
== Summary of requirements == | == Summary of requirements == | ||
* Get app framework up and running | * Get app framework up and running | ||
− | * Pull data from API, | + | * Pull data from API, for maps, charts and tables. HTML to canvas for easily shareable tables. |
* Implement share to Facebook and Twitter | * Implement share to Facebook and Twitter | ||
+ | |||
+ | === Features and Architecture === | ||
+ | The project has changed as of 26.10.2016, and no longer includes extending the core messaging function to handle attachments or embedded images. | ||
+ | |||
+ | '''Currently planned features:''' | ||
+ | * Easy to use GUI [DONE] | ||
+ | ** <s>Show available resources (type)</s> | ||
+ | ** <s>Show available items (defined by type)</s> | ||
+ | ** Filter on Name [Cancelled] | ||
+ | ** Dynamic preview of data (only charts/maps, not on mobile for now) [Cancelled] | ||
+ | |||
+ | '''Optional wanted features:''' | ||
+ | * Change dynamic preview to grid + thumbnail [not implemented] | ||
+ | * Filter by Country [not implemented] | ||
+ | * Responsive design [not implemented] | ||
+ | * Selection based settings configuration with a list of possible other data-objects that can be shared (double list, arrows choose item/all items active) [not implemented] | ||
+ | |||
+ | |||
+ | '''Architecture:''' | ||
+ | |||
+ | The application will be built as an App available for install with the DHIS2 App management. | ||
+ | After implementing a simple frame for the items to be contained in, we are looking at dividing the application into some main parts. | ||
+ | One part should handle settings and preferably a linking option for facebook or twitter so that the user can disconnect their account from the service. | ||
+ | If there is time,for implementing a selection based configuration for what items should be available to share. | ||
+ | |||
+ | We are mainly looking at using React to handle the application since the virtualDOM will allow us to take "cache" the different previews after the user has hovered the item, this will be especially useful if we are able to implement the grid based selection, as the grid would be our "root" for the virtualDom. | ||
+ | We will be using HTML2Canvas for handling the translation of the pivot tables into images. | ||
+ | |||
+ | '''Short List of technologies/libraries(Subject to change)''' | ||
+ | * React | ||
+ | * ES2015 | ||
+ | * react-share - https://www.npmjs.com/package/react-share | ||
+ | * mobx - https://github.com/mobxjs/mobx | ||
+ | * D2 - [http://d2.markionium.com/ Documentation] | ||
+ | * D2-UI | ||
+ | * React-dropdown | ||
+ | * Axios | ||
== Time schedule == | == Time schedule == | ||
+ | - 4th of November: App running | ||
+ | 5 - 11th of November: Live preview | ||
+ | 12 - 18th of November: Posting to facebook/twitter | ||
+ | 19 - 25th of November: Extra features | ||
+ | 25 - 26th of November: Polishing/Tweaking | ||
+ | 27th of November: Delivery | ||
+ | == How we are dividing tasks within the group == | ||
+ | Everyone has worked on everything mostly. | ||
− | + | We have not had a clear division of tasks mostly because we are learning as we go, so one person might at one point scrap the code of another in favour of something easier to write. | |
== Screenshots and screen flows == | == Screenshots and screen flows == | ||
+ | <gallery> | ||
+ | File:Crappyengineering_initial_design.jpeg | ||
+ | File:Crappyengineering_initial_page.jpeg | ||
+ | File:Crappyengineering_list_overflow.jpeg | ||
+ | File:Crappyengineering_attach_message.jpeg | ||
+ | File:Crappyengineering_attach_detach_message.jpeg | ||
+ | File:Crappyengineering_styling_issues.jpeg | ||
+ | File:Crappyengineering_initial_facebook_share.jpeg | ||
+ | File:Crappyengineering_initial_twitter_share.jpeg | ||
+ | File:Crappyengineering_design_change2 | ||
+ | File:Crappyengineering_first_pivot_shown.jpeg | ||
+ | </gallery> | ||
== Documented learning during project == | == Documented learning during project == | ||
+ | Starting out we had little to no experience with javascript and nothing with react. | ||
+ | |||
+ | After fooling around trying to figure out how we wanted to do the assignment, we landed on an initial whiteboxed design on paper. Implementing this proved difficult as we had no experience with react what so ever. After turning to Youtube to follow a series of tutorials on "React for dummies" we got started with the initial design. The design was broken down into components step by step, starting with the larger components that mounts smaller components within them again, and then subfolders for the items mounted by a parent component. This proved to be a logically sound way of doing it, and the work progressed quite a bit when broken down like this. | ||
+ | |||
+ | Early on we had decided on a dropdown picklist that after selection brings forth a list of available maps presented through the API, this was functioning okay, and we drew some experience from a previous project in INF3331 about how to make the list reasonable. The first draft of the design included separate buttons below the list of available items that would either share to facebook or twitter, and conversely we had made a comments-section that was supposed to be attached as the message, but this was scrapped later due to moving away from that solution and rather using an npm package to generate the necessay components enabling sharing to facebook/twitter. | ||
== Suggested improvements to the API == | == Suggested improvements to the API == |
Latest revision as of 10:45, 1 December 2016
Contents
Overview
Project C
Social integration with Facebook and Twitter using their respective APIs to share favourites of maps, charts and pivot-tables.
We will do this by making a Webapp
Group members
- Christopher Bauge (chrisbau@mail.uio.no)
- Fredrik Hov (freh@mail.uio.no)
- Mathias Næss (mathiana@mail.uio.no)
Milestones
Create page - Check
Milestone 1: October 28
- Document features and architecture on Wiki
- Show understanding of your project task
Milestone 2: November 4
- Skeleton app and database running
Milestone 3: November 10
- Able to fetch and display charts and maps. Fetching pivot tables
Milestone 4: November 20
- Facebook and twitter share working
Milestone 5: November 24
- App installed on DHIS2 Test
Summary of requirements
- Get app framework up and running
- Pull data from API, for maps, charts and tables. HTML to canvas for easily shareable tables.
- Implement share to Facebook and Twitter
Features and Architecture
The project has changed as of 26.10.2016, and no longer includes extending the core messaging function to handle attachments or embedded images.
Currently planned features:
- Easy to use GUI [DONE]
-
Show available resources (type) -
Show available items (defined by type) - Filter on Name [Cancelled]
- Dynamic preview of data (only charts/maps, not on mobile for now) [Cancelled]
-
Optional wanted features:
- Change dynamic preview to grid + thumbnail [not implemented]
- Filter by Country [not implemented]
- Responsive design [not implemented]
- Selection based settings configuration with a list of possible other data-objects that can be shared (double list, arrows choose item/all items active) [not implemented]
Architecture:
The application will be built as an App available for install with the DHIS2 App management. After implementing a simple frame for the items to be contained in, we are looking at dividing the application into some main parts. One part should handle settings and preferably a linking option for facebook or twitter so that the user can disconnect their account from the service. If there is time,for implementing a selection based configuration for what items should be available to share.
We are mainly looking at using React to handle the application since the virtualDOM will allow us to take "cache" the different previews after the user has hovered the item, this will be especially useful if we are able to implement the grid based selection, as the grid would be our "root" for the virtualDom. We will be using HTML2Canvas for handling the translation of the pivot tables into images.
Short List of technologies/libraries(Subject to change)
- React
- ES2015
- react-share - https://www.npmjs.com/package/react-share
- mobx - https://github.com/mobxjs/mobx
- D2 - Documentation
- D2-UI
- React-dropdown
- Axios
Time schedule
- 4th of November: App running 5 - 11th of November: Live preview 12 - 18th of November: Posting to facebook/twitter 19 - 25th of November: Extra features 25 - 26th of November: Polishing/Tweaking 27th of November: Delivery
How we are dividing tasks within the group
Everyone has worked on everything mostly.
We have not had a clear division of tasks mostly because we are learning as we go, so one person might at one point scrap the code of another in favour of something easier to write.
Screenshots and screen flows
- Crappyengineering design change2
Documented learning during project
Starting out we had little to no experience with javascript and nothing with react.
After fooling around trying to figure out how we wanted to do the assignment, we landed on an initial whiteboxed design on paper. Implementing this proved difficult as we had no experience with react what so ever. After turning to Youtube to follow a series of tutorials on "React for dummies" we got started with the initial design. The design was broken down into components step by step, starting with the larger components that mounts smaller components within them again, and then subfolders for the items mounted by a parent component. This proved to be a logically sound way of doing it, and the work progressed quite a bit when broken down like this.
Early on we had decided on a dropdown picklist that after selection brings forth a list of available maps presented through the API, this was functioning okay, and we drew some experience from a previous project in INF3331 about how to make the list reasonable. The first draft of the design included separate buttons below the list of available items that would either share to facebook or twitter, and conversely we had made a comments-section that was supposed to be attached as the message, but this was scrapped later due to moving away from that solution and rather using an npm package to generate the necessay components enabling sharing to facebook/twitter.
Suggested improvements to the API
Link to repository
The repository can be found at dhis.crappyengineering.com