So erstellen Sie ein Echtzeitdiagramm in iOS

Foto von André Sanano auf Unsplash

Das Sammeln von Daten ist heutzutage einer der Schlüssel zum Verständnis der Wahrnehmung von Produkten. Durch das Sammeln von Benutzerdaten können Sie bessere Produkte erstellen und Ihre Benutzer besser verstehen. Alle Daten auf der Welt wären jedoch nutzlos, wenn sie nicht visualisiert werden könnten.

In diesem Artikel erfahren Sie, wie Sie in iOS ein einfaches Echtzeitdiagramm erstellen. Das Diagramm erhält Daten und wird in Echtzeit auf den Bildschirmen aller aktuell in Ihrer Anwendung angemeldeten Benutzer aktualisiert. Wir gehen davon aus, dass dies ein Diagramm ist, das überwacht, wie viele Besucher eine Website nutzen. Lass uns anfangen.

Als Beispiel für den Kontext sehen Sie hier, was wir bauen werden:

Bitte beachten Sie: Ein grundlegendes Verständnis von Swift und Node.js ist erforderlich, um diesem Tutorial zu folgen.

Voraussetzungen für das Erstellen eines Echtzeitdiagramms in iOS

Bevor wir mit diesem Lernprogramm beginnen, müssen Sie die folgenden Anforderungen erfüllen:

  • Ein MacBook Pro.
  • Auf Ihrem Computer installierter Xcode.
  • Grundkenntnisse in Swift und der Verwendung von Xcode.
  • Grundkenntnisse in JavaScript (Node.js).
  • Node.js und NPM sind auf Ihrem Computer installiert.
  • Cocoapods ** auf Ihrem Computer installiert.
  • Eine Pusher-Anwendung

Wenn Sie alle Anforderungen haben, können wir beginnen.

Vorbereiten der Erstellung unserer Echtzeit-Kartenanwendung in Xcode

Starten Sie Xcode auf Ihrem Mac und erstellen Sie ein neues Projekt (nennen Sie es wie Sie möchten). Folgen Sie dem Assistenten für neue Anwendungen und erstellen Sie eine neue Anwendung für eine einzelne Seite. Schließen Sie nach dem Erstellen des Projekts Xcode und starten Sie Ihre Terminalanwendung.

Wechseln Sie im Terminal zum Stammverzeichnis des Anwendungsverzeichnisses. Führen Sie dann den Befehl pod init aus. Dies erzeugt ein Podfile. Aktualisieren Sie den Inhalt der Poddatei auf den folgenden Inhalt (ersetzen Sie PROJECT_NAME durch Ihren Projektnamen):

Plattform: iOS, '9.0'
Ziel 'PROJECT_NAME' tun
  use_frameworks!
  
  Pod 'Charts', '~> 3.0.2'
  Pod 'PusherSwift', '~> 4.1.0'
  Pod 'Alamofire', '~> 4.4.0'
Ende

Speichern Sie das Podfile, gehen Sie zu Ihrem Terminal und führen Sie den folgenden Befehl aus: pod install.

Wenn Sie diesen Befehl ausführen, werden alle Pakete von Drittanbietern installiert, die zum Erstellen unserer Echtzeit-iOS-Kartenanwendung erforderlich sind.

Das erste Paket, das installiert wird, ist Charts, ein Paket zum Erstellen von schönen Diagrammen unter iOS. Das zweite Paket ist das Pusher Swift SDK. Das letzte Paket ist Alamofire, ein Paket für HTTP-Anfragen unter iOS.

Öffnen Sie nach Abschluss der Installation die Datei **. Xcworkspace ** im Stammverzeichnis Ihres Projekts. Dies sollte Xcode starten. Jetzt können wir mit der Erstellung unserer iOS-Anwendung beginnen.

Erstellen unserer Echtzeit-Kartenanwendungsansichten in Xcode

Zunächst erstellen wir die erforderlichen Ansichten für unsere Echtzeit-Kartenanwendung. Öffnen Sie die Main.storyboard-Datei und beginnen Sie mit der Gestaltung unserer Ansicht.

Erstellen Sie zunächst eine rechteckige Ansicht von Kante zu Kante oben im View Controller im Storyboard. Fügen Sie in dieser Ansicht eine Schaltfläche hinzu und fügen Sie den Titel "Besuche simulieren" hinzu. Erstellen Sie als Nächstes eine weitere Ansicht, die ebenfalls ein Rechteck ist und sich vom Ende der ersten Ansicht oben bis zum unteren Bildschirmrand erstreckt. In dieser Ansicht wird das Echtzeitdiagramm gerendert.

