こんにちは。営業をやっていたりエンジニアっぽい事をやっています。ブロックチェーンをアプリに組み込むのって難しそうに感じますか？実は各ブロックチェーンプロジェクトからは開発用のSDKが公開されている事があり、これを利用することで簡単に組み込む事が出来ます。
今日はそのSDKとJavascriptによりアプリ開発が可能なExpoを活用して、アプリを動かす所までやってみたいと思います。
警告
M1 Macの方はRossetaに対応させる必要があります。本手順はIntel版でのみ有効です
環境準備
端末
パソコン ... Windows/Mac
スマホ ... iOS/Android
環境
Node.js
Expo-cli@5.3.0
最初に
実行用アプリのインストール
Androidの方は以下のアプリをインストールして下さい
iPhoneの方は以下のアプリをインストールして下さい
Node.jsのインストール
まずは手始めにNode.jsをインストールしましょう。以下URLにアクセスし、推奨版（LTS）と表示されているものをインストールしましょう
Expo-cliのインストール
Expoを動作させる為に必要です。インストールしましょう。まずは手始めに前の手順であるNode.jsが問題なくインストールされているか確認しましょう。Macの方はターミナル Windowsの方はコマンドプロンプトを起動して以下を実行して下さい
npm -v
もし数字だけが表示されたら成功ですが（例：6.14.16）、npmは存在しません、みたいなエラーが表示された際にはセットアップに失敗していますので、Node.jsのインストールをやり直して下さい
上記が問題なく実行できたら次は以下を実行しましょう
npm install --global expo-cli
上記がエラーなく実行が出来たら以下を実行してみて下さい。 npm -v 同様、数字が表示されたら問題ありませんので次へ進んで下さい
expo-cli --version
プロジェクトの作成と編集
早速アプリを作っていきましょう。まずは土台を作成します。Macの方はターミナル Windowsの方はコマンドプロンプトを起動して以下を実行して下さい
Macの方
cd ~
expo init blockchain-project
Windowsの方
cd %HOMEPATH%
expo init blockchain-project
以下のような選択肢が表示されると思います。
上下キーで移動できますので、 blank（Typescript） を選択しましょう。
? Choose a template: › - Use arrow-keys. Return to submit.
----- Managed workflow -----
blank a minimal app as clean as an empty canvas
❯ blank (TypeScript) same as blank but with TypeScript configuration
tabs (TypeScript) several example screens and tabs using react-navigation and TypeScript
----- Bare workflow -----
minimal bare and minimal, just the essentials to get you started
自動でプロジェクトの作成が始まります。処理が終わるまで暫くお待ち下さい。
以下のような画面が表示されたら成功です。
✅ Your project is ready!
To run your project, navigate to the directory and run one of the following npm commands.
- cd blockchain-project
- npm start # you can open iOS, Android, or web from here, or run them directly with the commands below.
- npm android
- npm ios
- npm web
まだこの段階ではBlockChainは組み込んでいませんが、まずはこの状態でアプリとして実行してみましょう
上記で表示されているように、Macの方はターミナル Windowsの方はコマンドプロンプトにて以下の通りに実行して下さい
cd blockchain-project
npm start
すると画面にQRコードが表示されます。これをスマホのQRコードリーダーで読み取ってみましょう
※ Androidの方は事前にインストールしたExpoアプリ内にもQRコードリーダーが内蔵されています。iOSは標準のQRコードリーダーを利用下さい
スマホの画面に Open up App.tsx to start working on you app! と表示されましたらアプリとして実行成功です。おめでとうございます。
では一旦パソコンの Macの方はターミナル Windowsの方はコマンドプロンプト に戻りまして CTRL+C キーを押して一旦実行中のスクリプトを終了しておきます。
※ この時に ターミナル、もしくはコマンドプロンプトは終了せず、そのままにしておいて下さい
ブロックチェーンを組み込む
今回はSDKが提供されているブロックチェーン Symbol を使ってみます。
先ほどのコマンドプロンプトに戻り、以下を実行して下さい
npm install symbol-sdk@1.0.0 rxjs@6.6.3 buffer event process util react-native-expo-crypto react-native-expo-bitcoinjs-lib readable-stream
次に以下の通りに実行して下さい
Macの方
touch metro.config.js
touch shim.js
open .
Windowsの方
copy nul metro.config.js
copy nul shim.js
explorer .
この段階でWindowsの方はエクスプローラ、Macの方はFinderが立ち上がっていると思います
以下のファイルをWindowsの方はメモ帳、Macの方はテキストエディットで開きましょう
metro.config.js
shim.js
App.tsx
それぞれのファイルの中身を以下の通りに差し替えをして下さい
metro.config.js
module.exports = {
resolver: {
extraNodeModules: {
crypto: require.resolve("react-native-expo-crypto"),
stream: require.resolve("readable-stream"),
buffer: require.resolve("buffer"),
events: require.resolve("events"),
},
},
};
shim.js
if (typeof __dirname === 'undefined') global.__dirname = '/';
if (typeof __filename === 'undefined') global.__filename = '';
if (typeof process === 'undefined') {
global.process = require('process');
} else {
const bProcess = require('process');
for (var p in bProcess) {
if (!(p in process)) {
process[p] = bProcess[p];
}
}
}
// process.browser = false;
if (typeof Buffer === 'undefined') global.Buffer = require('buffer').Buffer;
global.location = global.location || { port: 80 };
const isDev = typeof __DEV__ === 'boolean' && __DEV__;
process.env['NODE_ENV'] = isDev ? 'development' : 'production';
if (typeof localStorage !== 'undefined') {
localStorage.debug = isDev ? '*' : '';
}
// If using the crypto shim, uncomment the following line to ensure
// crypto is loaded first, so it can populate global.crypto
// require('crypto')
App.tsx
import "./shim";
import { StyleSheet } from 'react-native';
import React, { useLayoutEffect, useState } from "react";
import { StatusBar } from "expo-status-bar";
import { Account, NetworkType } from "symbol-sdk";
import { View, Text } from "react-native";
export default function App() {
const [privateKey, setPrivateKey] = useState<string>("");
const [address, setAddress] = useState<string>("");
useLayoutEffect(() => {
const account = Account.generateNewAccount(NetworkType.TEST_NET);
setPrivateKey(account.privateKey);
setAddress(account.address.pretty());
}, []);
return (
<View style={styles.container}>
<Text>Hello Symbol BlockChain!!</Text>
<Text style={{ marginTop: 20, textAlign: "left" }}>
アカウントの秘密鍵（第三者には共有してはなりません）
</Text>
<Text style={{ marginTop: 10, textAlign: "left" }}>
{privateKey}
</Text>
<Text style={{ marginTop: 20, textAlign: "left" }}>
アカウントのアドレス
</Text>
<Text style={{ marginTop: 10, textAlign: "left" }}>
{address}
</Text>
<StatusBar style="auto" />
</View>
);
}
const styles = StyleSheet.create({
container: {
flex: 1,
backgroundColor: '#fff',
alignItems: 'center',
justifyContent: 'center',
},
});
差し替えは出来ましたか？
出来ていましたらMacの方はターミナル Windowsの方はコマンドプロンプトにて以下の通りに再度実行し、アプリを実行しましょう
npm run start
また、QRコードが表示されると思いますので、これをQRコードリーダーで読み取ってアプリを起動します。
すると先ほど起動時のアプリが残っている場合がありますので、画面が先ほどと変わらない場合は Macの方はターミナル Windowsの方はコマンドプロンプトにて r と打ち込みましょう。更新されます。
これでアプリ画面上にブロックチェーンの秘密鍵とアドレスが表示されていたら成功です！
これにてアプリへブロックチェーンの実装が出来ました。今回はアカウントを作っただけですが、もちろん送金や署名等も出来ます。
より詳細に色々やってみたい方はこちらのドキュメントを参照するか、以下Twitterアカウント等へメンションしてみて下さい。
親切な方が教えてくれるかもしれません
ドキュメント
Twitter1
Twitter2
Discord
最後にオススメ記事（私の記事ではありません）
↧