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.
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.
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.
