notifications Notificaciones

Marcar todas como leídas

Ver más

lightbulb_outline

Conectar Firebase con tu app de JavaScript

timer 3 Min.

remove_red_eye 1966

calendar_today 26/10/19

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.

Otros artículos del blog

Comunidad