Está en la página 1de 51

Firebase

Erik Jhordan Gonzalez Reyes

https://www.firebase.com/
datos, colaboracin, sincronizacin en tiempo real, simple y apps?
Firebase es tu opcin
NoSQL JSON, Offline, Escalamiento automtico, RESTful APIs
Firebase Web Chat
https://www.firebase.com/tutorial/#example/chat

https://github.com/erikcaffrey/Firebase-chat-web/tree/master/chat-upiicsa-firebase
Manos a la Obra!
Crea una Firebase App
En tu cuenta -> https://www.firebase.com/account/#/
Crea un nueva firebase app debes asignar
un APP NAME y una APP URL

Presiona para terminar de crear la app #Android Developers


Descargar el proyecto en
https://github.com/erikcaffrey/Firebase-chat-web
nicamente utilizaremos la carpeta chat-upiicsa-firebase para hacer
un chat simple.
Inicializa la carpeta (proyecto) una vez que instalaste npm (si no lo tienes
instalalo)
se inicializa as firebase chat-upiicsa-firebase (sigue los pasos que te
aparecen)
Comandos importantes
https://www.firebase.com/docs/hosting/guide/deploying.html
Nota: debes crear una app en twitter en Nota: Habilitar login con twitter en
la seccin de developers, necesitaremos nuestro proyecto creado en firebase.
algunos keys!

Firebase Web Chat con Twitter

https://github.com/jwngr/gdg-summit

https://github.com/erikcaffrey/Firebase-chat-web/tree/master/chat-upiicsa-firebase-twitter
Bonus!
Firebase + Android
https://www.firebase.com/docs/android/
Firebase Chat
https://github.com/firebase/AndroidChat
Crea una Firebase App
En tu cuenta -> https://www.firebase.com/account/#/
Crea un nueva firebase app debes asignar
un APP NAME y una APP URL

Presiona para terminar de crear la app #Android Developers


Crea un nuevo nodo hijo

#Android Developers
Crea un proyecto en Android Studio

#codelab android Firebase chat #Android Developers


Asigna nombre a tu aplicacin android

#codelab android Firebase chat #Android Developers


Elige el mnimo SDK

#codelab android Firebase chat #Android Developers


Elige una plantilla

#codelab android Firebase chat #Android Developers


Pulsa finish y deja los nombres por defecto

#codelab android Firebase chat #Android Developers


Ya tienes tu proyecto creado

#codelab android Firebase chat #Android Developers


Integrando SDK Firebase +
Android

Para utilizar Firebase en tu aplicacin Android necesitamos obtener el sdk de firebase, el


cual se puede agregar a nuestro proyecto android por medio de la dependencia Gradle,
Maven o descargando la ltima versin del SDK.
En el archivo build.gradle agrega la siguiente
dependencia ...
Si tienes problemas al compilar acerca de
archivos duplicados agrega en build.gradle
Si deseas agregarlo desde Maven dirgete al
archivo pom.xml

Para utilizar Firebase en tu aplicacin Android necesitamos obtener el sdk de firebase


El archivo build.gradle debe lucir as

#Android Developers
Por ltimo agrega el permiso de acceso a
Internet en tu AndroidManifest.xml

#Android Developers
Conexion Android + Firebase
La librera de Firebase debe ser inicializada con el contexto
de android.

Fragment ->

Activity ->

#Android Developers
Leer y escribir datos en firebase
Necesitas crear una referencia a tu base de datos y lo hacemos pasando nuestra
URL de nuestra firebase app por el constructor.

mFirebaseReference
referencia a nuestra
base de datos
Firebase

#Android Developers
Prueba de Conexin Android + Firebase
Abre el fragment_main.xml elimina el TextView

#Android Developers
Agrega un EditText y un Button en fragment_main.xml

#Android Developers
Escribiendo en firebase

#Android Developers
Leer desde firebase

#Android Developers
Continuando Firebase Chat
Crea un archivo de nombre Chat.java

#Android Developers
Crea un archivo de nombre chat_message_sent.xml

#Android Developers
Crea un archivo de nombre chat_message_received.xml

#Android Developers
Crea un Adapter que herede de RecyclerView.Adapter para
nuestra lista customizada de mensajes enviados y
recibidos.

Descarga el Adapter aqu un gist!

https://gist.github.com/erikcaffrey/79490cc3874a3c0ac99e

#Android Developers
Elimina el EditText y un Button en fragment_main.xml

#Android Developers
Crea una vista de chat en fragment_main.xml
Agregaremos un EditText, RecyclerView y un FloatingActionButton

#Android Developers
Generando elementos del chat
Inicializamos el mtodo onCreate de nuestro fragmento
List<Chat> lista de objetos Chat que contiene un mensaje y autor
id_device id del dispositivo que ser usado como author
chatAdapter el adaptador de nuestra lista customizada

#Android Developers
Obtener la lista de mensajes desde Firebase

#Android Developers
Firebase Chat terminado!

#Android Developers
Descarga el proyecto completo
Firebase Chat
https://github.com/erikcaffrey/Firebase-chat
Firebase Chat + Twitter

#Android Developers
Descarga el proyecto completo
Firebase Chat + Twitter
https://github.com/erikcaffrey/DesignLibraryFirebase
tryfirebase3

También podría gustarte