Qué aprenderás

Fundamentos de programación web: HTML, CSS, Git & GitHub, Node.js y el ecosistema npm, las bases que todo desarrollador de interfaces necesita.
JavaScript y TypeScript desde cero: del lenguaje a la programación asíncrona (promesas, async/await) y al tipado profesional que usarás durante todo el máster.
Fundamentos de SAPUI5: domina el framework de referencia del ecosistema SAP, sus librerías y sus controles.
Arquitectura MVC: estructura aplicaciones escalables separando lógica de negocio, interfaz y datos.
Desarrollo Freestyle con TypeScript: crea aplicaciones desde cero con total libertad de diseño y tipado de extremo a extremo.
Experiencia de Usuario (UX) Fiori: aplica las SAP Fiori Design Guidelines para lograr usabilidad y coherencia visual en cada pantalla.
OData V4 a fondo: el modelo, los bindings y los contextos; consultas server-side ($filter, $orderby, $count, $batch) y consumo eficiente de servicios ABAP RAP.
El modo borrador (Draft): el ciclo completo Edit → autosave → Activate/Discard sobre un caso real, donde el trabajo del usuario nunca se pierde.
Operaciones CRUD profesionales: una clase de servicio centralizada, validaciones propias, manejo de errores del backend, indicadores de ocupado que nunca se congelan y mensajes por i18n.
Value helps, fragmentos y diálogos: patrones reutilizables de búsqueda y selección con carga dinámica y caché.
Acciones de negocio y efectos secundarios: libera y rechaza tickets en masa y ve la lista actualizarse en vivo, sin recargar.
Despliegue en los dos mundos: Cloud Foundry + SAP Build Work Zone en BTP, y el SAP Fiori Launchpad On-Premise con sus catálogos, espacios y roles.
Mejores prácticas de SAP: estándares de codificación, internacionalización completa y patrones de la industria para software mantenible y de alto rendimiento.

Descripción del curso

Conviértete en desarrollador de interfaces SAP y domina el estándar de experiencia de usuario más demandado del ecosistema empresarial: SAPUI5.

Este máster te lleva de cero a experto, sin dar nada por sabido. Empiezas construyendo cimientos sólidos —programación web (HTML, CSS, Git, Node.js), JavaScript y TypeScript, la teoría de SAP Fiori y tus primeras aplicaciones SAPUI5— y terminas desarrollando un caso real de principio a fin: el Promotion Ticket Cockpit, la reingeniería de una aplicación productiva real.

Ese proyecto lo construyes como una app maestro-detalle Freestyle con TypeScript sobre un servicio OData V4 con Draft (ABAP RAP): filtros y consultas server-side, Flexible Column Layout, Object Page, el ciclo completo del modo borrador (crear, editar con autoguardado, activar, descartar), CRUD centralizado, validaciones, value helps, acciones de negocio masivas y efectos secundarios en tiempo real.

La diferencia está en el desarrollo Freestyle: libertad total para diseñar interfaces a medida sin perder la coherencia visual de SAP Fiori. Y el cierre es doblemente real: despliegas tu aplicación en SAP BTP (Cloud Foundry + SAP Build Work Zone) y en el SAP Fiori Launchpad On-Premise, con catálogos, espacios, páginas y roles. Software empresarial de alta calidad, en cualquier dispositivo y en cualquier paisaje de sistemas.

A quién va dirigido

Perfiles que se inician en la programación: el máster arranca desde los fundamentos web. Solo necesitas nociones básicas y ganas de construir.
Consultores y desarrolladores ABAP: el complemento perfecto para modernizar tu perfil técnico y dar el salto a la capa de presentación de SAP.
Desarrolladores web (JavaScript, React, Angular…): tu experiencia acelera el camino y aquí la conviertes en un perfil SAP altamente demandado.
Consultores funcionales SAP: entiende —y construye— las aplicaciones Fiori que hoy solo parametrizas.
Quienes aprenden haciendo: un proyecto real de principio a fin, con laboratorios, soluciones y tests en cada etapa.

