> For the complete documentation index, see [llms.txt](https://readme.directual.com/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://readme.directual.com/directual-step-by-step/weather-forecast-app.md).

# Weather Forecast App

## App Idea

Create a form that provides users with access to real-time weather data for a specific city. The app leverages a [plugin](/plugins/using-plugins.md) to establish a connection with [OpenWeatherMap](https://openweathermap.org/api).

[Result](https://weather-app.directual.app/forecast)

## Development Process

{% embed url="<https://youtu.be/HpgpUZhcg84>" %}

### Step 1: Connecting Plugin

Go to the Plugins page and install the Open Weather [plugin](/plugins/using-plugins.md) (follow the provided instructions).

![](/files/-MflCJZLSXuo4zq06SPt)

### Step 2: Configure Data Structure

In the database section, create a new data structure with the following fields:

![](/files/-MflCqpp5dLa6h5HbVvS)

### Step 3: Configure API Endpoint

Create an Endpoint in the API Section with the Following Settings:

![](/files/-MflDIDrgR44mQYjyycc)

### Step 4: Build Scenario

Create the following scenario:

![](/files/-MflEpWv58sqIulLUF3Q)

Settings for the Start step:

![](/files/-MflExGOpUZ0KcafuhLq)

{% hint style="info" %}
Note that we leave the trigger settings blank ("Run scenario by") because we intend to run the scenario [synchronously](/scenarios/synchronic-scenarios-1.md).
{% endhint %}

&#x20;Settings for the Plugin step:

![](/files/-MflFsXlTYH4utv7l29L)

Settings for the Edit object:

![Left: parse JSON response. Right: compose result message](/files/-MflEuXnE-2qoS6CXXsX)

{% hint style="info" %}
Don't forget to **Publish** and to **Run** the scenario!
{% endhint %}

### Step 5: Add Scenario to Endpoint with "**Calling Synchronously**" Setting

Go to the endpoint and configure the following parameters:

![](/files/-MflLhUufK2JuV44YZg-)

### Step 5: Create and Configure Web Form

Go to the [Web-pages section](/web-pages/portal.md), create a new page, add a [Form component](/web-pages/components/legacy-components/form.md). Configure the form Settings as follows:

![](/files/-MflMD5191QC6CNVKsoD)

### Success!

![](/files/-MflMlTS6m-F6ShoENlW)