Difference between revisions of "IDLE"
(→Git Project Repository) (Tag: Visual edit) |
(→Product Description) (Tag: Visual edit) |
||
(14 intermediate revisions by the same user not shown) | |||
Line 8: | Line 8: | ||
== Product Description == | == Product Description == | ||
− | The final product | + | [[File:MFL - List view.png|thumb|List view]] |
+ | The final product is a React-based DHIS2 app where the main feature is browsing facilities and get information about them. We have focused on making a user friendly interface that is easy to navigate. The user can choose to see the facilities as a list or as markers on a map. It is also possible to search and set filters in order to see the facilities relevant for you. The user can select one specific facility to get more details about it, and can also send in suggestions if there is something he/she wants to see changed. Finally there is also an admin page where users with administrator access can see the user suggestions and change some settings. Below is a summary of the features of the app, and on the right side there are some screenshots of them. | ||
=== App features === | === App features === | ||
Line 15: | Line 16: | ||
* A form with several input fields where the user can filter and search for specific facilities. | * A form with several input fields where the user can filter and search for specific facilities. | ||
* A map where the user can see the location of facilities searched for. The map will have the ability to show one, all or a subset of facilities. | * A map where the user can see the location of facilities searched for. The map will have the ability to show one, all or a subset of facilities. | ||
+ | [[File:MFL - Map view.png|thumb|300x300px|Map view]] | ||
+ | [[File:Selected facility.png|thumb|Info about selected facility]] | ||
+ | [[File:MFL - Admin page suggestions.png|thumb|Admin page suggestion]] | ||
''App/map'' | ''App/map'' | ||
* An information box with detailed information about one specific facility, including data sets and indicators. | * An information box with detailed information about one specific facility, including data sets and indicators. | ||
Line 25: | Line 29: | ||
* Admin users has the option to mark/unmark the suggestions as resolved, and delete them. | * Admin users has the option to mark/unmark the suggestions as resolved, and delete them. | ||
* Admin users can change some settings to determine which data sets and indicators that should be displayed for any user. | * Admin users can change some settings to determine which data sets and indicators that should be displayed for any user. | ||
+ | [[File:MFL - Settings.png|thumb|Admin page settings]] | ||
=== Architecture === | === Architecture === | ||
− | The application is primarily based on the '''React''' framework. The different visual elements in the app is created as React Components, with the help of HTML, CSS and JSX. | + | The application is primarily based on the '''React''' framework. The different visual elements in the app is created as React Components, with the help of JavaScript, HTML, CSS and JSX. We have collected all the code that has something to do with API communication in one file called findOrgs.js. The other code is mostly divided into separate files, one for each feature or page. |
+ | |||
+ | We chose to use React in this project because it usually has an easier learning curve than Angular for those with little experience with front-end development, due to a focus on brevity. However, Angular would most likely work good for this project as well, and is definitively something we would like to learn in the future. | ||
Within React we also use several additional packages defined as dependencies in the package-file of our application, both for visual and functional elements here are some of the packages we have used (among others): | Within React we also use several additional packages defined as dependencies in the package-file of our application, both for visual and functional elements here are some of the packages we have used (among others): | ||
Line 48: | Line 55: | ||
https://en.wikipedia.org/wiki/MIT_License | https://en.wikipedia.org/wiki/MIT_License | ||
− | </ref> This means that the software is free to use for anyone and for any purpose, and the source code is open. In other words the license itself has no implications on our project. However, the React source code can and will be changed and updated in the future. This may affect our software as React functionality will change. | + | </ref> This means that the software is free to use for anyone and for any purpose, and the source code is open. In other words the license itself has no implications on our project. However, the React source code can and will be changed and updated in the future. This may affect our software as React's functionality will change. |
The software packages we use in our project have a variety of different licenses, but they are all permissive. A permissive software license is a free software licence with minimal requirements about how the software can be redistributed.<ref>Wikipedia 05.12.2017 | The software packages we use in our project have a variety of different licenses, but they are all permissive. A permissive software license is a free software licence with minimal requirements about how the software can be redistributed.<ref>Wikipedia 05.12.2017 | ||
Line 61: | Line 68: | ||
== Division of Labour == | == Division of Labour == | ||
− | + | During this project we have had frequent meetings, several times per week, where we discuss issues and challenges and work together on both programming and administrative tasks. We have divided the tasks evenly among us and tried to enable all of us to work on the different areas of making a web-application. These areas are for example front-end, back-end, API communication, administrative tasks and management. We have had a flat group structure, meaning that we all have the same roles and responsibilities. | |
+ | |||
+ | The times we were not working together in the same room, we had continuous communication mostly on Facebook, but also via Git, Google Drive and e-mail. | ||
+ | |||
+ | Though the tasks have been evenly divided among us, we have had some main responsibilities when it comes to functionality and features of the web-app to avoid working on the same tasks. Below is an overview of our main responsibilities. | ||
+ | {| class="wikitable" | ||
+ | !Vebjørn | ||
+ | !Halvard | ||
+ | !Andreas | ||
+ | !All | ||
+ | |- | ||
+ | | | ||
+ | * User suggestions | ||
+ | * User information | ||
+ | * Configuration of the admin page | ||
+ | * Updating Wiki page | ||
+ | | | ||
+ | * Google Maps API | ||
+ | * Searching and filtering of facilities | ||
+ | * Responsiveness for mobile devices | ||
+ | | | ||
+ | * Datasets and Indicators | ||
+ | * Settings page | ||
+ | * Back-end methods towards the API | ||
+ | | | ||
+ | * Styling | ||
+ | * Design | ||
+ | * Architecture | ||
+ | * API communication | ||
+ | * Preparing presentation | ||
+ | |} | ||
== Timeline for Development == | == Timeline for Development == | ||
Line 68: | Line 105: | ||
* Created our first React app. | * Created our first React app. | ||
* Created an organization and repository on GitHub. | * Created an organization and repository on GitHub. | ||
− | * Fetched our first data from the | + | * Fetched our first data from the API using the JavaScript fetch method. |
− | * Created a simple layout for the Master Facility List | + | * Created a simple layout for the Master Facility List with a navigation bar, search option boxes and a result page. |
* Added some styling with css and React Bootstrap. | * Added some styling with css and React Bootstrap. | ||
Line 81: | Line 118: | ||
=== Week 44 === | === Week 44 === | ||
* Linked search boxes to their respective functions to fetch and print the correct data. | * Linked search boxes to their respective functions to fetch and print the correct data. | ||
+ | * Integrated google maps to display the organizations using their coordinates. | ||
+ | * Evaluated the best methods for filtering data. | ||
=== Week 45 === | === Week 45 === | ||
− | |||
− | |||
* Figured out the best way to do paging of facilities when there are many results. | * Figured out the best way to do paging of facilities when there are many results. | ||
* Added the functionality for creating change suggestions for a facility. | * Added the functionality for creating change suggestions for a facility. | ||
Line 90: | Line 127: | ||
=== Week 46 === | === Week 46 === | ||
+ | * Added settings page where an administrator can determine which data sets and indicators to be displayed for any user. | ||
* Continued development of dynamically updating search fields. | * Continued development of dynamically updating search fields. | ||
* Continued adding functionality and link everything together. | * Continued adding functionality and link everything together. | ||
* Changed the application from a multi-page app to a single-page app (same functionality) | * Changed the application from a multi-page app to a single-page app (same functionality) | ||
− | === | + | === Week 47 === |
− | * | + | * Little work due to exam preperations |
+ | * Small functional improvements | ||
− | === | + | === Week 48 === |
− | * | + | * Little work due to exam preperations |
− | === | + | === Week 49 === |
− | * | + | * Added more advanced settings |
+ | * Added some improvements to user suggestions | ||
+ | * Refactoring, code cleanup and documentation | ||
+ | * Planned the final presentation | ||
== Git Project Repository == | == Git Project Repository == | ||
− | Our Git project repository can be found [https://github.uio.no/MFLD2/MFLD2 HERE]. | + | Our Git project repository can be found [https://github.uio.no/MFLD2/MFLD2 HERE] |
+ | |||
+ | == Presentation == | ||
+ | Our Google Slides presentation can be found [https://docs.google.com/presentation/d/1MwwmXNm_9fCyITn-rzm09btTGKrjX8dAJ72lxhkUtZM/edit?usp=sharing HERE] | ||
== References == | == References == | ||
<references /> | <references /> |
Latest revision as of 23:25, 5 December 2017
Contents
Group Members
- Vebjørn Kvisli (vebjorkv@ifi.uio.no)
- Halvard Hella Kværna (halvarhk@ifi.uio.no)
- Andreas Hauge Standal (andrhst@ifi.uio.no)
Assignment
We have chosen the assignment Master Facility List.
Product Description
The final product is a React-based DHIS2 app where the main feature is browsing facilities and get information about them. We have focused on making a user friendly interface that is easy to navigate. The user can choose to see the facilities as a list or as markers on a map. It is also possible to search and set filters in order to see the facilities relevant for you. The user can select one specific facility to get more details about it, and can also send in suggestions if there is something he/she wants to see changed. Finally there is also an admin page where users with administrator access can see the user suggestions and change some settings. Below is a summary of the features of the app, and on the right side there are some screenshots of them.
App features
App/facilities
- A List of all facilities with the option to filter and search to get specific results.
- A form with several input fields where the user can filter and search for specific facilities.
- A map where the user can see the location of facilities searched for. The map will have the ability to show one, all or a subset of facilities.
App/map
- An information box with detailed information about one specific facility, including data sets and indicators.
- A map showing the location of that specific facility.
- A link that opens up a dialog window where the user can write suggestions for changes to the facility. The suggestions are stored in /api/dataStore
App/admin
- The admin page checks whether the user has administrator access or not.
- An information box where the user can see information about the currently logged in user.
- A list of user suggestions, each containing relevant facility, date, text and user.
- Admin users has the option to mark/unmark the suggestions as resolved, and delete them.
- Admin users can change some settings to determine which data sets and indicators that should be displayed for any user.
Architecture
The application is primarily based on the React framework. The different visual elements in the app is created as React Components, with the help of JavaScript, HTML, CSS and JSX. We have collected all the code that has something to do with API communication in one file called findOrgs.js. The other code is mostly divided into separate files, one for each feature or page.
We chose to use React in this project because it usually has an easier learning curve than Angular for those with little experience with front-end development, due to a focus on brevity. However, Angular would most likely work good for this project as well, and is definitively something we would like to learn in the future.
Within React we also use several additional packages defined as dependencies in the package-file of our application, both for visual and functional elements here are some of the packages we have used (among others):
- bootstrap
- google-maps
- react-bootstrap
- react-bootstrap-dialog
- react-dom
- react-icons
- react-router-dom
- react-select
- react-toggle
- reactstrap
- webpack
- es6-promise
- babel
Licensing
React has an MIT license. The MIT license is a permissive free software license originating at the Massachusetts Institute of Technology.[1] This means that the software is free to use for anyone and for any purpose, and the source code is open. In other words the license itself has no implications on our project. However, the React source code can and will be changed and updated in the future. This may affect our software as React's functionality will change.
The software packages we use in our project have a variety of different licenses, but they are all permissive. A permissive software license is a free software licence with minimal requirements about how the software can be redistributed.[2] The licenses of our software packages are MIT, BSD, Apache, ISC and WTFPL.
We use the Google Maps API for displaying facilities on the map. Google Maps has several utility software projects that is open source, but the API itself is not open source. It is free-to-use for non-commercial use and pay-to-use for commercial use. However, the free version has some limitations and restrictions. The free version is free up to 25,000 map loads per day and costs $0.50 USD per 1,000 additional map loads, up to 100,000 daily, if billing is enabled.[3]
Division of Labour
During this project we have had frequent meetings, several times per week, where we discuss issues and challenges and work together on both programming and administrative tasks. We have divided the tasks evenly among us and tried to enable all of us to work on the different areas of making a web-application. These areas are for example front-end, back-end, API communication, administrative tasks and management. We have had a flat group structure, meaning that we all have the same roles and responsibilities.
The times we were not working together in the same room, we had continuous communication mostly on Facebook, but also via Git, Google Drive and e-mail.
Though the tasks have been evenly divided among us, we have had some main responsibilities when it comes to functionality and features of the web-app to avoid working on the same tasks. Below is an overview of our main responsibilities.
Vebjørn | Halvard | Andreas | All |
---|---|---|---|
|
|
|
|
Timeline for Development
Week 42
- Created our first React app.
- Created an organization and repository on GitHub.
- Fetched our first data from the API using the JavaScript fetch method.
- Created a simple layout for the Master Facility List with a navigation bar, search option boxes and a result page.
- Added some styling with css and React Bootstrap.
Week 43
- Improved navigation bar style
- Improved overall layout style
- Added support for string matching of user-input for organizatons to get relevant organizations.
- Added toggle button for advanced search user inputs.
- Added routing of navigation bar buttons.
Week 44
- Linked search boxes to their respective functions to fetch and print the correct data.
- Integrated google maps to display the organizations using their coordinates.
- Evaluated the best methods for filtering data.
Week 45
- Figured out the best way to do paging of facilities when there are many results.
- Added the functionality for creating change suggestions for a facility.
- Added an admin-page where an administrator can see the change suggestions created by other users.
Week 46
- Added settings page where an administrator can determine which data sets and indicators to be displayed for any user.
- Continued development of dynamically updating search fields.
- Continued adding functionality and link everything together.
- Changed the application from a multi-page app to a single-page app (same functionality)
Week 47
- Little work due to exam preperations
- Small functional improvements
Week 48
- Little work due to exam preperations
Week 49
- Added more advanced settings
- Added some improvements to user suggestions
- Refactoring, code cleanup and documentation
- Planned the final presentation
Git Project Repository
Our Git project repository can be found HERE
Presentation
Our Google Slides presentation can be found HERE
References
- ↑ Wikipedia 05.12.2017 https://en.wikipedia.org/wiki/MIT_License
- ↑ Wikipedia 05.12.2017 https://en.wikipedia.org/wiki/Permissive_software_licence
- ↑ Google Maps API - Pricing and Plans 05.12.2017 https://developers.google.com/maps/pricing-and-plans/#details