# Entwickler Workshop
**Dauer: 5 Stunden max.**

## Presentation (max. 40 min)
* Ziele des Workshops
* Atomic Design & CDD
* Design Systems
* Vision
* Inv. UI Design Prozess
* Tools
* Workshop Ablauf

### Vorbereitung im Vorfeld des Workshops (max. 20 min)

* Anmeldung bei Miro, Zeplin und Chromatic
* Clonen der Workshop Repo
* Lauffähigkeit von Storybook überprüfen

## Schnupperkurs UI/UX (max. 50 min)

#### Die Teilnehmer bekommen eine Aufgabe einen bestimmten Wireframe zu zeichnen.
*max. 15 min*

Wireframes:
* Ein Login Screen mit dem der Nutzer sich mit Email Adresse und Passwort einloggen kann
	* Informationen: 
		* Login Aufforderung
		* Email Adresse
		* Passwort
	* Aktionen:
		* Login
* Eine Seite zeigt alle Fahrzeuge an, die momentan im Einsatz sind. Über eine Suche kann ein bestimmtes Fahrzeug mittels Kennzeichen gefunden werden.
	* Informationen:
		* Zusammenfassung des Suchergebnisses
		* Fahrzeugmodell
		* Kennzeichen
		* Standort
		* Status
	* Aktionen:
		* Suchen
* Eine Seite zeigt alle Telematikeinheiten, welche nicht mit einem Fahrzeug verknüpft sind. Über einen Button können diese zu einem Fahrzeug hinzugefügt werden.
	* Informationen:
		* Zusammenfassung der Filtereinstellung (Nicht mit Fahrzeug verknüpft)
		* Geräte ID
		* Standort
		* Hinzugefügt am
		* Status
	*  Aktionen:
		* Zu Fahrzeug hinzufügen
* Ein Popup zeigt alle Fahrzeuge, welche noch nicht mit einer Telematik verknüpft sind. Über einen Button lässt sich eine Telematik hinzufügen.
	* Informationen:
		* Aufforderung ein Fahrzeug auszuwählen
		* Zusammenfassung der Filtereinstellung (Nicht mit Telematik verknüpft)
		* Fahrzeugmodell
		* Kennzeichen
		* Standort
	* Aktionen
		* Fahrzeug zu Telematik hinzufügen
* Ein Popup bestätigt, dass ein Fahrzeug erfolgreich mit einer Telematik verknüpft wurde.
	* Informationen:
		* Erfolgsmeldung mit Kennzeichen und Standort des Fahrzeugs, sowie ID der Telematik
	* Aktionen:
		*  Popup schliessen
* Eine Seite zeigt alle Nutzer an, die in Zahlungsrückstand geraten sind, sortiert von vielen Schulden bis wenig Schulden.
	* Informationen:
		* Zusammenfassung der Filtereinstellung (Nutzer mit Schulden)
		* Name
		* Standort
		* Schulden
		* Aktiv seit
	* Aktionen:
		* Keine
* Ein Popup lässt den Nutzer sein Passwort ändern.
    * Informationen:
        * bisheriges Passwort
        * neues Passwort
        * Bestätigung des neuen Passworts
    * Aktionen:
        * Passwort ändern
        * Popup Schliessen

#### Anschliessend werden die Wireframes fotografiert und bei Miro hochgeladen.
*max 5 min*

#### Funktionen und Informationen sollen mit Postits hinzugefügt werden.
*max 10 min*

#### Gezeichnete UI Elemente werden ins Miro kopiert. Die Teilnehmer sollen ihren Wireframe mithilfe der Elemente nachbauen.
*max 10 min*

#### Angleichen. Die nachgebauten Wireframes werden gemeinsam vereinheitlicht.
*max 5 min*

#### Funktionen und Informationen werden mit Postits auf die Wireframes gemappt.
*max. 5 min*

## Workshop Storybook & CDD (max. 120 min)

### Kurzvorstellung Sketch & Zeplin
*max. 15 min*

#### Jeder Teilnehmer bekommt ein Atom-UI Element zugelost.
* Kopiere den Link der Sektion des Elementes in Zeplin und füge den Link dem Wireframe Element in Miro hinzu
* Gib dem Element in Miro einen Bezeichner

*max. 5 min*

#### Erzeugen eines Angular Components für das UI Element
* Öffne das Projekt in einer IDE deiner Wahl
* Navigiere zu ```src/app/components```
* Kopiere den ```new_element```Ordner
* Ersetze im Titel des Ordners und der Dateien ```'new_element'``` durch den Bezeichner deines UI Elementes
* Ersetze den String ```'new_element'``` in allen Dateien durch den Bezeichner deines UI Elements
* Starte Storybook mittels ```npm run storybook```

*max. 10 min*

#### Referenzieren von Miro und Zeplin in der Dokumentation
* Öffne die ```your_element.doc.md``` Datei
* Navigiere im Miro zu der gezeichneten Representation deines Elementes und kopiere mittels Rechtsklick den Link ```Copy Link```
* Füge den Link unter der Sektion ```Miro``` in der Markdown Datei ein
* Navigiere in Zeplin zu der Sektion deines Elementes und Kopiere den Link ```Copy Selection Web Link``` durch Klick auf ```...```
* Füge den Link unter der Sektion ```Zeplin``` in der Markdown Datei ein
* Speichere die Datei und Navigiere in Storybook (im Browser) zu Notes. Sind die Änderungen nicht vorhanden starte Storybook neu.

