天気予報ウィジェットを作成する

We used OpenWeatherMap as our third-party service. We registered for an API key on their site, which allows us to use their services.

ページ要素

In our site we added the following page elements:

• Dropdown list of cities: Site visitors select a city to view current weather data. The dropdown choice “values” are defined as city names listed in the third-party service site. We added an event handler in the dropdown element’s Properties panel that runs when a site visitor selects a city.

• Background image: This image changes depending on whether it’s sunny or cloudy in the selected city.

• Two text elements: These display the weather description and temperature in the selected city.

コード

Then we added code to do the following:

Define variables: In the event handler that runs when a new city is selected in the dropdown, we defined variables to store the following:

• The value of the selected city in the dropdown

• Sources of the sunny and cloudy images

• Run the fetch request from a backend function. Note that the backend function uses an App ID secret from the Secrets Manager. You will need to get your own App ID and store it in the Secrets Manager to test the example.

Assign weather data to text elements.

We checked if the description was “clear sky” and the temperature was 10 degrees or higher. If so, we displayed the sunny image. If not, we displayed the default cloudy image.

次のステップ

1. この例をエディターで開き、テンプレートを操作してください。

2. サイトを公開する。

3. どのように Veloでの例題の扱い方.