Hola Mundo con Firebase

Firebase es la plataforma para el desarrollo de aplicaciones web y aplicaciones móviles de Google el cual se centra en el desarrollo del Back-End de nuestras aplicaciones con una base de datos en tiempo real, documentación en español y varias librerías que nos facilitan el trabajo de interacción con la base de datos desde app en Android, javascript, IOS, etc. Ademas cuenta con un sistema de autenticación (twitter, facebook, github, correo electronico) y hosting de archivos.

En este post desarrollaremos paso a paso la creación de una cuenta en Firebase hasta el tipico «Hola Mundo» que no puede faltar en los post de introducción a la programación, para terminar implementamos un pequeño código para leer datos de firebase desde una aplicación en lenguaje java.

Necesitamos:

• Cuenta de GMail
• Navegador Web (Chrome o Firefox)
• Insomnia REST Client (opcional)
• Conocimientos sobre JSON

Paso 1: Cuenta en Firebase

Nuestro primer paso es crear una cuenta para Firebase, escribimos https://firebase.google.com en el navegador de tu preferencia e ingresamos a la plataforma con nuestra cuenta de GMail.

Una vez logueados, ingresamos a la consola «IR A LA CONSOLA» donde podremos ver los proyectos que tengamos registrados en Firebase.

Paso 2: Crear un nuevo proyecto

Dentro nuestra consola, presionamos el botón con el signo (+) que dice «Añadir proyecto»

Se despliega una ventana donde ingresaremos los siguientes datos:

• Nombre del Proyecto: «Proyecto Valkyria«
• ID del Proyecto: «proyecto-valkyria«. Se genera automáticamente y es el Identificador Único de tu proyecto, seria similar a tu DNI que te identifica entre todos los habitantes de tu país. Para este ejemplo tuvimos suerte y tanto el Nombre del Proyecto como el ID se parecen y eso es bueno, pero existiendo miles y miles de proyecto te encontraras con casos en que el nombre de proyecto ya existe y por tanto se generan IDs como «proyecto-val123bh-asaas«, pero presionando el icono con forma de lápiz, podrás escribir y personalizar tu propio ID.
• Pais/Región: «Bolivia«. Nada que decir, solo selecciona tu país

Para terminar presiona el botón «CREAR PROYECTO» y espera unos momentos a que termine el proceso de creación. Cuando termine te mostrar el panel de desarrollador por donde podrás navegar por todas las herramientas y opciones con la que cuenta Firebase.

Paso 3: Nuestra Base de Datos

Presiona la opción del menú que dice «Database» y a continuación el botón «EMPEZAR» para desplegar el panel de administración de la Base de Datos JSON

En esta sección podemos distinguir lo siguiente:

• A) El nombre de nuestro proyecto actual, haciendo clic sobre este, podemos cambiar de proyecto.
• B) Por defecto nos encontramos en la pestaña «DATOS» donde podemos interactuar directamente con nuestra datos, veremos un ejemplo más adelante.
• C) A lado de «DATOS» tenemos la pestaña «REGLAS» donde podemos establecer las reglas para la lectura y escritura de nuestra base de datos. Por defecto las reglas de seguridad requieren que los usuarios estén autenticados. Veremos como podemos cambiarlas más adelante.
• D) Es la URL raíz de nuestro proyecto, a partir de este podremos ir navegando por los diferentes datos que tengamos.
• E) Es la raíz de nuestro árbol de datos, aquí los datos se van creando y dividiéndose como las ramas y hojas de un árbol
• F) Finalmente, tenemos un pequeño menú donde las opciones más importantes por el momento son las de Exportar e Importar JSON

Paso 4: Los Datos

Para agregar datos manualmente, nos posicionamos en la raíz y presionamos el botón [+] «Add child«, aparece lo siguiente:

Esta es la sintaxis JSON la cual se divide en Nombre y Valor y se separan por dos puntos «:», es decir:

• Nombre: Es el nombre que identifica un recurso. Si se usaran mas de 2 palabras, de preferencia no usar espacios sino un guion bajo o en su defecto unir las palabras con Mayúsculas (Ej. Mis_Datos, MisDatos)
• Valor: El cual puede ser de tipo numerico, string, boolean, array incluso otro objeto json

Los datos que colocaremos son los siguientes:

• Nombre: Saludo
• Valor: Hola Mundo Cruel!!!

