在此步骤中，您将通过从Salesforce获取会话和演讲者数据来更新Trailhead项目“ 使用Lightning Web Components Open Source构建您的第一个应用程序”中构建的应用程序。

为此，您设置了本地 Express服务器以连接到Trailhead Playground，并提供一个为会议管理应用程序提供数据的端点。

第一步是安装两个Node.js程序包，这些程序包将用于本地开发以及将Express服务器连接到Trailhead Playground并对其进行身份验证。这两个软件包是JSForce和Dotenv。

JSForce

JSforce（以前称为Node-Salesforce）是利用Salesforce API的同构JavaScript库。它既可以在浏览器中运行，也可以在Node.js中运行，并且主要是通过异步JavaScript函数调用封装对Salesforce提供的各种API的访问。

多滕夫

环境变量可帮助您维护应用程序的可配置性，而无需修改基础代码。Dotenv从本地.env文件加载环境变量，以提供轻松的本地开发体验。

要安装软件包：

1. 打开一个终端窗口。
2. 切换到包含会议管理应用程序的目录。
3. 运行npm install jsforce@^1.0.0 dotenv。

创建.env文件

接下来，将本地环境文件添加到会议管理应用程序项目。这将存储用于将Express服务器连接到您的Salesforce实例的身份验证信息。

1. 下载您选择的文本编辑器。尽管Salesforce不提供Lightning Web Components Open Source的扩展，但是我们仍然建议您使用 Visual Studio Code。我们将以VS Code作为我们将来的说明。
2. 打开 Visual Studio代码。
3. 按文件>打开。
4. 选择您的conference-app文件夹，然后单击“打开”。
5. 按文件>新建文件。
6. 复制此文本并将其粘贴到文件中。

7. SF_LOGIN_URL=https://login.salesforce.com
   SF_USERNAME=YOUR_USERNAME
   SF_PASSWORD=YOUR_PASSWORD
   SF_TOKEN=YOUR_SECURITY_TOKEN
8. 使用您的数据更新占位符值
9. SF_USERNAME：您的Trailhead Playground用户名。
   SF_PASSWORD：您的Trailhead Playground密码。
   SF_TOKEN：您的Trailhead Playground安全令牌。
10. 按文件>保存。
11. 输入.env（以前置字符开头）作为文件名。确保文件已保存在根文件夹（conference-app）中。如果您看到一条消息，显示系统文件保留了带前导号的文件名，则可以确认。

向Salesforce进行身份验证

Salesforce支持不同类型的身份验证机制，但是为了简单起见和该项目的目的，您使用基于用户名和密码的登录名。接下来，添加用于设置Express服务器以对您的Salesforce实例进行身份验证的代码。

1. 展开src文件夹，然后展开server文件夹。
2. 打开api.js。
3. 将此代码粘贴到const app = express();：

   const jsforce = require('jsforce');
   require('dotenv').config();
   const { SF_USERNAME, SF_PASSWORD, SF_TOKEN, SF_LOGIN_URL } = process.env;
   if (!(SF_USERNAME && SF_PASSWORD && SF_TOKEN && SF_LOGIN_URL)) {
       console.error(
           'Cannot start app: missing mandatory configuration. Check your .env file.'
       );
       process.exit(-1);
   }
   const conn = new jsforce.Connection({
       loginUrl: SF_LOGIN_URL
   });
   conn.login(SF_USERNAME, SF_PASSWORD + SF_TOKEN, err => {
       if (err) {
           console.error(err);
           process.exit(-1);
       }
   });
4. 保存文件api.js。

此代码从您的.env文件中读取环境变量，并使用它们来创建到您的Salesforce实例的经过身份验证的连接。接下来，添加一些代码以从Salesforce中获取数据。

创建端点以从Salesforce读取数据

现在，您已经对Salesforce进行了身份验证，就可以开始安全地访问Salesforce资源。如前所述，您将创建一个运行逻辑以访问数据的端点。然后，客户端组件可以使用此端点。

对于此项目，您可以通过运行SOQL查询从Salesforce提取数据。SOQL代表Salesforce对象查询语言，其语法与SQL非常相似。它是特定于Salesforce的查询语言，专门用于访问Salesforce中的数据。SOQL还具有联接功能，允许您在单个查询中获取相关数据。

