hft-informatik/geovisualisierung
2
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Update Vorgehensweise

Tim Herbst 2021-01-18 20:00:43 +00:00
parent 6b073346cf
commit cb4c0b1ad9
1 changed files with 9 additions and 9 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

18
Projektarbeit-3/Vorgehensweise.md

@ -243,7 +243,7 @@ Hierarchisch betrachtet ergibt sich folgende Reihenfolge:
</div> </div>
Programmatisch sieht das wie folgt aus (AppComponent.html): Programmatisch sieht das wie folgt aus (AppComponent.html):
``` ```html
<app-toolbar></app-toolbar> <app-toolbar></app-toolbar>
<router-outlet></router-outlet> <router-outlet></router-outlet>
<app-footer></app-footer> <app-footer></app-footer>
@ -255,7 +255,7 @@ Da Toolbar und Footer unabhängig der URL fast den gleichen Inhalt besitzen sind
Das Router-Outlet kommt mit dem AngularRoutingModule und man erhält dadurch von Haus aus eine sehr einfache Möglichkeit, eigene Routen und URL-Parameter zu definieren. Das Router-Outlet kommt mit dem AngularRoutingModule und man erhält dadurch von Haus aus eine sehr einfache Möglichkeit, eigene Routen und URL-Parameter zu definieren.
Im `AppRoutingModule` muss lediglich ein Array mit den gewünschten Routen definiert werden. Dies sieht wie folgt aus: Im `AppRoutingModule` muss lediglich ein Array mit den gewünschten Routen definiert werden. Dies sieht wie folgt aus:
``` ```typescript
const routes: Routes = [ const routes: Routes = [
{path: '', redirectTo: 'map', pathMatch: 'full'}, {path: '', redirectTo: 'map', pathMatch: 'full'},
{path: 'map', component: MapComponent}, {path: 'map', component: MapComponent},
@ -310,7 +310,7 @@ Das verschachtelte Objekt status vom Typ BikePointStatus hat wiederum folgende F
</table> </table>
Programmatisch ist der Map-Bike-Point wie folgt abgebildet: Programmatisch ist der Map-Bike-Point wie folgt abgebildet:
``` ```typescript
export interface IMapBikePoint { export interface IMapBikePoint {
id?: string; id?: string;
commonName?: string; commonName?: string;
@ -376,27 +376,27 @@ Programmatisch ähnelt dieses Domänenobjekt dem Map-Bike-Point.
Um redundanten Code zu sparen, wurde die URL für das Backend in eine globale Variable ausgelagert, die von überall im Projekt erreichbar ist. Um redundanten Code zu sparen, wurde die URL für das Backend in eine globale Variable ausgelagert, die von überall im Projekt erreichbar ist.
In der `environment.ts` wurde die URL wie folgt hinterlegt: In der `environment.ts` wurde die URL wie folgt hinterlegt:
``` ```typescript
export const environment = { export const environment = {
production: false, production: false,
apiUrl: 'https://it-schwarz.net/api/' apiUrl: 'https://it-schwarz.net/api/'
}; };
``` ```
Somit ergibt sich dann bei einem Aufruf mit einem HTTP-GET folgende Architektur der URL: Somit ergibt sich dann bei einem Aufruf mit einem HTTP-GET folgende Architektur der URL:
``` ```typescript
public exampleMethod(param: string): Promise<any> { public exampleMethod(param: string): Promise<any> {
return this.client.get(environment.apiUrl + `urlToEndpoint/${param}/`).toPromise(); return this.client.get(environment.apiUrl + `urlToEndpoint/${param}/`).toPromise();
} }
``` ```
Sehr früh war klar, dass wir Promises anstatt Observables nutzen. Dadurch hatten wir die Möglichkeit, gewisse Abschnitte der Programmausführung zu synchronisieren. So konnten wir erst gewisse Komponenten generieren, wenn der Aufruf zum Backend erfolgreich war. Sehr früh war klar, dass wir Promises anstatt Observables nutzen. Dadurch hatten wir die Möglichkeit, gewisse Abschnitte der Programmausführung zu synchronisieren. So konnten wir erst gewisse Komponenten generieren, wenn der Aufruf zum Backend erfolgreich war.
#### Beispiel aus dem DashboardService #### Beispiel aus dem DashboardService
``` ```typescript
public fetchDashboardInit(id: string): Promise<any> { public fetchDashboardInit(id: string): Promise<any> {
return this.client.get(environment.apiUrl + `latest/dashboard/${id}/`).toPromise(); return this.client.get(environment.apiUrl + `latest/dashboard/${id}/`).toPromise();
} }
``` ```
#### Beispiel aus dem MapService #### Beispiel aus dem MapService
``` ```typescript
private fetchBikePointGeoData(): Promise<any> { private fetchBikePointGeoData(): Promise<any> {
return this.client.get(environment.apiUrl + 'latest/bikepoints/').toPromise(); return this.client.get(environment.apiUrl + 'latest/bikepoints/').toPromise();
} }
@ -418,7 +418,7 @@ Wie die Grafik zeigt, ist die Map-Komponente allein für die Darstellung der Map
<tr> <tr>
<td> <td>
``` ```html
<div class="map-container" fxLayout="row"> <div class="map-container" fxLayout="row">
<div class="map-frame" fxFill> <div class="map-frame" fxFill>
<div id="map"></div> <div id="map"></div>
@ -429,7 +429,7 @@ Wie die Grafik zeigt, ist die Map-Komponente allein für die Darstellung der Map
</td> </td>
<td> <td>
``` ```typescript
async initMapView(): Promise<any> { async initMapView(): Promise<any> {
this.service.initMap(51.509865, -0.118092, 14); this.service.initMap(51.509865, -0.118092, 14);
await this.service.drawStationMarkers(); await this.service.drawStationMarkers();