Temario y recursos del Curso de Angular 6 2018
Temario del Curso de Angular 6 2018
Introducción
8 Clases abiertas- Introducción al Curso
- Introducción a Angular
- Configurando nuestro proyecto en Git y Github
- Introducción a Angular CLI y al proyecto de Platzinger
- Instalación del entorno de desarrollo en Mac OS
- Instalación del entorno de desarrollo en Windows e información acerca del editor que usaré (WebStorm) y alternativas
- Corriendo nuestra app en el navegador
- Reto: Desarrolla un tutorial escrito comparando Angular con otro Framework (Vue, React)
Definición de la estructura del App
4 Clases abiertas- ¿Qué hará nuestra app? ¿Cuál es su arquitectura? ¿De qué pantallas se compondrá? ¿Cuál será su look?
- Explorando el sistema de archivos
- ¿Qué son y cómo generar los primeros componentes de nuestra app?
- Navegación básica entre componentes
Acelera tu carrera profesional con más de 63 Clases del Curso de Angular 6 2018
Comienza ahora- Componentes anidados: Creando un componente con nuestras rutas de navegación que funcione como menú
- Reto: Varias conversaciones a la vez
Basics de Angular y TypeScript
- ¿Cómo usar tipos de datos con TypeScript?
- Qué son las interfaces de TypeScript y su implementación
- NgFor aplicado en la lista de usuarios
- NgIf aplicado en la lista de usuarios
- Navegación con parámetros
- Accediendo a nuestros usuarios desde Conversation.ts
- Creando un servicio de usuarios e Inyectando el servicio en nuestros componentes
- Pipes en Angular (date, number, json)
- Creando nuestro propio pipe para buscar entre nuestros contactos
Estilos
- ¿Cómo usar estilos CSS y referenciar recursos?
- Instalando librerías usando npm (bootstrap y font-awesome) y Referenciando CSS en el angular.json
- Reto: Cambiar ícono según estatus
- Implementando estilos en la pantalla de login
- Terminando de implementar los estilos de nuestra pantalla de login
- Implementando estilos en el navbar
- Implementando estilos en la pantalla de home
- Implementando estilos en home, lista de contactos
- Implementando estilos en profile
- Reto: Estilos en la pantalla de conversación
- Usando ngClass para añadir estilos dinámicos
- Reto: Mejorar estilos en la pantalla de conversación
Acceso a datos remotos y login
- ¿Qué es Firebase? Creando nuestro proyecto
- Diferencia entre conexión por sockets y HTTP
- Instalación y setup de la librería AngularFire a través de npm
- Login/Registro de usuarios con email y password
- Reemplazo del servicio de usuarios por un servicio dinámico con conexión a Firebase
- Guards para verificar Firebase auth
- Creando un CRUD implementando un API REST HTTP (con diversos backends)
- Reto: Implementar API HTTP
Opciones y subida de imágenes
- Perfil de usuario
- Seleccionar fotos usando una librería para image cropping
- Guardando las imágenes de perfil en nuestra base de datos de firebase
Conversación
- ¿Cómo resolver el problema de comunicación en tiempo real?
- Enviando un mensaje (con reproducción de sonido)
- Mostrando conversación
- Enviando un zumbido (con reproducción de sonido y animación)
- Reto: Envía una foto
Amigos
- Planeación previa para la característica, ¿cómo generaremos las solicitudes?
- Enviando una solicitud de amistad
- Generando el modal de solicitud de amistad
- Aceptando solicitudes de amistad
- Mostrando sólo contactos que son amigos
- Componentes anidados (con paso de parámetros)
- Reto: Mensaje personal en Solicitud de Amistad
Para este curso vas a necesitar
9 Horas de contenido
20 Horas de práctica
Para este curso vas a necesitar
9 Horas de contenido
20 Horas de práctica
Introducción
8 Clases abiertas- Introducción al Curso
- Introducción a Angular
- Configurando nuestro proyecto en Git y Github
- Introducción a Angular CLI y al proyecto de Platzinger
- Instalación del entorno de desarrollo en Mac OS
- Instalación del entorno de desarrollo en Windows e información acerca del editor que usaré (WebStorm) y alternativas
- Corriendo nuestra app en el navegador
- Reto: Desarrolla un tutorial escrito comparando Angular con otro Framework (Vue, React)
Definición de la estructura del App
4 Clases abiertas- ¿Qué hará nuestra app? ¿Cuál es su arquitectura? ¿De qué pantallas se compondrá? ¿Cuál será su look?
- Explorando el sistema de archivos
- ¿Qué son y cómo generar los primeros componentes de nuestra app?
- Navegación básica entre componentes
Acelera tu carrera profesional con más de 63 Clases del Curso de Angular 6 2018
Comienza ahora- Componentes anidados: Creando un componente con nuestras rutas de navegación que funcione como menú
- Reto: Varias conversaciones a la vez
Basics de Angular y TypeScript
- ¿Cómo usar tipos de datos con TypeScript?
- Qué son las interfaces de TypeScript y su implementación
- NgFor aplicado en la lista de usuarios
- NgIf aplicado en la lista de usuarios
- Navegación con parámetros
- Accediendo a nuestros usuarios desde Conversation.ts
- Creando un servicio de usuarios e Inyectando el servicio en nuestros componentes
- Pipes en Angular (date, number, json)
- Creando nuestro propio pipe para buscar entre nuestros contactos
Estilos
- ¿Cómo usar estilos CSS y referenciar recursos?
- Instalando librerías usando npm (bootstrap y font-awesome) y Referenciando CSS en el angular.json
- Reto: Cambiar ícono según estatus
- Implementando estilos en la pantalla de login
- Terminando de implementar los estilos de nuestra pantalla de login
- Implementando estilos en el navbar
- Implementando estilos en la pantalla de home
- Implementando estilos en home, lista de contactos
- Implementando estilos en profile
- Reto: Estilos en la pantalla de conversación
- Usando ngClass para añadir estilos dinámicos
- Reto: Mejorar estilos en la pantalla de conversación
Acceso a datos remotos y login
- ¿Qué es Firebase? Creando nuestro proyecto
- Diferencia entre conexión por sockets y HTTP
- Instalación y setup de la librería AngularFire a través de npm
- Login/Registro de usuarios con email y password
- Reemplazo del servicio de usuarios por un servicio dinámico con conexión a Firebase
- Guards para verificar Firebase auth
- Creando un CRUD implementando un API REST HTTP (con diversos backends)
- Reto: Implementar API HTTP
Opciones y subida de imágenes
- Perfil de usuario
- Seleccionar fotos usando una librería para image cropping
- Guardando las imágenes de perfil en nuestra base de datos de firebase
Conversación
- ¿Cómo resolver el problema de comunicación en tiempo real?
- Enviando un mensaje (con reproducción de sonido)
- Mostrando conversación
- Enviando un zumbido (con reproducción de sonido y animación)
- Reto: Envía una foto
Amigos
- Planeación previa para la característica, ¿cómo generaremos las solicitudes?
- Enviando una solicitud de amistad
- Generando el modal de solicitud de amistad
- Aceptando solicitudes de amistad
- Mostrando sólo contactos que son amigos
- Componentes anidados (con paso de parámetros)
- Reto: Mensaje personal en Solicitud de Amistad
