🚀 Supercharge Your No-Code App: Web Scraping with Browse AI and Bubble.io 🧰

👋 Introduction

Want to unlock a world of data and automate tasks right inside your Bubble.io apps? This cheatsheet shows you how to integrate the power of Browse AI’s web scraping robots directly into your no-code workflows.

We’ll cover:

• Setting up the API connection between Browse AI and Bubble.io
• Sending dynamic instructions to your scraping robots
• Testing your setup and handling any hiccups
• Using webhooks to efficiently receive scraped data

Let’s dive in!

🔗 Connecting Browse AI and Bubble.io

🤖 Setting Up the API Connector

1. Find Your Robot’s ID: In Browse AI, navigate to the robot you want to use and grab its unique ID.
2. Create an API Connector: In your Bubble.io app, add a new API connector and name it something descriptive (e.g., “BrowseAI”).
3. Configure the Request:
   • Method: POST
   • URL: Use the Browse AI API endpoint for running tasks (found in their documentation), replacing {robotId} with your robot’s ID. We’ll make this dynamic in a moment!
   • Authentication: Add a header for authorization:
     • Key: Authorization
     • Value: Bearer your_api_key (Replace your_api_key with your actual Browse AI API key).

⚙️ Making Your Robot Dynamic

1. Dynamic Robot ID: In the API connector’s URL field, replace the placeholder {robotId} with =<span class="katex"><span class="katex-mathml"><math xmlns="http://www.w3.org/1998/Math/MathML"><semantics><mrow><mi>R</mi><mi>o</mi><mi>b</mi><mi>o</mi><mi>t</mi><mi>I</mi><mi>D</mi></mrow><annotation encoding="application/x-tex">RobotID</annotation></semantics></math></span><span class="katex-html" aria-hidden="true"><span class="base"><span class="strut" style="height:0.68333em;vertical-align:0em;"></span><span class="mord mathnormal" style="margin-right:0.00773em;">R</span><span class="mord mathnormal">o</span><span class="mord mathnormal">b</span><span class="mord mathnormal">o</span><span class="mord mathnormal">t</span><span class="mord mathnormal" style="margin-right:0.07847em;">I</span><span class="mord mathnormal" style="margin-right:0.08784em;">D</span></span></span></span></span> (without the backticks). This lets you easily switch robots later.
2. Uncheck “Private”: This ensures you can use the dynamic ID within your Bubble.io workflows.

🗣️ Sending Instructions to Your Robot

📝 Defining Input Parameters

1. Understand the Structure: Browse AI’s API expects parameters in a specific format. Refer to their documentation for the exact structure your robot needs.
2. Add Parameters: In your API connector, add the required parameters (e.g., search_text, max_posts). Make sure to nest them correctly within the input_parameters object as shown in the Browse AI documentation.

🧪 Testing and Troubleshooting

1. Initialize a Call: In Bubble.io, use the “Initialize” button to test your API connector.
2. Check for Success: A success code means your connection is good!
3. Monitor in Browse AI: Head back to Browse AI and check the “Run Tasks” section. You should see a new task triggered by your API call.
4. Handle Errors: If you encounter errors, double-check:
   • API Key: Make sure it’s correct and entered in the right place.
   • Parameter Format: Browse AI’s API can be picky! Ensure your parameters are structured exactly as their documentation specifies.

📨 Receiving Data with Webhooks

🪝 Why Webhooks?

Webhooks are like instant notifications. Instead of your Bubble.io app constantly checking for results, Browse AI will automatically send the scraped data as soon as it’s ready.

⚙️ Setting Up Webhooks (In Browse AI)

1. Create a Webhook: In your Browse AI account, set up a new webhook.
2. Point it to Bubble.io: Provide the webhook URL from your Bubble.io app. This is where Browse AI will send the data.

🔄 Handling Data in Bubble.io

1. Backend Workflow: Create a backend workflow in Bubble.io that’s triggered by your webhook.
2. Process the Data: Extract the relevant information from the webhook’s payload (the data Browse AI sends).
3. Use the Data: Update your Bubble.io app with the freshly scraped data!

🎉 Conclusion

You’ve now unlocked the power to automate web scraping within your Bubble.io apps! Use this to:

• Gather data for market research
• Monitor competitor pricing
• Create automated content feeds
• And much more!

This is just the beginning. Experiment, explore Browse AI’s API documentation, and build amazing things!

🧰 The Toolbox

Here are the essential tools mentioned in this cheatsheet:

• Browse AI: https://www.browse.ai/ – Powerful, user-friendly web scraping tool.
• Bubble.io: https://bubble.io/ – Leading no-code platform for building web applications.

🤔 What’s Next?

Ready to take your skills further?

• Dive Deeper into Browse AI: Explore their API documentation to discover advanced features and customization options.
• Master Bubble.io: Learn more about backend workflows, data manipulation, and building complex applications.
• Combine with Other Tools: Integrate other APIs and services to create even more powerful automations.