Entradas

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

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

Angular 2 y FireBase - PARTE 2 - Comenzamos un pequeño chat de ejemplo

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

Angular 2 y Firebase - PARTE 1 - Como instalar y configurar Firebase sobre Angular 2

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

Angular 2 - Como instalar y configurar el framework de material design, llamado materialize-css

Imagen
    Material design es un standar para diseño de frontend, ideado por google, y cuyo principal objetivo, era en un principio que el aspecto de las aplicaciones en android fuera lo mas agradable y eficiente posible. Progresivamente se ha ido extendiendo a cualquier dispositivo, incluido IoS, Pc de escritorio, etc, ...     Sus diseñadores se inspiraron en la tinta y el papel, tal como explica google en su página oficial sobre material design .  La propia google ha llevado el material design a sus propias aplicaciones, Google Search , Gmail , Google Calendar, ...     Hoy en día existen frameworks basados en material design, como por ejemplo Material Design Lite , Materialize , mdbootstrap , etc, ...    Hoy vamos a ver como instalar y configurar Materialize en un proyecto angular 2, con angular-cli y webpack.    En este artículo se supone que ya teneis instalado el nodejs, y el angular-cli. Si no es así, os remit...

Retroinformática - Cómo aplicar e implementar algoritmos de físicas en ordenadores retro (2º Parte) - Movimiento rectilineo uniformemente acelerado con Amos Basic

Imagen
     En esta ocasión vamos a explicar que es el Movimiento Rectilineo Uniforme Acelerado y como aplicarlo a un algoritmo en el lenguaje Basic. Concretamente en el lenguaje Amos Basic para ordenadores Amiga.          En el capítulo anterior  vimos que es la velocidad rectilínea uniforme y como ésta se mantiene constante a lo largo del tiempo. Es decir, si el objeto empieza a moverse con una velocidad instantánea de 10 píxeles por segundo seguirá a esa misma velocidad todo el tiempo que se esté moviendo.        En cambio, en el movimiento rectilíneo uniforme acelerado, su aceleración es constante a lo largo del tiempo, y esto quiere decir que su velocidad instantánea va cambiando a lo largo del tiempo.  Por ejemplo, si decimos que un objeto tiene una aceleración de 10 metros por segundo al cuadrado, esto quiere decir que cada segundo habrá aumentado su velocidad instantánea en 10 metros por segundo. Es decir, s...

Retroinformática - Como aplicar e implementar algoritmos de físicas en ordenadores retro (1º parte) - Movimiento Rectilineo Uniforme con Amos Basic

Imagen
Movimiento Rectilineo Uniforme    Con este primer artículo empezaremos a ver una serie de artículos en los que se verán poco a poco la manera de aplicar e  implementar físicas en los ordenadores retro (Amiga, Atari, MSX, spectrum, ...), con lenguajes como el Basic. Hoy en día, las tecnologías y lenguajes de programación actuales, tienen muchas librerías que ya implementan físicas para los juegos. Y no queremos reinventar la rueda.      Por eso, hemos decidido explicar estas físicas, sobre ordenadores antiguos, que no disponían de este tipo de librerías o éstas no se conocían o no se daban a conocer.     Así veremos que tambien en los ordenadores retro, con sus escasas capacidades de cpu y de gráficas, se podían hacer cosas interesantes. Hoy empezaremos este primer capítulo explicando posiblemente las física más fácil que hay. Hablamos  de la velocidad rectilinea uniforme: v=s/t Es decir, la velocidad es igual al espacio recorrido ...