Build a No Code News Web App Using SerpApi and Bubble

Bubble.io is a no-code development platform that allows users to build web applications without needing to write any code. We recently announced the release of SerpApi's plugin on Bubble.io. This makes it easier than ever to integrate SerpApi along with other parts of your app without having to write any code.

SerpApi provides Google News API to scrape data directly from Google News. We have now released the Google News API in our Bubble plugin. You can use this API via our Bubble plugin to get news data and display it in your Bubble web app. In this tutorial, I am going to walk you through how to use our Google News API in your Bubble webapp.

Using SerpApi's Google News API

Google News is a news site that aggregates headlines from news sources worldwide. It contains real-time information and provides the top headlines from around the world. Google News covers a wide range of topics and is always updated. Scraping Google News results can provide you with valuable data and insights from the latest news articles. Moreover, you can scrape by topics, keywords or sources.

SerpApi's Google News API provides you direct access to scrape the results from Google News. Head to the Google News Results page of the documentation on SerpApi for more details.

To get started, head to the sign-up page to register an account and complete your first search in our interactive playground. SerpApi offers a free plan for newly created accounts, which comes with 100 free searches. If you want to do more searches with us, please visit the pricing page.

Once you are familiar with the fields included in the response, you can utilize the API using your API Key. Once you have the API key, let's head over to Bubble. All of the setup steps for our API are explained here in detail: https://serpapi.com/blog/introducing-serpapis-bubble-plugin/

In summary, these are steps:

• Create a Bubble account: https://bubble.io/
• Install the SerpApi plugin 
• Create a new project on Bubble.io
• Head to the Installed Plugins page for your app (by clicking on the "Plugin" tab on the navigation bar on the left) and add your private SerpApi API key there
• Head over to the Bubble Design page (by clicking on the "Design" tab on the navigation bar on the left) to start designing the app

After these are complete, we can start building our web app.

Building a News Web App In Bubble

In this tutorial, I am going to build a webapp to get the top headlines about a query that the user is interested in and display the headlines along with the links.

Let's start by building the UI of the webapp. I am going to keep it quite simple for the purpose of this tutorial. I have added one title label, one textbox to accept user input for searching for a query, and a Search button. I have also added a large text box called "news headlines" to display the resulting top 10 titles and links for the headlines.

This is what it looks like:

Once we have this, we can start setting up the different workflows in the app, to indicate how the elements will interact with each other.

There are essentially 2 parts we need to configure:

1. What happens when the search button is pressed?
2. What is displayed in the text box "news headlines"?

To perform some actions when the button is pressed, we can configure a workflow by clicking on the button and then clicking on "Edit Workflow":

This will take us to the workflow editor. There, we will set up a workflow to send a request to the Google News API we configured with the input from the user and the other parameters. This is what the step looks like:

Add an action -> Plugins -> SerpApi Google News API

Following this, we can configure the values for the parameters as applicable. Make sure q is set to the value of the user's input.

Now, let's add the next step to change the state of the result box and populate it with the titles and links of the news articles from the API response. Possible fields from the response will show up in the dropdown, and you can select the relevant ones.

In the "news headlines" response box, I want to display the first 10 results as a bullet point list with the titles, along with the embedded links. To achieve this, you can use the format as text block.

In the format as text block, I have used some code to format it in the way I described above:

[li][b][link="This Google News API news_result (SerpApi)'s link"]This Google News API news_result (SerpApi)'s title[/link][/b][/li]

Here, it's important to understand how we got to the items we are interested in for our list. To understand this, we have to understand the structure of the response. So, let's head over to our playground to visualize the response:

There you can view the different elements of the response, and pick the parameters based on the data that you are interested in showing in your app. In the example above, I have chosen to display the title and link from the first 10 results from the API response. Once, you have an idea of what to pick, you can click on the relevant field in the Bubble editor, and select it.

After the state is set, I have also added a third step to show the "news headlines" response box on the UI once it is ready with the results:

Now, we are ready to configure the properties for the "news headlines" text box which will display the results. It's quite simple - we are going to display the response from the state we set earlier. Here is how this can be configured:

I have also set the box to stay hidden until we show it with the result when the button is pressed. You can do this by un-checking this box in the "Layout" section:

Previewing and Testing Your App

Now that our UI is ready, the workflows have been configured and the API is set up and ready to use, we can preview the app and test it using Bubble's preview link on the top right:

Here are some queries to try out your app with:

• USA
• Sports
• Around the world

Or, you can test it with any other queries.

Following this, you can deploy the app and view it in action!

Here is a demo of the example app we set up in this blog post:

Build More With Bubble and SerpApi

Currently, our Bubble plugin supports our Google Search API and Google News API. We'll be updating it very soon to include our other APIs as well, and we encourage you to keep an eye out for those updates. If you would like us to prioritize adding support for another API, please let us know. You can do that by emailing us at contact@serpapi.com or opening a ticket on our Public Roadmap.

Through a vast library of plugins, you can extend your Bubble app's functionality by integrating third-party services like payment gateways, maps, and other APIs as well in Bubble. I encourage you to check out our plugin here and their other plugins here.

I hope you found this tutorial helpful. If you have any questions, don't hesitate to reach out to me at sonika@serpapi.com.

Related Links and Posts

• SerpApi's Google News API
• SerpApi's Playground
• SerpApi's Bubble Plugin
• Other Bubble Plugins