1. 展开文件夹src，然后展开文件夹server。
2. 打开api.js文件。
3. app.get()用以下代码替换现有功能块：

   app.get('/api/sessions', (req, res) => {
       const soql = `SELECT Id, Name, toLabel(Room__c), Description__c, format(Date_and_Time__c) formattedDateTime,
           (SELECT Speaker__r.Id, Speaker__r.Name, Speaker__r.Description, Speaker__r.Email, Speaker__r.Picture_URL__c FROM Session_Speakers__r)
           FROM Session__c ORDER BY Date_and_Time__c LIMIT 100`;
       /* Salesforce connection */
   });

   该soql属性包含SOQL语句，用于从Salesforce查询会话和发言人数据。它使用通过Session Speakers连接对象的内部查询。

4. /* Salesforce connection */用以下代码替换注释：

   conn.query(soql, (err, result) => {
       if (err) {
           res.sendStatus(500);
       } else if (result.records.length === 0) {
           res.status(404).send('Session not found.');
       } else {
           /* Work with result data */
       }
   });

   使用jsforce查询方法，您可以使用SOQL语句使用已认证的连接来运行该查询。

5. 更换评论/* Work with result data */与

   const formattedData = result.records.map(sessionRecord => {
       let speakers = [];
       if(sessionRecord.Session_Speakers__r){
           speakers = sessionRecord.Session_Speakers__r.records.map(
               record => {
                   return {
                       id: record.Speaker__r.Id,
                       name: record.Speaker__r.Name,
                       email: record.Speaker__r.Email,
                       bio: record.Speaker__r.Description,
                       pictureUrl: record.Speaker__r.Picture_URL__c
                   };
               }
           );
       }
       return {
           id: sessionRecord.Id,
           name: sessionRecord.Name,
           dateTime: sessionRecord.formattedDateTime,
           room: sessionRecord.Room__c,
           description: sessionRecord.Description__c,
           speakers
       };
   });
   res.send({ data: formattedData });

   需要将返回的数据的形状映射为Express服务器预期将其提供给会议管理应用程序的API的形状。

6. 保存api.js文件。

大！您将Express服务器设置为通过Salesforce进行身份验证，使用SOQL查询来查询数据，并使用自定义端点来提供数据。下一步是更新会议管理应用程序的“用户界面”部分以使用此新端点。

1. 展开src/client/modules/data/sessionService文件夹。
2. 打开sessionService.js。
3. URL用刚创建的服务器端点在第一行中更新变量。

4. const URL = '/api/sessions';
5. 保存sessionService.js。

构建和测试

现在，验证您的应用程序正在运行。

1. 打开终端。
2. 运行npm run watch。
   
3. 在http：// localhost：3001上打开浏览器 。该应用现在应该显示您的Trailhead游乐场中的会话列表。
4. （可选）要查看来自您创建的端点的JSON响应，请在http：// localhost：3001 / api / sessions上打开浏览器 。

恭喜，您已经成功创建了一个Express服务器，该服务器使用通过身份验证的连接的Salesforce API来使用数据。在此跟踪中查看下一个项目， 将Lightning Web Components Open Source转换为Salesforce，在其中进行一些调整，然后将该应用程序部署在Salesforce平台上。您无需了解Salesforce即可执行下一个项目中的步骤-我们将指导您完成整个项目。

现在您已经建立了数据模型，是时候输入数据了。您可以手动输入数据，也可以使用“数据导入向导”将其导入。

感谢Lightning Object Creator，用于会话的数据已被加载。使用数据导入向导将扬声器数据导入到Contact对象中。

1. 下载 此CSV文件（右键单击并选择“另存为”），其中包含扬声器列表。
2. 在您的Trailhead游乐场中，点击，然后  选择设置。
3. Data Import Wizard在“快速查找”框中输入并选择“数据导入向导”。
   
4. 查看欢迎页面上提供的信息，然后单击启动向导！
   
5. 选择要导入的数据。
   • 在您要导入哪种数据下，选择客户和联系人。
   • 在您要做什么下选择添加新记录。
   • 在您的数据位于哪里下上传您下载的CSV文件。
   • 您可以通过以下方式添加数据文件：将CSV拖动到页面的上传区域，或者单击您正在使用的CSV类别，然后导航到并选择文件。
     
