Salesforce LWC學習(三十) lwc superbadge專案實現

本篇參考：https://trailhead.salesforce.com/content/learn/superbadges/superbadge_lwc_specialist

我們做lwc的學習時，因為很多人可能還沒接觸過lwc的專案，所以通過學習知道很多的知識點，但是可能沒有機會做到一個小專案，salesforce lwc superbadge正好可以在將知識點串起來基礎上，深化學習，當一個小專案練手。首先先按照上方的superbadge要求，安裝一個unlocked package，然後匯入到基礎資料。匯入以後資料以及表和基本的 component的殼子就都有了。一步一步進行分析。觀看以下視訊檢視效果：https://www.iqiyi.com/v_1rz2ad7afb8.html

（注： 如果沒有lwc的基礎，請務必先了解基礎以後檢視，否則看此篇純屬浪費時間）

一. 表結構

demo中主要用到了三個表。

• Boat：儲存了船的一些基礎資訊；
• BoatReview：船的評價資訊；
• Boat Type：儲存船的型別。

 二. component層級結構

demo中包含了以下的 component資訊，其中層級結構如下所示。我們可以看到 boatSearch / boatDetailTabs以及boatMap是同層，他們傳遞 recordId的方式便需要通過 Lightning Message Service方式。

 三. 涉及到技術以及程式碼詳情

涉及到的主要技術

1. lightning message service：用於沒有關聯的元件間的資訊傳播，類似於aura中的 application event，實現跨元件傳遞 引數，可以參考此篇文章：

Salesforce LWC學習(二十三) Lightning Message Service 淺談 ；

2. 父子component傳值，子如何建立事件，父如何去排程事件，可以參考此篇文章：

Salesforce LWC學習(四) 父子component互動 / component宣告週期管理 / 事件處理；

3. 通過 wire service或者Lightning Data Service實現和資料的互動，可以參考此篇文章：

Salesforce LWC學習(五) LDS & Wire Service 實現和後臺資料互動 & meta xml配置；

4. Navigation 以及Toast實現展示Toast資訊以及頁面跳轉功能，可以參考此篇文章：

Salesforce LWC學習(七) Navigation & Toast；

5. lwc提供的各種預置的元件，可以參考官方連結：https://developer.salesforce.com/docs/component-library/overview/components；

6. wire adapter等知識點使用。可以參考此篇文章：

Salesforce LWC學習(六) @salesforce & lightning/ui*Api Reference

預備工作，按照1操作中的步驟建立Message Channel:在messageChannels目錄下建立一個 BoatMessageChannel.messageChannel-meta.xml的檔案，裡面包含主要欄位為 fieldName，可以在上方 superbadge去進行適當的copy。

 程式碼如下：BoatDataService.cls：包含了專案中用到的後臺需要使用的所有的方法

