Introducción a Firebase para Android

Firebase es lo que se conoce como “Backend como Servicio”, que básicamente provee de una API para guardar y sincronizar datos en la nube en tiempo real, ya sea desde un sitio web, una aplicación móvil híbrida o una aplicación móvil nativa.
En este post veremos como crear una aplicación móvil con Android y Firebase.

Entre todas las características que ofrece Firebase, las principales son:

  • Muy fácil implementación.
  • Sincronización instantánea.
  • Integración con Servicios de Autenticación.

Firebase se convierte en una opción importante a considerar cuando queremos crear un prototipo muy rápido y no tenemos el tiempo o los conocimientos para desarrollar un backend o una API propia con alguno de los lenguajes tradicionales como PHP, Python, RoR, “Node.Js” (no tan tradicional).

No voy a explicarte como abrir una cuenta en Firebase, ni como Usarlo, ya que esto lo explico en este post, para este post partiremos que tu ya tienes una cuenta creada en Firebase y un Endpoint ( https://miendpointenfirebase.firebaseio.com/). También debes tener instalado Android Studio.

Manos a la obra lo primero que haremos será crear un nuevo proyecto en Android Studio y una Actividad en Blanco:Screen Shot 2016-05-02 at 10.46.48 AM Screen Shot 2016-05-02 at 10.47.32 AM Screen Shot 2016-05-02 at 10.47.49 AM En nuestro Caso vamos a crear una Aplicación en tiempo real que permita visualizar cual es tu estado de ánimo, así que la llamaré EstadoDeAnimo.

Screen Shot 2016-05-02 at 10.50.04 AM

Ahora vamos a activar Firebase en nuestra aplicación, para ello vamos a File>Project Structure>Cloud y activamos la casilla de Firebase y hacemos click en Ok, (Si así de fácil) al haber hecho esto ya queda activado Firebase en nuestro proyecto.

Screen Shot 2016-05-02 at 10.52.33 AM

Screen Shot 2016-05-02 at 10.53.00 AM

Para comprobar que efectivamente todo ha salido bien hasta aquí vamos chequear un poco nuestro archivo build.gradle (Vamos a chequear el que corresponde a App).

Screen Shot 2016-05-02 at 10.56.31 AM

Notarás que se han añadido algunas dependencias de Firebase. Sin embargo falta algo mas que debemos añadir antes de las dependencias algunas líneas relacionadas con la licencia de Firebase para evitar errores de compilación y licencias duplicadas, (Esperamos que para las próximas versiones no sea necesario). Las líneas que añadiremos serán estas:

  • java
1
2
3
4
5
packagingOptions {
    exclude 'META-INF/LICENSE'
    exclude 'META-INF/LICENSE-FIREBASE.txt'
    exclude 'META-INF/NOTICE'
}

Dejando a nuestro archivo build.gradle de esta manera:

Screen Shot 2016-05-02 at 11.03.56 AM

Así finaliza la instalación de Firebase en nuestra aplicación, ahora vamos a crear nuestra aplicación: nuestra aplicación consistirá en un TextView donde aparecerá nuestro estado de animo y tres botones para cambiarlo deberá verse así:

Screen Shot 2016-05-02 at 11.10.52 AM

Para a hacer esto vamos a App>res>layout>activity_main.xml y mediante nuestro editor gráfico vamos a poner todo como nuestra vista anterior, los botones los nombraremos de manera que sea mas fácil acordarnos: (buttonAlegre, buttonTriste, buttonEnojado), mientras que el texView lo dejaremos simplemente “textView”:

Screen Shot 2016-05-02 at 11.11.12 AM Screen Shot 2016-05-02 at 11.11.22 AM Screen Shot 2016-05-02 at 11.11.36 AM Screen Shot 2016-05-02 at 11.18.58 AM

La primera cosa que debemos hacer cuando vamos a trabajar con Firebase en nuestra aplicación es configurar el “Android Context”, esto se debe a que Firebase debe ser llamado en el primer ciclo de vida de nuestra aplicación. Para hacer esto vamos a crear una nueva clase adentro de java>com.nuestropaquete.estadodeanimo. Para hacer esto hacemos click derecho, new>Java Class, y en mi caso le colocaré el nombre de EstadoDeAnimo.

Screen Shot 2016-05-02 at 11.19.14 AM

En esta clase partiremos de esto:

  • java
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
/*
* Created by seagomezar on 5/2/16.
*/

public class EstadoDeAnimo {
}

a esto:

package com.example.seagomezar.estadodeanimo;

import com.firebase.client.Firebase;

/*
* Created by seagomezar on 5/2/16.
*/
public class EstadoDeAnimo extends android.app.Application{
@Override
public void onCreate() {
super.onCreate();
Firebase.setAndroidContext(this);
}
}

package com.example.seagomezar.estadodeanimo;

Ahora vamos incluir esta clase en nuestro AndroidManifest.xmlScreen Shot 2016-05-02 at 11.28.00 AM Al hacer esto estamos configurando Firebase desde el comienzo del ciclo de vida de nuestra aplicación, ahora vamos a escribir la funcionalidad, para esto abrimos nuestro archivo MainActivity.java y escribamos lo siguiente:

  • java
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
package com.example.seagomezar.estadodeanimo;
import android.support.v7.app.AppCompatActivity;
import android.os.Bundle;
import android.view.View;
import android.widget.Button;
import android.widget.TextView;
import com.firebase.client.DataSnapshot;
import com.firebase.client.Firebase;
import com.firebase.client.FirebaseError;
import com.firebase.client.ValueEventListener;
import com.firebase.client.realtime.util.StringListReader;

public class MainActivity extends AppCompatActivity {

TextView mTextView;
Button mButtonAlegre, mButtonTriste, mButtonEnojado;
Firebase mRef;

@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_main);
}

