Encuentros digitales

    Hoy vamos a ver como generar la documentación del código de un proyecto Angular. Para esto hay que utilizar una herramienta llamada "compodoc". La página web de este proyecto se encuentra en   https://compodoc.github.io/compodoc/      Como cualquier otro paquete de un proyecto Angular, lo instalaremos como paquete npm. Si buscamos en el repositorio npmjs.com, lo encontraremos en https://www.npmjs.com/package/@compodoc/compodoc      Y en https://compodoc.github.io/website/guides/installation.html   nos explican como instalarlo:   Lo mejor es instalarlo en local, mediante la linea:  npm install --save-dev @compodoc/compodoc Una vez instalado, hay que configurar como lo queremos ejecutar. Para esto, en el fichero package.json de nuestro proyecto, en la sección de script. Por ejemplo, en mi proyecto de prueba tengo:  En mi caso, no solo indico que se cree la documentación ...

    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 ...

   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...

     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. Pr...

     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 p...

     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 aplic...