Pour cette première partie du jeu, on va créer un composant qui va afficher dans une page Salesforce toutes les voitures sur une carte. A chaque fois qu’on regarde la carte, on voit si la voiture a bougé.

Pour cela je me suis inspiré du code de l’application « Ours » du cours Salesforce qui affichait une carte des Ours d’un Parc Naturel.

2.         Le composant

Comme avant, on doit faire un fichier de description pour dire où le composant s’affiche

<?xml version="1.0" encoding="UTF-8"?>

<LightningComponentBundle xmlns="http://soap.sforce.com/2006/04/metadata" fqn="CarInfo">
<apiVersion>45.0</apiVersion>

<isExposed>true</isExposed>

<targets>
<target>lightning__RecordPage</target>
</targets>

<targetConfigs>
<targetConfig targets="lightning__RecordPage">
<objects>
<object>Car__c</object>
</objects>
</targetConfig>
</targetConfigs>

</LightningComponentBundle>

Le code HTML du composant est simple car il y a dans salesforce un composant tout prêt : lightning-map, à qui on donne une liste d’objet à placer sur la carte : mapMarkers.

<template>

<article class="slds-card">
<lightning-map
map-markers={mapMarkers}
zoom-level="11"
markers-title="Cars">
</lightning-map>
</article>

</template>

Le code javascript du composant va juste

• charger les voitures depuis salesforce en appelant un code Apex : getAllCars
• transformer les voitures en marqueurs pour la carte : data.map

import { LightningElement, track, wire } from 'lwc';
import getAllCars from '@salesforce/apex/CarController.getAllCars';

export default class CarMap extends LightningElement {

@track mapMarkers = [];
@track cars;

@wire(getAllCars, {})
loadCars(result) {
if (result.data) {
this.cars = result.data;
this.mapMarkers = result.data.map(car => {
const Latitude = car.Last_Position__Latitude__s;
const Longitude = car.Last_Position__Longitude__s;
return {
location: { Latitude, Longitude },
title: car.Name,
description: 'Coords: ${Latitude}, ${Longitude}',
icon: 'utility:animal_and_nature'
};
});
}

}}

Le code APEX qui renvoie les voitures est juste une requête SOQL vers la base Salesforce pour savoir la dernière position des voitures.

@AuraEnabled(Cacheable=true)

public static Car__c[] getAllCars() {
return [SELECT Id, Name,
Last_Position__longitude__s, Last_Position__latitude__s
FROM Car__c
WHERE Last_Position__longitude__s!= null
AND Last_Position__latitude__s != null
ORDER BY Name LIMIT 50
];
}
}

3.         Le résultat

Et voici ce que donne ce composant une fois installé dans une page Salesforce :

On sait où sont les voitures au fur et à mesure que salesforce récupère les informations depuis le serveur Cloud Mercedes !