SAPUI5 para Principiantes: Construye tu Primer Proyecto Paso a Paso

Resumen

Este webinar, impartido por Jorge Briseño de Logali Group, está diseñado como una introducción a SAPUI5 para principiantes, comenzando desde cero. Se explican conceptos fundamentales como la diferencia entre Node.js y JavaScript, el significado de frameworks, paquetes y librerías (npm), las distinciones entre OpenUI5 y SAPUI5, y entre SAP Fiori y SAPUI5. También se aborda el patrón Model-View-Controller (MVC) y los formatos JSON y YAML. Se detalla la preparación del entorno de desarrollo local (Visual Studio Code, Node.js, Git, SAP Fiori Tools Extension Pack) y se explica la estructura básica de un proyecto SAPUI5. La sesión culmina con una demostración paso a paso para construir una primera aplicación SAPUI5 simple, incluyendo la configuración de archivos clave (package.json, ui5.yaml, index.html, manifest.json, Component.js), la creación de vistas (XML Views) y controladores, el uso de controles básicos, la implementación de modelos (JSON Model, Resource Model para i18n) y la configuración del UI5 Tooling para el servidor de desarrollo local. Adicionalmente, se menciona el Reto SAPUI5 de Logali Group.

Puedes ver la clase gratuita sobre este tema en nuestro canal de YouTube, donde podrás escuchar al docente hablar sobre este tema y las explicaciones que tiene para darte. Ver video aquí

1. Introducción al Webinar de SAPUI5 para Principiantes

2. Fundamentos Básicos
2.1. Node.js vs JavaScript: Analogía de la Casa Inteligente
2.2. Framework: Analogía del Kit de Construcción
2.3. NPM: Paquetes, Librerías y Frameworks
2.4. OpenUI5 vs SAPUI5: Diferencias Clave (Licencia, Soporte, Controles)
2.5. SAP Fiori vs SAPUI5: Diseño vs Tecnología
2.6. Modelo Vista Controlador (MVC): Patrón de Diseño
2.7. JSON vs YAML: Formatos de Datos y Configuración

3. Entorno de Desarrollo Local
3.1. Prerrequisitos (Visual Studio Code, Node.js, Git)
3.2. Instalación y Configuración de Extensiones (SAP Fiori Tools Extension Pack, Opcionales)
3.3. Verificación de la Instalación

4. Estructura del Proyecto SAPUI5
4.1. Archivos Raíz (package.json, ui5.yaml)
4.2. Carpeta webapp (Código Fuente)
4.3. Carpetas view, controller, model (Estructura MVC)
4.4. Carpeta/Archivo i18n (Internacionalización)
4.5. Archivo index.html (Bootstrap)
4.6. Archivo Component.js (Punto de Entrada Lógico)
4.7. Archivo manifest.json (Descriptor de la Aplicación)

5. Aspectos Básicos de JavaScript Relevantes
5.1. Declaración de Variables (var, let, const) y Alcance (Scope)
5.2. Tipos de Datos Dinámicos y Tipado Fuerte (Mención a TypeScript)
5.3. Convenciones de Nomenclatura (Ej. iNumber, sName)

6. Demo Práctica: Construcción del Primer Proyecto SAPUI5
6.1. Inicialización del Proyecto (npm init, package.json)
6.2. Creación del index.html Básico
6.3. Creación del manifest.json Básico
6.4. Configuración del UI5 Tooling (ui5.yaml, npm install @ui5/cli, ui5 init)
6.5. Implementación del Bootstrap en index.html (Carga de SAPUI5 Core)
6.6. Creación de la Vista XML (webapp/view/App.view.xml)
6.7. Creación del Controlador (webapp/controller/App.controller.js)
6.8. Asociación Vista-Controlador
6.9. Uso de Controles Básicos (sap.m.Text, sap.m.Button, sap.m.Input) y Eventos (press)
6.10. Implementación de un JSON Model Simple
6.11. Implementación de Textos Traducibles (i18n, Resource Model)
6.12. Introducción del Component.js y ComponentContainer
6.13. Configuración Completa del manifest.json (Modelos, Root View)
6.14. Uso de ComponentSupport en index.html
6.15. Uso de UI5 Tooling Avanzado (@sap/ux-ui5-tooling) para Recarga Automática

Conceptos Clave

