Freigeben über

Übungstutorial: Erstellen einer neuen Kaizala-Aktion

  • Artikel

Übersicht

In diesem Tutorial erstellen wir eine benutzerdefinierte Kaizala-Aktion mithilfe des erweiterbaren Aktionsframeworks, das von der Kaizala-Plattform bereitgestellt wird.

Wir erstellen eine Aktion "Feedback fragen", die es Kaizala-Benutzern ermöglicht, feedback von anderen Benutzern in Bezug auf 1:5 star Bewertungen zu gestellten Fragen zu bitten – zusammen mit kommentaren, die sie abgeben möchten.  

Hier können Sie Kaizala-Aktionspakete herunterladen.

Voraussetzungen

  • Ein Smartphone (Android/iOS) mit installierter Kaizala-App
  • Ein Office365-Konto
  • Zugriff auf einen HTML/JS-Editor (Editor/Visual Studio Code/etc.)

Schritte zum Erstellen einer Beispielaktion

  • Schritt 1: Erstellen eines neuen Verzeichnisses für Ihr Aktionspaket

    • Erstellen Sie ein neues Verzeichnis auf Ihrem Desktop & nennen Sie es "SampleAction".
    • Speichern aller nachfolgenden Dateien in diesem Verzeichnis

  • Schritt 2: Definieren eines Datenmodells für Ihre Aktion

    • Zunächst müssen wir das Datenmodell definieren, das in unserer benutzerdefinierten Aktion verwendet wird.

    • Die Kaizala-Aktionen sind derzeit formularbasierte Datenmodelle. Daher müssen wir zuerst die "Fragen" definieren, die wir in unsere Form aufnehmen müssen.

    • Da es sich um eine Aktion "Feedback fragen" handelt, planen wir die Verwendung von zwei Datenteilen.

      • Numerische Bewertung (Wert 1 bis 5)
      • Kommentar/Ausführliches Feedback( falls vorhanden)

    • Die Kaizala Forms-Infrastruktur unterstützt die folgenden Fragetypen:

      Fragetyp Beschreibung
      SingleSelect Single-Choice-Frage mit Optionen
      MultiSelect Multiple-Choice-Frage mit Optionen
      Text Frage mit einer Nur-Text-Antwort
      Numeric Frage mit einer numerischen Antwort
      Standort Frage mit Standortantwort
      DateTime Frage mit DateTime-Antwort
      Bild Frage mit Bild als Antwort

    • Für unsere beiden Fragen verwenden wir den Fragetyp "Numerisch" & "Text" für die Bewertungsnummer & Kommentare.

      • Erstellen Sie eine neue Datei namens "appModel.json", und platzieren Sie den folgenden Inhalt in der Datei. Die Datei enthält die beiden in der Reihenfolge aufgeführten Fragen.
      { 
    "questions": [{ 
            "title": "Rating", 
            "type": "Numeric" 
        }, 
        { 
            "title": "Comments", 
            "type": "Text" 
        } 
    ], 
    "title": "Ask Feedback", 
    "visibility": "All", 
    "isAnonymous": false, 
    "isResponseAppended": false 
} 
      • Hinweis: Der obige Code enthält auch zusätzliche Metadaten, über die wir später erfahren werden (außerhalb des Bereichs für diese Sitzung).
      • Speichern der Datei

  • Schritt 3: Definieren einer Ansicht zum Erstellen der Anforderung für Feedback

    • Wir erstellen nun eine neue HTML-Datei, die verwendet wird, um neue Instanzen unserer Kaizala-Aktion zu erstellen.
    • Dies ist die Ansicht, die aufgerufen wird, wenn in der Palette auf das Symbol getippt wird. In dieser Ansicht möchten wir sie fragen, wozu sie Feedback wünschen. 
    • Erstellen Sie eine neue Datei mit dem Namen "CreationView.html", und platzieren Sie den folgenden HTML-Code in der Datei.
      <html> 
 
<head> 
</head> 
 
