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

Codieren einer NativeScript-App in Echtzeit: Soziales Login und Firebase

by
Difficulty:IntermediateLength:LongLanguages:
This post is part of a series called Code a Real-Time NativeScript App.
Code a Real-Time NativeScript App: SQLite
Code a Real-Time App With NativeScript: Push Notifications

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 Sie Ihrer NativeScript-App ein Facebook-Login hinzufügen. Außerdem erfahren Sie, wie Sie mit Firebase Daten zu Laufsitzungen in der Fitness-App speichern.

Was werden Sie erstellen?

In Anlehnung an das vorherige Tutorial fügen wir nun den Inhalt für die Registerkarte "Sozial" hinzu. Standardmäßig wird eine Schaltfläche zum Anmelden bei Facebook wie folgt angezeigt:

not logged in

Wenn sich ein Benutzer zum ersten Mal anmeldet, bittet die Facebook-App um Erlaubnis, auf das öffentliche Profil und die E-Mail-Adresse zugreifen zu dürfen:

Facebook permissions

Außerdem wird die Freundesliste als zusätzliche Berechtigung angefordert.

Sobald der Benutzer angemeldet ist, wird der folgende Bildschirm angezeigt:

Social tab

Hier werden die Informationen für den aktuell angemeldeten Benutzer und die Bestenliste für die Laufsitzungen angezeigt. Beachten Sie, dass nur die letzte Laufsitzung aufgezeichnet wird.

Projekt einrichten

Wenn Sie dem vorherigen Beitrag in dieser Reihe auf SQLite gefolgt sind, können Sie einfach dasselbe Projekt verwenden und die Funktionen erstellen, die wir in diesem Lernprogramm 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 und SQLite installieren:

Nach der Installation müssen Sie das Google Maps-Plugin konfigurieren. Sie können die vollständigen Anweisungen dazu lesen, indem Sie den Abschnitt zum Installieren des Google Maps-Plugins in diesem früheren Tutorial lesen.

Danach müssen Sie auch fecha installieren, eine Bibliothek zum Formatieren von Daten:

Sobald alles erledigt ist, sollten Sie bereit sein, diesem Tutorial zu folgen.

Ausführen des Projekts

Sie können das Projekt ausführen, indem Sie tns run android ausführen. Da diese App jedoch die Geolokalisierungsfunktion verwendet, 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.

Einrichten einer Firebase-App

Wenn Sie mit Firebase arbeiten, müssen Sie zunächst eine Firebase-App erstellen. Sie können dies tun, indem Sie zu console.firebase.com gehen und auf Projekt hinzufügen klicken. Geben Sie den Namen des Projekts ein und klicken Sie auf die Schaltfläche Projekt erstellen. Stellen Sie sicher, dass der Name des Projekts mit dem Namen der App übereinstimmt. In diesem Fall lautet die App-ID com.yourname.fitApp, sodass der Name der App fitApp lautet.

create Firebase project

Sobald die App erstellt wurde, werden Sie zur Dashboard-Seite der App weitergeleitet.  Von dort aus können Sie auf Firebase zu Ihrer Android-App hinzufügen klicken, die App-ID eingeben und auf die Schaltfläche Register App klicken.

Add Firebase to Android app

Laden Sie als Nächstes die Datei google-services.json herunter und kopieren Sie sie in das Verzeichnis app/App_Resources/android. Diese Datei enthält alle Einstellungen, die die App für die Kommunikation mit Firebase benötigt.

Der nächste im Firebase-Dashboard angegebene Schritt besteht darin, das Firebase-SDK einzuschließen. Aber das ist bereits im Plugin erledigt, so dass wir es nicht mehr tun müssen.

Einrichten einer Facebook-App

Da wir das Facebook-Login verwenden, müssen wir auch eine Facebook-App erstellen. Gehen Sie zu developer.facebook.com und erstellen Sie eine neue Facebook-App:

Create Facebook app

Sobald die App erstellt wurde, werden Sie zum App-Dashboard weitergeleitet. Klicken Sie dort auf das Menü + Produkt hinzufügen und wählen Sie Facebook Login.

Aktivieren Sie unter den Client-OAuth-Einstellungen alles außer Web-OAuth-Neuauthentifizierung erzwingen und Anmeldung von Geräten. Für die gültigen OAuth-Umleitungs-URIs können Sie dies erreichen, indem Sie zum Firebase-Dashboard zurückkehren, auf Authentifizierung klicken und Facebook als Authentifizierungsmethode aktivieren:

Authentication methods

Bevor Sie es aktivieren können, müssen Sie die Facebook-App-ID und den geheimen App-Schlüssel eingeben. Sie können dies über das Dashboard der zuvor erstellten Facebook-App abrufen.

Klicken Sie anschließend auf Speichern und kopieren Sie den OAuth-Umleitungs-URI in die Facebook-App-Einstellungen. Vergessen Sie nicht, die Änderungen zu speichern.

Als nächstes müssen Sie auch Android als Plattform hinzufügen. Sie können dies tun, indem Sie in den Grundeinstellungen auf Plattform hinzufügen klicken:

Android settings

Legen Sie com.yourname.fitApp als Wert für den Google Play-Paketnamen und com.tns.NativeScriptActivity für den Klassennamen fest.

Beachten Sie, dass Sie, wenn Sie die App später für den App Store freigeben möchten, einen Hash für die .apk-Datei der App generieren und unter dem Feld für die Schlüssel-Hashes hinzufügen müssen. Beachten Sie außerdem, dass Sie zum Testen nur das Facebook-Entwicklerkonto verwenden können, mit dem Sie die App erstellt haben. Wenn Sie andere Facebook-Konten zum Testen hinzufügen möchten, können Sie diese unter oles hinzufügen.

Installieren des Firebase Plugins

Um Firebase zu integrieren, müssen wir das Firebase-Plugin für NativeScript installieren. Dies erleichtert die Implementierung der Facebook-Anmeldung und der Echtzeit-Datenbankfunktion in Firebase:

Nach Abschluss der Installation stellt Ihnen das Installationsprogramm einige Fragen zu den Firebase-Funktionen, die Sie in der App verwenden werden. Beantworten Sie das Facebook-Login mit Ja und den Rest mit Nein.

Facebook-Integration konfigurieren

Sie müssen der App mitteilen, mit welcher Facebook-App sie sprechen soll. Sie können dies tun, indem Sie die Datei app\App_Resources\Android\AndroidManifest.xml öffnen und <meta-data android:name"com.facebook.sdk.ApplicationId" android:value="@string/facebook_app_id"/> unter <application>-Tag hinzufügen:

Erstellen Sie als Nächstes eine Datei app\App_Resources\Android\values\facebooklogin.xml und fügen Sie Folgendes hinzu:

Stellen Sie sicher, dass Sie YOUR_FACEBOOK_APP_ID durch die App-ID der zuvor erstellten Facebook-App ersetzen.

Build-Fehler beheben

Wenn nach der Installation des Plugins Build-Fehler auftreten, lesen Sie unbedingt den Abschnitt Bekannte Probleme unter Android in der README-Datei des Repos. Wenn Ihr spezifisches Problem nicht vorhanden ist, versuchen Sie, die Seite mit den Problemen zu durchsuchen.

Das Hauptproblem war ein Kompatibilitätsproblem mit dem Google Maps-Plugin. Da dieses Plugin auch Google Play Services verwendet, gab es einen Konflikt mit verschiedenen verwendeten Versionen. Um dies zu lösen, musste ich die Datei app/App_Resources/Android/app.gradle öffnen und die zu verwendende Google Play Services-Version angeben:

Zum Zeitpunkt des Schreibens dieses Tutorials ist es um 11.0 Uhr. Überprüfen Sie jedoch über das Android SDK, welche Version derzeit für Sie installiert ist.

Sobald dies erledigt ist, müssen Sie die Android-Plattform deinstallieren (tns platform remove android) und versuchen, die App erneut auszuführen (tns run android).

Wenn dies bei Ihnen nicht funktioniert und Sie immer noch den gleichen Erstellungsfehler erhalten, müssen Sie möglicherweise von vorne beginnen, indem Sie ein neues Projekt erstellen. Versuchen Sie diesmal jedoch, das Firebase-Plugin vor dem Google Maps-Plugin zu installieren. Nehmen Sie dann die erforderlichen Konfigurationsänderungen vor, bevor Sie versuchen, die App auszuführen.

Code hinzufügen

