Difference between revisions of "PSM"
(→Division of work) |
|||
(39 intermediate revisions by 3 users not shown) | |||
Line 6: | Line 6: | ||
==Product Description== | ==Product Description== | ||
− | The task chosen is: Master Facility List. | + | The task chosen is: [[Master Facility List]]. |
===Features=== | ===Features=== | ||
The product will firstly consist of a main page. On this main page, a user can search for a specific organisationunit. Once a unit is found, the user can click on the unit, and will be taken to a new page, displaying all the information about the organisation unit. Once there, the user can also fill in a form to propose changes to the orgUnit. An administrator can change what info is to be displayed for a unit, as well as manage feedback in a different interface. | The product will firstly consist of a main page. On this main page, a user can search for a specific organisationunit. Once a unit is found, the user can click on the unit, and will be taken to a new page, displaying all the information about the organisation unit. Once there, the user can also fill in a form to propose changes to the orgUnit. An administrator can change what info is to be displayed for a unit, as well as manage feedback in a different interface. | ||
− | ===Architecture=== | + | ===Architecture & Framework=== |
+ | We choose to use Angular 4, because everyone in the group has good experience with this framework. | ||
+ | |||
The key framework of the application is Angular. AngularMaterial is a package used for styling and layout, and AngularCLI is a tool used for generation and runing the application. | The key framework of the application is Angular. AngularMaterial is a package used for styling and layout, and AngularCLI is a tool used for generation and runing the application. | ||
The Architecture is overall REST based, using data from the DHIS api. The application itself is multipage, with a common navigational bar at the top. The different pages have different properties, like the search page or the display page. | The Architecture is overall REST based, using data from the DHIS api. The application itself is multipage, with a common navigational bar at the top. The different pages have different properties, like the search page or the display page. | ||
+ | |||
+ | Angular 4 is a framework for building client application in HTML and either Javascript or a language like TypeScript, Typescript compile to Javascript. | ||
+ | |||
+ | We are also using this architecture[https://angular.io/guide/architecture]] to communicate with Dhis2 server and show the data to the users/admin. | ||
+ | Angular apps are modular and has itss own modularity system called NgModules. | ||
+ | Every Angular app has at least one NgModules class, the root module, conventionally named AppModule. | ||
+ | [[File:Skjermbilde_2017-12-04_kl._19.55.22.png]] | ||
+ | |||
+ | AppModule contains: | ||
+ | |||
+ | declaration : the view classes that belong to this module, this classes are components, directives and pipes. | ||
+ | exports : subset of declaration that should be usable and visible in component templates of the other modules. | ||
+ | import : what other modules export as classes is imported in this module. Library modules is JavaScript collections in Angular which is imported. | ||
+ | providers : creators of services that can be used global. | ||
+ | services : declaration of services we are using in the app. | ||
+ | |||
+ | |||
+ | Angular will present application in browser as it is according to how we have instruction is provided. | ||
+ | Angular start from the root (AppModule) , from here Angular route to show a page (template). What functionality and how user can interact through the interfaces is declared in component classes. Component classes is also injected by services, application logic is added in services. Services is | ||
+ | Template is a html file, which is styles by css file, | ||
+ | |||
+ | Example: | ||
+ | When user type the link to the app, user will see the login page, this is because AppModule route user to login folder where login.component.ts (component) is. | ||
+ | In this file we declare how the html file should be showing to the user and the functions. | ||
+ | When a user fill the login form and click on the login button a function in login.component.ts will check that the form is properly filled, then show user a message for error or let a service try to login the user and redirect to the next page where user is logged inn. | ||
+ | |||
+ | Same pattern is used for other pages in this app and that is according to Angular architecture. | ||
+ | |||
+ | |||
+ | [[File:Component.png]] | ||
+ | |||
+ | == Tools == | ||
+ | |||
+ | https://github.uio.no/ - Version control | ||
+ | |||
+ | https://atom.io/ - IDE | ||
+ | |||
+ | https://cli.angular.io - CLI tool for Angular | ||
+ | |||
+ | https://material.angular.io - Material Design components for Angular | ||
+ | |||
+ | == Division of work == | ||
+ | |||
+ | After the group was formed, we had meeting where we wrote down all tasks and sub taks, we also created a plan for meetings and project (Timeline). | ||
+ | |||
+ | Minimum 3 meetings pr week, where we discuss: | ||
+ | |||
+ | - what we have done. | ||
+ | |||
+ | - what the issues is. | ||
+ | |||
+ | - help each other to resolve the issues. | ||
+ | |||
+ | - resolve remaining task(s). | ||
+ | |||
+ | - what we can improve. | ||
+ | |||
+ | - what we have learned. | ||
+ | |||
+ | We divided the main tasks equally to each group member, when a group member was finish with his task he help other group member with there task. | ||
+ | With a good and close cooperation we had progress and could work according to the plan we had as timeline. | ||
+ | |||
+ | Main goal was that everyone learn from each other and by doing the work. | ||
+ | |||
+ | Division of work: | ||
+ | |||
+ | *Sondre Kristensen (sondrkri) : Search and Settings, Storing of data, Analytics access, Material Design. Wiki. | ||
+ | *Sondre Patrick Nordby Markhus (spmarkhu) : details-view + suggestions -> backend/frontend + caching | ||
+ | *Muddasar Hussain (muddasah) : login and nav-bar, authorization, securing the app by guard and wiki | ||
==Timeline== | ==Timeline== | ||
+ | The group members are meeting minimum 3 times a week during the development period | ||
{| class="wikitable" | {| class="wikitable" | ||
|- | |- | ||
Line 25: | Line 97: | ||
|- | |- | ||
| Get started using DHIS and framework | | Get started using DHIS and framework | ||
− | | | + | | Basic HTTP functionallity |
− | | | + | | Create propose functionallity |
+ | | Testing & bugfix | ||
+ | |- | ||
| | | | ||
− | | | + | | Create search and detailed view |
− | | | + | | Create information display selection |
− | | | + | | UI refinement |
− | |||
|} | |} | ||
+ | |||
+ | == Licensing == | ||
+ | |||
+ | Angular and dependencies/library is licensed under [https://angular.io/license MIT],we were free to license the project under any license but we choose MIT license. | ||
+ | |||
+ | The work/project is remaining open source where license protect developers/user, they can use, fork, modify and extend the work/project. | ||
==Repository== | ==Repository== | ||
https://github.uio.no/spmarkhu/INF5750-gruppe | https://github.uio.no/spmarkhu/INF5750-gruppe | ||
+ | |||
+ | == The application == | ||
+ | |||
+ | Login page: | ||
+ | |||
+ | [[File:loginPMS.png]] | ||
+ | |||
+ | |||
+ | Location of a organisation unit. | ||
+ | [[File:mapPMS.png]] |
Latest revision as of 12:41, 6 December 2017
Contents
Group Members
- Sondre Kristensen (sondrkri)
- Sondre Patrick Nordby Markhus (spmarkhu)
- Muddasar Hussain (muddasah)
Product Description
The task chosen is: Master Facility List.
Features
The product will firstly consist of a main page. On this main page, a user can search for a specific organisationunit. Once a unit is found, the user can click on the unit, and will be taken to a new page, displaying all the information about the organisation unit. Once there, the user can also fill in a form to propose changes to the orgUnit. An administrator can change what info is to be displayed for a unit, as well as manage feedback in a different interface.
Architecture & Framework
We choose to use Angular 4, because everyone in the group has good experience with this framework.
The key framework of the application is Angular. AngularMaterial is a package used for styling and layout, and AngularCLI is a tool used for generation and runing the application.
The Architecture is overall REST based, using data from the DHIS api. The application itself is multipage, with a common navigational bar at the top. The different pages have different properties, like the search page or the display page.
Angular 4 is a framework for building client application in HTML and either Javascript or a language like TypeScript, Typescript compile to Javascript.
We are also using this architecture[1]] to communicate with Dhis2 server and show the data to the users/admin.
Angular apps are modular and has itss own modularity system called NgModules.
Every Angular app has at least one NgModules class, the root module, conventionally named AppModule.
AppModule contains:
declaration : the view classes that belong to this module, this classes are components, directives and pipes. exports : subset of declaration that should be usable and visible in component templates of the other modules. import : what other modules export as classes is imported in this module. Library modules is JavaScript collections in Angular which is imported. providers : creators of services that can be used global. services : declaration of services we are using in the app.
Angular will present application in browser as it is according to how we have instruction is provided.
Angular start from the root (AppModule) , from here Angular route to show a page (template). What functionality and how user can interact through the interfaces is declared in component classes. Component classes is also injected by services, application logic is added in services. Services is
Template is a html file, which is styles by css file,
Example: When user type the link to the app, user will see the login page, this is because AppModule route user to login folder where login.component.ts (component) is. In this file we declare how the html file should be showing to the user and the functions. When a user fill the login form and click on the login button a function in login.component.ts will check that the form is properly filled, then show user a message for error or let a service try to login the user and redirect to the next page where user is logged inn.
Same pattern is used for other pages in this app and that is according to Angular architecture.
Tools
https://github.uio.no/ - Version control
https://atom.io/ - IDE
https://cli.angular.io - CLI tool for Angular
https://material.angular.io - Material Design components for Angular
Division of work
After the group was formed, we had meeting where we wrote down all tasks and sub taks, we also created a plan for meetings and project (Timeline).
Minimum 3 meetings pr week, where we discuss:
- what we have done.
- what the issues is.
- help each other to resolve the issues.
- resolve remaining task(s).
- what we can improve.
- what we have learned.
We divided the main tasks equally to each group member, when a group member was finish with his task he help other group member with there task. With a good and close cooperation we had progress and could work according to the plan we had as timeline.
Main goal was that everyone learn from each other and by doing the work.
Division of work:
- Sondre Kristensen (sondrkri) : Search and Settings, Storing of data, Analytics access, Material Design. Wiki.
- Sondre Patrick Nordby Markhus (spmarkhu) : details-view + suggestions -> backend/frontend + caching
- Muddasar Hussain (muddasah) : login and nav-bar, authorization, securing the app by guard and wiki
Timeline
The group members are meeting minimum 3 times a week during the development period
Uke 43 | Uke 44 | Uke 45 | Uke 46 |
---|---|---|---|
Get started using DHIS and framework | Basic HTTP functionallity | Create propose functionallity | Testing & bugfix |
Create search and detailed view | Create information display selection | UI refinement |
Licensing
Angular and dependencies/library is licensed under MIT,we were free to license the project under any license but we choose MIT license.
The work/project is remaining open source where license protect developers/user, they can use, fork, modify and extend the work/project.
Repository
https://github.uio.no/spmarkhu/INF5750-gruppe
The application
Login page: