::: Boardgame Case :::

1. Introduction

In the previous (three) month we have learned a lot of Angular 6

Now it is time to

recap the knowledge
test our knowledge
find and fix impprovements in our knowledge

For this four targets we invented the Case Principle. During this module we will create an app for Boardgames

1.1. What you will learn

In the next module of this tutorial you will learn by creating an application

A full CRUD application for BoardGames

1.2. What: Boardgame Case

One of the teammembers has a hobby, BoardGames so we will focus on that

Figure 1. UML boardgame

In the end of this evening we will all have

A basic CRUD application

Create a BoardGame
Get a list of Boardgames
Get the details of one Boardgame
Update a BoardGame
Delete a boardgame
Deployed the boardgame to the acct environment

I will leave the entire project pretty much up to you so I will not have a solution perse, but might also build one during this evening :-)

From experience I find that making no solution is better for a case. Since else I will plavend the floor and fix problems which should during this evening be fixed by you, the trainees! :-)

2. Create Domain Model

2.1. Introduction

Create the domain class BoardGame

Give the domain class the right properties (see UML above)

3. Create a REST endpoint

Based on the design above create your REST api now!

Or if all fails … use this github repo and use the branch the trainer mentions (on 21-12-2018 that was the support/modify-to-crudding-over-boardgame branch)

4. Test the endpoint

Use Postman to test your endpoint

5. Create an Angular service

Using the newly created REST endpoint and domain model please now implement the BoardgameService which is also a CRUD over Boardgame(s)

Create

Create a create method to create a boardgame (how much created here :-))

GET list of boardgames

Get a list of the (added) boardgames

6. CreateBoardGameComponent

Now it is time to think about Angular Reactive Forms

Using the Angular CLI create a CreateBoardgameComponent to be able to create a boardgame

7. BoardgamesComponent

Using the Angular CLI create a BoardGamesComponent which shows a list of boardgames

8. Add a topmenu

Using the knowledge and the user-app (probably) now add the following (party finished) menu to the topmenu

app.component.html

<div class="topnav">
  <a class="active" [routerLink]="">Home</a>
  <a [routerLink]="['cars']">Cars</a>
  <a [routerLink]="['tasks']">Tasks</a>
  <a [routerLink]="['contact']">Contact</a>
  <a [routerLink]="['about']">About</a>
</div>

<div>
  <router-outlet></router-outlet>
</div>

&nbsp;
<hr />

<button [routerLink]="['']">Back</button>

Some CSS files also need to be added

Find them on github. Good luck :-)
- (omitted code here for exercisering)

9. Create ShowBoardgameComponent

10. Create EditBoardgameComponent

11. Delete a boardgame

How would you do that? :-)

Do not create a component for it

12. Create a guard

Using the Angular CLI please add a guard for security reasons which let’s you log in when you want to edit a Boardgame

13. Add player to UML

Following the below update of the UML please implement that!

And of course, not only in the domain class but also in the other Angular parts of this application

14. Congratulations

You have finished this case!

15. Bonus: Use multiple environments

The customer just called in that he has created an acct environment for us.

Please add an acct environment (configuration!) to your Angular app and deploy to it! Use the to be mentioned URL of the trainer for the acceptance REST api endpoint

And … when we are at it … we will bring that API live during the case since it shows how to do it (using Docker :-))