firebase Zelfstudie
Aan de slag met firebase

Opmerkingen

versies

Voeg Firebase toe aan uw Android-project

Hier de stappen die nodig zijn om een Firebase-project te maken en verbinding te maken met een Android-app.

Voeg Firebase toe aan uw app

1. Maak een Firebase-project in de Firebase-console en klik op Nieuw project maken .

2. Klik op Firebase toevoegen aan uw Android-app en volg de installatiestappen.

3. Voer desgevraagd de pakketnaam van uw app in .
   Het is belangrijk om de pakketnaam in te voeren die uw app gebruikt; dit kan alleen worden ingesteld wanneer u een app toevoegt aan uw Firebase-project.

4. Om certificaat voor foutopsporing SHA1 toe te voegen dat vereist is voor ondersteuning van Dynamic Links, Invites en Google Sign-In in Auth, gaat u naar uw project in Android Studio, klikt u op het tabblad Gradle aan de rechterkant van uw venster, klikt u op de knop Refresh , gaat u naar project(root) -> Tasks -> android -> signingReport . Dit genereert MD5 en SHA1 beide op het tabblad Run . Kopieer en plak SHA1 in firebase console.

5. Op het einde download je een google-services.json bestand. U kunt dit bestand op elk gewenst moment opnieuw downloaden.

6. Als u dit nog niet hebt gedaan, kopieert u dit naar de modulemap van uw project, meestal app /.

De volgende stap is het toevoegen van de SDK om de Firebase-bibliotheken in het project te integreren.

Voeg de SDK toe

Om de Firebase-bibliotheken in een van uw eigen projecten te integreren, moet u enkele basistaken uitvoeren om uw Android Studio-project voor te bereiden. Mogelijk hebt u dit al gedaan als onderdeel van het toevoegen van Firebase aan uw app.

1. Voeg regels toe aan uw root-level build.gradle bestand om de plug-in google-services op te nemen :

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

Voeg vervolgens in uw module Gradle-bestand (meestal de app/build.gradle ) de regel voor de plug-in toepassen onderaan het bestand toe om de plug-in app/build.gradle te schakelen:

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'

De laatste stap is het toevoegen van de afhankelijkheden voor de Firebase SDK met behulp van een of meer beschikbare bibliotheken voor de verschillende Firebase-functies.

Firebase instellen voor IOS

1. Allereerst wilt u naar het firebase-dashboard gaan en een nieuw project maken met de knop 'Nieuw project maken'.

2. U wilt een nieuw project maken door de naam van uw app toe te voegen. Ik zet de mijne bijvoorbeeld als 'Coole app-naam' en kies vervolgens uw regio en druk op 'Create Project'

3. Na het maken van het project wordt u doorgestuurd naar deze pagina, het dashboard en vanaf hier moet u een platform kiezen waarop u firebase wilt installeren. Voor dit voorbeeld kiezen we voor IOS.

4. Na het selecteren van IOS zou je dezelfde pop-up moeten zien als die in de afbeelding hieronder die vraagt om de IOS-bundel en de app store-id. U hoeft alleen de IOS-bundel te verstrekken omdat onze app nog niet in de app store is.

5. Haal de bundel-ID van xcode na het maken van een xcode-project hoe dan ook, daarna kun je de bundel-ID voor je applicatie in de app Genral view in xcode krijgen. Dit is het eerste veld bovenaan en plak het in het bundelveld in vuurbasis, bijvoorbeeld de mijne, is 'MauginInc.KIKOO'

6. Nadat je dat hebt gedaan en op 'Volgende' hebt gedrukt, wordt een 'GoogleService-Info.plist'-bestand gedownload en wat je moet doen is dat naar de hoofdmap van je app te verplaatsen binnen xcode

7. U wilt pods initialiseren en de firebase-pods installeren die u nodig hebt. Doe dit door naar uw terminal te gaan en naar uw xcode-projectmap te navigeren en deze instructies van firebase te volgen.

8. Eindelijk wilt u uw app configureren om Swift te laten doen wat het het beste doet en dat maakt app-ontwikkeling een stuk eenvoudiger en efficiënter. Het enige wat u hoeft te doen is uw AppDelegate.swift-bestanden op dezelfde manier bewerken als in de pop-up.

Dat is alles wat je nu hebt firebase geïnstalleerd in je xcode-project voor IOS

Aan de slag in Firebase met een eenvoudige Hello World-web-app in JavaScript

Dit voorbeeld laat zien hoe u aan de slag kunt met Firebase in uw web-apps met JavaScript.

We gaan naar een tekst kind in onze Firebase Database toe te voegen en weer te geven in real-time op onze web app.

Laten we beginnen.

• Ga naar de Firebase-console - https://console.firebase.google.com en maak een nieuw project. Voer de projectnaam, het land / de regio in en klik op project maken .

• Maak nu een bestand index.html op uw computer. En voeg de volgende code eraan toe.

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

• Ga nu naar je project op Firebase Console en je kunt dit zien

• Klik nu op Firebase toevoegen aan uw web-app . U zult het volgende verschijnen, klik op de knop Kopiëren

• Ga nu naar uw index.html- bestand en voeg het fragment als volgt aan de scriptsectie toe

    <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>
  

• Nu bent u klaar met het toevoegen van Firebase-initialisatiecode. Nu moeten we onze tekstwaarde uit de database halen.

• Voeg hiervoor de volgende code toe (initialiseer Firebase al toegevoegd in de laatste stap. Niet opnieuw toevoegen) in het script in index.html

    <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>
  

• Nu zijn we allemaal klaar met het bestand index.html en laten we nu de database in Firebase-console gaan.

• Je zult zien dat het nu leeg en leeg is. Hiermee voegt u de tekst kind in de database en voeg enige waarde aan.

• Klik nu op de knop TOEVOEGEN .

• Ga nu naar het gedeelte REGELS in de database.

• Voor ontwikkelingsdoeleinden zullen we nu alle lees- en schrijfquery 's inschakelen.

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

  

• Open nu index.html in de browser

• U ziet de tekstwaarde op uw pagina als volgt -
  

• Als u nu teruggaat naar uw database en de waarde van de onderliggende tekst in iets anders wijzigt, ziet u dat de tekst in de browser ook verandert zonder vernieuwen of opnieuw laden. Dit is hoe realtime database werkt op Firebase.