public with sharing class BoatDataService {

    public static final String LENGTH_TYPE = 'Length';
    public static final String PRICE_TYPE = 'Price';
    public static final String TYPE_TYPE = 'Type';
    @AuraEnabled(cacheable=true)
    public static List<Boat__c> getBoats(String boatTypeId) {
        // Without an explicit boatTypeId, the full list is desired
        String query = 'SELECT '
                     + 'Name, Description__c, Geolocation__Latitude__s, '
                     + 'Geolocation__Longitude__s, Picture__c, Contact__r.Name, '
                     + 'BoatType__c, BoatType__r.Name, Length__c, Price__c '
                     + 'FROM Boat__c';
        if (String.isNotBlank(boatTypeId)) {
            query += ' WHERE BoatType__c = :boatTypeId';
        }
        query += ' WITH SECURITY_ENFORCED ';
        return Database.query(query);
    }

    @AuraEnabled(cacheable=true)
    public static List<Boat__c> getSimilarBoats(Id boatId, String similarBy) {
        List<Boat__c> similarBoats = new List<Boat__c>();
        List<Boat__c> parentBoat = [SELECT Id, Length__c, Price__c, BoatType__c, BoatType__r.Name
                                    FROM Boat__c
                                    WHERE Id = :boatId
                                    WITH SECURITY_ENFORCED];
        if (parentBoat.isEmpty()) {
            return similarBoats;
        }
        if (similarBy == LENGTH_TYPE) {
            similarBoats = [
                SELECT Id, Contact__r.Name, Name, BoatType__c, BoatType__r.Name, Length__c, Picture__c, Price__c, Year_Built__c
                FROM Boat__c
                WHERE Id != :parentBoat.get(0).Id
                AND (Length__c >= :parentBoat.get(0).Length__c / 1.2)
                AND (Length__c <= :parentBoat.get(0).Length__c * 1.2)
                WITH SECURITY_ENFORCED
                ORDER BY Length__c, Price__c, Year_Built__c
            ];
        } else if (similarBy == PRICE_TYPE) {
            similarBoats = [
                SELECT Id, Contact__r.Name, Name, BoatType__c, BoatType__r.Name, Length__c, Picture__c, Price__c, Year_Built__c
                FROM Boat__c
                WHERE Id != :parentBoat.get(0).Id
                AND (Price__c >= :parentBoat.get(0).Price__c / 1.2)
                AND (Price__c <= :parentBoat.get(0).Price__c * 1.2)
                WITH SECURITY_ENFORCED
                ORDER BY Price__c, Length__c, Year_Built__c
            ];
        } else if (similarBy == TYPE_TYPE) {
            similarBoats = [
                SELECT Id, Contact__r.Name, Name, BoatType__c, BoatType__r.Name, Length__c, Picture__c, Price__c, Year_Built__c
                FROM Boat__c
                WHERE Id != :parentBoat.get(0).Id
                AND (BoatType__c = :parentBoat.get(0).BoatType__c)
                WITH SECURITY_ENFORCED
                ORDER BY Price__c, Length__c, Year_Built__c
            ];
        }
        return similarBoats;
    }

    @AuraEnabled(cacheable=true)
    public static List<BoatType__c> getBoatTypes() {
        return [SELECT Name, Id FROM BoatType__c WITH SECURITY_ENFORCED ORDER BY Name];
    }

    @AuraEnabled(cacheable=false)
    public static List<BoatReview__c> getAllReviews(Id boatId) {
        return [
            SELECT
                Id,
                Name,
                Comment__c,
                Rating__c,
                LastModifiedDate,
                CreatedDate,
                CreatedBy.Name,
                CreatedBy.SmallPhotoUrl,
                CreatedBy.CompanyName
            FROM
                BoatReview__c
            WHERE
                Boat__c =:boatId
            WITH SECURITY_ENFORCED
            ORDER BY
                CreatedDate DESC
        ];
    }

    @AuraEnabled(cacheable=true)
    public static String getBoatsByLocation(Decimal latitude, Decimal longitude, String boatTypeId) {
        // Without an explicit boatTypeId, the full list is desired
        String query = 'SELECT Name, Geolocation__Latitude__s, Geolocation__Longitude__s FROM Boat__c ';
        if (String.isNotBlank(boatTypeId)) {
            query += 'WHERE BoatType__c = :boatTypeId ';
        }
        query += ' WITH SECURITY_ENFORCED ORDER BY DISTANCE(Geolocation__c, GEOLOCATION(:latitude, :longitude), \'mi\') LIMIT 10';
        return JSON.serialize(Database.query(query));
    }
}

 fiveStartRating.js：使用了第三方的js以及css；

//import fivestar static resource, call it fivestar
import { LightningElement, api } from 'lwc';
import fivestar from '@salesforce/resourceUrl/fivestar';
import { ShowToastEvent } from 'lightning/platformShowToastEvent';
import { loadStyle, loadScript } from 'lightning/platformResourceLoader';

const ERROR_TITLE = 'Error loading five-star';
const ERROR_VARIANT = 'error';
const EDITABLE_CLASS = 'c-rating';
const READ_ONLY_CLASS = 'readonly c-rating';

export default class FiveStarRating extends LightningElement {
  //initialize public readOnly and value properties
  @api readOnly;
  @api value;

  editedValue;
  isRendered;

  //getter function that returns the correct class depending on if it is readonly
  get starClass() {
    return this.readOnly ? READ_ONLY_CLASS : EDITABLE_CLASS;
  }

  // Render callback to load the script once the component renders.
  renderedCallback() {
    if (this.isRendered) {
      return;
    }
    this.loadScript();
    this.isRendered = true;
  }

  //Method to load the 3rd party script and initialize the rating.
  //call the initializeRating function after scripts are loaded
  //display a toast with error message if there is an error loading script
  loadScript() {
      Promise.all([
        loadStyle(this, fivestar + '/rating.css'),
        loadScript(this, fivestar + '/rating.js')
      ]).then(() => {
        this.initializeRating();
      }).catch(()=>{
        const event = new ShowToastEvent({title:ERROR_TITLE, variant:ERROR_VARIANT});
        this.dispatchEvent(event);
      });
  }

  initializeRating() {
    let domEl = this.template.querySelector('ul');
    let maxRating = 5;
    let self = this;
    let callback = function (rating) {
      self.editedValue = rating;
      self.ratingChanged(rating);
    };
    this.ratingObj = window.rating(
      domEl,
      this.value,
      maxRating,
      callback,
      this.readOnly
    );
  }

  // Method to fire event called ratingchange with the following parameter:
  // {detail: { rating: CURRENT_RATING }}); when the user selects a rating
  ratingChanged(rating) {
    this.dispatchEvent(new CustomEvent('ratingchange', {detail: { rating: rating }}));
  }
}

fiveStartRating.html: 展示UI

<template>
    <ul class={starClass}></ul>
</template>

boatSearchForm.js: wire adapter和後臺互動以及註冊自定義事件

import { LightningElement, wire, track } from 'lwc';
import getBoatTypes from '@salesforce/apex/BoatDataService.getBoatTypes';
export default class BoatSearchForm extends LightningElement {
    selectedBoatTypeId = '';
    
    // Private
    error = undefined;
    
