Создание и запуск первого приложения Microsoft TeamsBuild and run your first Microsoft Teams app

Вы можете перейти непосредственно к разработке Microsoft Teams, создав личную вкладку со значком "Hello, World!".You can jump right into Microsoft Teams development by building a personal tab that displays "Hello, World!"

1. Создайте проект приложения.1. Create your app project

Используйте набор средств Microsoft Teams в Visual Studio Code, чтобы настроить первый проект приложения.Use the Microsoft Teams Toolkit in Visual Studio Code to set up your first app project.

  1. В Visual Studio Code выберите Microsoft Teams на левой панели активности и выберите создать приложение Teams.
  2. При появлении соответствующего запроса войдите в систему с помощью учетной записи разработчика Microsoft 365.When prompted, sign in with your Microsoft 365 development account.
  3. На экране добавить возможности выберите вкладка Далее.On the Add capabilities screen, select Tab then Next. Снимок экрана, на котором показано, как настроить проект приложения с помощью набора инструментов Visual Studio Code Teams.
  4. Введите имя приложения Teams.Enter a name for your Teams app. (Это имя приложения по умолчанию, а также имя каталога проекта приложения на локальном компьютере.)(This is the default name for your app and also the name of the app project directory on your local machine.)
  5. Установите флажок только для личной вкладки и в нижней части экрана нажмите кнопку Готово , чтобы настроить свой проект.Check only the Personal tab option and select Finish at the bottom of the screen to configure your project.

2. Изучите важные компоненты проекта приложения2. Understand important app project components

После того как набор инструментов настроит свой проект, у вас будут компоненты для создания базовой вкладки "личные" для Teams.Once the toolkit configures your project, you have the components to build a basic personal tab for Teams. Каталоги и файлы проекта отображаются в области обозревателя Visual Studio Code.The project directories and files display in the Explorer area of Visual Studio Code.

Снимок экрана, на котором показаны файлы проекта приложения для вкладки _OL_QUOTE_PLACEHOLDER_личные_OL_QUOTE_PLACEHOLDER_ в Visual Studio Code.

Формирование шаблонов приложенийApp scaffolding

Набор средств автоматически создает формирование шаблонов в src каталоге на основе возможностей, добавленных во время установки.The toolkit automatically creates scaffolding for you in the src directory based on the capabilities you added during setup.

Например, при создании вкладки во время установки, App.js файл в src/components каталоге важен, так как он обрабатывает инициализацию и маршрутизацию приложения.If you create a tab during setup, for example, the App.js file in the src/components directory is important because it handles the initialization and routing of your app. Он вызывает пакет Microsoft Teams SDK для установления связи между приложением и Teams.It calls the Microsoft Teams SDK to establish communication between your app and Teams.

Идентификатор приложенияApp ID

Идентификатор приложения Teams необходим для настройки приложения с помощью App Studio.Your Teams app ID is needed to configure your app with App Studio. Вы можете найти идентификатор в teamsAppId объекте, который находится в package.json файле проекта.You can find the ID in the teamsAppId object, which is located in your project's package.json file.

3. Построение и запуск приложения3. Build and run your app

В течение этого времени вы создадите и запустите свое приложение локально.In the interest of time, you'll build and run your app locally.

(Эти сведения также доступны в наборе инструментов README .)(This information is also available in the toolkit README.)

  1. В терминале перейдите к корневому каталогу проекта приложения и запустите его npm install .In a terminal, go to the root directory of your app project and run npm install.
  2. Выполните команду npm start .Run npm start.

По завершении компиляции успешно выполняется.Once complete, there's a Compiled successfully! сообщение в терминале.message in the terminal. Ваше приложение запущено https://localhost:3000 .Your app is running on https://localhost:3000.

4. Загрузка неопубликованных ваше приложение в Teams4. Sideload your app in Teams

Ваше приложение готово к тестированию в Teams.Your app is ready to test in Teams. Для этого необходимо иметь учетную запись, позволяющую выполнять загрузку неопубликованных приложений.To do this, you must have an account that allows app sideloading. (Если вы не знаете этого, Узнайте о том, как получить учетную запись разработки Teams.)(If you aren't sure you have that, learn about getting a Teams development account.)

Совет

Прежде чем приступить к работе с неопубликованным приложением, проверьте наличие проблем с помощью функции проверки в App Studio, которая включена в набор средств.Before sideloading your app, check for issues using the validation feature in App Studio, which is included in the toolkit. Чтобы успешно Загрузка неопубликованных приложение, необходимо исправить ошибки.Errors must be fixed to successfully sideload the app.

  1. В Visual Studio Code нажмите клавишу F5 , чтобы запустить веб-клиент Teams.In Visual Studio Code, press the F5 key to launch a Teams web client.
  2. Чтобы отобразить содержимое приложения в Teams, укажите, что приложение работает ( localhost ) является надежным:To display your app content in Teams, specify that where your app is running (localhost) is trustworthy:
    1. Откройте новую вкладку в том же окне браузера (Google Chrome по умолчанию), которое открывалось после нажатия клавиши F5.Open a new tab in the same browser window (Google Chrome by default) which opened after pressing F5.
    2. Перейдите к https://localhost:3000/tab странице и перейдите к ней.Go to https://localhost:3000/tab and proceed to the page.
  3. Вернитесь в Teams.Go back to Teams. В диалоговом окне нажмите кнопку Добавить , чтобы установить приложение.In the dialog, select Add for me to install your app. Снимок экрана, на котором показан пример приложения _OL_QUOTE_PLACEHOLDER_Hello, World!_OL_QUOTE_PLACEHOLDER_, которое работает в Teams.

Поздравляем 🎉!🎉 Congratulations! Ваше приложение работает в Teams.Your app is running in Teams.

Следующий шагNext step

Разверните вкладку Персональная личная и создайте другой тип приложения Teams.Expand on the personal tab you just created or build another type of Teams app.