6. 单击下一步。
7. 在此屏幕中，您将CSV数据字段映射到Salesforce数据字段。数据导入向导尝试将尽可能多的数据字段映射到标准Salesforce数据字段。如果Salesforce无法自动映射字段，请手动执行。在这种情况下，Salesforce无法将Bio数据字段映射到任何Salesforce字段。
8. 要手动映射该字段，请单击Bio行中的Map。
9. Description在搜索框中输入并选择联系人：描述。点击Map确认选择。
   
10. 单击下一步。
11. 通过单击“开始导入”查看并开始导入。导入完成后，您会收到状态电子邮件。

接下来，在每个会话中添加发言人。

1. 在App Launcher（）中，找到并选择Sessions。
2. 在会话列表视图中选择“所有记录”。
   
3. 单击会话名称以打开详细信息视图。
4. 单击“相关”，然后从“扬声器”磁贴中单击“新建”。
   
5. 在弹出窗口中，通过在“演讲者”字段中键入内容找到演讲者，然后从显示的建议中选择一位演讲者。（您可以在上一步中用于数据导入的CSV中找到发言人姓名。）
   
6. 点击保存。
7. 重复这些步骤，以在每个会话中添加至少一位发言人。

很好！接下来，您更新会议管理应用程序以获取您在Salesforce中创建的数据。

在Salesforce中，数据存储在一个对象中。您可以将对象视为项目列表或电子表格。在这里，可以存储和维护按字段分组的信息，例如每个客户的名字和姓氏。

有两种类型的对象：标准对象和自定义对象。标准对象是Salesforce附带的对象。常见的业务对象（例如客户，联系人，潜在客户和机会）都属于该组。 

自定义对象是您创建的用于存储特定于您的公司或行业的信息的对象。在此步骤中，您将创建两个自定义对象，并将新字段添加到标准对象。这三个对象共同构成了会议管理应用程序的数据模型。

创建会话对象

Salesforce提供了一个名为Lightning Object Creator的工具，只需单击几下即可将电子表格和CSV文件转换为应用程序。使用Lightning Object Creator，您可以将电子表格的列转换为字段，定义字段类型以及导入电子表格数据。

使用闪电对象创建器创建一个保存您的会话数据的对象。

1. 下载 此CSV文件（右键单击并选择“另存为”），其中包含会话列表。
2. 在您的Trailhead游乐场中，点击，然后  选择设置。这将在新选项卡中启动安装程序。
3. 单击对象管理器。
4. 单击创建，然后从电子表格中选择自定义对象。
   
5. Lightning Object Creator在新选项卡中打开。单击“使用Salesforce登录”。
   
6. 输入您的Trailhead Playground的用户名和密码，然后点击登录。
7. 单击允许以允许Lightning Object Creator访问您的Salesforce实例。
8. 在下一步中，您必须选择电子表格的来源。点击上传，然后选择您下载的文件。
   
9. 从“记录名称”字段的下拉列表中选择“名称” 。记录名称出现在页面布局，相关列表，查找和搜索结果中。
10. 选择“选择列表”作为“房间”的Salesforce字段类型。
    
11. 单击下一步。
12. 在对象属性屏幕中输入以下详细信息：
    • 标签： Session
    • 复数标签： Sessions
    • API名称： Session
      
13. 点击完成。
14. Salesforce将创建对象及其字段，并将所有电子表格数据导入到新创建的对象中。
    
15. 关闭选项卡。

您刚刚将数据从CSV文件转换为数据模型。接下来，更改现有标准对象上的数据模型。

向联系人对象添加新字段

联系人是Salesforce中用于存储有关人的信息的标准对象，它带有一组标准字段。对于此项目，您可以使用“联系人”对象存储会议发言人的详细信息。您需要再创建一个联系人字段，用于存储演讲者个人资料图片的URL。 

1. 在安装程序中，单击对象管理器。
2. 从显示的对象列表中，单击“联系人”。
3. 单击“字段和关系”，然后单击“新建”，这将启动一个向导，可用于向对象添加新字段。
4. 从显示的数据类型列表中选择URL，然后单击Next。
5. 如下定义字段：
   • 栏位标签： Picture URL
   • 栏位名称： Picture_URL
6. 保留所有其他内容，依次单击“下一步”，“下一步”和“保存”。

您更改了联系人数据模型，以便可以在其中存储有关会议发言人的信息。接下来，使用结点对象完成您的数据模型。

创建会话发言人连接对象