<body onload="onCreatePageLoad()"> 
    <br/> <br/> 
    <div> 
        <p>What would you like feedback on?</p> 
        <br/> <br/> 
        <input type="text" name="description" id="description" placeholder="Enter question text here" value=""> 
    </div> 
    <br/> <br/> 
    <div> 
        <input type="submit" name="submit" value="Submit" onclick="submitData()"> 
    </div> 
</body> 
 
</html> 
    • Speichern der Datei

  • Schritt 4: Einschließen des Kaizala Forms JS SDK

    • Um Entwicklern die Nutzung der Formularinfrastruktur zu erleichtern, stellt Kaizala eine JavaScript-Wrapperbibliothek bereit, die Sie in Ihre benutzerdefinierten Aktionen einschließen können.
    • Laden Sie die folgende Datei herunter, & sie im selben Verzeichnis wie Ihre datamodel.json und CreationView.html

  • Schritt 5: Verwenden des Kaizala Forms JS SDK zum Senden eines Formulars

    • Fügen Sie den folgenden Codeausschnitt im <head> Element Ihres "CreationView.html" hinzu, um auf das Kaizala Forms JS SDK zu verweisen.

      <head> 
    <script type="text/javascript" src="KASClient.js"></script> 
</head> 

    • Wenn der Benutzer nun auf "Senden" klickt, müssen wir überprüfen, ob er eine Frage eingegeben hat, zu der er Feedback abgeben soll – und die Formularinstanz erstellen.

    • Außerdem müssen wir das Formular beim Laden der Seite instanziieren. Fügen Sie dem "CreationView.html" im -Element den <head> folgenden JavaScript-Codeausschnitt hinzu.

          <script type="text/javascript"> 
        var _form; // type: KASForm
 
        // Below will be called on onload of CreationView.html 
        function onCreatePageLoad() { 
            KASClient.Form.initFormAsync (function (form, error) { 
                if (error != null) { 
                    showAlert("Error:initFormAsync:" + error); 
                    return; 
                } 
                _form = form; 
            }); 
        } 
 
        function submitData() {
            var description = document.getElementById("description").value; 
            if (description == null || description == "") { 
                KASClient.App.showNativeErrorMessage("Please enter the details for what you would like feedback on."); 
            } else { 
                // Set the description to form title 
                _form.title = description; 
 
                // Finally send the request 
                KASClient.Form.submitFormRequest(_form); 
            } 
        } 
    </script>

    • Speichern der Datei

  • Schritt 6: Erstellen des Aktionspaketmanifests

    • Nachdem wir nun den Anschein haben, was wir erreichen möchten, und erfolgreich eine Ansicht erstellt haben, erstellen wir nun die Paketmanifestdatei, die auf diese Dateien verweist. 

    • Die Paketmanifestdatei enthält wichtige Informationen für die Kaizala-Plattform, damit sie Ihre benutzerdefinierte Kaizala-Aktion erkennen und ausführen kann. 

    • Wir erstellen ein Paketmanifest und geben Folgendes an:

      • Anzeigename für Ihre Kaizala-Aktion
      • Benutzerdefinierte ID für die Aktion
      • Zuordnung der Erstellungsansicht zur seite CreationView.html

    • Vorher benötigen wir ein Symbol für das Aktionspaket. Laden Sie die Symboldatei herunter& speichern Sie sie als icon.png im selben Ordner wie die anderen Dateien.

    • Erstellen Sie eine neue Datei mit dem Namen "package.json", und fügen Sie der Datei den folgenden Codeausschnitt hinzu. Stellen Sie sicher, dass Sie die ID bearbeiten, um Ihre Aktion eindeutig/eindeutig zu machen.

      { 
    "id": "com.microsoft.mobile.kaizala.swads.FeedbackSample", 
    "schemaVersion": 1, 
    "version": 1,
    "minorVersion": 1,
    "providerName": "Microsoft Inc.", 
    "displayName": "Ask Feedback", 
    "description": "Custom action to collect feedback.", 
    "icon": "icon.png", 
    "appModel": "appModel.json", 
    "views": { 
        "CreationView": { 
            "labelHeader": "Feedback requested", 
            "sourceLocation": "CreationView.html" 
        } 
    } 
}

    • Sie können die Karte konfigurieren, die im Kaizala-Chatcanvas angezeigt wird, indem Sie die Zeichenfolgen im Paketmanifest angeben.  

    • Ändern Sie das "Views"-Objekt im Paketmanifest so, dass es dem folgenden Codeausschnitt entspricht:

      "views": { 
            "CreationView": { 
                "labelHeader": "Feedback requested", 
                "sourceLocation": "CreationView.html"            
            }, 
            "ChatCanvasCardView": { 
                "labelResponded": "You have provided feedback.", 
                "labelRespondToForm": "PROVIDE FEEDBACK", 
                "isResponseEditable": true 
            } 
} 

    • Speichern der Datei

  • Schritt 7: Erstellen der Antwortansicht

    • Nun erstellen wir die Ansicht, die kaizala-Benutzern angezeigt wird, die auf eine instance unserer Aktion reagieren.
    • Erstellen Sie einen neuen Dateiaufruf ResponseView.html und fügen Sie den folgenden Codeausschnitt in die Datei ein.
    • Wir gehen wie folgt vor:
      • Optionsfeldauswahl für die Bewertung hinzufügen
      • Vorbereiten eines Formularantwortobjekts und Codes zum Senden des Formulars
          <html> 
     
    <head> 
        <title></title> 
        <script type="text/javascript" src="KASClient.js"></script> 
        <script> 
            var _form; // type: KASForm
            var _myFormResponses; // type: KASFormResponse[]
     
            // Below will be called on onload of ResponseView.html 
            function onResponsePageLoad() { 
                KASClient.Form.getFormAsync(function (form, error) { 
                    if (error != null) { 
                        KASClient.App.showNativeErrorMessage("Error:getFormAsync:" + error); 
                        return; 
                    } 
                    _form = form; 

                    // Document title would be the form title
                    document.getElementById("title").innerHTML = _form.title;

                    KASClient.Form.getMyFormResponsesAsync(function (responses, error) { 
                        if (error != null) { 
                            KASClient.App.showNativeErrorMessage("Error:getMyFormResponsesAsync:" + error); 
                            return; 
                        } 
                        _myFormResponses = responses;

                        // Render previous response, if any
                        if (isCurrentUserResponded()) {
                            var rating = _myFormResponses[0].questionToAnswerMap["0"];
                            var remark = _myFormResponses[0].questionToAnswerMap["1"];

                            var options = document.getElementsByName('option');
                            options[rating - 1].checked = true;

                            document.getElementById("description").value = remark;
                            document.getElementById("description").placeholder = "";
                        }
                    }); 
                }); 
            } 
     
            function submitData() { 
                var selectedOption = getSelectedOption(); 
                var remark = document.getElementById("description").value; 
                submitFormResponse(selectedOption, remark); 
            } 
     
            function getSelectedOption() { 
                // Check which radio button is checked 
                var options = document.getElementsByName('option'); 
                for (var i = 0; i < options.length; i++) { 
                    if (options[i].checked) { 
                        return parseInt(options[i].value); 
                    } 
                } 
            } 
     
            // Below will be called when responder submits a new response 
            function submitFormResponse(selectedOption, remark) { 
                if (remark == null || remark == "") { 
                    KASClient.App.showNativeErrorMessage("Please fill remark"); 
                } else if (selectedOption == "") { 
                    KASClient.App.showNativeErrorMessage("Please select one option"); 
                } else { 
                    // For submitting response a question-answer 
                    // map is required, lets create that! 
                    var questionToAnswerMap = JSON.parse("{}"); 
                    questionToAnswerMap[0] = selectedOption; 
                    questionToAnswerMap[1] = remark; 
     
                    var responseId = null; 
                    var isEditingPreviousResponse = false;

                    // If there is a previous response, update it
                    if (isCurrentUserResponded()) {
                        responseId = _myFormResponses[0].id;
                        isEditingPreviousResponse = true;
                    }
     
                    // Finally submit the response 
                    KASClient.Form.sumbitFormResponse(questionToAnswerMap, responseId, isEditingPreviousResponse); 
                } 
            }

            function isCurrentUserResponded() {
                return _myFormResponses && _myFormResponses.length > 0;
            }
        </script> 
    </head> 
     
    <body onload="onResponsePageLoad()"> 
        <br/> <br/> 
        <div> 
            <p id="title"></p> 
        </div> 
        <div> 
            <br/> <br/> 
            <div> 
                <p>Select your rating:</p> 
                <br/> <br/> 
                <div> 
                    <label>1</label> 
                    <input type="radio" name="option" id="option0" value="1" checked> 
                </div> 
                <div> 
                    <label>2</label> 
                    <input type="radio" name="option" id="option1" value="2"> 
                </div> 
                <div> 
                    <label>3</label> 
                    <input type="radio" name="option" id="option2" value="3"> 
                </div> 
                <div> 
                    <label>4</label> 
                    <input type="radio" name="option" id="option3" value="4"> 
                </div> 
                <div> 
                    <label>5</label> 
                    <input type="radio" name="option" id="option4" value="5"> 
                </div> 
            </div> 
            <br/> <br/> 
            <div> 
                <p>Comments</p> 
                <input type="text" name="description" id="description" placeholder="Please enter your comments here."> 
            </div> 
            <br/> <br/> 
        </div> 
        <div class="footer"> 
            <input type="submit" name="submit" value="Submit" onclick="submitData()"> 
        </div> 
    </body> 
     
    </html> 
    `````

  • Schritt 8: Erstellen der Zusammenfassungsansicht

    • Nun erstellen wir die Ansicht, die Kaizala-Benutzern angezeigt wird, die die Zusammenfassung der Aktion anzeigen.

    • Erstellen Sie einen neuen Dateiaufruf SummaryView.html, und fügen Sie den folgenden Codeausschnitt in die Datei ein. Dadurch wird eine Zusammenfassungsansicht der Gesamtbewertungen und Kommentare erstellt.

        <html> 
   
  <head> 
      <title></title> 
      <script type="text/javascript" src="KASClient.js"></script> 
      <script type="text/javascript"> 
          // Globals 
          var _form; // type: KASForm 
          var _myFormResponses; // type: KASFormResponse[]
          var _formSummary; // type: KASFormFlatSummary 
          var _users; // type: Dictionary<UserId: KASUser>
   
          // Below will be called on onload of SummaryView.html 
          function onSummaryPageLoad() {            
              KASClient.Form.getFormAsync(function (form, error) {                
                 if (error != null) {                    
                    KASClient.App.showNativeErrorMessage("Error:getFormAsync:" + error);                    
                    return;                
                 }                
                 _form = form;
                 KASClient.App.showProgressBar("Fetching summary");
                 KASClient.Form.getFormSummaryAsync(
                    function (flatSummary, processedSummary, error) { // In this callback data is fetched from local database
                       if (error != null) {                    
                          KASClient.App.showNativeErrorMessage("Error:getFormSummaryAsync:callback1:" + error);                    
                          return;                
                       } 
                       onGetSummary(flatSummary);
                    },
                    function (flatSummary, processedSummary, error) { // In this callback data is fetched from server
                       KASClient.App.hideProgressBar();
                       if (error != null) {                    
                          KASClient.App.showNativeErrorMessage("Error:getFormSummaryAsync:callback2:" + error);                    
                          return;                
                       }
                       onGetSummary(flatSummary);
                    }
                 );           
              });        
           }

           function onGetSummary(summary) {
              _formSummary = summary;                    
              KASClient.App.getUsersDetailsAsync(_formSummary.getRespondedUserIds(), function (users,
                 error) {                        
                 if (error != null) {                            
                    KASClient.App.showNativeErrorMessage("Error:getUsersDetailsAsync:" + error);                            
                    return;                        
                 }                        
                 _users = users;  // Document title would be the form title 

                 document.getElementById("title").innerHTML = _form.title; 

                 // Get all responses of the user, and find the average
                 var totalRating = 0;                        
                 var responseCount = 0;          
                 for (var userId in _users) {
                    var userResponses = _formSummary.getResponsesForUserId(userId); // type: Dictionary<QuestionId, string[]>
                    totalRating += parseInt(userResponses["0"][0]);                            
                    responseCount += 1;                       
                 } 

                 document.getElementById("avg").innerHTML = totalRating / responseCount;                    
              });
           }
      </script> 
  </head> 
   
  <body onload="onSummaryPageLoad()"> 
      <div class="header"> 
          <p id="title">Title</p> 
          <br/> <br/> 
          <p id="rating">Average Rating: </p> 
          <p id="avg">avg</p> 
      </div> 
  </body> 
   
  </html>

    • Bearbeiten Sie das Views-Objekt in Ihrem Paketmanifest wie folgt:

         "views": { 
            "CreationView": { 
                "labelHeader": "Feedback requested", 
                "sourceLocation": "CreationView.html"            
            }, 
            "ChatCanvasCardView": {
                "labelResponded": "You have provided feedback.", 
                "labelRespondToForm": "PROVIDE FEEDBACK", 
                "isResponseEditable": true 
            }, 
            "ResponseView": { 
                "labelHeader": "Provide feedback",
                "sourceLocation": "ResponseView.html" 
            }, 
            "ResponseResultsView": { 
                "labelPageHeader": "Feedback summary",
                "sourceLocation": "SummaryView.html" 
            } 
   }       
 `````

   

  • Schritt 9: Erstellen des Kaizala-Aktionspakets

    • Zippen Aller Dateien in eine einzelne ZIP-Datei
    • Stellen Sie sicher, dass die ZIP-Datei kein weiteres Verzeichnis enthält. Die Dateien befinden sich jedoch im Stammverzeichnis der ZIP-Datei.

  • Schritt 10: Melden Sie sich beim Kaizala-Verwaltungsportal an.

    • Öffnen Sie ein Browserfenster, und navigieren Sie zu https://manage.kaiza.la/
    • Klicken Sie in der oberen linken Ecke auf "Anmelden".
    • Geben Sie Ihre Office365-Anmeldeinformationen ein, um sich beim Portal anzumelden. Erteilen Sie dem Verwaltungsportal bei Bedarf Berechtigungen für den Zugriff auf Ihre Profilinformationen (nur zum ersten Mal erforderlich).
    • Tippen Sie in der oberen rechten Ecke auf "Telefonnummer hinzufügen", & Überprüfen Sie Ihre Telefonnummer.

  • Schritt 11: Hochladen des Aktionspakets

    • Navigieren Sie über die linke Navigationsleiste zu "Aktionen".
    • Wählen Sie in der Dropdownliste auf der rechten Seite "Aktion importieren" aus, und klicken Sie auf "Starten".
    • Klicken Sie auf "Hochladen", und wählen Sie die erstellte ZIP-Datei aus.
    • Klicken Sie auf "Importieren".
    • Nachdem das Paket erfolgreich importiert wurde, bestätigen Sie dies, indem Sie erneut zu Aktionen navigieren. Ihre Aktion sollte unter "Von dieser ID erstellt" aufgeführt werden.
    • Sie können diese Aktion testen, indem Sie die folgenden Schritte ausführen.

  • Schritt 12: Erstellen einer neuen Kaizala-Gruppe

    • Navigieren Sie im Kaizala-Verwaltungsportal über die linke Navigationsleiste zu "Gruppen".
    • Tippen Sie auf "Gruppe erstellen".
    • Nennen Sie die Gruppe "Kaizala Actions Testing".
    • Überprüfen Sie, ob die Gruppe in Ihrer Kaizala-App angezeigt wird.

  • Schritt 13: Veröffentlichen der Aktion in der Gruppe

    • Navigieren Sie über die linke Navigationsleiste zu "Gruppen".
    • Tippen Sie auf den Gruppennamen, den Sie in Schritt 13 erstellt haben.
    • Tippen Sie auf die Registerkarte "Aktionen".
    • Wählen Sie die Aktion aus, die Sie in Schritt 12 erstellt haben, & klicken Sie auf "Aktion hinzufügen". Ihre benutzerdefinierte Kaizala-Aktion sollte nun auf der Registerkarte "Entdecken" angezeigt werden.

  • Schritt 14: Verwenden einer benutzerdefinierten Kaizala-Aktion

    • Fügen Sie der Palette die benutzerdefinierte Aktion hinzu, und verwenden Sie sie in Ihrer Gruppe.