Build a  Weather Dashboard on Salesforce Experience Cloud

Build a Weather Dashboard on Salesforce Experience Cloud

Learn full stack development in Salesforce Experience Cloud

Christian Pelayo
ยทJul 13, 2022ยท

3 min read

Subscribe to my newsletter and never miss my upcoming articles

Play this article

Table of contents

  • Introduction
  • Resources
  • Conclusion

Introduction

Hi everyone ๐Ÿ‘‹, I'm glad to share with you what I've created as a side project. This project intends to learn integration in Salesforce Platform by building a Weather Dashboard app that consumes web-service from OpenWeather API. This app is built on top of the Salesforce Experience Cloud (Community Page) using LWR Template.

Start blogging with Hashnode

Resources

github.com/pelayochristian/my-weather-app

Published Site

Tech Stack: ๐Ÿง‘โ€๐Ÿ”ง

  • LWC
  • Apex

demo.gif

Pre Deployment Steps:


  1. If your org is not Experience Bundle Enable, then go to setup and type in the quick box 'Digital Experience', checked the Enable Digital Experience and provide your prefer Domain Name. Step 1 screenshot

  2. On the Setup go to All Sites and Click on new to create a site Step 2 screenshot

  3. Click on Build Your Own (LWR)โ€ฆ Step 3 screenshot

  4. Click on Get Started Step 4 screenshot

  5. Provide Name and URL, select Unauthenticated then create. Step 5 screenshot


Deploy the repository

  1. Clone the my-weather-app repository:
    git clone https://github.com/pelayochristian/my-weather-app.git
    cd my-weather-app
    
  2. Authorize the project in your dev org and provide it with and alias (mydevorg in the command below):
    sfdx auth:web:login -d -a mydevorg
    
  3. Deploy the project by providing the authorize user from above (mydevorg):
    sfdx force:source:deploy -p force-app -u mydevorg
    

OpenWeather API Key

API Key of the OpenWeather is stored in custom metadata that can be modify in the screenshot below:

api_key_custom_metadata.png

Sample Apex Integration

On this method, named credentials is used to get the weather forecast from the OpenWeatherAPI.


private static final String OW_CURRENT_WEATHER_API = 'data/2.5/onecall?exclude=hourly,minutely,alerts';
private static final Integer DEFAULT_LATITUDE = 13;
private static final Integer DEFAULT_LONGITUDE = 122;
private static final String UNIT_METRIC = 'METRIC';

public static MW_OpenWeatherOneCall getWeatherForecast(Decimal longitude, Decimal latitude, String unitType) {
    MW_OpenWeatherOneCall weatherForecast = null;
    try {
        longitude = longitude == null ? DEFAULT_LONGITUDE : longitude;
        latitude = latitude == null ? DEFAULT_LATITUDE : latitude;
        unitType = unitType == null ? UNIT_METRIC : unitType;
        String endPoint = 'callout:Open_Weather_Service/' 
            + OW_CURRENT_WEATHER_API + '&lat=' + latitude + '&lon=' 
            + longitude + '&units=' + unitType + '&appId=' 
            + MW_UtilHelper.getOpenWeatherAPIKey();


        Http http = new Http();
        HttpRequest httpRequest = new HttpRequest();
        httpRequest.setEndpoint(endPoint);
        httpRequest.setMethod('GET');
        HttpResponse httpResponse = http.send(httpRequest);
        if (httpResponse.getStatusCode() == 200) {
            // Replace rain 1h attribute to oneHour
            String responseBody = httpResponse.getBody()
                .replace('1h', 'oneHour');
            weatherForecast = MW_OpenWeatherOneCall.parse(responseBody);
        }
    } catch (Exception ex) {
        System.debug(
                'Error : MW_OpenWeatherOneCallService.getWeatherForecast() with message ' +
                ex.getMessage()
        );
    }
    return weatherForecast;
}

Possible Error on Deployment

error_on_deployment.png For this error, make sure that the target org has an Experience Bundle Enable. Make sure to follow the pre-deployment steps for enabling the Experience Cloud.

Conclusion

Awesome! ! ! go check the repository this project and I hope it helps. ๐Ÿ˜‰ Thank you! Happy hacking ... ๐Ÿ’ป

Did you find this article valuable?

Support Christian Pelayo by becoming a sponsor. Any amount is appreciated!

Learn more about Hashnode Sponsors
ย 
Share this