Angular: Convierte cualquier template HTML en una WebAPP
Este curso se enfoca en enseñar como convertir una plantilla HTML a una aplicación de Angular, usando Firebase como backend, desplegando el sitio web en GitHub Pages y utilizando Git como repositorio.
El curso es totalmente gratuito y tiene como objetivo ayudarte en tu conocimiento de Angular, Firebase y otras herramientas que pueden interesarte mucho. Nos enfocaremos en aprender haciendo, crearemos todo de cero, eso incluye la configuración de la base de datos y los repositorios para trabajar en GitHub y Git. Hay un par de tareas y ejercicios que te pondrán a prueba, pero siempre con las soluciones al siguiente video.
Temas puntuales a tratar:
- Componentes en Angular
- Rutas utilizando módulos
- Generar aplicación de producción
- Firebase REST API
- Git
- GitHub
- Servicios de Angular
- Convertir un template HTML en una aplicación de Angular
- Y mucho más
El objetivo final es crear y desplegar la página web que creamos a un sitio web real, adquiriendo el conocimiento necesario para poder trabajar con confianza temas que no están hecho nativamente para el Framework de Angular.
Requisitos importantes:
Este curso no te enseñara Angular de Cero, debes de tener una pequeña base de lo que son los servicios y los componentes, si sabes de que hablo, este curso es para ti, pero si es la primera vez que tocas Angular, el curso te llevará de la mano.
Espero lo disfrutes mucho.
Introducción
Aquí enseño las herramientas con las que trabajaremos en el curso
Configurar GIT para poder trabajar con un repositorio central para manejar backups.
Esto es bastante lógico, pero es necesario
Aquí veremos el resultado final del curso
Estructuras HTML a componentes de Angular
Un breve resumen de lo que veremos a continuación
Aquí descargaremos el tema que usaremos en este curso
Copyright del template
Usaremos el Angular CLI para inicializar nuestro proyecto.
Tomaremos la estructura básica del template HTML y comenzaremos a moverlo a nuestro proyecto de Angular
Crearemos el componente del encabezado que tendrá nuestro menú
Aquí crearemos el componente del pie de página
Aquí vamos a crear el body de nuestra página web
Aquí crearemos un snapshot o fotografía del proyecto en este momento para hacer un backup
Aquí les dejo el código fuente de la sección por si lo llegan a necesitar
Páginas adicionales, rutas, y constantes
Un breve resumen de lo que aprenderemos en esta clase.
Aquí crearemos la página "about"
La tarea es crear una página del producto
Resolveremos la tarea de la creación de la página del producto
Aquí vamos a realizar un trabajo para que nuestra página web, se mueva de página en página
Trabajaremos un poco con el menú de navegación
Cambiaremos como funcionan las rutas de nuestra aplicación
Código en el material adjunto
Servicios, Constantes y HTTP
Un breve resumen de lo que haremos en esta sección
Vamos a crear un archivo JSON, con la información de nuestra página
Aquí crearemos el servicio que nos permitirá consumir el JSON y hacer fácil la edición de la página web
Esta clase es opcional, pero nos sirve para explicarle a TypeScript, que tipo de propiedades tiene nuestra info en el servicio
Usaremos el servicio para actualizar los valores de nuestra página web
Agregaremos aquí una pequeña animación a la hora de cargar la página web
Pueden descargarlo del material adjunto
Utilizando Firebase para nuestra automátización
Un breve resumen de lo que veremos a continuación
Crearemos nuestra base de datos para usarla en nuestro sitio web
Aquí aprenderemos a utilizar el servicio rest de firebase, para obtener la información
Tomaremos el objeto que vino de Firebase, y lo usaremos en la página.
Preparar Firebase con nuestros productos
Un breve resumen de lo que haremos en esta sección
Aquí puedes descargar el material que usaremos en esta sección
Vamos a importar información a Firebase que nos permita retornarla posteriormente.
Necesitamos un servicio encargado de manejar los productos
Desplegando los artículos en el home
Aquí les dejo el URL del loading que usaremos
Aquí añadiremos un loading a nuestro portafolios, para indicarle al usuario cuando ya se cargo todo.
Código fuente de la sección en caso de que lo necesiten
Pantalla de productos y búsquedas
Un breve resumen de lo que lograremos en esta sección
Enviaremos parámetros por URL para poder construir la página del producto
Nos conectaremos a Firebase para obtener la información del producto seleccionado.
Aquí usaremos la información del servicio, para actualizar nuestra página del producto
Según la lógica aplicada al curso, aquí usaremos las imágenes que copiamos a la aplicación en la sección 6
Crearemos la página de búsqueda
Vamos a realizar un diseño y filtro para nuestra búsqueda.
Aquí resolveremos el problema de los tiempos de carga y el filtro
Código fuente de la sección hasta el momento
Desplegando nuestra WebApp a GitHub Pages
Un breve resumen de lo que haremos en esta sección
Probaremos nuestra aplicación que funcione en un ambiente casi real.
Subiremos los archivos a GitHub
Aquí les dejo el código final del programa
Fin del Curso - Despedida
Por si te gusto este curso
Aquí tenemos el cierre del curso.
Cursos relacionados
