Unlimited Plugins, WordPress themes, videos & courses! Unlimited asset downloads! From $16.50/m
Advertisement
  1. Code
  2. NativeScript

Codieren Sie eine Echtzeit-App mit NativeScript: Push-Benachrichtigungen

by
Difficulty:IntermediateLength:LongLanguages:
This post is part of a series called Code a Real-Time NativeScript App.
Code a Real-Time NativeScript App: Social Login and Firebase

German (Deutsch) translation by Valentina (you can also view the original English article)

NativeScript ist ein Framework zum Erstellen plattformübergreifender nativer mobiler Apps mit XML, CSS und JavaScript. In dieser Serie probieren wir einige der coolen Dinge aus, die Sie mit einer NativeScript-App tun können: Geolocation und Google Maps-Integration, SQLite-Datenbank, Firebase-Integration und Push-Benachrichtigungen. Unterwegs erstellen wir eine Fitness-App mit Echtzeitfunktionen, die jede dieser Funktionen nutzt.

In diesem Tutorial erfahren Sie, wie einfach es ist, Ihrer NativeScript-App mit dem Firebase Cloud Messaging Service Push-Benachrichtigungen hinzuzufügen.

Was werden Sie erstellen?

In Anlehnung an das vorherige Tutorial fügen Sie der App Push-Benachrichtigungen hinzu. Eine Benachrichtigung wird ausgelöst, wenn der Benutzer seinen aktuellen Rekord bricht oder wenn einer seiner Freunde den ersten Platz von ihm entfernt einnimmt.

Projekt einrichten

Wenn Sie dem vorherigen Tutorial zu Firebase gefolgt sind, können Sie einfach dasselbe Projekt verwenden und die Funktionen erstellen, die wir in diesem Tutorial hinzufügen werden. Andernfalls können Sie ein neues Projekt erstellen und die Starterdateien in den App-Ordner Ihres Projekts kopieren.

Danach müssen Sie auch die Plugins Geolocation, Google Maps, SQLite und Firebase installieren:

Nach der Installation müssen Sie das Google Maps-Plugin konfigurieren. Die vollständigen Anweisungen hierzu finden Sie im Abschnitt zur Installation des Google Maps-Plugins im vorherigen Tutorial.

Installieren Sie als Nächstes die fecha-Bibliothek zum Formatieren von Daten:

Danach müssen Sie auch das Firebase-Plugin konfigurieren. Lesen Sie unbedingt die folgenden Abschnitte im vorherigen Tutorial, damit die App ausgeführt werden kann:

  • Ausführen des Projekts
  • Einrichten einer Firebase-App
  • Einrichten einer Facebook-App
  • Installieren des Firebase Plugins
  • Facebook-Integration konfigurieren

Da wir das Firebase-Plugin bereits im vorherigen Beitrag eingerichtet haben, muss nur wenig Arbeit geleistet werden, um Push-Benachrichtigungen einzurichten.

Zuerst müssen Sie das Plugin neu konfigurieren, indem Sie in das Verzeichnis node_modules/nativescript-plugin-firebase gehen und npm run config ausführen. Wählen Sie dieses Mal sowohl die Facebook-Authentifizierung als auch Messaging aus.

Öffnen Sie anschließend die Datei firebase.nativescript.json im Stammverzeichnis Ihres Projekts und stellen Sie sicher, dass messaging auf true gesetzt ist:

Öffnen Sie anschließend die Datei app/App_Resources/Android/AndroidManifest.xml und fügen Sie die folgenden Dienste in die <application> ein. Dadurch wird der Firebase-Messaging-Dienst für die App aktiviert:

Ausführen des Projekts

Sie können das Projekt ausführen, indem Sie tns run android ausführen. Da diese App jedoch auf der Geolocation-Funktionalität aufbaut, empfehle ich Ihnen, einen GPS-Emulator zu verwenden, um Ihren Standort schnell einzustellen und zu ändern. Informationen dazu finden Sie im Abschnitt zum Ausführen der App im vorherigen Tutorial.

Wenn Sie Build-Fehler erhalten, können Sie die Plattform entfernen und die App erneut ausführen:

Einrichten von Firebase Cloud-Funktionen

Sie verwenden Firebase Cloud-Funktionen, um einen Server zu erstellen, der die Push-Benachrichtigungen sendet. Diese Firebase-Funktion wird verwendet, um Back-End-Code auszuführen, wenn ein bestimmtes Ereignis in den von Ihnen verwendeten Firebase-Funktionen eintritt, z. B. wenn neue Daten in der Echtzeitdatenbank gespeichert sind oder wenn ein neu hinzugefügter Benutzer über die Firebase-Authentifizierungsdienst. Für diese App verwenden Sie HTTP-Trigger, um Push-Benachrichtigungen zu senden, wenn die mobile App eine Anfrage an einen bestimmten Endpunkt sendet.

Um Firebase Cloud-Funktionen verwenden zu können, müssen Sie zuerst das firebase-tools-Paket global installieren:

