on
IMT2000 3GPP - 트위치 스트리밍 그래프 분석 - Part 2
IMT2000 3GPP - 트위치 스트리밍 그래프 분석 - Part 2
반응형
도입
이 블로그는 구축하는 애플리케이션의 부분에 따라 세 부분으로 나뉩니다.
1부: 데이터 소스 및 백엔드 구현
2부: 프런트엔드 구현
Part 3: 카프카 클러스터의 데이터 스트리밍
아직 읽지 않았다면, 이미 출판된 파트 1을 읽은 후 이 파트를 계속 읽을 수 있습니다. 그렇지 않으면 이미 구현된 백엔드를 사용하십시오. 이 부분에서는 리액트 애플리케이션을 만들고 트위치 데이터 세트의 일반 통계와 몇 가지 흥미로운 통찰력을 시각화할 것이다. 블로그의 이 부분에서 언급될 모든 구현은 프로젝트의 프런트엔드 폴더에서 찾을 수 있습니다.
대응 앱 만들기
우리가 수집한 모든 데이터를 어떻게 시각화할 것인지 알아보겠습니다. 먼저 우리는 우리의 플라스크 앱과 연동할 리액트 앱을 만들어야 합니다. 우리는 리액트 앱을 만들기 위한 npx 명령을 제공하는 Node.js를 설치할 것입니다. 프로젝트 루트 폴더에 자신을 배치하고 다음을 실행합니다.
npm install -g [email protected] npm init react-app frontend --use-npm cd frontend npm start
Now at http://localhost:3000 you can see simple React app. We will configure our React app to work well with Flask server. In package.json from frontend folder add a line at the end of the file:
"proxy": "http://localhost:5000"
This will tell React app to redirect any requests it receives on its port 3000 to port 5000, where our backend is implemented. We will use Semantic UI to build our webpage, so we have to do a few more things before dockerizing our React app. Run the following commands:
npm uninstall semantic-ui semantic-ui-css npm install @craco/craco @semantic-ui-react/craco-less semantic-ui-less --save-dev
그런 다음 패키지를 업데이트하십시오.json:
{ "scripts": { "start": "craco start", "build": "craco build", "test": "craco test", "eject": "craco eject" } }
craco.config.js를 앞면 폴더에 만들고 다음 내용을 붙여넣습니다.
module.exports = { plugins: [{ plugin: require('@semantic-ui-react/craco-less') }], }
serc 폴더에 semantic-ui/site 폴더를 만든 다음 전체 node_modules/semantic-ui-less/_site 폴더 내용을 src/semantic-ui/site에 복사합니다. src/semantic-ui/ 폴더에 theme.config 파일을 생성한 다음 node_modules/semantic-ui-less/theme.config.예를 들어 src/semantic-ui/theme.config에 복사합니다.
theme.config 파일 변경:
/******************************* Folders *******************************/ @themesFolder : 'themes'; @siteFolder : '../../src/semantic-ui/site'; @import (multiple) "~semantic-ui-less/theme.less"; @fontPath : '../../../themes/@{theme}/assets/fonts';
아직 설치되지 않은 경우 다음을 실행합니다.
npm 설치 semantic-ui-dev --save-dev
이제 버튼과 같은 시맨틱 UI 구성 요소를 사용할 수 있습니다(모든 가져오기를 붙여넣는 것을 잊지 마십시오).
import logo from "./logo.svg"; import "./App.css"; import "semantic-ui-less/semantic.less"; import { Button } from "semantic-ui-react"; function App() { return ( Edit src/App.js and save to reload. Click me ); } export default App;
리액트 앱 도킹
우리는 이전에 만든 프로젝트의 docker-compos.yml 파일에 몇 개의 새로운 라인을 추가할 것입니다. 파일 끝에 다음을 추가합니다.
react-app: build: ./frontend volumes: - ./frontend:/app - /app/node_modules ports: - "3000:3000" depends_on: - twitch-app networks: - app-tier
또한 다음과 같이 Frontend 폴더에 Dockerfile을 작성해야 합니다.
# pull official base image FROM node:14.17.5-alpine # set working directory WORKDIR /app # add `/app/node_modules/.bin` to $PATH ENV PATH /app/node_modules/.bin:$PATH # install app dependencies COPY package.json ./ COPY package-lock.json ./ RUN npm install --silent RUN npm install [email protected] -g --silent # add app COPY . ./ # start app CMD ["npm", "start"]
여기 보시다시피 우리는 패키지를 복사하고 있습니다.Json을 컨테이너에 넣습니다. 모든 종속성을 설치하는 가장 좋은 방법은 패키지를 복사하는 것입니다.여기서 json 파일. 그러면 모든 노드 모듈이 컨테이너에 올바르게 설치되고 npm start가 React 앱을 실행합니다. 프로젝트를 빌드할 때마다 모든 패키지를 설치할 필요가 없도록 노드 모듈 볼륨이 추가되었습니다.
프런트엔드에서 .dockerignore 파일을 만들기만 하면 된다.
node_modules build .dockerignore Dockerfile
포장지를 조금 바꿔주세요.프록시 설정의 json:
"추적": "https://https-app:https"
이러한 변경은 트위치 앱이라는 포트 5000에서 백엔드를 도커로 실행하고 있기 때문입니다. 프로젝트 구조는 다음과 같습니다.
| docker-compose.yml | +---backend | app.py | Dockerfile | requirements.txt | +---frontend | | .dockerignore | | craco.config.js | | Dockerfile | | package.json | | package-lock.json | +---node_modules | +---public | +---src | +---memgraph | | | +---import-data | | chatters.csv | | moderators.csv | | streamers.csv | | teams.csv | | vips.csv | +---mg_log | +---mg_lib | +---mg_etc
이제 루트 프로젝트 폴더에서 도커 컴포지트 빌드를 누르고 도커 컴포지션을 수행할 수 있습니다. 첫 번째 멤그래프 메이지가 실행되고 그 다음에 트위치 앱이 실행된다. 그런 다음 리액트 앱이 실행됩니다. 이제 프런트엔드에서 요청할 수 있습니다.
프런트엔드 구현
폴더 구성 요소를 src 파일에 생성합니다. 여기서는 웹 애플리케이션의 퍼즐로 사용할 구성 요소를 만들 것입니다. 퍼즐의 일부를 만들어 Memgraph에서 데이터를 가져오는 과정을 보여드리겠습니다. 우리는 Counter.js에서 가져오기 요청을 함으로써 우리의 웹페이지에 노드 및 에지 카운터를 추가할 것입니다. 아래 코드에서 당신은 우리가 상위 컴포넌트로부터 전달된 소품에 따라 요청을 하는 것을 볼 수 있습니다.
fetch() { fetch("/" + this.props.count) .then((res) => res.json()) .then( (result) => { this.setState({ isLoaded: true, counter: result[this.props.count], }); }, (error) => { this.setState({ isLoaded: true, error, }); } ); }
왼쪽에는 노드 수가 표시되고 오른쪽에는 데이터베이스의 에지 수가 표시됩니다.
게임 통계의 경우 백엔드에서 상위 게임을 가져옵니다.
fetchData(number) { fetch("/top-games/" + number) .then((res) => res.json()) .then( (result) => { this.setState({ isLoaded: true, games: result.games, players: result.players, }); }, (error) => { this.setState({ isLoaded: true, error, }); } ); this.setState({ numOfGames: number, header: "Top " + number + " games", }); }
오른쪽에는 게임 이름과 해당 게임을 플레이하는 플레이어 수를 보여주는 표가 있습니다(데이터셋).
비슷한 방식으로 우리는 최고의 팀, Vip, 그리고 진행자를 데려오고 있다. 스트리머는 팔로워 수나 조회수를 기준으로 순위를 매기고 있습니다. 그렇기 때문에, 순위 결정 방법을 선택할 수 있는 드롭다운 메뉴가 있습니다.
그래프 시각화에 대해 조금 더 이야기해 봅시다. 여기 D3.js를 사용할 거예요. 이것은 우리가 아직 사용하지 못하는 패키지입니다. 우리는 D3.js를 사용하여 그래프를 그릴 수 있도록 모든 것을 설정해야 합니다. src 폴더에 폴더 후크를 만들고 useD3.js 파일을 만듭니다(후크는 일반적으로 접두사 "use"로 명명됨).
import React from "react"; import * as d3 from "d3"; export const useD3 = (renderGraph) => { const ref = React.useRef(); React.useEffect(() => { renderGraph(d3.select(ref.current)); return () => {}; }); return ref; };
D3.js가 DOM과 직접 상호 작용할 수 있도록 하는 사용자 지정 후크가 됩니다. useRef 및 useEffect hook을 사용하여 D3.js를 생성된 svg 요소와 연결하고 D3.js 함수를 실행해야 하는 시기를 지정할 수 있습니다. d3를 수입하는 것을 잊지 마세요. 이제 사용자 지정 훅 useD3.js를 사용하여 그래프를 렌더링할 수 있습니다. 그래프를 그리는 방법을 보려면 Graph.js 성분을 확인하십시오. 이 구성 요소를 사용하면 팀, 게임, 언어 등 좋아하는 스트리머에 대한 정보를 얻을 수 있습니다.
특정 언어로 게임을 하는 모든 스트리머를 검색하는 것도 가능하다. 동일한 Graph.js 구성 요소를 사용하면 다음을 얻을 수 있습니다.
노드와 그 힘을 자유롭게 끌고 다니세요. 마지막으로, 우리는 강력한 MAGE 쿼리 모듈인 PageRank와 Betweenness Centrality를 사용하여 D3.js로 데이터를 매우 멋지게 시각화할 수 있는 방법을 보여줄 것이다. PageRank의 경우 백엔드에 API get request가 있으며 프런트엔드는 PageRank.js 구성 요소에서 해당 데이터를 가져옵니다.
fetchData(){ fetch("/page-rank") .then((res) => res.json()) .then( (result) => { this.setState({ isLoaded: true, nodes: result.page_rank, }); }, (error) => { this.setState({ isLoaded: true, error, }); } ); }
PageRank 결과를 계산하는 동안 결과가 로드되는 것을 볼 수 있습니다. 결과가 로드된 후에는 D3.js를 사용하는 그래프 구성 요소 GraphPR.js로 그려진다. 그래프 옆에 스트리머의 이름과 계산된 순위가 있는 결과 표를 볼 수 있습니다.
그려진 그래프 위에 새로 고침 버튼이 있습니다. 나중에 블로그 파트 3에서 카프카를 사용하여 데이터를 스트리밍하는 방법을 보여 줄 것입니다. 우리는 사용자 BadBoyHalo의 새로운 채터들을 스트리밍하고 그의 네트워크에서 더 많은 채터들로 인해 그의 순위가 어떻게 향상되는지 볼 것이다.
마찬가지로, 우리는 Betweenness Centrality를 계산했고 그 결과를 아래에 표시했습니다.
결론
지금은 여기까지! 여기에서 블로그 게시물의 이 부분에 필요한 모든 코드를 볼 수 있습니다. 모든 것을 제대로 이해하셨기를 바라지만, 문의 사항이 있거나 의견을 듣고 싶으시면 언제든지 Discord Community Server에 가입해 주십시오. 스트리밍 데이터를 처리하는 방법을 배울 수 있는 이 블로그의 마지막 부분을 확인하십시오.
from http://issue-disk.tistory.com/75 by ccl(A) rewrite - 2021-10-28 06:26:58