How to Save Data From an API to Your Bubble Database | Bubble.io Tutorials

hey what's up you guys hope you're doing well today we're going to answer a question that was posted in the forum by jeet yajnik and i apologize yajnik if i'm mispronouncing your name your forum handle but let's i'm not going to read the whole question i'll leave a link to this post underneath this video the essentially the way i'm understanding it is we have a common situation where we're making an api request we're receiving data back and the data that we're receiving back contains a list of different objects that we essentially want to loop through and for each object that we get back we want to create an entry inside of our database so we're going to try to set this up in bubble and to do that i'm going to start by using this service called json placeholder so json placeholder is a great little service that you can use if you want to make api requests and get back dummy data just for testing purposes we're going to make a get request to this endpoint here and this endpoint will give us back a list of posts right each object here represents a single post and a post has a body title id and user id and then again the plan in bubble is to basically loop through this entire response that we receive and save each object as a different entry in our database so let's go over to bubble and i think the way that i want to start here we'll go to this index page or sorry this uh test page first and i've just put a button on the page that doesn't do anything right now but when this button is clicked the plan will be to fire off that api request receive the response and then take that response and pass it over to a back-end workflow to handle creating each entry in our database but let's start by actually just setting up the api call inside of the api connector here so i have the api connector installed as a plugin i'll click add another api let's call this dummy data and all we're going to do is we're going to make a get request to this endpoint right here oops and if we initialize the call there we go that should work for us so if you're new to bubble and not familiar with the api connector or how that works or if you're not familiar with back end workflows 2 which we're going to look at in a little bit here i'm going to speed through both of these these concepts and we're not going to dive deep into them right now i will make future courses and videos and i also cover these topics in depth and some of the boot camps that i teach for bubbles so if you're interested in taking a boot camp with me i'll post all of that information below this video but for now this is the response that we're receiving and you can see that it is exactly what we would expect and once i click save because we've initialized this call now bubble knows how to map out this data so that we can use it inside of our interface so we'll click save and now that that's set up let's go to our database here and we'll create a new data type called a post a post is going to have a title which is a text and a body which is also a text we'll ignore the id and all of that stuff because who cares we can get the same point across just with these two fields and what we'll do is when this button is clicked let's start by firing off that api request so if i go back to plugins what i'm actually going to want to do first is change this from data to action and let's just change the name of this api call to get posts now the reason i change this to action of course is so that i can use this api call inside of a workflow here as a workflow action so when create posts is clicked we'll say start edit workflow we'll click to add an action and i'm going to go to plugins and right here dummy data get posts okay so this call right here will result in us receiving a list of posts like we said that will look like this and now that we've initialized the call bubble knows what to expect and what this list is actually going to look like what the response is going to look like so what we want to do is we want to take each well we want to take that response that we received in step one here and send it to a backend workflow or at least like loop through each one of those objects and pass that individual object to a back-end workflow where we'll create that entry in our database to do this let's go to back-end workflows and we'll actually create this endpoint here that's going to handle receiving data and saving it to our database let's call this workflow create post and we'll add a new parameter the parameter will be called title and body which is also a text what we'll do is inside of this workflow we're going to have a very simple action we'll say data create a new thing that type of thing is going to be a post and we'll set both fields to be equal to whatever the value for that parameter is that's being passed so body is equal to this body parameter right here and title is equal to that title parameter right here okay so we've set up our backend workflow and every time this workflow is triggered we're going to create a new post in our database so if we go back to the front end now to this test page when button create post is clicked in step one we're sending that request and we're getting back this list right here and what we can do next is we can say custom events schedule api workflow on a list now the type of things that we want the type of list that we want to run this workflow on is actually going to be i believe that name change didn't get reflected but it's actually i'm pretty sure it's just going to be this api call right here and we did rename this but i think because we haven't reinitialized the call let's try this and see if it works and go back to workflow there we go so when we reinitialize the call that name change actually went through and so the type of list that we actually want to say that we're going to run this on is going to be get post and this can be a little bit confusing but the type of list that this is going to be is actually this list right here right that we're receiving back so because we've initialized the call because bubble knows um that when we fire this api request we're going to get this data back and it knows how to map that out i can actually say that the list that's why we have this get post option here as a type of type of things if that makes any sense hopefully it does and then because i've said that the type of things is going to be get post the list that i want to run on is actually going to be the result of step one here right and we get this nice blue expression because we're being consistent with the type of of data that we're passing the api workflow is going to be called create post that's the backend workflow that we created we'll schedule it for the current date and time and we'll leave interval blank the title that we want to pass is going to be this get posts title i'm going to i'm going to look at a diagram of this in a second to hopefully make it make more sense if this is confusing at all and then the body is going to be this get posts whoops this git post's body okay let's let's trigger this and see if it actually works and then we'll go look at a little diagram of and try to understand what's kind of happening behind the scenes so the list to run on will say a result of step one and why don't we just say so that we don't create a hundred entries in our database why don't we just say items until number five and i think that looks good so let's try this out and hope that it works we'll click on create posts that gets that request gets fired off we take that list at least the first five entries and pass each object off to that back-end workflow and if i go to my database and go to app data and click on all posts there you go we can see we have five entries and it looks like they got created nicely and everything looks okay so let's head over to sketchpad here and i've i've kind of drawn this out to just show you a visual of what's going on so we have this back-end workflow that we created called create post we have this response that we're receiving here right these different objects each one of which represents a post and when we schedule an api workflow on a list what we're doing is we're basically going through each object here and passing that object off one at a time to this back-end workflow called create post now this back-end workflow create post we've said that it needs two parameters it needs a body and a title right and so for each post we're taking the title and passing it as this parameter and we're taking the body passing it as this parameter over here so i hope that messy drawing um messy as it is makes things a little bit more clear let me know if the com in the comments if that's the case or if it's not um and then yeah the process of this is looping through each one of these posts one by one like that now this works um the challenge is that inside of of bubble you know we created five entries here and creating things in the database one by one is something that at least at this moment in time is is quite a slow operation in bubble so if you had you know hundreds of things that you're creating in your database and you're trying to run a setup like this it might not be the best option so in the future i'm going to i actually recently had a coaching client who was dealing with something very similar where he had just tons of different data and multiple kind of loops that he was was going through and wanted to have this happen on the back end when we set everything up in the way that i just showed you using kind of the native bubble approach with back-end workflows um the entire operation from start to finish took like 13 minutes or something anyways it just took way too long so we were looking at different approaches to get that done and in a future video i'll show you some different approaches that we came up with so that's about everything for now i hope you found this video helpful and i'll see you in the next one bye

Channel: Jacob Gershkovich

Views: 28,330

Keywords: apps without code, bubble.io, bubble.io tutorial, bubble.is tutorial, build an app without coding, learn bubble.io, no code app development, JSON, bubble.io api tutorial, bubble.io api integration, bubble.io backend workflow, nocode, webapps, tutorial, app development

Id: 4CE21Xn7fgI

Length: 12min 16sec (736 seconds)

Published: Wed Jan 26 2022