Erstellen Sie als Nächstes einen neuen Ordner, in dem der Servercode gespeichert wird. Dies sollte sich außerhalb Ihres App-Ordners befinden. Installieren Sie in diesem Ordner das firebase-functions-Paket:

Melden Sie sich nach der Installation bei Firebase an, indem Sie die firebase login ausführen. Dadurch wird eine neue Browser-Registerkarte geöffnet, auf der Sie sich mit Ihrem Google-Konto anmelden können. Gehen Sie den gesamten Prozess durch und stimmen Sie allen angeforderten Berechtigungen zu.

Sobald Sie angemeldet sind, können Sie jetzt Firebase-Funktionen für ein bestimmtes Firebase-Projekt initialisieren:

Hier werden Sie gefragt, ob Sie ein Standardprojekt einrichten möchten oder nicht. Wählen Sie das Firebase-Projekt aus, das Sie im vorherigen Tutorial erstellt haben:

setup firebase functions

Als Nächstes werden Sie gefragt, ob die Abhängigkeiten installiert werden sollen. Sagen Sie ja.

Nachdem alle Abhängigkeiten installiert wurden, sollten Sie eine Datei firebase.json und einen functions-Ordner im Verzeichnis sehen. Die Datei, an der Sie arbeiten, ist die Datei functions/index.js. Öffnen Sie diese Datei und Sie sehen Folgendes:

Wenn Sie die helloWorld-Funktion auskommentieren, werden HTTP-Trigger in Aktion angezeigt.

Führen Sie Folgendes aus, um die Funktion in der Cloud bereitzustellen:

Nach Abschluss der Bereitstellung sollte die URL angezeigt werden, unter der die Funktion bereitgestellt wurde:

deploy firebase functions

Greifen Sie über Ihren Browser auf diese URL zu, um die Ausgabe "Hallo von Firebase!" zu sehen.

Hinzufügen des Servercodes

Jetzt können Sie den Code zum Implementieren von Push-Benachrichtigungen hinzufügen. Zuerst fügen Sie den Code für die Serverkomponente und dann den Code für die App hinzu.

Öffnen Sie die Datei functions/index.js und leeren Sie ihren Inhalt.

Erstellen der Firebase-Funktion

Importieren Sie die Firebase-Pakete, die Sie benötigen:

Erstellen Sie die Funktion init_push. Beachten Sie, dass der HTTP-Trigger für jede Anforderungsmethode aufgerufen wird. Sie müssen daher nach der Anforderungsmethode filtern, die Sie verarbeiten möchten. In diesem Fall möchten wir nur POST-Anfragen bearbeiten. Wir erwarten, dass die App die id, die steps und die friend_ids als Anforderungsdaten sendet.

Abrufen der Benutzer- und Freundesdaten

Fragen Sie als Nächstes die Firebase-Datenbank ab, um zu überprüfen, ob die Benutzer-ID vorhanden ist. Dies dient als Möglichkeit, den Endpunkt zu sichern, sodass nicht jeder Push-Benachrichtigungen auslösen kann. (Natürlich sollte eine echte App eine viel bessere Back-End-Sicherheit haben, damit Benutzer ihre eigenen Daten oder die Daten anderer nicht fälschen können.)

Wenn der Benutzer vorhanden ist, fragen Sie die Datenbank erneut ab, damit alle Benutzer zurückgegeben werden. Beachten Sie, dass Firebase derzeit keine Möglichkeit bietet, Datensätze basierend auf einem Array von IDs zurückzugeben. Daher müssen wir die relevanten Daten selbst filtern:

Durchlaufen Sie als Nächstes die von Firebase zurückgegebenen Ergebnisse und erstellen Sie ein neues Array, in dem sich die friends_data befinden. Sobald dies erledigt ist, sortieren Sie das Array nach der Anzahl der Schritte durch jeden Benutzer. Der mit der höchsten Anzahl von Schritten hat den ersten Index.

Erstellen Sie die Benachrichtigungsnutzlast

Jetzt können wir bestimmen, wer die Benachrichtigung erhalten wird, und die Benachrichtigungsnutzdaten erstellen. Wer steht an erster Stelle? Ist es der aktuelle Benutzer oder einer der Freunde des Benutzers? Da der aktuelle Benutzer auch seinen eigenen Rekord gebrochen hat, wenn er den Gesamtrekord desjenigen bricht, der an erster Stelle steht, müssen wir nur überprüfen, ob dieser Rekord gebrochen wurde.

Senden der Benachrichtigung

Senden Sie abschließend die Benachrichtigung:

App-Code aktualisieren

Zuvor haben Sie die App so eingerichtet, dass sie Push-Benachrichtigungen empfangen konnte. Dieses Mal fügen Sie Code hinzu, damit Ihre App diese Push-Benachrichtigungen verarbeiten und dem Benutzer anzeigen kann.

Push-Benachrichtigungen empfangen

