In diesem Artikel möchte ich euch die Application Performance Management (kurz APM) Lösung von Azure näherbringen und euch zeigen wie ihr sie mit ein paar wenigen Schritten in euer Ionic Projekt implementiert.

Wenn das Thema für euch komplett neu ist, so findet ihr allerlei Informationen und Implementierungsmöglichkeiten, auch für andere Programmiersprachen, auf der Seite https://docs.microsoft.com/de-de/azure/application-insights/app-insights-overview.

 

Allgemein

Durch die immer anspruchsvoller werdenden Nutzer, wird eine APM in vielen Projekten immer wichtiger. Während die großen Player im Markt diese Möglichkeiten schon lange im Einsatz haben, wird durch den Einsatz der Services von Microsoft, Amazon und anderen Serviceanbietern aus dem Bereich, die Nutzung von APM’s den Entwicklern immer einfacher gemacht. So einfach, dass der Einsatz in nahezu jedem Projekt mit geringem Aufwand realisierbar ist.

Als Entwickler ist es wichtig die eigenen Anwendungen im Auge zu behalten und bei Problemen möglichst proaktiv über mögliche Probleme informiert zu werden. Man kann sicher nicht überall sein, aber von einem Nutzer auf mögliche Fehler aufmerksam gemacht zu werden, ist sicherlich eine der Situationen, die jeder Entwickler vermeiden will. Ein möglicher Weg um diese Situationen zu vermeiden ist der Einsatz von APM’s.

Da wir bei den Software Pionieren auf Mircosoft‘s Azure Services unterwegs sind, lag es für uns nahe, die hier vorhandene Lösung einzusetzen. In unserem Fall war und ist dies Azure Application Insights. Nun zum spannenden Teil.

 

Einrichtung in Azure

Für die Implementierung muss zunächst im Azure eine Application Insights Ressource angelegt werden, in welcher später sämtliche Informationen rund um die Anwendung gespeichert werden.

Hierzu meldet ihr euch im Azure Portal unter https://portal.azure.com an und wählt auf der linken Seite „Alle Ressourcen“ aus. Über den Button „Hinzufügen“ öffnet sich auf der rechten Seite ein neuer Eingabebereich. Über die Suche nach „Application Insights“ erscheint in der Liste die entsprechende Ressource.

Bildschirmfoto 2018-04-11 um 02.13.20

Nach der Auswahl öffnet sich ein weiterer Bereich in dem noch einmal das Erstellen explizit bestätigt werden muss, bevor ihr den Namen, Anwendungstyp und den Standort für die Daten angeben müsst.

In unserem Beispiel wählen wir als Namen „Software-Pioniere-AppInsights“ und als Ressourcengruppe „Software-Pioniere“ aus. Anhand des eingestellten Anwendungstyps werden unterschiedliche Diagramme zur Verfügung gestellt. Hier belassen wir es bei der Standardeinstellung. Beim Thema Standort sollte „Westeuropa“ hinterlegt werden, um die Datenhaltung zumindest auf Europa zu begrenzen.

Bildschirmfoto 2018-04-11 um 02.12.20

Anschließend bestätigen wir die Angaben über den Button „Erstellen“. Die Erstellung kann einige Sekunden dauern und ist anschließend unter „Alle Ressourcen“ erreichbar. Damit ist die Grundeinrichtung in Azure komplett.

Um nun die Einrichtung in Ionic vornehmen zu können, ist der Instrumentierungsschlüssel der neu angelegten Application Insights Ressource notwendig. Dieser ist in der Übersicht der Ressource zu finden und muss später in der App hinterlegt werden.

 

Einrichtung in Ionic

Für die Integration in Ionic installiert ihr zunächst das npm „@softwarepioniere/ionic-application-insights“ Modul mittels

npm i @softwarepioniere/ionic-application-insights -S

