如何使用Lightning App Builder建立一个基本的Salesforce移动应用程序

后端之巅
484 阅读12分钟

我如何使用Lightning App Builder构建一个基本的Salesforce移动应用程序

在短短几分钟内建立一个新的应用程序？看看这个使用Salesforce Lightning App Builder创建的移动应用程序吧。

2018年秋天，我决定替换我岳母用于房地产业务的一个应用程序。我决定用一个在AWS内部运行的Angular客户端和Spring Boot服务来取代该应用。我学到的最大的教训是，我觉得我花了更多的时间去了解AWS，而没有花时间对她的应用程序进行改进。

当2020年春天到来时，这一切都改变了......

当整个世界都在试图找出如何在全球大流行中航行时，我却在潜心研究Heroku PaaS......并爱上了它。在很短的时间内，我就能把这个相同的应用程序转移到Heroku上。虽然我知道Heroku在幕后使用AWS，但它对我的时间没有影响。我可以继续专注于我真正喜欢的事情：为自定义应用程序增加价值，并使用基于git的基本操作部署新版本。

虽然我知道Heroku不是每一种情况下的理想选择，但今天运行的大部分应用程序都可以利用Heroku提供的优势，并使支持这些应用程序的功能团队专注于增加新的功能。

随着我开始在移动应用程序领域做更多的工作，我想知道是否有一个类似于Heroku的移动应用程序开发选项，用于构建Salesforce应用程序。我决定先看看Salesforce工程团队提供了什么。

关于Lightning App Builder

Salesforce Lightning App Builder是一个点对点的工具，用于创建可在移动设备上使用的单页应用程序。就像Heroku从应用托管的角度所提供的一样，Lightning App Builder产品处理了大部分的应用基础。这使开发人员能够将时间集中在满足业务需求和目标上。

Lightning App Builder支持分为三类的单页应用程序。

  1. 应用程序--用于自定义应用程序

  2. 首页--登录后的登陆页面

  3. 记录--用于集中查看数据的页面布局

在这篇文章中，我将专注于应用程序选项，并创建一个全新的应用程序。

一个 "站起来 "的用例

在我创建应用程序的三十年中，我一直是一个超过我公平份额的功能团队的成员。在那段时间里，我发现，听到有创造力的开发者对团队经理的问题 "完成了吗？"做出机智的回答，我感到很高兴。

虽然敏捷团队通常不会像传统的项目经理那样问这个问题，但对于大多数功能开发员来说，沟通你目前的状态仍然是日常工作的一部分。为了帮助开发人员保持新鲜感，我们将使用Lightning App Builder创建 "Stand Up "应用程序。

考虑一下这些高层次的要求：

  1. 创建一个自定义对象（称为Stand Up）来容纳以下信息：

    1. 名称（现有属性）将是响应

    2. 类型包括以下值，为响应指定一个类型：

      1. 积极的

      2. 中性

      3. 否定

  2. 创建一个Stand Up组件并显示四个按钮：

    1. 正面

    2. 中性

    3. 负面的

    4. 全部

  3. 该应用程序的基本流程：

    1. 启动应用程序将呈现四个按钮（如上所述）。

    2. 当用户选择一个按钮时，选择一个与自定义对象的类型属性匹配的随机响应。全部按钮将在所有三种类型中选择一个随机响应。

    3. 在屏幕上显示响应，供开发人员在每天的站立会议上转达。

  4. 该应用程序将在Salesforce移动客户端内运行。

行动中的Lightning App Builder

随着Visual Studio（VS）代码的运行和Salesforce扩展包的安装，开始使用Stand Up应用程序就像使用Cmd+Shift+P（在我的MacBook Pro上）或Ctrl+Shift+P（Windows机器）并输入以下命令一样简单。

SFDX: Create Project

为了使事情变得快速和简单，我选择了标准选项。

我把我的项目称为StandUpLightningWebComponent。

我把这个项目放在一个叫Stand-up-web-component的文件夹中，并在VS Code中打开了一个新的工作区。

接下来，我们需要连接到一个Salesforce org，我将使用我现有的一个沙盒。如果你需要创建一个新的，那么请查看以下网址。

developer.salesforce.com/signup

一旦你有了一个要使用的开发者组织，你就可以使用下面的Cmd+Shift+P/Ctrl+Shift+P命令将VS Code连接到该组织。

SFDX: Authorize an Org

VS code会提示你选择登录的URL。我选择了项目默认选项。

当被问及登录别名时，我简单地按了回车键。