    // Needs explicit track due to nested data
    @track searchOptions = [];
    
    // Wire a custom Apex method
    @wire(getBoatTypes)
      boatTypes({ error, data }) {
      if (data) {
        this.searchOptions = data.map(type => ({
            // TODO: complete the logic
            label: type.Name,value: type.Id
        }));
        this.searchOptions.unshift({ label: 'All Types', value: '' });
      } else if (error) {
        this.searchOptions = undefined;
        this.error = error;
      }
    }
    
    // Fires event that the search option has changed.
    // passes boatTypeId (value of this.selectedBoatTypeId) in the detail
    handleSearchOptionChange(event) {
        this.selectedBoatTypeId = event.detail.value.trim();
        const searchEvent = new CustomEvent('search',  {detail:{boatTypeId: this.selectedBoatTypeId} });
        this.dispatchEvent(searchEvent);
    }
}

boatSearchForm.html:搜尋UI展示

<template>
    <lightning-layout>
      <lightning-layout-item class="slds-align-middle">
        <lightning-combobox class="slds-align-middle" options={searchOptions} onchange={handleSearchOptionChange} value={selectedBoatTypeId}></lightning-combobox>
      </lightning-layout-item>
    </lightning-layout>
</template>

boatTile.js： 獲取父元件傳遞過來的內容，註冊自定義事件

import { LightningElement, api} from "lwc";
const TILE_WRAPPER_SELECTED_CLASS = "tile-wrapper selected";
const TILE_WRAPPER_UNSELECTED_CLASS = "tile-wrapper";
export default class BoatTile extends LightningElement {
    @api boat;
    @api selectedBoatId;
    get backgroundStyle() {
        return `background-image:url(${this.boat.Picture__c})`;
    }
    get tileClass() {
        return this.selectedBoatId == this.boat.Id ? TILE_WRAPPER_SELECTED_CLASS : TILE_WRAPPER_UNSELECTED_CLASS;
    }
    selectBoat() {
        this.selectedBoatId = !this.selectedBoatId;
        const boatselect = new CustomEvent("boatselect", {
            detail: {
                boatId: this.boat.Id
            }
        });
        this.dispatchEvent(boatselect);
    }
}

boatTile.html：詳情頁UI展示

<template>
    <div onclick={selectBoat} class={tileClass}>
        <div style={backgroundStyle} class="tile"></div>
        <div class="lower-third">
            <h1 class="slds-truncate slds-text-heading_medium">{boat.Name}</h1>
            <h2 class="slds-truncate slds-text-heading_small">{boat.Contact__r.Name}</h2>
            <div class="slds-text-body_small">
                Price: <lightning-formatted-number maximum-fraction-digits="2" format-style="currency" currency-code="USD" value={boat.Price__c}> </lightning-formatted-number>
            </div>
            <div class="slds-text-body_small"> Length: {boat.Length__c} </div>
            <div class="slds-text-body_small"> Type: {boat.BoatType__r.Name} </div>
        </div>
    </div>
</template>

boatTile.css

.tile {
    width: 100%;
    height: 220px;
    padding: 1px !important;
    background-position: center;
    background-size: cover;
    border-radius: 5px;
  }
  .selected {
    border: 3px solid rgb(0, 95, 178);
    border-radius: 5px;
  }
  .tile-wrapper {
    cursor: pointer;
    padding: 5px;
  }

boatsNearMe.js： wire adapter / toast / 生命週期函式/ lightning-map 預置函式

import { LightningElement, track, wire, api } from 'lwc';
import getBoatsByLocation from '@salesforce/apex/BoatDataService.getBoatsByLocation';
import { ShowToastEvent } from 'lightning/platformShowToastEvent';

const LABEL_YOU_ARE_HERE = 'You are here!';
const ICON_STANDARD_USER = 'standard:user';
const ERROR_TITLE = 'Error loading Boats Near Me';
const ERROR_VARIANT = 'error';
export default class BoatsNearMe extends LightningElement {
    @api boatTypeId;
    @track mapMarkers = [];
    @track isLoading = true;
    @track isRendered = false;
    latitude;
    longitude;
    @wire(getBoatsByLocation, { latitude: '$latitude', longitude: '$longitude', boatTypeId: '$boatTypeId' })
    wiredBoatsJSON({ error, data }) {
        if (data) {
            this.createMapMarkers(data);
        } else if (error) {
            this.dispatchEvent(
                new ShowToastEvent({
                    title: ERROR_TITLE,
                    message: error.body.message,
                    variant: ERROR_VARIANT
                })
            );
            this.isLoading = false;
        }
    }
    renderedCallback() {
        if (this.isRendered == false) {
            this.getLocationFromBrowser();
        }
        this.isRendered = true;
    }
    getLocationFromBrowser() {
        navigator.geolocation.getCurrentPosition(
            (position) => {
                this.latitude = position.coords.latitude;
                this.longitude = position.coords.longitude;
            },
            (e) => {

            }, {
            enableHighAccuracy: true
        }
        );
    }
    createMapMarkers(boatData) {
        this.mapMarkers = boatData.map(rowBoat => {
            return {
                location: {
                    Latitude: rowBoat.Geolocation__Latitude__s,
                    Longitude: rowBoat.Geolocation__Longitude__s
                },
                title: rowBoat.Name,
            };
        });
        this.mapMarkers.unshift({
            location: {
                Latitude: this.latitude,
                Longitude: this.longitude
            },
            title: LABEL_YOU_ARE_HERE,
            icon: ICON_STANDARD_USER
        });
        this.isLoading = false;
    }
}

