どのように、私はWEB 3とマイクロフロントエンドでCrowd資金プラットホームをつくりましたか

過去数ヶ月間、私はマイクロフロントエンド＆WEB 3技術について学んでいました.学ぶための最良の方法は、手を試しているので、私はトピックの私の理解をテストするために小さな側のプロジェクトを構築した.
プロジェクトの目的は、マイクロフロントエンドアーキテクチャを利用したEthereumブロックチェーンに基づく群落資金提供プラットフォームを作成することであった
ここでソースコードに飛び込むことができます

ruppysuppy / Crypto-Crowdfund
🤑💰 あなたの創造的なプロジェクトを生命に持ってくるEthereum
ウェブサイトはこちらhttps://crypto-crowdfund.web.app/
注:あなたはMetaMask 財布は、チェーンと対話する

スマート契約
あなたはスマート契約を使用してEthereumのブロックチェーンと対話することができますので、我々の要件ごとに1つを作成しましょう.プロジェクトで使用される契約は利用可能ですhere
展開されたスマート契約への変更を行うことはできません、そして、あなたは契約を再配備しなければなりません.だからあなたが必要ですextensively test 展開前の契約
スマート契約においてデータを格納することによって、ガス料金も発生するので、キャンペーンマネジャー、トランザクション要求のための票などの重要なデータだけがブロックチェーンに格納される.

改善

与えられたスマート契約だけを含む別々のファイルにキャンペーン工場とキャンペーンを分割してください

別のスマート契約としてマネージャ機能を追加し、継承を使用してキャンペーンに追加します

マイクロフロント
スマート契約を邪魔して、マイクロフロントエンドに集中しよう

マイクロフロントエンドアーキテクチャは、フロントエンドのアプリは、個々に、独立した“マイクロアプリ”緩み一緒に作業に分解されるデザインアプローチです.

Was Micro-Frontend Architecture essential for this project?

それに対する答えは明確です.ちょうど私が練習するために学んだものを置くこと.マイクロフロントエンドのアーキテクチャは、各チームの役割は、プロジェクトの小さなサブセクションだけで動作するように大きなチームとの作業時に便利です
マイクロフロントエンドはWebpackのモジュール連合プラグインを使用して実装されました.あなたがゼロからマイクロフロントエンドを実装する方法を学びたいならば、あなたはチェックアウトすることを非常に奨励されます
サブアプリとコンテナのそれぞれのWebPack設定は、同じ方法に従います.

メイクするcommon config 例えば、dev & prod buildの共有設定ファイルです.

// imports ...

module.exports = {
  // all shared config ...
};

メイクするdev config そして、common config

const { merge } = require('webpack-merge');
// other imports ...

const devConfig = {
    // all development config ...
  },
};

module.exports = merge(commonConfig, devConfig);

最後にprod config そして、common config

const { merge } = require('webpack-merge');
// other imports ...

const prodConfig = {
    // all production config ...
  },
};

module.exports = merge(commonConfig, prodConfig);

すべての設定ファイルをチェックアウトすることができますhere
注:プロジェクトのすべてのサブアプリは、反応を使用するが、非常によくそれらのいずれかで他のライブラリやフレームワークを使用することができます

マーケティング
簡単なサブアプリから始めましょうMarketing sub-app ホーム、FAQ、条件、条件、プライバシーポリシー、免責事項ページのレンダリングに責任があります.
マイクロフロントエンドSub Appsは、サブアプリケーションとコンテナ間のライブラリまたはフレームワークの依存関係を避けるためにジェネリック関数を公開するだけでなく、mount paramsとして単純なオブジェクトを取る関数.次の署名があります.

type Mount = (
  mountPoint: HTMLElement,
  {
    defaultHistory?: History | MemoryHistory;
    initialPath?: string;
    isAuthenticated?: boolean;
    routes: {
      HOME: string;
      ABOUT: string;
      FAQ: string;
      TERMS_AND_CONDITIONS: string;
      PRIVACY_POLICY: string;
      DISCLAIMER: string;
      CAMPAIGNS: string;
      SIGN_IN: string;
    };
    onNavigate?: ({ pathname: string }) => void;,
  },
) => {
    onParentNavigate: ({ pathname: string }) => void
  }

使用mount 機能は、コンテナは、要件ごとにサブアプリケーションをマウントすることができます.defaultHistory , onNavigate and onParentNavigate の両方のコンテナとサブアプリケーションを同期し、いくつかの厄介なバグを避けるために使用されます.

認証
次はAuth sub-app . これは、ログインし、ユーザーをサインアップし、それらに必要なアクセス許可を付与するFireBase認証を使用します.
これは、マーケティングのサブアプリとして同様に動作してmount 似たようなparams集合を持ち、サインを処理し、ページを登録する

改善

メソッドを使用して、MetaMask アカウントは、アプリケーションへのフルアクセスを取得する2つの場所でサインする必要性を削除する

ブロックチェーン
最後に、我々はすべてのサブアプリを理解するのが最も困難であるBlockchain sub-app プロジェクトの肉は、ユーザーがバックエンドとブロックチェーンと対話するのを可能にしますMetaMask ブラウザでの拡張
それはアカウント、キャンペーン、キャンペーンを処理し、キャンペーンページを作成します.
前述のように、重要なデータだけが契約に保存され、残りの部分はクラウドファイヤーストアに保存されます.キャンペーンからのデータは、ブロックチェーンにあるアドレスから取得され、その後、FireStoreからのデータは、指定されたキャンペーンの完全なデータを生成するためにマージされます.キャンペーンの作成者だけがFirestoreのデータを変更したり、貢献者が承認できる利用可能な資金を使うためにトランザクション要求を作成することができます.

改善

画像のアップロードを使用して、カバーイメージとユーザープロファイルの画像の両方に画像を追加するには

コンテナ
The Container 単一のアプリケーションにすべてのサブアプリを凝縮し、画面上に表示される制御する責任があります.

改善

即興UI

ラッピング
ついに終わった.

この記事では、プロジェクトの概要を紹介し、ソースコードに常にダイブすることができます

ruppysuppy / Crypto-Crowdfund
🤑💰 あなたの創造的なプロジェクトを生命に持ってくるEthereum
ハッピー開発!

読書ありがとう
あなたの開発苦悩を切り刻むためにトップ定格フロントエンド開発フリーランサーが必要ですか?私に連絡Upwork
私が何をやっているか見たいですか?チェックアウトマイPersonal Website and GitHub
接続したいですか?私に手を差し伸べる
私は2022年半ばにデジタル遊牧民としてスタートするフリーランサーです.したい旅をキャッチするには?フォローミーオン
私のブログに従ってください
よくある質問
これらは私が得るいくつかの一般的な質問です.それで、このFAQセクションがあなたの問題を解決することを望みます.

私は初心者です、どのようにフロントエンドのWeb devを学ぶ必要がありますか?
次の記事を見てください.

メンターミー?
ごめんなさい、私はすでに多くの労働負担の下にいて、メンター誰にも時間がないでしょう.

我々のサイトで協力したいですか?
前の質問で述べたように、私は時間がかからないので、そのような機会を経験しなければならないでしょう.