OpenSea Clone Coding Project

プロジェクトの概要

今回のプロジェクトはNFTを直接作成し、NFTを売買できるNFT Marketplace Openseaをクローンする.チームメンバーは私を含めて3人で、チーム構成を含めて6日間行われました.
プロジェクトGitHubリンク
https://github.com/codestates/beb-03-GroundY
契約アドレス(Ropstenテストネットワークを使用)
https://ropsten.etherscan.io/address/0xb66df44befEdc0Cc63CD80F9F08EFC99CB9451fe

機能の概要

その名の通り、NFT Marketplaceを実施するには実際のNFT取引機能が必要ですが、私たちのチームは限られた時間で取引機能を実現することは難しいと考えています.したがって,我々のチームの目標は,プロジェクトに必要な財布接続とNFTリストのロードと伝送機能を優先的に実現し,ユーザによるNFTへの付加的なMinting機能を実現することである.実装機能を優先目標としているが、CSS部分にはまだ未完成の部分がある.以下では、正常に動作する機能について説明します.

ウォレット接続

ナビゲーションバーコンポーネントに財布接続機能が追加され、メタマスクと接続できるようになっている.この機能を実現するために、web 3.jsモジュールを使用しました.

import { useState, useEffect } from "react";
import Web3 from 'web3';

 const [web3, setWeb3] = useState();
  const [account, setAccount] = useState();
  const [isLoggedIn, setIsLoggedIn] = useState(false);

  const connectWallet = async () => {
	const accounts = await window.ethereum.request({
	  method: 'eth_requestAccounts'
	});

	setAccount(accounts[0]);
	setIsLoggedIn(true);
  }

  useEffect(() => {
    if (window.ethereum !== undefined) {
      try {
        const web3Obj = new Web3(window.ethereum);
        setWeb3(web3Obj);
      } catch (err) {
        console.log(err);
      }
    }
  }, []);

所有するNFTの表示と転送

画面上部に財布の住所が表示されます.
財布のアドレスがあるGroundY NFTを表示するには、View your GroundY NFTボタンをクリックします.
別の見積アドレスを入力して、そのアドレスを使用して作成された所有NFTを表示できます.
NFTの名前と属性を表示し、他の財布アドレスに送信できます.

NFTの作成

作成したい画像(NFT)をローカルにアップロードすると、IPFSにアップロードされ、このアドレスが再取得され、次のMintFormにコンテンツを入力しながらJSONが記録され、TokenURIが生成されます.この過程でipfs−http−clienモジュールを用いた.

プロセス

3人のチームメンバーが1つのプロジェクトの位置で区切るのは少し気まずいので、私たちはそれぞれのページで仕事をしています.

組長:Minting機能を追加するMintページを実施する
組員1:NFTを確認し、TokenListページを実装して転送
チームメンバー2(本人):プロジェクトとチームメンバーを紹介するためのホームページの実装
もちろん、各ページの実装は必要ですが、他の機能やコンポーネントが必要な場合は、追加の実装も行います.
この間、キャンプをスタートさせる過程で、一人で仕事をしたり、フェルと二人で仕事をしたりすることが多いので、分岐作業は行ったことがありませんが、今回は3人でそれぞれの知識ベースフォークリフトで分岐作業をしています.各人の成果物は、プライマリ・プロジェクト・ライブラリの開発ライブラリにプッシュされ、毎日行われるコードレビュー時間内にコードを議論し、コード競合の発生を最小限に抑えるためにマージされます.

に感銘を与える

起動の過程で、公平にプログラミングされたチームプロジェクトではなく、チームを構築することを最初に試み、プロジェクトの進展自体も学ぶべきところがたくさんあります.
まず、このプロジェクトを行う過程で、組長の主導でGithubを利用して協力する方法を身につけました.
従来、GithubはGithubを使用しており、Fork、Clone、Commit、Push、Pullなど限られた機能のみを使用しており、本プロジェクトを通じてGithubのコラボレーション機能を学びました.計画通りに話題にするのではなく、プロジェクト内のすべての作業に適応するには時間がかかりますが、プロジェクト内のすべての作業やワークフロー全体を理解するのに役立つと思います.私は時間をかけてGitHubをもっと勉強して熟知しなければなりません.
メンバーが書いたコードを見て、いろいろなことを学びました.毎朝、私たちは一日の内容を共有し、夜にコメント、プッシュ、合併を行い、チームメンバーのコードを表示し、そこから多くのことを学びました.チームメンバーが作成したコードだけでなく、エラー解決プロセスもあります.この過程で、私はいつも自分が足りないと思っています.そして、チームメンバーの仕事の内容を理解するのに想像以上に時間を費やしました.
メンバーとのコミュニケーションも重要です最初の種目だったので心配でしたが、みんなポジティブな人で気が合うので楽しく進めました.デルのチームチームチームメンバーは、デルの仕事だけでなく、可用性を向上させるために開発と共有にも参加し、より良い発展を支援しています.私はまだ他の人に多くの助けを提供していないので、残念なところがたくさんありますが、私はもっと勉強して、もっと分かち合うべきだと思います.