boatsNearMe.html

<template>
    <lightning-card class="slds-is-relative">
       <!-- The template and lightning-spinner goes here -->
       <template if:true={isLoading}>
        <lightning-spinner
        alternative-text="Loading" variant="brand">
        </lightning-spinner>
       </template>
       <!-- The lightning-map goes here -->
       <lightning-map map-markers={mapMarkers}></lightning-map>
       <div slot="footer">Top 10 Only!</div>
    </lightning-card>
</template>

boatSearchResults.js： wire adapter / lightning message service / toast / 父元件處理子元件事件

import { LightningElement, wire, api, track } from 'lwc';
import getBoats from '@salesforce/apex/BoatDataService.getBoats';
import { updateRecord } from 'lightning/uiRecordApi';
import { ShowToastEvent } from 'lightning/platformShowToastEvent';
import { refreshApex } from '@salesforce/apex';
import { publish, MessageContext } from 'lightning/messageService';
import BoatMC from '@salesforce/messageChannel/BoatMessageChannel__c';

export default class BoatSearchResults extends LightningElement {
    boatTypeId = '';
    @track boats;
    @track draftValues = [];
    selectedBoatId = '';
    isLoading = false;
    error = undefined;
    wiredBoatsResult;

    @wire(MessageContext) messageContext;

    columns = [
        { label: 'Name', fieldName: 'Name', type: 'text', editable: 'true'  },
        { label: 'Length', fieldName: 'Length__c', type: 'number', editable: 'true' },
        { label: 'Price', fieldName: 'Price__c', type: 'currency', editable: 'true' },
        { label: 'Description', fieldName: 'Description__c', type: 'text', editable: 'true' }
    ];

    @api
    searchBoats(boatTypeId) {
        this.isLoading = true;
        this.notifyLoading(this.isLoading);
        this.boatTypeId = boatTypeId;
    }

    @wire(getBoats, { boatTypeId: '$boatTypeId' })
    wiredBoats(result) {
        this.boats = result;
        if (result.error) {
            this.error = result.error;
            this.boats = undefined;
        }
        this.isLoading = false;
        this.notifyLoading(this.isLoading);
    }

    updateSelectedTile(event) {
        this.selectedBoatId = event.detail.boatId;
        this.sendMessageService(this.selectedBoatId);
    }

    handleSave(event) {
        this.notifyLoading(true);
       const recordInputs = event.detail.draftValues.slice().map(draft=>{
           const fields = Object.assign({}, draft);
           return {fields};
       });

       console.log(recordInputs);
       const promises = recordInputs.map(recordInput => updateRecord(recordInput));
       Promise.all(promises).then(res => {
           this.dispatchEvent(
               new ShowToastEvent({
                   title: SUCCESS_TITLE,
                   message: MESSAGE_SHIP_IT,
                   variant: SUCCESS_VARIANT
               })
           );
           this.draftValues = [];
           return this.refresh();
       }).catch(error => {
           this.error = error;
           this.dispatchEvent(
                new ShowToastEvent({
                    title: ERROR_TITLE,
                    message: CONST_ERROR,
                    variant: ERROR_VARIANT
                })
            );
            this.notifyLoading(false);
       }).finally(() => {
            this.draftValues = [];
        });
    }
    @api
    async refresh() {
        this.isLoading = true;
        this.notifyLoading(this.isLoading);      
        await refreshApex(this.boats);
        this.isLoading = false;
        this.notifyLoading(this.isLoading);        
    }


    notifyLoading(isLoading) {
        if (isLoading) {
            this.dispatchEvent(new CustomEvent('loading'));
        } else {
            this.dispatchEvent(CustomEvent('doneloading'));
        }
    }

     sendMessageService(boatId) { 
        publish(this.messageContext, BoatMC, { recordId : boatId });
    }
}

boatSearchResults.html：巢狀子元件，展示UI

