firebase Tutorial
Erste Schritte mit Firebase

Bemerkungen

Versionen

Fügen Sie Firebase zu Ihrem Android-Projekt hinzu

Hier die Schritte, die zum Erstellen eines Firebase-Projekts und zum Herstellen einer Verbindung mit einer Android-App erforderlich sind.

Fügen Sie Firebase Ihrer App hinzu

1. Erstellen Sie ein Firebase-Projekt in der Firebase-Konsole und klicken Sie auf Neues Projekt erstellen .

2. Klicken Sie auf Firebase zu Ihrer Android-App hinzufügen und folgen Sie den Installationsschritten.

3. Wenn Sie dazu aufgefordert werden, geben Sie den Paketnamen Ihrer App ein .
   Es ist wichtig, den Paketnamen einzugeben, den Ihre App verwendet. Dies kann nur eingestellt werden, wenn Sie Ihrem Firebase-Projekt eine App hinzufügen.

4. Um das Debug-Signaturzertifikat SHA1 hinzuzufügen, das für die Unterstützung von Dynamic Links, Invites und Google Sign in Auth erforderlich ist , wechseln Sie zu Ihrem Projekt in Android Studio, klicken Sie auf die Registerkarte Gradle auf der rechten Seite Ihres Fensters, klicken Sie auf die Schaltfläche Refresh , und klicken Sie auf Refresh zu project(root) -> Tasks -> android -> signingReport . Dadurch werden MD5 und SHA1 auf der Registerkarte Run generiert. Kopieren Sie den Einfügen SHA1 in die Firebase-Konsole.

5. Am Ende laden Sie eine google-services.json Datei herunter. Sie können diese Datei jederzeit erneut herunterladen.

6. Wenn Sie dies noch nicht getan haben, kopieren Sie dies in den Modulordner Ihres Projekts, normalerweise app /.

Im nächsten Schritt fügen Sie das SDK hinzu, um die Firebase-Bibliotheken in das Projekt zu integrieren.

Fügen Sie das SDK hinzu

Um die Firebase-Bibliotheken in eines Ihrer eigenen Projekte zu integrieren, müssen Sie einige grundlegende Aufgaben zur Vorbereitung Ihres Android Studio-Projekts ausführen. Möglicherweise haben Sie dies bereits beim Hinzufügen von Firebase zu Ihrer App getan.

1. Fügen Sie der build.gradle Datei build.gradle Regeln build.gradle , um das google-services-Plugin aufzunehmen :

buildscript {
    // ...
    dependencies {
        // ...
        classpath 'com.google.gms:google-services:3.0.0'
    }
}

app/build.gradle dann in Ihrer Modul-Gradle-Datei (normalerweise app/build.gradle ) die app/build.gradle Plugin-Zeile am Ende der Datei hinzu, um das Gradle-Plugin zu aktivieren:

apply plugin: 'com.android.application'

android {
  // ...
}

dependencies {
  // ...
  compile 'com.google.firebase:firebase-core:9.4.0'
}

// ADD THIS AT THE BOTTOM
apply plugin: 'com.google.gms.google-services'

Der letzte Schritt ist das Hinzufügen der Abhängigkeiten für das Firebase-SDK mithilfe einer oder mehrerer Bibliotheken, die für die verschiedenen Firebase-Funktionen verfügbar sind.

Einrichten von Firebase für IOS

1. Zunächst möchten Sie zum Firebase-Dashboard gehen und ein neues Projekt mit der Schaltfläche "Neues Projekt erstellen" erstellen.

2. Sie möchten ein neues Projekt erstellen, indem Sie den Namen Ihrer App hinzufügen. Beispiel: Ich gebe meinen Namen als "Cooler App-Name" ein. Wählen Sie dann Ihre Region aus und klicken Sie auf "Projekt erstellen".

3. Nachdem Sie ein Projekt erstellt haben, werden Sie zu dieser Seite weitergeleitet. Dies ist das Dashboard. Von hier aus müssen Sie eine Plattform auswählen, auf der Sie Firebase installieren möchten. In diesem Beispiel wählen Sie IOS.

4. Nachdem Sie IOS ausgewählt haben, sollten Sie dasselbe Popup-Fenster wie das folgende Bild sehen, in dem Sie nach dem IOS-Bundle und der App Store-ID gefragt werden. Sie müssen nur das IOS-Bundle bereitstellen, da sich unsere App noch nicht im App Store befindet.

5. Holen Sie sich die Bundle-ID von xcode, nachdem Sie ein Xcode-Projekt erstellt haben, und Sie können die Bundle-ID für Ihre Anwendung in der App Genral-Ansicht in xcode abrufen. Es wird das erste Feld oben sein, und wenn Sie sie erhalten, fügen Sie sie ein das Bundle-Feld in der Firebase zum Beispiel meins wäre "MauginInc.KIKOO"

