Crearemos el proyecto en la versión Angular 9 y analizaremos el contenido de los directorios y ficheros

Haremos un repaso al trabajo del CLI para crear de manera sencilla y rápida elementos que vamos a usar durante el desarrollo del proyecto.

Repaso al uso de las directivas estructuradas *ngIf / *ngFor

Os explico cómo realizar la migración de una versión otra, dando las claves para que sepamos que tenemos que hacer en los casos que hay que actualizar.

En este video se realizará una breve introducción de lo que encontraremos a lo largo de la sección y cual será su resultado final

Os explicaré de manera detallada el esqueleto del proyecto con el objetivo de saber que es lo que vamos a realizar durante el curso

Comenzamos con el proyecto creándolo y realizaremos las primeras configuraciones

Primeros pasos con Bootstrap y configuración en proyecto Angular

Creación de los elementos necesarios para modularizar correctamente nuestro proyecto y cargar únicamente lo que necesitemos

Añadir las rutas del apartado de la tienda

Configuración de las rutas comodín, para cuando se den situaciones de rutas no especificadas

Configuraciones y primeros pasos con las rutas para acceder al panel de administración

Explicación detallada para saber como tendremos que actuar para trabajar con dos templates diferentes, dependiendo de la ruta seleccionada

Primeros pasos adaptando el proyecto con el objetivo de tener diferentes templates dependiendo del apartado de la aplciación

Adaptar el proyecto para cargar el apartado del administrador con su propio template con el objetivo de diferenciarlo respecto a la tienda

Comenzamos con la configuración de las rutas de la tienda

Finalizamos la configuración de rutas y probamos que ya tenemos aislados los dos apartados correctamente

Crearemos el repositorio donde iremos almacenando lo desarrollado en la aplicación Angular paso a paso

Aprenderemos a crear nuestra primera versión en Github, añadiendo información acerca de lo que hemos desarrollado

Se explica lo que vamos a conseguir al final de la sección

Realizaremos todo el proceso necesario antes de comenzar a trabajar con la adaptación de la plantilla al proyecto Angular

Descarga de la plantilla y explicación del objetivo final de la sección

Configuración de los estilos predefinidos que utilizaremos en el template del panel de administración

Breve e introductoria explicación de como vamos a estructurar nuestra panel de administración antes de empezar a trabajar con ello

Traer a Angular sin hace uso de los componentes toda la información de la plantilla a convertir

Creación de los componentes necesarios que usaremos para estructurar el panel de administración

Haciendo uso de los componentes con todo bien refactorizado y ordenado

Funcionalidad del botón toggle, para poder abrir / cerrar el sidebar

Seguimos trabajando con la codificación de la funcionalidad del botón toggle, para poder abrir / cerrar el sidebar

Registro en Font Awesome, primeras nociones de como usarlo y añadir el primer icono de fuentes en nuestro botón toggle

Habilitamos la opción para navegar entre página mediante el router link

Personalizar la apariencia del sidebar y claves para añadir nuestros estilos personalizados

Personalizamos el botón toggle a nuestro gusto

Personalizamos los estilos del header aplicando unos sencillos ajustes y se dan la claves para poder personalizarlo a nuestro gusto

Personalización de los estilos del título

Copia de seguridad en nuestro repositorio para tener a salvo los cambios

Resumen de lo que hemos realizado en este sección mediante la publicación de esta funcionalidad

Introducción a lo que vamos a conseguir al finalizar esta sección

Pasos para instalar y configurar MongoDB Community Edition en Mac

Comenzamos a trabajar con la consola de mongo, con los comandos básicos

Primeras nociones con las colecciones de MongoDB.

Comenzamos a insertar documentos dentro de la colección con la función insert()

Insertamos documentos, haciendo uso de insertOne() para un documento y usando insertMany() para uno ó más documentos

Comenzamos a trabajar con la funcionalidad de búsqueda mediante filtrado añadiendo las condiciones necesarias para obtener lo que deseamos en todo momento

Filtrado mediante uso de operadores de comparación

Filtrar la información haciendo uso de los operadores lógicos disponibles

Segunda parte del filtrado de información haciendo uso de los operadores lógicos

Filtrando información mediante búsqueda usando expresiones regulares

Realizando la búsqueda, haciendo uso de todo lo aprendido en las búsquedas anteriormente

Aprenderemos a actualizar información dentro de nuestras bases de datos con los filtros e información aplicados

Pasos a seguir para poder borrar un documento o varios documentos