Requisitos

Nociones básicas de programación: saber qué es una variable, una condición y un bucle es suficiente; el resto se aprende aquí.
Sin conocimientos previos de SAPUI5 ni de SAP: el programa inicia desde las bases más elementales del desarrollo web.
JavaScript o TypeScript no son requisito: el primer bloque los enseña desde cero, aunque si ya los conoces avanzarás más rápido.
Un ordenador con permisos de instalación: Node.js, Visual Studio Code y Git, con la instalación guiada paso a paso.
Enfoque práctico: ideal para quienes prefieren aprender construyendo proyectos reales desde el primer día.

Contenido del curso

Bloque 1 - Fundamentos de Programación Web

1. Unidad 1 - Visual Studio Code

1.1. Instalación y configuración de Visual Studio Code
1.2. Extensiones recomendadas para desarrollo web
1.3. Live Server y flujo de trabajo básico

2. Unidad 2 - HyperText Markup Language - HTML

2.1. ¿Qué es HTML y para qué sirve?
2.2. Estructura base de un HTML
2.3. Etiquetas de contenido
2.4. Etiquetas multimedia
2.5. Etiquetas de formularios
2.6. Etiquetas self-closing y etiquetas con cierre explícito

3. Unidad 3 - Hojas de Estilo en Cascada - CSS

3.1. ¿Qué es CSS y cómo se vincula a un HTML?
3.2. Formas de aplicar CSS
3.3. Selectores en CSS
3.4. Propiedades de texto
3.5. Propiedades de fondo
3.6. Modelo de caja
3.7. Layout básico

4. Unidad 4 - Fundamentos de JavaScript

4.1. ¿Qué es JavaScript?
4.2. Variables y declaraciones: var, let y const
4.3. Estructura de datos y tipos
4.4. Bucles e iteración
4.5. Expresiones y operadores
4.6. Representando fechas y horas
4.7. Funciones: declaración, expresión y arrow functions
4.8. Uso de clases
4.9. Flujo de control y manejo de errores
4.10. Expresiones regulares

5. Unidad 5 - JavaScript Asíncrono

5.1. ¿Qué es la programación asíncrona?
5.2. Síncrono vs. asíncrono
5.3. Uso de promesas
5.4. Async y Await en la práctica

6. Unidad 6 - Fundamentos de TypeScript

6.1. ¿Qué es TypeScript?
6.2. Configuración del proyecto con tsconfig.json
6.3. Los tipos primitivos
6.4. Tipos de unión
6.5. Tipos de aserciones
6.6. Tipos de alias e interfaces
6.7. Funciones tipadas en TypeScript
6.8. Clases, métodos y encapsulamiento
6.9. Constructores y herencia de clases
6.10. Modularización con Import y Export

7. Unidad 7 - Node.js y el Ecosistema npm

7.1. ¿Qué es Node.js?
7.2. Instalación de Node.js
7.3. Orden de ejecución
7.4. Event Loop y el modelo de concurrencia
7.5. Diferencia entre npm y npx
7.6. Inicialización de un proyecto con npm init
7.7. Paquetes y módulos en Node.js
7.8. Dependencias de producción y desarrollo

8. Unidad 8 - Git y GitHub

8.1. ¿Qué es un sistema de control de versiones?
8.2. Instalación de Git
8.3. Configuración global
8.4. Inicialización y estado del repositorio
8.5. Staging, commits y registro de cambios
8.6. Gestión de ramas con git branch
8.7. Cambio entre ramas
8.8. Repositorios remotos con git remote
8.9. Publicación de cambios con git push
8.10. Sincronización con git pull
8.11. Clonación de repositorios

Bloque 2 - Conceptos Teóricos de SAP Fiori / UI5

9. Unidad 9 - Fundamentos teóricos de UI5