Jetzt können wir den Code hinzufügen. Wir werden zuerst das XML, dann das JavaScript und schließlich den CSS-Code hinzufügen.

Hinzufügen des UI-Markups

Wir werden hauptsächlich in der Ansicht der sozialen Registerkarte arbeiten. Fügen Sie zunächst das Markup zum Anzeigen der Informationen für den aktuell angemeldeten Benutzer sowie eine Schaltfläche zum Abmelden hinzu:

Unten finden Sie das Markup für die Anzeige der Bestenliste. Dies durchläuft die friends_data, um den Benutzernamen, die Entfernung und die Schritte anzuzeigen, die sowohl von den Freunden des Benutzers als auch vom Benutzer ausgeführt wurden.

Wenn derzeit kein Benutzer angemeldet ist, wird die Schaltfläche zum Anmelden bei Facebook angezeigt:

Bibliotheken importieren

Öffnen Sie die Datei main-view-model.js und fügen Sie unter dem Code zum Importieren der fecha-Bibliothek Folgendes hinzu:

Wir verwenden nativescript-plugin-firebase, um mit Firebase zu kommunizieren, http, um http-Anforderungen an die Graph-API von Facebook zu stellen, und application-settings, um die Anmeldedaten des Benutzers beizubehalten.

Firebase initialisieren

Als nächstes initialisieren Sie Firebase mit der Funktion init(). Dies akzeptiert ein Objekt, das Optionen für die verschiedenen von Firebase unterstützten Funktionen enthält (z. B. Authentifizierung, Echtzeitdatenbank, Cloud-Messaging).

Im Folgenden fügen wir die Option persist hinzu, mit der Firebase Daten lokal speichert, sodass die App auch offline verwendet werden kann. Später fügen wir den Listener hinzu, wenn sich der Authentifizierungsstatus ändert (wenn sich der Benutzer bei der App anmeldet oder abmeldet).

Anmelden eines Benutzers

Fügen Sie als Nächstes den Code hinzu, der ausgeführt wird, wenn der Benutzer auf die Schaltfläche zum Anmelden bei Facebook tippt. Dies verwendet die login-Funktion, die ein Objekt akzeptiert, das den type und facebookOptions enthält.

Der type ist die Authentifizierungsmethode, die zum Anmelden verwendet wird. In diesem Fall handelt es sich um Facebook. facebookOptions ist ein Objekt, das ein Array mit dem Namen scope enthält. Die Elemente dieses Arrays sind die Berechtigungen, die die App vom Benutzer anfordern soll.

Sobald sich der Benutzer angemeldet und allen angeforderten Berechtigungen zugestimmt hat, löst das Versprechen die erste an then() übergebene Funktion auf und führt sie aus. Die Facebook-Benutzerdaten werden als Argument an diese Funktion übergeben, aber das einzige, was wir benötigen, ist das Zugriffstoken. Wir können dies später verwenden, um Anfragen an die Graph API von Facebook zu richten, um zusätzliche Informationen zu erhalten.

Als Nächstes senden wir eine Abfrage an die Firebase-Datenbank, um zu überprüfen, ob der Benutzer bereits vorhanden ist oder nicht. Dazu verwenden wir die query()-Methode. Dies akzeptiert die Funktion, die ausgeführt werden soll, wenn eine Antwort als erstes Argument zurückgegeben wird. Das zweite Argument ist der Pfad, in dem die Abfrage ausgeführt wird, und das dritte ist die Abfrage selbst.

Wenn der Benutzer bereits vorhanden ist, gibt query() die Daten des Benutzers zurück. Anschließend speichern wir die Daten lokal mithilfe der Anwendungseinstellungen. Wir müssen später auf diese Daten zugreifen, wenn wir auf Änderungen des Authentifizierungsstatus warten und wenn wir die letzte Laufsitzung des Benutzers auf Firebase aktualisieren.

Erstellen Sie einen neuen Benutzer

Fügen wir nun den Code zum Speichern der Daten für einen neuen Benutzer hinzu. Erstellen Sie zunächst das Objekt, das die Benutzerdaten enthält. Fordern Sie anschließend bei der Grafik-API von Facebook die Facebook-ID des Benutzers an (die nur für diese spezielle App gültig ist).

