誰でも簡単にブロックチェーンアプリを作り、送金する

こんにちは。営業をやっていたりエンジニアっぽい事をやっています。ブロックチェーンをアプリに組み込むのって難しそうに感じますか？実は各ブロックチェーンプロジェクトからは開発用のSDKが公開されている事があり、これを利用することで簡単に組み込む事が出来ます。

今回の記事は 送金してみよう です。前回の記事の続きになるので、まだ読んでいない、やっていない方は以下の記事の手順を踏んでからこの記事に来て下さい

本記事は少し連載します

#1. 誰でも簡単にブロックチェーンモバイルアプリを開発する
#2. 誰でも簡単にブロックチェーンアプリを作り、送金する
#3. 誰でも簡単にブロックチェーンアプリを作り、マイ残高確認アプリを作る

環境準備

端末

パソコン ... Windows/Mac
スマホ ... iOS/Android

環境

Node.js
Expo-cli@5.3.0

最初に

前回の記事では取り敢えずアプリにブロックチェーンを組み込んで、チェーン内で活動する為のアカウント作成まで行いました。一旦、問題なく前回の記事の内容を修了出来ているか、以下の通りまずは確認して下さい

前回作業をしたフォルダを開く

前回の記事の通りに作業をして頂いた場合、ホームディレクトリ（デスクトップやダウンロードのフォルダがある所）に作成されています。
以下の通り実行してみましょう

Macの方（ターミナルにて）

open ~/blockchain-project 

Windowsの方（コマンドプロンプトにて）

explorer %HOMEPATH%¥blockchain-project

前回作業した時のファイルはありますか？
もしなければ前回の手順を踏んでいないと思われるのでやり直すか探して下さい

送金用のコードを追加する

問題なく前回のファイルがあればファイル「App.tsx」をメモ帳（Windows) or テキストエディット（Mac）にて開いて下さい。開けたらコードを以下のように差し替えて下さい

App.tsx

import "./shim";
import { Button, StyleSheet, Linking, ActivityIndicator } from 'react-native';
import React, { useState } from "react";
import { StatusBar } from "expo-status-bar";
import { Account, Deadline, NetworkType, PlainMessage, RepositoryFactoryHttp, TransferTransaction, UInt64 } from "symbol-sdk";
import { View, Text } from "react-native";

const example = async (): Promise<string> => {
  /**
   * nodeUrlはBlockChainにつなぐ際のNode URLです。他にも沢山あるので以下が繋がらない時は差し替えて下さい
   *     Test Net Node List https://symbolnodes.org/nodes_testnet/
   *     Main Net Node List https://symbolnodes.org/nodes/
   */
  // Block Chainネットワークに接続する為に必要なネットワーク側の情報を接続ノードより取得します
  const nodeUrl = 'https://test.hideyoshi-node.net:3001';
  const repositoryFactory = new RepositoryFactoryHttp(nodeUrl);
  const epochAdjustment = await repositoryFactory
    .getEpochAdjustment()
    .toPromise();
  const networkType = await repositoryFactory.getNetworkType().toPromise();
  const networkGenerationHash = await repositoryFactory
    .getGenerationHash()
    .toPromise();
  const { currency } = await repositoryFactory.getCurrencies().toPromise();

  /**
   * 私のテスト用アカウントより一時的に生成したあなたのアカウント宛に送金します
   * ここでは私のテスト用アカウントを復元し、送金先となるあなたのアカウントを作成しています
   * なおここではテスト用のアカウントとして私のアカウントの秘密鍵を公開していますが、あなたの秘密鍵は決して公開しないで下さい
   */
  const privateKey = "CC59EA75C5F9FBC787212EC3983BE4731117DD3385EAA383E86D606545F491A2";
  const yourAccount = Account.generateNewAccount(NetworkType.TEST_NET);

  /**
   * 送金をする為にはBlockChainに書き込む為のデータを作成します
   * ここではTransactionと呼んでいますが、これをまずは作成します
   */
  const transferTransaction = TransferTransaction.create(
    Deadline.create(epochAdjustment),
    yourAccount.address,
    [currency.createRelative(0)],
    PlainMessage.create("Qiita記事による送金。Symbol Test Net Transaction"),
    networkType,
    UInt64.fromUint(2000000),
  );

  /**
   * 私のテスト用アカウントにて上記で作成したTransactionに署名します
   * 署名は実行するという意思表示と同じです。
   * あなたのアカウントでは安易に署名しないように気をつけましょう
   */
  const account = Account.createFromPrivateKey(privateKey, networkType);
  const signedTransaction = account.sign(
    transferTransaction,
    networkGenerationHash,
  );

  /**
   * 作成&署名を終えたトランザクションをBlockChainのネットワークへ送信します
   * 送信しただけでは送金は確定せず、BlockChain側のアルゴリズムで承認され次第、それが確定されます
   */
  const transactionRepository = repositoryFactory.createTransactionRepository();
  await transactionRepository
    .announce(signedTransaction)
    .toPromise();

  /**
   * 送金が完了したため、ステータスを確認しにいきましょう
   * ちなみに各ノードでの同期までタイムラグがある為、もしかしたら反映されていないことがあります
   * その際には1-2分開けて再度開いてみましょう
   */
  console.log("送信結果を確認しよう（ブラウザにて開く）");
  console.log(`https://testnet.symbol.fyi/transactions/${signedTransaction.hash}`);
  return signedTransaction.hash;
};