Nach der Installation müsst ihr nun das Modul wie folgt in eurer Applikation bekannt machen und zugleich konfigurieren. Für die Konfiguration muss der String „Your-Application-Insights-instrumentationKey“ gegen den instrumentationKey aus eurer Azure Ressource ersetzt werden.

/src/app/app.module.ts

// Import the Application Insights module and the service provider
import { ApplicationInsightsModule, AppInsightsService } from '@softwarepioniere/ionic-application-insights'; 

@NgModule({  
  imports: [    
    // ... your imports     

    // Add the Module to your imports    
    ApplicationInsightsModule.forRoot({      
      instrumentationKey: 'Your-Application-Insights-instrumentationKey'    
    })  
  ],  
  // ... providers / etc  
  providers: [ ..., AppInsightsService ],
})

export class YourRootModule { }

Für die ersten Tests über „ionic serve“ würde die bisherige Einrichtung reichen.

Wenn ihr allerdings Produktiv-Builds mit minify JS ausführt, müsst ihr euren Pages eine Variable hinzufügen, da beim Produktiv-Build alle Funktions- und Klassennamen ersetzt werden. Würden wir die Anwendung nun auch im Produktiv-Build so belassen, hätten die einzelnen Seiten innerhalb der Applications Insights andere Bezeichnungen und es wäre nicht oder nur schwer nachvollziehbar welche Seite innerhalb der Auswertungen gemeint ist. Um jedoch in den Application Insights die Klicks der Benutzer nachvollziehen zu können ist der Name der Page relevant. Hierzu fügt ihr in eure Pages die Variable aiName wie folgt ein.

src/pages/contact/contact.ts

...
@IonicPage()
@Component({
  selector: 'page-contact',    
  templateUrl: 'contact.page.html',
})

export class ContactPage {
    private aiName: string = "ContactPage";
...

Ab jetzt wird beim Wechsel einer Page der Name der in der Variablen aiName steht an die Application Insights Ressource gesendet. Fertig!

 

Optionale Konfiguration

Neben dieser sehr rudimentären Umsetzung gibt es noch weitere Optionen die aktiviert oder auch deaktiviert werden können. Welche das sind findet ihr in der API Referenz von Microsoft (https://github.com/Microsoft/ApplicationInsights-JS/blob/master/API-reference.md) unter dem Punkt Config. Möchtet ihr nun eine der Optionen setzen, so muss diese wie folgt angegeben werden.

 /src/app/app.module.ts

// Import the Application Insights module and the service provider 
…
@NgModule({  
  imports: [    
    // ... your imports     
    // Add the Module to your imports    
    ApplicationInsightsModule.forRoot({
      OPTIONSNAME: WERT    
    })  
…

 

Fazit

Wie man sieht, ist die Application Insights Lösung mit wenig Aufwand in jede Applikation integrierbar.Neben der Integration in Ionic gibt es zahlreiche Weitere für andere Programmiersprachen und Frameworks.

Ein wichtiger und entscheidender Punkt ist allerdings auch, sich im Rahmen des sehr aktuellen Themas DSVGO Gedanken darüber zu machen, welche Daten im Rahmen der Entwicklung tatsächlich zur Verbesserung des Produkts benötigt werden. Vielleicht werft ihr unter diesem Gesichtspunkt noch einmal einen Blick in die möglichen Konfigurationsoptionen.

 

Advertisements

Kommentar verfassen

Trage deine Daten unten ein oder klicke ein Icon um dich einzuloggen:

WordPress.com-Logo

Du kommentierst mit Deinem WordPress.com-Konto. Abmelden /  Ändern )

Google+ Foto

Du kommentierst mit Deinem Google+-Konto. Abmelden /  Ändern )

Twitter-Bild

Du kommentierst mit Deinem Twitter-Konto. Abmelden /  Ändern )

Facebook-Foto

Du kommentierst mit Deinem Facebook-Konto. Abmelden /  Ändern )

Verbinde mit %s