Primeros pasos con base de fuego

Agregue Firebase a su proyecto de Android

Aquí los pasos necesarios para crear un proyecto de Firebase y conectarse con una aplicación de Android.

Agregue Firebase a su aplicación

  1. Cree un proyecto de Firebase en Firebase console y haga clic en Crear nuevo proyecto.

  2. Haga clic en Agregar Firebase a su aplicación de Android y siga los pasos de configuración.

  3. Cuando se le solicite, ingrese el nombre del paquete de su aplicación. Es importante ingresar el nombre del paquete que usa su aplicación; esto solo se puede configurar cuando agrega una aplicación a su proyecto de Firebase.

  4. Para agregar el certificado de firma de depuración SHA1, que es requerido para Dynamic Links, Invites y Google Sign-In support en Auth, vaya a su proyecto en Android Studio, haga clic en la pestaña Gradle en el lado derecho de su ventana, haga clic en el botón Actualizar, vaya a proyecto (raíz) -> Tareas -> android -> signingReport. Esto generará MD5 y SHA1 ambos en la pestaña Ejecutar. Copie y pegue SHA1 en la consola de base de fuego.

  5. Al final, descargará un archivo google-services.json. Puede volver a descargar este archivo en cualquier momento.

  6. Si aún no lo ha hecho, cópielo en la carpeta del módulo de su proyecto, normalmente app/.

El siguiente paso es agregar el SDK para integrar las bibliotecas de Firebase en el proyecto.

Agregar el SDK