一个会话可以有一个或多个发言人，一个发言人可以有一个或多个会话。为了在数据模型中反映这种多对多关系，请创建另一个自定义对象，该对象用作标准Contact对象和自定义Session对象之间的结合。此连接对象使您可以对会话和发言人之间的多对多关系进行建模。 

1. 在安装程序中，单击“对象管理器”。
2. 单击创建，然后选择自定义对象。
3. 在“自定义对象定义”页面上，使用这些详细信息创建Session Speaker对象。（接受此处未定义的属性的默认值。）
   • 标签： Session Speaker
   • 复数标签： Session Speakers
   • 对象名称： Session_Speaker
   • 记录名称： Session Speaker Number
   • 数据类型：自动编号
   • 显示格式： SESP-{00000}
   • 起始编号：1
4. 点击保存。
5. 单击字段和关系，然后单击新建。
6. 选择主从关系，然后单击下一步。
7. 在“相关于”中，选择“会话”，然后单击“下一步”。
8. 定义字段：
   • 栏位标签： Session
   • 栏位名称： Session
9. 将其他所有内容保持不变，然后单击“下一步”，“下一步”，“下一步”。
10. 将“相关列表标签”设置为“发言人”，单击“保存并新建”。
11. 选择主从关系，然后单击下一步。
12. 在“相关于”中，选择“联系人”，然后单击“下一步”。
13. 定义字段：
    • 栏位标签： Speaker
    • 栏位名称： Speaker
14. 将其他所有内容保持不变，然后单击“下一步”，“下一步”，“下一步”。
15. 将“相关列表标签”设置为“会话”，然后单击“保存”。

很好！在下一步中，将样本数据加载到数据模型中的每个对象中。

您在上一个项目中构建的Node.js应用程序运行SOQL查询，以从Salesforce平台检索会话列表。为了在Salesforce上检索该数据，您需要将Node.js后端逻辑转换为Apex代码。Apex是一种强类型的，面向对象的编程语言，它使开发人员可以结合对API的调用在Salesforce服务器上执行流和事务控制语句。

在此步骤中，您将编写一个Apex控制器，该控制器执行SOQL查询并将其公开为可以由您的组件调用的端点。

创建一个Apex控制器

1. 1. 在VS Code中，右键单击该classes文件夹，然后单击SFDX：Create Apex Class。
   2. 输入名称SessionController。
   3. 如果VS Code询问，请选择force-app/main/default/classes作为要添加SessionController.cls到的目录。
   4. 在新打开的文件中，将默认代码替换为以下代码。

public with sharing class SessionController {
  @AuraEnabled(cacheable=true)
  public static List<Session__c> getSessions(String searchKey) {
    if (String.isBlank(searchKey)) {
      return [SELECT Id, Name, toLabel(Room__c), Description__c, format(Date_and_Time__c) dateTime,
      (SELECT Speaker__r.Id, Speaker__r.Name, Speaker__r.Description, Speaker__r.Email, Speaker__r.Picture_URL__c FROM Session_Speakers__r)
      FROM Session__c ORDER BY Date_and_Time__c LIMIT 100];
    } else {
      String key = '%' + searchKey + '%';
      return [SELECT Id, Name, toLabel(Room__c), Description__c, format(Date_and_Time__c) dateTime,
      (SELECT Speaker__r.Id, Speaker__r.Name, Speaker__r.Description, Speaker__r.Email, Speaker__r.Picture_URL__c FROM Session_Speakers__r)
      FROM Session__c WHERE Name LIKE :key ORDER BY Date_and_Time__c LIMIT 100];
    }
  }
  @AuraEnabled(cacheable=true)
  public static Session__c getSession(Id sessionId) {
    List<Session__c> sessions = [SELECT Id, Name, toLabel(Room__c), Description__c, format(Date_and_Time__c) dateTime,
      (SELECT Speaker__r.Id, Speaker__r.Name, Speaker__r.Description, Speaker__r.Email, Speaker__r.Picture_URL__c FROM Session_Speakers__r)
      FROM Session__c WHERE Id = :sessionId];
    if (sessions.size() != 1) {
      throw new AuraHandledException('Could not find session');
    }
    return sessions[0];
  }
}

该@AuraEnabled(cacheable=true)声明将方法公开为端点，以便您的组件可以调用它们。它还支持对方法返回的数据进行客户端缓存。您在此处编写的代码比其Node.js等效代码短，因为您不必担心身份验证或异步运行查询。