• SAPUI5
• OpenUI5
• SAP Fiori (Principios de Diseño)
• Framework
• JavaScript
• Node.js (Entorno de ejecución)
• npm (Node Package Manager)
• Paquete, Librería
• MVC (Modelo Vista Controlador)
• JSON (JavaScript Object Notation)
• YAML (Yet Another Markup Language)
• Visual Studio Code (VS Code)
• Git
• SAP Fiori Tools Extension Pack
• Estructura de Proyecto SAPUI5 (webapp, package.json, ui5.yaml, manifest.json, index.html, Component.js)
• Vista XML (XML View)
• Controlador (.controller.js)
• Bootstrap (Carga inicial de SAPUI5)
• Controles SAPUI5 (sap.m.Button, sap.m.Text, sap.m.Input, sap.m.MessageToast)
• Modelos SAPUI5 (JSON Model, Resource Model)
• i18n (Internacionalización)
• UI5 Tooling (@ui5/cli, @sap/ux-ui5-tooling)
• ui5 serve (Comando para servidor local)
• manifest.json (Descriptor de Aplicación)
• Component.js / ComponentContainer

saphana

1. Introducción al Webinar de SAPUI5 para Principiantes

Este webinar, presentado por Jorge Briseño de Logali Group, tiene como objetivo introducir SAPUI5 desde cero, dirigido a principiantes. Se cubrirán los fundamentos teóricos necesarios antes de pasar a una demostración práctica para construir un primer proyecto paso a paso.

saphana

2. Fundamentos Básicos

2.1. Node.js vs JavaScript: Analogía de la Casa Inteligente

• JavaScript: Se presenta como el “idioma” o lenguaje de programación que permite definir acciones (comandos de voz en la analogía) para aplicaciones o páginas web.

Node.js: Se describe como el “micrófono con altavoz”, un entorno de ejecución que permite ejecutar archivos JavaScript fuera del navegador, en servidores, máquinas locales (Windows, Linux), contenedores Docker, etc., ampliando su alcance.

2.2. Framework: Analogía del Kit de Construcción

Un framework se explica como un “kit de construcción” para software. Es un conjunto de herramientas, estructuras y reglas predefinidas que facilitan y aceleran el desarrollo de aplicaciones, evitando tener que construir todo desde cero, similar a usar un kit prefabricado en lugar de comprar cada material por separado para una casa.

2.3. NPM: Paquetes, Librerías y Frameworks

• NPM (Node Package Manager): Es un gestor de paquetes para JavaScript que viene con Node.js. Permite descargar e instalar módulos (paquetes) de código desarrollados por terceros.
• Paquete: Un módulo publicado en npm. Puede contener clases, librerías o incluso frameworks.
• Librería: Un conjunto de funciones o clases diseñadas para realizar tareas específicas. Pueden ser parte de un framework.
• Framework: Una estructura completa que define cómo construir una aplicación, usualmente conteniendo múltiples librerías y paquetes, y estableciendo directrices de desarrollo.

2.4. OpenUI5 vs SAPUI5: Diferencias Clave (Licencia, Soporte, Controles)

• Ambos son frameworks para desarrollar aplicaciones UI5.
• OpenUI5: Es la base, de código abierto (licencia Apache 2.0), con soporte comunitario y un conjunto de controles y librerías fundamentales. Las actualizaciones pueden ser menos frecuentes.
• SAPUI5: Es la versión comercial propietaria de SAP, requiere licencia, ofrece soporte oficial de SAP, actualizaciones más frecuentes y un conjunto mucho más amplio de controles y librerías, especialmente para escenarios empresariales. Incluye todo lo de OpenUI5. La migración de OpenUI5 a SAPUI5 es técnicamente sencilla (cambiar la fuente de recursos).

2.5. SAP Fiori vs SAPUI5: Diseño vs Tecnología

• SAP Fiori: Es un conjunto de principios y directrices de diseño centrados en la experiencia del usuario (UX). Define cómo deben verse y comportarse las aplicaciones SAP modernas.
• SAPUI5: Es el framework tecnológico (basado en HTML, CSS, JavaScript) utilizado para construir aplicaciones que siguen las directrices de SAP Fiori.
• En resumen: SAPUI5 es la tecnología, SAP Fiori es el estándar de diseño/UX. Se puede crear una app SAPUI5 que no siga estrictamente Fiori, pero una app Fiori completa generalmente se construye con SAPUI5. Los controles SAPUI5 ya incorporan muchas de las directrices Fiori.

