3.投稿の参照

ホームページには、すべてのユーザーが閲覧できる投稿と、関心のある投稿の2つの分類が開発されています.

    const postList = await (await axios.get(`${host}/post/${networkType}`)).data.data;
    // const tokenContract = await new web3.eth.Contract(erc721Abi, contractAddress);
    const tokenContract = await new caver.klay.Contract(kip17Abi, contractAddress);
    const totalSupply = await tokenContract.methods.totalSupply().call();
    setNFTList([]);
    let arr = [];

    for (let i = 1; i <= totalSupply; i++) {
      arr.push(i);
    }
    arr = arr.map(el => el).reverse();

    for(let postInfo of postList) {
      for (let tokenId of arr) {
        if(tokenId === postInfo.token_id && !postInfo.isDelete) {
          let tokenOwner = await tokenContract.methods.ownerOf(tokenId).call();
          let tokenURI = await tokenContract.methods.tokenURI(tokenId).call();
          const metadata = await (await axios.get(`${tokenURI}`)).data;
    
          // isAll이 true면 전체 피드 로드
          if (isAll) {
            setNFTList((prevState) => {
              return [...prevState, { postInfo, tokenId, metadata }];
            });
          } else {  // false면 팔로워 피드만 로드
            if (String(tokenOwner).toLowerCase() !== account.toLowerCase()) {
              for (let follow of followList) {
                if (postInfo.user._id === follow.follower._id) {
                  setNFTList((prevState) => {
                    return [...prevState, { postInfo, tokenId, metadata }];
                  });
                }
              }
            }
          }
        }
        
      }
    }

投稿情報をロードする方法は、まずDBにデータを要求して受信することである.
DBのTOKEN IDと、KIP-17が配備されているCONTRAACTのTOKEN LISTとを比較して、一致した情報を読み取る.
これにより、投稿が削除されても、財布にNFTデータが残っているため、DBから削除されます.
常に自分の持っているデータで保存することができます.

4.いいねをもらう

賛美機能は病院予約に利用できるPETO TOKEN(KIP-7)支払い手段であり,ユーザの積極的なサービス利用を期待し設計した.
ユーザーが自分で書いた投稿で他のユーザーに好かれると、管理者アカウントを通じて一定数のPET TOKENが得られます.
支払いのPET TOKENの履歴は私のページで見ることができ、**は医学ページで病院予約サービス**を開発しています.

    const caver = new Caver('https://api.baobab.klaytn.net:8651/');
    const amount = 0x8ac7230489e80000;
    
    // add admin wallet
    const adminKeyring = caver.wallet.add(caver.wallet.keyring.createFromPrivateKey(kasSecretKey));

    // Create KIP7 Instance with TokenAddr
    const kip7 = new caver.kct.kip7(kasTokenAddr);
    
    // Transaction
    kip7.options.from = adminKeyring.address;
    const result = await kip7.transfer(toAddress, amount);

    caver.wallet.remove(kasAccessKey);
    return result.status;

上のコードは、[いいね]をクリックしたときにサーバ上で実行されるコードです.
あらかじめ配置したKIP−7トークンを管理者アカウントから投稿者に送信する財布を開発した.
トランザクションを生成するためにCaver-jsを使用します.
詳細については、Caver-js Docsを参照してください.

5.病院の予約

病院予約サービスは、賛美を通じて提供されるPETO TOKENを消費する場所です.
ユーザーは「医療サービス」ページで、病院のリストから必要な病院を選択し、予約可能な時間帯を選択して診察を予約することができます.
予約が完了すると、お財布から病院のお財布の中の指定数のPET TOKENに発送されます.
予約状況はすでに開発されていて、私のページで見ることができます.

    const sendToken = async (recipient) => {
        const sender = JSON.parse(localStorage.getItem('account'));
        const amount = 1;
        const decimal = 18;
        let txResult = false;

        const data = caver.klay.abi.encodeFunctionCall(
            {
              name: 'transfer',
              type: 'function',
              inputs: [
                {
                  type: 'address',
                  name: 'recipient'
                },
                {
                  type: 'uint256',
                  name: 'amount'
                }
              ]
            },
            [
              recipient,
              caver.utils
                .toBN(amount)
                .mul(caver.utils.toBN(Number(`1e${decimal}`)))
                .toString()
            ]
          )

          const txHash = await caver.klay
            .sendTransaction({
              type: 'SMART_CONTRACT_EXECUTION',
              from: sender,
              to: kip7CA,
              data: data,
              gas: '100000'
            })
            .on('transactionHash', transactionHash => {
              console.log('txHash', transactionHash)
            })
            .on('receipt', receipt => {
              console.log('receipt', receipt)
              txResult = true;
            })
            .on('error', error => {
              console.log('error', error)
            })

        return txResult;

予約トークン転送は,フロントでCaver-jsを用いてトランザクションを行う.
詳細については、Caver-js Docsを参照してください.

振り返る

まず、最終プロジェクトの導入に成功して嬉しいです.
実際、これまでの2つのプロジェクトでは、個人的に完成度の面で残念な点が多かった.
もちろん、以前のチームメンバーもよくやっていましたが、私自身は満足していません.
一つのプロジェクトでも、完成度のある成果として、完成したいと思っています.
だから初めてプロジェクトを計画した時、前のプロジェクトを行いたいと思って、残念なことをよく完成したいと思っています.
前のプロジェクトで触れた内容にコインを加えて、高度化の方向に発展するように計画されています.
テーマは少し明らかかもしれませんが、1つ目と2つ目の項目の延長線のような感じがしますが、
すべてのチームメンバーが努力し、完成度のある結果を得たようなので、最終的なプロジェクトは満足できます.
技術的観点から,Caver−jsを用いてクレイトンネットワークAPIを実現する方法を理解した.
サーバ設計、Mongooseの使用、反応中の状態管理など.
この22週間、彼がブットキャンプで育った様子を見ることができます.
この間、キャンプ場で学んだことは、全スタックブロックチェーン開発者になるための基礎となっている.
これからもっと自己開発に励みましょう!