Später werden wir diese ID verwenden, um zu überprüfen, ob ein bestimmter Firebase-Benutzer ein Freund des aktuellen Benutzers ist. Firebase gibt diese ID nicht zurück, wenn Sie sich anmelden. Aus diesem Grund müssen wir eine separate Anfrage stellen.

Sobald eine Antwort zurückgegeben wird, verwenden wir die push()-Methode von Firebase, um die Daten des Benutzers im Pfad /users zu speichern. Dies gibt den Schlüssel zurück, der als ID für diesen bestimmten Benutzer dient. Wir werden es später verwenden, um die letzte Laufsitzung des Benutzers zu aktualisieren. Aus diesem Grund müssen wir es auch lokal zusammen mit den Benutzerdaten und dem Facebook-Zugriffstoken speichern.

Nachdem wir den Code zum Anmelden eines Benutzers hinzugefügt haben, müssen Sie im nächsten Schritt zum Aufruf firebase.init() zurückkehren und onAuthStateChanged hinzufügen. Diese Funktion wird jedes Mal ausgeführt, wenn sich der Authentifizierungsstatus ändert (wenn sich ein Benutzer anmeldet oder abmeldet). Wenn ein Benutzer angemeldet ist, möchten wir die Benutzeroberfläche aktualisieren, um den aktuellen Benutzer anzuzeigen.

Beachten Sie, dass wir es mit einer Verzögerung von fünf Sekunden in setTimeout() verpacken, da es nach dem Anmelden einige Sekunden dauert, bis die Benutzerdaten (Firebase-Benutzerschlüssel, Firebase-Benutzer und Facebook-Zugriffstoken) verfügbar sind.

Als nächstes fügen wir den Code hinzu, um die Freunde des Benutzers zu erhalten. Die Diagramm-API gibt die ID und den Namen für jeden Freund des Benutzers zurück, wir benötigen jedoch nur die IDs. Wir müssen auch die ID für den aktuellen Benutzer verschieben, da wir sie auch in der Bestenliste anzeigen werden.

Anzeigen der Rangliste

Fügen Sie als Nächstes den Code hinzu, um auf Änderungen in der Datenbank zu warten. Bis jetzt haben wir den "Echtzeit"-Teil dieser App nicht wirklich implementiert. Dies ist die Zeit, in der wir es endlich hinzufügen.

Dazu verwenden wir die Methode addValueEventListener(). Dies akzeptiert die Funktion, die Sie ausführen möchten, wenn der als zweites Argument angegebene Pfad geändert wird. Der gesamte Wert (result) wird als Argument an diese Funktion übergeben.

Es gibt wirklich keine Funktionalität, um eine Abfrage anzugeben, um das Ergebnis nur nach bestimmten IDs zu filtern. Mit dem Array von Freund-IDs (friends_ids) durchlaufen wir das result und prüfen, ob die aktuelle Zeile der aktuelle Benutzer oder einer ihrer Freunde ist. Erst dann verschieben wir den Wert für die aktuelle Zeile. Von dort aus sortieren und formatieren wir einfach die Daten für die Anzeige in der Benutzeroberfläche.

Aktualisieren der letzten Laufsitzung

Wenn der Benutzer aufhört, seinen aktuellen Standort zu verfolgen, aktualisieren wir distance und steps des Benutzers in Firebase:

Abmelden des Benutzers

Fügen Sie als Nächstes den Code zum Abmelden des Benutzers hinzu. Dadurch wird die Benutzeroberfläche auf einen Zustand zurückgesetzt, in dem der Benutzer nicht angemeldet ist, und die lokalen Daten werden gelöscht.

Hinzufügen der Stile

Öffnen Sie abschließend die Datei app/app.css und fügen Sie unter dem vorhandenen Code Folgendes hinzu:

Schlussfolgerung

Das ist es! In diesem Tutorial haben Sie gelernt, wie Sie Facebook-Login und Firebase in eine NativeScript-App integrieren. Wie Sie vielleicht in der Dokumentation zum NativeScript Firebase-Plugin bemerkt haben, können Sie mit diesem Plugin noch viel mehr tun. Tatsächlich werden wir die Cloud Messaging-Funktion verwenden, um die letzte Funktion für diese App zu implementieren: Push-Benachrichtigungen. Also bleibt dran!

In der Zwischenzeit können Sie auch einige unserer anderen Beiträge zu NativeScript und plattformübergreifenden mobilen Apps lesen!

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.