arrow_back Volver
Inicio keyboard_arrow_right Artículos keyboard_arrow_right Artículo

Conectar Firebase con tu app de JavaScript

Eduardo Ismael Garcia

Full Stack Developer at Código Facilito.

av_timer 3 Min. de lectura

remove_red_eye 11485 visitas

calendar_today 26 Octubre 2019

Firebase es sin duda una de las plataformas más utilizadas para el desarrollo de aplicaciones web y aplicaciones móviles, y no es de extrañarse, firebase nos provee de una gran cantidad de herramientas pensadas para agilizar el proceso de desarrollo, herramientas tales como.

  • Base de datos en tiempo real.
  • Hosting.
  • Autenticación.
  • Almacenamiento.
  • Pruebas.
  • Notificaciones .

Solo por mencionar algunas.

Es por ello que en esta ocasión aprenderemos a integrar firebase a nuestro sitio web. Para este tutorial estaremos trabajando con una base de datos en tiempo real, una base de datos no SQL.

Bien, una vez dicho esto comencemos.😺

Integración

Lo primero que debemos hacer es registrar nuestra aplicación en Firebase. Para ello haremos uso de la consola.

Una vez la aplicación haya sido creada, el siguiente paso será definir en que plataforma estaremos trabajando. Entre las opciones que firebase nos ofrece encontramos.

  • iOS
  • Android
  • Web
  • Unity

En mi caso selecciono Web.

Al seleccionar la plataforma se nos desplegará un pequeño formulario en donde debemos para nombrar nuestra app.

Una vez la app haya sido nombrada, Firebase desplegará el siguiente código.

El código contiene las credenciales necesarias para poder comunicar nuestra aplicación con los servidores de google.

No te preocupes por mis credenciales, una vez el tutorial haya finalizado daré de baja mi aplicacion, sin embargo te recomiendo que tú almacenes estos valores en lugares seguros, quizás en variables de entorno.

Copiamos y pegamos en nuestro proyecto.

<html>
    <head>  
        <title>Demo Firebase</title>
    </head>

    <body>
        <h1>Hola mundo</h1>
    </body>

   <script src="https://www.gstatic.com/firebasejs/6.2.0/firebase-app.js"></script>
    <script src="https://www.gstatic.com/firebasejs/3.1.0/firebase-database.js"></script>

<script>
  var firebaseConfig = {
    apiKey: "AIzaSyB06AeKYfM87iXIxRBcVN7qbuQO4GxNF9I",
    authDomain: "tutorialhack.firebaseapp.com",
    databaseURL: "https://tutorialhack.firebaseio.com",
    projectId: "tutorialhack",
    storageBucket: "tutorialhack.appspot.com",
    messagingSenderId: "928513800302",
    appId: "1:928513800302:web:d7150e01c2541ab7550e7f"
  };
  firebase.initializeApp(firebaseConfig);
</script>

</html>

En este caso como estaremos trabajando con una base de datos en tiempo real será necesario importar la siguiente biblioteca.

<script src="https://www.gstatic.com/firebasejs/3.1.0/firebase-database.js"></script>

El siguiente que debemos hacer es crear y dar permisos a nuestra base de datos. Para ello hacemos clic en la opción database del menú lateral izquierdo.

Seleccionamos la opción Realtime Database y modificamos sus reglas, permitiendo la lectura y escrituras por parte de aplicaciones externas. Colocamos read y write como verdadero.

Listo, una vez hecho todo esto ya seremos capas de interactuar con nuestra base de datos desde nuestra aplicación web.

Qué les parece si insertamos un nuevo objeto.

var article_id = 1;
    var article = {
            'title': 'Conectar Firebase con tu app de JavaScript',
    }

    firebase.database().ref('articles/' + article_id).set(article);

Ahora obtengamos dicho elemento.

firebase.database().ref('articles/' + article_id).once('value').then(
        function(snapshot){
                var title = snapshot.val().title;
                console.log(title);
        }
)

Si deseas sacarle el máximo provecho a tu base de datos en tiempo real te invito, encarecidamente, que le heches un vistaso a la documentación oficial de firebase, es buena, te la recomiendo.

Aumenta tu productividad con GitHub Copilot

  • done Curso GRATUITO
  • done Regístrate antes del 31 de Marzo
  • done Obtén una ventaja competitiva
  • done Aprovecha la IA a tu favor
Más información