当前位置：首页 > news >正文

完全使用TRAE和AI 开发一款完整的应用----第一周

news 2025/9/15 23:13:49

虽然也在工作使用使用ai 补全代码或者完善代码，但还是没有完全使用ai 做一款应用，不依赖手工编程、不依赖人查找资料

所以决定自己写一个应用玩玩，感受一下全完使用ai开发一款应用的乐趣，跟上时代发展的步伐

不得不说以前写玩具项目挺枯燥，现在用ai写还是挺有意思的

应用的需求：

使用ai 分析 k线，并进行点评，让天底下的韭菜没有看不懂的k线，让ai进行cosplay 扮演各路专家进行点评，这不是一款应用这是一款ai驱动的综艺节目

考虑我国复杂的金融监管环境，对股票分析限制非常多，所以对美股和港股还有web3 领域的token 进行分析

下面是项目和代码文件

主要是一个图表组件TradingChart.tsx和首页 page.tsx

TradingChart.tsx

'use client'; // 确保只在客户端渲染import { useEffect, useRef } from 'react';
import {createChart,CandlestickSeries,HistogramSeries,
} from 'lightweight-charts';export interface KLine {time: string; // 'YYYY-MM-DD'open: number;high: number;low: number;close: number;volume: number;
}interface Props {data: KLine[];
}export default function TradingChart({ data }: Props) {console.log(data);const containerRef = useRef<HTMLDivElement>(null);useEffect(() => {if (!containerRef.current || !data.length) return;const chart = createChart(containerRef.current, {width: containerRef.current.clientWidth,height: containerRef.current.clientHeight,layout: { textColor: '#d1d4dc', background: { color: '#111' } },grid:   { vertLines: { color: '#2a2e39' }, horzLines: { color: '#2a2e39' } },rightPriceScale: { visible: true },leftPriceScale:  { visible: true },crosshair: { mode: 1 },timeScale: {fixLeftEdge: false,fixRightEdge: false,barSpacing: 10,minBarSpacing: 5,},});chart.applyOptions({localization:{dateFormat: 'yyyy-MM-dd',}})/* ---- 蜡烛图 Pane（上方）---- */const candlePane = chart.panes()[0];const candleSeries = candlePane.addSeries(CandlestickSeries, {upColor: '#26a69a',downColor: '#ef5350',borderVisible: false,wickUpColor: '#26a69a',wickDownColor: '#ef5350',priceScaleId: 'right',});candleSeries.setData(data.map(({ time, open, high, low, close }) => ({ time, open, high, low, close })));/* ---- 成交量 Pane（下方 30%）---- */const volumePane = chart.addPane();volumePane.setHeight(80);const volumeSeries = volumePane.addSeries(HistogramSeries, {color: '#26a69a',priceScaleId: 'right',base: 0,});// 格式化成交量Y轴标签 - 调整为20%高度volumePane.priceScale('right').applyOptions({//设置高度scaleMargins: {top: 0.2,bottom: 0,},borderVisible: false,});// 自定义成交量格式化volumeSeries.priceScale().applyOptions({invertScale: false,borderColor: '#2a2e39',});// 使用priceFormatter来格式化成交量数值volumeSeries.applyOptions({priceFormat: {type: 'custom',minMove: 1,formatter: (price: number) => {if (price >= 1000000) {return (price / 1000000).toFixed(1) + 'M';} else if (price >= 1000) {return (price / 1000).toFixed(0) + 'K';} else {return price.toFixed(0);}}}});volumeSeries.setData(data.map(d => ({time: d.time,value: d.volume,color: d.close >= d.open ? '#26a69a' : '#ef5350',})));chart.timeScale().fitContent();/* 自适应窗口大小 */const ro = new ResizeObserver(() => chart.applyOptions({width: containerRef.current!.clientWidth,height: containerRef.current!.clientHeight,}));ro.observe(containerRef.current);return () => {ro.disconnect();chart.remove();};}, [data]);return <div ref={containerRef} style={{ width: '100%', height: '100%' }} />;
}

　　page.tsx

// app/page.tsx 或 pages/index.tsx
"use client"
import dynamic from 'next/dynamic';
import { KLine } from '@/components/TradingChart';
import TradingChart from '@/components/TradingChart';
import { useState, useEffect } from 'react';interface Coin {id: string;symbol: string;name: string;
}export default function HomePage() {const [kLineData, setKLineData] = useState<KLine[]>([]);const [coins, setCoins] = useState<Coin[]>([]);const [selectedCoin, setSelectedCoin] = useState<string>('bitcoin');useEffect(() => {const fetchCoins = async () => {try {const response = await fetch('https://api.coingecko.com/api/v3/coins/markets?vs_currency=usd&order=market_cap_desc&per_page=100&page=1&sparkline=false');const data = await response.json();setCoins(data);} catch (error) {console.error('获取币种列表失败:', error);}};fetchCoins();}, []);useEffect(() => {const fetchData = async () => {if (!selectedCoin) return;try {// 180 天 和30天数据// 并行获取OHLC和成交量数据const [ohlcRes, volumeRes] = await Promise.all([fetch(`https://api.coingecko.com/api/v3/coins/${selectedCoin}/ohlc?vs_currency=usd&days=180`),fetch(`https://api.coingecko.com/api/v3/coins/${selectedCoin}/market_chart?vs_currency=usd&days=180&interval=daily`,{cache:'force-cache'})]);const ohlcData = await ohlcRes.json();const volumeData = await volumeRes.json();// 合并数据并转换格式const formattedData = ohlcData.map(([timestamp, open, high, low, close]: [number, number, number, number, number]) => {// 匹配对应时间戳的成交量const volumeEntry = volumeData.total_volumes?.find(([volTimestamp]: [number, number]) => volTimestamp === timestamp);const volume = volumeEntry ? volumeEntry[1] : 0;// 转换时间戳为YYYY-MM-DD格式const date = new Date(timestamp);// const time = `${date.getFullYear()}-${String(date.getMonth() + 1).padStart(2, '0')}-${String(date.getDate()).padStart(2, '0')}`;return { time:timestamp/1000, open, high, low, close, volume };});setKLineData(formattedData);} catch (error) {console.error('数据获取失败:', error);}};fetchData();}, [selectedCoin]);return (<div ><div className='w-[70%]' style={{ height: '600px' }}><div className=' flex  align-center'><select value={selectedCoin}onChange={(e) => setSelectedCoin(e.target.value)}className="px-4 py-2 border border-gray-300 rounded-lg bg-white text-gray-700 shadow-sm focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-blue-500 hover:border-gray-400 transition-colors duration-200">{coins.map((coin) => (<option key={coin.id} value={coin.id} className="py-1">{coin.name} ({coin.symbol.toUpperCase()})</option>))}</select>{/* 显示 下拉列表中选中的币种的current_price */}<div className='flex items-center'>{coins.find((coin) => coin.id === selectedCoin)?.current_price} usdt</div></div><TradingChart data={kLineData} /></div><div className='w-[30%]'>对话框组件</div></div>);}

下面是上周工作的成果绘制了k线和显示了下拉列表还有价格