Простой и эффективный метод для Mendix Native Mobile

Недавно я попытался включить функцию «Сделать снимок» в свое собственное мобильное приложение с намерением сохранить изображение в виде строки с кодировкой base 64. Однако я столкнулся с проблемой, когда обнаружил, что существующее действие «Сделать снимок» в Mendix принимает изображение только как объект. Чтобы решить эту проблему, я решил настроить существующее действие JavaScript, включив в него необходимый код:

Вы можете загрузить модуль с Mendix Market Place здесь,
https://marketplace.mendix.com/link/component/205786

Введение:

Изучая различные онлайн-форумы, я наткнулся на несколько дискуссий по вопросу синхронизации нескольких объектов изображений в собственных приложениях. В этом сценарии пользователь посещает сайт и делает несколько изображений с помощью «TakePictureActivity». Однако процесс синхронизации может занять много времени, поскольку требуется время для синхронизации и сохранения изображений в базе данных.

Чтобы преодолеть эту проблему, мы разработали инновационное решение для синхронизации изображений в формате base64. Преобразовывая изображения в объекты base64 перед их фиксацией в базе данных, мы можем значительно сократить время синхронизации и сделать ее более эффективной даже в сетях с низкой пропускной способностью.

Оптимизированный подход:

Для каждого объекта «сайт» можно захватить несколько изображений и сохранить их в объекте «siteImages». В процессе захвата изображения будет выполняться TakePictureActivity, и изображения будут преобразованы в base64 с помощью следующего кода:

Объяснение кода:

Создал объект SiteImages и сохранил значение base64 в атрибуте Base64.

Создано новое действие JavaScript для обработки содержимого base64 после захвата изображения.

1. Добавлен новый параметр

2. Имя: imgObj,

3. Тип: объект

Использование библиотеки react-native-image-picker

1. Создание переменной imagebase64 и возврат сохраненного файла

2. Добавлен imgObj на функцию экспорта

export async function TakePicture_ImageToBase64_StopPhoto(picture, pictureSource, pictureQuality, maximumWidth, maximumHeight, imgObj) {
    // BEGIN USER CODE
    var imagebase64; // variable created
    try {
        const uri = await takePicture();
        if (!uri) {
            return false;
        }
        return storeFile(picture, uri, imagebase64); // return store files
    }
    catch (error) {
        if (error === "canceled") {
            return false;
        }
        throw new Error(error);
    }
}

1. Распечатайте base64, работающий в журнале консоли, и ответ на консоль и сохраните его в созданной переменной imagebase64 и проверьте ответ, когда снимок не сделан.

2. Вместо того, чтобы возвращать неопределенную переменную, замененную ответом

3. Для обработки ошибок.

getPictureMethod()
    .then(method => method(options, (response) => {
        console.log('base64 working')
        console.log(response); // get response as base64
        //Check empty on response when the picture is not taken.
        if (response.assets == undefined) {
            return resolve(response);
        } else {
            imagebase64 = response.assets[0].base64;
        }
        if (response.didCancel) {
            return resolve(response); //returns the response of base64
            // return resolve(undefined);
        }
        if (nativeVersionMajor === 2) {
            response = response;
            if (response.error) {
                const unhandledError = handleImagePickerV2Error(response.error);
                if (!unhandledError) {
                    return resolve(undefined);
                }
                return reject(new Error(response.error));
            }
            return resolve(response);
        }
        response = response;
        if (response.errorCode) {
            handleImagePickerV4Error(response.errorCode, response.errorMessage);
            return resolve(undefined);
        }
        //Empty check undefined condition for the asset object to prevent system admin error
        if (response.assets == undefined) {
            return resolve(response);
        } else {
            return resolve(response.assets[0].uri);
        }
    }))
    .catch(error => reject(error));
});
}

1. Задайте точное имя атрибута, используемое в объекте $siteImages.

Например: Base64

imageObject.set(“Name”, filename);
imageObject.set(“Base64”, imagebase64); // set attribute value eg:Base64

Включите base64 как true, чтобы включить его.

return {
    mediaType: "photo",
    includeBase64: true, // if not needed Base64 false
    function getOptionsV4() {
    const { maxWidth, maxHeight } = getPictureQuality();
    return {
        mediaType: "photo",
        includeBase64: true, // if not needed Base64 false
        maxWidth,
        maxHeight
    };
}

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

Сущность siteImages используется для создания списка значений imageBase64, которые являются единственными синхронизируемыми данными. Когда дело доходит до фиксации объекта imageBase64 на сервере, мы добавили важный шаг в процесс. Перед фиксацией запускается обработчик событий для преобразования значений imageBase64 обратно в изображения, которые затем фиксируются в объекте siteImages и связываются с соответствующими сайтами.

Наконец, вышеупомянутая методология оптимизирует процесс синхронизации больших файлов изображений, гарантируя их максимально эффективную передачу даже в условиях слабой сети (2G или 3G). Это значительно сократит время, необходимое для синхронизации этих больших файлов.

Читать далее









От издателя —

Если вам понравилась эта статья, вы можете найти больше на нашей странице Medium. Для просмотра отличных видео и прямых трансляций вы можете посетить MxLive или наше сообщество Страница YouTubee.

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

Заинтересованы в более активном участии в нашем сообществе? Присоединяйтесь к нам в нашем Канале сообщества Slack.