如何在Salesforce上搭建一个全球疫情排行榜?

标签: Salesforce  SFDC  Salesforce开发

今天我们来尝试在Salesforce上搭建一个‘全球疫情全球疫情趋势列表(排行榜)’,方便一些企业特别是外企能够在Salesforce内实时查看全球疫情趋势。

效果

废话不多说,先来看看效果。主页君将其发布在Salesforce Community 上,大家可以看看

https://trailhead-cn-developer-edition.na112.force.com/s/covid-19-list-01

也可以直接放在Salesforce主页(Home Page)上,有了这个,一些跨国企业可以在Salesforce主页上展示给员工该列表,这样员工每一次登入Salesforce就可以直接查看不同国家的新增确诊案例。

然后我们具体来看看怎么做。

首先,我们的思路是,在Salesforce后台通过实时API拿到全球疫情数据,然后,通过LWC前端展现出来,并且利用官方的一些模块化组建如lightning-datatable,将数据展现给用户。

其次我们需要解决数据源的问题,如何拿到全球确诊准确实时的数据是非常关键。我们可以调用Postman的一个API,直接Get就可以了,API End Point为https://api.covid19api.com/summary

之后我们需要分析接口,拿到的数据是分到‘国家’,并且显示了‘新增确诊’,‘累积确诊’等数据,如美国的情况,我们可以将其直接转换到lightning-datatable的格式。

    {
      "Country": "United States of America",
      "CountryCode": "US",
      "Slug": "united-states",
      "NewConfirmed": 32129,
      "TotalConfirmed": 275582,
      "NewDeaths": 1161,
      "TotalDeaths": 7087,
      "NewRecovered": 0,
      "TotalRecovered": 0,
      "Date": "2020-04-05T06:37:00Z"
    }

关于API的其他参考资料,大家可以参考Postman的文档:
https://documenter.getpostman.com/view/10808728/SzS8rjbc?version=latest

然后我们可以在Apex Class,通过HttpRequest 调用其API。

public without sharing class Covid19TrackerController {
   
   @AuraEnabled(continuation=true cacheable = true)
    public static  Map<String, Object> getCov19Data(){
        Map<String, Object> results  = new Map<String, Object> ();
        Http http = new Http();
        HttpRequest request = new HttpRequest();
        request.setEndpoint('https://api.covid19api.com/summary');
        request.setMethod('GET');
        HttpResponse response = http.send(request);
        // If the request is successful, parse the JSON response.
        if (response.getStatusCode() == 200) {
            // Deserialize the JSON string into collections of primitive data types.
            results = (Map<String, Object>) JSON.deserializeUntyped(response.getBody());
        }
        
        return results;
    }
    
}

关于Call out的文章,大家可以参考:https://trailhead.salesforce.com/en/content/learn/modules/apex_integration_services/apex_integration_rest_callouts

需要注意的是,这里需要把这个API放入Remote Site Setting 里面

然后新建一个LWC 的component,名字为 :covid19TrackerCompt

在covid19TrackerCompt.html利用lightning-datatable把数据展示出来

<template>
    <template if:true={showSpinner}>
        <lightning-layout class="slds-m-top_medium slds-m-bottom_small">
            <lightning-spinner alternative-text="Loading"></lightning-spinner>
        </lightning-layout>
    </template>
    <lightning-card title="新型冠状病毒全球排行榜" icon-name="standard:announcement">
        <lightning-datatable
        key-field="id"
        data={data} show-row-number-column
        columns={columns}
        sorted-by={sortBy}
        sorted-direction={sortDirection}
        onsort={handleSortdata}
        hide-checkbox-column=true>
    </lightning-datatable>
    </lightning-card>
    <img src={FooterLogoUrl} style="display: block; margin: 0 auto;" >
</template>

关于lightning-datatable的官方帮助文档,大家可以参考
https://developer.salesforce.com/docs/component-library/bundle/lightning-datatable/example

接下来,在 covid19TrackerCompt.js上,拿Covid19TrackerController里面的全球个案数据。注意,由于这里我们使用官方的lightning-datatable,所以是没有排序功能的,所以要自己写,可以参见 sortData(fieldname, direction),每一次点击‘新增确诊’,然后调用handleSortdata(event),从而实现datatable的排序功能。

同时,我们给每一个国家加上一个状态,如果这个国家没有死亡病例,那么就是绿色,有死亡病例就是红色,可以通过TotalDeaths 来判断。

import { LightningElement, track, api, wire } from 'lwc';
import getCovidData from '@salesforce/apexContinuation/Covid19TrackerController.getCov19Data';
import WechatPublicLogo_1 from '@salesforce/resourceUrl/WechatPublicLogo_1';

