WEB2 Practical - Week 1

Pre-
Nr. Req. Feature Lvl Who req. Covering Topics
Set up development environment (IDE, GitBash, Node.js, NPM,
1.1 X ++ All Tools for developing Angular
bower)

1.2 X Create Angualr seed app via IDE + All Intro to Angular

Set-up GIT environment. One student pushes the seed app the rest
1.3 X ++ All Tool for developing
pulls; If it’s a private repository the teacher should be invited

Set-up account on the Linux server (iris.fhict.nl) and upload the app
1.4 ++ 1 Production environment
stored in GIT

Specification Useful links:

Mixed entities
Tasks Recommended IDE, Sublime Text
Departments https://www.sublimetext.com
Employees
General / stand-alone stuff Using the Angular CLI to setup:
https://angular.io/tutorial/toh-pt0
https://cli.angular.io

Angular Architecture:
https://angular.io/guide/architecture

Fontys Selfservice:
https://apps.fhict.nl/selfservice

Fontys GIT:
https://git.fhict.nl

NodeJS:
https://nodejs.org/en/

NPM:
https://www.npmjs.com

v1.0 | September 21, 2018

WEB2 Practical - Week 2

Pre-
Nr. Req. Feature Lvl Who req. Covering Topics
1.1,
Create a component for Tasks and populate a grid via an array of Components, *ngFor, single
2.1 X +++ 1 1.2,
strings binding
1.3
1.1,
Create a component for Departments and populate a grid via an array Components, *ngFor, single
2.2 X +++ 1 1.2,
of strings binding
1.3
1.1,
Create a component for Employees and populate a grid via an array of Components, *ngFor, single
2.3 X +++ 1 1.2,
strings binding
1.3

Specification Useful links:

Mixed entities
Tasks Typescript Documentation:
Departments https://www.typescriptlang.org/docs/handbook/basic-types.html
Employees
General / stand-alone stuff Angular Components and data binding:
https://angular.io/tutorial/toh-pt1

Angular Cheatsheet:
https://angular.io/guide/cheatsheet

Angular *ngFor and displaying data:

https://angular.io/guide/displaying-data

v1.0 | September 21, 2018

WEB2 Practical - Week 3

Pre-
Nr. Req. Feature Lvl Who req. Covering Topics
Change the component Task to show a list with task names from an
3.1 X array of objects. Decide for yourself what the properties of a Task ++ 1 2.1 Objects, Classes, Pipes
object should be.
Change the component Departments to show a list with department
3.2 X names from an array of objects. Decide for yourself what the ++ 1 2.2 Objects, Classes, Pipes
properties of a Department object should be.
Change the component Employees to show a list with employee
3.3 X names from an array of objects. Decide for yourself what the ++ 1 2.3 Objects, Classes, Pipes
properties of an Employee object should be.
Implement CRUD functionalities for component Tasks; i.e. make it
possible to create, update, view (the details) and delete tasks.
3.4 X +++ 1 3.1 Objects, 2-way binding
Determine with your group how you're going to visualize it in the view
and make sure it's consistent with the other components.
Implement CRUD for component Departments; i.e. make it possible to
create, update, view (the details) and delete departments. Determine
3.5 X +++ 1 3.2 Objects, 2-way binding
with your group how you're going to visualize it in the view and make
sure it's consistent with the other components.
Implement CRUD for component Employees; i.e. make it possible to
create, update, view (the details) and delete employees. Determine
3.6 X +++ 1 3.3 Objects, 2-way binding
with your group how you're going to visualize it in the view and make
sure it's consistent with the other components.

Specification Useful links:

Mixed entities
Tasks Typescript Classes:
Departments https://www.typescriptlang.org/docs/handbook/classes.html
Employees
General / stand-alone stuff Angular Pipes:
https://angular.io/guide/pipes

Displaying list of objects:

https://angular.io/tutorial/toh-pt2

v1.0 | September 21, 2018

WEB2 Practical - Week 4

Pre-
Nr. Req. Feature Lvl Who req. Covering Topics
Implement a Service for component Tasks;
This Service should supply the data for the component.
4.1 X +++ 1 3.1 Services
Be sure to also make the appropriate changes to the component and/
or view so it makes use of this Service.
Implement a Service for component Departments;
This Service should supply the data for the component.
4.2 X +++ 1 3.2 Services
Be sure to also make the appropriate changes to the component and/
or view so it makes use of this Service.
Implement a Service for component Employees;
This Service should supply the data for the component.
4.3 X +++ 1 3.3 Services
Be sure to also make the appropriate changes to the component and/
or view so it makes use of this Service.
Change component Tasks in such a way the Task model also stores
++
4.4 X to which department it belongs, which employee(s) are working on it 1 4.1 Services
++
and when it needs to be done.
Change component Departments in such a way the Department
4.5 X +++ 1 4.2 Services
model stores which employee(s) are working there.

Change component Employees in such a way the Employee model