1. 保存SessionController.cls。

使用电线检索数据

现在我们有了端点，让我们替换模拟数据实现，并使用Wire Service用真实数据检索会话记录。此服务是Salesforce平台上的特殊实现，它使用声明性方法提供了优化的读取操作和客户端缓存。让我们看看如何构建它。

1. 1. 打开sessionList.js。
   2. 用以下代码替换前两行中的导入代码。

import { LightningElement, wire } from 'lwc';
import getSessions from '@salesforce/apex/SessionController.getSessions';

这将导入从您的Apex方法自动生成的电线适配器。 

1. 1. 在下面添加以下代码 sessions = [];

searchKey = '';
@wire(getSessions, { searchKey: '$searchKey' })
wiredSessions({ error, data }) {
  if (data) {
    this.sessions = data;
  } else if (error) {
    this.sessions = [];
    throw new Error('Failed to retrieve sessions');
  }
}

电线使用getSessions映射到我们的Apex端点的适配器。使用searchKey映射到searchKey属性的参数调用导线。请注意，参数值以带有$前缀的字符串形式传递。这意味着此参数是反应性的：每次searchKey更改时都会调用电线。

1. 1. 删除connectedCallback功能。
   2. 用handleSearchKeyInput以下代码替换该函数。

handleSearchKeyInput(event) {
  clearTimeout(this.delayTimeout);
  const searchKey = event.target.value;
  // eslint-disable-next-line @lwc/lwc/no-async-operation
  this.delayTimeout = setTimeout(() => {
      this.searchKey = searchKey;
  }, 300);
}

不再在客户端执行过滤。searchKey现在将其传递到线路，以便Apex返回已过滤的会话列表。您正在searchKey通过对更新应用300毫秒的延迟来取消更新属性。这是为了避免大量的Apex方法调用。

1. 1. 将该handleSessionClick函数替换为：

handleSessionClick(event) {
  const { sessionId } = event.currentTarget.dataset;
  const navigateEvent = new CustomEvent('navigate', {
    detail: {
      state: 'details',
      sessionId: sessionId
    }
  });
  this.dispatchEvent(navigateEvent);
}

现在，您可以使用会话记录ID而不是会话列表索引来导航到会话详细信息页面。

1. 1. 保存sessionList.js。
   2. 打开sessionList.html。
   3. 用以下代码替换文件内容。

<template>
  <div class="list">
    <input type="search" placeholder="Search sessions..."
     oninput={handleSearchKeyInput} />
    <template for:each={sessions} for:item="session">
      <a key={session.Id} class="session" data-session-id={session.Id} onclick={handleSessionClick}>
         <div>
           <p class="title">{session.Name}</p>
           <p class="icon time">{session.dateTime}</p>
           <p class="icon room">{session.Room__c}</p>
         </div>
         <template if:true={session.Session_Speakers__r}>
           <div class="speaker-pictures">
             <template for:each={session.Session_Speakers__r} for:item="speaker">
               <img key={speaker.Speaker__r.Id} src={speaker.Speaker__r.Picture_URL__c}
                  alt={speaker.Speaker__r.Name} title={speaker.Speaker__r.Name}>
              </template>
           </div>
       </template>
     </a>
    </template>
  </div>
</template>

模板结构基本保持不变，但是现在您使用Salesforce记录字段名称。就像您之前在Node.js后端中所做的那样，这省去了用JavaScript映射字段名称的工作。在真实的项目中，您将直接在组件模板中使用Salesforce字段名称。

1. 1. 保存 sessionList.html.
   2. 打开 sessionDetails.js.
   3. 将文件内容替换为：

import { LightningElement, api, wire } from 'lwc';
import getSession from '@salesforce/apex/SessionController.getSession';
export default class SessionDetails extends LightningElement {
  @api sessionId;
  session;
  @wire(getSession, { sessionId: '$sessionId' })
  wiredSession({ error, data }) {
    if (data) {
      this.session = data;
    } else if (error) {
      this.session = undefined;
      throw new Error('Failed to retrieve session');
    }
  }
  handleSessionsClick() {
    const navigateEvent = new CustomEvent('navigate', {
      detail: {
        state: 'list'
      }
    });
    this.dispatchEvent(navigateEvent);
  }  
}

就像for一样sessionList，您将getSessionApex方法连接到session属性。您将sessionId公共属性作为反应性参数传递给getSession。

