Sigueme en Facebook Sigueme en Twitter Sigueme en Instagram Sigueme en Youtube
JC Mouse Bolivia
Index / Firebase / Hola Mundo con Firebase

Hola Mundo con Firebase

Autor jc mouse domingo, enero 28, 2018

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.

firebase page

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

add project

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

Operacion Valkyria

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.

desarrollador bolivia

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

base de datos en tiempo real

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:

estructura json

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:

hello world

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

database json

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.

Permiso Denegado

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:

reglas malditas

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:

anarquia 2018

Volvemos a nuestro cliente REST y enviamos la solicitud nuevamente:

a todo gas 200

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:

cliente rest firebase

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.

i feel pretty

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 http://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

netbeans firebase

enjoy!!!

Tags

Si te ha gustado podrías compartirlo o dejar un comentario. ¡Muchas gracias!
Autor: JC Mouse

Yo soy yo :) JC Mouse, Soy orgullosamente boliviano soy fundador y CEO de la web jc-Mouse.net uno de las pocas web en emprendimiento y tecnología en Bolivia.

Toda la información que encuentres en este sitio es y sera completamente gratis siempre, puedes copiar, descargar y re-publicar si así lo deseas en otros blogs o sitios web, solo te pido a cambio que dejes una referencia a esta web. Esto nos ayuda a crecer y seguir aportando. Bye

Enjoy! :)

También Te Podría Interesar

SOAP .:. Servicio Web en c#

SOAP .:. Servicio Web en c#

SOAP (Simple Object Access Protocol) es un protocolo estándar que define cómo dos objetos en diferentes procesos pueden...

Métodos Numéricos: Sustitución Directa

Métodos Numéricos: Sustitución Directa

El Método de Sustitución Directa básicamente consiste en asumir un valor, reemplazar el mismo en la función despejada y...

Subir imagen a un servidor web con REST/JSON

Subir imagen a un servidor web con REST/JSON

En este tutorial crearemos una sencilla aplicación para android que nos permitirá subir una imagen a un servidor web. La...

MVC: Modelo, Vista y Controlador en PHP

MVC: Modelo, Vista y Controlador en PHP

EL patrón MVC (Model, View, Controller) o Modelo, Vista Controlador, es un tipo de diseño que separa en capas bien defin...

Crear ventana de ayuda sin JavaHelp

Crear ventana de ayuda sin JavaHelp

Java Help es (o era) una librería para java que permitía añadir ventanas de ayuda HTML a nuestros proyectos, al ser una...

Impresión de imágenes en PDF

Impresión de imágenes en PDF

Existen varias aplicaciones (free y de pago) que emulan una impresora virtual para generar archivos en PDF  (Portable Do...

Comparte lo que sabes

Categorias

Últimas entradas

El Tangram es un juego chino muy antiguo, esta compuesto por 7 piezas: un paralelogramo (romboide), un cuadrado y 5 triá...

Espresso es un framework de testing propiedad de Google que está dirigido a desarrolladores que creen que las pruebas au...

Harvard WorldMap es una plataforma de mapeo de código abierto en línea, desarrollado por el Centro de Análisis Geográfic...

Realizar pruebas sobre nuestro código nos permiten comprobar su correcto funcionamiento e integración con otros módulos...

Android Bolivia

MAUS