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のインストール

```terminal
npm install -g @angular/cli
```

2. プロジェクト作成
 
```terminal
$ 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インストール

```terminal
npm install -g firebase-tools
```

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

```terminal
$ cd ang-scc-test
$ firebase login
$ firebase init
```
init時は以下を実行
- Firebase CLIの機能にHosting
- パブリックディレクトリ設定にdist
- 単一ページのアプリとして設定にyes

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

```json:angular.json
"outputPath": "dist",
```

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

```terminal
$ 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用のプラグイン取得

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

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

```terminal
$ ng generate component Scc
```

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

```html:src/app/app.component.html
<app-scc></app-scc>
```
3.Scatterのサイトを参考にとりあえず書いて動かしてみる

```typescript: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() );
  }
}
```
実行。

```terminal
$ ng serve
```
ビルドでエラー。

```terminal:エラー
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を追加でインストール。

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

```typescript: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/

```typescript: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アプリ](https://get-scatter.com/download)

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

```typescript: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);
  }
}
```
```html:scc.component.html
<input type='button' (click)="login()" value="ログイン"/>
<input type='button' (click)="showIdentity()" value="表示"/>
<input type='button' (click)="logout()" value="ログアウト"/>
```
やっとエラーなく画面が表示されました。
<img width="1429" alt="表示時.png" src="https://qiita-image-store.s3.amazonaws.com/0/359665/1fd99936-d68d-4e7c-fd5f-620a3b0cca27.png">

ログインボタンを押してみます。
<img width="1434" alt="ログイン.png" src="https://qiita-image-store.s3.amazonaws.com/0/359665/1cca600a-0474-0751-7f59-51a1f85ca0a9.png">

Scatterで設定してるアカウントが表示されました！
dev345111123のアカウントを選択。
表示ボタンを押して、取得したアカウント情報をコンソールに出力してみます。
<img width="1434" alt="表示.png" src="https://qiita-image-store.s3.amazonaws.com/0/359665/f702975c-ee6d-d035-23b5-6f3fd825beaa.png">

ちゃんと取得できてるみたいです。
最後にログアウトしてから、表示ボタンを押してみます。
<img width="1433" alt="ログアウト.png" src="https://qiita-image-store.s3.amazonaws.com/0/359665/8f4a8dfc-70f0-0a39-1d6c-eb15180de5b5.png">

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

```terminal
$ ng build
$ firebase deploy
```

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

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