Para integrar las bibliotecas de Firebase en uno de sus propios proyectos, debe realizar algunas tareas básicas para preparar su proyecto de Android Studio. Es posible que ya haya hecho esto como parte de la adición de Firebase a su aplicación.

  1. Agregue reglas a su archivo build.gradle de nivel raíz, para incluir el complemento de servicios de Google:

    buildscript { // … dependencies { // … classpath ‘com.google.gms:google-services:3.0.0’ } }

Luego, en el archivo Gradle de su módulo (generalmente app/build.gradle), agregue la línea de aplicación del complemento en la parte inferior del archivo para habilitar el complemento 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'

El paso final es agregar las dependencias para el SDK de Firebase usando uno o más bibliotecas disponibles para las diferentes funciones de Firebase.

Línea de dependencia de Gradle Servicio
com.google.firebase:firebase-core:9.4.0 Analítica
com.google.firebase:firebase-database:9.4.0 Base de datos en tiempo real
com.google.firebase:firebase-almacenamiento:9.4.0 Almacenamiento
com.google.firebase:firebase-crash:9.4.0 Informes de accidentes
com.google.firebase:firebase-auth:9.4.0 Autenticación
com.google.firebase:firebase-messaging:9.4.0 Mensajería en la nube/Notificaciones
com.google.firebase:firebase-config:9.4.0 Configuración remota
com.google.firebase:firebase-invites:9.4.0 Invitaciones / Enlaces Dinámicos
com.google.firebase:firebase-ads:9.4.0 AdMob
com.google.android.gms:play-services-appindexing:9.4.0 Indexación de aplicaciones

Configuración de Firebase para IOS

  1. En primer lugar, desea ir al panel de Firebase y crear un nuevo proyecto usando el botón ‘Crear nuevo proyecto’.

Crear página de proyecto

  1. Desea crear un nuevo proyecto agregando el nombre de su aplicación, por ejemplo, puse el mío como ‘Nombre de la aplicación genial’, luego elija su región y presione ‘Crear proyecto’

Creando proyecto

  1. Después de crear el proyecto, se lo dirigirá a esta página, que es el panel de control y desde aquí, debe elegir una plataforma en la que desea instalar Firebase. Para este ejemplo, elegiremos IOS.

ingrese la descripción de la imagen aquí

  1. Después de seleccionar IOS, debería ver la misma ventana emergente que la de la imagen a continuación solicitando el paquete IOS y la identificación de la tienda de aplicaciones. Solo deberá proporcionar el paquete IOS porque nuestra aplicación aún no está en la tienda de aplicaciones.

Agregar proyecto a la plataforma

  1. Obtenga la identificación del paquete de xcode después de crear un proyecto de xcode de todos modos, después de eso, puede obtener la identificación del paquete para su aplicación en la vista general de la aplicación en xcode, será el primer campo en la parte superior y una vez que lo obtenga pegar en el campo Bundle en firebase, por ejemplo, el mío sería ‘MauginInc.KIKOO’

Obteniendo identificador de paquete

  1. Después de hacer eso y presionar ‘Siguiente’, se descargará un archivo ‘GoogleService-Info.plist’ y lo que deberá hacer es moverlo a la carpeta raíz de su aplicación dentro de xcode

estructura de carpetas

  1. Querrá inicializar los pods e instalar los pods de firebase que necesite. Para hacerlo, acceda a su terminal y navegue a la carpeta de su proyecto xcode y siga estas instrucciones proporcionadas por firebase.

Inicializar pod e instalar firebase

  1. Finalmente, desea configurar su aplicación para permitir que Swift haga lo que mejor hace y eso hace que el desarrollo de la aplicación sea mucho más fácil y eficiente. Todo lo que necesita hacer es editar sus archivos AppDelegate.swift tal como lo muestra la ventana emergente.

ingrese la descripción de la imagen aquí

Eso es todo lo que ahora tiene instalado firebase en su proyecto xcode para IOS

Introducción a Firebase con una sencilla aplicación web Hello World en JavaScript

Este ejemplo demostrará cómo comenzar con Firebase en sus aplicaciones web con JavaScript.

Agregaremos un texto secundario en nuestra base de datos de Firebase y lo mostraremos en tiempo real en nuestra aplicación web.

Empecemos.

  • Vaya a Firebase Console - https://console.firebase.google.com y cree un nuevo proyecto. Ingrese el nombre del proyecto, País/región y haga clic en crear proyecto. ingrese la descripción de la imagen aquí

  • Ahora crea un archivo index.html en tu computadora. Y añádele el siguiente código.

      <body>
          <p>Getting started with Firebase</p>
          <h1 id="bigOne"></h1>
          <script>
                // your firebase JavaScript code here
          </script>
    
      </body>
    
  • Ahora ve a tu proyecto en Firebase Console y podrás ver esto ingrese la descripción de la imagen aquí

  • Ahora haga clic en Agregar Firebase a su aplicación web. Aparecerá la siguiente ventana emergente, haga clic en el botón Copiar [! [ingrese la descripción de la imagen aquí] 3] 3

  • Ahora ve a tu archivo index.html y agrega el fragmento a la sección del script de la siguiente manera

      <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>
    
  • Ahora ha completado la adición del código de inicialización de Firebase. Ahora necesitamos obtener nuestro valor de texto de la base de datos.

  • Para hacer eso, agregue el siguiente código (Inicializar Firebase ya agregado en el último paso. No volver a agregar) dentro del script en 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>
    
  • Ahora hemos terminado con el archivo index.html y ahora vamos a la Base de datos en Firebase Console.

  • Verás que ahora mismo está en blanco y vacío. Agreguemos un texto secundario en la base de datos y agréguele cualquier valor. ingrese la descripción de la imagen aquí

  • Ahora haga clic en el botón AÑADIR.

  • Ahora ve a la sección REGLAS en la base de datos. ingrese la descripción de la imagen aquí

  • Para fines de desarrollo en este momento, ahora habilitaremos todas las consultas de lectura y escritura.

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

    enter image description here

  • Ahora abra index.html en el navegador

  • Verá el valor del texto en su página de la siguiente manera - ingrese la descripción de la imagen aquí

  • Ahora, si regresa a su base de datos y cambia el valor de text child a otra cosa, verá que el texto en el navegador también cambia sin actualizar ni recargar. Así es como funciona la base de datos en tiempo real en Firebase.