Bubble.io continues to revolutionize app development, offering a seamless no-code platform for building robust applications.
In this guide, I walk through the steps to integrate a JSON object into a Bubble Thing.
This post was written to complement a plugin released to the Bubble Marketplace that helps convert text data formatted in JSON, from a service like ChatGPT, into a list of separate objects that can then be individually mapped to Bubble Things in the database.
Step 1: Prepare Your Backend
Before diving into workflows and API calls, make sure your backend settings are correct. Enable Workflow API and backend workflows on the API tab under Settings (a paid Bubble plan is required to access this setting.
Step 2: Create a Backend Workflow
Create a new API workflow under Backend Workflows that will to handle the conversion of your data to a Bubble Thing. In this example, we'll use our data to create a new "Recommendation" that includes multiple fields.
Choose "Detect request data" under Parameter definition rather than Manual definition, which will force Bubble to use the fields in your JSON formatted text to define the inputs.
Click "Detect data" to launch the initialization process. Copy the URL that appears in the popup.
Open a separate browser tab, go to your Bubble app, click on the Plugins tab, then API Connector, and set up a new API connection.
Add a shared head to all calls with Key of "Content-type" and Value of "application/json".
Create a new API call, enter the copied initialization URL in the URL field, change the action to POST and set "Use as" to Action so you can call this API later on.
Add a parameter called <body> and add in an example of the JSON object you want to map and deselect the Private option. The fields here will be detected by the workflow.
Click Initialize call.
Step 4: Map JSON Fields to Bubble Types
Upon initialization, a success message should appear in this tab, confirming the API connection. Click Save. Before leaving this tab, update the URL in the API call to remove the "initialize" portion.
In the backend workflow tab, a popup should appear that shows how Bubble mapped your JSON fields to Bubble types. Make any adjustments to data types necessary and click Save.
You now have a working API workflow that can be used to define what to do with the JSON Object.
Step 5: Define Actions in Backend Workflow
In the backend workflow tab, define what you want to do with the JSON object. This could be saving it to a database or triggering another specific action within your application. Tailor this step to your unique application requirements.
In the example below, we use the Request Data to Create a new DB thing (Recommendation).
Step 6: Working with Lists
Finally, to handle a list of JSON objects, similar to what you might get by using this ChatGPT JSON converter plugin, create another backend API workflow. This workflow should take a list of text inputs, and call the "Create Your Thing" API of the first item.
To iterate through the list, you can utilize a utility such as List Popper to remove the first item from the list, and pass the "Remaining List" back to the same API workflow. Make sure you add an "Only when" condition to end the iterative process.
Note on formats: You may need to experiment with changing the format of data passed to the API call. In my testing with data from ChatGPT, I had to change the format of the "body"
parameter to "Raw" to get it to work. Make sure you test each step in your workflow process separately to isolate problems.
By following these steps, you can effortlessly integrate and manage JSON objects within Bubble, unlocking a new level of flexibility and functionality for your application.
Comments