9.1. Introducción a SAP Fiori
9.2. Los 5 principios de SAP Fiori
9.3. SAP Fiori Design Guidelines
9.4. OpenUI5 & SAPUI5
9.5. SAP Fiori Elements y Floorplans estándar
9.6. Flexible Programming Model
9.7. SAPUI5 Flexibility
9.8. Extension Project & Adaptation Project
9.9. UI5 Web Components

10. Unidad 10 - Modelo Vista Controlador - MVC

10.1. ¿Qué es el patrón MVC y por qué SAPUI5 lo usa?
10.2. XML View (estándar recomendado)
10.3. Typed View (alternativa en TypeScript)
10.4. ¿Por qué XML Views y no JS Views?
10.5. Controller en JavaScript
10.6. Controller en TypeScript
10.7. Controller - ciclo de vida
10.8. Models - OData Models
10.9. Models - JSON Model
10.10. Models - XML Model
10.11. Models - Resource Model (i18n)

11. Unidad 11 - Namespaces y Librerías SAPUI5

11.1. ¿Qué es un namespace en SAPUI5?
11.2. Grid Controls: controles de disposición en cuadrícula
11.3. Semantic Page: página con acciones contextuales
11.4. sap.ui.core - controles base
11.5. sap.m - controles móviles/responsivos
11.6. sap.f - controles Fiori avanzados
11.7. sap.ui.comp - Smart Controls
11.8. sap.ui.mdc - Metadata-Driven Controls
11.9. sap.suite.ui.commons: controles avanzados de suite
11.10. sap.suite.ui.microchart: micro-gráficos
11.11. sap.ui.table: tabla de escritorio con scroll virtual
11.12. sap.ui.vk: Visual Kit para modelos 3D
11.13. sap.uxap: Object Page y componentes UX avanzados
11.14. sap.tnt - Tool Navigation
11.15. sap.ui.codeeditor: editor de código integrado
11.16. sap.ui.richtexteditor: editor de texto enriquecido

12. Unidad 12 - Decisiones arquitectónicas

12.1. ¿Freestyle SAPUI5 vs. Fiori Elements?
12.2. Pages: ¿cuál debo seleccionar?
12.3. Tables: ¿cuál debo seleccionar?
12.4. Forms: ¿cuál debo seleccionar?
12.5. Lists: ¿cuál debo seleccionar?

13. Unidad 13 - Introducción a OData

13.1. REST y el protocolo OData
13.2. Estructura de una URL OData
13.3. Entity Data Model y $metadata
13.4. OData V2 & OData V4
13.5. Query Options: filtros, ordenamiento y paginación
13.6. Navegación entre entidades (Navigation Properties)
13.7. Operaciones CRUD
13.8. Batch Requests: agrupación de peticiones
13.9. Function Imports (V2) y Actions/Functions (V4)

Bloque 3 - Entorno y Herramientas de Desarrollo en Local

14. Unidad 14 - UI5 CLI: Command Line Interface

14.1. Instalación local y global
14.2. ui5 init
14.3. Explicación del ui5.yaml
14.4. ui5 use y ui5 add
14.5. ui5 server
14.6. ui5 build
14.7. Otros comandos de UI5 CLI

15. Unidad 15 - UI5 Plugins for Claude Code

15.1. ¿Qué es Claude Code y su sistema de plugins?
15.2. UI5 Plugin: instalación y configuración
15.3. Consulta de API y documentación SAPUI5 desde Claude Code
15.4. Detección y corrección de errores UI5
15.5. MCP Server vs. Skills: ¿cuándo usar cada uno?

Bloque 4 - Anatomía de un Proyecto SAPUI5

16. Unidad 16 - Visión general de una aplicación SAPUI5

16.1. Los tres archivos fundamentales: manifest.json, Component.js e index.html
16.2. Estructura de carpetas: webapp, controller, view, model, i18n
16.3. La carpeta test y localService
16.4. Standalone App vs. App para SAP Fiori Launchpad
16.5. Component-preload y optimización de recursos
16.6. Mejores prácticas de estructura

17. Unidad 17 - Bootstrapping y configuración del runtime

