SharePoint에 챗봇을 넣어보도록 하겠습니다.

SharePoint 화면에 채팅 앱을 넣고 싶다는 말에 이용했다전에 했던 챗봇..
나는 그 순서와 주의한 일을 쓰고 싶다.
개시하다
SharePoint에 자체 기능이 추가되었습니다SharePoint Framework.
SharePoint Framework에서 다음 유형의 어셈블리를 개발할 수 있습니다.

웹 부품

페이지에 표시되는 부품입니다.

확장 기능

어플리케이션 클라이언트

스크롤한 후에도 표시된 머리나 꼬리 등이 남아 있다.

현장 고객

목록열의 외관을 변경합니다.

ListView 명령 세트

처리를 수행하기 위해 목록에 단추를 추가합니다.

라이브러리

다른 어셈블리에서 사용할 수 있는 부품입니다.

이번에 우리는 응용 프로그램 고객으로 개발하는 것이 비교적 좋다고 판단했다.
이 문서에는 1.12.1 버전의 SharePoint Framework가 사용됩니다.
개발 환경 설정
이 단계에 따라 Gulp, Yeoman, Yeoman의 SharePoint 발생기를 설치한다.
Node.js가 지원하는 버전을 설치했기 때문에 사랑을 끊습니다.

$ npm install gulp yo @microsoft/generator-sharepoint --global

프로젝트 작성
이 단계에서 프로젝트용 chatbot 디렉터리를 먼저 만들고 이 디렉터리에서 다음 명령을 실행합니다.

$ yo @microsoft/sharepoint

     _-----_
    |       |    .--------------------------.
    |--(o)--|    |      Welcome to the      |
   `---------´   |  SharePoint Client-side  |
    ( _´U`_ )    |         Solution         |
    /___A___\    |     [email protected]     |
     |  ~  |     '--------------------------'
   __'.___.'__
 ´   `  |° ´ Y `

Let's create a new SharePoint solution.
? What is your solution name? chatbot
? Which baseline packages do you want to target for your component(s)? SharePoint Online only (latest)
? Where do you want to place the files? Use the current folder
Found npm version 6.14.11
? Do you want to allow the tenant admin the choice of being able to deploy the solution to all sites immediately without running any feature deployment or adding apps in sites? No
? Will the components in the solution require permissions to access web APIs that are unique and not shared with other components in the tenant? No
? Which type of client-side component to create? Extension
? Which type of client-side extension to create? Application Customizer
Add new Application Customizer to solution chatbot.
? What is your Application Customizer name? Chatbot
? What is your Application Customizer description? User assistant.

확장 기능의 프로그램에는 Doyouwant to allow the tenant admin~와 Will the components in the solution require perrmissions~가 기록되어 있지 않지만사이트 부품에서는 기본 N을 선택했다.

또한 프로젝트를 처음 만들 때만 다음 명령을 사용합니다개발자 자체 서명 인증서 신뢰.

gulp trust-dev-cert

바닥글 구현
참고평면 브래킷 샘플, 우선 내용이 없는 쪽지만 제작합니다.
/src/extensions/chatbot/ChatbotCustomizer.module.scss

.app {
  position: relative;
  height: 1px;
  display: flex;
}

/src/extensions/chatbot/ChatbotApplicationCustomizer.ts

import { override } from '@microsoft/decorators';
import {
  BaseApplicationCustomizer, PlaceholderContent, PlaceholderName
} from '@microsoft/sp-application-base';

import styles from './ChatbotCustomizer.module.scss';

/**
 * If your command set uses the ClientSideComponentProperties JSON input,
 * it will be deserialized into the BaseExtension.properties object.
 * You can define an interface to describe it.
 */
export interface IChatbotApplicationCustomizerProperties {
}

/** A Custom Action which can be run during execution of a Client Side Application */
export default class ChatbotApplicationCustomizer
  extends BaseApplicationCustomizer<IChatbotApplicationCustomizerProperties> {

  private _bottomPlaceholder: PlaceholderContent | undefined;

  @override
  public onInit(): Promise<void> {
    this.context.placeholderProvider.changedEvent.add(this, this._renderPlaceHolders);
    return Promise.resolve();
  }

  private _renderPlaceHolders(): void {
    if (!this._bottomPlaceholder) {
      this._bottomPlaceholder = this.context.placeholderProvider.tryCreateContent(PlaceholderName.Bottom);

      if (this._bottomPlaceholder.domElement) {
        this._bottomPlaceholder.domElement.innerHTML
          = `<div class="${styles.app}"></div>`;
      }
    }
  }
}

VS 코드에서 편집하면 처음에는 scss 파일을 가져오는 부분에 오류가 발생하지만 다음 순서에 따라 구축하면 해제됩니다.

