Buglife - Geniale Feedback und Bug Reporting Möglichkeit für iOS und Android Apps

Buglife ist ein Framework um Bugs bzw. Verbesserungsvorschläge einfach durch Endnutzer zu melden. Das Framework ist für die Plattform iOS und Android verfügbar und kann bei iOS ganz einfach über carthage oder cocoapods integriert werden. Dabei bietet Buglife eine Vielzahl an Einstellmöglichkeiten. Es ist nicht nur möglich, das Aussehen des Frameworks an die bestehende App anzupassen, sondern man kann auch den Content, welcher übermittelt werden soll anpassen.

Das Framework für iOS kann hier gefunden werden.

Das Framework für Android kann hier gefunden werden.

Installation iOS

Für die Installation des Frameworks bieten sich verschiedene Möglichkeiten. Zum einen lässt sich Buglife mittels Cocoapods einbinden. Dazu muss man im Podfile lediglich die Abhängigkeit pod 'Buglife' definieren und danach mit pod install installieren.

Außerdem besteht die Möglichkeit Buglife mittels carthage zu installieren. Hierzu muss im Cartfile lediglich das Framework referenziert werden.

# Awesome bug reporting for iOS apps 
github "Buglife/Buglife-iOS" ~> 2.6

Danach lässt sich das Framework mittels carthage update --platform iOS --cache-builds installieren.

Installation Android

Man muss lediglich eine dependency der build.gradle Datei hinzufügen und das Projekt neu synchronisieren.

dependencies {
    compile 'com.buglife.sdk:buglife-android:1.1.0'
}

Konfiguration Buglife

Nachdem das Framework nun dem Projekt hinzugefügt wurde, muss man es noch konfigurieren. Es muss ein API Key gesetzt werden, dass die Tickets im zugehörigen Account in der Webplattform angelegt werden. In diesem Beispiel bieten wir dem Nutzer die Möglichkeit Bugreports, Verbesserungsvorschläge und Allgemeine Hinweise zu versenden.

Swift

// configure buglife to send bugs/features to project
Buglife.shared().start(withAPIKey: "*****")

// Customize type of the request 
let feedbackTypeFieldTitle = "Feedback-Type"
let feedbackTypeFieldOptions = ["Bug", "Improvement proposal", "General Report"]
let feedbackTypeField = LIFEPickerInputField(attributeName: feedbackTypeFieldTitle)
feedbackTypeField.setOptions(feedbackTypeFieldOptions)

// Set standard option to Bug
Buglife.shared().setStringValue(feedbackTypeFieldOptions.first, forAttribute: feedbackTypeFieldTitle)

// Set the possible Value of the type to the picker values
Buglife.shared().inputFields = [feedbackTypeField, LIFETextInputField.summary()]

Android

  • Sollte man in seinem Projekt noch keine Application-Klasse erstellt haben, so sollte man dies nun tun, da man den folgenden Code in der onCreate-Methode implementieren muss. Beachte, dass die Application-Klasse auch im Manifest gesetzt ist (android:name=".YOURAPPLICATIONCLASS_NAME").
// configure buglife to send bugs/features to project
Buglife.initWithApiKey(this, "YOUR_API_KEY");
Buglife.setInvocationMethod(InvocationMethod.SHAKE);

PickerInputField feedbackTypeFieldOptions = new PickerInputField("Feedback-Type");
feedbackTypeFieldOptions.addOption("Bug");
feedbackTypeFieldOptions.addOption("Improvement proposal");
feedbackTypeFieldOptions.addOption("General Report");

TextInputField descriptionField = new TextInputField("Description");
descriptionField.setMultiline(true);

Buglife.setInputFields(feedbackTypeFieldOptions, descriptionField);

UI

Die Standard Konfiguration von Buglife erlaubt es, dass ein Screenshot des aktuellen Zustands der App aufgenommen wird. Hierauf kann der User mit einem Pfeil/Lupe noch markieren, was ihm aufgefallen ist bzw. wo sich der Bug befindet. Außerderm gibt es die Möglichkeit Userinformationen zu verpixeln um persönliche Daten zu sichern.

Buglife Example

Bug Report

UI Anpassungen

Es ist möglich die UI von Buglife anzupassen, sodass das Erscheinungsbild von dem Framework, dem der App entspricht. Hierzu muss ein property in Buglife angepasst werden.

Swift

// update Buglife appearance
let appearance = Buglife.shared().appearance
appearance.tintColor = .white
appearance.barTintColor = .black
appearance.titleTextAttributes = [NSAttributedStringKey.foregroundColor.rawValue : UIColor.white]
appearance.statusBarStyle = .lightContent

Android

Buglife benutzt 4 Farben für die Darstellung des Frameworks. Hierzu werden die Farben aus dem Anwendungstheme benutzt. Diese müssen lediglich auf die entsprechenden Werte gesetzt werden.

<?xml version="1.0" encoding="utf-8"?>
<resources>
    <color name="buglifeColorPrimary">#242a33</color>
    <color name="buglifeColorPrimaryDark">@android:color/black</color>
    <color name="buglifeColorAccent">#00d9c7</color>
    <color name="buglifeTextColorPrimary">@android:color/white</color>
</resources>

Das Ergebnis sieht folgendermaßen aus:

Custom UI

WEB UI

Ein Ticket, welches durch Buglife erstellt wurde liefert automatisch Informationen zu dem Gerät von dem es abgesetzt wurde und die Nachricht, welche der Nutzer dem Ticket angehängt hat. In der Web Ui sieht der Bugreport folgendermaßen aus:

Ticket Web UI

Benutzerspezifische Bug Identifier

Die Frameworks für iOS bzw. Android bieten die Möglichkeit einen benutzerspezifischen User Identifier zu setzen, um die Fehler genauer nachvollziehen zu können. Außerdem können benutzerspezifische Parameter gesetzt werden, welche es ermöglichen den aktuellen Stand der App bzw. die aktuelle Auswahl der Nutzer mit an das Ticket zu hängen. Nachfolgend zwei Beispiele, um diese Parameter zu setzen:

Swift

// configure custom user email
Buglife.shared().setUserEmail(email)

// set custom fields
Buglife.shared().setStringValue("Account1, Account2", forAttribute: "accounts")
Buglife.shared().setStringValue("Transaction1", forAttribute: "transaction")

Android

// configure custom user email
Buglife.setUserEmail(email);

// set custom fields
Buglife.putAttribute("accounts", "Account1, Account2");
Buglife.putAttribute("transaction", "Transaction1");

Zusammenfassung

Das Framework bietet uns also eine einfache Möglichkeit alle Bugs/Verbesserungsvorschläge und Hinweise an einem Ort zu sammeln und nach Rücksprache mit unseren Kunden diese umzusetzen.