Imagine it was easy to web scrape Google search results just like these into your Bubble application. In this Bubble tutorial video I'm going to be showing you how you can web scrape Google search results and this is a must if you are building any SaaS app with Bubble that has got SEO spin to it.

Using Serper.dev for Web Scraping

And to do that I'm going to be using a platform called Serper.dev and I'm going to be demonstrating in this video how we can set up their API through the Bubble API connector and then in the following video I think I'll split it into two, I'll demonstrate how we can save them. We're going to need you to back and work those iterate through the responses that come back so that we can save each of their results.

Setting Up Serper.dev API in a Bubble Application

So let's launch into it. I'm going to go into my Bubble app and I'm going to add in a new API and I can name this whatever I want. This is for my reference. I'll call it Serper.dev and then I'm going to go in and I've literally just signed up for this. There's a generous at the moment 2,500 tokens available. You don't even need to enter your card details, you just need to confirm your email address and when it loaded in I think it was on, well I've swapped it to CURL because this is how I find it easier to translate API documentation into a Bubble app.

Configuring the API Call

So I'm going to need to copy the end point here and add an API call and I shall say scrape, in fact I need to just expand it, there we go. Scrape Google and I'm going to change it to post. I'm going to set it as an action so that it appears as a workflow action. Then going back to their documentation and I love APIs like this. It is a playground. They provide you with a way of testing their API and they show you the code required in order to run it.

Setting Up API Key and Headers

So I'm going to copy the API key label here and I'm going to put that into API key and header like that. Take my API key, I will be deleting this after I record this video and going back I need to have this also as a header. I'm going to put this into shared header because if I was to create more API calls with the serpo.dev platform I know that they're all going to have this in common and so this is application slash JSON.

Testing the API Call

Right and then the actual call here, it looks like it only has one input which is Q for query. So let's go back here. I'm trialing it in here and I'm going to say best no code web app platforms. Then I think I'll just give it a test.

Interpreting the API Response

Okay so here we get our organic results and it's a list. Now when the Bubble API connector returns as this visualization it's basically Bubble learning and having a good guess at the data and the structure of the data and how to label for example is it text, is it a number and so we're told that organic is a list and it gives us just one example of that and if I go into raw data I can see here that actually organic contains all of these items here and look there we go these are my results. We've got Zapier up top. Now it's going to vary depending on your region also depending on when you're logged in. I mean Google you know there's a personalization to search so actually if I go back onto here, oh we do have Zapier and then we have no code tech. Is that going to be second? Yeah no code tech. Okay so it is accurate to actually what I've experienced using Google.com.

Learning Bubble with Planet No Code

So that's how we can use the API connector to link in with the Serper.dev and if you're excited about learning Bubble there is no better place to do that than planet no code.com where we've got more Bubble tutorials than you can find on our YouTube channel. We have hundreds of Bubble tutorial videos many of which are exclusive to our members. So head over to our website, hit like and subscribe on here because I'm going to record part two of this video right away which is how do we save those individual entries into our Bubble database.