연습 - Teams 탭 앱에 채팅 추가

10분

이 연습에서는 탭이 포함된 새 Teams 앱 프로젝트를 만듭니다. Visual Studio Code용 Teams 도구 키트를 사용하고 Teams JavaScript 클라이언트 라이브러리를 사용하여 탭에 채팅을 통합하는 방법을 알아봅니다.

참고

이 모듈의 연습에서는 Teams 도구 키트 v5.0.0을 사용합니다.

먼저 프로젝트를 만듭니다.

Visual Studio Code를 엽니다.
활동 모음에서 Microsoft Teams 아이콘을 선택하여 Teams 도구 키트 창을 엽니다.
Teams 도구 키트 창에서 새 앱 만들기를 선택합니다.
옵션에서 탭을 선택합니다.

프로젝트 스캐폴딩 UI의 앱을 보여 주는 스크린샷

다음으로 Fluent UI를 사용하여 React를 선택합니다.
프로그래밍 언어 메뉴에서 JavaScript를 선택합니다.
작업 영역 폴더 메뉴에서 기본 폴더를 선택합니다.
애플리케이션 이름에 채팅이 있는 Teams 탭을 입력하고 Enter 키를 선택합니다.

Teams 도구 키트는 프로젝트 및 소스 코드 파일을 만듭니다. Visual Studio Code의 탐색기에서 프로젝트 및 소스 코드 파일을 볼 수 있습니다.

Teams 도구 키트에서 만든 프로젝트 및 소스 코드 파일의 스크린샷

이제 처음으로 탭을 실행합니다.

작업 표시줄에서 디버그 아이콘을 선택합니다.
실행 및 디버그에서 앱을 디버그하는 데 사용할 브라우저로 Chrome 또는 Edge를 선택합니다. 그런 다음 실행 단추를 선택하거나 F5 키를 선택하여 디버그 세션을 시작합니다.

참고

이 연습을 마친 후 디버그 세션을 닫아야 합니다. Visual Studio Code에서디버깅 중지실행을> 선택하거나 Shift+F5를 선택하여 디버그 세션을 중지합니다. 또는 애플리케이션이 시작될 때 열린 브라우저를 간단히 닫을 수 있습니다.

참고

Microsoft 365 테넌트에서 아직 로그인하지 않은 경우 프롬프트가 나타납니다. 로그인을 선택하고 Microsoft 365 테넌트를 사용하여 Teams 도구 키트에 로그인하고 인증하는 단계를 완료합니다.

Teams 도구 키트는 필요한 모든 구성 요소를 배포, 구성 및 시작합니다. 도구 키트는 브라우저 창도 열고 Microsoft Teams 웹 사이트로 이동합니다.

Teams 앱 설치 대화 상자에서 추가 단추를 선택하여 앱을 개인 앱으로 설치합니다.

Teams에 추가되도록 로드된 앱의 스크린샷.

모두 완료되었습니다. 앱이 설치되고 Microsoft Teams에서 실행되며 앱에서 사용자 환경을 개선할 준비가 된 것입니다.

초기 형식의 앱 스크린샷.

다음으로, 탭에 채팅을 통합합니다.

Visual Studio Code에서 src/components/Tab.jsx 파일을 엽니다. 파일의 내용을 다음 코드 조각으로 바꿉니다.

import { useContext } from "react"; 
import { TeamsFxContext } from "./Context"; 
import { Button } from "@fluentui/react-northstar";
import "./sample/Welcome.css";   

export default function Tab() { 
  const { themeString } = useContext(TeamsFxContext);  
  return ( 
    <div className={themeString === "default" ? "" : "dark"}> 
      <div className="welcome page"> 
        <div className="narrow page-padding">
          <h1 className="center">Chat</h1> 
          <div className="sections"> 
            <div className="center"> 
              <Button primary>Start Chat</Button> 
            </div> 
          </div> 
        </div> 
      </div> 
    </div> 
  ); 
}

파일을 저장하고 열려 있는 브라우저 창에서 변경 내용을 봅니다.

코드 변경 내용을 보려면 브라우저를 새로 고칠 필요가 없습니다. Teams 도구 키트에는 앱이 실행되는 동안 변경 내용을 적용하는 핫 다시 로드 기능이 있습니다.

이제 채팅 시작 단추 뒤에 있는 기능을 구현해 보겠습니다.

Visual Studio Code로 돌아갑니다. src/components/Tab.jsx 파일의 파일 맨 위에 있는 Teams JavaScript 클라이언트 라이브러리에서 앱, 사람 및 채팅 기능을 가져옵니다.

import { app, people, chat } from "@microsoft/teams-js";

함수에서 Tab 상수 선언 후에 themeString 라는 비동기 함수 startChat를 만듭니다.

const { themeString } = useContext(TeamsFxContext); 
const startChat = async () => { 
    await app.initialize(); 
    const context = await app.getContext(); 
    if (people.isSupported() && chat.isSupported()) { 
        const peoplePickerResults = await people.selectPeople();
        const users = peoplePickerResults.map(p => p.email); 
        await chat.openGroupChat({ 
            users, 
            topic: "The Dream Team", 
            message: `Teamwork makes the dream work! Let's use this chat to collaborate on our project. Chat created using TeamsJS in the ${context.app.host.name} ${context.app.host.clientType} client.`, 
        }); 
      } 
  } 
return ();

마지막으로 단추에 onClick 이벤트 처리기를 추가하여 사용자가 단추를 선택할 때 함수를 실행 startChat() 합니다.

<Button primary onClick={() => startChat()}>Start Chat</Button>

파일을 저장하고 열려 있는 브라우저 창을 봅니다.

채팅 시작 단추를 선택하여 사용자 선택 대화 상자를 엽니다. 검색 상자에 이름을 입력하여 하나 이상의 사용자를 검색한 다음 선택합니다. 완료 단추를 선택하여 선택을 확인합니다.

탭 앱 및 Teams의 사용자 선택기 스크린샷.

드림 팀이라는 이름으로 Microsoft Teams 채팅의 새 초안이 만들어집니다. JavaScript에서 설정한 텍스트가 메시지 작성 상자에 표시됩니다. Teamwork는 꿈의 작업을 수행합니다. 이 채팅을 사용하여 프로젝트에서 공동 작업해 보겠습니다. Teams 웹 클라이언트에서 TeamsJS를 사용하여 만든 채팅입니다.

그룹 채팅의 작성 영역에 있는 초안 메시지의 스크린샷

메시지를 보내 채팅을 초기화합니다.

보낸 채팅의 스크린샷.

채팅이 만들어집니다. 사용자 선택 대화 상자에서 선택한 참가자가 채팅에 추가되고 채팅 제목이 업데이트됩니다.

연습 - Teams 탭 앱에 채팅 추가

피드백