OpenFin 및 Wijmo의 JavaScript 컴포넌트를 사용하여 주식 포트폴리오 앱 구축하기
페이지 정보
작성자 GrapeCity
작성일 2020-02-27 00:00 조회 6,525회
댓글 0건
본문
관련링크
Wijmo 주식 포트폴리오는 OpenFin 애플리케이션에서 Wijmo 컴포넌트의 사용법을 보여주는 재무 샘플입니다. 이 애플리케이션은 여러 개의 창으로 구성되어 있습니다. OpenFin의 새로운 플랫폼 API를 사용하면 원하는 작업 공간에서 이러한 창을 정렬할 수 있습니다.
다음은 작업 공간 대시 보드의 예입니다.
OpenFin 알림은 알림을 지원합니다. Wijmo 주식 포트폴리오는 사용자에게 알림 센터에서 포트폴리오 변경 내역을 볼 수있는 기능을 제공하여 이를 활용합니다.
주식 포트폴리오 앱은 여러 개의 창으로 구성됩니다. 각 창은 서로 다른 웹 프레임워크 (예 : React, Angular 및 Web Components)를 사용하여 구현됩니다. OpenFin의 새로운 플랫폼 API를 사용하면 원하는 작업 공간에 창을 정렬하고 사용자 정의할 수 있습니다.
아래 비디오는 대시 보드처럼 창을 정렬하는 동안 앱이 작동하는 방식을 보여줍니다.
위에서 알 수 있듯이 각 창은 고유한 기능을 제공합니다.
주식 포트폴리오 창
이 창에서 사용자는 포트폴리오를 관리하고 일반 재고 정보를 볼 수 있습니다. 기본 창이므로이 창은 애플리케이션 시작 시 가장 먼저 표시됩니다. 사용자가 헤더의 툴바 내에서 다른 창의 가시성을 제어할 수 있습니다.
재고 변경 창
이 창에는 포트폴리오의 각 주식에 대한 차트 가격 변동이 표시됩니다.
재고 HLOC 창
이 창에는 HLOC(고가-저가-종가)와 이동 평균의 두 가지 형식으로 차트에 주가가 표시됩니다. HLOC 차트는 시장의 "강세"(종가가 개장 한 것보다 높음) 또는 "약세"(종가가 개장 한 것보다 낮음)를 나타내는 2색 구성표로 구성됩니다.
주식 추세선 창
이전 창과 같이 이 창에도 두 가지 다른 차트가 있지만 다른 형식으로 되어 있습니다. 원가 및 가격 추세선이 선형 근사치로 표시됩니다.
주식 거래 창
이 창은 테이블 뷰에서 실시간 거래 정보를 볼 수 있는 기능을 제공합니다.
금융 애플리케이션을 구축하고 실행하는 방법
GitHub에서 애플리케이션을 설치합니다.
git clone https://github.com/GrapeCity/wijmo-openfin.git
cd stock-portfolio && npm install
다음으로 개발 모드에서 애플리케이션을 빌드하고 실행합니다.
npm start
배포 패키지를 빌드한 후 애플리케이션을 실행할 수 있습니다.
npm run package
비개발자를 위한 앱 실행 방법
개발자가 아닌데도 이 애플리케이션을 사용해보고 싶다면 여기에 설치 관리자를 게시해놓았습니다. 개발 전문 지식이 필요하지 않습니다. 앱을 설치하고 Windows 시스템에서 실행하면 됩니다.
디렉토리 구조
이 프로젝트는 다음과 같은 방식으로 구성됩니다.
디렉토리 './packages'에는 이 샘플 애플리케이션의 빌딩 블록 역할을 하는 다른 프로젝트가 포함됩니다.
- 'stock-core' 디렉토리에는 다른 프로젝트 간에 공유되는 코드베이스가 포함되어 있습니다.
- 'stock-portfolio' 디렉토리에는 기본 웹 애플리케이션 프로젝트가 있습니다. 이 프로젝트는 Angular 프레임워크를 기반으로 합니다.
- 'stock-charts' 디렉토리는 React 프레임워크에 빌드 된 차트 웹 애플리케이션을 나타내는 프로젝트의 위치를 정의합니다.
- 'stock-trading' 디렉토리에는 라이브 거래 웹 애플리케이션 구축 시 Wijmo 웹 컴포넌트의 사용법을 보여주는 프로젝트가 있습니다.
'./resources' 디렉토리에는 이 샘플 애플리케이션을 빌드하는 데 필요한 다른 리소스가 포함되어 있습니다.
사용 된 기술
앞에서 설명한 바와 같이 Wijmo 주식 포트폴리오는 OpenFin 애플리케이션입니다. OpenFin은 웹 브라우저가 웹 페이지를 로드하고 표시하는 것처럼 기존 웹 애플리케이션을 해당 데스크톱 창에 래핑하여 기존 웹 애플리케이션에 대한 데스크톱 환경을 제공합니다.
이 샘플에서 모든 애플리케이션 창은 별도의 웹 애플리케이션을 로드합니다. 데모 목적으로이 웹 애플리케이션은 다음 그림과 같이 다른 웹 기술을 기반으로합니다.
이 웹 애플리케이션들은 사용 된 웹 기술에 관계없이 Wijmo 컨트롤을 사용하여 UI를 구축합니다.
주식 포트폴리오 아키텍처
다음 다이어그램은 Wijmo 주식 포트폴리오 아키텍처를 보여줍니다.
모든 애플리케이션 창은 OpenFin 런타임에서 별도의 OpenFin 애플리케이션에서 실행됩니다. 사용자가 애플리케이션을 시작하면 OpenFin Runtime은 먼저 주식 포트폴리오 구성 파일 (다이어그램의 1 단계)을 로드한 다음 주식 포트폴리오 애플리케이션을 시작하고 구성 파일에서 검색된 URL을 통해 기본 창에서 웹 애플리케이션을 엽니다 (다이어그램의 2단계).
사용자가 창 열기를 요청하면 주식 포트폴리오 애플리케이션은 OpenFin API를 사용하여 매개 변수로 구성을 제공하여 해당 OpenFin 애플리케이션을 시작합니다 (다이어그램의 3단계).
그런 다음 OpenFin Runtime은 제공된 구성에서 URL로 요청된 웹 애플리케이션을 엽니다 (다이어그램의 4 단계).
앱 간 통신
OpenFin은 여러 API가 서로 통신하고 가장 효율적인 방식으로 데이터를 공유할 수 있도록 다양한 API를 지원합니다.
Wijmo 주식 포트폴리오에서 기본 창은 주식 데이터를 다른 창에 제공하여 데이터 흐름이 단일 창에서 여러 창으로 전달되도록 합니다. 이러한 패러다임에서 메시지를 교환하기 위해 Wijmo Stock Portfolio는 OpenFin Channels API를 사용합니다.
다음은 메인 창과 다른 창 사이의 연결 방법을 보여주는 코드의 일부분입니다.
this._channelPromise = fin.InterApplicationBus.Channel.create(ChannelName)
.then(channel => this._handleCreate(channel));
this._channelPromise = fin.InterApplicationBus.Channel.connect(ChannelName)
.then(channel => this._handleConnect(channel));
연결이 설정되면 Windows는 서로 메시지를 교환 할 수 있습니다. 메시지를 받기 위해 리스너는 필요한 주제에 등록하기만 하면 됩니다. 이 코드는 기본 창에서 'SelectionChanged' 주제에 대한 메시지를 수신하는 방법을 보여줍니다.
private _handleCreate(channel: ChannelProvider): ChannelProvider {
console.log('Channels: connected');
channel.register(ChannelTopics.SelectionChanged, symbol => this._selectionChanged(symbol));
// ...
return channel;
}
// ...
// update grid selection to match portfolio selection
private async _selectionChanged(symbol) {
console.log('Channels: received message "currentChanged"');
const p = this.portfolio;
for (let i = 0; i < p.view.items.length; i++) {
if (p.view.items[i].symbol == symbol) {
p.view.moveCurrentToPosition(i);
break;
}
}
}
발신자는 메시지를 보내기 위해 주제를 지정하여 메시지를 발송합니다. 다음 코드는 다른 창이 같은 주제 'SelectionChanged'에서 메시지를 보내는 방법을 보여줍니다.
// send notifications about portfolio selection
async selectionChanged(sender) {
const selectedSeries = sender.selection;
this.currentSymbol = selectedSeries ? selectedSeries.name : null;
this.currentColor = this._getColor(this.currentSymbol);
const connection = await this._channelPromise;
connection.dispatch(ChannelTopics.SelectionChanged, this.currentSymbol);
console.log('Channels: sent message "selectionChanged"');
}
Wijmo JavaScript 컴포넌트
Wijmo 컨트롤은 사용중인 JavaScript 프레임워크에 관계없이 경량의 고속 HTML5 / JavaScript 앱을 빠르게 빌드할 수 있는 UI 컨트롤 세트를 제공합니다. 프레임워크에 구애받지 않기 위해 Wijmo는 Angular, React 및 Vue를 완벽하게 지원하며 각 프레임워크에서 동일한 컨트롤을 사용합니다. Wijmo 컨트롤을 사용하면 HTML 마크업이 쉬워지고 일반적으로 몇 줄의 코드만으로 원하는 기능을 구현할 수 있습니다.
아래 코드는 Angular 애플리케이션에서 Wijmo FlexGrid 컨트롤을 사용하는 companies 테이블의 HTML 마크업을 보여줍니다.
<wj-flex-grid [itemsSource]="portfolio.view"
[headersVisibility]="'Column'"
[allowDragging]="'None'"
[allowResizing]="'None'"
[selectionMode]="'Row'">
<wj-flex-grid-column [header]="''" [isReadOnly]="true" [width]="50" [align]="'center'">
<ng-template wjFlexGridCellTemplate [cellType]="'Cell'" let-cell="cell">
<a href="#" (click)="removeExistingItem(cell.item.symbol)" [wjTooltip]="'Remove'" class="action-remove">
<span class="glyphicon glyphicon-remove"></span>
</a>
</ng-template>
</wj-flex-grid-column>
<wj-flex-grid-column header="Name" binding="name" [isReadOnly]="true" [width]="'*'">
<ng-template wjFlexGridCellTemplate [cellType]="'Cell'" let-cell="cell">
<span [ngStyle]="{'background-color': cell.item.color}">
</span>
{{cell.item.name}}
</ng-template>
</wj-flex-grid-column>
<wj-flex-grid-column header="Symbol" binding="symbol" [isReadOnly]="true" [width]="80"></wj-flex-grid-column>
<wj-flex-grid-column header="Chart" [isReadOnly]="true" [width]="60" [align]="'center'">
<ng-template wjFlexGridCellTemplate [cellType]="'Cell'" let-cell="cell">
<input type="checkbox" [(ngModel)]="cell.item.chart" />
</ng-template>
</wj-flex-grid-column>
<wj-flex-grid-column header="Price" binding="lastPrice" [isReadOnly]="true" format="n2" [width]="80"></wj-flex-grid-column>
<wj-flex-grid-column header="Change" binding="changePercent" [isReadOnly]="true" format="p2" [width]="80">
<ng-template wjFlexGridCellTemplate [cellType]="'Cell'" let-cell="cell">
<div class="chg-cell" [ngClass]="getChangeClass(cell.item.change)">
<span class="chg-val">{{cell.item.changePercent | percent:'1.2-2'}}</span>
<span class="chg-glyph" [ngClass]="getChangeGlyphClass(cell.item.change)"></span>
</div>
</ng-template>
</wj-flex-grid-column>
</wj-flex-grid>
데이터 바인딩 정보를 제공하고 테이블 셀의 모양을 설명하기만 하면 됩니다.
아래의 코드는 React 애플리케이션에서 Wijmo FlexChart 컨트롤을 사용하여 서로 다른 유형의 두 차트를 렌더링하는 메소드를 보여줍니다.
renderChartContent() {
if (this.props.current) {
return [
<wjChart.FlexChartSeries
key="series"
itemsSource={this.props.current.chartData}
name={this.props.current.symbol}
style={{ stroke: '#ff4700' }}
altStyle={{ stroke: '#00ff75' }}>
</wjChart.FlexChartSeries>,
<wjChartAnalysis.FlexChartMovingAverage
key="movingAverage"
itemsSource={this.props.current.chartData}
name="Moving Average"
binding="close"
style={{ stroke: 'white' }}
period={6}
type="Simple">
</wjChartAnalysis.FlexChartMovingAverage>
];
}
return [];
}
render() {
return (
<wjChart.FlexChart chartType="HighLowOpenClose" binding="high,low,open,close" bindingX="date">
{this.renderChartContent()}
<wjChart.FlexChartAxis wjProperty="axisY" format="n0" majorGrid={true} majorTickMarks={0}></wjChart.FlexChartAxis>
<wjChart.FlexChartAxis wjProperty="axisX" format="MMM-yyyy" majorGrid={true} majorTickMarks={0}></wjChart.FlexChartAxis>
<wjChart.FlexChartLegend position="None"></wjChart.FlexChartLegend>
</wjChart.FlexChart>
);
}
이 코드는 자체 설명이며 데이터 바인딩 정보를 제공하고 일부 속성을 정의해야 합니다.
금융 애플리케이션 개발
금융 애플리케이션을 개발하는 입장이거나 정기적으로 금융 애플리케이션을 사용하는 입장에서 OpenFin은 다양한 관점에서 이점을 제공합니다. 기술적인 측면에서 OpenFin은 금융 애플리케이션의 신속한 개발을 위한 환경을 제공합니다.
Google Chromium 및 GitHub의 Electron을 기반으로 하는 OpenFin을 사용하면 최신 HTML5/JavaScript 기능을 활용할 수 있습니다. 또한 OpenFin은 작업 공간 관리 및 애플리케이션 간 상호 운용성을 지원합니다. Wijmo와 같은 엔터프라이즈 JavaScript 컴포넌트를 활용하면 애플리케이션을 더욱 빠르게 개발할 수 있습니다.
댓글목록
등록된 댓글이 없습니다.