6. Nachdem Sie dies getan und auf "Weiter" geklickt haben, wird eine "GoogleService-Info.plist" -Datei heruntergeladen. Sie müssen diese Datei in den Stammordner Ihrer App innerhalb von xcode verschieben

7. Sie müssen die Pods initialisieren und die Firebase-Pods installieren, die Sie benötigen. Sie können dies tun, indem Sie in Ihr Terminal gehen und zu Ihrem xcode-Projektordner navigieren und diesen Anweisungen von Firebase folgen.

8. Schließlich möchten Sie Ihre App so konfigurieren, dass swift das macht, was sie am besten kann, und die App-Entwicklung dadurch wesentlich einfacher und effizienter wird. Alles, was Sie tun müssen, ist, Ihre AppDelegate.swift-Dateien so zu bearbeiten, wie Sie es im Popup-Fenster sehen.

Das ist alles, was Sie jetzt in Ihrem Xcode-Projekt für IOS mit Firebase installiert haben

Erste Schritte in Firebase mit einer einfachen Hello World-Web-App in JavaScript

Dieses Beispiel zeigt, wie Sie Firebase in Ihren Webanwendungen mit JavaScript starten können.

Wir werden ein Text-Kind in unsere Firebase-Datenbank aufnehmen und es in Echtzeit in unserer Web-App anzeigen.

Lass uns anfangen.

• Wechseln Sie zur Firebase Console - https://console.firebase.google.com, und erstellen Sie ein neues Projekt. Geben Sie den Projektnamen, Land / Region ein und klicken Sie auf Projekt anlegen.

• Erstellen Sie nun eine Datei index.html auf Ihrem Computer. Fügen Sie den folgenden Code hinzu.

    <body>
        <p>Getting started with Firebase</p>
        <h1 id="bigOne"></h1>
        <script>
              // your firebase JavaScript code here
        </script>
  
    </body>
  

• Gehen Sie jetzt zu Ihrem Projekt in der Firebase Console und Sie können dies sehen

• Klicken Sie nun auf Firebase zu Ihrer Web-App hinzufügen . Sie werden im folgenden Popup-Fenster auf die Schaltfläche "Kopieren" klicken

• Gehen Sie nun zu Ihrer index.html- Datei und fügen Sie das Skriptausschnittstück wie folgt hinzu

    <body>
  
      <p>Getting started with Firebase</p>
      <h1 id="bigOne"></h1>
  
      <script src="https://www.gstatic.com/firebasejs/3.7.4/firebase.js"></script>
      <script>
        // Initialize Firebase
        var config = {
          apiKey: "apiKey",
          authDomain: "authDomain",
          databaseURL: "databaseURL",
          storageBucket: "storageBucket",
          messagingSenderId: "messagingSenderId"
        };
        firebase.initializeApp(config);
      </script>
    </body>
  

• Sie haben nun den Firebase-Initialisierungscode hinzugefügt. Jetzt müssen wir unseren Textwert aus der Datenbank erhalten.

• Fügen Sie dazu den folgenden Code (Initialize Firebase, der bereits im letzten Schritt hinzugefügt wurde. Nicht erneut hinzufügen) in das Skript in index.html ein

    <script>
  
        // Initialize Firebase
        var config = {
          apiKey: "apiKey",
          authDomain: "authDomain",
          databaseURL: "databaseURL",
          storageBucket: "storageBucket",
          messagingSenderId: "messagingSenderId"
        };
        firebase.initializeApp(config);
    
        // getting the text value from the database
        var bigOne = document.getElementById('bigOne');
        var dbRef = firebase.database().ref().child('text');
        dbRef.on('value', snap => bigOne.innerText = snap.val());
  
    </script>
  

• Jetzt sind wir mit der Datei index.html fertig und jetzt gehen wir zur Datenbank in Firebase Console.

• Sie werden jetzt sehen, dass es leer und leer ist. Lässt ein untergeordnetes Textelement in der Datenbank hinzufügen und ihm einen beliebigen Wert hinzufügen.

• Klicken Sie nun auf die Schaltfläche HINZUFÜGEN .

• Gehen Sie nun zum Abschnitt REGELN in der Datenbank.

• Zu Entwicklungszwecken werden wir jetzt alle Lese- und Schreibanfragen aktivieren.

    {
      "rules": {
          ".read": "true",
          ".write": "true"
        }
    }
  

  

• Öffnen Sie jetzt index.html im Browser

• Sie sehen den Textwert auf Ihrer Seite wie folgt:
  

• Wenn Sie jetzt zu Ihrer Datenbank zurückkehren und den untergeordneten Textwert in einen anderen Wert ändern, werden Sie feststellen, dass sich der Text im Browser auch ohne Aktualisierung oder Neuladen ändert. So funktioniert die Echtzeitdatenbank in Firebase.