4.6 X +++ 1 4.3 Services
stores to which department he/she belongs to.
Create a new component Dashboard. In this component you need to
be able to see an overview of the Tasks, Departments & Employees
3.4,
with their names. When clicking on one of the items you should see +++
4.7 X All 3.5, Services, Directives
the details. ++
3.6
i.e. When you click on a task you should see all of its information in
the same way it's displayed in module Tasks (make use of directives).
Change component Departments in such a way it will show the
4.8 +++ 1 4.7 Services, Directives
employees names when you view the details.

Change component Employees in such a way it will show the

4.9 ++ 1 4.7 Services, Directives
department name when you view the details.

Specification Useful links:

Mixed entities
Tasks Angular Services:
Departments https://angular.io/tutorial/toh-pt4
Employees
General / stand-alone stuff Angular Directives:
https://angular.io/guide/structural-directives

v1.0 | September 21, 2018

WEB2 Practical - Week 5

Pre-
Nr. Req. Feature Lvl Who req. Covering Topics

5.1 X Change component Tasks enabling the user to search for a task ++ 1 3.4 -

Change component Departments enabling the user to search for a

5.2 X ++ 1 3.5 -
department

5.3 X Change component enabling the user to search for an employee ++ 1 3.6 -

Install Angular Material or ng-Bootstrap and use their widgets and 1.1,
5.4 X +++ All 3rd party modules
styling to styling the ‘main template’ 1.2

4.2,
5.5 X Style the view of component Tasks +++ 1 3rd party modules
5.4

4.3,
5.6 X Style the view of component Departments +++ 1 3rd party modules
5.4

4.4,
5.7 X Style the view of component Employees +++ 1 3rd party modules
5.4

4.1,
5.8 X Style the view of component Dashboard +++ 1 3rd party modules
5.4

Create a routing module and add a navbar to your app using the
5.9 X ++ 1 - Routing
routing module.

Change component Dashboard so you can search based on

5.10 +++ 1 4.7 -
employee and/or department
Create a component Calendar which shows a month calendar. In this
module the tasks should be incorporated into the calendar.
For example, show the name of task with a date. Make sure the range
+++
5.11 of dates starts from the day the task was created till when it should be 2 5.1 3rd party modules
++
finished.
Finish the GUI by making the tasks clickable. When clicked the details
of a task should be shown.
+++
5.12 Create PHP REST/JSON API 3 - REST API
++

Specification Useful links:

Mixed entities
Tasks Angular Material:
Departments https://material.angular.io
Employees
General / stand-alone stuff ng-Bootstrap:
https://ng-bootstrap.github.io

Angular Routing:
https://angular.io/tutorial/toh-pt5

v1.0 | September 21, 2018

WEB2 Practical - Week 6

Pre-
Nr. Req. Feature Lvl Who req. Covering Topics
Change the service providing Tasks data so it starts/initialize with data
from the API found at http://i875395.hera.fhict.nl/api/<PCN>/task. The
6.1 X +++ 1 5.3 JSON, HTTP, Services
component should still maintain the CRUD functionalities.
Note: keep UX in mind concerning a-sync.
Change the service providing Departments data so it starts/initialize
with data from the API found at http://i875395.hera.fhict.nl/api/<PCN>/
6.2 X department. The component should still maintain the CRUD +++ 1 5.4 JSON, HTTP, Services
functionalities.
Note: keep UX in mind concerning a-sync.
Change the service providing Employees data so it starts/initialize with
data from the API found at
6.3 X http://i875395.hera.fhict.nl/api/<PCN>/employee. The component +++ 1 5.5 JSON, HTTP, Services
should still maintain the CRUD functionalities.
Note: keep UX in mind concerning a-sync.
4.7,
Ensure that the UI of all API access takes a-sync into account. i.e. the 6.1,
6.4 + 1 HTTP, Services
UI should not block, responses and errors are correctly handled. 6.2,
6.3
Change components Dashboard and/or Calendar making it possible to ++ 6.5,
6.5 All -
add tasks from their view. ++ 5.11

Search for another public API (web service) which fits the “To do”-app ++
6.6 All -
and include it ++

Specification Useful links:

Mixed entities
Tasks Angular HTTP:
Departments https://angular.io/tutorial/toh-pt6
Employees
General / stand-alone stuff

v1.0 | September 21, 2018

WEB2 Practical – Extra challenges!

Pre-
Nr. Req. Feature Lvl Who req. Covering Topics
Make it possible to sort tasks, employees and departments by
x.1 +++ All All Sorting
different properties
In the Dashboard component, when selecting any object being a Task,
Employee or Department, make it highlight all the associated objects.
++
x.2 For example: When selecting a Task, highlight the associated All All Cross component functionality
++
Department in the Department component and highlight the
Employees working on this Task in the Employee component.
Make sure your data is stored in local cache memory so when the
+++
x.3 user closes the browser their changes are not lost. (Use a local cache All All Local cache storage
++
storage / not a database)

Specification
Mixed entities
Tasks
Departments
Employees
General / stand-alone stuff

v1.0 | September 21, 2018