Weather Search Website in LWC - Your Ultimate Weather Companion built using Lightning Web Components (LWC) with Real-time Temperature Conversion in Celsius and Fahrenheit

-

 

Introduction

In a world where weather information is a crucial part of our daily lives, the integration of cutting-edge technologies becomes paramount. My latest blog delves into the realm of web development, unveiling a state-of-the-art weather website meticulously crafted using Lightning Web Components (LWC). This responsive website not only provides real-time weather updates using Open Weather API but also revolutionizes the way you interact with temperature data by offering seamless conversion between Fahrenheit and Celsius. 

But that's not all. this website also offers a comprehensive dashboard that includes essential weather metrics. From atmospheric pressure and wind speed to the 'feels like' temperature, this website ensures you are equipped with all the information you need. Dive into the details with minimum and maximum temperatures, gaining insights into the day's temperature fluctuations.

Let's dive into the insights gained during the implementation of this exciting project.


Key Concepts 

In this project, I have used CSS to design a minimal and responsive design that displays all the essential weather metrics like - Current Temperature, current weather conditions, Minimum Temperature, Maximum Temperature, Feels like, Humidity, Wind, and Pressure.


Weather Header section:

The header section has a form that consists of the search input along with two spans for °C, and °F.





This section also includes a message that pops up when we hit search. If the city entered isn't valid then a message is displayed.



The main challenge in this section was to implement the pop message and temp conversion functionality upon click of C and F.

To display this component we are using conditional rendering, while making the API call to Open Weather API we see the response code and then display a success or error message accordingly.

HTML Code:



JS Code:




For temperature conversion from Fahrenheit to Celsius and vice versa, I have implemented an On-click method that calls onclickhandler which further calls our fetchData() method that makes the API call.


HTML Code:



JS Code:

Weather Body section:

The body section contains the City name, Country Name, weather condition, weather icon, temperature,  minimum, and maximum temperature. By default, the weather info shows weather details of New Delhi.

The main learning point for me in this section was dynamically constructing the URL to show the weather image on the page. For this, I used a property weatherIcon in which I am dynamically constructing the URL using the icon property which I received in the response while making the API call. 



HTML Code:



JS Code:


Weather Info section:

In the info section, I am displaying the other key weather metrics like - Feels, humidity, and wind pressure along with the icons.

The main challenge for me was to import the font awesome icons and display them on the UI. I tried to download the zipped file from the Font Awesome website, upload two CSS files as a static resource, and further import those files into my lightning web component but, it didn't work. I explored more but didn't find a solution then I decided to post my question in the community - Link to the Question


Further, I decided to download only the icons that I needed for this project, upload them as a static resource, and then use them in my lightning web component. Please find the sample code for one component below:

HTML Code:



JS Code:



API Integration - Open Weather API

In this project, we are integrating with the Open Weather API to fetch the real-time weather metrics and handle the response to display on our page.

I have added a remote site setting for the weather API and created a trusted URL so that we don't see any issues while making the API call.

In this project, we are making server-side API calls to Open Weather API endpoints. For this purpose, we have developed an Apex controller class which has a method that takes the city and unit as a parameter to make the API call and further returns the response received. I have included another method that fetches the API key value stores in a custom label. 

In this integration, I also learned how to use apex methods in our LWC and pass parameters from the LWC to the Apex method.

Apex Class:



JS Code:




The main reason for not using client-side API calling was to make our secret key secure and not expose it to the people who are visiting this page.


Exposing the component using Experience Sites

I have created a website in Salesforce and added a page to it in which I have exposed this component to enable external users to interact with my application without having to log in to Salesforce.

After exposing the website when I tried to fetch the weather I was not able to fetch the details after debugging I noticed that I had missed a major step where I needed to give access to the  Apex Class to the custom profile that is created for my website.

Follow the steps below to give access to any apex class for the custom profile:
  1. Go to builder -> Click on Gear Icon
  2. In the General tab, you'll find the link for the custom profile created for your website.
  3. Open it and Click on Enabled Apex class.
  4. Search and add your apex class.
See this short demo on how to give access.








Weather Info Website - https://neeraj-portfolio-dev-ed.develop.my.site.com/weather-info


Demo 👇





Thank you for giving this a read, Please do share your feedback on the website and let me know if I can add any more functionality to this website.



Comments

Post a Comment

Popular posts from this blog

Display Maps in LWC

-
Image
  In this blog, we will look at how to display Google Maps in your Lightning Web Components. Salesforce provides a lightning-map component to display a map of one or more locations, using geocoding data and mapping imagery from Google Maps.  Now, let's look at how to use this component in your Lightning Web component. HTML : Pass the location(s) that you want to display in the map-marker property. A marker contains: Location Information:   A coordinate pair of latitude and longitude, or an address composed of address elements to be geocoded. Descriptive Information:  Optional title, description, and an icon. These items are relevant to the marker but not specifically related to location. Map markers have a few more properties that can be used to customize the map display, please refer to this documentation on Maps. Display a Single Marker Let's understand how we can pass single location info in the map-marker and display it on the map. In this example, we will creat...
Read more

Calling Apex method from LWC

-
Image
  In this blog post, we will take a look at the steps to call an Apex method from our Lightning Web Component with source code and demonstration videos. There are the following ways to call an Apex method into LWC: 1. Calling an Apex method using  wire services . 2. Calling an Apex method imperatively . 3. Calling and Apex method with async and await . Now let's take a look at the steps involved in the above-mentioned ways. Calling Apex method using Wire services The wire service in LWC helps in the retrieval of data or performing any action without the need for Apex code. You can use the wire service, to wire a property or a function that will receive data when the source is updated. 1. Expose the Apex method which you want to call from LWC The Apex method should be: a. Global or Public . b. decorated with @AuraEnabled , if the method has ( cacheable=true ) after this annotation, the results are cached at the client site to improve performance. 2. Import the Apex method whic...
Read more

Navigation Service in LWC (Lightning Web Components)

-
Image
Introduction Navigation Service in LWC simplifies navigating between the pages within the applications. Utilizing the navigation service in LWC you can create a smooth and seamless navigation experience for users within your Salesforce application. In this blog post, we will deep dive into the steps on how to use the Navigation Service. What is a Navigation Service? Navigation Service is a built-in module in LWC that enables developers to navigate different pages and components within the Salesforce ecosystem. This service provides you with a set of methods that helps you navigate different web pages, record pages, or other Lightning Components.  Using the Navigation Service 1. Import the Navigation Service from the lightning/navigation module. 2. Apply the NavigationMixin function to the base class. 3. Create a JS PageReference object that defines the page. 4. Call the navigation service's [NavigationMixin.Navigate](pageReference) to dispatch the navigation request. 5. In ...
Read more