<template>
    <lightning-tabset variant="scoped">
        <lightning-tab label="Gallery">
            <template if:true={boats.data}>
                <div class="slds-scrollable_y">
                    <lightning-layout horizontal-align="center" multiple-rows>
                        <template for:each={boats.data} for:item="boat">
                            <lightning-layout-item key={boat.Id} padding="around-small" size="12" small-device-size="6"
                                medium-device-size="4" large-device-size="3">
                                <c-boat-tile boat={boat} selected-boat-id={selectedBoatId}
                                    onboatselect={updateSelectedTile}></c-boat-tile>
                            </lightning-layout-item>
                        </template>
                    </lightning-layout>
                </div>
            </template>
        </lightning-tab>
        <lightning-tab label="Boat Editor">
            <!-- Scrollable div and lightning datatable go here -->
            <template if:true={boats.data}>
                <div class="slds-scrollable_y">
                    <lightning-datatable key-field="Id" data={boats.data} columns={columns} onsave={handleSave}
                        draft-values={draftValues} hide-checkbox-column show-row-number-column>
                    </lightning-datatable>
                </div>
            </template>
        </lightning-tab>
        <lightning-tab label="Boats Near Me">
            <!-- boatsNearMe component goes here -->
            <c-boats-near-me boat-type-id={boatTypeId}></c-boats-near-me>
        </lightning-tab>
    </lightning-tabset>
</template>

boatSearch.js:處理子元件事件 / navigation 

import { LightningElement , track } from 'lwc';
import { NavigationMixin } from 'lightning/navigation'

// imports
export default class BoatSearch extends NavigationMixin(LightningElement) {
    @track isLoading = false;

    // Handles loading event
    handleLoading(event) {
        this.isLoading = true;
    }

    // Handles done loading event
    handleDoneLoading(event) {
        this.isLoading = false;
    }

    // Handles search boat event
    // This custom event comes from the form
    searchBoats(event) {
        const boatTypeId = event.detail.boatTypeId;
        this.template.querySelector("c-boat-search-results").searchBoats(boatTypeId);
    }

    createNewBoat() {
        this[NavigationMixin.Navigate]({
            type: 'standard__objectPage',
            attributes: {
                objectApiName: 'Boat__c',
                actionName: 'new'
            }
        });
    }
}

boatSearch.html: UI展示

<template>
    <lightning-layout multiple-rows>
        <!-- Top -->
        <lightning-layout-item size="12">
            <lightning-card title="Find a Boat">
                <!-- New Boat button goes here -->
                <lightning-button label="New Boat" onclick={createNewBoat}></lightning-button>
                <p class="slds-var-p-horizontal_small">
                    <!-- boatSearchForm component goes here -->
                    <c-boat-search-form onsearch={searchBoats}></c-boat-search-form>
                </p>
            </lightning-card>
        </lightning-layout-item>
        <!-- Bottom -->
        <lightning-layout-item size="12" class="slds-p-top_small slds-is-relative">
            <!-- Spinner goes here -->
            <template if:true={isLoading}>
                <lightning-spinner alternative-text="Loading" variant="brand"></lightning-spinner>
            </template>
            <!-- boatSearchResults goes here -->
            <c-boat-search-results onloading={handleLoading} ondoneloading={handleDoneLoading}></c-boat-search-results>
            <!-- onloading={handleLoading} ondoneloading={handleDoneLoading} -->
        </lightning-layout-item>
    </lightning-layout>
</template>

boatReviews.js：wire adapter / navigation / 父子巢狀

import { LightningElement, api } from 'lwc';
import getAllReviews  from '@salesforce/apex/BoatDataService.getAllReviews';
import { NavigationMixin } from 'lightning/navigation';
import { refreshApex } from '@salesforce/apex';

export default class BoatReviews extends NavigationMixin(LightningElement) {
    // Private
    boatId;
    error;
    boatReviews = [];
    isLoading = false;
    
    // Getter and Setter to allow for logic to run on recordId change
    @api
    get recordId() { 
        return this.boatId;
    }

    set recordId(value) {
      //sets boatId attribute
      this.setAttribute('boatId', value);
      //sets boatId assignment
      this.boatId = value;
      //get reviews associated with boatId
      this.getReviews();
    }
    
    // Getter to determine if there are reviews to display
    get reviewsToShow() { 
        return this.boatReviews && this.boatReviews.length > 0 ? true : false;
    }
    
    // Public method to force a refresh of the reviews invoking getReviews
    @api
    refresh() { 
        refreshApex(this.getReviews());
    }
    
    // Imperative Apex call to get reviews for given boat
    // returns immediately if boatId is empty or null
    // sets isLoading to true during the process and false when it’s completed
    // Gets all the boatReviews from the result, checking for errors.
    getReviews() { 
        if(this.boatId == null  || this.boatId == '') {
            return;
        }
        this.isLoading = true;
        this.error = undefined;
        getAllReviews({boatId:this.recordId})
        .then(result=>{
            this.boatReviews = result;
            this.isLoading = false;
        }).catch(error=>{
            this.error = error.body.message;
        }).finally(() => {
            this.isLoading = false;
         });
    }
    
    // Helper method to use NavigationMixin to navigate to a given record on click
     navigateToRecord(event) { 
        this[NavigationMixin.Navigate]({
          type: "standard__recordPage",
          attributes: {
              recordId: event.target.dataset.recordId,
              actionName: "view"
          }
        });
      }
  }

boatReviews.html

