O slideshow foi denunciado.
Utilizamos seu perfil e dados de atividades no LinkedIn para personalizar e exibir anúncios mais relevantes. Altere suas preferências de anúncios quando desejar.

Angular von 0 auf 100

212 visualizações

Publicada em

Angular von 0 auf 100 Vortrag auf der Web Developer Konferenz 2018
von
Dr. Yvette Teiken

Publicada em: Tecnologia
  • Seja o primeiro a comentar

  • Seja a primeira pessoa a gostar disto

Angular von 0 auf 100

  1. 1. Angular von 0 auf 100 Dr. Yvette Teiken
  2. 2. Logistik  Dr. Yvette Teiken  CTO und Gründerin erminas GmbH  @yteiken  Code: yte424  https://github.com/yte424/truckcall
  3. 3. Agenda  Einführung in Angular  Demo App bauen  Rapid Prototyping  Weiterführende Themen
  4. 4. Was ist Angular?
  5. 5. Was ist Angular?  Open Source JavaScript Framework für clientseitige Anwendungen  Warum:  Vielseitige Datenbindung  Modular by Design  Built-in Back-End Integration  Man kommt schnell zum Ziel  Weit verbreitet  Defacto Standard
  6. 6. AngularJS  Angular  2009 Angular 1.0  AngularJS  Schnell populär geworden  2016 Rewrite  Angular 2 jetzt nur noch Angular  Aktuell: Angular 6.1
  7. 7. War braucht man für den Einstieg?  Notwendig:  JavaScript  HTML  CSS  Wünschenswert  OOP Konzepte kennen  C++, Java, C#, …
  8. 8. TypeScript als Programmiersprache für Angular  „Standardsprache“ für Angular Applikationen  „Typisiertes JavaScript“  Klassen/Objekte  Precompiler erzeugt JavaScript  …
  9. 9. Editoren  Visual Studio  Visual Studio Code  WebStorm  Atom  Eclipse  Sublime  ….
  10. 10. Rapid Prototyping Angular in Aktion
  11. 11. Wellpappe
  12. 12. Aufgabe  User Stories  Ich als Disponent möchte den Transport von Papierrollen managen, um eine reibungslose Produktion zu gewährleisten.  Ich als Disponent möchte eine Übersicht über die aktuellen Fahraufträge haben.  Technik-ferne Zielgruppe  Protoyping machen  Umsetzung:  Fahraufträge  Liste von Fahraufträgen   Angular!
  13. 13. Vorbereitung Angular CLI  Generator für Angular Komponenten  Folgt Best Practices  Angular CLI installieren  App erstellen  ca. 18.000 Dateien  Öffnen Code: npm install -g @angular/cli ng new truckcall ng serve --open
  14. 14. App Grundgerüst  Einstiegspunkt  Konfiguration: angular.json  Definiert das komplette Projekt und deren Abhängigkeiten  Folder: angular.json
  15. 15. Grundlegende Datei Struktur und {{  Jede Angular Komponente besteht aus  *.css: Modul spezifisches Styling  *.html: Das Aussehen des Moduls  *.ts: Modul Definition und Logik  *.spec.ts : E2E Test <div class="container"> <div style="text-align:center"> <h1> Willkommen zu {{ title }}! </h1> </div> <div>
  16. 16. Rapid Prototyping Logik hinzufügen
  17. 17. Domänenmodell: Fahrauftrag Job.ts export class Job{ id: number; source: string; destination: string; asap : boolean; status : JobStatus; item: string; } export enum JobStatus { todo, inProgress, done }
  18. 18. Liste von Fahraufträgen mocken mock.job.ts import {Job, JobStatus} from './Job'; export const JOBS: Job[] = [ {id: 108168324, source: "Maschine 2", destination: "Lager", item:"Aviretta Welle 100g", asap: true, status: JobStatus.inProgress}, {id: 10168612, source: "Maschine 3", destination: "Lager", item:"Brown Kraftfilter 186g", asap: true, status: JobStatus.inProgress}, {id: 15, source: "Lager 2", destination: "Maschine 3",item:"Jass Testliner 3 120g", asap: true, status: JobStatus.inProgress}, {id: 16, source: "Maschine 27", destination: "Lager", item:"Jass EHZ HArtwelle 130g", asap: true, status: JobStatus.inProgress}, {id: 17, source: "Lager", destination: "Lager",item:"Jass Testliner 3 163g", asap: false, status: JobStatus.inProgress}, {id: 18, source: "Lager", destination: "Maschine 4",item:"Aviretta Welle 80g", asap: true, status: JobStatus.inProgress}, {id: 19, source: "Lager", destination: "Maschine 4", item: "EifelLiner STD", asap: false, status: JobStatus.inProgress}, {id: 20, source: "Maschine 2", destination: "Lager", item:"Aviretta Welle 80g", asap: false, status: JobStatus.inProgress}, ];
  19. 19. Neues Modul - Component  Job Komponente  Anzeigen von Joblisten  Anzeigen von Jobs  Logik definieren  Model Anbindung und Zuweisung zur Selektion  HTML Template zur Anzeige  Einbindung in App ng generate component job
  20. 20. job.component.ts job.component.ts: import { Component, OnInit } from '@angular/core'; import { Job } from '../Job'; import { JobStatus } from '../Job'; import { JOBS } from '../mock-jobs‘; @Component({ selector: 'app-job', templateUrl: './job.component.html', styleUrls: ['./job.component.css'] }) export class JobComponent implements OnInit { jobList: Array<Job> = JOBS; selectedJob: Job; constructor() { } ngOnInit() { } onSelect(job: Job): void { this.selectedJob = job; } }
  21. 21. Job.component.html <div class="row"> <div class="list-group col-8"> <h3>Übersicht über Fahraufträge</h3> <a class="list-group-item list-group-item-action" *ngFor="let job of jobList" [class.active]="job === selectedJob" (click)="onSelect(job)"> {{job.item}} von {{job.source}} nach {{job.destination}} </a> </div> <div class="col-4"> <h3>Detail Informationen</h3><br> <div *ngIf="selectedJob" class="card border-secondary mb-3" style="max-width: 20rem;"> <div class="card-header">Aktueller Fahrauftrag</div> <div class="card-body"> <p class="card-text"> <span>AuftragsId: {{selectedJob.id}}</span> <br> <span>Was: {{selectedJob.item}}</span><br> <span>Abholort: {{selectedJob.source}}</span> <br> <span>Ziel: {{selectedJob.destination}}</span> <br> <span>Status: {{selectedJob.status}}</span> </p> … </div>
  22. 22. app.component.html  C:UsersyvetteDropboxDevANGULARtruckcall List And Selectionsrcapp <div class="container"> <div style="text-align:center"> <h1> Willkommen zu {{ title }}! </h1> </div> <div> <app-job></app-job> </div> </div> Folder App with List
  23. 23. Trennung von Verantwortlichkeiten  Idee: Separation of Concerns  Job Liste und Detail Ansicht splitten in einzelne Komponenten  Erhöht Wiederverwertbarkeit ng generate component job-detail
  24. 24. Extraktion der Details in eigene KomponenteJob.component.html: <div class="col-4"> <app-job-detail [selectedJob]="selectedJob"> </app-job-detail> </div> … job-detail.component.ts: @Input() selectedJob: Job; job-detail.component.htm: <div *ngIf="selectedJob" class="card border-secondary mb <h3>Detail Informationen</h3><br> <div class="card-header">Aktueller Fahrauftrag</div> <div class="card-body"> <p class="card-text"> <span>AuftragsId: {{selectedJob.id}}</span> <br> <span>Was: {{selectedJob.item}}</span><br> <span>Abholort: {{selectedJob.source}}</span> <br> <span>Ziel: {{selectedJob.destination}}</span> <br> <span>Status: {{selectedJob.status}}</span> </p> </div> </div> src: master Detail
  25. 25. Mehr Trennung: Services  Aufgaben von Angular Components:  Anzeigen von Daten  Aufbereiten von Daten |Filtern  Services  Daten holen  Daten manipulieren  Daten speichern  Unsere App:  Mock Daten direkt aus Component holen  Umbau:  Verwendung von Services
  26. 26. Job Service  Service erstellen ng generate service job job.service: import { Injectable } from '@angular/core'; @Injectable({ providedIn: 'root' }) export class JobService { constructor() { } }
  27. 27. Basis Implementierung  Asynchronität Non-Blocking des Web:  Observables Job.service.ts: import { Injectable } from '@angular/core'; import {Job} from './Job'; import {JOBS} from './mock-jobs'; @Injectable({ providedIn: 'root' }) export class JobService { getJobs(): Job[] { return JOBS; } constructor() { } } import { Observable, of } from 'rxjs’; … getJobs(): Observable<Job[]> { return of(JOBS); }
  28. 28. Observable Job Component job.component.ts: import { Component, OnInit } from '@angular/core'; import { Job } from '../Job'; import {JobService} from '../job.service'; @Component({ … }) export class JobComponent implements OnInit { jobList :Job[]; selectedJob: Job; constructor(private jobService : JobService) { } ngOnInit() { this.getJobs(); } getJobs(): void { this.jobService.getJobs() .subscribe(jobs => this.jobList = jobs); } onSelect(job: Job): void { this.selectedJob = job; } }
  29. 29. Recap – Was haben wir?  Komponenten  Services  Master Detail
  30. 30. Was ist mit dem Nutzer?
  31. 31. Neue Anforderung  Ich als Gabelstapler Fahrer möchte eine Übersicht für alle offenen Fahraufträge haben, damit ich diese gezielt annehmen kann.
  32. 32. Unterschiedliche Sichten  Umsetzen  Übersicht über offene Aufträge für Fahrer  Eine Gesamtliste für die Disponenten  Eine Detailsicht der Aufträge für beide  Unterschiedliche Sichten auf die App
  33. 33. User Experience
  34. 34. Routing „Design“
  35. 35. App.component.html erweitern <nav class="navbar navbar-expand-lg navbar-dark bg-primary"> <a class="navbar-brand" href="#">Fahraufträge</a> <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarColor01" aria-controls="navbarColor01" aria-expande <span class="navbar-toggler-icon"></span> </button> <div class="collapse navbar-collapse" id="navbarColor01"> <ul class="navbar-nav mr-auto"> <li class="nav-item active"> <a class="nav-link" href="/dashboard">Home <span class="sr-only">(current)</span></a> </li> <!-- <li class="nav-item"> <a class="nav-link" href="/dashboard">Hotlist</a> </li> --> <li class="nav-item"> <a class="nav-link" href="list">Alle</a> </li> </ul> </div> </nav> <div class="container"> <div class="row"> <div class="col-12"> <div style="text-align:center"> <h1> <br> Willkommen zu {{ title }}! <br> </h1> </div> </div> </div>
  36. 36. Basic Router Module  Auf Browser Veränderung hören:  RouterModule.forRoot(routes)  Platzhalter für Inhalt: app-routing.module.ts: import { NgModule } from '@angular/core'; import { RouterModule, Routes } from '@angular/router'; import {MyComponent} from ./*'; const routes: Routes = [ // hier Routen definieren ]; @NgModule({ imports: [ RouterModule.forRoot(routes) ], exports: [ RouterModule ] }) export class AppRoutingModule { } ng generate module app-routing --flat --module=app app.component.html: <h1>{{title}}</h1> <router-outlet></router-outlet>
  37. 37. Dashboard: Komponente für Offene Aufträge ng generate component dashboard <div class="grid grid-pad"> <a *ngFor="let job of openjobs" class="col-1" routerLink="/detail/{{job.id}}"> <div class="module "> <h4>{{job.item}} nach {{job.destination}}</h4> … import { Component, OnInit } from '@angular/core‘; … @Component({ …}) export class DashboardComponent implements OnInit openjobs: Job[] = []; constructor(private jobservice: JobService) { } ngOnInit() { this.getOpenJobs(); } getOpenJobs(): void { this.jobservice.getOpenJobs() .subscribe(jobs => this.openjobs = jobs); } }
  38. 38. Dashboard Sicht
  39. 39. Routen erweitern import { NgModule } from '@angular/core'; import { RouterModule, Routes } from '@angular/router'; import {JobComponent} from './job/job.component'; import {DashboardComponent} from './dashboard/dashboard.component'; import { JobDetailComponent } from './job-detail/job-detail.component'; const routes: Routes = [ { path: '', redirectTo: '/dashboard', pathMatch: 'full' }, { path: 'list', component: JobComponent }, { path: 'dashboard', component: DashboardComponent }, { path: 'detail/:id', component: JobDetailComponent }, { path: '**', redirectTo: '/dashboard', pathMatch: 'full' } ]; @NgModule({ imports: [ RouterModule.forRoot(routes) ], exports: [ RouterModule ] }) export class AppRoutingModule { }
  40. 40. Detailansicht für Fahraufträge: job-detail.component.html: import { Component, OnInit, Input} from '@angular/core'; import { ActivatedRoute } from '@angular/router'; import { Location } from '@angular/common'; import { Job } from '../Job'; import {JobService} from '../job.service'; @Component({ … }) export class JobDetailComponent implements OnInit { @Input() selectedJob: Job; constructor( private route: ActivatedRoute, private jobService: JobService, ) { } getJob(): void { const id = +this.route.snapshot.paramMap.get('id'); this.jobService.getJob(id) .subscribe(hero => this.selectedJob = hero); } ngOnInit() { this.getJob(); }
  41. 41. Fertig!  App auf http://localhost:4200/  Code C:UsersyvetteDropboxDevANGULARtruckcall
  42. 42. Weitermachen
  43. 43. Ergebnisse Prototyp  Managing der Erwartungshaltung des Kunden  Möchtest du das so?  Kann man das so bedienen?  Löst das unser Problem?  Vorteil von Angular: Rapid Prototyping vor Ort:  Weitere Verfeinerung des Konzepts
  44. 44. Unsere Weiterentwicklung  App und Webanwendung  Webanwendung: Disponenten  App für die Gabelstapler Fahrer  Ionic für Mobile Android App
  45. 45. Linde Truck Call
  46. 46. Fertig Truck Call App
  47. 47. Selber weitermachen https://github.com/yte424/truckcall
  48. 48. Danke Twitter: @yteiken E-Mail: yvette.teiken@erminas.de

×