2.6. Modelo Vista Controlador (MVC): Patrón de Diseño

Se explica el patrón MVC usando la analogía de un televisor:

• Vista (View): La pantalla del televisor, la interfaz de usuario que ve el usuario (archivos XML en SAPUI5).
• Controlador (Controller): El control remoto, maneja la lógica y las interacciones del usuario (eventos), y actualiza la vista o el modelo (archivos .controller.js en SAPUI5).
• Modelo (Model): El proveedor de contenido (Netflix, cable), gestiona los datos de la aplicación y su lógica de negocio (archivos/objetos de datos en SAPUI5).
  El patrón separa estas responsabilidades para organizar mejor el código.

2.7. JSON vs YAML: Formatos de Datos y Configuración

• Ambos son formatos de texto para almacenar y organizar datos estructurados.
• JSON (JavaScript Object Notation): Prioriza la facilidad de procesamiento por máquinas. Ampliamente usado para intercambio de datos entre aplicaciones (APIs) y a veces para configuración. No soporta comentarios nativamente.
• YAML (Yet Another Markup Language): Prioriza la legibilidad humana. Muy usado para archivos de configuración (ej. en DevOps, UI5 Tooling). Soporta comentarios.

saphana

3. Entorno de Desarrollo Local

3.1. Prerrequisitos (Visual Studio Code, Node.js, Git)

Se indica la necesidad de instalar:

• Visual Studio Code: Editor de código recomendado.
• Node.js: Incluye npm, necesario para gestionar dependencias y ejecutar herramientas.
• Git: Sistema de control de versiones para respaldo y colaboración.

3.2. Instalación y Configuración de Extensiones (SAP Fiori Tools Extension Pack, Opcionales)

Dentro de VS Code, se recomienda instalar:

• SAP Fiori Tools Extension Pack: Extensión clave que proporciona herramientas y comandos para el desarrollo SAPUI5/Fiori.
• Opcionales: Material Icon Theme (iconos), GitHub Copilot (IA), XML Tools (ayuda con XML).

3.3. Verificación de la Instalación

Se sugiere verificar la instalación de SAP Fiori Tools ejecutando Open Template Wizard o Explore and Install Generators desde la paleta de comandos de VS Code. Se menciona un posible bug que requiere deshabilitar/rehabilitar la extensión si los comandos no aparecen.

saphana

4. Estructura del Proyecto SAPUI5

Se describe la estructura típica de carpetas y archivos:

• Carpeta Raíz:
  • package.json: Define metadatos del proyecto, dependencias (npm) y scripts. Generado con npm init.
  • ui5.yaml: Archivo de configuración para UI5 Tooling (servidor local, tareas de build). Generado con ui5 init.
• Carpeta webapp: Contiene el código fuente principal de la aplicación.
  • index.html: Punto de entrada HTML, carga (bootstrap) el SAPUI5 Core.
  • Component.js: Punto de entrada lógico principal de la aplicación, inicializa modelos, vistas, etc.
  • manifest.json: Descriptor de la aplicación (metadatos, configuración de rutas, modelos, vistas iniciales).
  • view/: Carpeta para las Vistas XML.
  • controller/: Carpeta para los Controladores JavaScript.
  • model/: (Opcional) Carpeta para lógica de modelos o archivos de modelo estáticos.
  • css/: (Opcional) Carpeta para estilos CSS personalizados.
  • i18n/: Carpeta para archivos de internacionalización (.properties).
  • localService/: (Opcional) Para simulación de servicios OData.

Carpeta test/: Para pruebas automatizadas y manuales.

saphana

5. Aspectos Básicos de JavaScript Relevantes

Se repasan conceptos clave de JavaScript necesarios para SAPUI5:

• Declaración de Variables:
  • var: Alcance de función, permite redeclaración (generalmente desaconsejado).
  • let: Alcance de bloque, no permite redeclaración en el mismo bloque, permite reasignación.
  • const: Alcance de bloque, no permite redeclaración ni reasignación (excepto propiedades de objetos/arrays).
• Tipos de Datos Dinámicos: JavaScript es débilmente tipado, una variable puede cambiar de tipo. Se contrasta con TypeScript (fuertemente tipado).

Convenciones: Se sugiere usar prefijos para indicar el tipo esperado (ej. sNombre para string, iNumero para integer, oModelo para objeto, aLista para array).

saphana