17.1. El proceso de inicialización paso a paso
17.2. El script de bootstrap en index.html
17.3. Carga asíncrona y ComponentSupport
17.4. Carga desde CDN y cache buster
17.5. Content Security Policy y Core.ready()

18. Unidad 18 - Componentes

18.1. Tipos de componentes: Component y UIComponent
18.2. Component.js: estructura y metadata
18.3. IAsyncContentCreation y createContent
18.4. El Owner Component
18.5. ComponentContainer y ciclo de vida
18.6. Componentes anidados y componentUsages

19. Unidad 19 - Manifiesto

19.1. El descriptor de aplicaciones: qué es y para qué sirve
19.2. Namespace sap.app: identidad y dataSources
19.3. Namespace sap.ui: iconos y deviceTypes
19.4. Namespace sap.ui5: dependencies, models y routing
19.5. Manifest First y versionado del descriptor

Bloque 5 - Desarrollo Práctico de una Aplicación SAPUI5

20. Unidad 20 - La vista maestro con filtros y tabla de datos

20.1. Creación del proyecto con UI5 Tooling
20.2. Dynamic Page como floorplan principal
20.3. FilterBar y criterios de búsqueda
20.4. sap.m.Table: columnas y celdas personalizadas
20.5. JSON Model como fuente de datos local
20.6. Filtrado de registros desde el FilterBar

21. Unidad 21 - Diálogos y formularios para gestión de registros

21.1. Fragments y reutilización de interfaz
21.2. Dialog con SimpleForm
21.3. Apertura y cierre del diálogo desde el controlador
21.4. Inserción de registros en el JSON Model
21.5. Validación de campos del formulario
21.6. Edición y eliminación de registros

22. Unidad 22 - Carga de datos desde archivos Excel

22.1. Integración de SheetJS en el proyecto
22.2. FileUploader y selección de archivos
22.3. Lectura y mapeo de columnas del Excel
22.4. Inserción masiva de datos en la tabla
22.5. Gestión de errores en la carga

23. Unidad 23 - Navegación entre vistas y página de detalle

23.1. Routing y configuración de rutas
23.2. Definición de targets en el manifest.json
23.3. Navegación desde la tabla al detalle
23.4. Object Page Layout: secciones y subsecciones
23.5. Datos de solo lectura en el Object Page
23.6. Navegación de retorno

24. Unidad 24 - Controles personalizados

24.1. ¿Cuándo crear un control propio?
24.2. Metadata, propiedades y eventos
24.3. Renderer y generación del DOM
24.4. Integración del control en el Object Page
24.5. Manejo de eventos del control

25. Unidad 25 - Conexión a un servicio OData remoto

25.1. Northwind como servicio de pruebas
25.2. Configuración del Mock Server con ui5-mockserver.yaml
25.3. Archivos de datos simulados (mockdata)
25.4. Binding de la tabla al OData Model
25.5. Binding del Object Page al OData Model
25.6. Filtros OData con $filter

26. Unidad 26 - Migración del proyecto a TypeScript

26.1. Preparación del proyecto para la conversión
26.2. Migración de controladores
26.3. Migración del control personalizado
26.4. Compilación y verificación de la aplicación

Bloque 6 - Entorno y Herramientas de Desarrollo en Cloud

27. Unidad 27 - Servicios OData V4 y Destinos

27.1. ABAP RESTful Application Programming Model
27.2. El protocolo OData V4
27.3. Servicio OData V4 - Liberación de Tickets
27.4. Destinos
27.5. Creando el destino

28. Unidad 28 - SAP Business Application Studio

28.1. SAP Business Application Studio
28.2. SAP Business Application Studio - Extensiones
28.3. MultiTarget Application
28.4. App Router
28.5. SAP Fiori Generator - Freestyle
28.6. Modelo Vista Controlador

Bloque 7 - Proyecto Base y Vista Maestra

29. Unidad 29 - Arquitectura del proyecto

29.1. Estructura del proyecto
29.2. Librerías y dependencias de desarrollo
29.3. Middlewares
29.4. Consumo del servicio - Metadata
29.5. Component.ts y manifest.json
29.6. Models - JSONModel

