How to Build a Crypto Portfolio App with Ignite UI for Angular

How to Build a Crypto Portfolio App with Ignite UI for Angular

이 시리즈의 다음 기사에서는 Firebase 구성을 구현하는 방법을 자세히 알아봅니다.

8분 읽기

저희 Ignite UI for Angular 도구 세트로 Angular 애플리케이션을 만드는 것이 얼마나 쉬운지 여러분과 공유하고 싶 었습니다.

이 신청서의 목적은 무엇인가요?우선, 우리의 Angular 부품을 시연하기 위해서입니다.둘째, 실제 사용 사례를 보여주기 위해서이며, 제 암호화폐 포트폴리오를 추적해 일일 수익과 손실을 확인할 수 있는 시스템을 만들고 싶었습니다.세 번째 이유로는, 가드, 파이프, 커스텀 템플릿을 우리 컴포넌트와 함께 활용하는 다양한 구조 기법의 사용과 물론 Firebase의 데이터 저장 및 인증 활용을 시연하는 것입니다.

Guard, Pipes, Custom Templates 같은 다양한 Angular 기법을 컴포넌트와 함께 사용하고, 물론 Firebase를 이용해 데이터 저장 및 인증을 수행하는 방법을 시연하기 위해서입니다

주제는 다음을 다룰 것입니다:

  1. The use of Ignite UI Angular CLI
  2. 데이터 서비스, 라우팅, 템플릿, 파이프 등.
  3. Firebase 데이터 저장, 인증 및 CRUD 작업 사용
  4. CoinMarketcap API 실시간 및 과거 가격 정보 조회하기

 

Ignite UI CLI

좋아, 시작하자! 그럼, Ignite UI CLI에 대해 들어본 적 있나요​? 네, 저희가 개발한 실제 시스템으로, 미리 정의된 컴포넌트 세트로 몇 가지 명령만 실행하면 Angular 애플리케이션을 만들 수 있습니다. 필요한 모든 패키지를 설치하고 CLI의 도움으로 프로젝트를 실행하는 데 3분도 채 걸리지 않습니다. 공식시작 페이지를 따라가면 됩니다.

앱 구축과 필요한 패키지 설치가 완료되면,내비게이션 서랍과그리드컴포넌트가 추가되어 이미 설정되어 있음을 알 수 있습니다. 반응형 뷰, 라우팅, 스타일, 모듈 가져오기 등도 마찬가지입니다 – 멋지지 않나요?

export const routes: Routes = [
  { path: '', redirectTo: '/home', pathMatch: 'full' },
  { path: 'home', component: HomeComponent },
  ...
];

좋아, 다음은 뭐야? 저희 앱은 다양한 기능을 보여주길 원합니다: 사용자 인증, 암호화폐 데이터 변경 추적, 암호화폐 포트폴리오를 어딘가에 저장하는 것. 이를 위해 Ignite UI for Angular 모든 적합한 부품을 기본 상태로 제공합니다. 우리는 Chart를 사용해 과거 데이터 변경을 할 예정이며, 그리 드를 사용해 암호화폐 포트폴리오를 보여주고 암호화폐 추가/업데이트/삭제 기능을 제공할 예정입니다.​ 리스트와카드도 포함됩니다.

위의 모든 요구사항에 대해 데이터를 어디선가 가져 와야 하며, 여기서 min-api.cryptocompare가 역할을 합니다 – 이 서비스는 모든 활성 암호화폐에 대한 정보를 한 통화로 제공하는 무료 서비스입니다.

export class BlockGridComponent implements OnInit, AfterViewInit{
  public remoteData: CoinItem[];
  ...

  ngAfterViewInit() {
    this.dataService.getData().subscribe(res => {
      this.remoteData = res;
    });
  ...
}

App Authentication 

아래에는 Crypto 앱의 Firebase 인증을 설정하기 위해 제가 취한 몇 가지 단계를 강조했습니다.AngularFireAuth는 사용자 인증과 로그인, 로그아웃 같은 관련 작업에 사용됩니다. 이 Firebase 서비스는 이메일과 비밀번호로 로그인, Google 인증 제공자, 페이스북 인증 제공자를 제공합니다. 더 자세한 설명을 원한다면 공식Angular Firebase 저장소와 문서를​ 확인해 보시길 권합니다.

 

