Build your own No-Code Search Engine with Bubble.io

Creating a No-Code Search Engine with Bubble.io

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. But before I launch into that, if you're learning Bubble there's no better place to do it than planetno-code.com where we've got hundreds of Bubble tutorial videos just like this one.

Setting Up the Search Interface

So let's get the essentials down. 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. So to check out, 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.

Connecting to the Brave Search API

Now I'm actually going to show the search results on another page just like you experienced with Google. But before that I need to connect into a web search 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-focused web browser and now they're doing a privacy-focused search which I think is pretty cool and there's some AI elements worked into it which I may cover in a future video.

Setting Up the API Connector in Bubble

But we can go over to Brave and see how to set up our API call. 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 of the API connector. If you don't see it you can add it in with the app plugins and get it from the directory. Here is a sneak peek or rather they're all available. These are all the other services that we've ever done tutorials on.

Configuring the API Request

So if you see anything good there do give our channel or our website a search and 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.

Setting Up API Headers

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 action includes that by default unless you choose to override it but I do need to include this except encoding. So I'm going to add that in as a shared header. Choose it paste that in and then how does my query going 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.

Adding the API Key

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. So Bubble puts authorization there because 90% of API's 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 that I'm ticked private because I want to insert data into there using a workflow or I want to insert data from there in the front end of my app which means that it can't be private.

Testing the API Connection

So let's let's search for something 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 FAQ's there we go yeah yeah it provides you with tons of data that can be really useful to your app users you know what are the best hotels near the British Museum it's got that and it's got an answer and it's got a link that you can send your users onto I'm gonna click save that has taught Bubble the format of the data that is coming back from the API call.

Creating the Results Page

So now I'm gonna 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 and that so that is going to be one of these search web in fact I'm gonna gonna 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 is turned blue here so I'm saying ignore the videos ignore the FAQ's I just want to set really I just want to show web results and my actual search term of course goes in here.

Setting Up the Search Workflow

Now I'm gonna do this like Google which is that when someone clicks the search button on the page we were at a moment ago I'm gonna 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 queue 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 queue 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 the tool 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 cell's search results title and we can say current cell's search results URL just putting these all on a new line current cell's search results description.

Testing the Search Engine

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 throughs the page 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 up.

Potential Applications and Future Developments

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 in to OpenAI into a ChatGPT clone but you know 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.