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

Итак, какие технологии используются при создании этого приложения?

  1. Чтобы создать мобильное приложение, которое можно развернуть на iOS или Android, я использовал службу Visual Builder из стека Oracle Cloud. Эта служба предоставляет возможность создавать веб-приложения, а также мобильные приложения с помощью декларативного подхода с возможностью введения кода для любых сложных требований.
  2. Чтобы сохранить захваченное изображение и использовать его для последующих приложений, я использовал службу Oracle Content & Experience, которая поставляется с богатым набором API для приема контента, ссылки на общедоступный документ генерация и т. д. С точки зрения архитектуры предприятия имеет смысл хранить изображения с метаданными в хранилище контента, поэтому я решил заархивировать изображение с помощью этой службы как часть процесса сборки мобильного приложения.
  3. Самый важный бит - это использование библиотеки / API, которые могут обрабатывать изображение или OCR и отправлять обратно интересующую нас информацию. Для этих целей я использовал библиотеку ALPR с открытым исходным кодом. API уже доступны, если вы хотите ускорить отслеживание своего приложения.
  4. Это необязательно. Если вы хотите проверить полученную информацию, мы можем настроить несколько API с использованием автономной базы данных Oracle с некоторыми данными для завершения процесса проверки в приложении.

Вот как бы выглядела Архитектура:

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

Давайте посмотрим, как мы можем создать это приложение:

Шаг 1. Создайте мобильное приложение в Visual Builder с базовым шаблоном и создание службы с конечными точками API

PR для быстрой сборки мобильного приложения с помощью Visual Builder

Шаг 2. Определите конечные точки API

a) Создайте API загрузки службы документов при создании подключения API на вкладке службы, как на шаге 1.

Конечная точка API: https://contentserviceurl/documents/api/1.2/files/data

Обязательно укажите MediaType на вкладке «Запрос» конечной точки API как multipart / form-data. Это сделает экран серым, что означает, что мы не можем протестировать API, в отличие от большинства типов запросов application / json.

Поэтому нам нужно убедиться, что мы предоставили образец объекта JSON ответа на вкладке «Ответ». Вот как будет выглядеть образец ответа, когда изображение будет загружено в службу содержания.

{
“createdBy”: {
“displayName”: “Service Account — The Fort”,
“id”: “U8F8D928598D6E47D74E87444ECDF285B9A9”,
“loginName”: “svc_the_fort”,
“type”: “user”
},
“createdTime”: “2019–02–08T04:37:21Z”,
“errorCode”: “0”,
“errorKey”: “!csServiceStatusMessage_checkin,SOMETHING00006755310000000014”,
“errorMessage”: “Successfully checked in content item ‘SOMETHING00006755310000000014’.”,
“id”: “D29D60778C6832155A81F450662CF1C8848548F2BAE5”,
“mimeType”: “image/png”,
“modifiedBy”: {
“displayName”: “Service Account — The Fort”,
“id”: “U8F8D928598D6E47D74E87444ECDF285B9A9”,
“loginName”: “svc_the_fort”,
“type”: “user”
},
“modifiedTime”: “2019–02–08T04:37:21Z”,
“name”: “44.png”,
“ownedBy”: {
“displayName”: “Vijay Kumar Yenne”,
“id”: “U116511163DB94D14727824C38C87F1C7872”,
“loginName”: “[email protected]”,
“type”: “user”
},
“parentID”: “F51FC2867E31B155EC90CF3C0FF2A9973DA95D8877B1”,
“size”: “2446908”,
“type”: “file”,
“version”: “1”
}’

б). Создайте API ссылки URL общедоступного документа: https://contentserviceurl/documents/api/1.2/publiclinks/file/{fileid}

Обратите внимание, что существует параметр запроса «fileId», который необходимо передать во время выполнения, чтобы API вернул требуемые результаты.

Пример запроса JSONson:

{
“assignedUsers”: “@everybody”,
“linkName”: “MyFileLinkOne”,
“role”: “downloader”
}

