Entradas

Mostrando entradas de junio, 2017

Desplegar una aplicación Angular sobre el servicio de hosting de Firebase

Imagen
     En esta ocasión vamos a explicar como utilizar el servicio de hosting de Firebase, para subir una aplicación Angular compilada, a este espacio de hosting que nos proporciona Firebase.  Básicamente Firebase nos proporciona una url para nuestra aplicación estática(javascript) dentro de una Red de Publicación de Contenido o CDN. Y además utilizando el protocolo SSL, con lo cual nuestra url irá por https. La Url que se proporciona estará formada por el nombre de nuestro proyecto, actuando de subdominio del dominio firebaseapp.com. Ejem:                                  https://mi-proyecto.firebaseapp.com      Una vez que tengamos nuestros proyecto listo y acabado para subir a producción, Firebase nos permitirá apuntar nuestro dominio propio a Firebase hosting, proporcionando además automáticamente el certificado SSL.     Pongámonos manos a la obra. Primero vamos a ir a la consola de Firebase y crearemos un proyecto de prueba que llamaremos "test-hosting-firebase". Par

Angular 2, Firebase y materialize css - Parte 3 - Creación y visualización de los mensajes del chat

Imagen
     En el anterior artículo vimos como ir guardando en la BBDD de firebase, los diferentes mensajes que el usuario va escribiendo, pero no vimos como mostrarlos por pantalla.  Hoy vamos a ver esto. Muestro a continuación una captura de la pantalla de la aplicación para recordar su apariencia:       Para poder ir mostrando los mensajes que vamos escribiendo por pantalla, debemos capturar algún evento de pulsación de teclado. Esto lo vamos a hacer mediante la captura del evento keyup, que se produce cada vez que pulsamos una tecla.    Como vemos en la última linea, lo capturamos con (keyup)="onKeyUp($event)" en la linea que corresponde a la caja de texto para escribir los mensajes. Además, vamos a guardar el mensaje en la variable llamada "mensaje". Esto lo hacemos con [(ngModel)]="mensaje"   onKeyUp es la función que definimos en Angular, para capturar este evento, y le pasamos el objeto $event, que contendrá la tecla pulsada.   Además,