Angular: Convierte cualquier template HTML en una WebAPP
- Descripción
- Currículum
- Reseñas
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.
Bash – Intérprete de Comandos de Linux. Aprende desde cero
Visual Studio Code: Mejora tu velocidad para codificar
Lógica Programación: Aprende Programar en Cualquier Lenguaje
Desarrollo Web con HMTL, CSS y Bootstrap 4! Curso desde cero
Aprende a programar desde las bases | Programación-
1
Introducción -
2
Instalaciones necesarias para seguir el curso
Aquí enseño las herramientas con las que trabajaremos en el curso
-
3
Opcional - Configurar GIT
Configurar GIT para poder trabajar con un repositorio central para manejar backups.
-
4
¿Cómo hacer preguntas?Esto es bastante lógico, pero es necesario
-
5
Objetivo del curso
Aquí veremos el resultado final del curso
-
6
Introducción a la sección
Un breve resumen de lo que veremos a continuación
-
7
Descarga del tema que usaremos de ejemplo
Aquí descargaremos el tema que usaremos en este curso
-
8
Información del template a usar
Copyright del template
-
9
Iniciando el proyecto de Angular
Usaremos el Angular CLI para inicializar nuestro proyecto.
-
10
Estructura HTML básica a nuestro proyecto de Angular
Tomaremos la estructura básica del template HTML y comenzaremos a moverlo a nuestro proyecto de Angular
-
11
Componente del encabezado
Crearemos el componente del encabezado que tendrá nuestro menú
-
12
Componente del pie de la página
Aquí crearemos el componente del pie de página
-
13
Componente del cuerpo de la página
Aquí vamos a crear el body de nuestra página web
-
14
GIT - Guardando el estado de nuestro proyecto
Aquí crearemos un snapshot o fotografía del proyecto en este momento para hacer un backup
-
15
Código fuente de la sección
Aquí les dejo el código fuente de la sección por si lo llegan a necesitar
-
16
Introducción a la sección
Un breve resumen de lo que aprenderemos en esta clase.
-
17
Creando la página about
Aquí crearemos la página "about"
-
18
Tarea - Creando la página del producto
La tarea es crear una página del producto
-
19
Resolución - Creando la página del producto
Resolveremos la tarea de la creación de la página del producto
-
20
Creando rutas para nuestro sitio web
Aquí vamos a realizar un trabajo para que nuestra página web, se mueva de página en página
-
21
Editando el menú de navegación
Trabajaremos un poco con el menú de navegación
-
22
Uso del hash en las rutas
Cambiaremos como funcionan las rutas de nuestra aplicación
-
23
Código fuente de la sección
Código en el material adjunto
-
24
Introducción a la sección
Un breve resumen de lo que haremos en esta sección
-
25
Creando un archivo JSON con la información
Vamos a crear un archivo JSON, con la información de nuestra página
-
26
Servicio - Información de la página
Aquí crearemos el servicio que nos permitirá consumir el JSON y hacer fácil la edición de la página web
-
27
Crear interfaz para controlar la información de la página
Esta clase es opcional, pero nos sirve para explicarle a TypeScript, que tipo de propiedades tiene nuestra info en el servicio
-
28
Usando el servicio para reemplazar información en la página web
Usaremos el servicio para actualizar los valores de nuestra página web
-
29
Agregando animaciones a nuestras páginas
Agregaremos aquí una pequeña animación a la hora de cargar la página web
-
30
Código fuente de la sección
Pueden descargarlo del material adjunto
-
31
Introducción a la sección
Un breve resumen de lo que veremos a continuación
-
32
Creando nuestra base de datos en Firebase
Crearemos nuestra base de datos para usarla en nuestro sitio web
-
33
Carga de la información de Firebase a nuestra página
Aquí aprenderemos a utilizar el servicio rest de firebase, para obtener la información
-
34
Mostrando la información de Firebase en el HTML
Tomaremos el objeto que vino de Firebase, y lo usaremos en la página.
-
35
Introducción a la sección
Un breve resumen de lo que haremos en esta sección
-
36
Material de la sección
Aquí puedes descargar el material que usaremos en esta sección
-
37
Cargando información a Firebase
Vamos a importar información a Firebase que nos permita retornarla posteriormente.
-
38
Creando el servicio de productos
Necesitamos un servicio encargado de manejar los productos
-
39
Desplegando los artículos en el home
Desplegando los artículos en el home
-
40
URL del Loading que usaremos - SVG
Aquí les dejo el URL del loading que usaremos
-
41
Agregando un loading a nuestro portafolio
Aquí añadiremos un loading a nuestro portafolios, para indicarle al usuario cuando ya se cargo todo.
-
42
Código fuente de la sección
Código fuente de la sección en caso de que lo necesiten
-
43
Introducción a la sección
Un breve resumen de lo que lograremos en esta sección
-
44
Enviando parámetros por URL
Enviaremos parámetros por URL para poder construir la página del producto
-
45
Servicio para obtener el producto
Nos conectaremos a Firebase para obtener la información del producto seleccionado.
-
46
Actualizando la página del producto
Aquí usaremos la información del servicio, para actualizar nuestra página del producto
-
47
Reemplazando las imágenes 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
-
48
Creando la página de búsqueda
Crearemos la página de búsqueda
-
49
Diseño y filtro de la página de búsqueda
Vamos a realizar un diseño y filtro para nuestra búsqueda.
-
50
Lógica del proceso de carga y filtro
Aquí resolveremos el problema de los tiempos de carga y el filtro
-
51
Código fuente de la sección
Código fuente de la sección hasta el momento
-
52
Introducción a lo que veremos en la sección
Un breve resumen de lo que haremos en esta sección
-
53
Probando nuestra app en pre-producción
Probaremos nuestra aplicación que funcione en un ambiente casi real.
-
54
Subiendo los archivos a GitHub
Subiremos los archivos a GitHub
-
55
Código fuente de la sección
Aquí les dejo el código final del programa
