If you click on the link in the description, you'll be able to access three or four different actions for this for the specific thing. The other thing I opened in my tabs is a new app a new Bubble app page so I'm going to head back to Ryax and login and first thing we're going to do in Ryax head to the Library part of the of the app and build the different modules we will need for this for this demo for this for this example.

I'm gonna create a new repository connection, go back to the Gitlab repository we provide and copy the URL the URL you need to check that the URL ends with git to be a valid URL.

Then you click on the new repository you just created and you scan the main branch this is the default branch for git live repositories and you end up with a list of the four modules we've seen earlier

They are ready to build they are scanned successfully, so I'm going to build them one by one and they will start building right away will be then able to check that they've built properly in the interface and head back to our backend workflow in ryex to start building our backend.

I'm going to create a new workflow now,

• the first trigger of our workflow will be an API that is able to access a blue AWS S3,
• the second step of our workflow would be to transfer images from this from this input
• then we'll access the Bubble API to interact with Bubble
• and then we'll upload back the result image onto an edible uss3

Let's go back to the first that of our workflow. The first step is to trigger the one that's going to start the workflow let's fill all the required information with our access keys for AWS S3 and the bucket name and the prefix so uh as for the prefix you can just take the URL of the Ryax instance you're connected to then we'll set up the Second Step the second step is a simple transform image transform module where we link uploaded images from the previous step and we apply three kinds of Transformations we'll choose grayscale for the moment but we have also resize function or rotate function then we'll set up the Bubble API module will input the image the transformed image from the previous step into Bubble and here in the Bubble URL we need to paste the URL of our app which we will create just next last step is about uploading back the result images to S3 for this we can do a very simple thing we can use the link function to link the same parameters of the first S3 step because we are using the same bucket the same access keys and we will be using for this last step the folder name that exists on our packet and which we will output all the result images and we won't use any timestamp for that. So let's go to Bubble now we'll create a new app that's called Rags Dash Bubble but any name is okay.

Make note of the URL of the of the Bubble app because we're going to use it back in the rags workflow so um in Bubble now we need to set up a few plugins that will start first with the API plugin so that we can connect Ryax and Bubble together so we'll install the API connector we'll create a new API for Ryax here we go we'll also create a new call so the first code we're going to create is a is a call onto a folder on our S3 to list the content of the folder.
This folder is called because it means that it's the folder that we will place the images to when they are uploaded by the user so for the API URL. You can head back to Ryax and go back to the dashboard, and for each project in Ryax you have a base URL that provides the first part of the URL as the APIs comes.
You then need to add on top of this URL the endpoint of your specific workflow you're working with so you can find in two ways either on the dashboard view or in the edit view on the first trigger of your workflow and you add slash and you paste this input at the end of URL then we'll do another slash list to do slash list to list the content of the 2D folder and we'll initialize the API so we end up with the 404 code the API was not found and that's perfectly understandable because we haven't started the workflow yet so we're going back to Ryax we need to set up one last step in the Bubble connector and that's the URL of the Bubble app so I'm just pasting the URL I just copied earlier when I created my app and I'm adding a little bit of suffixes to this URL these all this all the same for first app that you first of all add that you create from scratch so you can use the same the same suffixes here and then I'm hitting deploy so there Rags back and work so we style deploying which means it will enter ready state where it can start triggers it can start it can start it can be triggered by something so let's go back to Bubble and initialize the code the call again

Okay so this time we end up with a valid output we have return values from the apps so it means it's working and it finds one images here. We get the image name and the image URL so it means it's working, so Bubble is mapping this first information properly so let's head to the design page we'll create a repeating group frame right here we don't need a specific number of routes so we will just uncheck this and then we need as a source and a type of content to input what we've just connected with our API so I'm going to do that right now okay we we just find the rights API we just set up earlier now in each row of the group I'm gonna want to display the images

So I'm dropping an image object into this and I'm linking them to the information that is output from our API calls

The other thing we can do is also display the image name so dropping a text field right next to the to the image frame and we also link this information to the API outputs okay now so now we're ready to list the contents of the to do folder on S3 with the school so let's just preview the app refresh the page and here we go we have one image right now in the Judo folder on S3 and it's working properly the API is connected information is read properly so we can move on the next step is to also read the done folder so we have two photos on our S3 one to do for the images that are that have been uploaded by your user in one done folder where the images will end up after they've been processed by our workflow so we take the same URL as before we just change the suffix from list to do to list done and then we initialize the call and we have information here so that's perfect same processes before will create a repeating group populate it with images frames on the right on the left and texts frames for the image names on the right with the information coming from the same API but from the done list call that's called that way so on the on the left part of our page we'll have the image that I've been flagged as our studio so they need to be processed by the by the backend system and on the right we'll have the result of this of this process processing

