Limited Time Offer: Watch All Our Bubble Tutorial Videos for Only $99 per Year!

In this Bubble tutorial video, I'm going to show you how you can take an OpenAI response which looks like this, which is a request to generate three social media posts and then split them into multiple text entries which we demoed in a previous video.

At the moment, I'm saving this to custom states, but now I want to save it to my database. So I'm going to show you how to use a backend workflow to split out each social media post one, two, three, and save them as one, two, three posts as a data type called posts in the Bubble app.

But before I start, are you a Planet No Code member? If you're not, you're missing out because on our website, planetnocode.com, we've got videos you can't find on our YouTube channel. We've got over 100 Bubble tutorial videos, very bite sized, very specific, all heavily interlinked and easily searchable. So do go and check that out.

So I'm going to pick up from where I left off in the previous video, which is to... I've got my page, I'm generating my three social media posts. If you're unsure about the process of getting to here with generating using the OpenAI API Connector, using OpenAI's API with the Bubble API Connector, do check out our previous videos. We've now got loads on OpenAI, particularly our 30 minutes how to build a chat interface with OpenAI and Bubble. That's a great video. Go and check it out to get you to this point.

Setting up Backend Workflows

But let's start with where we are. And I'm going to go into backend workflow. Not reusable elements, backend workflows. And I'm going to create a workflow. And this will be called create social media post. So this is the workflow that I want to happen for each social media post I generate. And we're having to use a backend workflow because we need to iterate through X number of results. At the moment, I know that I'm going to get three posts back, but what if I wanted to make that dynamic and allow my user to say five posts or 10 posts? We need to use a backend workflow because we don't know how many times we're going to need to run the create a new thing action. So we use a backend workflow so we can go through a list, and if there's three posts, five posts, or 10 posts, Bubble will just do the right number.

So in here, I'm going to have text and leave it as text. It doesn't need to be public and I can leave all that as it is. So then I go create a new thing and I'm going to create a new data type called... I'll just call it Social Posts. And then I'll just have content of type text and save the text into the content field.

How to create a loop

So how do I get this to run the three times? Well, I can go back to my page. Which one am I using? Chat Split. And here's my current workflow, which is to say, make the request to OpenAI and then save the results as a custom state. So I'm going to get rid of the custom state because I'm now going to be saving them to my database. And I'm going to say schedule API workflow on a list. And it's going to be a list of text. And the list to run on is going to be the result of my OpenAI request, choices, first item. So I'm getting all three social media posts back in a single message, a single choice from OpenAI. Message content.

Now, this is the full message. All three posts in one large block of text. So I use my Split By command or modifier, and I put in two line spaces. Now I've got a list. I will have three items in my list because I have three social media posts Split By two line spaces. I then run it on my Create Social Media Post workflow. I just want to run that right away. I'm going to leave intervals empty because then Bubble will self optimize. Obviously, if you were going to run this on a hundred entries, it's going to queue them up and chug through them as quickly as it can, but that will take some time. Three will be fairly quick. And then the text is going to be this text, and this text refers to a single entry in the list coming out of this field here. So this text is now a single entry, and that's how it ends up in my backend workflow creating a single post at a time. Now, I do need a way to recall this and show it on the front end, but actually, I'm going to test it first.

So let's refresh this. We go back into data, app data, we can see that my new post here, Social Post, is empty. And so let's run it with... Oh, I need another tab. Learning a Foreign Language. Okay, so now we're waiting on OpenAI to respond. And we're not actually going to see anything on this page because I've not put any method to display it. But I'm hoping that if we go in social posts, we can see that it's created all those social posts. Right, last step. I want to display that back to the user. How do I do that? So let's have a think.

Group generated text together

I'm going to do this by creating a another data type. I'm going to call this request, and I'm going to add to my social posts a field of request. And so I'm going to use the request data type to save the initial input, which in that case was learning a foreign language. And then it's going to be used as a method to establish a database relationship and a grouping of my social posts data type. So this is going to be a type request. And then this means that if I go back into my workflow, I'm going to create a request, create a new thing request.

And I'm going to save the input. This is all useful if I'm going to recall it to my user. So input, and that's going to be my multiline input. And then I want to pass that into my backend workflow because when I create a new social post, I need to be able to link it it in. So if I go into backend workflows, create a social post and add in the field, I can pass in a request and then I can save the request by grouping data type to the social media post. Going back to my page, now, I'm going to have this as social posts now, and I'm going to leave it empty because then that allows me to add in a display data in the repeating group steps. Let's try this. Let's try this. So I can say display list. Okay, no, this is not going to work. What I... Okay, no, I'm going to try. I'm going to try. So I'm going to display a list. No, this is not going to work because the list is only generated after this action is run. Okay, let's fix this bit first, which is the request is the result of step two.

That's fine. That's successfully passing our request to the backend. Okay, now I've got a plan, which is just to show the most recent one. So we're going to say, do a search for social posts where request equals do a search for... Oh, no, I don't need to do another search for. Right, here is what I'm going to do instead. I'm going to try and optimize this by getting rid of unnecessary do a search for... So on my page, I'm going to set a custom state. And we're not doing the AI response that's from the previous video. I'm going to add in a request custom state. So that way we know the most recent request. And then in workflow, as soon as request is created, we're not going to use that. I'm going to say set state. To be the result of step one. That allows me to put a single do a search for here of do a search for social posts where request equals the custom state request we've saved. And so now it's only going to show the results that match the most recent request. I'm going to check to see that this is all connected up, that our text labels know.

So up date that to content. Right, I think we're now ready to test that. So let's go with traveling around the UK. Submit. Okay, so we are showing one result there. Why is that? We're going to data, app data. We're getting more than one saved and they all have the same request. So what's going on here? Let's go into inspect. Have a look at our repeating group. Search for social posts. Let's say any returning one. Why is that? Okay, so I'm not sure what's going on there. I fix that maybe by reducing the mid height of row. I think it's because in order for speed, I'm mixing fixed with columns and rows, which I usually do because it gives you headaches like I think I've just encountered, which is that elements don't lay out quite how you expect them and so you don't see them there anyway. Now we're seeing our social posts about this time I ran a prompt for traveling in France and we're seeing these. And if I go back into data, we can see that it's added in our three posts about traveling around France.

Still stuck? How we can help

So if you want even more help with your Bubble videos... more help with your Bubble app creation. Head over to our website where we have even more Bubble videos for you. And we have one to one coaching available that you can book straight in the calendar at a time convenient to you. And you can speak to someone like myself who will guide you through whatever you're stuck with in Bubble, and we can work it out to get together.

Latest videos

lockmenu