Hello, this is my first SAP Build App blog since last month’s SAP Tech Ed. While at Tech Ed, I met daniel.wroblewski at the show floor and our discussion about SAP Build Apps, Process automation and Work Zone started. The concept of Build Bros is because both of us are interested in the topic and we decided to start a series of blogs related the SAP Build Apps. To read the blog in Spanish, please see "Los hermanos constructores - Build bros subiendo archivos via HTTP Rest".
In this blog, I would like to show case a few of the benefits from the SAP Build Apps (formerly known as Appgyver)
One of the many scenarios that this type of blog we showcase are being able to attach receipts to POs. Another scenario is being able to attach an image to a service call (similarly to Amazon Prime deliveries). There are many uses for this type of #LCNC application.
Here is the Tech Architecture behind it:
The app has 3 simple screens:
The flow behind the upload to s3 button looks like the following image, but let me highlight a few things:
a. After the button tap (press event)
b. Select an image from the image library
c. If successful, Convert the local file to base64 so we can send a binary string to the AWS Lambda API
here are the last 2 images I tested with:
d. I set the base64 string to an app variable so I can use it later
e. I am calling an HTTP request (I tried several times using Create record without any luck). In the HTTP Request, I passed the URL of my AWS Lambda function and the expected body.
*I kept the Create Record component there so that I can reference it later in case I need to switch my logic. Since it does not have an input, the logic inside that component will not execute.** not the cleanest to keep there but since this is for my own learning, I decided to keep it for now. Later when I make this app productive, I will not include that component.
f. After receiving a response from the HTTP request, I am simply showing it in a message Toast.
Below you can also observe the AWS S3 bucket I used as my destination
And when downloading these images, you can observe the image file name matches the file uploaded to AWS S3. (507d.... second one from the top in the image above)
What was the 2 easiest things in this exercise?
To be honest, I have been playing with this since before Tech Ed. As of Right now, the building of an application seems to be much more straight forward and if I had to identify the easiest part of this app would be being able to use the select image from library component. It is a simple drag and drop action into the canvas from the left nav of the screen and the properties/documentation piece of the application composer makes it much easier to follow. The right-hand side of the composer shows the section with expected inputs and outputs for each component and if you become comfortable with understanding that section, it will really make it much easier to develop the next scenario. The other easiest part of this exercise is the page to page navigation. It is one of the simplest things to include. The third easiest thing of my exercise is the use of the GPS component. You drag and drop it… and it immediately gives you the GPS attributes (lat, lon, altitude, among other metrics).
What was the hardest part of this exercise?
The hardest part of this exercise was to be able to debug the file being sent (as base64) from the LCNC application to the AWS Lambda API, however, when I plugged in the phone to my laptop and I was able to enable debugging and understanding the flow traces, that is what made my life easier. The second hardest part of the exercise was to be able to test the API on the lambda side, however, before I did the LCNC testing, I was able to test it directly from POSTMan. POSTMan is a great tool and it should be used to handle testing of any type of OData and REST APIs.
Thank you for your time to read this blog. Please let me know if it interests you to see the code from the lambda function. Also, please share your success stories and struggles with other native capabilities from the SAP Build Apps. Thanks!
In this blog, I would like to show case a few of the benefits from the SAP Build Apps (formerly known as Appgyver)
- Selecting an image from an image library
- Converting a file to base64 - I used an image, but truly any file can be converted to base64
- Http Request flow - Uploading a file to an AWS S3 bucket.
One of the many scenarios that this type of blog we showcase are being able to attach receipts to POs. Another scenario is being able to attach an image to a service call (similarly to Amazon Prime deliveries). There are many uses for this type of #LCNC application.
Here is the Tech Architecture behind it:
The app has 3 simple screens:
- Landing screen shows
- An image with a press event to navigate to another screen
- a camera icon to navigate to the camera view (the reason for this blog)
- The Camera view shows
- a button that a user can select an image from the Image Library There is a flow behind the button to upload (POST) the selected image to a REST API (AWS Lambda in my case) to further save the file to an AWS S3 bucket. The code that saves a file to an s3 bucket can be found in many google searches. If people are interested, I may upload it to github later upon requests
The flow behind the upload to s3 button looks like the following image, but let me highlight a few things:
a. After the button tap (press event)
b. Select an image from the image library
c. If successful, Convert the local file to base64 so we can send a binary string to the AWS Lambda API
here are the last 2 images I tested with:
- The SAP Champion logo
- Shockwave Consulting logo
d. I set the base64 string to an app variable so I can use it later
e. I am calling an HTTP request (I tried several times using Create record without any luck). In the HTTP Request, I passed the URL of my AWS Lambda function and the expected body.
*I kept the Create Record component there so that I can reference it later in case I need to switch my logic. Since it does not have an input, the logic inside that component will not execute.** not the cleanest to keep there but since this is for my own learning, I decided to keep it for now. Later when I make this app productive, I will not include that component.
f. After receiving a response from the HTTP request, I am simply showing it in a message Toast.
Below you can also observe the AWS S3 bucket I used as my destination
And when downloading these images, you can observe the image file name matches the file uploaded to AWS S3. (507d.... second one from the top in the image above)
What was the 2 easiest things in this exercise?
To be honest, I have been playing with this since before Tech Ed. As of Right now, the building of an application seems to be much more straight forward and if I had to identify the easiest part of this app would be being able to use the select image from library component. It is a simple drag and drop action into the canvas from the left nav of the screen and the properties/documentation piece of the application composer makes it much easier to follow. The right-hand side of the composer shows the section with expected inputs and outputs for each component and if you become comfortable with understanding that section, it will really make it much easier to develop the next scenario. The other easiest part of this exercise is the page to page navigation. It is one of the simplest things to include. The third easiest thing of my exercise is the use of the GPS component. You drag and drop it… and it immediately gives you the GPS attributes (lat, lon, altitude, among other metrics).
What was the hardest part of this exercise?
The hardest part of this exercise was to be able to debug the file being sent (as base64) from the LCNC application to the AWS Lambda API, however, when I plugged in the phone to my laptop and I was able to enable debugging and understanding the flow traces, that is what made my life easier. The second hardest part of the exercise was to be able to test the API on the lambda side, however, before I did the LCNC testing, I was able to test it directly from POSTMan. POSTMan is a great tool and it should be used to handle testing of any type of OData and REST APIs.
Thank you for your time to read this blog. Please let me know if it interests you to see the code from the lambda function. Also, please share your success stories and struggles with other native capabilities from the SAP Build Apps. Thanks!
- SAP Managed Tags:
2 Comments
