연습 - Microsoft Teams 탭 앱 빌드

완료됨

이 단원에서는 Visual Studio Code용 Teams 도구 키트 확장을 사용하여 Microsoft Teams용 탭 앱을 만듭니다.

참고

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

Teams 탭 앱 만들기

1. Visual Studio Code를 엽니다.

2. 사이드바에서 Microsoft Teams 아이콘을 선택하여 TEAMS 도구 키트 패널을 엽니다.

3. 새 앱 만들기를 선택한 다음, 탭을 선택합니다.

   

4. 사용 가능한 옵션 목록에서 기본 탭 을 선택합니다.

   

5. 프로그래밍 언어의 경우 JavaScript를 선택합니다.

6. 작업 영역 폴더 메뉴에서 기본 폴더를 선택합니다. Teams 도구 키트는 프로젝트를 이 폴더로 스캐폴드합니다.

7. 애플리케이션 이름에 CustomerTicketingTool을 입력합니다.

   

   모든 폴더와 파일이 스캐폴드되면 알림이 나타납니다.

프로젝트를 성공적으로 스캐폴딩한 후 Visual Studio Code의 새 인스턴스가 새 프로젝트에 열립니다.

탐색기 패널에서 src 폴더에는 앱의 소스 코드가 포함됩니다. src 폴더 아래의 모든 폴더는 브라우저 코드와 관련이 있으며 프런트 엔드 앱의 진입점 역할을 합니다. src 폴더 외부의 파일은 봇과 같은 서버 관련 파일입니다.

Teams 탭 앱 테스트 및 디버그

1. Visual Studio Code에서 Microsoft Teams 아이콘을 선택하여 TEAMS 도구 키트 패널을 엽니다.

   

   여기에는 여러 섹션이 있습니다. 탭을 디버깅하려면 계정 및 환경 섹션에 집중합니다.

2. 계정 섹션에서 Azure에 로그인을 선택합니다. 열리는 대화 상자 에서 로그인 단추를 선택하고 Microsoft 365 자격 증명을 입력합니다.

   Teams 도구 키트에는 전역 관리자 권한이 있는 Microsoft 365 회사 또는 학교 계정이 필요합니다.

3. 다음 방법 중 하나를 사용하여 연결된 디버거를 사용하여 앱 실행을 시작합니다.

   • F5 키를 선택합니다.
   • Visual Studio Code에서디버깅 시작실행을> 선택합니다.
   • Teams 도구 키트의 ENVIRONMENT 섹션에서 로컬 폴더를 연 다음 원하는 브라우저를 선택합니다.

4. Visual Studio Code가 콘솔 탭에서 작업을 볼 수 있는 몇 가지 검사를 수행한 후 새 브라우저 창이 열립니다. CustomerTicketingTool 대화 상자에서 추가 단추를 선택하여 미리 보기용 Teams에 앱을 설치합니다.

   

   이제 CustomerTicketingTool 앱을 사이드바에서 볼 수 있습니다. 앱은 개인 탭 및 정보라는 두 개의 탭으로 미리 구성됩니다.

   

Teams에 개인 탭을 성공적으로 추가했습니다.

Teams 탭 사용자 지정

이제 개인 탭에서 텍스트를 사용자 지정할 수 있습니다.

1. src>views 폴더를 열고 hello.html 파일을 엽니다.
2. Hello, World 텍스트를 검색하여 축하합니다.로 변경합니다.

Teams의 변경 내용을 보려면 디버거 세션이 실행 중인 브라우저로 돌아갑니다. 코드에 대한 변경 내용을 확인하기 위해 브라우저를 새로 고칠 필요가 없었습니다. 이제 개인 탭의 텍스트에 축하합니다.

Visual Studio Code용 Teams 도구 키트는 앱이 계속 실행되는 동안 변경 내용을 적용하는 핫 다시 로드 기능을 제공합니다.