*max. 10 min*

#### Coden des Angular Components für das UI Element
* Definiere das Template (zunächst statisch) für den initialen Zustand deines UI Elementes unter ```your_element.component.ts``` und style es in ```your_element.styles.css``` nach der Zeplin Vorgabe. ~~Farben und Schriften sind global definiert.~~
* Speichere deine Änderungen und schaue, ob sie in Storyboard dargestellt werden. Starte Storybook im Zweifel neu.
* Pushe deine Änderungen in die Github Repo

*max. 20 min*

### Kurzvorstellung Knobs

*max. 10 min*

#### Hinzufügen von dynamischen Eigenschaften

    * Button disabled
    * Button hover
    * Button pressed
    * Text Input Active
    * Text Input Changed
    * Text Input Type->Password
    * Description: Markiert

* Speichere deine Änderungen und schaue, ob sie in Storyboard dargestellt werden. Starte Storybook im Zweifel neu.
* Pushe deine Änderungen in die Github Repo

*max. 20 min*

#### Hinzufügen einer Action
* Speichere deine Änderungen und schaue, ob sie in Storyboard dargestellt werden. Starte Storybook im Zweifel neu.
* Pushe deine Änderungen in die Github Repo

    * Button -> Pressed
    * Button -> Hover
    * text_input -> Focus Out
    * text_input -> Focus In
    
    * Button -> Mouse Out
    * text_input -> Hover
    * text_input -> Mouse Out
    

*max. 30 min*

#### Erzeugen eines Composite Elementes (Live)
* Aus den Elementen ```button``` und ```text_input``` wird das Element ```search_bar```zusammengesetzt.
* Die Änderungen werden anschliessend auf Github gepusht.
* Pulle die neue Version von Github

*max. 15 min*

#### Erzeugen einer speziellen Funktion

    * text_input -> Valid Email Syntax
    * text_input -> isEmpty
    * text_input -> containsBlanks
    * text_input -> containsNumbers -> Gibt Anzahl zurück
    * text_input -> getLength
    * text_input -> containsCharacter(char) -> Gibt Anzahl zurück
    
    
    
    * search_bar -> Search(term)
    

* Baue eine spezielle Funktion
* Pushe deine Änderungen in die Github Repo

*max. 30 min*

### Kurzvorstellung Chromatic
*max. 10 min*

#### Demonstration von Chromatic
* Ändere einen beliebigen visuellen Aspekt deines UI Elements
* Pushe deine Änderungen in die Github Repo
* Die aktuelle Version wird auf Chromatic hochgeladen. Alle visuelle Unterschiede sollten angezeigt werden

*max. 10 min*

#### Kommentieren in Zeplin
* Gehe zu deinem Element in Zeplin und Kommentiere einen Aspekt der dir gefällt bzw nicht gefällt.

*max. 5 min*

#### Referenzieren von Chromatic in Miro und Doku
* Navigiere zu deinem UI Element in Chromatic
* Entferne ```&buildNumber=X``` aus der URL und kopiere den Link.
* Gehe zu der gezeichneten Version des UI Elements in Miro und ersetze den Zeplin Link durch den Chromatic Link
* Öffne die ```your_element.doc.md``` Datei
* Füge den Link unter der Sektion ```Chromatic``` in der Markdown Datei ein
*
*max. 5 min*

#### Kommentieren in Miro
* Gehe zu deinem Wireframe in Miro und füge ein oder meherere sinnlose Elementem, Information oder Aktion hinzu. Mache dies möglichst unauffällig.

*max. 5 min*

* Durchsuche Miro nach den sinnlosen Dingen der anderen und kommentiere diese mit einem konstruktiven Vorschlag

*max. 5 min*

* Gehe zu deinem Wireframe und setze die Vorschläge um oder schreibe eine Antwort. Markiere nicht gefundene Fehler mit einem Roten Kommentar.

*max. 5 min*

## Diskussionsrunde
* Feedback zu den Tools
* Kompatibilität mit bisherigem Workflow
* Wünsche für zukünftigen Workflow
* Feedback zum Workshop
* Befürchtungen im Bezug auf den Design Prozess/Designsystem
* Andere Methoden/Tools/Prozesse die hilfreich sein könnten

## Ziele
* Verständnis für den angestrebten Prozess/Architektur erzeugen
* „Aha“ Erlebnis durch Kollaboration erzeugen (Analogie zu Git?)
* Verständnis von atomarer UI schaffen
* 3 Points of Collaboration.
* Idee/Kritik an Typ/Anordnung/Funktion eines Element: Miro Wireframe
* Idee/Kritik an Aussehen von Element/States: Zeplin Screen
* Idee/Kritik an Implementierung/Code/Bugs: Storybook/Chromatic
* Die UI wird nicht mehr von einem Screendesign übertragen und umgesetzt sondern auf Komponentenbasis und von mehreren Stellen (Wireframes, Screens, Storybook) referenziert. Entwickler sollen ein Verständnis von der ganzheitlichen Struktur haben.
* Alle Entwickler bei Miro, Storybook/Chromatic anmelden/vertraut machen
* Feedback durch Diskussion