export default function App() {
  const [hash, setHash,] = useState<string>("");
  const [loading, setLoading] = useState<boolean>(false);

  const onButtonPress = async () => {
    setLoading(true);
    try {
      const h = await example();
      setHash(h);

    } catch (e) {
      console.error(e);
    } finally {
      setLoading(false);
    }
  };


  return (
    <View style={styles.container}>
      <Text>Hello Symbol BlockChain!!</Text>
      <View style={{ justifyContent: "center", alignItems: "center" }}>
        <View style={{ marginVertical: 10 }}>
          <Button title="トランザクション発行" onPress={onButtonPress} />
        </View>

        <View style={{ marginVertical: 30 }}>

          {
            loading === true ? <>
              <ActivityIndicator　/>
              <Text>loading...</Text>
            </> :
              <View />
          }

        </View>
        <View style={{ marginVertical: 10 }}>
          <Button title="結果を確認" disabled={hash === ""} onPress={() => {
            Linking.openURL(`https://testnet.symbol.fyi/transactions/${hash}`);
          }} />
        </View>
      </View>
      <StatusBar style="auto" />
    </View>
  );
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    backgroundColor: '#fff',
    alignItems: 'center',
    justifyContent: 'center',
  },
});

補足
ブロックチェーンは多くのサーバーが接続先として稼働しています。コード内に https://test.hideyoshi-node.net:3001とありますが、今回はそのうちの一つを本記事向けに記載致しました。もしこのサーバーに繋がらなくなった際には以下ノードリストより他の稼働中のサーバーを探し接続して下さい
メインネット（本番環境） https://symbolnodes.org/nodes/
テストネット（検証環境） https://symbolnodes.org/nodes_testnet/

実行してみよう

以下画像のような画面が立ち上がったら成功です。早速押してみましょう。トランザクション発行ボタンを押すと読み込みが始まりますので、少し待って結果を確認ボタンを押すと送信結果を確認できるWebサイトを開きます

---

これで無事に送信処理が完了致しました！！

本記事の内容はここまでです。もっと深く勉強したい、もっと色々やってみたいという方は本記事最後にリンクしているTwitterアカウント宛に質問を投げてみるか、各種リファレンスをご確認下さい

最後に

今回コードの修正は全てOS標準のテキストエディターにて行いましたが、実際にはもっとちゃんとコードを編集する為のソフトがあります。私のオススメはVisual Studio Codeです。もっと機能開発をしていきたい、触っていきたいという方は是非こちらもインストールして色々試してみて下さい

オススメの記事、相談先のTwitterについて

ドキュメント

Twitter

Discord

最後にオススメ記事（私の記事ではありません）