프로그래머가 아닌 제품 관리자로서 ChatGPT를 사용하여 여행 AI 앱을 개발한 방법

내가 해냈어! 약 100시간이 걸렸지만 ChatGPT의 도움으로 실제 앱을 작성하고 배포할 수 있었습니다.

그 이후로 기능을 유지하고 추가하는 데 100시간 정도를 투자하여 멋진 열정 프로젝트가 되었습니다.

실험의 전제는 "오랫동안 적극적으로 코드를 작성하지 않은 제품 관리자로서 ChatGPT를 사용하여 앱을 디자인하고 구축하고 배포할 수 있을까?"였습니다.

저는 CS 학사 학위를 취득하고 기술의 다양한 측면(시스템 설계, 개발, DevOps, 호스팅)을 다루는 등 탄탄한 기반을 갖추고 있지만 지난 10년 이상 개발을 직접 해본 적이 없습니다.

나는 꽤 좋은 제품 감각을 갖고 있어서 제품을 반복적으로 구축하는 방법과 기능을 조사하는 방법을 이해하는 데 도움이 되었다고 생각합니다.

일반적인 SW 개발과 마찬가지로 문제 해결과 디버깅에 80% 이상의 시간이 소요되었습니다.

AI를 여행해야 하는 이유

ChatGPT API에 유용한 기능을 추가하려는 과정에서 GPT는 갈 곳, 방문할 관심 장소, 일정 등을 파악하는 여행 계획 문제를 해결하는 데 고유한 자격을 갖추고 있다고 생각했습니다. 결정해야 할 사항이 많습니다. 여행할 때 만들어서 누군가가 자신의 취향이나 상황에 따라 이 모든 것을 종합해 주는 것이 가치 있다고 생각했습니다.

ChatGPT로 코딩하기

나는 밤낮으로 일하고 주말에 몇 번 일하면서 약 6주를 보냈는데, 아마도 총 100시간 정도가 될 것입니다. ChatGPT+ 계정이 있어서 봇에 액세스하고 GPT4에 액세스할 때 안정성이 향상되었습니다.

이 과정을 통해 내가 찾은 결과는 다음과 같습니다.

• ChatGPT는 작업에 적합한 도구(단일 페이지 앱용 Vue.js 프레임워크)를 선택하고 반복적으로 코드를 작성하는 데 도움이 되었습니다. 그것 없이는 확실히 그것을 할 수 없었습니다. 하지만 분명히 합병증이 있었습니다.

  
  

  1. ChatGPT UI가 부과하는 제한(입력 및 출력에 대한 4k 토큰 및 대략 15k 컨텍스트로 보이는 것)은 매우 제한적이며 결국 질문에서 많은 세분화를 수행하게 됩니다. 이는 이상적이지 않으며 추가 노력이 필요합니다. 저는 CLI를 통해 액세스를 시도하지 않았습니다. 동일한 제한을 적용하지 않는 곳을 읽어 보십시오. 확인해 볼 가치가 있습니다.

  2. "코드 이해"의 품질은 일관되지 않았습니다. 때로는 더 좋아질 때도 있고, 더 나쁠 때도 있습니다. 나는 그것이 무엇과 관련이 있는지 잘 모르겠습니다.

  3. ChatGPT가 자동으로 작업을 수행하지는 않지만 요청하면 자동으로 수행되므로 코드를 조기에 구조화(코드를 더 작은 기능으로 나누기) 시작하는 것이 좋습니다. 향후 문제 해결이 더 쉬워집니다.

  4. GPT4는 3시간에 걸쳐 25개의 쿼리를 중단하고 "기본" 모델로 전환합니다. 3.5로 추정됩니다. 흥미롭게도 꽤 잘 작동하고 GPT4보다 성능이 더 좋다고 말하고 싶지만 시작하지 않았기 때문입니다. 3.5에서는 사과 대 사과 비교가 아닙니다.

     
     

     업데이트: 최근 한도가 3시간 동안 쿼리 50개로 늘어났습니다.

개발 및 배포 환경

• 저는 새로운 시대의 IDE에 Replit을 사용했습니다. 이는 좋은 개념이며 아마도 미래일 것입니다. 특히 의미 있는 Codex/ChatGPT 통합과 결합할 수 있다면 더욱 그렇습니다. 현재 보유하고 있는 AI는 프로젝트의 코드를 활용하지 않고 ChatGPT에서 했던 것과 동일한 조작과 앞뒤 작업이 모두 필요하기 때문에 그다지 유용하지 않습니다. 그러나 Replit이 소스 제어를 위해 Github와 통합하는 방식과 스테이징을 관리하는 방식이 정말 마음에 들었습니다.

  
  

• 클라우드 네이티브로 배포하고 싶었기 때문에 Cloudflare를 사용하여 배포했습니다. UI에는 CF 페이지를 사용하고 백엔드(API 게이트웨이)에는 작업자를 사용했습니다. 페이지가 CICD용 Github과 통합되는 방식이 마음에 들었습니다. 정말 멋졌습니다. 기본적으로 앱은 메인 브랜치에 대한 모든 커밋에서 자체적으로 재배포됩니다.

  
  

  일반적으로 CF는 엄청난 네트워킹 문제를 단순화하므로 흔들립니다.

즉각적인

나는 꽤 많은 시간을 들여 프롬프트를 여러 번 반복하여 이를 없애고 특이한 점을 해결하려고 노력했습니다. 초기 결정 포인트 중 하나는 ChatGPT API가 이해하고 분류할 텍스트 목록을 반환하도록 할지 아니면 이미 구조가 내장된 JSON을 반환하도록 할지 여부였습니다. ChatGPT에서 점점 더 많은 데이터를 요청함에 따라 구조가 점점 더 복잡해지면서 텍스트 데이터를 구조로 해석해야 한다는 전망이 저를 두렵게 했습니다(이 스니펫에서 알 수 있듯이).

