Básico a Avanzado
Adquirí fluidez con REACT JS + TypeScript - Proyectos con Inteligencia Artificial sin necesidad de conocimientos previos
Certificado oficial emitido por la SEPA través del Gobierno del Estado de México
12 meses de acceso
En línea · 60 h
20 unidades
Qué aprenderás
Lo que serás capaz de hacer
En este curso podrás evolucionar, de manera muy gradual, en tu conocimiento de REACT. Iremos desde lo más sencillo, hasta cuestiones complejas, como proyectos con TypeScript o Full Stack, pero siempre de forma natural y en cámara lenta. Este curso está pensado para vos, que querés aprender REACT o acabás de terminar el curso de REACT y sentís que sabés, pero a la hora de implementar tus conocimientos todo te resulta muy difícil o forzado y la primera sensación que viene a tu cabeza es la pregunta: ¿Soy capaz de programar? Mi respuesta es que sí , solo que no todos nacimos con una máquina de calcular en la cabeza. Así que mi propuesta es la siguiente: un camino suave que nos lleve a la cima . Dejaremos que otros quieran escalar por la pared vertical, nosotros iremos por un sendero disfrutando el paisaje. El curso empieza de a poco, para familiarizarte con en el entorno. Luego, cuando ya todo te parece sencillo, darás el siguiente paso. Y así, hasta tener un conocimiento natural de cuestiones básicas y, también, complejas de REACT, que te permitirán continuar el camino por tu cuenta hasta el límite que tú decidas poner. Incluso, haremos proyectos con modelos de Inteligencia Artificial, en dónde aprenderás a combinarlos con React y que solo tu imaginación sea el límite! En resumen, el sendero de aprendizaje será el siguiente: aclimatación, ejercicios, aclimatación, ejercicios, aclimatación, ejercicios y así, hasta que trabajar con React sea más sencillo que sacar una foto con tu celular.
- Incorporar conocimientos de manera natural y sencilla.
- Fluidez en el armado y uso de las funciones.
- Naturalización en el uso de los hooks.
- Resolver cuestiones complejas, de la forma más sencilla posible.
- useState, useReducer, useEffects, hooks personalizados, TypeScript
- Proyectos con IA - Inteligencia Artificial
Temario
UNIDAD 1 - Introducción · 2 leccionesUNIDAD 1 - Introducción
UNIDAD 1 - Introducción · 2 lecciones
UNIDAD 1 - Introducción
- Introducción
- Instalando React Vite
UNIDAD 2 - Primeros pasos · 6 leccionesUNIDAD 2 - Primeros pasos
UNIDAD 2 - Primeros pasos · 6 lecciones
UNIDAD 2 - Primeros pasos
- Creamos un componente e imprimimos un título en pantalla
- Creamos un botón que nos devuelve un mensaje
- Creamos un botón contador
- Creamos un contador que suma y resta
- Creamos un contador que suma y resta con useState
- Guardamos todos los ejercicios en una carpeta
UNIDAD 3 - useState - Primera parte con button - Descubrí el hook más utilizado de REACT · 5 leccionesUNIDAD 3 - useState - Primera parte con button - Descubrí el hook más utilizado de REACT
UNIDAD 3 - useState - Primera parte con button - Descubrí el hook más utilizado de REACT · 5 lecciones
UNIDAD 3 - useState - Primera parte con button - Descubrí el hook más utilizado de REACT
- useState - Modificamos el texto de un botón
- useState - Creamos un ternario para cambiar el título del botón cada vez que hac
- useState - Utilizamos dos useState en el mismo ejercicio
- useState - Utilizamos tres useState en el mismo ejercicio y cambiamos el color d
- useState - Combinamos un Input y un Botón con dos useState
UNIDAD 4 - useState - Segunda parte con Input - Descubrí el hook más utilizado de REACT · 5 leccionesUNIDAD 4 - useState - Segunda parte con Input - Descubrí el hook más utilizado de REACT
UNIDAD 4 - useState - Segunda parte con Input - Descubrí el hook más utilizado de REACT · 5 lecciones
UNIDAD 4 - useState - Segunda parte con Input - Descubrí el hook más utilizado de REACT
- useState - Input - Creamos una función para contar los caracteres restantes
- useState - Input - Creamos una calculadora simple
- useState - Input - Creamos un listado de tareas
- useState - Input - Validamos una contraseña
- useState - Input - Utilizamos useEffect para hacer un contador de caracteres
UNIDAD 5 - useEffect - Ejercicios sencillos para aprender a llamar una API con este hook · 4 leccionesUNIDAD 5 - useEffect - Ejercicios sencillos para aprender a llamar una API con este hook
UNIDAD 5 - useEffect - Ejercicios sencillos para aprender a llamar una API con este hook · 4 lecciones
UNIDAD 5 - useEffect - Ejercicios sencillos para aprender a llamar una API con este hook
- useEffect - Simpulamos una llamada a una API
- useEffect - Lllamamos a una API con fetch .then y catch
- useEffect - Obtenemos usuarios desde una API utilizando async await
- 21 - useEffect - Obtenemos datos de una API con axios
UNIDAD 6 - Carrito de compras · 22 leccionesUNIDAD 6 - Carrito de compras
UNIDAD 6 - Carrito de compras · 22 lecciones
UNIDAD 6 - Carrito de compras
- Carrito de Compras - Introducción
- Inicio del proyecto - Carrito Automóviles
- Agrego el contenido y los estilos - Carrito Automóviles
- Creamos los componentes Header y Automovil - Carrito Automovil
- Simulamos la Base de Datos y la llamamos en App
- Mapeamos los objetos de la db
- Extraemos los datos de cada objeto y los pasamos al componente Automóvil
- Habilitamos el botón "Agregar al Carrito"
- Utilizamos useState para acceder al contenido que actualizará el carrito
- Verificamos si en el carrito existe un objeto con el mismo id que el item
- Agregamos items en nuestro carrito a través de useState
- Pasamos las propiedades del item en el carrito para poder visualizarlo
- Con el método reduce calculamos el Total a pagar
- Creamos un ternario que separa los objetos del aviso de Carrito Vacío
- Aprendemos a Eliminar items del carrito
- Restamos items del Carrito
- Sumamos items del Carrito
- Activamos el botón para Vaciar el Carrito
- Agregamos localStorage
- Creamos un hook para guardar nuestras funciones
- Validando los props
- Deploy de nuestro React de Automóviles, en Github
UNIDAD 7 - Gestor de citas · 22 leccionesUNIDAD 7 - Gestor de citas
UNIDAD 7 - Gestor de citas · 22 lecciones
UNIDAD 7 - Gestor de citas
- Introducción al proyecto de Gestión de Citas
- Creando el proyecto Gestión de Citas
- Instalamos Tailwind en el proyecto Gestión de Citas - Actualizado Marzo 2025
- Creamos los componentes y primeros pasos con Tailwind
- Le damos estilos a SelectorCitas
- Le damos estilos a CalendarioCitas
- Creamos un hook personalizado y mostramos las Citas disponibles
- Mapeamos el Select y mostramos todas las citas
- Creamos la función para Seleccionar las citas
- Creamos la función para Reservar Citas
- Creamos la función para Cancelar citas
- Finalizamos el proyecto con una función para resetear y localStorage
- Realizamos el deploy del proyecto en Github
- Comenzamos Gestion de Citas con useReducer
- Mostramos las Citas disponibles
- Mostramos las citas en el Selector de Citas
- Creamos el if para Reservar Cita
- Creamos el if para Cancelar Cita
- Creamos el if para Resetear el Formulario
- Creamos la función de LocalStorage
- Realizamos el deploy en Github de la aplicación con useReducer
- Comparamos Switch vs If y useReducer vs useState
UNIDAD 8 - Gestión de Tareas utilizando ContextAPI y useReducer · 13 leccionesUNIDAD 8 - Gestión de Tareas utilizando ContextAPI y useReducer
UNIDAD 8 - Gestión de Tareas utilizando ContextAPI y useReducer · 13 lecciones
UNIDAD 8 - Gestión de Tareas utilizando ContextAPI y useReducer
- Introducción - Gestor de Tareas
- Instalación de Tailwind CSS Actualizada a marzo 2025
- Creamos y damos Formato al proyecto - Gestión de Tareas
- Creamos los componentes - Gestión de Tareas con Etiquetas
- Le damos estilo a los componentes - Gestión de Tareas con Etiquetas
- Configuramos el Reducer el Hook y el Context - Gestión de Tareas con Etiquetas
- Creamos la función para Agregar Tareas
- Pasamos la función para Agregar Tareas en el Formulario - Gestión de Tareas
- Mostramos las tareas - Gestión de Tareas con Etiquetas
- Aprendemos a Eliminar las Tareas - Gestión de Tareas con Etiquetas
- Mostramos las etiquetas en el select - Gestión de Tareas con Etiquetas
- Finalizamos el Filtro y la aplicación - Gestión de Tareas con Etiquetas
- Deploy - Gestión de Tareas con Etiquetas
UNIDAD 9 - Dashboard con REDUCER y contextAPI · 22 leccionesUNIDAD 9 - Dashboard con REDUCER y contextAPI
UNIDAD 9 - Dashboard con REDUCER y contextAPI · 22 lecciones
UNIDAD 9 - Dashboard con REDUCER y contextAPI
- 01 - Introducción al proyecto para crear un Dashboard con ApexCharts
- Instalación de Tailwind CSS Actualizada a marzo 2025
- Configuración general del proyecto con Tailwind CSS
- Enlazamos los primeros componentes y diseñamos el Título y el Reset
- Diseñamos el Formulario Principal
- Diseñamos el Formulario para Editar los Gráficos
- Diseñamos los Gráficos con React ApexChart
- Configuramos el Reducer el hook y el context
- Definimos el manejo de envío del formulario principal - parte 1
- Definimos el manejo de envío del formulario principal - parte 2
- Creamos el select con los Tipos de Gráficos
- Capturamos los datos para crear el gráfico con handleSubmit
- Los datos del Formulario Principal viajan hasta el reducer para modificar e
- Renderizamos los datos y mostramos los gráficos
- Definimos el Formulario de Edición de Gráficos
- Procesamos los datos de EditorGraficos con handleSubmit
- Enviamos los datos al reducer y comprobamos que funcione todo el handleSubm
- Creamos el Modal Eliminar y creamos un hook para abrirlo y cerrarlo
- Le damos funcionalidad al Modal Eliminar
- Activamos el botón Resetear Aplicación
- Configuramos localStorage con useEffect
- Deploy en Github
UNIDAD 10 - React con TypeScript - Ejercicios básicos · 6 leccionesUNIDAD 10 - React con TypeScript - Ejercicios básicos
UNIDAD 10 - React con TypeScript - Ejercicios básicos · 6 lecciones
UNIDAD 10 - React con TypeScript - Ejercicios básicos
- Introducción
- Ejercicio básico con TypeScript - Data Persona
- Ejercicio básico de TypeScript - Control Visibilidad
- Listado de Tareas con TypeScript - Configuración general - Parte 1
- Listado de Tareas con TypeScript - AgregarTarea - Parte 2
- Listado de Tareas con TypeScript - Lista de Tareas - Parte 3
UNIDAD 11 - Diagrama de Gantt - Gestor de Proyectos - con TypeScript · 20 leccionesUNIDAD 11 - Diagrama de Gantt - Gestor de Proyectos - con TypeScript
UNIDAD 11 - Diagrama de Gantt - Gestor de Proyectos - con TypeScript · 20 lecciones
UNIDAD 11 - Diagrama de Gantt - Gestor de Proyectos - con TypeScript
- Introducción - Frappé Gantt con TypeScript
- Instalación de Tailwind CSS Actualizada a marzo 2025
- Instalamos dependencias y limpiamos el código
- Probamos la dependencia de Frappe Gantt y diseñamos el entorno general
- Estructura básica del formulario
- Definimos los estados de los imputs y armamos la lógica del formulario
- Definimos los setters en el formulario
- Procesamos los datos en handleSubmit
- Creamos el reducer el hook y el context. Pasamos los primeros datos
- Mostramos las tareas en el select
- Diseñamos la estructura básica del componente GanttTareas
- Declaramos el componente react-frappe-gantt
- Utilizamos useEffect para transformar las tareas al formato de Frappé Gantt
- Configuramos las vistas del Gantt
- Diseñamos e implementamos el Modal
- Creamos la función en el Formulario que nos habilita la edición de tareas
- Trabajamos sobre la acción de Editar Tareas
- Trabajamos sobre la acción de Eliminar Tareas
- Configuramos Local Storage
- Deploy del proyecto en Github
UNIDAD 12 - Proyecto de Gestión de Tareas con Zustand React-Hook-Form y Toastify · 23 leccionesUNIDAD 12 - Proyecto de Gestión de Tareas con Zustand React-Hook-Form y Toastify
UNIDAD 12 - Proyecto de Gestión de Tareas con Zustand React-Hook-Form y Toastify · 23 lecciones
UNIDAD 12 - Proyecto de Gestión de Tareas con Zustand React-Hook-Form y Toastify
- Introducción a Zustand React-Hook-Form y Toastify
- Introducción a Listado de Tareas con Zustand
- Instalación de Tailwind CSS Actualizada a marzo 2025
- Limpiamos el proyecto e instalamos Tailwind CSS
- Creamos los componentes del Formulario y el Listado de Tareas
- Instalamos React-Hook-Form
- Importamos useForm y hacemos la primera validación
- Validamos el resto del Formulario con react-hook-form
- Creamos el type Tarea y su Draft
- Instalamos Zustand y creamos el store
- Agregamos Tareas al store
- Agregamos un id a las Tareas y las pasamos a ListaTareas
- Comenzamos a imprimir información de las Tareas
- Corregimos el diseño del Listado de Tareas y reseteamos el Formulario
- Creamos un ternario para el Listado de Tareas y los botones Editar y Eliminar
- Eliminamos las Tareas
- Creamos ActivarId para guardar el id de la Tarea al Editarla
- Implementamos Buenas Prácticas en ListaTareas
- Instalamos Redux DevTools para visualizar activarId
- Autocompletamos el Formulario con la Tarea para Editar
- Modificamos la Tarea y la Actualizamos
- Implementamos Toastify para las notificaciones
- Trabajamos en LocalStorage y realizamos el Deploy en Github
UNIDAD 13 - Migramos y Refactorizamos el carrito de compras de automóviles con Zustand · 9 leccionesUNIDAD 13 - Migramos y Refactorizamos el carrito de compras de automóviles con Zustand
UNIDAD 13 - Migramos y Refactorizamos el carrito de compras de automóviles con Zustand · 9 lecciones
UNIDAD 13 - Migramos y Refactorizamos el carrito de compras de automóviles con Zustand
- Introducción - Migración y Refactorización Carrito de Compras
- Migración de html y estilos - Carrito de Compras
- Mostramos los autos y refactorizamos código
- Creamos el Store y la función para agregar al Carrito
- Pasamos los datos del artículo al carrito
- Eliminamos del carrito y vaciamos el carrito
- Actualizamos la cantidad de items de un producto en el carrito
- Mostramos el monto total y guardamos en localStorage
- Realizamos el deploy en Github
UNIDAD 14 - Buscador de imágenes con Zustand, React-Hook-Form y API · 21 leccionesUNIDAD 14 - Buscador de imágenes con Zustand, React-Hook-Form y API
UNIDAD 14 - Buscador de imágenes con Zustand, React-Hook-Form y API · 21 lecciones
UNIDAD 14 - Buscador de imágenes con Zustand, React-Hook-Form y API
- Introducción proyecto Buscador de Imágenes con la API de Unsplash
- Instalamos Vite
- Instalación de Tailwind CSS Actualizada a marzo 2025
- Le damos los estilos generales en App
- Diseñamos el input de búsqueda y le damos estilos
- Configuramos React-Hook-Form y agregamos el mensaje de error
- Hacemos un boceto del diseño de la página de resultados
- Recorremos Unsplash y obtenemos la key para nuestra aplicación
- Configuramos los primeros types
- Creamos el store y la función para obtener los datos de búsqueda
- Configuramos el Formulario de Búsqueda y obtenemos respuesta de la API
- Mostramos las imágenes en pantalla
- Diseño de paginación - Primera parte
- Diseño de pag - Segunda Parte - Obtenemos la página actual y el total de páginas
- Lógica de paginación - Primera Parte
- Lógica de paginación - Segunda Parte
- Reiniciamos la paginación al actualizar el término de búsqueda
- Terminamos de darle funcionalidad a la paginación
- Resolvemos detalles finales
- Utilizamos useMemo para evitar renderizados innecesarios
- Ocultamos la Key y realizamos el deploy en GitHub y Netlify
UNIDAD 15 - Creamos un chatbot con IA (Inteligencia Artificial) y le damos "personalidad" · 15 leccionesUNIDAD 15 - Creamos un chatbot con IA (Inteligencia Artificial) y le damos "personalidad"
UNIDAD 15 - Creamos un chatbot con IA (Inteligencia Artificial) y le damos "personalidad" · 15 lecciones
UNIDAD 15 - Creamos un chatbot con IA (Inteligencia Artificial) y le damos "personalidad"
- Introducción - ¿Qué chat con IA crearemos?
- Creamos el proyecto con Vite
- Instalamos Tailwind CSS
- Instalamos y Configuramos React-Router-Dom
- Diseñamos la ventana del chat
- Implementamos React-Hook-Form y Valibot en el formulario del chat
- Creamos useChatStore y la función para agregar mensajes al chat
- Conectamos la estructura de mensajes del store con el chat
- Creamos la lógica del chat y la conectamos con el store
- Recorremos la plataforma Groq
- Creamos la función para conectarnos a la consola de Groq
- Conectamos el modelo con VentanChat
- Creamos un historial para poder tener una conversación con la IA
- Corregimos diseño y mejoramos la experiencia de usuario
- Realizamos el deploy de nuestro bot
UNIDAD 16 - Agregamos herramientas de descarga y análisis de documentos al chatbot con IA · 24 leccionesUNIDAD 16 - Agregamos herramientas de descarga y análisis de documentos al chatbot con IA
UNIDAD 16 - Agregamos herramientas de descarga y análisis de documentos al chatbot con IA · 24 lecciones
UNIDAD 16 - Agregamos herramientas de descarga y análisis de documentos al chatbot con IA
- Introducción
- Mejoramos la experiencia Responsive
- Diseñamos la interface para adjuntar y analizar archivos
- Hacemos las primeras validaciones en AdjuntarArchivo
- Comenzamos a procesar los archivos por su tipo - TXT
- Conectamos AdjuntarArchivo con IndexVentanaChat y analizamos un TXT
- Leemos y procesamos archivos de tipo DOCX
- Procesamos y extraemos el texto de un PDF
- Procesamos y extraemos archivos XLSX
- Corregimos el diseño de las burbujas para poder mostrar correctamente los XLSX
- Creamos la página Documentos y la linkeamos con el chat
- Creamos el botón para poder Descargar respuestas de la IA.
- Descargamos en formato TXT
- Descargamos en formato PDF
- Descargamos en formato DOCX - WORD
- Descargamos en formato XLSX
- Creamos la función para agregar documentos a la página Documentos
- Diseñamos la página Documentos
- Mostramos los documentos descargados en la página Documentos
- Creamos la función para eliminar documentos en la página Documentos
- Activamos el botón Borrar todo en Documentos
- Le damos funcionalidad a la edición de títulos.
- Reutilizamos las funciones para descargar los archivos
- Deploy del chat completo en netlify
UNIDAD 17 - PERN - Proyecto FullStack - Creamos y guardamos productos con una Base de Datos · 40 leccionesUNIDAD 17 - PERN - Proyecto FullStack - Creamos y guardamos productos con una Base de Datos
UNIDAD 17 - PERN - Proyecto FullStack - Creamos y guardamos productos con una Base de Datos · 40 lecciones
UNIDAD 17 - PERN - Proyecto FullStack - Creamos y guardamos productos con una Base de Datos
- Introducción - ¿Cómo funciona un proyecto FullStack con una BD relacional?
- PERN - Listado de Productos - El proyecto que vamos a construir
- Creamos el server e instalamos las primeras dependencias
- Configuramos la importación y exportación con nodemon
- Configuramos la app y encendemos el servidor
- Configuración básica de las rutas
- Probamos Thunder Client y Postman para nuestras rutas
- Inicializamos Prisma creamos una BD en Render y realizamos la Baseline
- Generamos el cliente de Prisma
- Instalamos y configuramos DBeaver
- Configuramos controllers y creamos el primer Producto
- Creamos el handler para listar todos los productos
- Creamos el Manejador de errores global
- Creamos un middleware con Valibot
- Reglas para validar la creación de un producto
- Instalamos react y creamos el cliente (frontend)
- Instalamos Tailwindcss
- Creamos la estructura del front
- Configuramos las rutas en el main con react-router-dom
- Configuramos y le damos estilo a App
- Configuramos y le damos diseño al Nav
- Creamos la página Not Found
- Creamos el diseño del Listado de Productos
- Creamos el diseño de ProductNew
- Intalamos Axios y TanStack
- Configuramos apiclient.ts con axios
- Declaramos los endpoints del backend que utilizaremos para listar y crear prod
- Creamos el hook para listar los productos
- Vamos al Server y activamos cors
- Configuramos la página para listar los productos
- Creamos el hook para crear productos
- Configuramos el formulario para crear nuevos productos
- DEPLOY - PASO 1 - Configuramos CORS para Producción
- DEPLOY - PASO 2 - Agregamos scripts en package.json
- DEPLOY - PASO 3 - Subimos el Server a Github
- DEPLOY - PASO 4 - Realizamos el Deploy del Web Service para el servidor Render
- DEPLOY - PASO 5 - Subimos a Github el cliente - frontend
- DEPLOY - PASO 6 - Configuramos Vercel lo conectamos con Render y probamos la app
- ¿VENCIÓ TU PRUEBA GRATIS EN RENDER? Creamos una nueva BD y la reemplazamos
- Seguimos el flujo de datos desde que se crea el Producto hasta que llega a la BD
UNIDAD 18 - PERN - Proyecto FullStack - Editamos productos con una Base de Datos · 19 leccionesUNIDAD 18 - PERN - Proyecto FullStack - Editamos productos con una Base de Datos
UNIDAD 18 - PERN - Proyecto FullStack - Editamos productos con una Base de Datos · 19 lecciones
UNIDAD 18 - PERN - Proyecto FullStack - Editamos productos con una Base de Datos
- Agregamos las acciones Editar y Eliminar en el diseño
- Server - Esquema para Editar
- Server - controller para Editar
- Server - Reconectamos el DBeaver con la nueva api de Render
- Server - Probamos el PATCH en Thunder Client
- Client - Instalamos React-Hook-Form y Radix
- Client - Limpiamos ProductNew y lo dejamos listo para refactorizar
- Client - Actualizamos ProductNew con react-hook-form
- Client - Declaramos la función que hará el PATCH
- Client - Creamos el Hook para el PATCH
- Client - Ordenamos los Types en un solo archivo para que sean reutilizables
- Client - Armamos la estructura general del modal Radix
- Client - Diseñamos el modal de Radix
- Client - Activamos el botón editar y pasamos los datos del producto al modal
- Client - Ya podemos ver id name y price en el modal
- Client - Ya podemos Cancelar y resetear el modal
- Client - Ya podemos cambiar los datos y ejecutamos el PATCH
- Client - Trabajamos sobre los errors y el prop busy
- Revisamos el flujo de datos para la función Editar
UNIDAD 19 - PERN - Proyecto FullStack - Eliminamos productos de una Base de Datos · 11 leccionesUNIDAD 19 - PERN - Proyecto FullStack - Eliminamos productos de una Base de Datos
UNIDAD 19 - PERN - Proyecto FullStack - Eliminamos productos de una Base de Datos · 11 lecciones
UNIDAD 19 - PERN - Proyecto FullStack - Eliminamos productos de una Base de Datos
- Diseñamos el modal para eliminar con Radix
- Client - Activamos el botón para abrir el modal Eliminar
- Client - Activamos el botón Cancelar
- Client - Activamos el botón Eliminar
- Client - Llevamos los datos del producto al modal de confirmación
- Client - Escribimos la función para eliminar en products y el hook
- Client - Escribimos la función para pasar la orden de eliminar al modal
- Client - Revisamos el flujo del front para eliminar un producto
- Server - creamos un middleware para validar el id a eliminar
- Server - Trabajamos en el product.schema y creamos el handler
- Deploy - Redeployamos el proyecto en Render y Vercel
UNIDAD 20 - PERN - Proyecto FullStack - Analizamos la Base de Datos con IA · 17 leccionesUNIDAD 20 - PERN - Proyecto FullStack - Analizamos la Base de Datos con IA
UNIDAD 20 - PERN - Proyecto FullStack - Analizamos la Base de Datos con IA · 17 lecciones
UNIDAD 20 - PERN - Proyecto FullStack - Analizamos la Base de Datos con IA
- Presentación de la Sección IA
- Client - Comenzamos a diseñar la interface para implementar IA
- Client - Diseñamos el botón para analizar con IA
- Client - Función para llamar al backend con un get y la IA pueda analizar
- Client - Creamos el Hook para pedir el análisis con IA
- Client - Activamos el botón para abrir el modal de la IA
- Server - Instalamos el SDK de Groq y generamos un API Key de Groq
- Server - Escribimos la estructura general del controlador para la IA
- Server - Escribimos los Types y las primeras líneas del aiController
- Server - Realizamos cálculos para estadísticas simples dentro del controller
- Server - Creamos el prompt para la IA
- Server - Llamamos a la IA y obtenemos los primeros resultados
- Client - Pasamos los types para la ia desde el backend al front
- Client - Reacomodamos el código en ProductList para trabajar mejor
- Client - Pasamos los datos y las funciones a las props del modal
- Client - Conectamos los datos desde ProductList al ModalIA y obtenemos los resul
- Realizamos el deploy con el botón de IA en funcionamiento
Certificado oficial
Tu certificado lo emite la SEP, no solo una plataforma
Al demostrar la competencia recibes un certificado emitido por la Secretaría de Educación Pública a través del Gobierno del Estado de México: un documento oficial que puedes presentar con confianza ante cualquier empleador o institución.
Tu certificado con INEC
- Lo emite la Secretaría de Educación Pública (SEP), a través del Gobierno del Estado de México
- Documento oficial con folio verificable en línea
- Lo otorga la Universidad Tecnológica Fidel Velázquez
Otras plataformas en línea
- Constancia privada emitida por la misma plataforma
- Solo acredita horas cursadas o asistencia
- Sin respaldo de una autoridad educativa
Cómo funciona
Tu itinerario, de la inscripción al certificado
- 1
Inscripción con pago único
Pagas $2,800 MXN una sola vez y entras de inmediato al curso.
- 2
Estudias a tu ritmo
20 unidades con videos, lecturas y actividades, disponibles 24/7 durante 12 meses.
- 3
Cuestionarios por unidad
Cuestionarios para comprobar lo aprendido.
- 4
Certificado
Emitido por la SEP a través del Gobierno del Estado de México, con folio verificable.
Lo que obtienes
Un certificado oficial de la SEP
Muestra · verificable por folio y QR
- Emitido por la Secretaría de Educación Pública (SEP), a través del Gobierno del Estado de México. No es una constancia privada: es un documento oficial, y ese respaldo marca la diferencia frente a otras plataformas en línea.
- Contenido impartido por Agustín Machado.
- Folio y QR verificables para compartirlo con quien te contrate.
Medios que necesitas
Equipo de cómputo
Conexión estable a internet
Pago único
Empieza hoy, a tu ritmo
Un solo pago y acceso inmediato al curso completo durante 12 meses.
- 20 unidades · 306 lecciones · 60 h
- 12 meses de acceso
- Certificado emitido por la SEP (Gob. del Estado de México) con folio verificable
Preguntas frecuentes
Sobre tu inscripción
¿Cómo es el pago?
Un solo pago de $2,800 MXN. No hay mensualidades ni cargos recurrentes.
¿Cuánto tiempo tengo acceso?
12 meses desde tu inscripción, 24/7, para avanzar a tu ritmo.
¿Quién imparte el contenido?
El curso es impartido por Agustín Machado; INEC gestiona tu inscripción, evaluación y certificado.
¿Qué pasa cuando vence mi acceso?
Puedes renovar tu cuenta tú mismo desde la plataforma, sin trámites ni esperas.