<template>
    <!-- div for when there are no reviews available -->
    <template if:false={reviewsToShow}>
      <div class="slds-feed, reviews-style, slds-is-relative, slds-scrollable_y "><div class="slds-align_absolute-center">No reviews available</div></div>
    </template>
    
    <!-- div for when there are reviews available -->
    <div>
    <!-- insert spinner -->
    <template if:true={isLoading}>
      <lightning-spinner variant="brand" alternative-text="Loading" size="small"></lightning-spinner>
    </template>
    <template if:true={reviewsToShow}>
      <ul class="slds-feed__list">
        <!-- start iteration -->
        <template for:each={boatReviews} for:item="boatReview">
          <li class="slds-feed__item" key={boatReview.Id}>
            <article class="slds-post">
              <header class="slds-post__header slds-media">
                <div class="slds-media__figure">
                  <!-- display the creator’s picture -->
                  <lightning-avatar 
                      variant="circle" 
                      src={boatReview.CreatedBy.SmallPhotoUrl} 
                      initials="AW" 
                      fallback-icon-name="standard:user" 
                      alternative-text={boatReview.CreatedBy.Name}  
                      class="slds-m-right_small">
              </lightning-avatar>
                </div>
                <div class="slds-media__body">
                  <div class="slds-grid slds-grid_align-spread slds-has-flexi-truncate">
                    <p>
                        <!-- display creator’s name -->
                        <a data-record-id={boatReview.CreatedBy.Id} title={boatReview.CreatedBy.Name} onclick={navigateToRecord}>{boatReview.CreatedBy.Name}
                        </a>
                      <span><!-- display creator’s company name -->
                        {boatReview.CreatedBy.CompanyName}
                      </span>
                    </p>
                  </div>
                  <p class="slds-text-body_small">
                    <!-- display created  date -->
                    <lightning-formatted-date-time value={boatReview.CreatedDate}></lightning-formatted-date-time>
                  </p>
                </div>
              </header>
              <div class="slds-text-longform">
                <p class="slds-text-title_caps"><!-- display Name -->{boatReview.Name}</p>
                <!-- display Comment__c -->
                <lightning-formatted-rich-text value={boatReview.Comment__c}></lightning-formatted-rich-text>
              </div>
              <!-- display five star rating on readonly mode -->
              <c-five-star-rating read-only value={boatReview.Rating__c}></c-five-star-rating>
            </article>
          </li>
        
        </template> 
        <!-- end iteration -->
      </ul>
    </template>
    </div>
  </template>

boatReviews.css

.reviews-style {
    max-height: 250px;
}

boatAddReviewForm.js：lightning data service / wire adapter / toast 

import { LightningElement, api, track } from 'lwc';
import { createRecord } from 'lightning/uiRecordApi';
import { ShowToastEvent } from 'lightning/platformShowToastEvent';
import NAME_FIELD from '@salesforce/schema/BoatReview__c.Name';
import COMMENT_FIELD from '@salesforce/schema/BoatReview__c.Comment__c';
import RATING_FIELD from '@salesforce/schema/BoatReview__c.Rating__c';
import BOAT_REVIEW_OBJECT from '@salesforce/schema/BoatReview__c';
import BOAT_FIELD from '@salesforce/schema/BoatReview__c.Boat__c';

const SUCCESS_TITLE = 'Review Created!';
const SUCCESS_VARIANT = 'success';

export default class BoatAddReviewForm extends LightningElement {
    @api boat;
    boatId;
    nameField = NAME_FIELD;
    commentField = COMMENT_FIELD;
    boatReviewObject = BOAT_REVIEW_OBJECT;
    rating = 0;
    review = '';
    title = '';
    comment = '';


    @api
    get recordId() {
        return this.boatId;
    }

    set recordId(value) {
      this.boatId = value;
  }

// Gets user rating input from stars component
handleRatingChanged(event) {
    this.rating = event.detail.rating;
 }

// Custom submission handler to properly set Rating
// This function must prevent the anchor element from navigating to a URL.
// form to be submitted: lightning-record-edit-form
handleSubmit(event) {
  event.preventDefault();
  const fields = event.detail.fields;
  fields.Boat__c = this.boatId;
  fields.Rating__c = this.rating;
  this.template.querySelector('lightning-record-edit-form').submit(fields);
 }

// Shows a toast message once form is submitted successfully
// Dispatches event when a review is created
handleSuccess() {
  // TODO: dispatch the custom event and show the success message
  const evt = new ShowToastEvent({
      title: SUCCESS_TITLE,
      variant: SUCCESS_VARIANT
  });
  this.dispatchEvent(evt);
  this.dispatchEvent(new CustomEvent('createreview'));
  this.handleReset();
}

// Clears form data upon submission
// TODO: it must reset each lightning-input-field
handleReset() { 
  const inputFields = this.template.querySelectorAll(
      'lightning-input-field'
  );
  if (inputFields) {
      inputFields.forEach(field => {
          field.reset();
      });
  }
}
}

boatAddReviewForm.html

