Carga de datos de un archivo CSV en el backend VCF de SAP Build App
By s4pcademy
SAP Build Apps brinda la capacidad de crear e implementar backends de aplicaciones. Esta capacidad se denomina Visual Cloud Functions (VCF) y aquí puede encontrar una buena documentación para esta característica.
En la actualidad, VCF no ofrece la capacidad de cargar datos de forma masiva en el backend utilizando, por ejemplo, un archivo CSV. Hace unas semanas, para probar y ejecutar una aplicación que desarrollé con SAP Build Apps, necesitaba cargar 200 registros en el backend de VCF. Hacer eso manualmente habría sido costoso en tiempo y propenso a errores. Entonces decidí desarrollar una utilidad para hacer esta tarea fácil, rápida y repetible. Al escribir este blog, espero ayudar a las personas que se enfrentan a una situación similar.
Desarrollé una aplicación bastante simple para cargar datos de un archivo CSV en un backend VCF y esta solución puede ser muy útil hasta que se proporcione una utilidad de carga para VCF.
Aquí hay una explicación detallada de una aplicación que puede desarrollar fácilmente para cargar datos en el backend de VCF:
En primer lugar, comencemos a crear un backend VCF simple para administrar una entidad llamada Persona con tres atributos:
- primer nombre : texto
- apellido : texto
- edad : número
Y luego, creemos un archivo de Excel, basado en el mismo esquema, que contiene algunos datos para cargar en el backend de VCF:
Los nombres de las columnas deben corresponder a los nombres de los atributos de la entidad VCF.
El archivo de Excel se puede exportar fácilmente como archivo CSV, utilizando la función Guardar como proporcionada por Excel. Aquí puede ver el contenido del archivo exportado:
Ahora implementemos nuestra aplicación CSV Loader, usando SAP Build Apps. Como primer paso, se debe establecer una conexión con el backend de VCF. esta entrada de blog explica cómo completar esta tarea (consulte el Habilitación del backend desde la interfaz de usuario sección).
Antes de comenzar con el diseño de nuestra aplicación, necesitamos instalar un par de componentes del Marketplace. Esos componentes son necesarios para administrar los archivos; esto se puede hacer simplemente haciendo clic en Marketplace:
y buscando «archivo»:
y seleccionando e instalando los dos componentes necesarios: «Seleccionar archivos» y «Convertir archivos a base64».
Ahora podemos comenzar a construir nuestra aplicación, colocando en un Contenedor dos botones: un botón para elegir la selección de archivos y otro para ejecutar la importación de los datos del CSV seleccionado:
Antes de agregar la lógica a los botones, necesitamos definir dos variables (como una Variable de aplicación o una Variable de buscapersonas):
Nombre de la variable: texto decodificado
Tipo de variable: texto.
Esta variable se llenará con el contenido del archivo CSV, luego de ser decodificado del formato base64.
Nombre de variable: lista de personas
Tipo de variable: lista de objetos
Los objetos enumerados deben definirse con las mismas propiedades del esquema (nombre, apellido, edad) que hemos usado para VCF. Los nombres de las propiedades deben ser exactamente los mismos que tenemos en los encabezados de los archivos CSV:
Aquí siguiendo la lógica a ser definida para el Seleccione un archivo Botón:
Describamos mejor cada paso:
Seleccionar archivos: este paso abre una ventana para seleccionar un archivo. Podemos configurar este componente (en el panel derecho) con los formatos de archivo permitidos (solo archivos de texto sin formato) y evitando seleccionar varios archivos.
Convertir archivo a base64: este paso lee un archivo y lo codifica en el formato base64. Como entrada, debemos proporcionar la ruta del archivo seleccionado. Aquí la fórmula a utilizar:
outputs["Pick files"].files[0].path
Establecer la variable de la aplicación: este paso establece el valor de la texto decodificado variable al contenido del archivo CSV, después de decodificarlo del formato base64. Podemos usar la fórmula:
DECODE_BASE64(LEFT_STRIP(outputs["Convert file to base64"].base64, 21))JS: este paso es el corazón de nuestro cargador de datos y se implementa como una rutina de javascript. La rutina analiza el archivo CSV y crea como salida una lista de objetos. La entrada es el texto decodificado variable y la salida, llamada resultado, debe ser una lista de Objetos genéricos (no es necesario definir su estructura). Aquí el código:
try {
a = inputs.input1;
var headers = []
var data = []
var lines = inputs.input1.split("\r\n");
for (var i = 0; i < lines.length; i++) {
var cells = lines[i].split(";");
var lineData = {};
for(var j=0;j<cells.length;j++){
if(i==0){
var headerName = cells[j].trim();
headers.push(headerName);
}else{
var key = headers[j];
if(key){
lineData[key] = cells[j].trim();
}
}
}
//skip the first row (header) data
if(i!=0){
data.push(lineData);
}
}
return { result: data };
}
catch (err) {
const error = {
code: 'unknownError',
message: 'Something went wrong.',
rawError: err,
}
return [1, { error }]
}
Establecer variable de la aplicación: este paso establece el lista de personas variable al resultado del paso anterior, usando una fórmula:
outputs["Function"].result
Para verificar todos los registros que se cargarán en el backend de VCF, podemos agregar, a la página de inicio de nuestra aplicación, una tarjeta que muestra la lista de registros:
El Título de la Tarjeta se puede establecer con una fórmula, para mostrar el nombre completo como una concatenación de nombre de pila + apellido:
repeated.current.firstName + ' ' + repeated.current.lastName
Y el contenido de la tarjeta se puede configurar para mostrar el edad:
Aquí una descripción detallada de cada paso:
SI Condición: este paso se utiliza para definir un ciclo sobre todos los artículos incluidos en el lista de personas variable. Contiene una fórmula muy simple que indica que el siguiente paso debe ejecutarse solo si la variable personList contiene en la lista un elemento:
COUNT(appVars.personList) > 0
Cuando la variable personList está vacía, la lógica deja de ejecutarse.
Crear registro: este paso inserta un registro en el VCF. El registro a crear corresponde al primer elemento de la variable lista de personas, identificado por el índice #0. Aquí puede ver el enlace a configurar:
Establecer la variable de la aplicación: este paso ejecuta una fórmula simple para eliminar el primer elemento de la lista de personas variable:
REMOVE_ITEMS_AT(appVars.personList, 0)
Después de ejecutar este paso, el segundo elemento de la lista de personas variable toma el lugar de la primera, que acaba de ser eliminada. El ciclo, controlado por el paso IF, se repetirá hasta que todos los artículos hayan sido procesados y el lista de personas variable queda vacía. En este punto, la lógica de carga se ejecuta por completo.
La aplicación básica ahora está completa y podemos probarla. Vayamos a Lanzar y abrir el Portal de vista previa:
Luego abra la vista previa web y seleccione la aplicación que acabamos de crear. Aparece la página de inicio, que muestra los dos botones que definimos:
Al hacer clic en el Seleccione un archivo aparece una ventana y se puede seleccionar un archivo. Aquí debemos seleccionar y abrir el CSV que creamos al principio:
La aplicación leerá el archivo y actualizará la página de inicio, mostrando todos los registros que se cargarán en el backend VCF:
Después de verificar que todo está correcto, podemos hacer clic en el botón Cargar todo el botón. Verá que los registros se eliminarán uno por uno de la lista mostrada, tan pronto como se cree un nuevo registro en el backend de VCF.
Ahora solo necesitamos verificar si los registros se han insertado en el backend de VCF. Abramos el backend de VCF desde el Lobby y exploremos los datos:
¡y listo!
Todos los registros se han insertado en el backend de VCF.
Con un número limitado de modificaciones, esta aplicación de plantilla se puede adaptar para cargar cualquier VCF que desee diseñar. Los únicos cambios estrictamente necesarios son:
- la definición de la estructura de lista de personas variable (y probablemente también desee cambiarle el nombre), para que coincida con su esquema VCF
- la definición de la Tarjeta en la página de inicio debe adaptarse para mostrar la lista de sus artículos
- el paso Crear registro debe cambiarse para vincular la estructura de su artículo.
Ahora que la lógica de la aplicación está clara, podrá agregar más funciones a las aplicaciones que está desarrollando con SAP Build Apps.
Por ejemplo:
- la capacidad de cargar un solo elemento de la lista se puede agregar con unos pocos clics,
- la capacidad de eliminar registros de un backend VCF, uno por uno o de forma masiva,
- el código de análisis del archivo CSV se puede reutilizar en otras aplicaciones,
- y mucho más …
¡Y eso es todo por hoy! Ahora puede continuar siguiendo la página del tema del entorno SAP Build Apps (https://community.sap.com/topics/build-apps), publicar y responder preguntas (https://answers.sap.com/tags/6cfd8176-04ae-4548-8f38-158456e1a47a), y leer otras publicaciones sobre el tema (https://blogs.sap.com/tags/6cfd8176-04ae-4548-8f38-158456e1a47a/).
¡Diviértete con SAP Build Apps! Y continúe siguiendo mi perfil para nuevos blogs y déjeme sus comentarios.