一个浏览器窗口出现了，我登录了我的沙盒组织。出现了以下对话框。

VS Code现在已经连接到我的沙盒，我们准备开始使用Stand Up组件。

创建 "站起来 "自定义对象

使用上面一节中打开的浏览器页面，我使用Salesforce设置视角来创建一个新的自定义对象。如果你碰巧关闭了那个浏览器窗口，使用下面的VS代码Cmd+Shift+P/Ctrl+Shift+P命令，在浏览器窗口中打开默认的org。

SFDX: Open Default Org

在设置中，我简单地浏览了Objects and Fields | Object Manager。接下来，我使用了创建|自定义对象选项。

我创建了一个新的自定义对象，标签是Stand Up，并保留了默认的对象名称Stand_Up。但是，我将默认的记录名称替换为Witty Response。

我对其他的东西都保留了默认值，我点击了保存按钮来建立新的对象。

为了创建类型属性，我浏览了字段和关系选项并点击了新建按钮。对于这个字段，我选择了Picklist选项，并点击了 "下一步"按钮，这导致了以下屏幕。

该选单将被限制在上述的三个选择中。我点击了两次 "下一步"按钮（接受这些值和默认的字段安全性），然后点击了 "保存"按钮，添加了新字段。站起来的对象已经可以使用了。

接下来，我使用Salesforce中的集成|数据导入向导流程，将以下记录从sample-data.csv 文件导入到Stand Up自定义对象中。

All is good in the hood!,Positive
I am free and need something to work on.,Positive
Should be finished today.,Positive
Been battling a migraine - no update.,Neutral
It works but it hasn't been tested,Neutral
QA is testing things right now - fingers crossed.,Neutral
Still making progress - but not finished.,Neutral
Waiting for my merge-request to be approved.,Neutral
I am honestly thinking about a career change.,Negative
It is as done as it is gonna be - is that good enough?,Negative
My dog ate my code and I am starting over.,Negative

如果你不熟悉这个过程，你可以在这里阅读关于如何使用导入向导。

数据导入向导

导入完成后，我在VS Code的Scripts | soql部分内创建了一个名为Stand_Up__c.soql 的文件，其中包含以下内容。

// Use .soql files to store SOQL queries.
// You can execute queries in VS Code by selecting the
//     query text and running the command:
//     SFDX: Execute SOQL Query with Currently Selected Text

SELECT Id, Name, Type__c FROM Stand_Up__c ORDER BY Name ASC

接下来，我突出了SELECT语句，并使用Cmd+Shift+P/Ctrl+Shift+P命令选择了以下选项。

SFDX: Execute SOQL Query with Currently Selected Text

这个动作在我的终端标签中产生了以下结果。

Starting SFDX: Execute SOQL Query...

12:29:51.99 sfdx force:data:soql:query --query SELECT Id, Name, Type__c FROM Stand_Up__c ORDER BY Name ASC


Querying Data... done


ID                  NAME                                                    TYPE__C
──────────────────  ──────────────────────────────────────────────────────  ────────
a092L00000E6eX4QAJ  Been battling a migraine - no update.                   Neutral
a092L00000E6eX2QAJ  I am free and need something to work on.                Positive
a092L00000E6eX9QAJ  I am honestly thinking about a career change.           Negative
a092L00000E6eXAQAZ  It is as done as it is gonna be - is that good enough?  Negative
a092L00000E6eX5QAJ  It works but it hasn't been tested                      Neutral
a092L00000E6eXBQAZ  My dog ate my code and I am starting over.              Negative
a092L00000E6eX6QAJ  QA is testing things right now - fingers crossed.       Neutral
a092L00000E6eX3QAJ  Should be finished today.                               Positive
a092L00000E6eX7QAJ  Still making progress - but not finished.               Neutral
a092L00000E6eX8QAJ  Waiting for my merge-request to be approved.            Neutral


Total number of records retrieved: 10.


12:29:52.681 sfdx force:data:soql:query --query SELECT Id, Name, Type__c FROM Stand_Up__c ORDER BY Name ASC
 ended with exit code 0

最后，我想把自定义对象的所有元数据拉到VS Code中。这样，自定义对象就可以包含在基于git的仓库中，消除了组件用户手动创建对象的需要。

要把Stand Up自定义对象导入VS Code，在终端窗口使用以下命令。

sfdx force:source:retrieve -m CustomObject:Stand_Up__c

以下输出出现在VS Code中。

PowerShell

