Как добавить поддержку штрих-кода в мобильное приложение Salesforce

Мобильные устройства прочно вошли в нашу жизнь. Конечно, это может быть хорошо и плохо. Однако для целей этой статьи я сосредоточусь на том, как мобильные устройства обогащают нашу жизнь.

На самом деле, когда мой сын-старшекурсник Эрик приезжает к нам, наши разговоры часто провоцируют Эрика использовать свой телефон для поиска и проверки информации, связанной с нашими обсуждениями. Сумасшествие в том, что независимо от того, о чем мы говорим, его любимая поисковая система и навыки преобразования голоса в текст дают почти немедленный ответ.

Мое использование технологий распространяется даже на экономные подходы к покупкам, когда я могу отсканировать штрих-код интересующего продукта, чтобы узнать, доступен ли тот же продукт по более выгодной цене.

Это заставило меня задуматься, насколько легко я могу внедрить технологию штрих-кода в пользовательское приложение или компонент.

Поддержка штрих-кодов в мобильных приложениях Salesforce

Команда инженеров Salesforce знает, что штрих-коды — это быстрый и простой способ для пользователей мобильных устройств точно определить информацию. И штрих-коды UPC, и QR-коды существуют уже несколько десятилетий, и их использование не исчезает.

Используя мобильный клиент Salesforce и камеру на мобильном устройстве, штрих-коды можно легко интегрировать в приложение через BarcodeScanner API. Вот несколько распространенных вариантов использования для создания веб-компонента Lightning (LWC), который включает API BarcodeScanner:

• Выполните поиск в Salesforce, используя штрих-код в качестве первичного ключа.

• Автоматическое заполнение данных формы путем чтения контактных данных внутри QR-кода.

• Сделать внешний системный вызов с данными штрих-кода, например, отследить доставку через сторонний API.

В этой статье я рассмотрю первый вариант, когда отсканированный штрих-код выполняет поиск данных, хранящихся в Salesforce.

Salesforce DX и VS Code

Salesforce DX делает разработку на платформе Salesforce простой, открытой, интегрированной и совместной. С помощью Salesforce DX разработчики могут работать вместе и непрерывно работать над проектом. В сочетании с Visual Studio (VS) Code и Salesforce Extension Pack, работа с Salesforce становится плавной операцией.

Например, сочетание клавиш Command-Shift-P или Windows-Shift-P обеспечивает быстрый доступ к командам SFDX, подобным показанным ниже:

Увидев эти улучшения воочию, я взволнован возможностью использовать VS Code и Salesforce Extension Pack для создания чего-то для платформы Salesforce.

Случай использования счетчика калорий

Мои заядлые читатели могут вспомнить, что у меня есть возможность работать на 100% удаленно. Большую часть недели я делю наш дом со своей женой Николь и нашим маленьким сыном Финни.

Николь очень добросовестно относится к правильному питанию, и моя любовь к закускам является для нас деликатной темой. По сути, это хороший способ сказать, что Николь считает, что я слишком много перекусываю.

Я заметил, что каждая из этих закусок…

… имеет свой уникальный штрих-код.

Учитывая мой текущий сценарий, я решил создать веб-компонент Lightning (LWC) для мобильного приложения Salesforce под названием «Счетчик калорий». Это приложение будет использовать API BarcodeScanner для считывания UPC и предоставления количества калорий для закуски по моему выбору.

В долгосрочной перспективе я мог бы использовать эту логику для отслеживания потребления перекусов, помогая мне оставаться в допустимых пределах. Однако сейчас мы пойдем, прежде чем побежим.

Создание объекта Snack

Для простоты я создал объект Snack__c в Salesforce DX, который содержал следующие свойства:

• Название (уже существует в Salesforce) для описания закуски.

• Калории (как Calories__c), чтобы указать количество калорий на порцию.

• Штрих-код Значение (как UPC__c), которое служит уникальным ключом для каждой закуски.

Используя мои закуски (на фото выше), я мог быстро ввести ожидаемые данные для этого варианта использования:

Создание счетчика калорий

Понимая мою структуру данных и простой вариант использования, я наметил следующие шаги:

1. Создайте LWC для интеграции с BarcodeScanner API.

1. Если результат штрих-кода существует, используйте отсканированное значение для вызова контроллера Apex в Salesforce.

