• Inicio
  • Novedades
  • Academia SAP
  • FAQ
  • Blog
  • Contacto
S4PCADEMY_Logo
  • Inicio
  • Novedades
  • Academia SAP
  • FAQ
  • Blog
  • Contacto
Twitter Linkedin Instagram

S4PCADEMY_Logo
  • Inicio
  • Novedades
  • Academia SAP
  • FAQ
  • Blog
  • Contacto
Twitter Linkedin Instagram
Technical Articles

Alojar una aplicación UI5 sin servidor en AWS

By s4pcademy 


Estimada comunidad,

El siguiente blog lo guiará para implementar una aplicación UI5 en AWS S3 con Dynamo DB como base de datos back-end, Lambda como la capa de lógica comercial y la puerta de enlace API que actúa como una conexión entre el cliente (UI) y Lambda.

Arquitectura

Arquitectura

Ahora abordemos estas capas una por una.

Dirígete a tu cuenta de AWS y busca S3. Haga clic en la opción Crear cubo como se muestra a continuación.

Crear%20depósito

Crear depósito

En la ventana que aparece, escriba un nombre único para su depósito. Tenga en cuenta que el nombre debe ser único en todas las cuentas y regiones.lo que significa que si elijo el nombre de mi depósito para que sea demo-app-archisman, no podrá usar el mismo nombre aunque esté trabajando en su propia cuenta privada (y tal vez en una región separada).

Desmarque «Bloquear todo el acceso público» como se muestra a continuación.

Manteniendo el resto de la configuración como predeterminada, presione el botón Crear cubo. Debería poder ver un nuevo depósito público creado.

A continuación, navegaremos a nuestro depósito y editaremos la política del depósito para «Permitir» Obtenga acceso a todos los objetos almacenados en nuestro depósito.

Tipo de política: política de depósito S3

Efecto: Permitir

Principal: *

Acción: ObtenerObjeto

