EasyForms_NET.vbダウンロード - EasyForms_NET.vbソースコードのダウンロード

EasyForms_NET.vb

ビジュアルベーシック

1.0.0

ダウンロード

Google フォームのクローン

このプロジェクトは、ユーザーが送信内容を作成および表示できるようにする Google フォームの単純なクローンです。バックエンドサーバーを使用してデータを処理し、フロントエンドアプリケーションを使用してユーザーと対話する方法を示します。バックエンドは Node.js と Express を使用して構築され、フロントエンドは Visual Studio の Visual Basic を使用して構築されます。

導入

目的

このプロジェクトの目的は、ユーザーが新しい送信を作成したり、既存の送信を表示したりできる、シンプルなフォーム送信システムを提供することです。これは、フロントエンドアプリケーションとバックエンドサーバーを統合する例として機能します。

特徴

ユーザーの詳細とストップウォッチ時間を使用して新しいフォーム送信を作成します。
既存の提出物を表示し、「次へ」ボタンと「前へ」ボタンを使用してそれらの間を移動します。
JSON ファイルをデータベースとして使用したデータの永続化。

建築

バックエンド

Node.jsとExpress は、単純な REST API を作成するために使用されます。
fsモジュールは、JSON ファイル ( db.json ) へのデータの読み取りと書き込みに使用されます。

フロントエンド

フロントエンドアプリケーションの作成には、 Visual StudioのVisual Basicが使用されます。
フロントエンドアプリケーションは、 CreateSubmissionFormとViewSubmissionsFormという 2 つの主要なフォームで構成されます。

プロジェクトの構造

グーグルフォームクローン/
│
§── スライドして/
│ §── dist/
│ │ §──server.js
│ §── src/
│ │ §── db.json
│ │ §──server.ts
│ §──node_modules/
│ §── package.json
│ §── tsconfig.json
│ └── README.md
│ └── VisualStudioProject/
§── CreateSubmissionForm.vb
§── ViewSubmissionsForm.vb
§── プログラム.vb
━── VisualStudioProject.sln

Slidely : バックエンドコードが含まれます。
- dist : コンパイルされた JavaScript ファイル。
- src : ソース TypeScript ファイルとデータベース JSON ファイル。
- node_modules : Node.js の依存関係。
- package.json : Node.js プロジェクトの構成。
- tsconfig.json : TypeScript の設定。
VisualStudioProject : フロントエンドコードが含まれます。
- CreateSubmissionForm.vb : 新しい送信を作成するためのフォーム。
- ViewSubmissionsForm.vb : 既存の送信を表示するフォーム。
- Program.vb : メインプログラムファイル。
- VisualStudioProject.sln : Visual Studio ソリューションファイル。

インストール

前提条件

Node.js
npm
.NET をサポートする Visual Studio

バックエンドのセットアップ

リポジトリのクローンを作成します。

git clone https://github.com/yourusername/google-forms-clone.git
cd google-forms-clone/Slidely

必要な依存関係をインストールします。
```
npm install
```
TypeScript ファイルをコンパイルします。
```
tsc
```

フロントエンドのセットアップ

Visual Studio でVisualStudioProjectソリューションを開きます。
必要な NuGet パッケージがすべてインストールされていることを確認してください。 NuGet パッケージが欠落している場合は、復元する必要がある場合があります。

プロジェクトの実行

バックエンドサーバーの起動

Slidelyディレクトリに移動します。
```
 cd google-forms-clone/Slidely
```
サーバーを起動します。
```
node dist/server.js
```
次のメッセージが表示されるはずです。
```
 Server is running on http://localhost:3000
```

フロントエンドの実行

Visual Studio でソリューションを開きます。
必要に応じて、スタートアップフォームをCreateSubmissionFormまたはViewSubmissionsFormに設定します。
F5キーを押すか、Visual Studio のStartボタンをクリックして、プロジェクトを実行します。

APIエンドポイント

投稿/送信

説明: 新しいフォームエントリを送信します。

リクエスト本文:

{
  "name" : " John Doe " ,
  "email" : " [email protected] " ,
  "phone" : " 1234567890 " ,
  "github_link" : " https://github.com/johndoe " ,
  "stopwatch_time" : " 00:05:00 "
}

応答：
```
{
  "success" : true
}
```

GET/読み取り

説明: インデックスによってフォームエントリを取得します。
クエリパラメータ:
- index : 取得する送信のインデックス。

応答：

{
  "submission" : {
    "name" : " John Doe " ,
    "email" : " [email protected] " ,
    "phone" : " 1234567890 " ,
    "githubLink" : " https://github.com/johndoe " ,
    "stopwatchTime" : " 00:05:00 "
  }
}

使用法

提出物の作成

Visual Studio でCreateSubmissionForm開きます。
名前、電子メール、電話番号、GitHub リンクなどの必要な詳細を入力し、ストップウォッチを開始します。
Submitボタンをクリックして送信内容を保存します。
- フォームデータは、 /submitへの POST リクエストを介してバックエンドサーバーに送信されます。
- 送信が成功すると、確認メッセージが表示されます。

提出物の表示

Visual Studio でViewSubmissionsForm開きます。
NextまたはPreviousボタンをクリックして、提出物間を移動します。
- フォームは、現在のインデックスをクエリパラメーターとして使用して、 /readへの GET リクエストを介してバックエンドサーバーからデータを取得します。
- 送信の詳細がフォームフィールドに表示されます。