Limited Time Offer: Watch All Our Bubble Tutorial Videos for Only $99 per Year!

Introduction

In this Bubble tutorial video, I'm going to show you how you can create your own no code search engine. We'll be using the bubble no code web application platform and we'll be combining bubble with the Brave search API.

Setting up the Search Engine

What do we need for a search engine? Well, we need to add in an input and then we need to add in a button. Now I'm not going to pay much attention at all to styling here. I'm simply focusing on the data. When building an app in bubble, you want to really avoid using layout fixed.

You want to be using rows and columns 99% of the time. Do check out our other videos on that if you're unsure. So I'm going to say that this is search and that this field cannot be empty. Now I'm actually going to show the search results on another page, just like you experience with Google. But before that I need to connect into a web search API.

Connecting to the API

Now I think Google does have an API and Bing has an API, but I've been experimenting with the Brave search API, if you're not aware of it. Brave began by creating a privacy focus web browser and now they're doing a privacy focus search, which I think is pretty cool. And there's some AI elements worked into it, which I may cover in a future video. But we can go over to brave and see how to set up our API call. And so we have an endpoint here.

I'm going to copy this and go into bubble. And because we're connecting to a third party API, I need to go into plugins and go to the app, the API connector. If you don't see it, you can add it in with the add plugins and get it from the directory. Here's a sneak peek, or rather they're all available. These are all the other services that we've ever done tutorials on.

So if you see anything good there, do give our channel or our website a search. But I'm going to add in a new API and call it brave search.

I know I need to put a private key in the header, but I'm going to come back to that because here is my search and I'm going to say, yeah, search and paste in my endpoint, then let's go back here. And this tells me everything else I need to include in my API request. So I've got in the header section H for header I need to include the accept application JsON. Well, I say I need to include bubble actually includes that by default unless you choose to override it. But I do need to include this accept encoding.

Testing the API Call

So I'm going to add that in as a shared header.

Jesus, paste that in. And then how does my query go in? Well, it looks like this. So search like that, copy that, paste it in.

I'm going to leave this as data and just see how well this works. I might have to come back to that, but anyway my search term goes in here and then I need my API key because I have to put in the header.

This parameter bubble puts authorization there because 90% of APIs use that for the key name. But brave wants us to use x subscription token. And then I go into my API keys and I copy it, paste it in and let's give it a test. The unticked private, because I want to insert data into there using a workflow, I want to insert data from there in the front end of my app, which means that it can't be private. So let's search for something.

Displaying the Search Results

Let's search for best hotels in London and initialize our search. And what's wonderful about this is it's really quick and we get back all of this data and bubble here is learning how to structure the response. But to dig back into it we can go down and this is the actual JSON code that the API returns. So we get back some videos and we get back some web content here too. And so yeah, here we go.

This is the title of the first result. Here's the description. We've got links, we've got loads and loads of data here. We've even got, if I go all the way down, we've got FAQs.

It provides you with tons of data that can be really useful to your app users. What are the best hotels near the British Museum? It's got that and it's got an answer and then it's got a link that you can send your users onto. I'm going to click save. That has taught bubble the format of the data that is coming back from the API call.

So now I'm going to go and create a new page and call this one results and I'm going to add in a repeating group and this is going to list my results. And then I need to find the data type that I'm going to list through. So that is going to be one of the search web. In fact I'm going to get to it by saying get data from external API and then my search API and then the data source is my web. Here it is.

Yeah. Okay, now this is a little bit tricky to match up because I'm basically going in a few levels deep into the JSON. Now I know it's matched because the text has turned blue here. So I'm saying ignore the videos, ignore the FAQs. I just want to show web results and my actual search term of course goes in here.

Now I'm going to do this like Google, which is that when someone clicks the search button on the page we were at a moment ago, I'm going to send that through in the URL and then extract it back out here. So the search is actually going to be get data from page URL Q for query.

And so that's going to be my search term. So when I go back to my search engine page, when search has clicked, I want to go to page results and I want to add a parameter which is Q for query and then my inputs value.

Let's go back to results and let's just add in some bare basics to show you the data. Again, I'm not focusing on design at all. I'm simply just getting the text in there as quickly as I can. So let's just add in a big text box and we'll say current sales search results title. Then we can say current sales search results URL.

I'm just putting these all on a new line. Current sales search results description okay, let's go back to search engine and let's preview it.

So I think I'll ask it the same question. I'll say what are the best hotels in London? And I'm going to click search and it takes through the page and there you go, it loads it in. Isn't that cool? So effectively I've built my own search engine using the brave search API with no code in my bubble app.

Now there are loads of uses. I've already recorded a video of how we can incorporate search results like Live web data, how we can incorporate that into OpenAI into a chat upt clone. But you could go in all sorts of directions here if you've got any questions or ideas, we love it when you leave a comment. So please like subscribe, leave a comment, give us your feedback and if there's any other videos that you want to see, reach out to us because we love hearing from you guys.

Latest videos

lockmenu