<template>
  <lightning-record-edit-form object-api-name="BoatReview__c" onsuccess={handleSuccess} onsubmit={handleSubmit}>
      <lightning-layout vertical-align="stretch" multiple-rows="true">
          <lightning-messages>
          </lightning-messages>
          <lightning-layout-item size="12">
              <lightning-input-field field-name="Name">
              </lightning-input-field>
          </lightning-layout-item>
          <lightning-layout-item size="12">
              <p>Rating:</p>
              <c-five-star-rating rating-value={rating} onratingchange={handleRatingChanged}>
              </c-five-star-rating>
          </lightning-layout-item>
          <lightning-layout-item>
              <lightning-input-field field-name="Comment__c">
              </lightning-input-field>
          </lightning-layout-item>
          <div class="slds-align--absolute-center">
              <lightning-button label="Submit" type="submit" icon-name="utility:save"></lightning-button>
          </div>
      </lightning-layout>
  </lightning-record-edit-form>
</template>

boatDetailTabs: 訂閱 lightning message service / wire adapter / navigation

// Custom Labels Imports
// import labelDetails for Details
// import labelReviews for Reviews
// import labelAddReview for Add_Review
// import labelFullDetails for Full_Details
// import labelPleaseSelectABoat for Please_select_a_boat
// Boat__c Schema Imports
// import BOAT_ID_FIELD for the Boat Id
// import BOAT_NAME_FIELD for the boat Name
import { LightningElement, api,wire } from 'lwc';
import labelDetails from '@salesforce/label/c.Details';
import labelReviews from '@salesforce/label/c.Reviews';
import labelAddReview from '@salesforce/label/c.Add_Review';
import labelFullDetails from '@salesforce/label/c.Full_Details';
import labelPleaseSelectABoat from '@salesforce/label/c.Please_select_a_boat';
import BOAT_ID_FIELD from '@salesforce/schema/Boat__c.Id';
import BOAT_NAME_FIELD from '@salesforce/schema/Boat__c.Name';
import { getRecord,getFieldValue } from 'lightning/uiRecordApi';
import BOATMC from '@salesforce/messageChannel/BoatMessageChannel__c';
import { APPLICATION_SCOPE,MessageContext, subscribe } from 'lightning/messageService';
import BoatReviews from 'c/boatReviews';
const BOAT_FIELDS = [BOAT_ID_FIELD, BOAT_NAME_FIELD];
import {NavigationMixin} from 'lightning/navigation';
export default class BoatDetailTabs extends NavigationMixin(LightningElement) {
  @api boatId;

  label = {
    labelDetails,
    labelReviews,
    labelAddReview,
    labelFullDetails,
    labelPleaseSelectABoat,
  };
  
  // Decide when to show or hide the icon
  // returns 'utility:anchor' or null
  get detailsTabIconName() {
    return this.wiredRecord && this.wiredRecord.data ? 'utility:anchor' : null;
   }
  
  // Utilize getFieldValue to extract the boat name from the record wire
  @wire(getRecord,{recordId: '$boatId', fields: BOAT_FIELDS})
  wiredRecord;

  get boatName() {
    return getFieldValue(this.wiredRecord.data, BOAT_NAME_FIELD);
   }
  
  // Private
  subscription = null;
  // Initialize messageContext for Message Service
  @wire(MessageContext)
  messageContext;
  
  // Subscribe to the message channel
  subscribeMC() {
    if(this.subscription) { return; }
    // local boatId must receive the recordId from the message
    this.subscription = subscribe(
        this.messageContext, 
        BOATMC, 
        (message) => {
            this.boatId = message.recordId;
        }, 
        { scope: APPLICATION_SCOPE }
    );
  }
  
  // Calls subscribeMC()
  connectedCallback() { 
    this.subscribeMC();
  }
  
  // Navigates to record page
  navigateToRecordViewPage() {
    this[NavigationMixin.Navigate]({
      type: "standard__recordPage",
      attributes: {
          recordId: this.boatId,
          actionName: "view"
      }
  });
   }
  
  // Navigates back to the review list, and refreshes reviews component
  handleReviewCreated() {
    this.template.querySelector('lightning-tabset').activeTabValue = 'reviews';
    this.template.querySelector('c-boat-reviews').refresh();
    // BoatReviews.refresh();
   }
}

boatDetailTabs.html

<template>
  <template if:false={wiredRecord.data}>
    <!-- lightning card for the label when wiredRecord has no data goes here  -->
      <lightning-card class= "slds-align_absolute-center no-boat-height">
          <span>{label.labelPleaseSelectABoat}</span>
      </lightning-card>
  </template>
  <template if:true={wiredRecord.data}>
     <!-- lightning card for the content when wiredRecord has data goes here  -->
     <lightning-card>
         <lightning-tabset variant="scoped">
             <lightning-tab label={label.labelDetails}>
                 <lightning-card icon-name={detailsTabIconName} title={boatName}>
                     <lightning-button slot="actions" title={boatName} label={label.labelFullDetails} onclick={navigateToRecordViewPage}></lightning-button>
                     <lightning-record-view-form density="compact"
                          record-id={boatId}
                          object-api-name="Boat__c">
                          <lightning-output-field field-name="BoatType__c" class="slds-form-element_1-col"></lightning-output-field>
                          <lightning-output-field field-name="Length__c" class="slds-form-element_1-col"></lightning-output-field>
                          <lightning-output-field field-name="Price__c" class="slds-form-element_1-col"></lightning-output-field>
                          <lightning-output-field field-name="Description__c" class="slds-form-element_1-col"></lightning-output-field>
                     </lightning-record-view-form>
                 </lightning-card>
             </lightning-tab>
             <lightning-tab label={label.labelReviews}  value="reviews"><c-boat-reviews record-id={boatId}></c-boat-reviews></lightning-tab>
             <lightning-tab label={label.labelAddReview}> <c-boat-add-review-form record-id={boatId} oncreatereview={handleReviewCreated}></c-boat-add-review-form></lightning-tab>
         </lightning-tabset>
     </lightning-card>
  </template>
