최종 지침.섹션 1: 백엔드 개요 및 분석

이것은 React, GraphQL, Cube를 사용하여 동적 분석기 표판과 응용 프로그램 안내서를 구축하는 첫 번째 부분이다.찾을 수 있는 jsthe full guide here
이 밖에 최종 응용 프로그램의 프레젠테이션을 보실 수 있습니다.온라인 데모는 available here입니다.
현재, 우리는 거의 모든 응용 프로그램에서 분석 계기판과 보고 기능을 볼 수 있다.웹 개발자로서의 직장 생활에서 저는 수십 개의 서로 다른 계기판을 구축했습니다. 응용 프로그램의 성능을 측정하는 내부 도구부터 인터랙티브 보고서 생성기와 동적 계기판을 가진 고객을 위한 포털까지.
나는 내가 줄곧 이 과정을 좋아한다고 말할 수 없다.몇 년 전, 나는 서버에서 모든 HTML을 보여 주었는데, 계기판과 그래프를 포함해서, 일부 jQuery와 대량의 해커 공격을 통해 그것을 동적화하려고 시도했다.백엔드는 거대한 전체적인 응용 프로그램으로 대량의 일을 했다. 분석 처리를 포함하여 결과는 종종 느리고 효과가 낮으며 유지하기 어렵다.마이크로 서비스, 용기, 전단 프레임워크와 많은 우수한 그래프 라이브러리 덕분에 오늘날 이러한 분석 계기판과 보고서 생성기를 구축하는 것은 더욱 쉽고 재미있을 것이다.
본 강좌에서 우리는 보고서 생성기와 동적 계기판을 포함한 완전한 창고 분석 프로그램을 구축하는 방법을 점차적으로 배울 것이다.우리는 마이크로 서비스 체계 구조에서 응용 프로그램을 구축하여 전단과 후단을 분리할 것이다.우리는 AWS 서비스에 의존하여 일부 기능을 실현할 것이지만, 이것은 귀하의 마이크로 서비스에 의해 쉽게 대체될 것입니다. 우리는 본 강좌 뒤에 소개할 것입니다.
final application we are going to build here. 아래 그림은 우리 응용 프로그램의 구조를 보여 줍니다.

일단 백엔드 -
우리는 계기판의 데이터를 PostgreSQL에 저장할 것이다. 이것은 무료 소스 관계 데이터베이스이다.Postgre가 없거나 서로 다른 데이터베이스를 사용하고자 하는 분들은 본 강좌 뒷부분에서 유용한 링크를 제공하여 서로 다른 데이터베이스(예를 들어 MongoDB)를 어떻게 똑같은 설정을 하는지 소개하겠습니다.
다음에 우리는 Cube.js를 설치하여 데이터베이스에 연결할 것이다.입방체.js는 분석적인 웹 응용 프로그램을 구축하는 데 사용되는 소스 프레임워크입니다.데이터베이스 위에 분석 API를 만들고 SQL 조직, 캐시, 보안, 인증 등의 문제를 처리합니다.
사용자 등록 및 로그인을 위해 AWS Cognito를 사용하고 AWS AppSync를 GraphQL 백엔드로 사용합니다.또는 자체 인증 서비스와 GraphQL 백엔드를 사용할 수 있습니다.그러나 이 자습서에서는 간단히 설명하기 위해 AWS 서비스를 사용합니다.
프런트엔드는 React 애플리케이션입니다.우리는 입방체를 써야 한다.js Playerd는 보고서 생성기와 대시보드가 있는 React 대시보드 템플릿을 생성할 수 있습니다.Engine 덮개 아래Create React App를 사용하여 모든 구성을 생성하고 Cube를 사용하도록 모든 구성 요소를 연결합니다.js API 및 GraphQL 백엔드마지막으로 시각화에 대해 우리는 Recharts를 사용할 것이다. 이것은 강력하고 맞춤형 React 기반의 도표 라이브러리이다.

데이터베이스와 다차원 데이터 집합을 설정합니다.js

우리는 우선 데이터베이스를 구축해야 한다.우리는 PostgreSQL 데이터베이스를 사용할 것이지만, 어떠한 다른 관계 데이터베이스도 정상적으로 작동할 수 있어야 한다.Mongodb를 사용하려면 BI에 Mongodb 연결기를 추가해야 합니다.MongoDB 데이터 위에서 SQL 코드를 실행할 수 있습니다.MongodB 사이트에서 쉽게 다운로드할 수 있습니다.
또 하나 기억해야 할 것은 복제다.주로 성능 문제로 인해 생산 데이터베이스에 대한 운행 분석 조회는 좋지 않은 방법으로 여겨진다.입방체.js는 데이터베이스의 작업량을 현저하게 줄일 수 있지만, 나는 부본에 연결하는 것을 권장한다.
만약 계기판의 데이터가 없다면, 우리의 예시 전자상거래 Postgres 데이터 집합을 다운로드할 수 있습니다.

$ curl http://cube.dev/downloads/ecom-dump.sql > ecom-dump.sql
$ createdb ecom
$ psql --dbname ecom -f ecom-dump.sql

