Desarrollo SAPUI5 – De Cero a Avanzado

Entornos de desarrollo

Solución – Laboratorio
Entornos de desarrollo
Desarrollo SAPUI5 – De Cero a Avanzado

1
 Desarrollo SAPUI5 – De Cero a Avanzado
Entornos de desarrollo

Contenido
1. Registro en SAP y creación de cuenta trial en SAP Cloud Platform ................................... 3
1.1. Registro en sap.com .................................................................................................. 3
1.2. Creación de la cuenta trial en SAP Cloud Platform .................................................... 6
2. SAP Web IDE ................................................................................................................... 10
2.1. Acceso ..................................................................................................................... 10
2.2. Creación del proyecto SAPUI5 ................................................................................. 11

2
 Desarrollo SAPUI5 – De Cero a Avanzado
Entornos de desarrollo

1. Registro en SAP y creación de cuenta trial en SAP Cloud Platform

1.1. Registro en sap.com

En un navegador accedemos a sap.com y seleccionamos el icono Log On

para realizar el registro.

Añadimos los datos solicitados en el formulario de registro:

3
 Desarrollo SAPUI5 – De Cero a Avanzado
Entornos de desarrollo

• Correo personal válido (será necesario validar la cuenta a través de este

correo)
• Nombre y apellidos
• Compañía
• País
• Teléfono (Opcional)
• Relación con SAP
• Contraseña

4
 Desarrollo SAPUI5 – De Cero a Avanzado
Entornos de desarrollo

En unos minutos recibiremos el email de confirmación:

Pulsamos el botón “Click to activate your account” del contenido del email
para activar la cuenta.

5
 Desarrollo SAPUI5 – De Cero a Avanzado
Entornos de desarrollo

1.2. Creación de la cuenta trial en SAP Cloud Platform

Una vez activada la cuenta, accedemos a la siguiente URL para crear la

cuenta trial en Coud Platform https://account.hanatrial.ondemand.com

En el caso de no haber introducido el número de teléfono en el formulario

de registro en sap.com, se solicitará agregarlo para recibir el código de
confirmación.

Agregamos el número del teléfono y continuamos con el botón “New

Code”. Se recibirá un nuevo código en el número introducido.

6
 Desarrollo SAPUI5 – De Cero a Avanzado
Entornos de desarrollo

7
 Desarrollo SAPUI5 – De Cero a Avanzado
Entornos de desarrollo

Una vez verificado el número del teléfono, se podrá acceder a la cuenta.

A continuación, seleccionamos la región correspondiente.

8
 Desarrollo SAPUI5 – De Cero a Avanzado
Entornos de desarrollo

De esta forma ya se dispone de la cuenta confirmada.

9
 Desarrollo SAPUI5 – De Cero a Avanzado
Entornos de desarrollo

2. SAP Web IDE

2.1. Acceso

Continuando con la anterior actividad, en la URL

https://account.hanatrial.ondemand.com, pulsamos el botón “Launch SAP
Web IDE” para acceder a Web IDE.

10
 Desarrollo SAPUI5 – De Cero a Avanzado
Entornos de desarrollo

2.2. Creación del proyecto SAPUI5

En el entorno de desarrollo podemos crear proyectos de cero, proyectos

desde una plantilla o proyectos de extensión de aplicaciones.

En la pestaña “Development” se accede al entorno de trabajo o al llamado

“Workspace”.

11
 Desarrollo SAPUI5 – De Cero a Avanzado
Entornos de desarrollo

En la pestaña lateral derecha, se encuentran las siguientes herramientas

para el desarrollo de aplicaciones:
➢ Búsqueda por carpeta, proyecto o Workspace.
➢ Repositorio GIT
➢ Histórico GIT
➢ Listado de funciones
➢ Pantalla de depuración
➢ Resultados de tests

12
 Desarrollo SAPUI5 – De Cero a Avanzado
Entornos de desarrollo

Para crear un proyecto en base a una plantilla utilizamos la opción File-

>New->Project from Template.

Buscamos por el nombre de la plantilla “sapui5” y seleccionamos “SAPUI5

Application”.

13
 Desarrollo SAPUI5 – De Cero a Avanzado
Entornos de desarrollo

Como nombre de Proyecto, indicamos “MyFirstProject” y como namespace

“logali.group”. El namespace servirá para hacer referencia a la raíz del
proyecto.

14
 Desarrollo SAPUI5 – De Cero a Avanzado
Entornos de desarrollo

La herramienta generará todos los archivos necesarios para la ejecución de

la aplicación.

Realizamos una modificación en el archivo index.html, cambiando la librería

de SAPUI5 para utilizar la última estable.
“https://sapui5.hana.ondemand.com/resources/sap-ui-core.js”

15
 Desarrollo SAPUI5 – De Cero a Avanzado
Entornos de desarrollo

Para ejecutar la aplicación es necesario utilizamos la opción del botón

“Play” seleccionando el fichero “index.html”.

Al abrirse una ventana externa, la primera vez, se bloquea, por lo que hay
que darle permiso de apertura.
16
 Desarrollo SAPUI5 – De Cero a Avanzado
Entornos de desarrollo

17