1. 1. 保存sessionDetails.js。
   2. 打开sessionDetails.html。
   3. 将文件内容替换为：

<template>
  <template if:true={session}>
    <h2><a href="#" onclick={handleSessionsClick}>Sessions</a> > {session.Name}</h2>
    <p class="icon time">{session.dateTime}</p>
    <p class="icon room">{session.Room__c}</p>
    <h3>Abstract</h3>
    <div class="abstract">{session.Description__c}</div>
    <h3>Speakers</h3>
    <div class="speaker-list">
      <template if:true={session.Session_Speakers__r}>
        <template for:each={session.Session_Speakers__r} for:item="speaker">
          <c-speaker-card key={speaker.Speaker__r.id} speaker={speaker.Speaker__r}>
          </c-speaker-card>
        </template>
      </template>
    </div>
  </template>
</template>

1. 1. 保存sessionDetails.html。
   2. 打开speakerCard.html。
   3. 用以下代码替换文件内容。

<template>
  <div class="card">
    <div class="header">
      <img src={speaker.Picture_URL__c} alt="Speaker picture">
      <div>
        <p class="title">{speaker.Name}</p>
        <p class="icon email">{speaker.Email}</p>
      </div>
    </div>
    {speaker.Description}
  </div>
</template>

1. 保存speakerCard.html。
2. 通过右键单击force-app文件夹并单击SFDX：将源部署到组织来重新部署组件。

项目总结

恭喜你！您已成功转换了Lightning Web Component开源应用程序并将其部署在Salesforce平台上。

您刚刚了解了Salesforce平台提供的强大声明功能，从而减少了构建应用程序所需实现的代码量。查看其他许多Lightning Web Component项目和模块，以了解有关使您更快地构建现代应用程序的技术的更多信息。

在此步骤中，您将为Node.js应用程序编写的Lightning Web组件转换为Salesforce平台的组件。

复制组件文件

1. 副本app，sessionDetails，sessionList，和speakerCard组件文件夹从以前项目的/src/client/modules/my目录。
2. 将这四个文件夹粘贴到Salesforce DX项目/force-app/main/default/lwc目录中。
3. 删除force-app/main/default/lwc/app/__tests__文件夹，因为我们将不在此项目中测试组件。

添加组件元数据

为了显示Lightning Experience中的组件，Salesforce平台需要一些称为元数据的额外数据。 

1. 1. 打开Visual Studio代码。
   2. 按文件>打开。
   3. 选择您的lightning-conference文件夹，然后单击“打开”。
   4. 在文件资源管理器中导航到目录force-app/main/default/lwc。
   5. app.js-meta.xml在app目录中创建一个文件。
   6. 将此内容粘贴到文件中：

<?xml version="1.0" encoding="UTF-8"?>
<LightningComponentBundle xmlns="http://soap.sforce.com/2006/04/metadata">
  <apiVersion>49.0</apiVersion>
  <isExposed>true</isExposed>
  <masterLabel>Conference App</masterLabel>
  <targets>
    <target>lightning__AppPage</target>
  </targets>
</LightningComponentBundle>

isExposed设置为的标志true公开了要在Lightning App Builder中使用的组件，而该masterLabel属性使您可以为其指定用户友好名称。通过lightning__AppPage目标，您可以将该组件放置在Lightning应用程序页面中，就像您之前创建的一样。

1. 1. 保存app.js-meta.xml文件。
   2. sessionDetails.js-meta.xml在sessionDetails目录中创建一个文件。
   3. 将此内容粘贴到文件中：

<?xml version="1.0" encoding="UTF-8" ?>
<LightningComponentBundle xmlns="http://soap.sforce.com/2006/04/metadata">
  <apiVersion>49.0</apiVersion>
  <isExposed>false</isExposed>
</LightningComponentBundle>

1. 保存sessionDetails.js-meta.xml文件。
2. 复制sessionDetails.js-meta.xml到sessionList 目录中，并将其重命名为sessionList.js-meta.xml。
3. 复制speakerCard 目录中的sessionDetails.js-meta.xml并将其重命名为speakerCard.js-meta.xml。

此时，所有组件目录都应包含一个如下.js-meta.xml文件：

更新组件命名空间

在上一个项目中，组件放置在my充当名称空间的文件夹中。在Salesforce平台上，您使用默认名称空间- c。实际上，这只是意味着您需要用my-组件标记中的c-前缀替换组件标签的前缀。

