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 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

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

Cascadia Code: la nueva fuente OpenSource de Microsoft

Cascadia Code: la nueva fuente OpenSource de Microsoft

Microsoft acaba de lanzar Cascadia Code una fuente monoespaciada enfocada en proporcionar una mejor experiencia en conso...

Yachaywasi – Crea exámenes tipo test para android

Yachaywasi – Crea exámenes tipo test para android

Yachaywasi versión 3.1 es una aplicación para android que te permite crear, editar y realizar exámenes tipo test cómodam...

Botón en java de Windows 8 Modern UI

Botón en java de Windows 8 Modern UI

En este tutorial crearemos un botón con el estilo del nuevo windows 8 Modern UI que primero se conoció como Metro UI.  E...

Terminator: Terminal multiventanas para Linux

Terminator: Terminal multiventanas para Linux

Cada versión de Linux viene con su propia terminal predeterminada para interactuar con el Sistema Operativo a través de...

JCheckBox dentro JTable con Netbeans

JCheckBox dentro JTable con Netbeans

Para colocar un JCheckBox dentro una celda de un JTable debemos sobre escribir algunas clases para que el componente pue...

Imprimir imagen con Print

Imprimir imagen con Print

La siguiente clase hace uso de PRINT para imprimir una imagen que se encuentra en un variable de tipo FileInputStream, e...

Comparte lo que sabes

Categorias

Últimas entradas

El gigante tecnologico Google a puesto un bonito Doodle en su buscador que esta fascinando a sus millones de usuarios qu...

WhatsApp anuncio a través de su blog que ya se encuentra disponible la función de envío de fotos y videos TEMPORALES, es...

Muchas de las innovaciones computacionales de la NASA se desarrollaron para ayudar a explorar el espacio, pero ahora la...

TikTok es una plataforma de microvideos muy popular entre los jóvenes el cual cuenta ya con millones de videos cortps de...

Herramientas

Generador de Enlaces a Whatsapp