ARN: arn:aws:s3:::demo-app-archisman/* (asegúrese de pegar su propio nombre de recurso de Amazon único aquí y agregue /* al final, lo que significa que estamos otorgando acceso a GetObject a todos los objetos dentro de nuestro depósito )

Una vez que haya agregado correctamente la declaración anterior, genere la política.

Debería poder ver una ventana emergente con la política generada en formato JSON. Cópialo al portapapeles.

Pegue el JSON copiado anteriormente en el área de texto de la política del depósito como se muestra a continuación y guarde los cambios.

Ahora que hemos eliminado la política de depósitos, subamos nuestra aplicación web UI5 a S3. Vaya a la pestaña Objetos y haga clic en el botón Cargar.

Seleccione todos los archivos y arrástrelos y suéltelos en la sección Cargar.

Haga clic en Cargar. Una vez que se complete la carga, podrá ver los archivos y carpetas cargados en la pestaña Objetos.

Ahora que los archivos de la aplicación web están cargados, debemos decirle explícitamente a S3 que vamos a alojar un sitio web estático.

Vaya a la pestaña Propiedades y en la última sección haga clic en el botón Editar para «Alojamiento de sitios web estáticos».

Edite las siguientes propiedades y guarde los cambios.

Regrese a la misma sección de alojamiento de sitios web estáticos y debería poder ver una URL de punto final. Haga clic en la URL y su aplicación UI5 estará en funcionamiento.

Para mí, es una interfaz de aplicación de chat simple.

Ahora que tenemos un sitio web estático en funcionamiento, trabajemos en el backend para que nuestra aplicación sea interactiva.

Nuestra elección de base de datos aquí es Dynamo DB, que se parece mucho a NoSql Mongo DB. Siguiendo con el tema de nuestra aplicación, esta base de datos nuevamente no tiene servidor, por lo que no debemos preocuparnos por aprovisionar el servidor adecuado para alojar nuestra base de datos.

Diríjase al servicio de AWS Dynamo DB y haga clic en Crear tabla.

Escriba el nombre de su tabla, la clave de partición (sinónimo de clave principal de SQL) y la clave de ordenación (que es opcional). Si no está seguro acerca de las Unidades de capacidad de lectura y las Unidades de capacidad de escritura, manténgalas como predeterminadas. Sin embargo, es importante comprenderlos al diseñar una aplicación lista para producción, ya que determinan el rendimiento de su base de datos. Estas unidades ayudan a Dynamo DB a decidir la cantidad de particiones que se crearán y, a su vez, la eficiencia con la que la base de datos devuelve el resultado de una consulta.

Haga clic en Crear tabla.

Una vez creada la tabla, navegue hasta la tabla y cree algunos elementos (filas).

Vista JSON para el elemento anterior. Quería mostrar esta vista de Dynamo DB del JSON especialmente porque esta comprensión de la estructura será necesaria cuando escriba sus funciones lambda. «S» denota cadena, «L» denota lista/matriz y «M» denota mapa/objeto.

Cree tantas tablas como requiera su aplicación y pase a crear la capa de lógica empresarial, es decir, funciones lambda.

Nuestras funciones lambda básicamente interactuarán con nuestras tablas de base de datos anteriores para realizar operaciones CRUD. Diríjase al servicio AWS Lambda y cree sus funciones lambda según los requisitos de su aplicación. Aquí hemos utilizado Node como lenguaje de programación.

OBTENER Operación:

La siguiente función lambda muestra cómo obtener todos los registros de la tabla de la base de datos. La función «unmarshall» resaltada convierte el elemento de un objeto db de dynamo (como se muestra arriba) en un objeto JSON normal con el que estamos familiarizados.

GET Operación por ID

La siguiente función lambda muestra cómo obtener registros de la tabla de la base de datos en función de la clave principal.

Post operacion

A continuación, la función lambda muestra cómo insertar un registro en la base de datos.

Ahora que tenemos nuestra interfaz de usuario y la lógica de back-end configuradas, lo único que queda es conectar estos 2. Ahí es donde la puerta de enlace API entra en escena.

Diríjase a AWS service API Gateway y haga clic en Crear API. Elija el servicio API REST y haga clic en Build.

Asigne un nombre a su API y haga que el tipo de punto final esté optimizado para Edge. Haga clic en Crear API.

Una vez que se crea la API, haga clic en Acciones y presione Crear recurso.

Escriba el Nombre del recurso y haga clic en Crear recurso.

Ahora en este recurso queremos crear un método GET.

En la siguiente ventana, escriba el nombre de su función lambda y presione guardar.

Una vez guardado, debería poder ver este tipo de tubería creada.

Haga clic en Prueba. En la siguiente ventana, vuelva a hacer clic en el botón Prueba. Debería poder ver la salida de su función lambda que se devuelve como se muestra a continuación.

Ahora suponga que su equipo está dividido en diferentes equipos de front-end y back-end y su función lambda está devolviendo información redundante que no desea filtrar a su capa de interfaz de usuario. En el escenario anterior, los encabezados son una sección que mi lado del cliente no tendrá interés en conocer. API Gateway proporciona una función de modelado mediante la cual podemos remodelar/filtrar nuestra estructura de salida según lo requiera la aplicación del lado del cliente. Utiliza el lenguaje Velocity Templating y a continuación se muestra una versión simple.

Vaya a la sección Modelos y cree un nuevo modelo.

Cree un esquema JSON de la salida que devuelve la función lambda y guarde su modelo.

Ahora regrese a Recursos y haga clic en Respuesta de integración.

Agregue una plantilla de tipo «aplicación/json» y, en el menú desplegable Generar plantilla, seleccione el modelo que creó en el paso anterior.

A continuación se muestra la plantilla generada a partir del modelo.

En la plantilla anterior, eliminaré la sección de encabezados (ya que no quiero que esa información fluya a mi interfaz de usuario), cambiaré el nombre de la tecla «cuerpo» a «resultados» y reemplazaré TODO con cuerpo. Además, los valores ficticios deben reemplazarse con el nombre real de la clave. La plantilla modificada se verá como se muestra a continuación.

Guarde la plantilla, vuelva a Ejecución del método y vuelva a probar la API GET. La respuesta cambiará de la que probamos anteriormente.

Haga clic en Acción y habilite CORS para que la aplicación cliente pueda acceder a la API.

Vuelva a hacer clic en Acciones y seleccione Implementar API.

Se generará una URL. Conecte esta URL en su aplicación y listo, ahora ha creado una aplicación de extremo a extremo.

Créditos por la idea de la aplicación: https://www.sundog-education.com

Si está atascado con su propia aplicación y necesita ayuda, no dude en comunicarse conmigo en https://www.linkedin.com/in/archisman-das-88942578/

Gracias por su paciente lectura.



Source link


AlojaraplicaciónAWSservidorsinUI5una

Artículos relacionados


Technical Articles
Creación de una solución de aprendizaje automático integral para la inspección de productos centrada en SAP Kyma
User Experience Insights
Publicar factura sin orden de compra usando MIRO
assign  ·  Assignments in ABAP  ·  ELSE UNASSIGN  ·  Technical Articles
ASIGNAR, DE LO CONTRARIO UNA ASIGNAR en ABAP

Deja tu comentario Cancelar la respuesta

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *

*

*

Tutorial del ciclo del proyecto de conversión de S/4HANA
Previo
Descripción general de la integración de SAP Enable Now y SAP Signavio
Siguiente

Madrid

Calle Eloy Gonzalo, 27
Madrid, Madrid.
Código Postal 28010

México

Paseo de la Reforma 26
Colonia Juárez,  Cuauhtémoc
Ciudad de México 06600

Costa Rica

Real Cariari
Autopista General Cañas, 
San José, SJ 40104

Perú

Av. Jorge Basadre 349
San Isidro
Lima, LIM 15073

Twitter Linkedin Instagram
Copyright 2022 | All Right Reserved.
Cookies Para que este sitio funcione adecuadamente, a veces instalamos en los dispositivos de los usuarios pequeños ficheros de datos, conocidos como cookies. La mayoría de los grandes sitios web también lo hacen.
Aceptar
Cambiar ajustes
Configuración de Cookie Box
Configuración de Cookie Box

Ajustes de privacidad

Decida qué cookies quiere permitir. Puede cambiar estos ajustes en cualquier momento. Sin embargo, esto puede hacer que algunas funciones dejen de estar disponibles. Para obtener información sobre eliminar las cookies, por favor consulte la función de ayuda de su navegador. Aprenda más sobre las cookies que usamos.

Con el deslizador, puede habilitar o deshabilitar los diferentes tipos de cookies:

  • Bloquear todas
  • Essentials
  • Funcionalidad
  • Análisis
  • Publicidad

Este sitio web hará:

Este sitio web no:

  • Esencial: recuerde su configuración de permiso de cookie
  • Esencial: Permitir cookies de sesión
  • Esencial: Reúna la información que ingresa en un formulario de contacto, boletín informativo y otros formularios en todas las páginas
  • Esencial: haga un seguimiento de lo que ingresa en un carrito de compras
  • Esencial: autentica que has iniciado sesión en tu cuenta de usuario
  • Esencial: recuerda la versión de idioma que seleccionaste
  • Functionality: Remember social media settings
  • Functionality: Remember selected region and country
  • Analytics: Keep track of your visited pages and interaction taken
  • Analytics: Keep track about your location and region based on your IP number
  • Analytics: Keep track of the time spent on each page
  • Analytics: Increase the data quality of the statistics functions
  • Advertising: Tailor information and advertising to your interests based on e.g. the content you have visited before. (Currently we do not use targeting or targeting cookies.
  • Advertising: Gather personally identifiable information such as name and location
  • Recuerde sus detalles de inicio de sesión
  • Esencial: recuerde su configuración de permiso de cookie
  • Esencial: Permitir cookies de sesión
  • Esencial: Reúna la información que ingresa en un formulario de contacto, boletín informativo y otros formularios en todas las páginas
  • Esencial: haga un seguimiento de lo que ingresa en un carrito de compras
  • Esencial: autentica que has iniciado sesión en tu cuenta de usuario
  • Esencial: recuerda la versión de idioma que seleccionaste
  • Functionality: Remember social media settings
  • Functionality: Remember selected region and country
  • Analytics: Keep track of your visited pages and interaction taken
  • Analytics: Keep track about your location and region based on your IP number
  • Analytics: Keep track of the time spent on each page
  • Analytics: Increase the data quality of the statistics functions
  • Advertising: Tailor information and advertising to your interests based on e.g. the content you have visited before. (Currently we do not use targeting or targeting cookies.
  • Advertising: Gather personally identifiable information such as name and location
Guardar y cerrar