Previous << Day1 - 基礎編Part1
Next >> Day3 - 基礎編Part3
Why Flow
FLOW（または$FLOW）トークンは、Flowネットワークのネイティブ通貨です。開発者およびユーザーは、FLOWを使用してネットワーク上で取引(transact)を行うことができます。開発者は、ピアツーピア決済(他人同士の決済)、サービス料金徴収、または消費者向け特典(rewards)のために、FLOWを直接アプリに統合することができます。
ということでやっていきます、猿でも分かるP2P(ピアツーピア)決済アプリ開発!
今回は既にあるv1.0未満で開発されたプロジェクトをv1.0で動くようにして実際にデプロイします。
既存のHelloWorldプロジェクトをインポート
上記サイトのプロジェクトは初学者向けに非常に良いプロジェクトを提供しているのですが、これがv1.0未満のバージョンで作られているので、これをv1.0に対応させて、その動きを見てみます。
💡もし、エミュレータの起動方法やスマートコントラクトのデプロイについて操作に自信がない場合はこちらを参照してください。
以下コマンドをVSCodeのTerminalウィンドウで実行します。
> git clone https://github.com/emerald-dao/0-hello-world-svelte.git
0-hello-world-svelte フォルダをVSCodeで開きます。
npm install
下記コマンドを実行します。
npm install
プロジェクトをローカルで動かす
.env.exampleを.envにリネームします。
下記コマンドを実行します。
npm run dev
Output:
> 0-hello-world-svelte@0.0.1 dev
> vite dev
Forced re-optimization of dependencies
VITE v4.5.5 ready in 508 ms
➜ Local: http://localhost:5173/
➜ Network: use --host to expose
➜ press h to show help
出力されたlocalhostのURLをブラウザに貼り付けて、表示します。
エミュレータを起動する
VSCodeでターミナルウィンドウをもう一つ開き、以下コマンドを実行します。
flow emulator -v
コントラクトをデプロイする
VSCodeでターミナルウィンドウをもう一つ開き、以下コマンドを実行します。
flow project deploy
しかし、この時点ではv1.0以前のCadenceバージョンで書かれているために以下のような出力が表示され、デプロイが失敗します。
Output:
❌ Command Error: Parsing failed:
error: `pub` is no longer a valid access keyword
--> :1:0
|
1 | pub contract HelloWorld {
| ^^^
error: `pub` is no longer a valid access keyword
--> :3:4
|
3 | pub var greeting: String
| ^^^
error: `pub` is no longer a valid access keyword
--> :5:4
|
5 | pub fun changeGreeting(newGreeting: String) {
| ^^^
pubはv1.0以前のCadenceで有効だったアクセス修飾子ですが、v1.0ではaccess(all)と記載する必要があります。
コントラクトを修正する
/src/lib/flow/cadence/contracts/HelloWorld.cdcを開きます。
VSCode のExtentionが、このように修正すべきところに赤の波線を表示しています。
pubを全てaccess(all)に置き換えます。
再度、以下コマンドを実行します。すると、正常にコントラクトがエミュレータ上にデプロイされます。
flow project deploy
Output:
Deploying 1 contracts for accounts: emulator-account
HelloWorld -> 0xf8d6e0586b0a20c7 (bd0928d3d76a704e6a6e9d46fcced2f9db62ca34e2f91dd2a71afbd30847857a)
🎉 All contracts deployed successfully
Dev Walletを起動する
エミュレータが起動している状態で、以下コマンドを実行します。
flow dev-wallet
この状態でブラウザをリフレッシュし、画面右上のConnectをクリックすると、以下のようなウォレットを選択する画面が表示されます。
ウォレットの設定部分のエラーを修正する
src/lib/flow/config.ts をVSCodeで開くと以下のように、以下の修正すべきところに赤の波線が表示されています。
これはTypescriptによるエラーであり、既にメンテナンスがされていない為と推測されます。
src/lib/types/@onflow/index.d.tsを削除するとエラーが表示されなくなります。Flowには@onflow/typesがありますので、Typescriptの型には今後こちらを使うようにすると良いかもしれません。
src/lib/flow/config.tsは変更する必要がありません。
アカウントにサインイン
ブラウザをリフレッシュし、画面右上のConnectをクリックして、ポップアップ(ウォレットディスカバリー画面)でServiceAccountを選択します。
画面右上のConnect部分がアカウント表示に変わります。
Scriptコードの修正
この状態でブロックチェーンのエミュレータ・ネットワークとやり取りして、データを取得したり、変更したりするのですが、現時点ではエラーになります。画面下部に見えるGet greetingをクリックします。
VSCodeのTerminalウィンドウのflow emulator -vを実行していたタブには以下のように出力されます。
Output:
4:19PM WRN ❗ Script reverted computationUsed=0 memoryEstimate=5618 scriptID=74835c241cf982db9066fdb1b61714490a8062423963bfd12bbc0ac5c50318e9
4:19PM WRN ERR [74835c] [Error Code: 1101] error caused by: 1 error occurred:
* [Error Code: 1101] cadence runtime error: Execution failed:
error: `pub` is no longer a valid access keyword
--> 74835c241cf982db9066fdb1b61714490a8062423963bfd12bbc0ac5c50318e9:3:0
|
3 | pub fun main(): String {
| ^^^
そのため、上記エラー内容をヒントに、これをv1.0に対応した状態に修正します。
src/lib/flow/cadence/scripts/getGreeting.cdcを開くと以下のようにVSCode のExtentionが修正すべきところに赤の波線を表示しています。
これを以下のように修正します。
import "HelloWorld"
access(all) fun main(): String {
return HelloWorld.greeting
}
これでもう一度画面下部のGet greetingボタンを押します。
アプリの画面に以下が表示されます。
Current Greeting: Hello, World!
💡もし、エミュレータを再起動している場合は、flow project deployコマンドを再び実行して、エミュレータ上にスマートコントラクトを再度デプロイする必要があります。
Transactionコードの修正
- 画面上部の「1. Change your Greeting」のテキストボックスに"Googbye, World!"と入力します。
-
Change greetingをクリックします。
以下のポップアップが画面上に表示されます。
これはトランザクションの詳細を示しています。トランザクションはブロックチェーンのStateを変更する処理です。そのため提案者、支払者、承認者の３つの承認関数が必要ですが、このようにウォレットが代わりに用意してくれます。あとは承認者であるあなたがAPPROVEを押すと、デプロイされているスマートコントラクトに対して、それの編集権限があなたのアカウントのウォレットにアカウントキーとして保存されているので、それを使用してスマートコントラクトが変更されます。
ポップアップを下にスクロールすると、実際に行うトランザクションコードが表示されます。
signer: AuthAccountがApprove(承認)することによってトランザクションコードに渡されます。
APPROVEをクリックします。
Output
7:12AM DBG ✉️ Transaction submitted txID=13a708134d10b3143fefd9f161798136968351ab71c05302597fde499a2f13c9
7:12AM WRN ❗ Transaction reverted computationUsed=0 memoryEstimate=20001 txID=13a708134d10b3143fefd9f161798136968351ab71c05302597fde499a2f13c9
7:12AM WRN ERR [13a708] [Error Code: 1101] error caused by: 1 error occurred:
* transaction preprocess failed: [Error Code: 1101] cadence runtime error: Execution failed:
error: cannot find type in this scope: `AuthAccount`
--> 13a708134d10b3143fefd9f161798136968351ab71c05302597fde499a2f13c9:4:18
|
4 | prepare(signer: AuthAccount) {
| ^^^^^^^^^^^ not found in this scope
エラーになりました。これはAuthAccountがもうv1.0では使用できないからです。
src/lib/flow/cadence/transactions/changeGreeting.cdcを開くと以下のようにVSCode のExtentionが修正すべきところに赤の波線を表示しています。
これを以下のように修正します。
import "HelloWorld"
transaction(newGreeting: String) {
prepare(signer: &Account) {
}
execute {
HelloWorld.changeGreeting(newGreeting: newGreeting)
}
}
- 再度、画面上部の「1. Change your Greeting」のテキストボックスに"
Googbye, World!"と入力します。 -
Change greetingをクリックします。 -
APPROVEをクリックします。
画面右のアイコンがSealedに変われば成功です。
こちらのWebアプリは非常によくできているので、私はgit cloneして動作を見てみると大変勉強になると思い、今回記事にしました。こちらのWebアプリは以下のYouTubeで動作を見ることが出来ます。