Encuentros digitales

    En este artículo vamos a ver como hacer que una aplicación Angular sea una Progressive Web App, utilizando angular-cli para ello.     Lo primero que vamos a hacer es crear un nuevo proyecto de ejemplo con el comando:      ng new test-pwa     Una vez creado el proyecto, utilizamos nuestro editor de código favorito para editarlo. En nuestro caso, utilizamos Visual Studio Code: A la izquierda del editor vemos la estructura de ficheros y carpetas. Abrimos la carpeta "src", y creamos en ella un fichero json llamado manifest.json.    Este fichero manifest.json, sirve para configurar lo que sería un icono de arranque y una pantalla de arranque para la aplicación. Es decir, nos permite definir una pantalla splash, como si nuestra aplicación web fuera una aplicación nativa hecha en android. Por tanto, este fichero además, hace las veces de un instalador de la aplicación.  Fijate que la imagen que asignamos es de 512x512. Esto tiene su explicación que veremos

   Una de las características que debe tener cualquier aplicación web que quiere llegar de una forma masiva a todo el mundo, es el poder mostrar la web en diferentes idiomas.     En Angular esto se puede conseguir de manera fácil. La idea es marcar los textos que tengas en la aplicación. Estos marcajes se harán en las vistas de cada componente del proyecto angular, ya que es donde tendremos los textos. Para marcar cada texto se utiliza la herramienta i18n(esta herramienta ya se instala automáticamente como un módulo mas, cuando creas el proyecto angular). Básicamente lo que se hace es acompañar cada texto de la etiqueta i18n!                       Ejem:    <h1>Hola i18n!</h1>      Luego con una herramienta de linea de comandos se generará un fichero llamada messages.xlf. Luego se copiará este fichero una vez por cada idioma que queramos tener. En cada fichero copiado que llamaremos ficheros de traducción, se añadirán los textos en el idioma que corresponda. Este se pu

     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

     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,

     Hoy vamos a ver la segunda parte de nuestro tutorial práctico de Angular 2 y Firebase.  En el anterior artículo vimos como crear una base de datos en Firebase y como instalar y configurar Firebase en un proyecto Angular 2.       A partir de este artículo abordamos el caso práctico de un chat muy básico, donde veremos las características principales de Firebase. Firebase ante todo es una base de datos documental en tiempo real.    En este segundo artículo partimos de una pantalla que previamente he diseñado, modificando la vista con la que acabamos en el artículo anterior. La nueva pantalla es la siguiente:   Abajo se pondrá el Nick y el mensaje que queremos que aparezca en la zona del chat, que obviamente es la zona blanca central, donde irán apareciendo los mensajes.    En este segundo artículo, partimos también de la base de datos vacía, ya que los diferentes usuarios los va a ir creando dinámicamente la aplicación.   Al final de este artículo encontrarás el

En esta ocasión vamos a ver como configurar y utilizar Firebase desde una aplicación en Angular 2. Lo primero es crear un proyecto en Firebase. Para eso vamos a la página oficial de Firebase: https://firebase.google.com/?hl=es-419 Veremos una página como la siguiente:   Le damos al botón Comienza gratis y veremos una pantalla con toda la lista de proyectos que tenemos creados. Nosotros tenemos un proyecto  creado para el ejemplo que vamos a ver llamado "tracachat".    Seleccionamos este proyecto y entraremos en una pantalla donde vemos un menu a la izquierda. De este menu, la opción mas importante para empezar es "Database".   Nosotros tenemos por el momento la base de datos del proyecto tracachat creada con 5 usuarios de prueba.  Si quieres ver como se crea te remitimos al video que hemos subido a Youtube sobre este artículo, y que puedes encontrar aquí . En el minuto 3 aprox, verás como hemos creado estos registros.     Una vez creada