© Fun Way Illustration/Shutterstock.com
Teil 2: Application Insights hands-on: Installation und Pitfalls, AI im ALM integrieren

Den Einblick bekommen


Application Insights lässt sich – im Prinzip – einfach für Webapplikationen aktivieren. Einige Herausforderungen und Fallen sind dabei allerdings zu berücksichtigen, gerade wenn es um die End-to-End-Sicht bei Single-Page-Applikationen geht.

Im vorigen Teil unserer Artikelserie ging es vor allem um die Notwendigkeit von Application Performance Management aus Sicht der Architekten, DevOps und BizDevOps. In diesem Teil wird es konkreter: Anhand einer Angular-Single-Page-App stellen wir mit Application Insights die End-to-End-Sicht her und ergründen, welche Benutzeraktion (Buttonklick, Seitenaufruf usw.) wie lange dauert und welche Kaskade von Abhängigkeiten („Dependencies“) sie auslöst: Ajax Requests, Ser­vice­aufrufe, Datenbankstatements usw.

Das Ziel vor Augen

Als Beispiel für eine Single-Page-App verwenden wir das Angular „Heroes“ Tutorial. Die Applikation besteht aus vier Hauptkomponenten: der Dashboard-Komponente, der Suchkomponente, der Heroes-Komponente und einem Router [1].

Auch wenn das Beispiel keinen UX-Preis gewinnen würde, hat es dennoch viele Komponenten, um AI in einer Single-Page-Applikation auszuprobieren: clientseitige Komponenten und Logik, Routing und asynchrone Serviceaufrufe. Wir werden das Tutorial im Laufe des Artikels schrittweise mit AI-Informationen anreichern. Für die Serverseite verwenden wir .NET 4.6 und Web-API sowie eine Minimalausprägung von MVC 5, um unsere Angular-App über den gleichen Applikations-URL wie die REST-Services bereitzustellen. Zusammengefasst verwenden wir folgende Bausteine und Tools für unsere App:

  • Server

    • .NET 4.6, MVC 5 und Web-API

    • VS 2017 zum Erstellen des .NET Web API und der AI-Ressource

    • AI SDK 2.3

    • Microsoft OWIN zum Ausliefern der statischen Assets (der App-Bundles unserer Angular-App)

    • SQL Azure

  • Client

    • Aktuelle Angular-Version und das Angular-Commandline-Interface (CLI) zum Erstellen einer paketierten App (App-Bundles)

    • npm zum Bauen und lokalen Deployen unserer Applikation

    • Entwicklungswebserver des Angular-CLI (ng serve) zum schnellen lokalen Testen

  • Azure für das Deployment

    • Azure App Services

    • Application Insights

Und .NET Core? Wir hätten das Beispiel gerne mit .NET Core umgesetzt, es wird aber leider von AI noch nicht in vollem Umfang unterstützt.

Vorbereitungen – Angular-Beispiel

Da es in diesem Artikel nicht um das Erstellen einer Angular-Applikation in Kombination mit .NET, sondern um Application Insights geht, werden wir die Schritte nur sehr grob skizzieren:

  • Download des Angular Quick Start Samples: https://angular.io/docs/ts/latest/guide/setup.html

  • Umstellen von System.JS auf das Angular CLI: Wir werden das CLI verwenden, um die App-Bundles zu erstellen, die wir über unsere .NET-Applikation ausliefern

  • Angular CLI über npm global installieren: npm in­stall -g angular-cli

  • Angular CLI initialisieren ng init

  • Anpassen der index.html (entfernen der System.JS-Skripte):

<!doctype html> <html> <head> </head> <body> <my-app>Loading...</my-app> <!--Bundle-Scripts inserted by CLI on the fly! --> </body> </html>
  • Lokalen Dev-Server starten und prüfen, ob das Grundgerüst der App läuft: ng serve

  • Angular-App-Bundles erstellen: ng build

  • Erstellen der „Heroes“-Applikation laut [1].

.NET-Applikation erstellen

Unsere serverseitige App wird einerseits das Web-API zur Verfügung stellen und andererseits die Angular-Applikation (die von der Angular CLI erstellten App-Bundles) ausliefern. Dazu werden wir folgende Schritte durchführen:

  • Web-API-App in VS anlegen.

  • Application Insights 2.3 SDK über NuGet Packages installieren.

  • OWIN Packages inklusive Host.SystemWeb installieren.

  • Einfügen der Datei Startup.cs im Root-Verzeichnis der App und Aufruf von useDefaultFiles() und useStaticFiles().Dadurch kann unsere App statische Inhalte – in unserem Fall die Angular-App-Bundles – ausliefern.

  • Anlegen der Modelklasse/Datei Hero.cs im Verzeichnis Models; Objekte dieser Klasse werden von unserem Web-API-Controller zurückgeliefert und durch Web-API nach JSON konvertiert. Anlegen des Web-API-Controllers/der Datei HeroController.cs im Verzeichnis Controllers. Die anderen Controller der MVC-App können wir löschen, da wir keine serverseitige UI-/Controller-Logik benötigen. Wie wir noch sehen werden, wird AI den Web-API-Controller für uns automatisch instrumentieren und so die End-to-End-Verbindung zwischen unserer Angular-App und dem Server ermöglichen.

  • Web-API konfigurieren: Wir konfigurieren das Web-API in der Datei WebApiConfig.cs im Ordner App_Start so, dass unser Controller standardmäßig JSON liefert, wie es von unserer Heroes-Applikation erwartet wird.

Applikation nach Azure publizieren

Nachdem wir die App erfolgreich erstellt haben, publizieren wir sie direkt aus V...

Neugierig geworden? Wir haben diese Angebote für dich:

Angebote für Gewinner-Teams

Wir bieten Lizenz-Lösungen für Teams jeder Größe: Finden Sie heraus, welche Lösung am besten zu Ihnen passt.

Das Library-Modell:
IP-Zugang

Das Company-Modell:
Domain-Zugang