Блог

Я совершенно новичок в разработке приложений такого типа, так что потерпите меня, пожалуйста 🙂 Мне трудно разобраться в том, что с этим возможно, а что нет, и как правильно настроить его для наших нужд. Документы Microsoft являются… Я думаю, что слово «некачественный» — это подходящее слово, поэтому я обращаюсь к вам, большое сообщество.

Моя ситуация: нам нужно приложение с 3 вкладками, поиском, набором персонала и профилем, а также простым ботом (на данный момент). Мы делаем это в React для вкладок и узла для бота, как это обычно бывает во всех руководствах / примерах, которые я видел.

Мы используем AWS Amplify authentication, поэтому она охватывает наши маршруты в компоненте приложения, как показано на следующем скриншоте.

Этот каркас был сгенерирован расширением Microsoft Teams Toolkit VSCode, которое по сути является App Studio, но построено как расширение. Я нахожу структуру кода очень чистой и очень близкой к стандартной структуре, которую я получил бы, скажем, из проектов create-react-app.

Эти три маршрута, поиск, профиль и набор персонала, являются отдельной вкладкой, как показано на скриншоте манифеста ниже

Редактировать: На самом деле вы не можете увидеть это здесь… экспортируйте значение по умолчанию с помощью Authenticator (App) в нижней части App.tsx, где это происходит… Мой плохой 🙂

Я также настраиваю туннели ngrok для вкладок и бота (которые вы здесь не видите), и я могу загрузить development.zip в команды. Все три вкладки отображаются и указывают на их соответствующее содержимое. Аутентификация с помощью Amplify также работает, поэтому, если я вошел в систему, я могу видеть содержимое вкладок, если я вышел из системы, я получаю форму входа, отображаемую на странице. В принципе, насколько я понимаю, каждая вкладка указывает на маршрут, который, в свою очередь, отображает соответствующий компонент. Учитывая библиотеку microsoft-teams-sdk, я могу получить доступ к контексту между вкладками, чтобы знать, откуда я пришел, где я нахожусь и т.д.

Однако, несмотря на то, что содержимое отображается нормально в Teams, как только я захожу на localhost: 3000 / поиск или localhost: 3000 / профиль и т.д., Я не вижу никакого содержимого. Однако запуск npm start для вкладок выдает мне это сообщение:

И это мой локальный хост, открытый: Как вы можете видеть, нет содержимого. F12 для открытия консоли также не показывает ошибок.

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

Учитывая, что я немного боролся, чтобы попытаться заставить это работать, я попробовал другой генератор, Yeoman for Teams.

Я обнаружил, что строительные леса были очень запутанными, и я не смог найти корневой компонент, который вы получили бы в «стандартном» приложении React, чтобы обернуть мой компонент аутентификации Amplify. Однако в случае с Yeo у каждого компонента .tsx была соответствующая страница содержимого .html.

При локальном запуске с помощью ngrok-serve (включенный скрипт в их package.json) вкладки были доступны на localhost: 3000 / search и т.д.

Это первое приложение Teams, которое мы пытаемся собрать. Естественно, вы идете и смотрите на то, что там есть. Я запускаю приложение GitHub, Jira Cloud one, Quickbooks и т.д. Все они имеют несколько вкладок. Я возьму GitHub в качестве примера.

Каждая из этих вкладок, по крайней мере, для меня, похоже, указывает на маршрут SPA на вкладке домена signle 1 -> github.com/teamsapp/assigned , Вкладка 2 -> github.com/teamsapp/created и т.д.

Как они это делают? Я неправильно это понимаю? Должен ли React SPA находиться на отдельной вкладке для правильной работы, и на этой отдельной вкладке отображается приложение, в то время как сама маршрутизация строго обрабатывается приложением react?

Я склонен думать, что это не так, поскольку многие приложения имеют несколько вкладок, которые взаимодействуют между собой, например, вы нажимаете на элемент списка на вкладке 1, и он заполняет что-то на вкладке 2, как, например, приложения GitHub или Jira Cloud.

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

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

Спасибо!

По идее, это, безусловно, возможно для прямого просмотра, но вам нужно знать о microsoftTeams.initialize(); строке. microsoftTeams Объект доступен только, когда вы находитесь на вкладке Teams — в автономном режиме он не будет заполнен, и поэтому .initialize() операция завершится неудачей. На самом деле, если вы обращаетесь к контексту внутри (что вы, вероятно, хотите сделать), это завершится неудачей. Попробуйте поставить точку останова в этой строке, и она должна завершиться ошибкой с нулевой ссылкой.

Обновление: более внимательно изучив ваш код, вы могли бы попробовать поместить microsoftTeams.initialize(); в свою if (window.parent === window.self) проверку, что также должно помочь в вашем случае.