Para grabar los datos, clic en el botón «AÑADIR» y tenemos:

Con ese mismo procedimiento podemos ir agregando más datos, incluso anidados. Inténtalo que echando a perder se aprende 🙂

Paso 5: Lectura de datos y definición de Reglas

Para visualizar los datos usaremos la app Insomnia, si no lo tienes, puedes usar un navegador web como Chrome por ejemplo.

Para crear la URL de nuestro recurso, unimos la URL raíz del proyecto + el nombre del recurso seguido de un «.json», es decir

https://proyecto-valkyria.firebaseio.com/ + Saludo + .json

tenemos:

https://proyecto-valkyria.firebaseio.com/Saludo.json

Ahora, crea una nueva solicitud GET en Insomnia y escribe la URL https://proyecto-valkyria.firebaseio.com/Saludo.json .Presiona el botón «Send» enviar.

Recibimos un mensaje con código 401 unauthorized «Permiso denegado«, es decir que para acceder a los datos debemos estar autenticados en la aplicación. Esto sucede porque al crear la app de Firebase por defecto se establece las reglas de seguridad que no permiten la lectura y escritura a usuarios anónimos.

Podemos modificar las reglas de acceso en cualquier momento según lo requiera nuestra aplicación para ello, presiona la pestaña «REGLAS«, en esta sección puedes observar lo siguiente:

Esta configuración nos dice que el quiera interactuar con los datos tanto para la lectura «.read» como la escritura «.write» de todo el árbol de datos, debe estar debidamente autenticado. Modificaremos las reglas para permitir que los datos sean públicos, es decir, que cualquiera podrá «ver» los datos de nuestra aplicación, para esto escribimos «true» en .read y presionamos el botón «PUBLICAR» es decir:

Volvemos a nuestro cliente REST y enviamos la solicitud nuevamente:

Esta vez obtenemos como respuesta el código 200, es decir, la solicitud tuvo éxito y ya podemos visualizar nuestro saludo «Hola Mundo Cruel!!!».

De la misma forma, realizamos la solicitud para el recursos «Autor» y tenemos:

Si estas usando un navegador web para realizar las peticiones, añade a la solicitud el comando «?print=pretty» es decir «https://proyecto-valkyria.firebaseio.com/Autor.json?print=pretty» esto imprimirá el resultado con formato legible.

Para terminar

Para finalizar este post, implementamos una clase en lenguaje java para leer los datos del servidor de firebase:

import java.io.BufferedInputStream;
import java.io.BufferedReader;
import java.io.IOException;
import java.io.InputStream;
import java.io.InputStreamReader;
import java.net.HttpURLConnection;
import java.net.MalformedURLException;
import java.net.URL;
/**
 * @see https://www.jc-mouse.net/
 * @author mouse
 */
public class Main {
    
    public static void main(String[] args) {        
        try {
            URL url = new URL("https://proyecto-valkyria.firebaseio.com/Autor.json?print=pretty");
            HttpURLConnection connection = (HttpURLConnection) url.openConnection();
            connection.setRequestMethod("GET");
            connection.setRequestProperty("User-Agent", "Mozilla/5.0");
            connection.setRequestProperty("Accept-Language", "en-US,en;q=0.5");
            connection.setRequestProperty("Content-Type", "application/json");            
            switch (connection.getResponseCode()) {
                case HttpURLConnection.HTTP_OK: //Codigo 200
                    StringBuilder resultado = leer(connection);
                    System.out.println("resultado JSON: " + resultado.toString());
                    break;
                default:                    
                    System.out.println("Codigo Respuesta: " + connection.getResponseCode());
                    break;
            }
        } catch (MalformedURLException ex) {
            System.err.println("MalformedURLException: " + ex.getMessage());
        } catch (IOException ex) {
            System.err.println("IOException: " + ex.getMessage());
        }

    }

    /**
     * Lee respuesta del servidor
     */
    public static StringBuilder leer(HttpURLConnection conn) throws IOException {
        StringBuilder stringBuilder = new StringBuilder();
        InputStream in = new BufferedInputStream(conn.getInputStream());
        BufferedReader reader = new BufferedReader(new InputStreamReader(in));
        String line;
        while ((line = reader.readLine()) != null) {
            stringBuilder.append(line).append("\n");
        }
        return stringBuilder;
    }

}

y obtenemos como resultado

enjoy!!!