diff --git a/docs/nodes/credentials/Bubble/README.md b/docs/nodes/credentials/Bubble/README.md new file mode 100644 index 000000000..83d86ff0c --- /dev/null +++ b/docs/nodes/credentials/Bubble/README.md @@ -0,0 +1,38 @@ +--- +permalink: /credentials/bubble +description: Learn to configure credentials for the Bubble node in n8n +--- + +# Bubble + +You can use these credentials to authenticate the following nodes with Bubble. +- [Bubble](../../nodes-library/nodes/Bubble/README.md) + +## Prerequisites + +Create a [Bubble](https://bubble.io) account. + +**Note:** You need a Personal or a higher plan to get access to the Bubble API. + +## Using API Key + +1. Open your Bubble [dashboard](https://bubble.io/home) page. +2. Select an app under the ***My apps*** section to open the app. +3. Click on ***Settings*** on the left-sidebar. +4. Click on the ***API*** tab. +5. Click on the ***Generate a new API token*** button. +6. Enter a token name in the ***API Token Label*** field. +7. Copy the displayed Private Key. +8. Enter the name for your credentials in the ***Credentials Name*** field in the 'Bubble API' credentials in n8n. +9. Paste the Private Key in the ***API Token*** field in the 'Bubble API' credentials in n8n. +10. Enter the app name in the ***APP Name*** field. +11. Select 'Development' from the ***Environment*** dropdown list. If you want to use the 'Live' environment, select 'Live' instead. +12. Click on the ***Create*** button to create your credentials. + +**Note:** If you're self-hosting your Bubble app, select 'Self-hosted' from the ***Hosting*** dropdown list. You will also need to enter the domain of your hosted instance in the ***Domain*** field. + +The following video demonstrates the steps mentioned above. + +
+ +
diff --git a/docs/nodes/nodes-library/nodes/Bubble/Bubble1_node.png b/docs/nodes/nodes-library/nodes/Bubble/Bubble1_node.png new file mode 100644 index 000000000..8c5872b9b Binary files /dev/null and b/docs/nodes/nodes-library/nodes/Bubble/Bubble1_node.png differ diff --git a/docs/nodes/nodes-library/nodes/Bubble/Bubble2_node.png b/docs/nodes/nodes-library/nodes/Bubble/Bubble2_node.png new file mode 100644 index 000000000..283627fab Binary files /dev/null and b/docs/nodes/nodes-library/nodes/Bubble/Bubble2_node.png differ diff --git a/docs/nodes/nodes-library/nodes/Bubble/Bubble_node.png b/docs/nodes/nodes-library/nodes/Bubble/Bubble_node.png new file mode 100644 index 000000000..6e3072128 Binary files /dev/null and b/docs/nodes/nodes-library/nodes/Bubble/Bubble_node.png differ diff --git a/docs/nodes/nodes-library/nodes/Bubble/README.md b/docs/nodes/nodes-library/nodes/Bubble/README.md new file mode 100644 index 000000000..189b9e50a --- /dev/null +++ b/docs/nodes/nodes-library/nodes/Bubble/README.md @@ -0,0 +1,89 @@ +--- +permalink: /nodes/n8n-nodes-base.bubble +description: Learn how to use the Bubble node in n8n +--- + +# Bubble + +[Bubble](https://www.bubble.io/) lets you create interactive, multi-user apps for desktop and mobile web browsers. + +::: tip 🔑 Credentials +You can find authentication information for this node [here](../../../credentials/Bubble/README.md). +::: + +## Basic Operations + +::: details Object +- Create an object +- Delete an object +- Get an object +- Get all objects +- Update an object +::: + +## Example Usage + +This workflow allows you to create, update, and get an object from Bubble. You can also find the [workflow](https://n8n.io/workflows/1041) on n8n.io. This example usage workflow would use the following nodes. +- [Start](../../core-nodes/Start/README.md) +- [Bubble]() + +The final workflow should look like the following image. + +![A workflow with the Bubble node](./workflow.png) + +### 1. Start node + +The start node exists by default when you create a new workflow. + +### 2. Bubble node (create: object) + +This node will create a new object of the type `Doc` in Bubble. If you want to create an object with a different type, use that type instead. + +1. First of all, you'll have to enter credentials for the Bubble node. You can find out how to do that [here](../../../credentials/Bubble/README.md). +2. Select 'Create' from the ***Operation*** dropdown list. +3. Enter `Doc` in the ***Type Name*** field. +4. Click on the ***Add Property*** button. +5. Enter `Name` in the ***Key*** field. If you're using a different type, enter the field name present in the type. +6. Enter `Bubble` in the ***Value*** field. +7. Click on ***Execute Node*** to run the node. + +In the screenshot below, you will notice that the node creates a new object of the type `Doc` in Bubble. + +![Using the Bubble node to create a new object](./Bubble_node.png) + + +### 3. Bubble1 node (update: object) + +This node will update the object that we created using the previous node. +::: v-pre +1. Select the credentials that you entered in the previous Bubble node. +2. Select 'Update' from the ***Operation*** dropdown list. +3. Click on the gears icon next to the ***Type Name*** field and click on ***Add Expression***. +4. Select the following in the ***Variable Selector*** section: Nodes > Bubble > Parameters > typeName. You can also add the following expression: `{{$node["Bubble"].parameter["typeName"]}}`. +5. Click on the gears icon next to the ***Object ID*** field and click on ***Add Expression***. +6. Select the following in the ***Variable Selector*** section: Current Node > Input Data > JSON > id. You can also add the following expression: `{{$json["id"]}}`. +6. Click on the ***Add Property*** button. +7. Enter `Name` in the ***Key*** field. If you're using a different type, enter the field name present in the type. +8. Enter `Bubble node` in the ***Value*** field. +9. Click on ***Execute Node*** to run the node. +::: + +In the screenshot below, you will notice that the node updates the information of the object that got created previously. + +![Using the Bubble node to update the information of an object](./Bubble1_node.png) + +### 4. Bubble2 node (get: object) + +This node will retrieve the information of the object that we created earlier. + +::: v-pre +1. Select the credentials that you entered in the previous Bubble node. +2. Click on the gears icon next to the ***Type Name*** field and click on ***Add Expression***. +3. Select the following in the ***Variable Selector*** section: Nodes > Bubble > Parameters > typeName. You can also add the following expression: `{{$node["Bubble"].parameter["typeName"]}}`. +4. Click on the gears icon next to the ***Object ID*** field and click on ***Add Expression***. +5. Select the following in the ***Variable Selector*** section: Nodes > Bubble > Output Data > JSON > id. You can also add the following expression: `{{$node["Bubble"].json["id"]}}`. +6. Click on ***Execute Node*** to run the node. + +In the screenshot below, you will notice that the node retrieves the information of the object that we created earlier. + +![Using the Bubble node to retrieve the information of an object](./Bubble2_node.png) diff --git a/docs/nodes/nodes-library/nodes/Bubble/workflow.png b/docs/nodes/nodes-library/nodes/Bubble/workflow.png new file mode 100644 index 000000000..d99e69fa0 Binary files /dev/null and b/docs/nodes/nodes-library/nodes/Bubble/workflow.png differ