1. Контроллер Apex вызывает объект Snack__c, используя значение штрих-кода.

1. Если для отсканированного значения существует результат Snack__c, верните данные объекта в LWC.

1. LWC отображает данные об устройстве, делающем запрос.

Создание веб-компонента Lightning (LWC)

В VS Code новый LWC можно создать с помощью параметра SFDX: Создать веб-компонент Lightning. Я использовал название calorieCounter.

Во-первых, я хотел убедиться, что мой новый компонент можно будет использовать практически везде в экосистеме Salesforce. Я обновил calorieCounter.js-meta.xml, как показано ниже:

```javascript

53.0

истина

<цели>

lightning__AppPage

lightning__RecordPage

lightning__HomePage

API BarcodeScanner был добавлен в мой новый компонент с использованием следующей информации, содержащейся в документации по API BarcodeScanner:

```javascript

импортировать {getBarcodeScanner} из 'lightning/mobileCapabilities';

Затем я добавил следующий метод, чтобы определить, может ли клиент, использующий компонент, сканировать штрих-коды:

```javascript

связанныйCallback () {

this.myScanner = getBarcodeScanner();

если (this.myScanner == null || !this.myScanner.isAvailable()) {

this.scanButtonDisabled = истина;

Наконец, я добавил метод handleBeginScanClick() для захвата штрих-кода с камеры устройства. Затем, в случае успеха, результаты передаются контроллеру Apex в Salesforce, чтобы попытаться найти закуску. Я также добавил простую обработку ошибок.

```javascript

handleBeginScanClick (событие) {

// Сбросить scannedBarcode в пустую строку перед началом нового сканирования

this.scannedBarcode = '';

this.resultsFound = ложь;

this.snackFound = ложь;

// Убедитесь, что BarcodeScanner доступен, прежде чем пытаться его использовать

// Примечание: мы также отключаем кнопку "Сканировать", если нет сканера штрих-кода

если (это.myScanner?.isAvailable()) {

const scanOptions = {

Типы штрих-кодов: [

this.myScanner.barcodeTypes.UPC_E

это.myScanner

.beginCapture (параметры сканирования)

.тог((результат) => {

this.resultsFound = истина;

this.scannedBarcode = результат.значение;

this.scannedBarcodeType = result.type;

findSnackByUpcEquals({upcId: this.scannedBarcode})

.then((закуска) => {

this.snackFound = истина;

this.snackName = закуска.Имя;

this.snackCalories = закуска.Calories__c;

this.snackUPC = закуска.UPC__c;

эта.ошибка = не определено;

this.buttonLabel = 'Сканировать другой штрих-код закуски';

.catch((ошибка) => {

выбросить ошибку;

.catch((ошибка) => {

// Здесь обрабатывать отмену и непредвиденные ошибки

консоль.ошибка(ошибка);

this.snackFound = ложь;

this.buttonLabel = 'Сканировать штрих-код';

// Сообщаем пользователю, что мы столкнулись с чем-то непредвиденным

это.dispatchEvent(

новый ShowToastEvent({

title: 'Ошибка сканера штрих-кода',

сообщение:

'Возникла проблема со сканированием штрих-кода: ' +

JSON.stringify(ошибка) +

' Пожалуйста, попробуйте еще раз.',

вариант: 'ошибка',

режим: «липкий»

.finally(() => {

// Очистить, завершив захват,

// завершили ли мы успешно или произошла ошибка

this.myScanner.endCapture();

} еще {

// Сканер штрих-кода недоступен

// Не работает на оборудовании с камерой или какая-то другая контекстная проблема

// Сообщите пользователю, что ему нужно использовать мобильный телефон с камерой

это.dispatchEvent(

новый ShowToastEvent({

title: 'Сканер штрих-кода недоступен',

сообщение:

'Повторите попытку из приложения Salesforce на мобильном устройстве.',

вариант: 'ошибка'

Вот как выглядит шаблон пользовательского интерфейса простого компонента:

```javascript

<шаблон>

<div if:false={resultsFound} class="slds-align_absolute-center slds-text-align_center

slds-text-color_weak">

Нажмите кнопку «Сканировать штрих-код», чтобы открыть вид камеры сканера штрих-кода. Поместите штрих-код в поле зрения сканера, чтобы отсканировать его.