Premiers pas avec Firebase

Ajoutez Firebase à votre projet Android #

Voici les étapes nécessaires pour créer un projet Firebase et se connecter avec une application Android.

Ajoutez Firebase à votre application #

1. Créez un projet Firebase dans la [console Firebase][1] et cliquez sur Créer un nouveau projet.

2. Cliquez sur Ajouter Firebase à votre application Android et suivez les étapes de configuration.

3. Lorsque vous y êtes invité, saisissez le nom du package de votre application. Il est important d’entrer le nom du package utilisé par votre application ; cela ne peut être défini que lorsque vous ajoutez une application à votre projet Firebase.

4. Pour ajouter le certificat de signature de débogage SHA1 qui est ** requis pour la prise en charge des liens dynamiques, des invitations et de la connexion Google dans Auth, ** accédez à votre projet dans Android Studio, cliquez sur l’onglet “Gradle” sur le côté droit de votre fenêtre, cliquez sur le bouton Refresh, allez dans project(root) -> Tasks -> android -> signingReport. Cela générera ** MD5 ** et ** SHA1 ** dans l’onglet “Exécuter”. Copiez-collez SHA1 dans la console firebase.

5. À la fin, vous téléchargerez un fichier google-services.json. Vous pouvez télécharger à nouveau ce fichier à tout moment.

6. Si vous ne l’avez pas déjà fait, copiez-le dans le dossier du module de votre projet, généralement app/.

L’étape suivante consiste à ajouter le SDK pour intégrer les bibliothèques Firebase dans le projet.

Ajouter le SDK #

Pour intégrer les bibliothèques Firebase dans l’un de vos propres projets, vous devez effectuer quelques tâches de base pour préparer votre projet Android Studio. Vous l’avez peut-être déjà fait dans le cadre de l’ajout de Firebase à votre application.

1. Ajoutez des règles à votre fichier “build.gradle” de niveau racine, pour inclure le plugin Google-services :

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

Ensuite, dans le fichier Gradle de votre module (généralement app/build.gradle), ajoutez la ligne apply plugin en bas du fichier pour activer le plugin Gradle :

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'

La dernière étape consiste à ajouter les dépendances pour le SDK Firebase en utilisant un ou plusieurs bibliothèques disponibles pour les différentes fonctionnalités de Firebase.

[1] : https://firebase.google.com/console/ [2] : https://support.google.com/firebase/answer/7015592

Configurer Firebase pour IOS #

1. Tout d’abord, vous souhaitez accéder au tableau de bord Firebase et créer un nouveau projet à l’aide du bouton “Créer un nouveau projet”.

[![Créer une page de projet][1]][1]

2. Vous souhaitez créer un nouveau projet en ajoutant le nom de votre application par exemple je mets le mien comme ‘Cool app name’ puis choisissez votre région et appuyez sur ‘Create Project’

[![Création du projet][2]][2]

3. Après avoir créé le projet, vous serez dirigé vers cette page qui est le tableau de bord et à partir de là, vous devez choisir une plate-forme sur laquelle vous souhaitez installer Firebase. Pour cet exemple, nous choisirons IOS.

[![entrez la description de l’image ici][3]][3]

4. Après avoir sélectionné IOS, vous devriez voir la même fenêtre contextuelle que celle de l’image ci-dessous demandant le bundle IOS et l’identifiant de l’App Store. Vous n’aurez qu’à fournir le bundle IOS car notre application n’est pas encore sur l’App Store.

[![Ajouter un projet à la plateforme][4]][4]

5. Obtenez l’ID de bundle de xcode après avoir créé un projet xcode comme vous le feriez habituellement après cela, vous pouvez obtenir l’id de bundle pour votre application sur la vue générale de l’application dans xcode, ce sera le premier champ en haut et une fois que vous l’obtiendrez, collez-le dans le champ Bundle de firebase, par exemple, le mien serait ‘MauginInc.KIKOO’

[![Obtenir l’identifiant du bundle][5]][5]

6. Après avoir fait cela et appuyé sur “Suivant”, un fichier “GoogleService-Info.plist” sera téléchargé et ce que vous devrez faire est de le déplacer dans le dossier racine de votre application dans xcode

