Мобильные устройства прочно вошли в нашу жизнь. Конечно, это может быть хорошо и плохо. Однако для целей этой статьи я сосредоточусь на том, как мобильные устройства обогащают нашу жизнь.
На самом деле, когда мой сын-старшекурсник Эрик приезжает к нам, наши разговоры часто провоцируют Эрика использовать свой телефон для поиска и проверки информации, связанной с нашими обсуждениями. Сумасшествие в том, что независимо от того, о чем мы говорим, его любимая поисковая система и навыки преобразования голоса в текст дают почти немедленный ответ.
Мое использование технологий распространяется даже на экономные подходы к покупкам, когда я могу отсканировать штрих-код интересующего продукта, чтобы узнать, доступен ли тот же продукт по более выгодной цене.
Это заставило меня задуматься, насколько легко я могу внедрить технологию штрих-кода в пользовательское приложение или компонент.
Поддержка штрих-кодов в мобильных приложениях 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), которое служит уникальным ключом для каждой закуски.
Используя мои закуски (на фото выше), я мог быстро ввести ожидаемые данные для этого варианта использования:
Создание счетчика калорий
Понимая мою структуру данных и простой вариант использования, я наметил следующие шаги:
- Создайте LWC для интеграции с BarcodeScanner API.
- Если результат штрих-кода существует, используйте отсканированное значение для вызова контроллера Apex в Salesforce.
- Контроллер Apex вызывает объект Snack__c, используя значение штрих-кода.
- Если для отсканированного значения существует результат
Snack__c, верните данные объекта в LWC.
- LWC отображает данные об устройстве, делающем запрос.
Создание веб-компонента Lightning (LWC)
В VS Code новый LWC можно создать с помощью параметра SFDX: Создать веб-компонент Lightning. Я использовал название calorieCounter.
Во-первых, я хотел убедиться, что мой новый компонент можно будет использовать практически везде в экосистеме Salesforce. Я обновил calorieCounter.js-meta.xml, как показано ниже:
```javascript
<цели>
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">
Нажмите кнопку «Сканировать штрих-код», чтобы открыть вид камеры сканера штрих-кода. Поместите штрих-код в поле зрения сканера, чтобы отсканировать его.
