Luego vamos a realizar los siguientes pasos (que no explicaremos porque ya los hemos tratado en otras entradas):
1. Instalar Bootstrap.
2. Crear un nuevo proyecto en Firebase llamado firechat.
3. Informamos el fichero "styles.css" (el que tira directamente de la carpeta "src") con las siguientes clases css:
.main-container{
margin-top: 40px;
margin-bottom: 150px;
}
.puntero{
cursor: pointer;
}
.chat-window{
padding: 10px;
width: 300px;
height: 400px;
overflow: hidden;
border: 1px solid #4080FF;
border-radius: 20px;
}
.app-mensajes{
overflow-y:scroll;
height:270px;
/*background:gray;*/
padding: 5px;
}
/* Animaciones */
.animated {
-webkit-animation-duration: 1s;
animation-duration: 1s;
-webkit-animation-fill-mode: both;
animation-fill-mode: both;
}
.fast {
-webkit-animation-duration: 0.3s;
animation-duration: 0.3s;
-webkit-animation-fill-mode: both;
animation-fill-mode: both;
}
@keyframes fadeIn {
from {
opacity: 0;
}
to {
opacity: 1;
}
}
.fadeIn {
animation-name: fadeIn;
}
Y ya estamos preparados para continuar con la instalación.
Buscamos "AngularFire2" en google y nos debería aparece la página de GitHub para instalar la librería.
Nos vamos a la sección de instrucciones de instalación, y comprobamos que los primeros pasos son para instalar Angular y demás, que nosotros ya tenemos hecho, obviamente. A partir del tercer punto es donde empieza la instalación de AngularFire2 propiamente dicha:
Ejecutamos el comando indicado:
Seguimos el siguiente paso de la web y nos pide modificar el fichero "environment.ts":
Así que lo hacemos:
A continuación volvemos a la página de Firebase y, dentro de nuestro proyecto, pulsamos en el botón de añadir Firebase a nuestra aplicación web:
Y nos aparecerá una pantalla con el contenido de las variables que copiamos en el "environment.ts" en el paso anterior:
Copiamos el contenido de esas variables a nuestro fichero, y ya tendríamos la configuración de conexión:
Seguimos viajando por la web de instalación de AngularFirebase2, y nos indica que debemos modificar el fichero "app.module.ts":
Cosa que hacemos:
Más adelante nos pide más modificaciones:
Que volvemos a hacer:
Con la configuración de conexión ya realizada, lo que queda es modificar el componente de la aplicación para inyectarle un objeto que se conecte a la base de datos y nos traiga los registros, así que modificamos el "app.component.ts":
Lo hacemos:
Nos pide más modificaciones del mismo fichero, y también que modifiquemos el "app.component.html" para que mostremos la lista de registros que el componente trae de nuestra base de datos:
Modificamos el TypeScript:
Y el html:
Ahora sólo nos falta una cosa, tener registros en nuestra base de datos para traerlos.
Nos vamos a Firebase, y en nuestra aplicación pulsamos en "Database" y creamos una nueva base de datos. Nótese que estamos creando una base de datos de tipo "Cloud Firestore", a diferencia de la "Realtime Database" que creamos en nuestra aplicación de héroes anterior, ya que la "Cloud Firestore" es una versión más nueva y moderna:
Esta vez, vamos a crearla en modo bloqueado:
Una vez creada, agregamos una colección:
Que llamaremos "chats":
Introducimos un par de registros como sigue:
Y nos aparecerían en pantalla:
Ahora nos vamos a las reglas de la base de datos y las modificamos para que cualquiera pueda realizar una consulta en la misma:
Y con esto ya tendríamos la base de datos lista para consultarla.
Ahora vamos a hacer unas modificaciones en nuestra aplicación para que la sintaxis que utilicemos sea más coherente con los datos que vamos a guardar en nuestra base de datos.
Modificamos el componente de la aplicación para cambiar los "items" por "chats":
Y modificamos el html con el mismo fin:
Ahora si arrancamos la aplicación podemos ver que se nos carga la lista de chats en pantalla:
Y eso es todo de momento.
Buscamos "AngularFire2" en google y nos debería aparece la página de GitHub para instalar la librería.
Nos vamos a la sección de instrucciones de instalación, y comprobamos que los primeros pasos son para instalar Angular y demás, que nosotros ya tenemos hecho, obviamente. A partir del tercer punto es donde empieza la instalación de AngularFire2 propiamente dicha:
Ejecutamos el comando indicado:
Seguimos el siguiente paso de la web y nos pide modificar el fichero "environment.ts":
Así que lo hacemos:
A continuación volvemos a la página de Firebase y, dentro de nuestro proyecto, pulsamos en el botón de añadir Firebase a nuestra aplicación web:
Y nos aparecerá una pantalla con el contenido de las variables que copiamos en el "environment.ts" en el paso anterior:
Copiamos el contenido de esas variables a nuestro fichero, y ya tendríamos la configuración de conexión:
Seguimos viajando por la web de instalación de AngularFirebase2, y nos indica que debemos modificar el fichero "app.module.ts":
Cosa que hacemos:
Más adelante nos pide más modificaciones:
Que volvemos a hacer:
Con la configuración de conexión ya realizada, lo que queda es modificar el componente de la aplicación para inyectarle un objeto que se conecte a la base de datos y nos traiga los registros, así que modificamos el "app.component.ts":
Lo hacemos:
Nos pide más modificaciones del mismo fichero, y también que modifiquemos el "app.component.html" para que mostremos la lista de registros que el componente trae de nuestra base de datos:
Modificamos el TypeScript:
Y el html:
Ahora sólo nos falta una cosa, tener registros en nuestra base de datos para traerlos.
Nos vamos a Firebase, y en nuestra aplicación pulsamos en "Database" y creamos una nueva base de datos. Nótese que estamos creando una base de datos de tipo "Cloud Firestore", a diferencia de la "Realtime Database" que creamos en nuestra aplicación de héroes anterior, ya que la "Cloud Firestore" es una versión más nueva y moderna:
Esta vez, vamos a crearla en modo bloqueado:
Una vez creada, agregamos una colección:
Que llamaremos "chats":
Introducimos un par de registros como sigue:
Y nos aparecerían en pantalla:
Ahora nos vamos a las reglas de la base de datos y las modificamos para que cualquiera pueda realizar una consulta en la misma:
Y con esto ya tendríamos la base de datos lista para consultarla.
Ahora vamos a hacer unas modificaciones en nuestra aplicación para que la sintaxis que utilicemos sea más coherente con los datos que vamos a guardar en nuestra base de datos.
Modificamos el componente de la aplicación para cambiar los "items" por "chats":
Y modificamos el html con el mismo fin:
Ahora si arrancamos la aplicación podemos ver que se nos carga la lista de chats en pantalla:
Y eso es todo de momento.
No hay comentarios:
Publicar un comentario