// Summary Table columns
const columns = [
    {
        label: '国家',
        fieldName: 'Country',
        type: 'text',
        sortable: "true",
        cellAttributes: { class: { fieldName: 'covidStatus' } }
    }, {
        label: '新增确诊',
        fieldName: 'NewConfirmed',
        type: 'number',
        sortable: "true",
        cellAttributes: { class: { fieldName: 'covidStatus' } }
    }, {
        label: '累积确诊',
        fieldName: 'TotalConfirmed',
        type: 'number',
        sortable: "true",
        cellAttributes: { class: { fieldName: 'covidStatus' } }
    }, {
        label: '新增死亡',
        fieldName: 'NewDeaths',
        type: 'number',
        sortable: "true",
        cellAttributes: { class: { fieldName: 'covidStatus' } }
    }, {
        label: '累积死亡',
        fieldName: 'TotalDeaths',
        type: 'number',
        sortable: "true",
        cellAttributes: { class: { fieldName: 'covidStatus' } }
    }, {
        label: '新增治愈',
        fieldName: 'NewRecovered',
        type: 'number',
        sortable: "true",
        cellAttributes: { class: { fieldName: 'covidStatus' } }
    }, {
        label: '累积治愈',
        fieldName: 'TotalRecovered',
        type: 'number',
        sortable: "true",
        cellAttributes: { class: { fieldName: 'covidStatus' } }
    }
];

export default class Covid19TrackerCompt extends LightningElement {
    // Expose the static resource URL for use in the template
    FooterLogoUrl = WechatPublicLogo_1;

    @track data = [];
    @track showSpinner = true;
    @track Initialized = false;
    @track columns = columns;
    @track sortDirection;
    @track sortBy;

    //connectedCallback() { }
    renderedCallback() {
        console.log('enter renderedCallback');

        getCovidData().then(data => {
            if (this.Initialized) {
                return;
            }
            this.Initialized = true;

            console.log('***getCovidData1.0 **');
            console.log(data.Global);
            this.data = [];
            for (let i = 0; i < data.Countries.length; i++) {
                let covidStatusVal = 'slds-text-color_success';
                if (data.Countries[i].TotalDeaths > 0) {
                    covidStatusVal = 'slds-text-color_error'; //error color code to display if total deaths > 0
                }

                var row = {
                    id: data.Countries[i].Country,
                    Country: data.Countries[i].Country,
                    NewConfirmed: data.Countries[i].NewConfirmed,
                    TotalConfirmed: data.Countries[i].TotalConfirmed,
                    NewDeaths: data.Countries[i].NewDeaths,
                    TotalDeaths: data.Countries[i].TotalDeaths,
                    NewRecovered: data.Countries[i].NewRecovered,
                    TotalRecovered: data.Countries[i].TotalRecovered,
                    covidStatus: covidStatusVal
                }
                //console.log(row);
                this.data.push(row);
            }
            console.log('Done');
            this.showSpinner = false;
            this.sortData('NewConfirmed', 'desc');

        }).catch(error => {
            console.log(' ** error ** ');
            console.log(error);
        });
    }


    //sorting methods
    handleSortdata(event) {
        this.showSpinner = true;
        // field name
        this.sortBy = event.detail.fieldName;
        // sort direction
        this.sortDirection = event.detail.sortDirection;
        console.log('fieldName : '+event.detail.fieldName + ' sortDirection : ' + event.detail.sortDirection);
        // calling sortdata function to sort the data based on direction and selected field
        this.sortData(event.detail.fieldName, event.detail.sortDirection);
    }

    sortData(fieldname, direction) {
        // serialize the data before calling sort function
        let parseData =  JSON.parse(JSON.stringify(this.data));
        // Return the value stored in the field
        let keyValue = (a) => {
            return a[fieldname];
        };
        // cheking reverse direction 
        let isReverse = direction === 'asc' ? 1 : -1;
        // sorting data 
        parseData.sort((x, y) => {
            x = keyValue(x) ? keyValue(x) : ''; // handling null values
            y = keyValue(y) ? keyValue(y) : '';

            // sorting values based on direction
            return isReverse * ((x > y) - (y > x));
        });
        // set the sorted data to data table data
        this.data = parseData;
        this.showSpinner = false;
    }
}

最后,covid19TrackerCompt.js-meta.xml写为:

<?xml version="1.0" encoding="UTF-8"?>
<LightningComponentBundle xmlns="urn:metadata.tooling.soap.sforce.com" fqn="covid19TrackerCompt">
    <apiVersion>48.0</apiVersion>
    <isExposed>true</isExposed>
    <targets>
        <target>lightning__AppPage</target>
        <target>lightning__RecordPage</target>
        <target>lightning__HomePage</target>
        <target>lightningCommunity__Page</target>
        <target>lightningCommunity__Default</target>
    </targets>