[![structure des dossiers][6]][6]

7. Vous voudrez initialiser les pods et installer les pods firebase dont vous avez besoin pour cela en accédant à votre terminal et en naviguant jusqu’à votre dossier de projet xcode et en suivant ces instructions données par firebase.

[![Initialiser le pod et installer Firebase][7]][7]

8. Enfin, vous souhaitez configurer votre application pour laisser Swift faire ce qu’elle fait le mieux, ce qui rend le développement d’applications beaucoup plus simple et efficace. Tout ce que vous avez à faire est de modifier vos fichiers AppDelegate.swift de la même manière que la fenêtre contextuelle vous montre.

[![entrez la description de l’image ici][8]][8]

[1] : http://i.stack.imgur.com/54Gai.png [2] : http://i.stack.imgur.com/bHBZe.png [3] : http://i.stack.imgur.com/s89CX.png [4] : http://i.stack.imgur.com/4BOxn.png [5] : http://i.stack.imgur.com/RD9ic.png [6] : http://i.stack.imgur.com/dSWoA.png [7] : http://i.stack.imgur.com/Td9ho.png [8] : http://i.stack.imgur.com/oqSPQ.png

** C’est tout ce que vous avez maintenant Firebase installé dans votre projet xcode pour IOS **

Premiers pas dans Firebase avec une simple application Web Hello World en JavaScript #

Cet exemple montre comment démarrer avec Firebase dans vos applications Web avec JavaScript.

Nous allons ajouter un enfant de texte dans notre base de données Firebase et l’afficher en temps réel sur notre application Web.

Commençons. #

• Accédez à la console Firebase - https://console.firebase.google.com et créez un nouveau projet. Saisissez le nom du projet, le pays/la région et cliquez sur créer un projet. [![entrez la description de l’image ici][1]][1]

• Créez maintenant un fichier index.html sur votre ordinateur. Et ajoutez-y le code suivant.

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

• Allez maintenant dans votre projet sur Firebase Console et vous pouvez voir ceci [![entrez la description de l’image ici][2]][2]

• Cliquez maintenant sur Ajouter Firebase à votre application Web. La fenêtre contextuelle suivante s’affiche, cliquez sur le bouton de copie [![entrez la description de l’image ici][3]][3]

• Allez maintenant dans votre fichier index.html et ajoutez l’extrait de code à la section de script comme suit

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

• Vous avez maintenant terminé d’ajouter le code d’initialisation de Firebase. Nous devons maintenant obtenir notre valeur text à partir de la base de données.

• Pour ce faire, ajoutez le code suivant (Initialize Firebase déjà ajouté à la dernière étape. Ne rajoutez pas) à l’intérieur du script dans ** 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>
  

• Nous avons maintenant terminé avec le fichier index.html et allons maintenant dans la base de données dans la console Firebase.

• Vous verrez que c’est vide et vide en ce moment. Ajoutons un texte enfant dans la base de données et ajoutons-lui n’importe quelle valeur. [![entrez la description de l’image ici][4]][4]

• Cliquez maintenant sur le bouton AJOUTER.

• Allez maintenant dans la section RULES de la base de données. [![entrez la description de l’image ici][5]][5]

• À des fins de développement, nous allons maintenant activer toutes les requêtes lecture et écriture.

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

  [![enter image description here][6]][6]

• Ouvrez maintenant index.html dans le navigateur

• Vous verrez la valeur du texte sur votre page comme suit - [![entrez la description de l’image ici][7]][7]

• Maintenant, si vous revenez à votre base de données et modifiez la valeur text child en autre chose, vous verrez que le texte dans le navigateur change également sans rafraîchissement ni rechargement. Voici comment fonctionne la base de données en temps réel sur Firebase.

[1] : https://i.stack.imgur.com/R1ogK.png [2] : https://i.stack.imgur.com/4Rnwv.png [3] : https://i.stack.imgur.com/ckbS0.png [4] : https://i.stack.imgur.com/RHRrW.jpg [5] : https://i.stack.imgur.com/Vmuvo.png [6] : https://i.stack.imgur.com/nyYrf.png [7] : https://i.stack.imgur.com/9eCVP.png