FireBaseとAngulerでScatterを動かしてみる

はじめに

AngularでScatterってどうやって動かすんだろう？
ということで、AngularでScatterを動かしてみました。

環境

Mac : 10.14.3（OS X Mojave）
Node : v10.15.0
npm : 6.1.0

FireBaseでAngularを動かす

1.Angular CLIのインストール

npm install -g @angular/cli

1. プロジェクト作成

$ ng new ang-scc-test
? Would you like to add Angular routing? Yes
? Which stylesheet format would you like to use? CSS    (.css )

3.firebase-toolsインストール

npm install -g firebase-tools

4.firebaseログインとプロジェクト作成

$ cd ang-scc-test
$ firebase login
$ firebase init

init時は以下を実行

• Firebase CLIの機能にHosting
• パブリックディレクトリ設定にdist
• 単一ページのアプリとして設定にyes

5.angular.jsonの出力先をdistに変更

angular.json

"outputPath": "dist",

6.Angularのビルドとfirebaseのデプロイ

$ ng build
$ firebase deploy

一旦ここまで、FireBaseのHostingでAngularが動くところまで確認できました。

Scatterと連携する

以下のサイトを参考に色々設定していきます。
https://get-scatter.com/docs/setting-up-for-web-apps
https://github.com/GetScatter/scatter-js

1.EOS用のプラグイン取得

$ npm i -S scatterjs-core
$ npm i -S scatterjs-plugin-eosjs
$ npm i -D @babel/runtime

2.適当にコンポーネントを作る

$ ng generate component Scc

作成したコンポーネントのページが表示されるように変更

src/app/app.component.html

<app-scc></app-scc>

3.Scatterのサイトを参考にとりあえず書いて動かしてみる

scc.component.ts

import { Component, OnInit } from '@angular/core';
import ScatterJS from 'scatterjs-core';
import ScatterEOS from 'scatterjs-plugin-eosjs';

@Component({
  selector: 'app-scc',
  templateUrl: './scc.component.html',
  styleUrls: ['./scc.component.css']
})
export class SccComponent implements OnInit {

  constructor() { }

  ngOnInit() {
    ScatterJS.plugins( new ScatterEOS() );
  }
}

実行。

$ ng serve

ビルドでエラー。

エラー

ERROR in ./node_modules/cipher-base/index.js
Module not found: Error: Can't resolve 'stream' in '/Users/h-kane/Work/Program/angluar/ang-scc-test/node_modules/cipher-base'
ERROR in ./node_modules/hash-base/index.js
Module not found: Error: Can't resolve 'stream' in '/Users/h-kane/Work/Program/angluar/ang-scc-test/node_modules/hash-base'

steamを追加でインストール。

npm install stream

通りました。次は接続処理を追加していきます。
kylinテストネットで設定。

scc.component.ts

import { Component, OnInit } from '@angular/core';
import ScatterJS from 'scatterjs-core';
import ScatterEOS from 'scatterjs-plugin-eosjs';

const network = ScatterJS.Network.fromJson({
  blockchain:'eos',
  chainId:'5fff1dae8dc8e2fc4d5b23b2c7665c97f9e9d8edf2b6485a86ba311c25639191',
  host:'kylin.fn.eosbixin.com',
  port:80,
  protocol:'http'
});

@Component({
  selector: 'app-scc',
  templateUrl: './scc.component.html',
  styleUrls: ['./scc.component.css']
})

export class SccComponent implements OnInit {

  constructor() { }

  ngOnInit() {
    ScatterJS.plugins( new ScatterEOS() );
    ScatterJS.connect('MyAppName', {network}).then(connected => {
      if(!connected) return false;
      // ScatterJS.someMethod();
    });
  }
}

ビルドは通りましたが、フロントでエラー

Uncaught ReferenceError: global is not defined

以下を参考に追加
https://dev.classmethod.jp/ria/angular-js/angular6-referenceerror/

polyfills.ts

(window as any).global = window;

また、エラー。

Uncaught TypeError: Cannot read property 'prototype' of undefined
    at inherits (inherits_browser.js:5)
    at Object../node_modules/hash-base/index.js (index.js:23)
    at __webpack_require__ (bootstrap:78)
    at Object../node_modules/md5.js/index.js (index.js:3)
    at __webpack_require__ (bootstrap:78)
    at Object../node_modules/create-hash/browser.js (browser.js:3)
    at __webpack_require__ (bootstrap:78)
    at Object../node_modules/scatterjs-core/dist/services/SocketService.js (SocketService.js:1)
    at __webpack_require__ (bootstrap:78)
    at Object../node_modules/scatterjs-core/dist/index.js (index.js:1)

なぜかよくわかりませんが、web3を入れると解消されました。

npm install web3

次のエラー

WebSocket connection to 'wss://local.get-scatter.com:50006/socket.io/?EIO=3&transport=websocket' failed: Error in connection establishment: net::ERR_CONNECTION_REFUSED
WebSocket connection to 'ws://127.0.0.1:50005/socket.io/?EIO=3&transport=websocket' failed: Error in connection establishment: net::ERR_CONNECTION_REFUSED

WebSocket関連のエラーっぽいので、Scatterのアプリを起動。
Scatterアプリ

やっとエラーがなくなりました！
たぶん上手く連携できていると思うので、ログイン関連のソースも追加してみます。

scc.component.ts

import { Component, OnInit } from '@angular/core';

import ScatterJS from 'scatterjs-core';
import ScatterEOS from 'scatterjs-plugin-eosjs';

const network = ScatterJS.Network.fromJson({
  blockchain:'eos',
  chainId:'5fff1dae8dc8e2fc4d5b23b2c7665c97f9e9d8edf2b6485a86ba311c25639191',
  host:'kylin.fn.eosbixin.com',
  port:80,
  protocol:'http'
});

@Component({
  selector: 'app-scc',
  templateUrl: './scc.component.html',
  styleUrls: ['./scc.component.css']
})

export class SccComponent implements OnInit {

  private scatter: any = null;

  constructor() { }

   ngOnInit() {
    ScatterJS.plugins( new ScatterEOS() );
    
    ScatterJS.scatter.connect('MyAppName', {network}).then(connected => {
      if(!connected) return false;

      this.scatter = ScatterJS.scatter;

    });
  }

  login() {
    this.scatter.login().then();
  }

  logout() {
    this.scatter.forgetIdentity()
    this.scatter.logout()
  }

  showIdentity(){
    console.log(this.scatter.identity);
  }
}

scc.component.html

<input type='button' (click)="login()" value="ログイン"/>
<input type='button' (click)="showIdentity()" value="表示"/>
<input type='button' (click)="logout()" value="ログアウト"/>

やっとエラーなく画面が表示されました。

ログインボタンを押してみます。

Scatterで設定してるアカウントが表示されました！
dev345111123のアカウントを選択。
表示ボタンを押して、取得したアカウント情報をコンソールに出力してみます。

ちゃんと取得できてるみたいです。
最後にログアウトしてから、表示ボタンを押してみます。

ちゃんと消えてます。
最後にfirebaseでも動くか一応確認。

$ ng build
$ firebase deploy

大丈夫そうです。
https://angscctest.firebaseapp.com/

一応、AngulerでScatterとの連携ができました。

まとめ

正しいやり方かわかりませんが、一応AngulerとScatterを連携することができました。
せっかく連携することができたので、Scatterを使って何か動くものを作れればと思います。