Wenn Sie mit dem Erstellen der Ansichten fertig sind, sollten Sie ungefähr das haben, was in der folgenden Abbildung gezeigt wird.

In der jetzigen Form machen die Ansichten nichts. Lassen Sie uns einige Funktionen mit der Ansicht der iOS-Kartenanwendung verbinden.

Hinzufügen grundlegender Funktionen zu unserer iOS-Kartenanwendung

Wie bereits erwähnt, sind die Ansichten und Schaltflächen unserer Anwendung nicht mit unserem ViewController verbunden.

Klicken Sie in Xcode, während das Storyboard noch geöffnet ist, oben rechts auf der Seite auf die Schaltfläche "Assistenten-Editor anzeigen", um die Ansicht in Storyboard- und Codeansicht zu unterteilen. Klicken Sie nun einmal auf die von Ihnen erstellte Schaltfläche und ziehen Sie den Link bei gedrückter Strg-Taste in den Code-Editor. Dann erstelle eine @IBaction wie in den Bildern unten gezeigt:

Wenn der Link vollständig ist, sollte im Code-Editor Folgendes angezeigt werden:

@IBAction func simulateButtonPressed (_ Absender: Beliebig) {
}

Toll! Nachdem Sie den ersten Link erstellt haben, müssen Sie einen weiteren Link zur Diagrammansicht erstellen.

Klicken Sie in Ihrem Storyboard auf die Ansicht und stellen Sie auf der Registerkarte "Identitätsprüfung" sicher, dass die Ansicht wie unten dargestellt mit LineChartView verbunden ist.

Nachdem die Ansicht mit einer Ansichtsklasse verbunden ist, wiederholen Sie den Vorgang wie zuvor, um die Schaltfläche zu verknüpfen. Nur dieses Mal erstellen wir anstelle einer @IBAction ein @IBOutlet. Bilder sind unten gezeigt:

Wenn der Link vollständig ist, sollte im Code-Editor Folgendes angezeigt werden:

@IBOutlet schwach var chartView: LineChartView!

Importieren Sie schließlich oben im ViewController das Diagrammpaket. Sie können den folgenden Code direkt unter "UIKit importieren" im ViewController hinzufügen.

Charts importieren

Nachdem wir beide Elemente mit unserem Code verknüpft haben, wird jedes Mal, wenn die Schaltfläche "Besuche simulieren" gedrückt wird, die Funktion "simulateButtonPressed" aufgerufen.

Hinzufügen von Echtzeitfunktionen zu unserer iOS-Kartenanwendung

Als letztes Puzzleteil wird ein Diagramm angezeigt, das auf allen Geräten, die das Diagramm anzeigen, in Echtzeit aktualisiert wird.

Um dies zu erreichen, werden wir Folgendes tun:

  • Erstellen Sie eine Funktion, die unser Diagramm in Abhängigkeit von den Zahlen aktualisiert.
  • Rufen Sie über unseren Anforderungsbutton das Backend auf, das wiederum simulierte Daten an Pusher sendet.
  • Erstellen Sie eine Funktion, die auf Ereignisse von Pusher wartet, und wenn diese empfangen werden, wird die zuvor erstellte Funktion zum Aktualisieren von Diagrammen ausgelöst.

Erstellen Sie eine Triggerfunktion, um unser Diagramm zu aktualisieren

Erstellen wir die Funktion, mit der unser Diagramm in Abhängigkeit von den angegebenen Zahlen aktualisiert wird. Öffnen Sie den ViewController und deklarieren Sie darin eine Klasseneigenschaft direkt unter der Klassendeklaration. Wir werden diese Eigenschaft verwenden, um die Besucher zu verfolgen:

var visitors: [Double] = []

Als nächstes fügen wir der Diagrammansicht die Funktion hinzu, die die eigentliche Aktualisierung vornimmt:

private func updateChart () {
    var chartEntry = [ChartDataEntry] ()
    für i in 0 .. 
    let data = LineChartData ()
    data.addDataSet (Zeile)
    chartView.data = data
    chartView.chartDescription? .text = "Besucherzahl"
}

Im obigen Code deklarieren wir chartEntry, in dem wir alle unsere Diagrammdaten speichern möchten. Dann durchlaufen wir die verfügbaren Besucher und fügen für jeden von ihnen einen neuen ChartDataEntry (x: Double (i), y: visitors [i]) hinzu, der dem Diagramm die X- und Y-Positionen mitteilt.

