概要

ユーザーが投稿を作成すると、既存のSNSはそのデータを集中的なサーバに格納します.
本プロジェクトでは,ユーザデータが持つweb 3の本質を考慮して,NFT投稿を発表した.
これは,ユーザが自分の財布の中のNFTを直接持つことができるようにするために開発された投稿である.
最初はイーサネットとクレイトンの2つのネットワークを開発するつもりでしたが、イーサネットの速度の問題で開発が困難でした.
クレイトンネットワークのみを開発した.
一方、不思議なことに、このプロジェクトに一緒に参加したすべてのメンバーがペットを飼っており、医療費の負担に合意している.
このような共通認識に基づいて,ブロックチェーンSNSに加えて利用者のペット医療費負担を軽減できるTokenがコメディを想定した.
作成した投稿は一般的なSNSのように他のユーザーに共有されており,互いに賛辞やコメントを残してコミュニケーションをとることができる.
特に、ユーザーは自分の投稿にほめられたときに追加のコインを受け取る.
このように支払ったコインは動物病院の予約に使用でき、コインに明確な使用場所を提供する.
ユーザの積極的なサービス利用を期待し設計した.
以前のプロジェクトでは他のチームメンバーも努力していましたが、特に今回のプロジェクトも最終プロジェクトです.
すべてのチームメンバーがペットを育て、プロジェクトの目標に共感し、うまくやり遂げることができました.
初期に想定していた機能をすべて実現し、AWSを活用して実装することができ、良いプロジェクト体験となりました.
詳細なレビューは、各機能の説明が完了した後、引き続き作成されます.
GitHubリンク
リンクの配置

1.登録&会員登録

ログインは、前のプロジェクト「奨励ベースのブロックチェーン」コミュニティを開発したときのように財布でログインできるように開発されています.
個別の登録プロセスがない場合は、Back-endに登録します.
ユーザーは財布を接続するだけでサービスを利用できます.

    const accounts = await window.klaytn.enable();
    let username = '';

    await axios.post(`${host}/user/login`, { address: accounts[0] })
      .then((res) => {
        const userInfo = res.data.data;
        if (userInfo !== null) {
          const username = userInfo.user_name === accounts[0] ?
            userInfo.user_name.slice(0, 4) + '···' + userInfo.user_name.slice(-4)
            : userInfo.user_name;

          localStorage.setItem('userId', userInfo._id);
          localStorage.setItem('isConnected', true);
          localStorage.setItem('account', JSON.stringify(accounts[0]));
          localStorage.setItem('networkType', 1);
          alert(`${username} 님!\n다시 돌아오신 것을 환영합니다!`);
          window.location.reload();
        } else {
          signup(accounts[0]);
          const username = accounts[0].slice(0, 4) + '···' + accounts[0].slice(-4)
          localStorage.setItem('isConnected', true);
          localStorage.setItem('account', JSON.stringify(accounts[0]));
          localStorage.setItem('networkType', 1);
          alert(`${username} 님!\nPETOPIA 구성원이 되신 것을 축하합니다~~\n회원정보는 마이페이지에서 수정하실 수 있습니다.`);
          window.location.href = `${domain}/mypage`;
        }
      });

上のコードは、ウォレット接続時に実行されるコードであり、ウォレット接続時にDBからユーザ情報を読み出し、既存会員か新規会員かを判断する.
既存会員の場合は、登録後にホームページに移動します.
新規会員であれば、ユーザ名を財布アドレスに設定し、DBにユーザ情報を格納する.
ログイン時に私のページに移動して、会員情報を変更します.

2.投稿の作成(NFTの公開)

投稿は一般的なSNSのように、ユーザーが画像やテキストを入力することで書かれています.
通常のSNSとは異なり、画像やテキストをDBに保存するのではなく、Infura IPFS APIを介してMETADATAを生成する.

    const createMetadata = async () => {

        const ipfsUrl = 'https://ipfs.infura.io/ipfs/';
        const imagePath = await uploadIPFS(imageFile);
        const metadata = {
            "description": inputText,
            "image": `${ipfsUrl}${imagePath}`,
            "name": "PETO_NFT",
        };
        const metadataPath = await uploadIPFS(JSON.stringify(metadata));
        createNFT(`${ipfsUrl}${metadataPath}`);

    };

    const uploadIPFS = async (file) => {
        const ipfs = create("https://ipfs.infura.io:5001/api/v0");
        return (await ipfs.add(file)).path;
    };

METADATAをtokenURIにロードし、NFT Mintリクエストを財布に送信します.
ユーザが承認すると、この財布を使用してNFT(KIP-17)が発行される.
データ取得時に見積からデータが取得されるため、発行済みNFTのTOKEN IDがデータベースに保存されます.
画像またはテキストに関する情報は保存されていません.

    const createNFT = async (tokenURI) => {
        const tokenContract = await new caver.klay.Contract(kip17Abi, contractAddress, {
            from: account
        });
        tokenContract.options.address = contractAddress;

        const newTokenId = await tokenContract.methods.mintNFT(tokenURI)
        .send({ from: account, gas: 0xf4240 });

        const postInfo = {
            "tokenId": newTokenId.events.Transfer.returnValues.tokenId,
            "userId": localStorage.getItem('userId'),
            "postDate": new Date(),
            "networkType": localStorage.getItem('networkType')
        };

        await axios.post(`${host}/post/`, postInfo)
            .then((res) => {
                const postInfo = res.data.data;
                if (postInfo !== null) {
                    alert(`우리 아기 추억 저장 완료!`);
                    window.location.replace(`${domain}`);
                } else {
                    alert(`게시물 작성이 실패하였습니다.\n관리자에게 문의하세요.`);
                }
            });
    };