Difference between revisions of "PSM"

From mn/ifi/inf5750
Jump to: navigation, search
(Architecture)
(Architecture)
Line 11: Line 11:
 
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===
 
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.
  

Revision as of 21:27, 4 December 2017

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

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

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

Repository

https://github.uio.no/spmarkhu/INF5750-gruppe