Web의 세계를 제대로 만져 처음으로 반년이 지났습니다.
이번이 처음으로 세상에 응용 프로그램을 내 보겠습니다,,
우선은 릴리스하면 지금까지를 목표로 노력합니다.

React/Firebase편입니다.
React 프로젝트에서 봇을 이동한 후 Firebase에 배포할 때까지 진행합니다.
그 외의 기사는 이쪽으로부터
・봇편

만드는 것

캐릭터와 대화하고 있는 바람의 챗봇을 만들어 봅니다.

자꾸 등장 인물

프런트 엔드

・React-redux 이번
· Scss
· Three.js

백엔드

· Firebase 이번
· Azure
· Microsoft BotFramework 이번

깨끗한 아키텍처라든지 전혀 모르기 때문에, 가능한 한 지견이 있는 것을 선택하고 있습니다.
백엔드로 막혀 시간 낭비하지 않도록, 노력하자!

React-Redux

React에서 프런트 엔드를 구현할 때 Bot Framework Web Chat을 사용합니다. 몇 가지 샘플이 준비되어 있으며, 이번에는 샘플 중 11.12.14를 참고하고 있습니다.

· React 프로젝트 만들기

$ 作業ディレクトリ/ 
$ npx create-react-app webgl_bot
$ npm install botframework-webchat memoize-one
$ npm audit //足りないものとかあるかなー
$ npm install react react-dom //reactないって言われたw
$ git init && git add . //git入れるよ
$ git commit -m "First commit."
$ git remote add origin [email protected]:Yourname/aaaa.git && git push -u origin master

Git의 명령 언제까지나 기억할 수 없어,,,
참고 : htps : // 코 m / 켄타 코다시마 / ms / 16 아 787779

· 초기 디렉토리 구성

구성요소

이번에 사용할 파일을 추가합니다.

$ cd src
$ touch AnimateWebChat.js // 親コンポーネント
$ touch Webchat.js // 子コンポーネント
$ touch animations.js // animation個別の動きを記述する

먼저 App.js를 다시 씁니다.

App.js

+ import AnimateWebChat from './AnimateWebChat'

function App() {
  return (
    <AnimateWebChat /> // returnの中をコンポーネントを返すように書き換え
  );
}

WebChat.js 에 웹 채팅을 렌더링하는 과정을 설명합니다.

WebChat.js

import { DirectLine } from 'botframework-directlinejs';
import React from 'react';
import ReactWebChat, { createStyleSet } from 'botframework-webchat';


export default class extends React.Component {
  constructor(props) {
    super(props);
    this.directLine = new DirectLine({ token: 'Your Token' });
  }

  render() {
    const {
        props: { className, store }, //AnimateWebchat.jsから渡されるprops、のはず
    } = this;

    return (
      <ReactWebChat 
      className = {`${className || ''}webchat`}
      directLine = { this.directLine }
      store = { store }
       />
    );
  }
}

그런 다음 사용자의 응답을 듣고 이벤트를 발화시키는 AnimateWebchat.js를 작성합니다.
이 클래스에 store를 세워 애플리케이션 전체의 state를 관리합니다.
action 에 사용자가 입력한 문자열이나 액션의 타입이 들어 있습니다.
액션 유형은 기본적으로 제공됩니다.
각 액션의 차이는 아직 미세하게 확인할 수 없기 때문에 추기하고 싶습니다.
여기에서 기본 동작을 확인할 수 있습니다.
htps : // 기주 b. 코 m / 미 c 로소 ft / 보 tF 라메를 rk ぇ b t t / t ree / ms r / pacc s / 이것 / src / a c chion s

AnimateWebchat.js

import React from 'react'
import { createStore, createStyleSet } from 'botframework-webchat'

import Webchat from './Webchat'
import animations from './animations'

export default class extends React.Component {
    constructor(props) {
        super(props)
　　　　　// storeを立ててactionを元にイベント発火、stateの書き換えをする
        const store = createStore({}, ({ dispatch }) => next => action => {
            if (action.type === 'DIRECT_LINE/CONNECT_FULFILLED') {
                setTimeout(() => {
                    dispatch({
                        type: 'WEB_CHAT/SEND_EVENT',
                        payload: {
                            name: 'webchat/join',
                            value: {
                                language: window.navigator.language
                            }
                        }
                    });
                }, 1000);
            } else if (action.type === 'DIRECT_LINE/INCOMING_ACTIVITY') {
　　　　　　　　　　//animations呼び出し時にactionを参照するようにする
                const DoAnimation = animations.bind(action) 
                DoAnimation();
            }
            return next(action);
    });

      this.state = { store };
  }

render() {
    const {
        state: {
            store,
        }
    } = this;
    return (
        <Webchat
            className="Animate" //WebChatコンポーネントにpropsを渡していく
            store={store}
        />
    )
}
}

스타일링 조정

스타일을 조정합니다. 기본값은 모두 삭제하고 다시 씁니다.

App.css

code {
  font-family: source-code-pro, Menlo, Monaco, Consolas, "Courier New",
    monospace;
}
html,
body {
  height: 100%;
  margin: 0;
  position: relative;
  font-family: 
-apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto", "Oxygen", "Ubuntu", "Cantarell", "Fira Sans", "Droid Sans", "Helvetica Neue",sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

#root,
#root > * {
  height: 100%;
  width: 100%;
}

여기 한 번 yarn start 합니다. 봇이 응답하는지 확인합니다.

사용자 액션을 바탕으로 이벤트 점화

사용자의 액션을 바탕으로 애니메이션을 구현합니다.
이번에는 테스트로 사용자가 입력한 문자열을 바탕으로 화면에 경고를 내도록 합니다.

animations.js

export default function () {
    const activity = this.payload.activity //呼び出し元であるactionをthisとする、はず
    if (activity.from.role === 'user') {
        switch (activity.text) {
            case 'hello':
                alert('Get Hello saying')
                break;

            default:
                break;
        }
    }
}

흐리게 보이기 어렵지만 hello를 입력하면 경고가 표시됩니다.


지금까지 한 번 firebase에 배포합니다.

Firebase

Firebase는 처음 만졌습니다.
(Azure의 webapp에서도 좋았지만, 주변에 Firebase + vue로 앱을 만드는 사람이 많기 때문에 곤란했을 때 들릴 것 같습니다.

이번에는 firebase의 Hosting을 이용합니다.
아래를 참고하여 npm만 yarn으로 읽어서 배포했습니다.
· Firebase와 Reactjs - Hosting

배포에 성공했기 때문에 이번에는 여기까지 합니다.