Пример тела ответа:

{
“assignedUsers”: “@everybody”,
“createdTime”: “2019–02–14T14:46:25Z”,
“errorCode”: “0”,
“id”: “D50578746CE232FB46B76698F5BF6F1CF778CFB9D0A2”,
“lastModifiedTime”: “2019–02–14T14:46:25Z”,
“linkID”: “LD4D67DBC6E8DAF1FB911A72202B90F7D301E87CE579”,
“linkName”: “MyFileLinkDuplicate”,
“ownedBy”: {
“displayName”: “Vijay Kumar Yenne”,
“id”: “U116511163DB94D14727824C38C87F1C7872”,
“loginName”: “[email protected]”,
“type”: “user”
},
“role”: “downloader”,
“type”: “publiclink”
}

c) Создайте сервисное соединение для OCR / распознавания изображений.

Вы можете создать учетную запись на https://cloud.openalpr.com, получить ключ API и использовать указанную ниже конечную точку API для передачи изображения, захваченного через мобильное устройство:

https://api.openalpr.com/v2/recognize_url?image_url={{image_url}}&secret_key= {{secret_key}}&recognize_vehicle=0&country={{country}}&state&return_image=0&topn=10&prewarp

Используемая конечная точка API: https://api.openalpr.com/v2

Метод API: recognize_url

Шаг 3. Добавьте функцию пользовательского интерфейса, которая открывает камеру, захватывает изображение, вызывает API и отображает информацию.

а) Перейдите в мобильное приложение и откройте домашнюю стартовую страницу.

б) Перетащите кнопку на заполнитель содержимого из каталога компонентов и измените имя кнопки.

в) Создать событие при нажатии кнопки «сканировать автомобиль». Перейдите на вкладку «События» и выберите событие «ojAction», чтобы создать привязку и сгенерировать связанную с ней цепочку действий.

г) Отбросьте действие «Сделать фото» из каталога действий после стартового события. Это позволит приложению открыть камеру на устройстве и сделать снимок.

e) Изображение, захваченное действием камеры, не может быть напрямую сопоставлено Content API, поскольку API ожидает, что изображение будет в двоичном формате. Кроме того, API содержимого для загрузки ресурсов структурирован так, чтобы принимать только типы содержимого multipart / form-data.

Итак, давайте посмотрим, как мы можем управлять этой интеграцией контента с помощью Visual

Выберите «Вызов функции модуля» из каталога действий и поместите его после действия «Фото» на холсте. Эта функция предоставляет возможность вызывать пользовательский код javascript.

Нажмите «Выбрать функцию модуля» и создайте функцию страницы.

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

Перейдите на главную начальную страницу и откройте вкладку JS, чтобы отредактировать только что созданную функцию и добавить требуемый код Javascript.

Замените всю страницу JS приведенным ниже кодом JS:

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

define([], function() {
‘use strict’;
var PageModule = function PageModule() {};
/**
*
* @param {String} arg1
* @return {String}
*/
PageModule.prototype.imageCheckin = function(arg1) {
return new Promise(function(resolve, reject) {
console.log(“imagePath=” + arg1);
convertFilePathToBase64(arg1, function(base64Img) {
console.log(“after encoding :” + base64Img);
resolve(base64Img);
}, function(error) {
console.log(error);
reject(“The error is: “ + error);
});
});
};
function convertFilePathToBase64(filePath, callback) {
window.resolveLocalFileSystemURL(filePath, gotFile, fail);
function fail(e) {
alert(‘Cannot find requested file’);
}
function gotFile(fileEntry) {
fileEntry.file(function(file) {
var reader = new FileReader();
reader.onloadend = function() {
console.log(“Successful file read: “ + this.result);
var base64String = reader.result.split(‘,’).pop();
var contentType = “image/jpeg”;
var sliceSize = 512;
var byteCharacters = atob(base64String);
var byteArrays = [];
for (var offset = 0; offset < byteCharacters.length; offset +=
sliceSize) {
var slice = byteCharacters.slice(offset, offset +
sliceSize);
var byteNumbers = new Array(slice.length);
for (var i = 0; i < slice.length; i++) {
byteNumbers[i] = slice.charCodeAt(i);
}
var byteArray = new Uint8Array(byteNumbers);
byteArrays.push(byteArray);
}
var uniqueFilename = Math.floor(Math.random() * 1000);
var blob = new Blob(byteArrays, {
type: contentType
});
blob.name = uniqueFilename + “.jpg”;
callback(blob);
};
reader.readAsDataURL(file);
});
}
}
return PageModule;
});

