Reto final del curso - realiza un nuevo modulo de PlatziSquare de acuerdo con las historias de usuario

Clase 74 de 80 • Curso de Angular 4

Contenido del curso

Inicio del curso

1
Angular 4: configuración a despliegue profesional
02:13 min

Introducción a Angular 4

Setup del Ambiente de Trabajo

Conceptos Básicos

Directivas

Angular UI

Ruteo

Servicios

Conexión Remota (Http y Sockets)

Pipes

Animaciones en Angular

Testing en Angular

Autenticación y Protección de Rutas

RxJS

Publicando nuestro proyecto

72
Publicando en Firebase Hosting
07:39 min

Fin del curso

Sesiones en vivo

Contenido Bonus

80
Actualización de angular, versión 6.0
04:25 min

Tomar examen

Hasta el momento, PlatziSquare cuenta con un sistema de publicidad básico, donde se puede mostrar en una sección del home una lista de anuncios pagados de acuerdo a un atributo presente en cada record.

Requerimos una funcionalidad más robusta que como principal meta tiene permitir la venta y correcto despliegue de publicidad en la aplicación.

Esta funcionalidad debe estar lista dentro de los próximos 21 días naturales a partir de la lectura de este documento y debe de cumplir con los siguientes requerimientos:

Debe haber un grupo definido de administradores que podrán dar de alta negocios con un plan pagado
El plan pagado debe de contar con una fecha de inicio y fecha de expiración, y los beneficios deben aplicar solo dentro de esa ventana de tiempo
El orden en que se despliegan los negocios patrocinados en su propia sección debe ser random
En la lista regular de lugares, 3 de los resultados pagados deben aparecer siempre al principio de la lista de lugares, estos 3 deben ser también random. El resto, tomará un lugar convencional en la lista, junto con aquellos lugares no pagados.
Todos los lugares deben contar con una categoría (ej. Restaurantes, Hoteles, Tiendas de Ropa, etc.). Esto, para que, en la vista de detalle de un lugar que no es pagado, se muestren 3 anuncios pagados de la misma categoría; deben ser mostrados en una sección nueva de esta vista de detalle.
Cada visita a un lugar pagado, debe generar un record en un nuevo nodo de la base de datos de firebase llamado analytics. Este record debe guardar el id del negocio, la fecha y hora en que se generó la vista.
Además el conteo total de visitas hasta ese momento para cada negocio, debe ser un atributo de cada lugar pagado (en el nodo de lugares)

Deja en los comentarios tu solución, recuerda tambien dejar feed back a las soluciones de tus compañeros.

Comentarios

Marwin Gelvez

student•

Muchas gracias, este reto me ayudo a descubrir la diferentes maneras de resolver las HU puestas en angular, me llevo a investigar y aprender más sobre dichos temas.

Dejo una imagen de la página principal de la app:

Yesica Lizeth Cortés Pineda

teacher•

Oye!! que genial que hayas hecho esto, déjanos el enlace asi podemos verla mucho mejor 😄

Me encanta, te felicito.

SALAS RIVERA MARIEDTH MAYERLY salas rivera

student•

en este reto pude adquirir mas conocimientos y descubir nuevas cosas

Yesica Lizeth Cortés Pineda

teacher•

Que bien!, esa es la idea, siempre ampliar tus conocimientos investigando mas y mas 😄 déjanos el enlace a tu sitio para ver como te quedo 😄

Mauro Petrini

student•

Yo realice el curso utilizando la ultima version de Angular (v6.0) y Bootstrap 4.

Si les interesa acá les dejo el repo para ver el codigo

Repo PlatziSquare - Angular 6

Carlos Uriel de Jesus Sánchez González

student•

Muy buen reto

Reto final del curso - realiza un nuevo modulo de PlatziSquare de acuerdo con las historias de usuario

Inicio del curso

Angular 4: configuración a despliegue profesional

Introducción a Angular 4

Versionamiento en Angular

Qué es Angular 4 y el salto de versiones

Typescript: qué es

Cómo monetizar una app directorio comercial

Setup del Ambiente de Trabajo

Herramientas de trabajo y Angular CLI

Generación y estructura de Angular 4

RETO: Haz un cambio simple en el proyecto.

Conceptos Básicos

Para qué nos sirven los Módulos y Componentes

Tipos de Data Binding y String Interpolation

Property Binding

Event Binding

ngModel y two way binding en Angular

Directivas en Angular 4 y ngFor

Cómo usar ngIf en Angular 4.0

Instalando librerías con NPM (Google Maps)

Directivas

ngStyle y ngClass en Angular: estilos condicionales

Directiva ngSwitch

Cómo crear directivas de atributo en Angular

Host Listeners

HostBinding en Angular: controla estilos desde directivas

Angular UI

Angular Material y Bootstrap

Configurando e implementando Bootstrap en nuestro proyecto

Ruteo

Qué hace el router en Angular 4

Implementación de Rutas en el Proyecto

Href vs router link: navegación angular

Resaltando el link activo con CSS para indicar visualmente en que componente nos encontramos

Parámetros de ruta con routerLink en Angular

Parámetros tipo Query

Creando una vista de detalle para el proyecto

Página de contacto Angular desde cero

Servicios

Servicios en Angular para compartir datos

Creando nuestro propio servicio

Configurando Firebase en nuestro proyecto

Guardando Records en Firebase

Obteniendo records desde Firebase

Obteniendo coordenadas usando Geocoding

Reto: Crear una vista para editar records

Mostrando marcadores en el Mapa de Google

Conexión Remota (Http y Sockets)

Funcionamiento de los llamados Http y Sockets

Qué es una arquitectura cliente - servidor

Enviando llamados tipo POST

Enviando llamados tipo GET

Formateando respuestas del servidor con el operador map()

Manejando errores HTTP

Pipes

Utilidad de los Pipes en Angular 4

Usando los pipes por defecto de Angular

Parámetros en pipes

Creando nuestro propio pipe

Animaciones en Angular

Configurando animaciones en nuestro proyecto

Transiciones

Callbacks

Solución al Reto: Añadiendo animaciones a nuestra aplicación

Testing en Angular

Introducción a unit tests

Configuración de testing por default

Corriendo los tests

Creando unit tests para componentes

Integración de Unit Test con Servicios

Autenticación y Protección de Rutas

Cómo funcionan los JSON Web Tokens

Preparación de vistas para login y registro

Registrando usuarios

Loggeando usuarios

Guardias canActivate en Angular: Proteger rutas con autenticación

Cómo integrar Facebook login con Firebase

Logout en Angular con Firebase

RxJS