How to build a weather app in Bubble

The simplest way to build a weather app in Bubble is to create a page with a search box, call a real weather API through Bubble’s API Connector, and display the returned data (temperature, conditions, icon, etc.) in text elements. You don’t need backend workflows unless you want to store history; the core is: user inputs a city → Bubble sends an API request → you display the response.

Core Steps to Build the Weather App

This follows real Bubble features only, with no made‑up concepts.

• Create a page with an Input (city name) and a Button (“Get Weather”).
• Install the API Connector plugin. This lets Bubble call external APIs like OpenWeather or WeatherAPI.
• In API Connector, create a call using the API’s URL and your API key. Set it to GET and check “JSON” response type.
• Initialize the call so Bubble learns the response fields (temperature, humidity, icon URL, etc.).
• Back on the page, set the Button’s workflow to “Make API Call” and expose its result.
• Bind text elements to “Result of step X’s field\_name”. That’s how you show weather data.

Example API Connector Setup (OpenWeather)

{
  "name": "OpenWeather",
  "calls": [
    {
      "name": "Current Weather",
      "method": "GET",
      "use_querystring": true,
      "url": "https://api.openweathermap.org/data/2.5/weather?q=<city>&units=metric&appid=YOUR_API_KEY"
    }
  ]
}
// Replace <city> with the key parameter you create in API Connector

How to Use the API Response on the Page

• Create a Group to hold the results. Set its data source to “Result of step 1 (Current Weather)”.
• Inside the group, add Text elements and map them to fields like “main.temp”, “weather’s first item.description”.
• Add an Image element and set its dynamic image to “https://openweathermap.org/img/wn/[weather’s first item.icon]@2x.png”.

This setup gives you a working weather app: enter a city, hit the button, call the API, and display real data—using only built‑in Bubble concepts that ship production apps.