  1. Set up a firebase project.
  2. 인증 탭으로 가서 Google, Facebook, 이메일/비밀번호 로그인 제공업체를 활성화하세요.
  3. 이 방법에 따라 Facebook ID를 생성하고 나중에 OAuth에서 URI를 리디렉션합니다.
  4. 규칙을 추가하고 변경 사항을 게시하세요.
  5. Angular 프로젝트에 firebaseConfig를 추가하세요.
  6. 로그인, 가입, 이메일 구성 요소를 생성하세요. (코드 for all)
  7. 등록된 사용자와 미등록 사용자의 리디렉션 (Routeguards)을 처리하는 auth.service를 생성하세요. 코드를 보시다시피, (코드 추가) 포트폴리오 페이지는 권한 있는 사용자만 접근할 수 있습니다.
@Injectable()
export class AuthGuard implements CanActivate {

    constructor(private auth: AngularFireAuth, private router: Router, private route: ActivatedRoute) {}

    canActivate(route: ActivatedRouteSnapshot, routerState: RouterStateSnapshot): Observable<boolean> {
      return Observable.from(this.auth.authState)
        .take(1)
        .map(state => !!state)
        .do(authenticated => {
          if (!authenticated) {
            this.router.navigate([ '/login' ], {
              queryParams: {
                return: routerState.url
              }
            });
          }
      });
    }

}

자세한 내용은 공식 Firebase 인증 시작관련 주제를 참고해 보세요. 설정 과정에서 어떤 어려움도 느끼 지 않을 거라고 보장합니다.

설정할 때 어떤 어려움도 느끼지 않을 거라고 장담할 수 있습니다.

데이터 저장 및 CRUD 작업

데이터 저장과 업데이트에는Firebase Realtime Database를 사용하고 있는데, 이는 클라우드 호스팅 데이터베이스로, JSON으로 저장되고 모든 연결된 사용자에게 실시간으로 동기화됩니다. 모든 사용자는 실시간 데이터베이스 인스턴스에서 공유되며 최신 데이터를 자동으로 받습니다.

데이터 읽기와 쓰기는 간단하며, CRUD 작업을 달성하기 위해 따라야 할 단계들은 다음과 같습니다:

  • 데이터 조작을 위한 별도의 서비스를 만드세요
  • 데이터 가져오기, 레코드 추가, 업데이트, 삭제에 사용할 'BlockItem' 클래스를 정의하세요.
  • JSON 객체들의 동기화된 배열로 데이터를 반환하는 리스트 바인딩/리트(가져오기)를 생성하세요. 메타데이터(기본 DBReference 및 스냅샷 키)

자세한 내용은 공식파이어스토어 문서를 확인하세요.

그리드 크루드는 어때? 네, Firebase 데이터 저장소와 훌륭한 API의 도움으로 가능합니다​. Firebase 플랫폼 설정 방법에 대한 자세한 정보는 이 파일을 확인해 보세요. 데이터 저장, 인증 등 기능을 제공할 수 있습니다.

public deleteRow(cell) {
  let blockItem = cell.row.rowData;

  // Detele item from AngularFireList
  this.deleteItem(blockItem);

  // Stores deleted item for the 'Restore' Snackbar logic 
  this.deletedItem = new BlockItem()
  Object.assign(this.deletedItem, blockItem);
  ...
  this.snack.show();
}

public updateRow(evt) {
  const rowItem = evt.rowID;
  rowItem.holdings = evt.newValue;

  this.updateItem(rowItem);
}

Full code here.

애플리케이션에서 사용할 모든 컴포넌트를 구성하세요

가져온 데이터는 다음에서 사용됩니다차트,그리드,목록 그리고카드 구성 요소(각 구성 요소에 대한 코드를 제공).

​예를 들어, Card 컴포넌트는 필터링 파이프와 데이터 정렬을 사용합니다.

export class HomeComponent implements OnInit {
   cryptos: CoinItem[];
   public searchValue: string;

   constructor(private data: DataService, private router: Router) { }