</template>

boatDetailTabs.css

.no-boat-height {
    height: 3rem;
}

boatMap.js： lightning message service / wire adapter

// import BOATMC from the message channel
import { LightningElement,wire,api,track } from 'lwc';
import { getRecord } from 'lightning/uiRecordApi';
import { APPLICATION_SCOPE,subscribe,MessageContext,unsubscribe } from 'lightning/messageService';
import BOATMC from '@salesforce/messageChannel/BoatMessageChannel__c';
// Declare the const LONGITUDE_FIELD for the boat's Longitude__s
// Declare the const LATITUDE_FIELD for the boat's Latitude
// Declare the const BOAT_FIELDS as a list of [LONGITUDE_FIELD, LATITUDE_FIELD];
const LONGITUDE_FIELD = 'Boat__c.Geolocation__Longitude__s';
const LATITUDE_FIELD = 'Boat__c.Geolocation__Latitude__s';
const BOAT_FIELDS = [LONGITUDE_FIELD, LATITUDE_FIELD];
export default class BoatMap extends LightningElement {
    // private
    subscription = null;
    boatId;
    // Getter and Setter to allow for logic to run on recordId change
    // this getter must be public
    @api get recordId() {
        return this.boatId;
    }
    set recordId(value) {
        this.setAttribute('boatId', value);
        this.boatId = value;
    }
    //public
    @track error = undefined;
    @track mapMarkers = [];
    // Initialize messageContext for Message Service
    @wire(MessageContext)
    messageContext;
    // Getting record's location to construct map markers using recordId
    // Wire the getRecord method using ('$boatId')
    @wire(getRecord,{recordId:'$boatId',fields:BOAT_FIELDS})
    wiredRecord({ error, data }) {
    // Error handling
        if (data) {
            this.error = undefined;
            const longitude = data.fields.Geolocation__Longitude__s.value;
            const latitude = data.fields.Geolocation__Latitude__s.value;
            console.log('*** longitude : ' + longitude);
            console.log('*** latitude : ' + latitude);
            this.updateMap(longitude, latitude);
        } else if (error) {
            this.error = error;
            this.boatId = undefined;
            this.mapMarkers = [];
        }
    }
    // Encapsulate logic for Lightning message service subscribe and unsubsubscribe
    subscribeMC(){
        if(!this.subscription){
            this.subscription = subscribe(
                this.messageContext,
                BOATMC,
                (message) => {this.boatId = message.recordId},
                { scope: APPLICATION_SCOPE }
            );
        }
    }

    unsubscribeToMessageChannel() {
        unsubscribe(this.subscription);
        this.subscription = null;
    }
    // Runs when component is connected, subscribes to BoatMC
    connectedCallback() {
        // recordId is populated on Record Pages, and this component
        // should not update when this component is on a record page.
        if (this.subscription || this.recordId) {
            return;
        }
        this.subscribeMC();
        // Subscribe to the message channel to retrieve the recordID and assign it to boatId.
    }
    disconnectedCallback() {
        this.unsubscribeToMessageChannel();
    }
    // Creates the map markers array with the current boat's location for the map.
    updateMap(Longitude, Latitude) {
        this.mapMarkers = [{
            location : {
                Latitude : Latitude,
                Longitude : Longitude
            }
        }];
    }
    // Getter method for displaying the map component, or a helper method.
    get showMap() {
        return this.mapMarkers.length > 0;
    }
}

boatMap.html

<template>
  <lightning-card title="Current Boat Location" icon-name="action:map">
    <template if:true={showMap}>
      <lightning-map map-markers={mapMarkers} zoom-level="10"></lightning-map>
    </template>
    <template if:false={showMap}>
      <span class="slds-align_absolute-center">
        Please select a boat to see its location!
      </span>
    </template>
  </lightning-card>
</template>

一覽圖展示各元件位置及關係，我們需要建立一個 single app，將 boatSearch / boatDetailTabs 以及 boatMap拖動到指定位置即可。

 通過以上程式碼即可實現一個lwc的簡單的app。

總結：篇中根據lwc superbadge進行了程式碼的整理，程式碼並非最優版，感興趣小夥伴自行優化，篇中有錯誤歡迎指出，有不懂歡迎留言。