AI 프로그래밍: 나의 첫 번째 Chrome 확장 프로그램 개발 – GPTBLOX

AI 코딩이 어떻게 ChatGPT 보호기 및 웹 관리와 같은 기능을 제공하는 Chrome 확장 프로그램 출시로 이어졌는지 알아보세요. ChatGPT 프로그래밍 접근 방식을 살펴보세요.

소개

안녕하세요 여러분, 저는 코딩 경험은 있지만 아직 개선의 여지가 있는 개발자 Yi Tao입니다. ChatGPT의 도움으로 저는 몇 달 안에 혼자서는 완료하지 못했을 Chrome 확장 프로그램을 2주도 안 되어 개발하고 시작할 수 있었습니다. 또한 곧 5개의 업데이트를 출시했습니다. 확장 프로그램은 현재 별다른 마케팅 없이도 거의 1,000명의 사용자를 보유하고 있습니다.

확장 링크: GPTBLOX – ChatGPT 데이터 저장/Bard Claude Saver

ChatGPT 코딩을 사용하여 Chrome 확장 프로그램은 어떻게 개발되었나요?

이것은 순전히 ChatGPT로 작성된 확장입니다. 한 줄의 코드도 작성할 필요가 없었습니다. 간단하게 ChatGPT와 대화를 하면서 현재 웹페이지의 HTML 콘텐츠를 얻어오는 것부터 시작해, 코드를 TXT 파일로 저장하고, 얻은 HTML 콘텐츠를 처리하고 최적화한 후 저장하고, HTML 파일, PDF 파일, PNG 이미지로 저장하는 작업부터 시작했습니다. 마지막으로 18개 언어 버전으로 수정했습니다. 첫 번째 버전을 개발하는 과정에서 저와 ChatGPT 사이에 많은 어려움과 오해가 있었지만, 결국 저의 지도와 ChatGPT의 끊임없는 협력을 통해 이를 극복했습니다.

GPTBLOX에 AI 프로그래밍을 선택하는 이유는 무엇입니까?

나는 나와 내 친구들의 요구 사항을 해결하고 싶었습니다. ChatGPT 계정이 자주 금지되었으며 ChatGPT 채팅 기록을 더 나은 방법으로 저장하고 싶었습니다. 이 확장 프로그램을 사용하면 클릭 한 번으로 모든 사람이 ChatGPT 대화를 자신의 컴퓨터에 저장할 수 있습니다. 계정은 쓸모가 없지만 ChatGPT를 통한 교육 기록과 창의적인 영감은 매우 귀중합니다.

AI 코딩을 통해 생성된 버전 내역

버전 1.0.0

ChatGPT 대화 기록을 HTML, TXT, PNG 및 PDF와 같은 여러 파일 형식으로 컴퓨터에 로컬로 저장하는 기능을 구현합니다. 대화 내용을 온라인으로 공유하거나 저장할 필요가 없으므로 데이터 유출에 대한 우려가 줄어듭니다. 또한 WordPress 플러그인 API를 ChatGPT와 통합하면 Chrome 확장 프로그램이 원격 WordPress 사이트에서 지정된 기사나 푸시 알림을 로드할 수 있습니다.

버전 1.1.0

그룹화, 드래그, 편집, 삭제 등 ChatGPT 대화 링크 관리 기능을 소개합니다. 확장 프로그램 페이지에서 이러한 대화 링크를 다양한 방식으로 관리할 수 있도록 허용하고 그룹 표시 방법에 대한 설정은 물론 그룹화된 링크에 대한 가져오기/내보내기 기능을 지원합니다.

버전 1.2.0

Bard, Claude 및 HuggingChat의 대화를 HTML, TXT, PNG 및 PDF와 같은 다양한 파일 형식으로 컴퓨터에 로컬로 저장하는 기능을 추가합니다.

버전 1.3.0

WordPress 기반 웹사이트의 기사를 HTML, TXT, PDF 등 다양한 파일 형식으로 로컬에 저장할 수 있습니다. 이는 다음 버전에서 웹 페이지와 대화 링크를 집계하고 관리할 수 있는 기반을 마련합니다. HTML, TXT, PDF 파일로 저장할 도메인, 제목, 콘텐츠를 지정하는 사용자 정의 옵션도 다른 웹사이트에서도 사용할 수 있습니다.

버전 1.4.0

