Wie erstelle ich eine React Native App mit Firebase? (Teil 1)

Aktualisiert am 11. Mai: Schritt 5 (CRUD) hinzugefügt.

Beachten Sie, dass in diesem Lernprogramm davon ausgegangen wird, dass Sie über JavaScript oder React Native verfügen. In diesem Lernprogramm werden nicht alle Codezeilen erläutert. Stattdessen wird der Code angezeigt, und Sie erhalten einen Überblick über die Funktionsweise des Codes Code. Ich habe den Code so einfach wie möglich gemacht. Wenn Sie Fragen haben, zögern Sie bitte nicht, einen Kommentar zu hinterlassen.

In diesem Tutorial erstellen wir eine React Native-App, die Firebase-Authentifizierungs- und Echtzeitdatenbankdienste verwendet. Weitere Informationen zu Firebase finden Sie unter diesem Link.

Bis zum Ende von Teil 4 hätten wir das gebaut. [Facebook-Login wird in GIF nicht angezeigt].

Demo

Nun, da wir das aus dem Weg geräumt haben, LASS DIE CODIERUNG BEGINNEN!

Schritt 0: Registrieren Sie unsere App bei Firebase und Facebook

Facebook
Folgen Sie den Anweisungen unter diesem Link, um Ihre App zu registrieren und für die Facebook-Integration einzurichten. Befolgen Sie die Anweisungen für die Expo-Client-App.

Feuerbasis
Um ein neues Firebase-Projekt zu erstellen, rufen Sie Ihre Firebase-Konsole auf, klicken Sie auf "Projekt hinzufügen", geben Sie den Namen Ihres Projekts ein und wählen Sie Ihre Region aus.

Aktivieren Sie die Facebook-Anmeldung: (entnommen aus https://firebase.google.com/docs/auth/ios/facebook-login)

  1. Öffnen Sie in der Firebase-Konsole den Abschnitt Authentifizierung.
  2. Aktivieren Sie auf der Registerkarte Anmeldemethode die Facebook-Anmeldemethode und geben Sie die App-ID und das App-Geheimnis an, die Sie von Facebook erhalten haben.
  3. Stellen Sie dann sicher, dass Ihr OAuth-Weiterleitungs-URI (z. B. my-app-12345.firebaseapp.com/__/auth/handler) auf der Einstellungsseite Ihrer Facebook-App auf der Facebook for Developers-Website im Produkt als einer Ihrer OAuth-Weiterleitungs-URIs aufgeführt ist Einstellungen> Facebook Login config.
  4. Klicken Sie auf der Einstellungsseite Ihrer Facebook-App auf "Produkt hinzufügen", wählen Sie das Produkt "Facebook-Anmeldung" aus und klicken Sie auf "Einrichten".
  5. Klicken Sie links unter Facebook-Login auf "Einstellungen" und fügen Sie Ihren OAuth-Weiterleitungs-URI zu den gültigen OAuth-Weiterleitungs-URIs Ihrer App hinzu

Wählen Sie auf der linken Seite „Projektübersicht“ und klicken Sie auf dem Startbildschirm auf den Link „Firebase zu Ihrer Web-App hinzufügen“. Notieren Sie sich das Konfigurationsobjekt, das später in unserer App-Konfigurationsdatei verwendet wird.

Schritt 1: Erste Schritte

Wenn Sie zum ersten Mal eine React Native-App erstellen, stellen Sie sicher, dass Node, npm oder yarn installiert sind. Für dieses Projekt verwende ich Garn und die App create-react-native, die als einfachste Methode zum Erstellen einer neuen React Native-App bezeichnet wurde.

Die Verwendung von CRNA bietet viele Vorteile. Zum einen können Sie ein Projekt starten, ohne Tools zum Erstellen von nativem Code installieren oder konfigurieren zu müssen. Dazu ist keine Xcode- oder Android Studio-Installation erforderlich, und Sie können die Expo-App auf Ihrem iOS- oder Android-Telefon installieren testen.

Bevor wir beginnen, müssen wir das Befehlszeilendienstprogramm create-react-native-app mit npm oder yarn global installieren.

Öffnen Sie Ihr Terminal und führen Sie einen der folgenden Befehle aus, je nachdem, ob Sie npm oder yarn verwenden.

$ npm install -g erstelle-reagiere-native-App
  # oder
$ yarn global addiere erstelle-reagiere-native-App

Nach der Installation von CRNA können wir ein neues Projekt erstellen, indem wir den folgenden Befehl ausführen:

$ create-react-native-app firebase-auth-app
$ cd firebase-auth-app /

Schritt 2: Installieren Sie Abhängigkeiten

Wir werden die folgenden Pakete verwenden:

  • Redux zur Verwaltung des App-Status
  • React-Redux wird verwendet, um die Komponenten unserer App mit dem Redux-Store zu verbinden.
  • Redux Thunk ist eine Middleware für Redux, mit der wir Aktionsersteller schreiben können, die eine Funktion anstelle einer Aktion zurückgeben.
  • Reagieren Sie auf native Elemente wie in unserem UI-Toolkit.
  • Reagieren Sie auf Native Router Flux für unsere Apps-Navigation,
  • Axios, ein versprochener HTTP-Client zum Aufrufen unserer API
  • React Native Redux Listener, ein Redux-Store-Enhancer, der häufig auftretende React Native-Ereignisse auslöst. Wir werden dieses Paket verwenden, um Änderungen in unserer Netzwerkverbindung zu erkennen
  • Native Loading Spinner Overlay reagieren
  • Moment.js
  • Eingeborenes Laden des Tastatur-Abstandhalters reagieren

und natürlich

  • Feuerbasis

Bevor wir fortfahren, führen Sie den folgenden Befehl aus, um die App zu testen. Dadurch wird ein Entwicklungsserver für Sie gestartet und ein QR-Code in Ihrem Terminal gedruckt. Wenn Sie die Expo-App verwenden, können Sie den QR-Code scannen.

$ Fadenanfang

In Teil 2 erstellen wir das App-Verzeichnis, Redux-Aktionen, Reduzierungen und APIs.

Das war's Leute!

Verwandte Tutorials

  1. Tutorial 1: Reagieren Sie mit Native Redux Boilerplate
  2. Tutorial 2: Reagieren Sie mit CRUD-Operationen auf Native Redux
  3. Wie erstelle ich eine React Native App mit Firebase? (Teil 2) (Backend)
  4. Wie erstelle ich eine React Native App mit Firebase? (Teil 3) (Frontend)
  5. Wie erstelle ich eine React Native App mit Firebase? (Teil 4) (Facebook Login)
  6. Wie erstelle ich eine React Native App mit Firebase? (Teil 5) (CRUD)

Andere Tutorials

  1. Lernprogramm 4: Erstellen einer Laravel 5.4-Authentifizierungs-API für mobile Anwendungen mit JWT
  2. Lernprogramm 5: Erstellen einer Laravel 5.4-JWT-Authentifizierungs-API mit E-Mail-Überprüfung
  3. Lernprogramm 6 und 7: Erstellen eines Laravel 5.4-Verwaltungsmoduls mit rollenbasierten Berechtigungen mithilfe des Entrust-Pakets