EasyForms_NET.vb 다운로드 - EasyForms_NET.vb 소스 코드 다운로드

EasyForms_NET.vb

비주얼 베이직

1.0.0

다운로드

Google 설문지 클론

이 프로젝트는 사용자가 제출물을 만들고 볼 수 있는 Google Forms의 간단한 복제본입니다. 백엔드 서버를 사용하여 데이터를 처리하고 프런트엔드 애플리케이션을 사용하여 사용자와 상호 작용하는 방법을 보여줍니다. 백엔드는 Node.js 및 Express로 구축되고, 프런트엔드는 Visual Studio에서 Visual Basic을 사용하여 구축됩니다.

소개

목적

이 프로젝트의 목적은 사용자가 새로운 제출물을 생성하고 기존 제출물을 볼 수 있는 간단한 양식 제출 시스템을 제공하는 것입니다. 이는 프런트엔드 애플리케이션을 백엔드 서버와 통합하는 예입니다.

특징

사용자 세부 정보와 스톱워치 시간이 포함된 새로운 양식 제출을 만듭니다.
기존 제출물을 보고 다음 및 이전 버튼을 사용하여 탐색하세요.
JSON 파일을 데이터베이스로 사용하는 데이터 지속성.

건축학

백엔드

Node.js 와 Express는 간단한 REST API를 만드는 데 사용됩니다.
fs 모듈은 JSON 파일( db.json )에 데이터를 읽고 쓰는 데 사용됩니다.

프런트엔드

Visual Studio 의 Visual Basic은 프런트엔드 애플리케이션을 만드는 데 사용됩니다.
프런트엔드 애플리케이션은 CreateSubmissionForm 및 ViewSubmissionsForm 두 가지 기본 양식으로 구성됩니다.

프로젝트 구조

google-forms-clone/
│
├── 슬라이드리/
│ ├── 거리/
│ │ ├── 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 요청을 통해 백엔드 서버에서 데이터를 가져옵니다.
- 제출 세부정보가 양식 필드에 표시됩니다.