Затем мы помещаем «Действие конечной точки останова вызова» после модуля вызова в цепочке действий и выбираем конечную точку, просматривая соединение, которое мы создали в начале. Для проверки изображений мы выбираем конечную точку post / files / data.

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

{
“jsonInputParameters”: “{{‘{ \”parentID\”: \”F51FC2867E31B155EC90CF3C0FF2A9973DA95D8877B1\” }’}}”,
“primaryFile”: “{{$chain.results.callModuleFunction1}}”
}

«ParentID» - это «идентификатор папки», в котором вы хотите хранить изображения. Мы могли бы вызвать другой API, чтобы создать папку во время выполнения и получить ее. Однако для этого приложения мы решили сохранить изображения в одной папке, которая уже создана для нас. Вы можете войти в пользовательский интерфейс содержимого и перейти к папке, чтобы получить folderId из URL-адреса браузера, который здесь требуется.

PrimaryFile - это возвращаемое значение из callModuleFunction, которую мы вызвали перед остальным вызовом.

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

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

{
“assignedUsers”: “@everybody”,
“linkName”: “{{$chain.results.callRestEndpoint2.body.id}}”,
“role”: “downloader”
}

Нам нужно передать ImageURL, который необходимо создать во время выполнения, поскольку выполнение API выше возвращает только «linkId», а не URL-адрес. Итак, для этой цели мы можем создать еще один moduleFunction, который создает для нас URL.

Как и ранее, мы создадим функцию с именем getAssetURL и передадим в эту функцию linkId и docName из результатов API.

PageModule.prototype.getAssetURL = function(linkId,docId,docName){
var docUrl = “https://fort-cec-apacanzset01.cec.ocp.oraclecloud.com/documents/link/"+linkId+"/file/"+docId+"/_"+docName;
return docUrl;
};

Сопоставьте остальные результаты вызова из публичной ссылки и проверки изображения с параметрами ввода функции.

Создайте переменную потока на уровне домашней страницы и назначьте вывод callModuleFunction, которая создает URL-адрес изображения, этой переменной, отбросив действие assignVariable в потоке действий.

Как только URL-адрес назначен, мы можем перетащить действие навигации в поток, чтобы мы могли отображать извлеченные данные из изображения на новой странице сведений.

Выберите целевую точку на только что созданной странице.

Откройте страницу сведений и перетащите представление списка в заполнитель, который позволяет создать страницу с помощью мастера.

Щелкните Добавить данные, чтобы заполнить подробности.

Это все, что требуется для приложения. Теперь мы можем настроить приложение для развертывания на устройстве (iOS или Android).

Ознакомьтесь с этими двумя статьями для профиля сборки iOS и Android:



Создание мобильного приложения для iOS на базе Oracle Autonomous Visual Builder Cloud Service (VBCS)
Новый выпуск VBCS 2.0 ускоряет разработку мобильных приложений с помощью декларативного метода перетаскивания, в то время как… medium.com





Советы по настройке собственной сборки мобильного приложения Visual Builder
Несколько советов по правильной настройке сборки мобильного приложения. Конфигурация собственной сборки мобильного приложения предоставляется как часть приложения… blogs.oracle.com



После настройки профиля нажмите кнопку Play и создайте приложение, которое генерирует apk или ipa, которые можно установить на ваше устройство.

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