Cordova App mit WP REST API – Performance Optimierung und ProgressBar

21. April 2017 - AngularJS, Apps, Cordova, Ionic, REST API, Wordpress, WP API

Wie bereits im letzten Beitrag zum Thema Titelbilder anzeigen und einzelne Artikel öffnen angesprochen gibt/gab es ein Problem mit der Performance. Das Laden der gesamten Artikel und dem Anzeigen dauert etwas länger, als gewünscht. Ich bin leider kein Performance Experte, weshalb die Erklärung in diesem Beitrag und das Ergebnis vermutlich etwas zu wünschen übrigen lässt. Ich versuche es dennoch einmal.
Ich glaube das Problem ist weniger das Holen der Daten vom Server, als vielmehr das eigentliche erstellen/rendern der Artikel. So kann ich mir auf jeden Fall nur erklären, weshalb mein Versuch, die Daten zu laden, während ein Splashscreen erscheint, nicht wirklich viel gebracht hat. Im Gegenteil, es hat den kompletten Ablauf eher noch verlangsamt.

Zumindest kann ich aber, wenn das gewünscht ist, zeigen, wie man einen eigenen Splashscreen erstellt. Also ein Screen, der geladen wird, nachdem die $ionicPlatform.ready() Methode ausgeführt wurde. Man kann also zuvor eine Anfrage an einen Server stellen und die Daten laden, während der eigene Splashscreen lädt.

Das nachfolgende Video zeigt wie das Starten der App bis jetzt aussieht. (Wie man seine App startet habe ich in diesem Beitrag erklärt)

Wie man sieht dauert es doch ein paar Sekunden, bis alle Artikel angezeigt werden. Und man bekommt auch nicht wirklich einen Hinweis, dass noch Inhalte geladen werden. Die User Experience ist also für die Tonne.

Verbesserung der Performance

Ich habe also versucht die App ein wenig schneller zu machen. Ich habe mich erst einmal dafür entschieden die Anzahl an angezeigten Artikeln auf die Hälfte zu beschränken. Es werden alle Artikel geladen, aber im HTML werden nicht alle ausgegeben.
Dies erreicht man einfach, indem mittels ng-if der ng-repeat über alle Artikle (articles) abgebrochen wird, sobald die Hälfte des Artikel Arrays geladen wurde. Genauer gesagt sieht der Code dafür so aus:

<ion-item ng-repeat="article in articles" ng-href="#/app/beste/{{article.id}}" ng-if="$index <= (articles.length/2)" class="articleContainer">
        <h1 class="articleH1">{{article.title}}</h1>
        <img ng-src="{{article.image}}" class="articleImg">
      </ion-item>

Einfügen einer ProgressBar

Um dem Benutzer/Benutzerin jetzt noch mitzuteilen, dass etwas im Hintergrund passiert und um ihm/ihr somit das Warten zu “versüßen”, will ich noch eine ProgressBar einfügen.

Ich habe mich für ngProgress entschieden, weil diese ProgressBar genau das macht, was ich möchte. Und dazu ist das Ganze auch noch super kommentiert. Was bei anderen ProgressBars nicht der Fall war. Die letztens Änderungen sind zwar schon sehr alt, aber für meine Zwecke reicht diese ProgressBar föllig aus. Und, wie bereits erwähnt, sie sieht sehr gut aus.
Ihr müsst hierzu einfach nur die JS Datei und die CSS Datei in euer Projekt einbinden. Nehmt am besten die Dateien aus dem Github Repository. Es gibt noch eine offizielle Seite, aber dort funktionieren die Seiten zu den Dateien nicht.
Die nächsten Schritte sind auf Github super erklärt. Ihr müsst das Modul ‘ngProgress’ einbinden und eine Instance von progressbar anlegen.
Dann müsst ihr noch die Factory ngProgressFactory eurem Controller mitgeben und schon könnt ihr die ProgressBar verwenden.

Zum Starten gibt es die Methode

$scope.progressbar.start();

Zum Beenden die Methode

$scope.progressbar.complete();

Einziges “Problem” ist jetzt noch, dass diese ProgressBar ganz oben im Browser angezeigt wird. Das ist natürlich sinnvoll, weil diese Art von ProgressBar immer oben im Browser angezeigt wird. Da wir aber eine App entwickeln und eine Nav-Bar haben, wäre es schöner, wenn die ProgressBar unterhalb dieser angezeigt werden würde.

Glücklicherweise wurde dieses Szenario mit bedacht beim Entwickelt und so gibt eine Funktion zum setzen eines Parent Elements. Wir müssen dieser Funktion eine id mitgeben, welche wir auf der anderen Seite unserer <ion-list> mitgeben.

Zum Schluss noch mal die kompletten Dateien im Überblick und ein Video mit den neuen Sachen.

Die beste.html Datei:

<ion-view  view-title="Beste Zeitung" ng-init="getArticles()">
  <ion-content>
    <ion-list id="progressContainer">
      <ion-item ng-repeat="article in articles" ng-href="#/app/beste/{{article.id}}" ng-if="$index <= (articles.length/2)" class="articleContainer">
        <h1 class="articleH1">{{article.title}}</h1>
        <img ng-src="{{article.image}}" class="articleImg">
      </ion-item>
    </ion-list>

  </ion-content>
</ion-view>

 Unser Controller BesteCtrl:

.controller('BesteCtrl', function($scope, $http, ngProgressFactory, ngProgress) {

    $scope.articles = [];

    // instance of the progressbar
    $scope.progressbar = ngProgressFactory.createInstance();

    $scope.getArticles = function() {      
      console.log("get articles");
      $scope.progressbar.setParent(document.getElementById("progressContainer")); 
      $scope.progressbar.start();
      $scope.articles = [];
        
        $http({
          method: 'GET',
          url: 'http://bestezeitung.de/wp-json/wp/v2/posts?_embed',
          headers: {'Content-Type': 'application/x-www-form-urlencoded; charset=UTF-8'},
        }).then(function successCallback(response) {
          console.log("success");
          console.log(response);
          for(var i = 0; i < response.data.length; i++) {
            var imageUrl;
            var featuredMedia = response.data[i]._embedded["wp:featuredmedia"];
              if(featuredMedia == undefined) {
                imageUrl = "";
              } else {
                imageUrl = response.data[i]._embedded["wp:featuredmedia"][0].source_url;
              }

              $scope.articles.push({
                id: response.data[i].id,
                title: response.data[i].title.rendered,
                image: imageUrl
              });

          } // Ende For
          $scope.progressbar.complete();
       
        }, function errorCallback(response) {
          console.log("error");
          console.log(error);
        });        
    };
  })

Und so sieht das gute Stück am Ende aus:

Die Geschwindigkeit hat sich, wenn man die Videos mal vergleich, eigentlich nicht verändert. Ich versuche das irgendwie in den Griff zu bekommen. Über Tipps bin ich sehr dankbar. Gerne per Mail an kontakt@torbengabriel.de, hier in die Kommentare oder sonst auf irgend einem Weg.

 

Hinterlass doch ein Like :)Share on FacebookTweet about this on TwitterShare on Google+

Leave a Reply