본문 바로가기

서비스 창작 기록

코인 손절 알람기 만들기 - 2. 손절가 계산 - nextjs, ChatGPT, 업비트 REST API

진행 과정:

1. 틀 만들기

2. 손절가 계산 --- 현재

3. 차트 추가

 

손절가 계산 과정:

1. 손절가 정의

- 정의:

손절가 = (이전 15일 저점 - ATR) 로 계산

 

- 관련 블로그: 

=> 손절가에 ATR 활용: https://mike-tyson.tistory.com/204

=> 인기있는 지지선 계산 방법: https://mike-tyson.tistory.com/203

 

2. nextjs 코드 1차 도출 (ChatGPT)

- ChatGPT prompt:

  • I want to calculate recent swing low using the algorithm below {LuxAlgo 코드 복붙}
  • for a given crypto ticker, i want to calculate its recent swing low minus ATR
  • can i code in javascript?
  • please return current price as well
  • display the results in a web interface using nextjs with app router in type script
  • rename api name from swing-low to stop-loss
  • i already have frontend page code as below. please modify my code so that stop loss price in the p tag is replaced by data.swingLowMinusATR.toFixed(2) and current price in the p tag is replaced by data.currentPrice.toFixed(2). {paste code from app/page.tsx}
  • use the Input to allow the user to input a ticker dynamically
  • i want to fetch data when user finishes input and clicks enter
  • i want to add a get parameter to load the page with BTCUSDT as get parameter and call fetchData on initial loading accordingly

- ChatGPT prompt example: https://chatgpt.com/share/67625148-f7cc-8002-b121-e8f41279abe6

 

3. nextjs 프로젝트에 적용

- 예시 frontend 코드 기존 프로젝트에 가져오기

ChatGPT 내 app/page.tsx 내용을 app/page.tsx 에 복붙

- 예시 backend 코드 기존 프로젝트에 가져오기

ChatGPT 내 app/api/stop-loss/route.ts 내용을 app/api/stop-loss/route.ts 에 복붙 (파일 및 디렉토리 필요시 생성)

 

- terminal 실행:

npm install axios technicalindicators

 

4. run

- terminal 실행:

npm run dev

 

- 결과:

 

- 피드백:

backend에서 문제 발생

 

5. nextjs 코드 2차 도출 (ChatGPT) 및 프로젝트에 적용

- ChatGPT prompt:

  • 내 backend code는 다음과 같아. {app/api/stop-loss/route.ts 코드 복붙}
  • binance api를 업비트 REST API로 대체 하려고해. 다음은 업비트 REST API에 대한 내용이야. {REST API를 이용한 업비트 시세 수신 에서 캔들 조회 내용 복붙}
  • 다음 frontend 코드도 위 수정에 맞게 변경해줘 {app/page.tsx 코드 복붙}

- ChatGPT prompt example: https://chatgpt.com/share/6763d90f-68dc-8002-897d-df0bc5388774

 

6. run again

- terminal 실행:

npm run dev

- 결과:

관련 코드 (github):

- https://github.com/tyson-park/crypto-stop-loss-alarm

 

이전 글:

- 코인 손절 알람기 만들기 - 1. 틀 만들기 - react, nextjs, v0, cursor

 

코인 손절 알람기 만들기 - 1. 틀 만들기 - react, nextjs, v0, cursor

UI:진행 과정:1. 틀 만들기 --- 현재2. 손절가 계산 틀 만들기 과정:1. v0- prompt:create a mobile web with headerchange the color scheme to orangeon the main page. i want to have two buttons at the end. also i want ha

mike-tyson.tistory.com