6. Demo Práctica: Construcción del Primer Proyecto SAPUI5

Se guía paso a paso la creación manual de una aplicación mínima:

• 6.1. Inicialización: npm init -y crea package.json.
• 6.2. index.html Básico: Se crea un HTML simple con head y body.
• 6.3. manifest.json Básico: Se crea un manifest.json inicial con la estructura sap.app, sap.ui, sap.ui5 y el id de la aplicación.
• 6.4. UI5 Tooling: Se instala @ui5/cli (npm install –save-dev @ui5/cli) y se inicializa con ui5 init, creando ui5.yaml. Se añade un script start en package.json para ejecutar ui5 serve -o index.html.
• 6.5. Bootstrap: Se añade el tag <script id=”sap-ui-bootstrap”> en index.html con atributos src (apuntando a los recursos UI5), data-sap-ui-theme, data-sap-ui-libs, data-sap-ui-compatVersion, data-sap-ui-async, data-sap-ui-oninit, data-sap-ui-resourceroots.
• 6.6. Vista XML: Se crea webapp/view/App.view.xml con la estructura <mvc:View> y se añaden controles (<Text>, <Button>).
• 6.7. Controlador: Se crea webapp/controller/App.controller.js usando sap.ui.define para importar sap/ui/core/mvc/Controller y se extiende. Se añade un método para manejar el evento press del botón.
• 6.8. Asociación: Se añade el atributo controllerName en la Vista XML apuntando al Controlador.
• 6.9. Controles y Eventos: Se instancia un sap.m.Text y sap.m.Button en la vista. Se usa sap.m.MessageToast.show en el controlador. Se añade un sap.m.Input.
• 6.10. JSON Model: Se crea un modelo JSON en el método onInit del controlador (new JSONModel(oData)), se adjunta a la vista (this.getView().setModel(oViewModel, “view”)) y se enlaza a la propiedad value del Input ({view>/name}).
• 6.11. i18n: Se crea webapp/i18n/i18n.properties. Se instancia un Resource Model en onInit (new ResourceModel(…)), se adjunta a la vista (this.getView().setModel(oResourceModel, “i18n”)) y se usa para obtener textos traducibles (oBundle.getText(“key”, [params])) en el controlador y en la vista ({i18n>key}).
• 6.12. Component.js: Se crea webapp/Component.js extendiendo sap/ui/core/UIComponent. Se mueve la inicialización de modelos al método init del componente. Se modifica index.html para cargar el componente mediante sap/ui/core/ComponentSupport o sap/ui/core/ComponentContainer.
• 6.13. manifest.json Completo: Se mueve la configuración de modelos (i18n) y la rootView al manifest.json.
• 6.14. ComponentSupport: Se simplifica index.html usando data-sap-ui-oninit=”module:sap/ui/core/ComponentSupport” y un div con data-sap-ui-component.
• 6.15. UI5 Tooling Avanzado: Se instala @sap/ux-ui5-tooling (npm install –save-dev @sap/ux-ui5-tooling). Se configura ui5.yaml para usar fiori-tools-appreload (recarga automática) y fiori-tools-proxy (para cargar recursos UI5 eficientemente en desarrollo local). Se modifica el script start para usar npx fiori run –open index.html.

Conclusión

Este webinar proporciona una base sólida para principiantes en SAPUI5, cubriendo desde conceptos teóricos esenciales como JavaScript, Node.js, MVC y las diferencias entre OpenUI5/SAPUI5 y Fiori/SAPUI5, hasta la configuración práctica del entorno de desarrollo y la estructura fundamental de un proyecto. La demostración guiada permite entender el proceso inicial de creación de una aplicación, incluyendo vistas, controladores, modelos básicos y el uso de herramientas como UI5 Tooling. Estos fundamentos son cruciales para adentrarse en el desarrollo de interfaces de usuario modernas en el ecosistema SAP.

Recomendación de Curso

Basado en el contenido del texto, el curso más relevante de Logali Group es el Master en SAPUI5, ver aquí.

• Justificación: El webinar actúa como una introducción (“para principiantes”) y explícitamente menciona un “Reto” que conduce a becas para el Master en SAPUI5. El contenido del webinar (fundamentos, estructura, demo básica) sienta las bases que serían expandidas en un curso completo como el máster, donde se profundizaría en controles más complejos, servicios OData, navegación, despliegue, y temas avanzados como TypeScript (mencionado en la sesión de Q&A).