© DrHitch/Shutterstock.com
Application Insights

2 Application Insights hands-on: Installation und Pitfalls, AI im ALM integrieren


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 Kapitel ging es vor allem um die Notwendigkeit von Application Performance Management aus Sicht der Architekten, DevOps und BizDevOps. Nun 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, Serviceaufrufe, 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 Kapitels 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 Kapitel nicht um das Erstellen einer Angular-Applikation in Kombination mit .NET, sondern um Application Insights geht, werden wir die Schritte nur sehr grob skizzieren:

Neugierig geworden?

Angebote für Teams

Für Firmen haben wir individuelle Teamlizenzen. Wir erstellen Ihnen gerne ein passendes Angebot.

Das Library-Modell:
IP-Zugang

Das Company-Modell:
Domain-Zugang