30. Unidad 30 - BaseController y DynamicPage

30.1. BaseController
30.2. Extensión de los controladores
30.3. SAP Fiori Guidelines - Dynamic Page
30.4. Definición de la vista maestra

31. Unidad 31 - Aggregation Binding e i18n

31.1. SAP Fiori Guidelines - Responsive Table
31.2. Entidad principal - Ticket
31.3. Definición de la tabla
31.4. Tabla adaptativa
31.5. Internacionalización (i18n)

32. Unidad 32 - Formatters y tipos de datos

32.1. core:require - dependencias declaradas en la vista
32.2. Formatter - Status
32.3. Tipos de datos OData
32.4. DateFormat y Format Options
32.5. Formatter - Request Date

33. Unidad 33 - Consultas de datos y List Binding

33.1. Opciones de consulta en OData V4
33.2. Parámetro - $count
33.3. Evento - updateFinished
33.4. Parámetro - $orderby
33.5. Otros parámetros del binding ($$)

34. Unidad 34 - Barra de Filtros (FilterBar)

34.1. SAP Fiori Guidelines - Filter Bar
34.2. FilterBar y FilterGroupItem
34.3. Parámetro - $$sharedRequest
34.4. Evento - search
34.5. Constructor de filtros
34.6. Dinámica de los filtros (FilterBarUtil)
34.7. Instancia de la clase FilterBarUtil
34.8. Limpieza de los filtros

Bloque 8 - Flexible Column Layout

35. Unidad 35 - Enrutamiento

35.1. Shell y App
35.2. SAP Fiori Guidelines - Flexible Column Layout
35.3. Vista padre - Container
35.4. SAP Fiori Guidelines - Object Page Layout
35.5. Vista de detalle - Details
35.6. Configuración de rutas y objetivos (targets)
35.7. Not Found con IllustratedMessage

36. Unidad 36 - Navegación

36.1. Enrutamiento por parámetros
36.2. Navegación - Item y Binding Context
36.3. Captura de argumentos
36.4. Elemento de enlace (bindElement)

37. Unidad 37 - Object Page Layout

37.1. Sección General - SimpleForm
37.2. Sección Items - Table
37.3. Column Footer y HBox
37.4. Método recalculateTotal - Total de la Columna
37.5. Sección Notes - SimpleForm
37.6. El modelo de vista - propiedad editMode
37.7. Botones del layout
37.8. Full Screen y Close
37.9. Object Page Layout - Footer
37.10. Object Page Layout - Actions
37.11. editMode en acción

Bloque 9 - Modo Borrador (Draft) y el CRUD

38. Unidad 38 - Modo Borrador (Draft)

38.1. El concepto del modo borrador
38.2. Tabla persistente y tabla borrador - RAP
38.3. IsActiveEntity, HasActiveEntity, HasDraftEntity
38.4. Las acciones del draft - Edit, Activate, Discard y Resume

39. Unidad 39 - El modelo OData V4 y las librerías personalizadas

39.1. ODataModel
39.2. ODataListBinding
39.3. ODataContextBinding
39.4. Context
39.5. TicketService
39.6. SimpleFormValidator

40. Unidad 40 - Fragmentos y Diálogos

40.1. Fragmentos y Diálogos
40.2. Instancia del fragmento con el loadFragment
40.3. Apertura, cierre y limpieza del diálogo
40.4. SelectDialog - Value Help
40.5. Value Help de Clientes - búsqueda server-side y confirmación
40.6. Conversión ALPHA - los ceros a la izquierda

41. Unidad 41 - Creación y activación de contextos

41.1. Método validate
41.2. Parámetro $select
41.3. Guardar y activar contextos
41.4. Value Help - Order Type
41.5. Behavior - Order Type
41.6. Reutilización de fragmentos
41.7. Carga dinámica con caché

42. Unidad 42 - Edición, cancelación y eliminación de contextos