</LightningComponentBundle>

怎么样,要不你也试试?

欢迎关注'Salesforce考试'公众号

版权声明:本文为weixin_44035410原创文章,遵循 CC 4.0 BY-SA 版权协议,转载请附上原文出处链接和本声明。
本文链接:https://blog.csdn.net/weixin_44035410/article/details/105448315

智能推荐

JetBrains 系列开发工具,如何配置 `SCSS` `File Watcher` ,相关输出配置参数详解:webStorm phpStorm IDEA

JetBrains 系列开发工具,如何配置 SCSS File Watcher ,相关输出配置参数详解:webStorm phpStorm IDEA 前言 你目前已经了解了如何使用 SCSS 进行开发,了解了该文章的内容:『 SCSS 日常用法 』 在 JetBrains 系列开发工具中通过 FileWatcher 进行编译的 SCSS 文件都是通过 sass 这个程序进行的。『 如何添加 Fil...

C语言小函数—二进制与十六进制

测试如下 “` int main() { long int num = 15; } “`...

仿微博或微信的文章多图显示(自定义MultiImageView)

按照一般的规矩,先上张图来供大伙看看 如果大致是大伙们需要实现的功能,不烦一观 自定义MultiImageView 工具类 具体使用 app.gradle中添加依赖 implementation 'com.github.bumptech.glide:glide:4.8.0' AndroidManifest.xml中配置联网权限 <uses-permission android:name=&q...

经典进程同步和互斥问题

经典进程同步与互斥问题 前言 一、生产者-消费者问题 1.问题描述 2.问题分析 3.代码 二、读者-写者问题 1.问题描述&&分析 2.代码 三、哲学家进餐问题 1.问题描述&&分析 2.代码 四、理发师问题 1.问题描述&&分析 2.代码 前言 在多道程序设计环境中,进程同步是一个非常重要的问题,下面讨论几个经典的进程同步问题。 一、生产者-消费...

java设计模式——ThreadLocal线程单例

1、定义一个ThreadLocal线程单例,代码如下: 2、定义一个多线程类,代码如下: 3、定义一个测试类,代码如下: 4、输出结果,如下图:...

猜你喜欢

【tensorflow】线性模型实战

线性模型:y = 1.477 * x + 0.089   1. 采样数据 采样噪声eps在均值0,方差0.01的高斯分布中,而后在均匀分布U(0,1)中,区间[-10,10]进行n=100次随机采样:   2. 计算误差 循环计算每个点的预测值与真是值之间差的平方并累加,从而获得训练集上的均芳误差损失值。   3. 计算梯度   4. 梯度更新 对权重w和偏...

常见损失函数和评价指标总结(附公式&代码)

网上看到一篇很实用的帖子关于常见损失函数和评价指标,收藏下来 本文转载于https://zhuanlan.zhihu.com/p/91511706 ------------------------------------------------------------------------------------------------------------------------------...

为什么 4G/5G 的直播延时依然很高

通信技术的发展促进了视频点播和直播业务的兴起,4G 和 5G 网络技术的进步也使得流媒体技术变得越来越重要,但是网络技术并不能解决流媒体直播的高延迟问题。 本文不会介绍网络对直播业务的影响,而是会分析直播中常见的现象 — 主播和观众之间能够感觉到的明显网络延迟。除了业务上要求的延迟直播之外,有哪些因素会导致视频直播的延迟这么高呢? live-streaming  图 1 - ...

springboot 过滤器Filter vs 拦截器Interceptor 详解

1 前言       最近接触到了过滤器和拦截器,网上查了查资料,这里记录一下,这篇文章就来仔细剖析下过滤器和拦截器的区别与联系。 2 拦截器与过滤器之间的区别 从上面对拦截器与过滤器的描述来看,它俩是非常相似的,都能对客户端发来的请求进行处理,它们的区别如下: 作用域不同 过滤器依赖于servlet容器,只能在 servlet容器,web环境下使用 拦截器依赖于sp...

IDEA环境--JavaWeb项目【分页功能实现】

参考链接:https://www.jianshu.com/p/d108d0cd9acf 1、前言 最近在写一些项目,遇到要使用分页功能的地方,就简单的学习了一下,在此总结一下具体实现的过程以及遇到的问题。 分页功能:当我们写一下web项目时会遇到一个页面要显示很多数据,一下子都显示出来效率会很低,也不美观。这就要用到分页,其作用也就是将数据分割成多个页面来进行显示。 2、项目介绍 这只是一个简单的...