Wir legen die Farbe fest, in der das Liniendiagramm angezeigt wird. Wir erstellen die LineChartData und fügen die Linie hinzu, die unsere Datenpunkte enthält. Schließlich fügen wir die Daten zur Diagrammansicht hinzu und legen die Beschreibung der Diagrammansicht fest.

Machen Sie unseren Simulieren-Button zum Endpunkt

Als nächstes müssen wir dafür sorgen, dass unser Anforderungsknopf ein Backend auslöst, das wiederum simulierte Daten an Pusher sendet.

Dazu müssen wir den View Controller noch einmal aktualisieren. Importieren Sie im ViewController das Alamofire-Paket direkt unter dem Charts-Paket:

Alamofire importieren

Ersetzen Sie nun die Funktion simulateButtonPressed durch den folgenden Code:

@IBAction func simulateButtonPressed (_ Absender: Beliebig) {
    Alamofire.request ("http: // localhost: 4000 / simulate", Methode: .post) .validate (). ResponseJSON {(response) in
        switch response.result {
        case .success (_):
           _ = "Erfolgreich"
        case .failure (let error):
           drucken (Fehler)
        }
    }
}

Im folgenden Code verwenden wir Alamofire, um eine POST-Anfrage an http: // localhost: 4000 / simulate zu senden, bei dem es sich um einen lokalen Webserver handelt (wir werden dieses Backend in Kürze erstellen). In einer realen Anwendung verweist dies normalerweise auf einen realen Webserver.

Dieser Endpunkt benötigt keine Parameter, um das Lernprogramm einfach zu halten. Wir brauchen auch nichts mit der Antwort zu tun. Wir müssen nur die POST-Anfrage jedes Mal senden, wenn die Schaltfläche "Besuche simulieren" gedrückt wird.

Echtzeit-Funktionalität mit Pusher einbinden

Damit dies alles funktioniert, erstellen wir eine Funktion, die auf Ereignisse von Pusher wartet. Sobald diese empfangen werden, speichern wir den Wert für die Besucher und lösen dann die zuvor erstellte Funktion zum Aktualisieren von Diagrammen aus.

Öffnen Sie dazu den ViewController und importieren Sie das PusherSwift SDK unter dem Alamofire-Paket oben:

PusherSwift importieren

Als Nächstes deklarieren wir eine Klasseneigenschaft für die Pusher-Instanz. Wir können dies direkt unter der Besuchererklärung tun:

var drücker: drücker!

Nachdem Sie die Eigenschaft deklariert haben, müssen Sie der Klasse die folgende Funktion hinzufügen, damit sie die Ereignisse abhören kann:

private func listenForChartUpdates () {
    Drücker = Drücker (
        Schlüssel: "PUSHER_KEY",
        Optionen: PusherClientOptions (
            host: .cluster ("PUSHER_CLUSTER")
        )
    )

    let channel = pusher.subscribe ("visitorsCount")

    channel.bind (eventName: "addNumber", callback: {(data: Any?) -> Void in
       Wenn lassen Sie Daten = Daten als? [String: AnyObject] {
           Lass count = data ["count"] as! Doppelt
           self.visitors.append (Anzahl)
           self.updateChart ()
       }
    })

    pusher.connect ()
}

Im obigen Code instanziieren wir Pusher und übergeben unseren Schlüssel und den Cluster (Sie können Ihren Schlüssel und den Cluster über das Dashboard Ihrer Pusher-Anwendung abrufen). Anschließend abonnieren wir den visitorsChannel und binden ihn an den Ereignisnamen addNumber in diesem Kanal.

Wenn das Ereignis ausgelöst wird, lösen wir die Logik im Rückruf aus, die einfach die Zählung an die Besucher anfügt und dann die updateChart-Funktion aufruft, die das tatsächliche Diagramm in Echtzeit aktualisiert.

Schließlich rufen wir pusher.connect () auf, das die Verbindung zu Pusher herstellt.

Fügen Sie in der viewDidLoad-Funktion der listenForChartUpdates-Methode einfach einen Aufruf hinzu:

Überschreibe func viewDidLoad () {
    super.viewDidLoad ()

    // ...Sachen

    listenForChartUpdates ()
}

Das ist alles! Wir haben unsere Anwendung in Xcode erstellt und sind bereit zum Testen. Zum Testen müssen wir jedoch das Backend erstellen, an das wir eine POST-Anforderung senden, wenn auf die Schaltfläche geklickt wird. Um dieses Backend zu erstellen, verwenden wir Node.js. Machen wir das jetzt.