이제 큐브를 설치합니다.백엔드 서비스를 만듭니다.터미널에서 다음 명령을 실행합니다.

$ npm install -g cubejs-cli
$ cubejs create react-dashboard -d postgres

우리는 방금 새로운 입방체를 만들었다.js 서비스, Postgres 데이터베이스와 함께 사용하도록 설정합니다.입방체.js는 CUBEJS_로 시작하는 환경 변수를 사용하여 설정합니다.데이터베이스와의 연결을 설정하려면 데이터베이스 형식과 이름을 지정해야 합니다.입방체에 있다.js 프로젝트 폴더는 .env의 내용을 다음과 같이 바꿉니다.

CUBEJS_API_SECRET=SECRET
CUBEJS_DB_TYPE=postgres
CUBEJS_DB_NAME=ecom

다른 데이터베이스를 사용하는 경우 this documentation를 참조하여 선택한 데이터베이스에 연결하는 방법을 확인하십시오.
이제 입방체를 운행합시다.js놀이공원.이것은 간단한 데이터 모드를 구축하고 도표를 테스트한 다음에React 계기판 템플릿을 생성하는 데 도움을 줄 것입니다.다차원 데이터에서 다음 명령을 집중적으로 실행합니다.js 프로젝트 폴더:

$ node index.js

그런 다음 브라우저http://localhost:4000를 열어 입방체를 만듭니다.js 데이터 모드.
입방체.js는 데이터 모드를 사용하여 SQL 코드를 생성하고 이 코드는 데이터베이스에서 실행됩니다.데이터 모드는 SQL을 대체할 수 없습니다.SQL을 재사용하고 모든 기능을 유지하면서 구조를 제공하도록 설계되었습니다.데이터 모델의 기본 요소는 도량과 차원이다.
도량은 판매된 단원의 수량, 독특한 방문 횟수, 이윤 등 정량 데이터라고 불린다.
차원은 분류 데이터, 예를 들어 상태, 성별, 제품 명칭이나 시간 단위(예를 들어 하늘, 주, 달)이라고 부른다.
데이터 모드는 JavaScript 코드로 메트릭과 차원, SQL 쿼리에 매핑하는 방법을 정의합니다.다음은 사용자의 데이터를 묘사할 수 있는 모델의 예이다.

cube(`Users`, {
  sql: `SELECT * FROM users`,

  measures: {
    count: {
      sql: `id`,
      type: `count`
    }
  },

  dimensions: {
    city: {
      sql: `city`,
      type: `string`
    },

    signedUp: {
      sql: `created_at`,
      type: `time`
    },

    companyName: {
      sql: `company_name`,
      type: `string`
    }
  }
});

입방체.js는 데이터베이스 테이블을 바탕으로 간단한 데이터 모델을 생성할 수 있다.orders, line_items, products 및 product_categories 테이블을 선택하고 [생성 모드]를 클릭합니다.그것은 테이블마다 4개의 패턴 파일을 생성할 것이다.

모드가 생성되면 Build 탭으로 이동하여 측정 및 차트를 선택하여 모드를 테스트할 수 있습니다.Build 탭은 생성된 SQL에서 렌더링된 차트에 이르기까지 차트가 어떻게 만들어졌는지 확인할 수 있는 다양한 시각 형상 라이브러리를 사용하여 예제 차트를 구성할 수 있는 곳입니다.또한 다중 데이터 세트로 전송된 JSON 조회를 확인할 수 있습니다.js 백엔드.

대시보드 템플릿 생성

다음 단계는 전방 응용 프로그램의 템플릿을 만드는 것입니다.Dashboard Application으로 이동하여 React and Recharts를 선택하고 Dashboard Application 만들기 버튼을 클릭합니다.

응용 프로그램을 생성하고 모든 의존 항목을 설치하는 데 시간이 걸릴 수 있습니다.완성되면 다차원 데이터 집합에 dashboard-app 폴더가 있습니다.js 프로젝트 폴더.프런트엔드 어플리케이션을 시작하려면 놀이공원의 "Dashboard App"탭으로 이동하여 "start"버튼을 클릭하거나 dashboard-app 폴더에서 다음 명령을 실행합니다.

$ npm start

입방체를 확보하다.저희 프런트엔드 프로그램이 API를 사용하기 때문에 js 백엔드 프로세스가 시작되고 실행되었습니다.프런트엔드 애플리케이션이 http://localhost:3000에서 실행 중입니다.브라우저에서 열면 조회 생성기가 있는 찾아보기 탭과 빈 대시보드 탭을 볼 수 있습니다.원하는 대로 차트를 만들어 대시보드에 저장할 수 있습니다.

생성된 응용 프로그램은 Apollo GraphQL 클라이언트를 사용하여 대시보드 항목을 로컬 저장소에 저장합니다.다음 섹션에서는 AWS AppSync를 사용하여 영구 스토리지를 추가하고 AWS Cognito를 사용하여 사용자 인증을 수행합니다.