PSM

From mn/ifi/inf5750
Revision as of 11:41, 6 December 2017 by Sondrkri@uio.no (talk | contribs) (Division of work)

(diff) ← Older revision | Latest revision (diff) | Newer revision → (diff)
Jump to: navigation, search

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. 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.


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

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:

LoginPMS.png


Location of a organisation unit. MapPMS.png