JS 프로젝트 - Computer AI

받은 피드백

중복된 코드들을 깔끔하게 정리하고, 기능에 따라서 js파일을 다시 나누고 폴더로 정리.

프롬프트 엔지니어링으로 ChatGPT의 응답을 좀 더 깔끔하게 정리.

21년도 자료까지만 학습되어있기때문에, 컴퓨터 부품에 대한 최신 정보를 주입시켜야한다.

 

 

 

첨부터 끝까지 뜯어 고칠점이 많은 첫 프로젝트.

ChatGPT API를 처음 써봤다는거에 너무 큰 기쁨과 설렘을 느껴버렸다.

공부하면서 틈틈히 다듬어서 다나와 ai견적 추천을 이기고싶다.

---

 

 

 

 

ChatGPT를 이용한 PC 부품 추천 & PC 질문 서비스

• 예산과 용도, 요구사항 등을 입력하면 chatGPT를 통해서 적절한 PC 부품을 추천해주는 웹 서비스 입니다.
• 컴퓨터의 하드웨어 종류와 추천해주는 부품에 대한 정보를 챗봇에게 물어볼 수 있습니다.
• 내 PC가 고장나거나 어떠한 문제가 있을 때 챗봇에게 물어볼 수 있습니다.1. 목표와 기능

1.1 목표

• 컴퓨터에 대해서 관심 없거나 잘 모르는 사람들에게 유용한 정보를 제공하는 서비스
• PC 구매부터 이후 사용시 일어나는 문제까지 모든 도움을 받을 수 있는 서비스
• 컴퓨터에 대한 지식이 부족해서 일어날수있는 안타까운 문제와 상황을 방지하는 서비스

1.2 기능

• ChatGPT를 활용해서 예산과 용도에 따라 적절한 견적을 추천
• ChatGPT를 활용해서 부족한 컴퓨터 지식을 챗봇에게 물어볼 수 있습니다.2. 개발 언어 및 배포 URL

2.1 개발 언어

• Web 구현
  • JavaScript
• 서비스 배포
  • Github Page

2.2 배포 URL

https://userdonghu.github.io/ChatGPT_Project/

3. 프로젝트 파일 설명 및 구현 기능

3.1 프로젝트 파일 설명

.
├── README.md
├── img
│   ├── bg3.jpg
│   ├── favicon.ico
│   ├── logof.png
│   ├── question.png
│   └── recommend.png
├── index.html
├── pcGPT.css
├── pcGPT.js
├── question.js
└── recommend.js

• index.html
  • 초기화면을 보여줍니다.
• pcGPT.js
  • 초기 화면에서 PC견적, PC질문을 각각 클릭했을 때의 화면을 변경하고, 로고를 누르면 다시 초기 화면을 보여줍니다.
  • PC견적 화면을 선택했을 때, ChatGPT API를 이용하여 폼에 입력받은 값을 데이터로 넘기고, 결과를 출력합니다.
  • 출력된 PC견적 결과를 로컬스토리지에 저장하고, 로컬스토리지에 저장된 값을 불러와서 출력합니다.
  • PC질문 화면을 선택했을 때, ChatGPT API를 이용하여 입력받은 질문을 데이터로 넘기고, 그 결과를 채팅형식으로 출력합니다.
• recommend.js
  • PC견적 화면을 선택했을 때, 사용자가 입력할 폼을 만듭니다.
  • 폼에 입력받은 값을 분류하여 배열로 정리하고, 이를 하이퍼링크로 생성하여 반환합니다.
• question.js
  • PC선택 화면을 선택했을 때, 질문을 입력할 폼을 만듭니다.
  • 질문과 답변을 구분합니다.
  3.2 구현 기능
• 메인화면
  • PC견적 또는 PC질문 선택 가능
  • 로고 클릭 시 다시 메인화면이 보입니다.
• PC견적
  • 폼이 나타나고 예산과 할 작업, 모니터 사양, 추가 요구사항을 기입할 수 있습니다.
  • 견적 추천 버튼 클릭시 ChatGPT API를 이용해 적절한 견적 추천합니다.
  • 추천된 부품을 클릭시, 부품에 대한 가격 비교를 할 수 있는 쇼핑몰로 이동합니다.
  • 견적 저장 버튼 클릭시, 추천된 견적을 로컬스토리지에 저장합니다.
  • 저장된 견적 보기 버튼 클릭시, 저장된 견적이 나타나며 삭제 버튼으로 삭제할 수 있습니다.
• PC질문
  • 질문을 입력할 폼과 버튼이 나타나며 여러 질문을 할 수 있습니다.
  • 질문 입력 후 질문하기 버튼 클릭시 사용자의 질문과 ChatGPT API를 이용한 답변을 채팅 형식으로 볼 수 있습니다.
  • 메인화면으로 나가거나 페이지를 닫기 전까지 계속해서 추가 질문과 답변을 할 수 있고, 채팅 형식으로 모두 나타남니다.

4. 파트별 소요 기간

파트	담당	기간	8/29	8/30	8/31	9/1	9/2	9/3	9/4	9/5	9/6
아이디어 기획	김동후		O
기본 UI 구현	김동후		O	O	O
AI API 연동	김동후			O	O
기능 및 결과 표시 구현	김동후			O	O	O	O	O
UI 완성	김동후				O	O	O	O	O
마무리 및 문서작업	김동후									O	O

5. UI

메인화면에서 PC견적과 PC질문을 선택할 수 있으며, 로고를 클릭시 다시 메인 화면이 나타납니다.

PC견적 화면에서 사용자가 폼에 입력하고 견적 추천 버튼을 누르면 잠시만 기다려주세요 문구가 나온 후, chatGPT가 추천해준 적절한 견적을 보여줍니다.

견적 저장을 누르면 로컬 스토리지에 견적이 저장되며 저장된 견적 보기를 누르면 저장된 견적을 보여주고, 견적 삭제를 누르면 저장된 견적이 삭제됩니다.

견적 추천 버튼 혹은 저장된 견적 보기 버튼을 통해 나타난 견적의 부품을 클릭하면 이를 구매할 수 있는 쇼핑몰 사이트로 이동합니다.

PC질문 화면에서 컴퓨터에 대한 다양한 질문을 할 수 있으며, 잠시만 기다려주세요 문구가 나온 후, 내 질문과 chatGPT의 답변이 채팅 형식으로 표시됩니다.

질문을 했지만 조금 더 궁금한 것이 있거나 더 질문할 것이 남아있을 경우, 추가로 질문을 하면 chatGPT가 이어서 답변을 해줍니다.

6. 아쉬운 부분과 고칠점

최대한 모듈을 분리해서 기능별로 깔끔하게 함수를 만들고 js파일을 나누고 싶었지만, 생각만큼 완벽하게 구분하지 못했습니다.

ChatGPT가 추천해준 견적을 배열로 나눠서 if문을 통해서 복잡한 과정으로 정리를 했는데, 이를 정규표현식 이용으로 더 간단하게 정리할 수 있을것 같습니다.