이로 인해 저는 JSON용 ChatGPT를 요청하기로 결정했습니다. 그러나 여기에는 JSON이 항상 잘 구성되어 있지 않거나 프롬프트에 너무 많은 모호함이 있어서 ChatGPT가 예상하지 못한 결과를 반환한다는 자체적인 부작용이 있었습니다. 프롬프트 미세 조정과 JSON 오류 처리 사이에 거의 25%의 시간을 소비했다고 말하고 싶습니다. 그것은 꽤 학습 경험이었습니다. 궁극적으로 제가 최종적으로 내린 프롬프트는 다음과 같습니다.

 SYSTEM_PROMPT = `You are a helpful travel assistant. You perform the requests with diligence and make the best attempt to answer the questions, never refusing due to complexity etc. Reset the conversation if I mention a new location in my user prompt. Return the results in JSON format as an array of objects. Make sure JSON format is complete and valid and does not include unescaped special characters. Please avoid escaping double quotes and instead use single quotes or another method to prevent JSON parsing issues. Do not use "\n" newline symbols in the middle of element text. Each object in the array should have the following keys: - "title" - "description" - "airportCode" (for the destination airport) - "poi" (array of points of interest) - "lodging" (array of lodging options) - "itinerary" (array of objects, each representing a day) - "considerations" - "history" (history related to the destination) - "key_local_phrases" (array of common local phrases) - "cost" The "itinerary" key should contain an array of objects, each object representing a day with the key "activities", which is itself an array of objects. Each activity object should have the following keys: - "description" - "waypoint" (name of the location, not coordinates) - "cost" - "travelTime" - "travelOptions" If travel is involved within the itinerary, include "Travel To" as part of the daily activity and provide the travel time, travel options, and associated cost. Each step in the itinerary should also suggest representative local "food" to try. Focus on most interesting points of interest, lodging, and activities. Consider activities that are popular, affordable, and recommended by the travelers. Make sure you cover the entire duration of the trip or outing. If it says "week-long", it has to cover the entire week. It's OK to group multiple days or weeks together if it's a longer trip. If it doesn't give a timeframe, take a guess based on the nature of a trip. Considerations should include travel restrictions and visa requirements, typical weather, criminogenic conditions including which areas to avoid, recommendations on visit timing, parking situation, and ways to save on travel costs. Here is an example of the desired output format: [ { "title": "Sample Title", "description": "Sample Description", "airportCode": "XYZ", "poi": ["Sample POI1", "Sample POI2"], "lodging": ["Sample Lodging1", "Sample Lodging2"], "itinerary": [ { "day": "Sample Day 1-2 - City or Place", "location": "Wikipedia identifiable name of the place in city,_country or city,_state format", "activities": [ { "description": "Sample Activity1", "waypoint": "Sample Waypoint1 connected to the activity", "cost": "$100", "travelTime": "30 minutes", "travelOptions": "Taxi or Bus" }, { "description": "Sample Activity2", "waypoint": "Sample Waypoint2 connected to the activity", "cost": "$50", "travelTime": "1 hour", "travelOptions": "Ferry or Bus" } ], "food": ["Sample Food1 with short description", "Sample Food2 with short description"] }, { "day": "Sample Day 3 - City or Place", ... }, { "week": "Sample Week 2 - City or Place", ... } ], "considerations": "Sample considerations text", "history": "Sample history text", "key_local_phrases": ["Sample phrase 1 - translation", "Sample phrase 2 - translation"], "cost": "Sample total cost" } ]`;

참고: 이 글을 쓰는 시점에서 OpenAI는 JSON 구조 데이터를 더욱 강력하고 일관되게 반환하는 데 매우 도움이 될 수 있는 미세 조정 기능 향상 기능을 방금 출시했습니다.

위시리스트

현시점 내 위시리스트의 가장 큰 항목은 개발 환경/AI 코드 생성 통합입니다. 코드 구조를 엉망으로 만들지 않으려고(특히 코드 베이스가 커질수록) 앞뒤로 붙여넣는 것은 분명 아쉬운 점이 많습니다.

AI 코드 생성의 다음 큰 단계는 코드를 내부적으로 섹션으로 구문 분석하고 사용자가 수동으로 이 작업을 수행하지 않고도 모델에 관련 입력을 제공하고 모델에서 받을 수 있는 통합 스마트 코드 편집기가 될 것이라고 생각합니다.

그 다음 단계는 디버깅 목적으로 브라우저와 통합하여 궁극적으로 폐쇄 루프 반복 디버깅 주기를 만드는 것입니다.

정말 멋진 프로젝트가 될 것 같아요!

참고: Google이 IDX 프로젝트 에 어떤 노력을 기울이고 있는지 궁금합니다. 아마도 그럴 수도 있습니다.

요약

전반적으로 유용한 앱을 구축할 수 있었을 뿐만 아니라(내가 생각하기에) 구문 및 프레임워크 학습에 빠져들지 않고 최신 프레임워크에 착수하여 실습 시간을 가질 수 있었습니다. 이것이 바로 제가 원했던 것입니다. 나는 이것이 큰 일이며 더 많은 사람들에게 소프트웨어 개발의 문을 열어준다고 생각합니다.

VoyageAI.app 에서 앱을 찾을 수 있습니다. 이 앱은 광고나 로그인 없이 무료로 계속 사용할 수 있습니다(따라서 개인 데이터는 사용되지 않습니다).