╭─jv@me ~/projects/jvc/stand-up-web-component/StandUpLightningWebComponent 
╰─$ sfdx force:source:retrieve -m CustomObject:Stand_Up__c                                                               
Preparing retrieve request... done
=== Retrieved Source
FULL NAME            TYPE          PROJECT PATH
────────────────── ──────────── ────────────────────────────────────────────────────────────────────────
Stand_Up__c.Type__c  CustomField   force-app/main/default/objects/Stand_Up__c/fields/Type__c.field-meta.xml
Stand_Up__c          CustomObject  force-app/main/default/objects/Stand_Up__c/Stand_Up__c.object-meta.xml

在VS Code中也可以实现同样的结果，点击工具栏中的云图标，找到你想检索的项目，然后推送下载图标。

在VS代码的左侧，现在可以看到Stand Up自定义对象。

在对象和数据准备好后，我们可以建立Lightning Web组件，该组件将与应用程序一起使用。

创建Stand Up控制器

我们将首先创建Stand Up控制器，它将作为一个API来定位适当的响应。

我们可以使用以下Cmd+Shift+P/Ctrl+Shift+P命令来创建StandUpController类。

SFDX: Create Apex Class

我填充了简单的控制器，如下所述。

Java

public with sharing class StandUpController {
    @AuraEnabled(cacheable=false)
    public static Stand_Up__c getRandomResponse(String responseType) {
        List<Stand_Up__c> responseList;

        if (responseType.equals('all')) {
            responseList = [SELECT Name, Type__c FROM Stand_Up__c];
        } else {
            responseList = [SELECT Name, Type__c FROM Stand_Up__c WHERE Type__c = :responseType];
        }

        return getRandomFromList(responseList);
    }

    private static Stand_Up__c getRandomFromList(List<Stand_Up__c> responseList) {
        if (responseList == null || responseList.isEmpty()) {
            Stand_Up__c standUpResponse = new Stand_Up__c();
            standUpResponse.Name = 'Ummmm.......';
            standUpResponse.Type__c = 'Neutral';

            return standUpResponse;
        }

        Integer count = responseList.size();
        Integer rand = Math.floor(Math.random() * count).intValue();

        return responseList[rand];
    }
}

客户端将调用StandUpController.getRandomResponse() 方法，传入适当的responseType 选项，该方法将返回一个Stand_Up__c 记录。如果没有符合请求的记录，那么将返回一个新的Stand_Up__c 对象，其中立状态为 "Ummmm......."

创建Stand Up Lightning Web组件

我们现在准备为Stand Up应用程序创建Lightning Web组件。

我们可以使用以下Cmd+Shift+P/Ctrl+Shift+P命令来创建StandUp Lightning Web组件。

SFDX: Create Lightning Web Component

我们需要做的第一件事是更新standUp.js-meta.xml ，使这个组件可以使用。

XML

<?xml version="1.0" encoding="UTF-8"?>
<LightningComponentBundle xmlns="http://soap.sforce.com/2006/04/metadata" fqn="standUp">
    <apiVersion>53.0</apiVersion>
    <isExposed>true</isExposed>
    <targets>
        <target>lightning__AppPage</target>
        <target>lightning__RecordPage</target>
        <target>lightning__HomePage</target>
    </targets>
</LightningComponentBundle>

接下来，需要更新standUp.js ，以便处理应用程序的请求，与我们在上一节创建的控制器进行交互。

Java

import { LightningElement } from 'lwc';
import getRandomResponse from '@salesforce/apex/StandUpController.getRandomResponse';

export default class StandUp extends LightningElement {
    standUpResponse = null;
    error = null;

    getPositiveResponse() {
        this.getRandomResponseFromSalesforce('Positive');
    }

    getNeutralResponse() {
        this.getRandomResponseFromSalesforce('Neutral');
    }

    getNegativeResponse() {
        this.getRandomResponseFromSalesforce('Negative');
    }

    getAnyResponse() {
        this.getRandomResponseFromSalesforce('all');
    }

    getRandomResponseFromSalesforce(responseType) {
        this.standUpResponse = null;
        this.error = null;
        getRandomResponse({responseType})
        .then((standUp) => {
            this.standUpResponse = standUp.Name;
        })
        .catch((error) => {
            this.error = JSON.stringify(error);
        });
    }
}

最后，我们需要更新standUp.html 文件，以包括视图层的逻辑。

HTML

