> 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).

![](https://3071851461-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-M4Nnmtk9_gFGWOddsf6%2F-MflBd6NXW-pnxTVvVCV%2F-MflCJZLSXuo4zq06SPt%2F1.jpg?alt=media\&token=e8d1afff-559f-49a8-bbc0-177a88719fcb)

### Step 2: Configure Data Structure

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

![](https://3071851461-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-M4Nnmtk9_gFGWOddsf6%2F-MflBd6NXW-pnxTVvVCV%2F-MflCqpp5dLa6h5HbVvS%2F2.jpg?alt=media\&token=17782b99-ff3e-414a-af76-79d8d2ff0936)

### Step 3: Configure API Endpoint

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

![](https://3071851461-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-M4Nnmtk9_gFGWOddsf6%2F-MflBd6NXW-pnxTVvVCV%2F-MflDIDrgR44mQYjyycc%2F3.jpg?alt=media\&token=2f87f974-5e1a-4cb3-b1c3-b764819d2dd2)

### Step 4: Build Scenario

Create the following scenario:

![](https://3071851461-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-M4Nnmtk9_gFGWOddsf6%2F-MflBd6NXW-pnxTVvVCV%2F-MflEpWv58sqIulLUF3Q%2Fscen-1.jpg?alt=media\&token=286346b2-ff73-4656-a38a-16f4f7b772fa)

Settings for the Start step:

![](https://3071851461-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-M4Nnmtk9_gFGWOddsf6%2F-MflBd6NXW-pnxTVvVCV%2F-MflExGOpUZ0KcafuhLq%2Fscen-start.jpg?alt=media\&token=71b05aa6-eaf6-4b13-8b6e-f9d00088a312)

{% 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:

![](https://3071851461-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-M4Nnmtk9_gFGWOddsf6%2F-MflBd6NXW-pnxTVvVCV%2F-MflFsXlTYH4utv7l29L%2Fscen-plug.jpg?alt=media\&token=c8bd6599-caa2-4ef4-b6ec-3edfff3b797e)

Settings for the Edit object:

![Left: parse JSON response. Right: compose result message](https://3071851461-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-M4Nnmtk9_gFGWOddsf6%2F-MflBd6NXW-pnxTVvVCV%2F-MflEuXnE-2qoS6CXXsX%2Fscen-2.jpg?alt=media\&token=5b3ec860-ff95-4dc1-9142-acf7d50d2c77)

{% 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:

![](https://3071851461-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-M4Nnmtk9_gFGWOddsf6%2F-MflGATQhRNqIgH6-IfE%2F-MflLhUufK2JuV44YZg-%2Fsync.jpg?alt=media\&token=a9c9b81b-7e4e-4182-a078-1b9eb52d62d8)

### 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:

![](https://3071851461-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-M4Nnmtk9_gFGWOddsf6%2F-MflGATQhRNqIgH6-IfE%2F-MflMD5191QC6CNVKsoD%2Fform.jpg?alt=media\&token=e8450849-f222-44fa-a86d-1fe722c374df)

### Success!

![](https://3071851461-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-M4Nnmtk9_gFGWOddsf6%2F-MflGATQhRNqIgH6-IfE%2F-MflMlTS6m-F6ShoENlW%2Fresult.gif?alt=media\&token=72150c3d-21a7-431c-9531-b2eaaf4831ff)