Как создать пользовательские карты (например, адаптивные карты) в веб-чате botframework с помощью React.js?

Я хотел бы создавать собственные карты (например, адаптивные карты, модель карусели карт героев) в веб-чате Botframework с использованием Reactjs. Можно ли создавать собственные карточки в веб-чате. Если да, то как я могу этого добиться. Любая помощь могла бы быть полезна.


person Thomas Martin    schedule 10.06.2020    source источник
comment
Эй, не уверен, смогу ли я доставить тебя сюда. Хотите создать собственное карточное решение с нуля? или вы хотите создавать свои собственные карты и использовать их?   -  person Tim Cadenbach    schedule 10.06.2020
comment
Привет, Тим, да, я хочу создать новые карточки для моего существующего бот-приложения, которое создано с использованием веб-чата и реагирует на js. Я ищу что-то вроде этого github.com/microsoft/BotFramework-WebChat/tree/master/samples/   -  person Thomas Martin    schedule 10.06.2020
comment
Что ж, создавать свои собственные карты и использовать их лучше всего начинать с дизайнера как такового. перейдите на www.adaptivecards.io/designer и поиграйте с ним, вы всегда можете увидеть сгенерированный JSON, чтобы увидеть, какие элементы управления на самом деле создают какой JSON. Когда вы научитесь создавать карты (я просто признал, что нет, извините! Пропустите, если да), вы можете начать думать о том, как правильно создать свои собственные. Я сделал множество примеров того, как использовать AdaptiveCards вне подобных команд. Вы определенно можете просто использовать технологию адаптивных карточек (скрипты js и т. Д.) Для своего собственного бота.   -  person Tim Cadenbach    schedule 10.06.2020
comment
AdaptiveCards как таковая - это технология с открытым исходным кодом, которую вы можете свободно использовать, а не технология Microsoft как таковая. К сожалению, у меня нет примеров для реакции, но это то, что я сделал для Vue.JS github.com / deejaytc / adaptivecards-vue, должно быть похоже   -  person Tim Cadenbach    schedule 10.06.2020
comment
Спасибо за предложение, но это не так, Тим. Мои существующие карты уже были созданы с использованием json. На самом деле я хочу знать, есть ли способ создать и настроить с помощью реакции. как будто есть пакет npm для адаптивных карт. Это возможно?   -  person Thomas Martin    schedule 10.06.2020
comment
Позвольте нам продолжить это обсуждение в чате.   -  person Thomas Martin    schedule 10.06.2020


Ответы (1)


Чтобы использовать AdaptiveCards внутри вашего собственного приложения с использованием любого JS-фреймворка, команда разработчиков карт сделала доступными 3 пакета:

Вы можете полностью реализовать функциональность Adaptive Cards в своих приложениях вне любой среды Microsoft.

Официальное руководство по этому поводу можно найти здесь: https://docs.microsoft.com/en-us/adaptive-cards/rendering-cards/getting-started

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

Также существует довольно много инструментов для различных JS-фреймворков, таких как Vue.JS, React или Flutter. Также веб-компоненты. Вы можете найти большинство инструментов здесь: https://www.madewithcards.io/tools/

person Community    schedule 10.06.2020
comment
Использование пакетов NPM также позволяет настраивать доступные элементы карты и элементы управления в соответствии с вашими потребностями, добавлять собственные стили и события. Однако карты, созданные для вашего собственного хоста, больше нигде не будут поддерживать настраиваемые элементы. - person Tim Cadenbach; 10.06.2020
comment
привет, у вас есть идеи по этому поводу stackoverflow.com/questions/62716870/ - person Thomas Martin; 07.07.2020