<template>
    <div class="slds-var-m-vertical_large slds-var-p-vertical_medium 
    slds-text-align_center slds-border_top slds-border_bottom slds-text-heading_small">
        <p>Select the type of update you wish to find: </p>
    </div>

    <div class="slds-text-align_center slds-var-p-top_xx-small">
        <lightning-button variant="brand" class="slds-var-m-left_x-small"
            icon-name="utility:cases" label="Positive" title="Positive"
            onclick={getPositiveResponse}>
        </lightning-button>
    </div>
    <div class="slds-text-align_center slds-var-p-top_xx-small">
        <lightning-button variant="brand" class="slds-var-m-left_x-small"
            icon-name="utility:cases" label="Neutral" title="Neutral"
            onclick={getNeutralResponse}>
        </lightning-button>
    </div>
    <div class="slds-text-align_center slds-var-p-top_xx-small">
        <lightning-button variant="brand" class="slds-var-m-left_x-small"
            icon-name="utility:cases" label="Negative" title="Negative"
            onclick={getNegativeResponse}>
        </lightning-button>
    </div>
    <div class="slds-text-align_center slds-var-p-top_xx-small">
        <lightning-button variant="brand" class="slds-var-m-left_x-small"
            icon-name="utility:cases" label="Any" title="Any"
            onclick={getAnyResponse}>
        </lightning-button>
    </div>

    <div if:true={standUpResponse} class="slds-var-m-vertical_large slds-var-p-vertical_medium 
    slds-text-align_center slds-border_top slds-border_bottom slds-text-heading_small">
        <p>Today's Update: {standUpResponse}</p>
    </div>

    <div if:true={error} class="slds-var-m-vertical_large slds-var-p-vertical_medium 
    slds-text-align_center slds-border_top slds-border_bottom slds-text-color_error">
        <p>Error: {error}</p>
    </div>
</template>

现在，我们已经准备好将Stand Up应用程序部署到Salesforce。

部署到Salesforce

将我的所有代码从本地机器推送到Salesforce很简单。我所需要做的就是在导航器中右击force-app/main/default，然后选择SFDX：将源码部署到机关选项。

一旦完成，VS Code中会出现以下对话框。

现在我们已经准备好将Lightning Web组件添加到Salesforce的一个新应用中。

在Salesforce中创建一个新的Lightning应用程序

我切换到浏览器标签，登录到我的Salesforce组织，并打开设置视角。接下来，我浏览了Apps | App Manager页面并点击了New Lightning App按钮。

我决定把新的应用程序称为Stand Up，甚至还找到了一个漂亮的小图标来使用。我使用了向导中其余的默认设置，除了最后一个屏幕，在那里我授予所有用户对这个应用的访问权。

然后，我导航到用户界面|闪电应用程序生成器屏幕。在这里，我创建了一个新的Lightning App Page，名为Stand Up，它被设计成一个只有一个区域的App Page。

在屏幕的左侧，我可以看到自定义部分下的standUp LWC。我所要做的就是把这个组件拖过来，并把它放到基于Lightning的页面的单一区域中。

保存该组件后，我使用激活程序将Lightning页面展示给客户使用。

在激活阶段，我将应用名称设置为Stand Up，并在列表中找到最佳图标。

为了设置闪电体验，我把Stand Up应用放到了屏幕的右侧。

对于移动导航，我添加了Stand UpLighting应用程序，并确保它在列表的顶部附近。

点击保存按钮后，Stand Up应用程序就可以使用了。

使用 "站起来 "应用程序

启动Salesforce移动应用程序后，我就能看到我刚刚创建的Stand Up应用程序。

接下来，我点击了Stand Up应用程序，它显示了以下屏幕，其中有我的自定义LWC。

点击任意按钮将从Stand_Up__c 记录集中返回一个随机响应。

该应用程序也可以在Salesforce中使用，无需对代码做任何更新。

结论

从2021年开始，我一直在努力践行以下的使命宣言，我觉得这可以适用于任何IT专业人士。

"把你的时间集中在提供特性/功能上，以扩大你的知识产权的价值。充分利用框架、产品和服务来处理其他事情。

- J. Vester

正如我在评估Heroku平台时发现的那样，我能够通过利用Salesforce平台迅速推出Salesforce移动应用。在这样做的时候，我仍然专注于满足应用程序的需求，而不是担心基础和设计决策。

真的，这种模式坚持了我的使命感......而完成这个例子所需的时间是以分钟计算的，而不是以小时甚至是以天计算。

如果你对本文的源代码感兴趣，只需导航到GitLab上的以下资源库。

gitlab.com/johnjvester…

祝你有一个非常棒的一天!

avatar
文章
阅读
粉丝