테스트
serve.json의 페이지 Url을 확장 기능이 끼워 넣을 예정인SharePoint의 URL로 변경합니다. 속성을 사용하지 않기 때문에 삭제합니다.
/config/serve.json

{
  "$schema": "https://developer.microsoft.com/json-schemas/core-build/serve.schema.json",
  "port": 4321,
  "https": true,
  "serveConfigurations": {
    "default": {
      "pageUrl": "https://hogehoge.sharepoint.com/sites/portal",
      "customActions": {
        "da62dff0-4c91-4aed-a978-0e4a95fa289b": {
          "location": "ClientSideExtension.ApplicationCustomizer"
        }
      }
    },
    "chatbot": {
      "pageUrl": "https://hogehoge.sharepoint.com/sites/portal",
      "customActions": {
        "da62dff0-4c91-4aed-a978-0e4a95fa289b": {
          "location": "ClientSideExtension.ApplicationCustomizer"
        }
      }
    }
  }
}

VS 코드로 열면 경고Property serveConfigurations is not allowed.가 표시되지만 지정된 URL과 정상적인 기능은 신경 쓰지 않아도 됩니다.

그리고 gulp serve를 실행하면 브라우저에 페이지가 표시되고 다음 확인 화면이 표시됩니다. [디버그 스크립트 읽기]를 누르십시오.

구축된 자바스크립트 등은 글랩 서버를 통해 포트 4321에 공개돼 여기서 읽힌다.

이렇게 되면 화면에는 아무것도 보이지 않지만 DOM 트리에 1px 높이의 바닥글이 추가된 것을 확인할 수 있다.

채팅 로봇 가입
이번 방법은 채팅방의 코드를 프로젝트에 이식하는 것이 아니라 참고여기.로 Svelte가 만든 채팅방의 js 파일을 직접 편입하는 것이다.
간단하게 js 파일을 프로젝트에 설정하고 고객 onInit 방법에서require를 실행합니다.
/src/extensions/chatbot/ChatbotApplicationCustomizer.ts

  @override
  public onInit(): Promise<void> {
    require('../../../assets/bundle.js');

    this.context.placeholderProvider.changedEvent.add(this, this._renderPlaceHolders);
    return Promise.resolve();
  }

  private _renderPlaceHolders(): void {
    // 割愛
        this._bottomPlaceholder.domElement.innerHTML = `
          <div class="${styles.app}">
            <chat-frame title="お問い合わせ" closeclass="${styles.close}"></chat-frame>
          </div>`;

그리고 채팅방 스타일.module.scss로 지정합니다.

CSS의 클래스 이름은 패키지(예를 들어 app→app 22ddff86)되어 있기 때문에 클래스 이름을 직접 지정하는 것이 아니라 ${styles.app}처럼 변수로 지정합니다.

빌드 버전
참조이것 및 이것 단계
우선 프로그램에 따라 사이트 단계에 확장 기능을 발표한다.json에서 Centent SideInstance로 이동합니다.xml에 대한 지정을 삭제합니다.
그런 다음 릴리스를 작성하려면 다음 절차를 따르십시오.

gulp bundle --ship
gulp package-solution --ship

응용 프로그램에서 게시
빌딩이 완성되었다.응용 프로그램에서 sppkg을 발표합니다.

응용 프로그램이 없으면 여기.를 참조하십시오.

그러나'사이트의 주소 접미사'를 예로 들면'앱'을 사용하면 순조롭게 발표되지 않는 현상을 만날 수 있다.URL이 사용되기 때문에 영어는 나무랄 데가 없는 것 같다.

절차는 이해하기 어려우므로 응용 프로그램의 사이트에서 "SharePoint용 응용 프로그램"을 누르고 sppkg 파일을 드래그합니다.
　　　　

웹 사이트에 설치
응용 프로그램이 설치된 웹 사이트의 [사이트 내용] 페이지를 열고 [새로 만들기]에서 [응용]을 클릭합니다.
표시된 페이지에서 응용 프로그램을 클릭하면 설치가 수행됩니다.
눈여겨본 일

스타일에서opacity를 사용하면 구축 후 지정한 값이 무시되고 1%(투명하면 보이지 않음)로 변합니다.

앱을 삭제하려면 클래식한 사이트 내용이 필요하다.

프로그램을 버전으로 업그레이드하려면/config/package-solution을 사용하십시오.json 내의 버젼을 업데이트하여 프로그램 타로크에 다시 발표합니다.

사이트에 설치된 앱은 여전히 구 버전이기 때문에 사이트 내용을 통해 앱의 상세한 정보를 보면 새 버전을 얻을 수 있다.

그런데 몇 번 더 발표할 때 프로그램이 안 나와요.그때, 프로그램에서 삭제, 패키지-solution.json의 id를 조금 변경해서 발표한 일은 대응할 수 있지만 이 근처는 계속 조사해야 합니다.