I'm finishing up configuration quite quick and we'll check with the preview right next if we actually read the contents of the done folder on S3. And it's working so this image was already uploaded and the result was already uploaded on S3, so we see already the before and after of one image that was already existing. So far we haven't input new images yet so how do we do that. Next step is to create an upload field so we can actually include a set of images into a workflow so I'll drop an HTML frame right here we'll set it up as a multiple input field so input type will be file I'm going to give it an idea that an idea that would that will use just next in a JavaScript called linked to a button

To get this idea you can go back to our repository and find the snippet the JavaScript snippet that we're going to use for the button so the ID is file to upload we'll go back to that later and we set up a type as a multiple to be able to upload multiple files at the same time okay so now we have our upload fields it's not yet linked to any action so it means that it doesn't work it doesn't do anything aside from accepting files so we create a send button that's going to act actively trigger the backend workflow from the right side and we're going to link this send button with some JavaScript code to enable the call and to actually trigger the backend workflow so for this one we need a new a new plugin it's called toolbox it allows for javascripting so we'll install it and we're going to link it to an event so we go to the workflow section of Bubble good practices to also start with the first events ever which is when the page is loaded then we will set up another event when the button sent is clicked and then we'll add our JavaScript execution here let's go back to the repository we found just before we have a very small JavaScript bit of code here that allows for workflow triggering upon a button click so that's what we're going to do at the end of the code you'll see that there is a file to upload ID the one that's with um gave that we've given to our send button and at the top you have a URL that you need to change based on yours so you use this the exactly same URL base as we've used with the API URL the with the with the suffix it will just change the topics to list

Now we will refresh the preview we are trying now to upload a specific color image here we'll click Send so it's a very basic frontend for now, so we don't have any information feedback saying that it was successfully sent but that's something we can do later.

And if we go back to Ryax we see that it triggered a new execution, a new run with the image with inputs in the frontend page so we'll download the image after transformation to check that everything was processed properly and then we'll have that to Bubble and see if it was properly reflected in the front on the front end part so you see that the steps are propagating right now it's still at the Bubble stage and moving on to the S3 stage so yeah the output of the processing module was successful it's black and white it was color before and now we can refresh the frontend page and see if it worked properly and here we go so we have the pie Charm color on the left and black and one on the right so everything works properly it's very simple for now but uh within a few minutes we've been able to implement a full frontend page with a full backend working in the back all linked together so you can exploit the main benefits of Bubble as well as the main benefits of rice at the same time working together so that's quite nice so we just set up a new execution with three new images you can observe that these executions went way faster it's just because it's the first execution actually instantiates the function so the next ones are way faster than the next ones as well

Here I changed the transform function from grayscale to rotate and we're going to input new images it will create one execution per image because it's one precising line per image every image needs to go through the same steps so it creates different executions for each image and a label that enables you to trace every image that was input to the workflow and now instead of grayscale we've got this rotating function where we would take 45 degrees so we see that it was successful here so now what we can do is maybe try to add a few functions to our to our page um we'll add a refresh function for now and we'll also try to stylize the page a little bit to give it a bit of a brand

To refresh we create a new event to the workflow page of Bubble and we'll simply assign this the refresh button to a refresh page function so that's as simple as that but it enables easier page refreshing for the user instead of having to actually refresh from the browser okay so now refresh button works best thing we can do is try to stylize the base page a little bit so change the buttons colors add a banner at the top add some text explaining what the tool does. I'm going to create a new button style that's more closer to the brand I want to display,so I'll change the color, add a different color to the buttons. Working with Styles is very handy because it allows you to change a lot of different frames at the at once it's quite easy so that my buttons are more refined related to my brand. I'll exercise them a bit and next step is to write a banner and banner at the top in my logo

Just getting a logo for my local folders and then we'll move on to text

Let's place the buttons down a little bit to make some room for the explanation texts that were will be very useful for our users here I'm going to write some very simple instructions just explaining what the tool does

Once we've done that we can go back to the preview and check out our page and what we realize that we've built in a few minutes quite a nice page all using low code systems on the back end side and the frontend sites are working together to provide a quite easy experience and be able to go fast with very little code.