현재 웹페이지 링크 저장을 허용하거나 현재 브라우저 창의 모든 페이지 링크를 웹페이지 관리 인터페이스에 집계합니다. 유연한 드래그 및 이동, 추가, 편집, 삭제, 잠금 및 다시 열기와 같은 기능을 지원합니다. 웹 페이지 관리 인터페이스의 표시 스타일을 하향식 및 폭포식 흐름으로 설정하는 옵션도 사용할 수 있습니다. 또한 웹 페이지 그룹 관리를 위한 1, 2, 3 또는 4개 열에 대한 설정을 지원하고 웹 페이지 그룹 및 링크에 대한 가져오기/내보내기 기능을 구현합니다.

버전 1.5.0

Claude 공식 웹사이트의 대화를 HTML, TXT, PNG, PDF 등 다양한 파일 형식으로 로컬에 저장하는 기능이 포함되어 있습니다. 또한 저장된 대화 기록에 사용자 지정 지침의 사전 정의된 지침을 포함하도록 ChatGPT 대화 저장 기능을 개선합니다.

GPTBLOX의 향후 계획

• Notion, Evernote, WordPress 웹사이트에 채팅 기록과 웹페이지 콘텐츠를 저장하는 기능을 추가하세요.
• 특히 사용자 경험 측면에서 웹페이지 수집 및 관리와 관련된 기능을 더욱 최적화하려면 Onetab 확장 프로그램에서 더 많은 것을 배워야 합니다.
• OpenAI 인터페이스를 통해 콘텐츠를 요약하고 완성하는 것을 포함하되 이에 국한되지 않고 저장된 웹페이지 콘텐츠를 추가로 처리하고 최적화하는 것을 고려하세요.

ChatGPT 프로그래밍 전략

단계별 출력

ChatGPT가 단계에 따라 파일이나 모듈에 코드를 작성하게 하세요. 예를 들어 먼저 필요한 파일을 결정한 다음 ChatGPT가 각 파일에 대해 별도로 코드를 출력하도록 합니다. 이렇게 하면 상황에 따른 논리 편차의 위험을 줄일 수 있습니다.

작은 진입점

프로젝트의 진입점은 ChatGPT가 완전하고 유용한 초기 버전을 출력할 수 있을 만큼 작아야 합니다. 초기 버전에 문제가 있는 경우 제한된 코드와 기능 범위로 인해 ChatGPT나 사람이 더 쉽게 수정할 수 있습니다.

최소 모듈

수정하거나 추가해야 하는 코드를 분리하고 매번 ChatGPT에 가능한 가장 작은 코드 덩어리만 제공하세요. 이렇게 하면 논리적 편차가 발생할 가능성이 최소화됩니다.

코드 확인

새로운 기능이나 논리를 추가하기 전에 새 대화 창을 시작하고 확인을 위해 프로젝트 요구 사항 및 관련 코드를 ChatGPT에 다시 입력하세요. 확인되면 새로운 기능 개발을 진행하세요.

코드 지정

ChatGPT가 상황별 메모리 제한으로 인해 불일치하는 코드를 생성하는 경우 관련 코드를 다시 제출하고 ChatGPT가 최신 코드를 기반으로 수정하도록 하세요.

깊은 지도

여러 대화를 통해 문제를 해결하지 못하는 경우 특정 기능 요구 사항 및 코드를 자세히 살펴보세요. 자신의 경험을 바탕으로 ChatGPT에 필요한 지침을 제공하세요.

자체 점검 문제

여러 대화 후에도 문제가 지속되면 ChatGPT에 안내하여 코드 디버깅을 위한 콘솔 로그를 추가하세요. 확인 및 수정을 위해 프로그램의 런타임 결과 또는 오류 메시지를 ChatGPT에 직접 제공합니다.

적시 롤백

여러 번 대화한 후에도 문제가 지속되면 이전의 안정적인 대화 버전으로 롤백하고 ChatGPT가 다시 개발되도록 허용하는 것이 좋습니다. 재개발 중에는 이전 디버깅 세션에서 발생한 문제나 자신의 경험을 바탕으로 ChatGPT에 필요한 지침을 제공하세요.

AI 프로그래밍에 관심이 있거나 “chatgpt 내부 서버 오류”가 걱정된다면, GPTBLOX를 직접 사용해 보시고 경험을 공유해 주세요. 문제가 발생하거나 향후 개발을 위한 제안 사항이 있으면 언제든지 알려주세요. 감사합니다!