Pasos para instalar MongoDB Compass en Mac

Pasos a seguir para instalar MongoDB Compass

Vamos a trabajar con lo básico que necesitamos para arrancar en lo que respecta a la gestión y uso de la base de datos desde MongoDB Compass

Realizaremos las primeras acciones trabajando con las colecciones utilizando MongoDB Compass

Aprenderemos a insertar información mediante documentos en nuestras colecciones con MongoDB Compass

Enunciado de la práctica para practicar con las inserciones

Solución a la práctica donde practicaremos con la inserción de documentos

Empezamos a trabajar con las consultas básicas, ordenación, limitar resultados,...

Seguimos trabajando con las búsquedas y en este caso lo haremos mediante los operadores de comparación

Seguimos trabajando con las búsquedas y en este caso lo haremos mediante los operadores lógicos AND y NOT

Seguimos trabajando con las búsquedas y en este caso lo haremos mediante los operadores lógicos OR y NOR

Seguimos trabajando con las búsquedas donde vamos a ejecutar búsquedas haciendo uso de las expresiones regulares

Combinando todo lo aprendido en las búsquedas

Aprenderemos a actualizar la información de los documentos seleccionados

Aprenderemos a borrar los documentos seleccionados

Presentación de lo que realizaremos en la siguiente sección

Creamos el repositorio en Github para el Backend y lo iniciamos en Visual Studio Code

Creamos el fichero package.json necesario para empezar a trabajar con ello

Explicación sobre el uso de la versión mínima en el proyecto para no tener problemas

Fichero de configuración para trabajar con Typescript en el proyecto

Añadimos las dependencias necesarias para empezar a trabajar en el desarrollo de nuestra API

Configuración de los scripts para realizar las diferentes acciones como ejecutar en desarrollo, compilar, iniciar versión compilada,...

Crearemos el esqueleto principal del proyecto del servidor que usaremos como base en nuestra API

Configuración de las variables de entorno

Seguimos trabajando con las variables de entorno

Implementando las variables de entorno para usarlo en el servidor

Configuramos TSLint, para seguir unas normas establecidas para trabajar siguiendo unas pautas y escribir el código correctamente

Empezamos especificando la primera definición que será la primera funcionalidad

Configuración del ejecutable del schema para usarlo en nuestra API GraphQL

Realizamos el proceso necesario para poder dar solución a la definición añadida

Ponemos en marcha nuestro servidor con la API GraphQL y probamos que funciona correctamente la solución

Analizamos los valores que pasamos mediante el resolver, para saber que información lleva cada uno de ellos y que importancia tendrá en el desarrollo

Os añado las instrucciones para trabajar en la versión que expongo en el curso o con la actual

Proceso en el cual configuramos la conexión MongoDB para utilizarla en nuestro proyecto

Inicializar y añadir la instancia de la Base de datos para usarla dentro de los resolvers de manera compartida

Empezamos a definir la nueva funcionalidad para registrar usuarios y añadimos todo lo necesario en el schema

Empezamos con el proceso de registro de usuarios

Seguimos en el registro de usuarios

Haciendo la comprobación de la solución mediante el playground

Obtenemos lista de usuarios usando la base anterior y en este caso mediante la consulta en la Base de datos

Mejorando las respuestas donde devolveremos más información como el estado de la operación, el mensaje y los datos que hemos pedido

Definimos el Query para trabajar con el login en nuestra API

Empezamos a darle seguridad a nuestras sesiones con JWT (JSON Web Tokens) - Introducción

Formaremos el token con las configuraciones especificados

Verificación de los tokens

Iniciamos sesión obteniendo el token generado que usaremos para autenticarnos a partir de ahora

Aprendemos a probar el token desde la herramienta online de JWT.io

Añadimos la funcionalidad de validar si existe un usuario y devolveremos la respuesta completa

En este apartado vamos a dar más seguridad a nuestras contraseñas encriptándolas con el paquete bcrypt

Login con la comprobación del password encriptado

Autenticación de la sesión mediante uso del token creado al iniciar sesión

Configurando el contexto del apollo server, para poder hacer uso del token

Dar solución a la funcionalidad y aprenderemos a consumirlo en el playground

Backup del proyecto desarrollado hasta este punto

Realizamos el primer release en el backend y añadimos la información de lo que hemos desarrollado

Proceso para modularizar el schema de GraphQL

Implementando refactorización con lo desarrollado ahora

Os explico lo que vamos a conseguir cuando completemos esta sección

