Building a Weather App using Lightning Web Components (LWC)

In this post, we will walk through the process of building a simple weather application using Lightning Web Components (LWC). LWC is a modern web component framework provided by Salesforce that allows developers to build reusable, performant, and customizable UI components.

Prerequisites: Before we start, make sure you have the following:

• Salesforce Developer Edition or any Salesforce environment to build and test LWC components.
• Basic knowledge of JavaScript, HTML, and CSS.

Step 1: Setting up the Project:

• Create a new LWC component named “WeatherApp” in your Salesforce environment.
• Open the “WeatherApp.html” file and replace the existing code with the following:

<template>
  <lightning-card>
    <div class="slds-m-top_medium slds-m-bottom_x-small">
      <center>
        <div class="slds-text-heading_large">Weather App</div>
      </center>
      <div class="slds-p-around_medium lgc-bg">
        <lightning-layout>
          <lightning-layout-item flexibility="auto" padding="around-small">
            <div class="slds-text-heading_small">Enter City</div>
            <lightning-input type="text" value={city} onchange={handleChange}></lightning-input>
            <br>
            <lightning-button label="Get Info" variant="brand" onclick={getWeather}></lightning-button>
            <br>
            <div class="slds-m-top_medium slds-m-bottom_x-small">
              <div class="slds-text-heading_small">Temperature - {celsius}</div><br>
              <div class="slds-text-heading_small">Humidity - {humidity}</div><br>
              <div class="slds-text-heading_small">Description - {description}</div><br>
            </div>
          </lightning-layout-item>
        </lightning-layout>
      </div>
    </div>
  </lightning-card>
</template>

• We use the lightning-card component to create a card-like container for our weather app.
• The lightning-layout and lightning-layout-item components are used for arranging the elements in a responsive grid layout.
• The lightning-input component is used to capture the user’s input for the city.
• The lightning-button component triggers the getWeather method to fetch weather information.
• The temperature, humidity, and description are displayed using the slds-text-heading_small class.

Step 2: Adding JavaScript Functionality:

• Open the “WeatherApp.js” file and replace the existing code with the following:

import { LightningElement } from 'lwc';

export default class WeatherApp extends LightningElement {
  city = '';
  temp = '';
  humidity = '';
  description = '';
  celsius = '';

  handleChange(event) {
    this.city = event.target.value;
  }

  async getWeather() {
    if (!this.city) {
      this.resetWeatherData();
      return;
    }

    const apiKey = '761a1a659bfed10d01f337a41b2a252c';
    const url = `https://api.openweathermap.org/data/2.5/weather?q=${this.city}&appid=${apiKey}`;

    const response = await fetch(url);
    const { main, weather } = await response.json();

    this.temp = main.temp;
    this.celsius = `${Math.trunc(this.temp - 273.15)} Celsius`;
    this.humidity = `${main.humidity}%`;
    this.description = weather[0].description.charAt(0).toUpperCase() + weather[0].description.slice(1);
  }

  resetWeatherData() {
    this.temp = '';
    this.celsius = '';
    this.humidity = '';
    this.description = '';
  }
}

• We import the LightningElement base class from the LWC module.
• The WeatherApp class extends LightningElement, which is the base class for LWC components.
• The component has several properties such as city, temp, humidity, description, and celsius to store weather-related data.
• The handleChange method is triggered when the user enters a city name, updating the city property accordingly.
• The getWeather method is called when the user clicks the “Get Info” button. It fetches weather data from the OpenWeatherMap API based on the provided city name.
• The fetched weather data is then assigned to the respective properties, and additional transformations are applied, such as converting the temperature from Kelvin to Celsius.
• The resetWeatherData method resets the weather data properties to empty values if no city name is provided.

So, we built a simple weather app using Lightning Web Components (LWC). We explored how to capture user input, make API requests, and display the fetched data in a user-friendly format. With LWC, we can create interactive and responsive UI components that can be easily integrated into Salesforce or any web application.

Please note that we used our own API key from openweathermap.org to fetch the weather data. To use this app, you’ll need to create your own API key from OpenWeatherMap. You can sign up for a free account at openweathermap.org and obtain an API key. Replace the apiKey variable in the getWeather method with your own API key to ensure the app fetches the weather data correctly.

Feel free to customize and enhance this weather app according to your needs. Enjoy building with Lightning Web Components!

Visit – https://developer.salesforce.com/docs/platform/lwc/guide