1. 在VS Code中，单击“搜索”图标 
2. my-在搜索字段中输入。
3. 按Enter键，您应该看到“ 2个文件中有6个结果”（app.html和sessionDetails.html）。
4. c-在替换字段中输入。
5. 单击全部替换图标，然后确认替换。

使用模拟数据测试转换

为了快速测试组件的转换，让我们用模拟数据替换数据检索。您将在下一步中获取Salesforce数据。

1. 1. 打开 sessionList.js
   2. 去掉 import { getSessions } from 'data/sessionService';
   3. 用connectedCallback以下代码替换函数中的三行代码。

this.sessions = this.allSessions = [
  {
    id: '1',
    name: 'Mock session',
    dateTime: '2099-01-01 00:00:00',
    room: 'Mock room',
    description: "Mock description",
    speakers: [
      {
        id: '1',
        name: 'Mock speaker 1',
        bio: 'Bio for mock speaker 1',
        email: 'mock1@trailhead.com',
        pictureUrl:'https://developer.salesforce.com/files/js-dev/speaker-images/john_doe.jpg'
      },
      {
        id: '2',
        name: 'Mock speaker 2',
        bio: 'Bio for mock speaker 2',
        email: 'mock2@trailhead.com',
        pictureUrl:'https://developer.salesforce.com/files/js-dev/speaker-images/laetitia_arevik.jpg'
      }
    ]
  }
];

1. 1. 保存 sessionList.js
   2. 打开 sessionDetails.js
   3. 去掉 import { getSession } from 'data/sessionService';
   4. 替换this.session = getSession(id);为以下代码。

this.session = {
  id: '1',
  name: 'Mock session',
  dateTime: '2099-01-01 00:00:00',
  room: 'Mock room',
  description: "Mock description",
  speakers: [
    {
      id: '1',
      name: 'Mock speaker 1',
      bio: 'Bio for mock speaker 1',
      email: 'mock1@trailhead.com',
      pictureUrl: 'https://developer.salesforce.com/files/js-dev/speaker-images/john_doe.jpg'
    },
    {
      id: '2',
      name: 'Mock speaker 2',
      bio: 'Bio for mock speaker 2',
      email: 'mock2@trailhead.com',
      pictureUrl: 'https://developer.salesforce.com/files/js-dev/speaker-images/laetitia_arevik.jpg'
    }
  ]
};

1. 保存 sessionDetails.js

将应用程序组件添加到闪电页面

此时，您的组件已准备好部署到Salesforce平台，并且可以将它们添加到您先前设置的Lightning Page中。

1. 1. 在VS Code中，右键单击该force-app文件夹，然后单击SFDX：将源部署到组织。

您应该在VS Code的输出选项卡中看到以下文本。

1. 在Windows上按Ctrl + Shift + P或在macOS上按Cmd + Shift + P来打开命令面板。
2. 类型 SFDX
3. 选择SFDX：打开Default Org。这将在浏览器中打开您的Salesforce组织。
4. 导航到会议应用程序的“议程”选项卡。
5. 单击设置图标， 然后选择编辑页面。
6. 在左侧导航列表中，向下滚动到“自定义”部分，找到您的Conference App组件并将其拖动到显示为的组件占位符上：在此处添加组件。
7. 点击保存。
8. 单击返回以返回到应用程序。

单击会话条目，并确保您可以导航到列出的单个会话。

我们在Lightning应用程序中不需要标题，因此让我们调整应用程序的样式和结构。

调整组件的样式和结构

1. 1. 打开 app.html
   2. 删除header标签及其内容。
   3. <main class="content">用此代码替换开始标签。

<lightning-card>
  <div class="slds-var-p-horizontal_small">

1. 1. 将结束</main>标记替换为：

  </div>
</lightning-card>

1. 保存 app.html
2. 右键单击app.css资源管理器中的文件，选择“ SFDX：从项目和组织中删除”，然后单击“删除源”。
3. 编辑sessionList.css，删除:host规则并保存文件。
4. 编辑sessionDetails.css，删除:host规则并保存文件。
5. 通过右键单击force-app文件夹并单击SFDX：将源部署到组织来重新部署组件。

做得好，您的应用现在看起来更好（您可能需要刷新页面几次以清除缓存）。

在下一步中，将模拟数据替换为真实的Salesforce数据。