Este es mi primer blog de SAP Build App desde que acudi el mes pasado a SAP Tech Ed. Mientras estaba en Tech Ed, conoci a daniel.wroblewski en el piso de la conferencia y empezamos una charla acerca de SAP Build Apps, Process automation y Work Zone. El concepto de Build Bros (Hermanos constructores) fue debido a que ambos estamos interesados en el tema y decidimos empezar una serie de blogs relacionados a SAP Build Apps. Para leer el blog en ingles, ve aqui "Build bros - uploading files via HTTP Rest".
En este blog, me gustaria demostrar algunos de los beneficios de usar SAP Build Apps (anteriormente conocido como Appgyver)
Uno de muchos ejemplos que puedes usar este tipo de blog es que podemos mostrar que se puede subir recibos de comprar a un PO. Otro ejemplo es poder anadir una imagen a una llamada de servicio (parecido a las entregas de to Amazon Prime). Hay muchos tipos de usos para este tipo de ejemplo de tipo #LCNC.
Aqui muestro la arquitecture detras de mi ejemplo:
El app tiene 3 pantallas simples:
El flow detras del boton se ve asi como la siguiente imagen, pero dejame poner enfasis en ciertas cosas:
a. Despues de presionar el boton (press event)
b. Selecciona una imagen de la libreria de imagenes
c. Si es correcto, Convierte el archive local a base64 para que así podamos enviar un string binario hacia el AWS Lambda API
Aqui estan dos imagenes con las que hize pruebas:
d. Puse el base64 string an una variable del app para poder utilizarla luego
e. Llame un HTTP request (Intente muchas veces tratando de usar otro component llamdado Create record sin suerte). En el HTTP Request, pase el URL de la funcion de AWS Lambda y el body que pedía la funcion.
*Decidi dejar el component Create Record ahi pues lo quiero investigar mas a detalle en caso que cambie mi lógica luego. Debido a que no tiene un input, la logica dentro del component no se ejecutara.** no es lo mas limpio dejarlo asi pero ya que esto es solo para mi aprendizaje, decidí mantenerlo ahí por ahora. Despues, cuando haga el app para un modo de producción, lo puedo remover de ahí y no incluirlo.
f. Despues de recibir una respuesta del request de tipo HTT, simplemente estoy mostrando el mensaje de tipo Toast
Abajo puedes observar el AWS S3 bucket que fue utilizado en mi aplicación.
Y cuando descargo una de estas imagenes, las puedes ver desde tu computadora y puedes observar que son las mismas que subimos mediante el app de LCNC.
(507d.... la segunda en la imagen de arriba)
Cuales fueron las 2 cosas faciles de este ejercicio?
Para ser totalmente honesto, he estado jugando con este ejemplo desde antes de Tech Ed. Actualmente, el contruir una aplicacion es mas facil de lo que se ve pues ya es fluido y directo. Si tuviera que identificar la parte mas facil de mi aplicacion seria el poder seleccionar una imagen internal del celular al usar el component de tipo librería de imagenes. Es tan simple de hacer drag and drop hacia el canvas del left nav donde se encuentra hacia la pantalla para luego poder ver las propiedades y documentacion en el app composer lo cual lo hace fácil de seguir. Del lado rerecho de la pantalla, el composer muestra la seccion con los inputs que require cada component y los outputs del mismo. Una vez que te sientes agusto entendiendo esta seccion, sera mas facil desarrollar el siguiente app. La otra parte facil de mi app es la parte de navegación entre una pag y la siguiente. En verdad es lo mas facil de incluir. La tercer parte mas facil de este ejercicio es el uso del component de GPS component. Puedes incluirlo en tu app e inmediatamente veras los atributos de un objeto de GPS (lat, lon, altitude, como otros metrics).
Cual fue la parte mas dificil de este ejercicio?
La parte mas dificil de este ejerecicio fue el poder hacer debug en el archive que estaba enviando (como base64) desde la aplicacion de LCNC hacia el AWS Lambda API, sin embargo, cuando conecte mi celular a la laptop me di cuenta que si se podía abilitar y poder hacer debugging. Una vez que esto paso, pude entender los logs/traces del flow, y se me facilito la vida después de ahi. La segunda cosa dificil de este ejercicio fue poder hacer pruebas del API en el lado de AWS Lambda, pero, antes de que hiciera el testinfg del LCNC, pude hacer testing directamente desde la herramienta POSTMan. POSTMan es una herramienta muy poderosa y genial. Puede usarse para cualquier tipo de testing ya sea de tipo OData o de REST APIs.
Muchas gracias por leer este blog. Hasme saber que tipo de ejercicio te gustaria ver o si te interesa ver el código de la función de AWS Lambda. Tambien, comparte tus historias de y tus batallas de otras capabilities de SAP Build Apps. Gracias!
En este blog, me gustaria demostrar algunos de los beneficios de usar SAP Build Apps (anteriormente conocido como Appgyver)
- Seleccionar una imagen de la image library
- Convertir un archive a base64 - Use una imagen, sin embargo se puede escoger cualquier tipo de archivo y convertirlo a base64
- Http Request flow – Subir un archive a una tina de S3 (AWS S3 bucket)
Uno de muchos ejemplos que puedes usar este tipo de blog es que podemos mostrar que se puede subir recibos de comprar a un PO. Otro ejemplo es poder anadir una imagen a una llamada de servicio (parecido a las entregas de to Amazon Prime). Hay muchos tipos de usos para este tipo de ejemplo de tipo #LCNC.
Aqui muestro la arquitecture detras de mi ejemplo:
El app tiene 3 pantallas simples:
- La pantalla de llegada muestra
- Una imagen con un evento de press para navegar a otra pantalla
- Un icono con una camara para navegar a la pantalla de la cámara (el motivo principal de este blog)
- La pantalla de la camara
- Un boton que ayuda al usuario a seleccionar una imagen de la librería de imágenes. Hay un flow detras de este botton cuando la imagen se selecciona y sube la image mediante un (POST) de la imagen seleccionada a un servicio REST API (en AWS Lambda) para mas delante guardar el archivo a una tina de S3 en AWS (AWS S3 bucket). El codigo que permite guardar el archive al s3 bucket se puede encontrar en Google; es un ejemplo común. Si la gente esta interesada en el código mio, pues lo puedo subir a github después si alguien lo pide.
El flow detras del boton se ve asi como la siguiente imagen, pero dejame poner enfasis en ciertas cosas:
a. Despues de presionar el boton (press event)
b. Selecciona una imagen de la libreria de imagenes
c. Si es correcto, Convierte el archive local a base64 para que así podamos enviar un string binario hacia el AWS Lambda API
Aqui estan dos imagenes con las que hize pruebas:
- El logo de SAP Champion
- El logo de Shockwave Consulting
d. Puse el base64 string an una variable del app para poder utilizarla luego
e. Llame un HTTP request (Intente muchas veces tratando de usar otro component llamdado Create record sin suerte). En el HTTP Request, pase el URL de la funcion de AWS Lambda y el body que pedía la funcion.
*Decidi dejar el component Create Record ahi pues lo quiero investigar mas a detalle en caso que cambie mi lógica luego. Debido a que no tiene un input, la logica dentro del component no se ejecutara.** no es lo mas limpio dejarlo asi pero ya que esto es solo para mi aprendizaje, decidí mantenerlo ahí por ahora. Despues, cuando haga el app para un modo de producción, lo puedo remover de ahí y no incluirlo.
f. Despues de recibir una respuesta del request de tipo HTT, simplemente estoy mostrando el mensaje de tipo Toast
Abajo puedes observar el AWS S3 bucket que fue utilizado en mi aplicación.
Y cuando descargo una de estas imagenes, las puedes ver desde tu computadora y puedes observar que son las mismas que subimos mediante el app de LCNC.
(507d.... la segunda en la imagen de arriba)
Cuales fueron las 2 cosas faciles de este ejercicio?
Para ser totalmente honesto, he estado jugando con este ejemplo desde antes de Tech Ed. Actualmente, el contruir una aplicacion es mas facil de lo que se ve pues ya es fluido y directo. Si tuviera que identificar la parte mas facil de mi aplicacion seria el poder seleccionar una imagen internal del celular al usar el component de tipo librería de imagenes. Es tan simple de hacer drag and drop hacia el canvas del left nav donde se encuentra hacia la pantalla para luego poder ver las propiedades y documentacion en el app composer lo cual lo hace fácil de seguir. Del lado rerecho de la pantalla, el composer muestra la seccion con los inputs que require cada component y los outputs del mismo. Una vez que te sientes agusto entendiendo esta seccion, sera mas facil desarrollar el siguiente app. La otra parte facil de mi app es la parte de navegación entre una pag y la siguiente. En verdad es lo mas facil de incluir. La tercer parte mas facil de este ejercicio es el uso del component de GPS component. Puedes incluirlo en tu app e inmediatamente veras los atributos de un objeto de GPS (lat, lon, altitude, como otros metrics).
Cual fue la parte mas dificil de este ejercicio?
La parte mas dificil de este ejerecicio fue el poder hacer debug en el archive que estaba enviando (como base64) desde la aplicacion de LCNC hacia el AWS Lambda API, sin embargo, cuando conecte mi celular a la laptop me di cuenta que si se podía abilitar y poder hacer debugging. Una vez que esto paso, pude entender los logs/traces del flow, y se me facilito la vida después de ahi. La segunda cosa dificil de este ejercicio fue poder hacer pruebas del API en el lado de AWS Lambda, pero, antes de que hiciera el testinfg del LCNC, pude hacer testing directamente desde la herramienta POSTMan. POSTMan es una herramienta muy poderosa y genial. Puede usarse para cualquier tipo de testing ya sea de tipo OData o de REST APIs.
Muchas gracias por leer este blog. Hasme saber que tipo de ejercicio te gustaria ver o si te interesa ver el código de la función de AWS Lambda. Tambien, comparte tus historias de y tus batallas de otras capabilities de SAP Build Apps. Gracias!
- SAP Managed Tags:
1 Comment