Das erste, was Sie tun müssen, um Push-Benachrichtigungen zu erhalten, ist die Aktualisierung der Funktion firebase.init(), um einen Listener für den Empfang des Geräte-Tokens einzuschließen:

Diese Funktion wird nur einmal ausgeführt, daher müssen Sie das Token mithilfe der Anwendungseinstellungen lokal speichern. Auf diese Weise können wir später das Gerätetoken erhalten, wenn sich der Benutzer zum ersten Mal anmeldet. Wenn Sie sich noch an das vorherige Tutorial erinnern, speichern wir die Daten des Benutzers bei der ersten Anmeldung in Firebase.

Als Nächstes können Sie den Listener hinzufügen, wenn Benachrichtigungen empfangen werden. Daraufhin wird ein Warnfeld angezeigt, in dem Titel und Text der Nachricht als Inhalt verwendet werden:

Speichern des Geräte-Tokens in Firebase

Für Firebase Cloud Messaging ist das Geräte-Token erforderlich, wenn eine Push-Benachrichtigung an ein bestimmtes Gerät gesendet wird. Da wir bereits Firebase verwenden, speichern wir nur das Gerätetoken zusammen mit den Benutzerdaten. Dazu müssen Sie den Code zum Speichern der Benutzerdaten bearbeiten, um das zuvor erhaltene Gerätetoken einzuschließen:

Push-Benachrichtigungen auslösen

Push-Benachrichtigungen werden ausgelöst, wenn eines von zwei Dingen passiert:

  • wenn der Benutzer seinen aktuellen Rekord bricht
  • wenn einer der Freunde des Benutzers seinen Rekord bricht und auf den ersten Platz geht

Der erste ist einfach, so dass keine zusätzliche Einrichtung erforderlich ist. Aber für den zweiten müssen Sie ein wenig arbeiten. Zuerst müssen Sie den Code bearbeiten, wenn sich der Authentifizierungsstatus ändert. Direkt nach dem Extrahieren der Freund-IDs aus dem Facebook-Ergebnis müssen Sie die Freund-IDs mithilfe der Anwendungseinstellungen speichern.

Aktualisieren Sie als Nächstes den Code, wenn der Benutzer aufhört, seinen Spaziergang zu verfolgen. Rufen Sie direkt nach dem Code zum Erstellen der Benutzerdaten zum Aktualisieren des Benutzers die Freund-IDs aus den Anwendungseinstellungen ab und fügen Sie sie in das Objekt ein, das die Anforderungsdaten zum Auslösen der Push-Benachrichtigung enthält.

Stellen Sie die Anforderung an den zuvor erstellten Endpunkt der Firebase Cloud-Funktionen. Sobald eine Erfolgsantwort zurückgegeben wird, werden die Benutzerdaten nur dann in der Firebase-Datenbank aktualisiert.

Testen der Push-Benachrichtigungen

Sie können das Senden von Push-Benachrichtigungen testen, indem Sie zuerst die App vom Emulator oder Gerät deinstallieren. Auf diese Weise können wir die Funktion zum Abrufen des Geräte-Tokens ordnungsgemäß auslösen. Stellen Sie sicher, dass Sie console.log hinzufügen, um das Geräte-Token auszugeben:

Wenn das Geräte-Token in der NativeScript-Konsole ausgegeben wird, kopieren Sie es, klicken Sie in Ihrem Firebase-App-Dashboard auf das Menü Database und fügen Sie es allen Benutzern der App als Geräte-Token hinzu. Verwenden Sie device_token als Eigenschaftsnamen.

Um die Push-Benachrichtigung auszulösen, können Sie mithilfe von curl eine POST-Anforderung an den Endpunkt der Firebase-Funktion senden:

Wenn Sie Curl nicht installiert haben, können Sie die Anfrage mit der Postman-App senden. Verwenden Sie die folgenden Einstellungen für die Anforderung:

  • Anforderungsmethode: POST
  • URL: Ihr Firebase-Funktionsendpunkt
  • Header Key: Content-type
  • Header-Wert: application/json
  • Body:

Nach dem Auslösen wird eine Ausgabe ähnlich der folgenden angezeigt:

push notification received

Wenn die App derzeit nicht geöffnet ist, wird die Benachrichtigung im Benachrichtigungsbereich angezeigt:

push notification outside app

Abschluss

Herzliche Glückwünsche! Sie haben endlich die Fitness-App abgeschlossen. In vier Tutorials haben Sie eine NativeScript-App erstellt, die Google Maps, SQLite, Firebase Realtime-Datenbank und Firebase Cloud Messaging verwendet. Jetzt haben Sie eine ziemlich gute Grundlage für die Erstellung von NativeScript-Apps, die diese Technologien verwenden.

Um mehr über NativeScript oder andere plattformübergreifende mobile Technologien zu erfahren, lesen Sie unbedingt einige unserer anderen Kurse und Tutorials hier auf Envato Tuts+!

Advertisement
Advertisement
Advertisement
Advertisement
Looking for something to help kick start your next project?
Envato Market has a range of items for sale to help get you started.