Skip to content

Bootcamp

Jump to bottom
Gregor Woiwode edited this page Sep 17, 2018 · 11 revisions

Taskboard

Lernziele

  • Fundierte Kenntnisse der relevanten Konzepte und Begriffe in Angular
  • Umstieg von JS auf TS
  • Umsetzung eines Taskboards
  • Testing mit Angular
  • Kennenlernen von RESTful APIs

Voraussetzung

Bitte stelle sicher, dass die Bootcamp-API installiert ist und jederzeit gestartet werden kann.

Projekt konfigurieren

Erzeuge für den Chat eine neue Angular-Anwendung mit de CLI.

# Erzeugt ein Angular Projekt
# - Element-Prefixes = tb
# - Preprocessor = scss
ng new taskboard --prefix tb --style scss

Hinweis Du kannst im Angular Cheat Sheet einige wichtige Commands nachschlagen, die du im Zuge dieser Aufgabe verwenden musst.

Hinweis - Wann mache ich einen Commit?

Oft fällt ist es zu Beginn nicht immer einfach den Zeitpunkt zu bestimmen, wann ein Commit im Repository erzeugt wird. Eine Faustregel besagt, dass nach jedem Feature ein solcher Commit erfolgt. Ein Feature ist beispielsweise:

  • Task kan visualisiert werden
  • Tasks werden in einer Liste angezeigt
  • Ein Task kann von Liste ToDo in Liste Doing verschoben werden.

Versuche in dieser Übung ein Gespür für den Commit von Änderungen zu bekommen. 🎓

Übrigens Du solltest mindestens einmal pro Tag pushen, um deine Arbeit zu sichern. 📑

Style Guides & Linting Regeln

1. Updated zunächst eure Linting Styles nach folgender Anleitung

2. Haltet euch an die Frontend Guidelines und Git Commit Styles: https://github.com/ui-bootcamp/guidelines-and-conventions

Akzeptanzkriterien

Taskboard
Wenn das Taskboard geöffnet wird, kann ein einzelner Task angelegt werden
Wenn ein Task angelegt wurde, wird er in einer Liste mit dem Titel ToDo angezeigt.
Wenn sich ein Task in der ToDo befindet, kann dieser mit einem Klick gelöscht werden.

Technische Hinweise

  • Zum Laden, Anlegen und Löschen von Tasks kann ein In-Memory Service eingesetzt werden
  • Die Funktionalität des Taskboards wird in einem eigenen Modul implementiert.
  • Komponenten kommunizieren durch @Input- und @Output-Bindings miteinander.

Akzeptanzkriterien

Taskboard
Wenn ein Task angelegt wurde, wird er gespeichert.
Wenn das Taskboard nach dem Schließen des Browser erneut geöffnet wird, wird der angelegte Task nachwievor angezeigt.
Wenn ein Task angelegt wurde, soll dieser nur in der Liste ToDo angezeigt werden.
Wenn ein Task in Bearbeitung ist, soll dieser nur in der Liste Doing angezeigt werden.
Wenn ein Task abgeschlossen ist, soll dieser nur in der Liste Done angezeigt werden.
Ein Task wird immer nur in einer Liste angezeigt.

Technische Hinweise

  • Zum Laden, Anlegen und Löschen von Tasks wird die Bootcamp-API genutzt.
  • Die API wird durch einen Angular Service angesprochen, der den HttpClient nutzt.
  • Der zuvor geschriebene In-Memory Service und der Http Service haben die gleiche API.
  • Http- und In-Memory-Service sollen sich im IoC-Container einfach austauschen lassen.
Weitere Informationen zur Server-Kommunikation

Optional

Heute wirst du Unit- und Integrationstests schreiben. Nutze zur Formulierung der Tests die Akzeptanzkriterien aus den Vortagen. Mit den Tests wirst du die implementierte Fachlichkeit nachweisen.

Technische Hinweise

Die folgende Liste zeigt, welche Techniken bei den Tests zum Einsatz kommen.

  • Component Unit Test

    • @Input
    • @Output (jasmine spy)

  • Component Shallow Test

  • Service Unit Test

  • Service Integration Test mit MockBackend

  • Dokumentation: Angular's Test Guide

  • Beispiele: GitHub Repository

    • Die Tests befinden sich in den jeweiligen spec-Dateien (siehe *.spec.ts).

Akzeptanzkriterien

Duplikate erkennen
Wenn ein Nutzer den Text eines neuen Tasks eingibt, werden in Echtzeit alle besehenden Tasks optisch hervorgehoben, die den gleichen Text haben.
Wenn die Erkennung von Duplikaten ausgelöst wird, sollen Groß- /Kleinschreibung nicht berücksichtigt werden.
Wenn die Erkennung von Duplikaten ausgelöst wird, reicht eine Teilübereinstimmnug des Textes, um den jeweiligen Task optisch hervorzuheben.
Favoriten
Wenn ein Task in der Liste ToDo oder Doing steht, kann dieser als Favorit gekennzeichnet werden.
Wenn ein Task als Favorit gekennzeichnet ist, wird dieser optisch hervorgehoben.
Wenn ein Tasks als Favorit gekennzeichnet ist, kann mit einem Klick der Favoritenstatus entzogen werden.
Task bearbeiten
Wenn ein auf einem Task angeklickt wird, kann der Text des Tasks bearbeitet werden.
Wenn ein Task bearbeitet wird, kann der neue Text gespeichert werden.
Wenn ein Task bearbeitet wird, und dessen neuer Text gespeichert wird, wird der Editiermodus automatisch beendet.

Technische Hinweise

  • Schreibe für wenigstens vier Akzeptanzkriterien deiner Wahl Unit-Tests.
  • Bonus Schreibe für ein Akzeptanzkriterium einen UI-Test.

Weiterführendes Material

Links zu weiterführenden Infos bzw zur Wiederholung:

Diese Fragen solltest du beantworten können

  • Was ist Angular und wo hilft es uns?
  • Was ist Angular CLI
  • Welche Arbeit nimmt uns Angular CLI ab?
  • Was ist eine Component?
  • Was ist eine Directive?
  • Welche Arten von Directives gibt es?
  • Was sind Lifecycle Hooks?
  • Was ist NgModule?
  • Was ist Bootstrap im NgModule?
  • Was ist eine Pipe?
  • Was macht die async Pipe?
  • Was ist ein Service?
  • Was ist Dependency Injection?
  • Was ist ein Local Singleton?
  • Wofür brauche ich das providers Array?
  • Was ist der Router?
  • Was sind Router Guards?
  • Was ist ein @Input?
  • Was ist ein @Output?
  • Was ist Event bzw. Property Binding?
  • Was ist der Unterschied zwischen propertyName="..." und [propertyName]="..."?
  • Welche Arten von Tests gibt es in Angular?
  • Was ist HTTP?
  • Was ist SOP?
  • Was ist CORS?
  • Was ist REST?
  • Was ist Reactive Programming?
  • Was ist ein Observer?
  • Was ist ein Observable?
  • Was ist ein Subject?
  • Was ist AOT?
  • Was ist JIT?
  • Was sind Decorators?
Clone this wiki locally