@Override
protected void onStart() {
super.onStart();
mTextView = (TextView)findViewById(R.id.textView);
mButtonAlegre = (Button)findViewById(R.id.buttonAlegre);
mButtonEnojado = (Button)findViewById(R.id.buttonEnojado);
mButtonTriste = (Button)findViewById(R.id.buttonTriste);
mRef = new Firebase("https://miendpointenfirebase.firebaseio.com/estado");

mRef.addValueEventListener(new ValueEventListener() {
@Override
public void onDataChange(DataSnapshot dataSnapshot) {
String estado = dataSnapshot.getValue(String.class);
mTextView.setText(estado);
}

@Override
public void onCancelled(FirebaseError firebaseError) {

}
});

mButtonAlegre.setOnClickListener(new View.OnClickListener() {
@Override
public void onClick(View v) {
mRef.setValue("Estoy Alegre! =)");
}
});

mButtonTriste.setOnClickListener(new View.OnClickListener() {
@Override
public void onClick(View v) {
mRef.setValue("Estoy Triste! =(");
}
});

mButtonEnojado.setOnClickListener(new View.OnClickListener() {
@Override
public void onClick(View v) {
mRef.setValue("Estoy Enojado! -.-");
}
});
}
}

Miremos en detalle que es lo que hacen las líneas mas importantes de nuestro código.

En las lineas 15 a 17 declaramos las variables de nuestra App, una para cada elemento en la interfaz y una variable para manejar nuestro Firebase.

En las líneas 27 a 31 enlazamos las variables con los elementos de la interfaz y en la línea 32 enlazamos nuestra variable local de Firebase con nuestro endpoint.

Entre las líneas 34 a 36 definimos un Listener que nos indica cuando cambia el valor en nuestro Endpoint, y en caso de que cambie vamos a obtener (línea 37) el valor que cambió y se lo vamos a asignar a una variable llamada estado, para luego en la línea 38 pasarla a nuestro TextView.

Entre las líneas 47 a 66 simplemente creamos un Listener para cuando nuestro usuario pulse el botón cambiemos el valor del estado en nuestro EndPoint.

Nota que el valor que se cambie o actualice será el mismo para todos los usuarios que tengan la aplicación.

Estamos listos!!, Ahora dale play y déjate sorprender por lo bien que funciona, aunque este ejemplo es básico, te servirá de punto de partida para todas las aplicaciones en tiempo real que quieras desarrollar con Firebase y Android!!

Aquí te dejo algunas imágenes de Nuestra Aplicación y el EndPoint.

Screen Shot 2016-05-02 at 11.52.16 AM
Screen Shot 2016-05-02 at 11.53.08 AM
Screenshot_20160502-115246
Screenshot_20160502-115257

Eso es todo, espero que este post te sea de utilidad, Si tienes alguna duda no dudes en dejarme un comentario en la parte de abajo, recuerda que si te gustó también puedes compartir usando los links a las redes sociales en la parte de abajo.

Copyrights © 2018 Sebastian Gomez. All Rights Reserved.

Sobre mí

sebastianMi nombre es Sebastián Gómez, soy ingeniero de sistemas e Informática y Magister en Ingeniería de Sistemas de la Universidad Nacional de Colombia.

Actualmente trabajo en Globant como Web UI Developer con énfasis en aplicaciones híbridas y cross compiladas. Soy el organizador del Google Developers Group de Medellín, así que contactame si quieres dar alguna charla o participar actuamente de esta comunidad.

He participado en una Startup Colombiana llamada SponzorMe al lado de Carlos Rojas y fuí participante de Startup Chile a pesar de no haber continuado con esta startup me apasiona el emprendimiento y me gusta aconsejar y ayudar startups como mentor técnico. También he trabajado en empresas Americanas como StudioHyperset en Estados Unidos y para Measured Medium. Mi interés y mi experiencia es el desarrollo de web y móvil full stack como Front-end con Javascript. Me apasiona desarrollar software, escribir código y enseñar lo que aprendo día a día.

También he trabajado como profesor en diferentes universidades en Medellín Colombia, con tematicas relacionadas con la Inteligencia Artificial, Bases de datos, programación orientada a objetos, minería de datos, desarrollo de software, desarrollo móvil y desarrollo web.

Me encanta escribir código rápido y prototipar de una manera accelerada si quieres ver que hago día a día puedes darle un vistazo a mi codepen:  https://codepen.io/seagomezar/.

Todos los días trato de crear o participar en proyectos, la mayoría open source, así que puede chequear mi GitHub:  https://github.com/seagomezar.

Mi áreas de investigación académica son: Ingeniería de software, Ingeniería de requisitos, procesamiento del lenguaje natural, Ontologías, Bases De Datos,  Machine Learning, Seguimiento de trayectorias y Modelamiento matemático de formaciones.

Estas son algunas de mis publicaciones académicas mas recientes: