26. März 2015

Let's play: Ionic, AngularJS and Firebase

André Bauer

Was macht ein Front End Entwickler bei leanovate mit seiner Slack Time? Er lässt seinem Spieltrieb freien Lauf und spielt mit Technologien, die er schon lange mal ausprobieren wollte...
In meinem Fall war das die Kombination von Ionic, das auf AngularJS aufbaut, und Firebase (der Google API für Realtime Apps) als Backend. Mir fällt das Einarbeiten immer leichter, wenn ich eine konkrete Aufgabe habe, weshalb das leanovate Testprojekt "Moodly" gerade recht kam. Mit Moodly kann die Stimmung im Team in einem festgelegten Rhythmus abgefragt werden, um z.B. einen Happiness Index zu ermitteln und zu monitoren. Ich habe diese Idee adaptiert und in Form einer Cross Platform App (iOS und Android) umgesetzt, wobei der Fokus darauf lag, den Realtime-Aspekt auszuprobieren.

Selbstverständlich sind die Ergebnisse dieses Experiments Open Source und auf Github zu finden. Für alle, die noch nicht auf Github unterwegs sind und die Outcomes in Form von Code analysieren, hier meine Lieblings-Codeschnippsel:

LESS / CSS

.slider {
    .box {
        height: 100%;
    }
    img.mood {
        padding: 20px 0;
        max-width: 60%;
    }
    .vote-container {
        padding: 0 10px;
    }
}
.no-voting {
    opacity: 0.1;
}

Dies sind die einzigen Zeilen Less, die für die App nötig waren, der Rest wird von Ionic geliefert 🙂

JS / AngularJS

...
function votingFbObject(uid) {
    var votesRef = new Firebase(FirebaseUrl + 'votings/' + uid);
    return $firebaseObject(votesRef);
}
...
VotingMgr.votingFbObject(currentAuth.uid).$bindTo($scope, 'vm.myVotings');

Hier wird ein Knoten im Firebase-Backend referenziert (votings/UID) und anschließend mit dem $firebaseObject - Service von AngularFire ein Three-Way-Databinding erzeugt. Als Ergebnis der Übung sind jetzt sowohl Backend (Firebase), als auch Model und View in Sync. Wenn also das Model upgedated wird, aktualisiert sich auch der View, und die Daten bei Firebase werden auch angepasst. Dementsprechend ist es ausreichend, für das Hinzufügen und Persistieren eines Votings das Model (vm.myVotings) zu aktualisieren:

function createVoting() {
    var tan = getVotingTan();
    var voting = {
        'title': vm.newVoting.title,
        'owner': currentAuth.uid,
        'frequency': vm.newVoting.frequency,
        'multiple': vm.newVoting.multiple
    };
    vm.myVotings[tan] = voting;
    ...
}

Und nein, es ist wirklich kein Service-Call notwendig. Hatte ich erwähnt, dass Firebase auch offline-fähig ist? Alle Änderungen werden lokal gespeichert und bei wiederhergestellter Internetverbindung automatisch synchronisiert. Wenn man mit komplexen Daten arbeitet, die potentiell von mehreren Clients verändert werden können, kann man auf transaction() zurückgreifen. Dort ist eine automatische Konfliktlösung implementiert.
Wenn man seine AngularJS-App jetzt noch vernünftig modularisiert hat, kann man einzelne Module der Ionic-App bei Bedarf auch in der Web-App verwenden, bzw. die komplette Ionic-App auch auf Webserver deployen / auf Firebase hosten. Dann sollte man nur noch ein CSS-Theme für größere Auflösungen mitliefern.

Technologie