Go を学ぶ私の旅をフォローしてください

私はバックエンドで Go を使用し、フロントエンドで TypeScript で React を使用して小さなゲームを開発しています。普段の仕事では主に Laravel フレームワークを使用して PHP を操作しているため、Go は私にとって新しいプログラミング言語であり、実際にやってみることが学習の最良の方法であると考えています。このプロジェクトを構築する私の旅をフォローしてください。すでに半分まで終わっていますが、今後の PR については共有します。

そのゲームはSuspect Recallと呼ばれます。私がこれまでに得たものはここで見ることができます: https://www.suspectrecall.com まず、容疑者を数秒間見てから、その容疑者がどの属性を持っていたかを覚えておく必要があります。このプロジェクトの焦点では​​ありませんが、後ほどデザインを改善する予定です。

次のタスクは、無作為に容疑者を捕まえることです。コードのその部分の PR を開きました: https://github.com/artisanphil/suspect_recall/pull/4 コード レビューは大歓迎です。また、何人の人が Web サイトを試し、どれだけの間違いを犯したかを把握できるように、回答を保存する予定です。

コード構造の概要

元々、バックエンドとフロントエンドの 2 つのフォルダーを使用していましたが、バックエンド コードをルートに配置し、フロントエンド フォルダーをバックエンド フォルダー内に配置するのが実際には最適であることがわかりました。
フロントエンド コードをデプロイする必要はなく、ビルドから作成されたコードのみをデプロイする必要があります。ローカル開発用のコードを実行する方法については、Readme ファイルを参照してください。

プロジェクトをダウンロードしたばかりの場合は、フロントエンド フォルダーで npm install を実行して、依存関係をフォルダー 'node_modules' にプルする必要があります。
フロントエンド フォルダーに .env ファイルを作成し、REACT_APP_MODE=development を追加します。これは、ライブ リロードでフロントエンド コードを実行するときに、別のポートで実行される API エンドポイントを呼び出すためです。次に、npm run start を実行します。

localhost:3000 に移動してフロントエンドを表示できるようになりました。ご覧のとおり、API エンドポイントは機能しないため、ルート フォルダーに移動して go run を実行しましょう。ローカルで実行する場合は、別のポート (ポート 8080、ポート 8080、フロントエンドは 3000 です)。

c := cors.New(cors.Options{
        AllowedOrigins:   []string{"http://localhost:3000"},
        AllowedHeaders:   []string{"Origin", "Content-Type", "Accept"},
        AllowCredentials: true,
    })

本番環境で実行する場合、静的ファイルを作成する npm run build でフロントエンド コードをビルドした後、バックエンド コードを実行するだけなので、すべて同じポートで実行されます。ところで、私はコードを Google App Engine にデプロイしました。

この PR を確認してください。この PR では、容疑者 (現在ハードコードされています) を動的に取得し、フロントエンドでそのエンドポイントを呼び出すための新しい API を追加しています: https://github.com/artisanphil/suspect_recall/pull/4

コードの改善方法についてコメントをいただきありがとうございます。ご質問があれば全力でお答えします。

今後の進捗状況を確認するには、このリポジトリをご覧ください: https://github.com/artisanphil/suspect_recall

以上がGo を学ぶ私の旅をフォローしてくださいの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。