Backend (NodeJS) - Adaptivecard от JSON до HTML Parser - PullRequest
Новая
       86

Backend (NodeJS) - Adaptivecard от JSON до HTML Parser

0 голосов
/ 19 июня 2020

Чего я пытаюсь достичь?

  • Внутренняя служба NodeJS, которая получит запрос JSON адаптивной карты и выдаст проанализированный HTML ответ.

Почему я пишу эту услугу?

  • Существует требование отправлять электронные письма пользователям, а я не хочу написать отдельный шаблон HTML для электронной почты, когда у нас уже есть множество шаблонов адаптивных карточек JSON, которые можно использовать повторно.

Что я пробовал для серверной службы?

  • Создал nodejs сервис
  • Установленный пакет узла: npm установить адаптивные карты
  • Написал пример программы для синтаксического анализа JSON адаптивная карта к HTML.

Проблемы, с которыми я столкнулся:

  • Первая проблема, с которой я столкнулся: Функция * render () сообщила, что не было document , window и HTMLElement .

  • To исправить проблему, которую я установил * 10 49 * jsdom и создал объект DOM и назначил его global : 

    var jsdom = require("jsdom");
var JSDOM = jsdom.JSDOM;
var html = `<!DOCTYPE html>
    <html>
        <body id="cardAdaptive"></body>
    </html>
`;

const DOM = new JSDOM(html);
global.window = DOM.window;
global.document = DOM.window.document;
global.HTMLElement = DOM.window.HTMLElement;

  • Основная проблема : Программа работала нормально без любая проблема, но проанализированный HTML был неполным. См. изображения, прикрепленные ниже.

Программа синтаксического анализа (parser. js): 

var jsdom = require("jsdom");
var JSDOM = jsdom.JSDOM;
var html = `<!DOCTYPE html>
    <html>
        <body id="cardAdaptive"></body>
    </html>
`;

const DOM = new JSDOM(html);
global.window = DOM.window;
global.document = DOM.window.document;
global.HTMLElement = DOM.window.HTMLElement;

var AdaptiveCards = require("adaptivecards");

var card = {
    "type": "AdaptiveCard",
    "version": "1.0",
    "body": [
        {
            "type": "Image",
            "url": "http://adaptivecards.io/content/adaptive-card-50.png"
        },
        {
            "type": "TextBlock",
            "text": "Hello **Adaptive Cards!**"
        }
    ],
    "actions": [
        {
            "type": "Action.OpenUrl",
            "title": "Learn more",
            "url": "http://adaptivecards.io"
        },
        {
            "type": "Action.OpenUrl",
            "title": "GitHub",
            "url": "http://github.com/Microsoft/AdaptiveCards"
        }
    ]
};

// Create an AdaptiveCard instance
var adaptiveCard = new AdaptiveCards.AdaptiveCard();

// Set its hostConfig property unless you want to use the default Host Config
// Host Config defines the style and behavior of a card
adaptiveCard.hostConfig = new AdaptiveCards.HostConfig({
    fontFamily: "Segoe UI, Helvetica Neue, sans-serif"
    // More host config options
});

// Parse the card payload
adaptiveCard.parse(card);

// Render the card to an HTML element:
var renderedCard = adaptiveCard.render();

// And finally insert it somewhere in your page:
DOM.window.document.getElementById("cardAdaptive").appendChild(renderedCard);

// Print HTML string
console.log(DOM.serialize());

Программный вывод (HTML): 

<!DOCTYPE html>
<html>

<head></head>

<body id="cardAdaptive">

    <div class="ac-container ac-adaptiveCard"
        style="display: flex; flex-direction: column; justify-content: flex-start; box-sizing: border-box; flex: 0 0 auto; padding: 15px 15px 15px 15px; margin: 0px 0px 0px 0px;"
        tabindex="0">
        <div
            style="display: flex; align-items: flex-start; justify-content: flex-start; box-sizing: border-box; flex: 0 0 auto;">
            <img style="max-height: 100%; min-width: 0; max-width: 100%;" class="ac-image"
                src="http://adaptivecards.io/content/adaptive-card-50.png"></div>
        <div class="ac-horizontal-separator"
            style="height: 8px; overflow: hidden; margin-right: 0px; margin-left: 0px; flex: 0 0 auto;"></div>
        <div class="ac-textBlock"
            style="overflow: hidden; font-family: Segoe UI, Helvetica Neue, sans-serif; font-size: 14px; color: rgb(51, 51, 51); font-weight: 400; text-align: left; line-height: 18.62px; white-space: nowrap; text-overflow: ellipsis; box-sizing: border-box; flex: 0 0 auto;">
        </div>
        <div class="ac-horizontal-separator" style="height: 8px; overflow: hidden;"></div>
        <div>
            <div style="overflow: hidden;">
                <div class="ac-actionSet" style="display: flex; flex-direction: row; justify-content: flex-start;">
                    <button aria-label="Learn more" type="button"
                        style="display: flex; align-items: center; justify-content: center; flex: 0 1 auto;" role="link"
                        class="ac-pushButton style-default">
                        <div style="overflow: hidden; text-overflow: ellipsis; white-space: nowrap;"></div>
                    </button>
                    <div style="flex: 0 0 auto; width: 20px;"></div><button aria-label="GitHub" type="button"
                        style="display: flex; align-items: center; justify-content: center; flex: 0 1 auto;" role="link"
                        class="ac-pushButton style-default">
                        <div style="overflow: hidden; text-overflow: ellipsis; white-space: nowrap;"></div>
                    </button>
                </div>
            </div>
            <div></div>
        </div>
    </div>
</body>

</html>

Разобрано HTML выглядело так:

  • Текстовые поля и содержимое отсутствуют.

enter image description here

Но ожидалось что-то вроде этого:

enter image description here

Обновление

Я попытался установить hostConfig, как указано в этом ответе на переполнение стека и все примеры конфигураций хоста, упомянутые в этом github . Ни один из них не работал. Похоже, что поля с текстом всегда отсутствуют. Теперь я понятия не имею, как это сделать.

Мои спецификации для этой программы:

  • Ubuntu 18.04.4 LTS
  • Nodejs: v12.18.1
  • «адаптивные карты»: «^ 1.2.6»,
  • «jsdom»: «^ 16.2.2»,

Ссылки:

...