42.1. Preservación de cambios (PreserveChanges)
42.2. Borrador huérfano
42.3. Método edit - Entidad Activa
42.4. El filtro draft-or-active
42.5. Value Help - Materials
42.6. Behavior - Materials
42.7. Agregar y eliminar posiciones
42.8. Cancelar los cambios
42.9. Eliminar la entidad activa - método remove

Bloque 10 - Acciones y Efectos Secundarios

43. Unidad 43 - Efectos Secundarios

43.1. EventBus
43.2. BaseController - EventBus
43.3. EventBus - Subscribe y Unsubscribe
43.4. requestSideEffects - refresco selectivo de campos

44. Unidad 44 - Acciones

44.1. Formulario - Fragment y Dialog
44.2. Acción - Release
44.3. Acción - Reject

Bloque 11 - Despliegue y administración en el Launchpad y en SAP Build Work Zone

45. Unidad 45 - Build y Deploy

45.1. Configuración previa al build del Cloud
45.2. Build + Deploy en Cloud Foundry
45.3. Deploy en el On-Premise

46. Unidad 46 - SAP Build Work Zone

46.1. SAP Build Work Zone Standard Edition
46.2. SAP Cloud Identity Services
46.3. Identity Provider
46.4. Technical User y Business User
46.5. Roles - SAP Build Work Zone
46.6. Content Manager - App
46.7. Content Manager - Space y Page
46.8. Content Manager - Role
46.9. Site Directory y Role
46.10. X-Frame-Options
46.11. Frame Options en SAPUI5
46.12. Content Security Policy

47. Unidad 47 - SAP Fiori Launchpad

47.1. Catálogo técnico y catálogo comercial
47.2. Objeto Semántico y Acción
47.3. Catálogo técnico personalizado
47.4. Catálogo comercial personalizado
47.5. Espacio, Página y Sección
47.6. PFCG - Roles
47.7. SAP Fiori Launchpad

Cronograma de Clases en Vivo

Horario: 8:00 AM - 10:00 AM

Cada sábado. Las sesiones quedan grabadas para verlas cuando quieras.

sábado, 19 de septiembre 2026 Fundamentos de programación y herramientas de desarrollo en local

sábado, 26 de septiembre 2026 HTML y CSS

sábado, 3 de octubre 2026 JavaScript y TypeScript

sábado, 10 de octubre 2026 Arquitectura de un proyecto SAPUI5

sábado, 17 de octubre 2026 Primeros pasos con SAPUI5

sábado, 24 de octubre 2026 Entornos y herramientas de desarrollo en la nube

sábado, 31 de octubre 2026 BaseController and DynamicPage

sábado, 7 de noviembre 2026 Flexible Column Layout y Vista Maestra

sábado, 14 de noviembre 2026 Formateadores, contextos y barras de filtros

sábado, 21 de noviembre 2026 Object Page Layout y Vista de Detalle

sábado, 28 de noviembre 2026 Operaciones, validaciones, efectos secundarios y acciones

sábado, 5 de diciembre 2026 SAP Fiori Launchpad y SAP Build Work Zone

4 semanas para proyecto final Desarrollo y entrega del proyecto de certificación

Tu instructor

Jorge Briceño

SAP Fiori | SAPUI5 | SAP BTP | SAP CAP | Fiori Elements

Ingeniero en Informática y Licenciado en Educación, especializado en desarrollo de aplicaciones en el ecosistema SAP. Trabaja con tecnologías como SAPUI5, SAP Fiori Elements, CAP y ABAP RESTful, así como en la administración de SAP Fiori en entornos Cloud y On-Premise, formando profesionales en la creación de aplicaciones empresariales modernas.

Certificaciones:

SAP Certified - SAP Fiori Application Developer

SAP Certified - Back-End Developer - ABAP Cloud

SAP Certified - SAP Fiori System Administration

SAP Certified - Backend Developer - SAP Cloud Application Programming Model

Ver perfil completo LinkedIn

Ver conceptos clave Consulta el glosario completo de términos SAP relacionados.