Erstellen des Back-End-Dienstes für unsere Echtzeit-iOS-Kartenanwendung

Erstellen Sie zunächst ein Verzeichnis für die Webanwendung und anschließend einige neue Dateien im Verzeichnis:

Datei: index.js

// ------------------------------------------------ -------
// Knotenabhängigkeiten erfordern
// ------------------------------------------------ -------
let Pusher = require ('drücker');
let express = require ('express');
let bodyParser = require ('body-parser');
let app = express ();
// Drücker instanziieren
let pusher = new Pusher (erforderlich ('./ config.js'));
// ------------------------------------------------ -------
// Express-Middleware laden
// ------------------------------------------------ -------
app.use (bodyParser.json ());
app.use (bodyParser.urlencoded ({extended: false}));
// ------------------------------------------------ -------
// Mehrere Änderungen am Besucherzählwert simulieren,
// auf diese Weise wird das Diagramm immer mit anderen aktualisiert
// Werte.
// ------------------------------------------------ -------
app.post ('/ simulate', (req, res, next) => {
    var loopCount = 0;
    let sendToPusher = setInterval (function () {
    let count = Math.floor ((Math.random () * (100 - 1)) + 1)
    pusher.trigger ('visitorsCount', 'addNumber', {count: count})
    loopCount ++;
    if (loopCount === 20) {
        clearInterval (sendToPusher);
    }
    }, 2000);
    res.json ({success: 200})
})
// Index verarbeiten
app.get ('/', (req, res) => {
    res.json ("Es funktioniert!");
});
// Handle 404's
app.use ((req, res, next) => {
    let err = new Error ('Nicht gefunden');
    err.status = 404;
    next (err);
});
// ------------------------------------------------ -------
// Bewerbung ausliefern
// ------------------------------------------------ -------
app.listen (4000, function () {
    console.log ('App lauscht auf Port 4000!')
});

Die obige Datei ist eine einfache Express-Anwendung, die in JavaScript geschrieben ist. Wir instanziieren alle benötigten Pakete und konfigurieren pusher mit einer Konfigurationsdatei, die wir in Kürze erstellen werden. Dann erstellen wir eine Route / simulieren und lösen in dieser Route das Ereignis addNumber im Kanal visitorCount aus. Dies ist derselbe Kanal und dasselbe Ereignis, auf den die Anwendung wartet.

Zur Vereinfachung verwenden wir setInterval, um alle 2000 Millisekunden eine zufällige Besucherzahl an das Pusher-Backend zu senden. Nach 20 Schleifen stoppt die Schleife. Dies sollte ausreichen, um unsere Anwendung zu testen.

Erstellen Sie die nächste Datei config.js:

module.exports = {
    appId: 'PUSHER_APP_ID',
    Schlüssel: 'PUSHER_APP_KEY',
    secret: 'PUSHER_APP_SECRET',
    Cluster: 'PUSHER_APP_CLUSTER',
};

In dieser Datei deklarieren wir einfach Abhängigkeiten.

Öffnen Sie nun das Terminal und wechseln Sie zum Stammverzeichnis der Webanwendung. Führen Sie die folgenden Befehle aus, um die NPM-Abhängigkeiten zu installieren und die jeweilige Anwendung auszuführen:

$ npm installieren
$ node index.js

Wenn die Installation abgeschlossen und die Anwendung fertig ist, sollten Sie die folgende Ausgabe sehen:

Anwendung testen

Sobald der Webserver Ihres lokalen Knotens ausgeführt wird, müssen Sie einige Änderungen vornehmen, damit Ihre Anwendung mit dem lokalen Webserver kommunizieren kann. Nehmen Sie in der Datei info.plist die folgenden Änderungen vor:

Mit dieser Änderung können Sie Ihre Anwendung erstellen und ausführen, und sie kommuniziert direkt mit Ihrer lokalen Webanwendung.

Fazit

Dieser Artikel hat Ihnen gezeigt, wie Sie Pusher und das Charts-Paket kombinieren können, um eine Echtzeit-iOS-Kartenanwendung zu erstellen. Es gibt viele andere Diagrammtypen, die Sie mit dem Paket erstellen können. Der Kürze halber haben wir dies jedoch am einfachsten gemacht. Sie können die anderen Diagrammtypen erkunden und sogar mehrere Datenpunkte pro Anforderung übergeben.

Dieser Beitrag erschien zuerst im Pusher-Blog.