   ngOnInit() {
      this.loadData();
   }

   private loadData() {
      this.data.getData()
         .subscribe(res => {
            this.cryptos = sortDataByKey(res, 'rank');
         });
   }

   get filterOptions() {
      const fo = new IgxFilterOptions();
      fo.key = 'fullName';
      fo.inputValue = this.searchValue ? this.searchValue : '';
      return fo;
   }
...

각 컴포넌트가 어떻게 묶여 있는지 코드를 확인해 보세요.

그리드

이 페이지는 가격 변동을 데이터 조작하고 추적하는 데 사용될 메인 페이지입니다. 5열 격자를 정의할 예정입니다(화면 크기에 따라 수에 따라 다릅니다). 각 열은 데이터 표현을 위한 자체 ng 템플릿을 가질 것입니다. 여기에는 이미지, 가격 변동 아이콘,십진수 파이프 사용이 포함됩니다.

그리드 위의 액션 버튼은 수동 데이터 갱신과 새 코인 추가를 담당합니다.igxDialog 가 그 목적에 사용될 예정입니다. 코인에 대한 최소한의 검증만 적용됩니다. 예를 들어, 이미 존재하는 코인이나 coinmarketcap API에 없는 코인을 추가할 수 없습니다. 각 알림 메시지는igxSnackBar를 통해 표시됩니다.

코인 보유 업데이트는 (onEditDone)을 처리 하고, BlockItemService에서 정의한 메서드를 사용할​ 예정입니다. '삭제'와 '추가' 동전 버튼도 마찬가지였습니다.

<igx-grid #grid1 [data]="blockItems" width="100%" height="500px" toolbarTitle="My portfolio"
   (onCellEdit)="updateRow($event)" (onSelection)="selectCell($event)" [showToolbar]="true" 
   [columnHiding]="true" [columnPinning]="true">
   ...
   <igx-column field="holdings" header="Holdings" editable="true" sortable="true">
      <ng-template igxCell let-cell="cell" let-ri="rowIndex" let-column="column">
         <div class="positionTop">
            ${{ calculateHoldings(cell.row.rowData.holdings, cell.row.rowData.price) | number:'0.2-2' }}
            <br />
            <b>{{ cell.row.rowData.holdings | number:'1.0-7' }}</b>
         </div>
      </ng-template>
   </igx-column>
   ...
   <igx-column header="Actions">
      <ng-template igxCell let-ri="rowIndex" let-column="column">
         <span igxButton="icon" igxRipple (click)='deleteRow()'>
            <igx-icon>highlight_off</igx-icon>
         </span>
      </ng-template>
   </igx-column>
</igx-grid>

차트

이 구성 요소는 코인 가격 변동을 하루 동안 시각적으로 나타내는 데 사용됩니다. 저희igxFinancialChart 는 쉽게 설정할 수 있는데, 가져온 데이터를 "dataSource"에 넘기면 나머지는 차트에서 처리됩니다. 또한, 차트는 일반적인 재무 데이터 구조를 존중합니다.

     <igx-financial-chart [dataSource]="data" height="400px" width="100%" style="margin-top: 20px;" isToolbarVisible="false" chartType="candle">
      </igx-financial-

여기서 언급해야 할 흥미로운 점은 뷰 간 데이터를 전달하는 경로 사용입니다. 통계 페이지는 차트에 로드할 다양한 코인 이름을 전달하는 여러 뷰를 통해 접근할 수 있습니다.

명단 및 카드

IgxList 및IgxCard 컴포넌트는 반환된 항목과 관련된 모든 속성의 서로 다른 시각적 표현을 보여주는 데 사용됩니다.

IgxList 및 IgxCard 컴포넌트는 반환된 항목과 관련된 모든 속성의 서로 다른 시각적 표현을 보여주는 데 사용됩니다.

요약하자면, 올바른 도구만 있으면 모든 것이 가능하며, 그렇다고 해서 저희 제품을 꼭 고려해 보시길 권합니다Ignite UI for Angular다음 웹/모바일 애플리케이션용 컴포넌트.

GitHub 저장소 호스팅 애플리케이션이 포함됩니다.

Angular
데모 요청