Comenzamos con una nueva funcionalidad y con ello, con una nueva rama

Aplicando buenas prácticas haciendo uso de los paths absolutos en vez de los los paths relativos

Configurando el path principal

Creación de los componentes para añadir el contenido de las estructura principal de la tienda

Breve introducción a la documentación oficial y a la información que encontramos en W3Schools

Construyendo el header principal de la tienda

Seguimos trabajando con el header modificando el contenido y mejorando el aspecto con CSS

Comenzamos trabajando con el navbar de la tienda

Definimos el componente footer con toda la información

Añadimos más información en el footer, con los enlaces a las Redes Sociales

Añadiendo la propiedad "Sticky-top" para dejar fijo el navbar al hacer scroll

Backup del proyecto y su publicación de la nueva versión

Información que tenemos que tener en cuenta

Pasamos las funciones de API Service al servicio que vamos a crear para la autenticación

Creamos el servicio de Usuarios para trabajar con la información de gestión como es visualizar los usuarios

Creación de las páginas necesarias y configuración de las rutas

Una vez realizada la introducción a SweetAlert2, empezamos instalando y configurando nuestro proyecto para trabajar con esta librería

Creamos nuestra primera notificación

Solucionamos el problema que nos daba cuando la sesión no estaba iniciada y nos daba error en la aplicación. Lo solucionamos paso a paso antes de la refactorización

Especificamos para poder establecer un rango de fechas. Mayor de 18 años y menor de 100 años respecto al día actual

Añadimos el formulario del registro desde la plantilla y añadimos el datepicker integrándolo en el formulario

Comenzamos adaptando el formulario en HTML hacia Angular con el objetivo de gestionar la información del registro

Segunda parte de la adaptación, añadiendo los elementos que nos quedan

Comenzamos con el proceso de validación del formulario para evitar enviar información no deseable

Asignamos una fecha por defecto para tener un valor por defecto

Mostrar los mensajes informativos de error para que se muestren cuando se dan las diferentes situaciones

Completaremos el registro después de validar la información y enviar los datos

Optimizamos las funciones para poder reutilizarlas

Realizamos los ajustes necesarios para añadir las redirecciones a las páginas registro y login dependiendo de la situación

Realizamos una copia de seguridad con lo desarrollado hasta ahora para no perder los progresos realizados

Realizamos la publicación de lo que hemos desarrollado en esta funcionalidad

Comenzamos hablando de lo que vamos a conseguir al finalizar esta sección

Explicación para detallar como va a ser la estructura de la base de datos a partir de la siguiente clase

Pasos a seguir para poner en marcha el apartado de la información de los productos de la tienda e información relacionada para poder trabajar con ello

Primeros pasos para poder gestionar la información de los géneros de los juegos

Obtenemos la lista de géneros

Creamos un servicio global, donde vamos a añadimos la estructura para definir las operaciones más comunes en nuestro backend como es listar, obtener detalles de un elemento, actualizar y borrar. Esto servirá para cualquier tipo de objeto que entre en escena en este proyecto u otros proyectos que hagamos en el futuro, pudiendo reutilizarlo

Empezamos a trabajar con el servicio general de los resolvers y obtenemos los géneros

Creamos el servicio específico de los géneros donde haremos uso del servicio principal para obtener la lista de géneros

Obtenemos el género seleccionado desde el resolver directamente

Obtenemos el género seleccionado desde el servicio de géneros

Comenzamos a trabajar con el apartado para añadir información de los géneros

Hacemos la comprobación para asegurarnos que estamos añadiendo un género para poder añadirlo

Una vez comprobado que ya tenemos un dato, comprobamos de que no exista ese dato para evitar duplicados

Añadir los géneros con los datos que introducimos nosotros

Comenzamos a trabajar con la funcionalidad para actualizar la información del género seleccionado

Realizamos la actualización sin validar las entradas

Terminamos la funcionalidad de la actualización añadiendo las validaciones necesarias

Refactorizamos la funcionalidad

Comenzar a trabajar con la acción de borrar información, trabajando con los géneros

Implementamos la solución a la funcionalidad de eliminar el dato seleccionado

Aplicamos  la refactorización de la funcionalidad

Refactorizando lo relacionado a los usuarios

Refactorizar funcionalidad login

Refactorizar la funcionalidad de la autenticación

Refactorizar la funcionalidad del registro

Actualizar el usuario - Implementación de la funcionalidad

Probando lo implementado en el video anterior

Implementamos el borrado del usuario seleccionado

Backup final de la sección y publicación