完全使用TRAE和AI 开发一款完整的应用----第一周
虽然也在工作使用使用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();
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();
};
}, );
return ;
} 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 = useState<KLine[]>([]);
const = useState<Coin[]>([]);
const = 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 = 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((: ) => {
// 匹配对应时间戳的成交量
const volumeEntry = volumeData.total_volumes?.find((: ) => volTimestamp === timestamp);
const volume = volumeEntry ? volumeEntry : 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();
}, );
return (
<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 */}
{coins.find((coin) => coin.id === selectedCoin)?.current_price} usdt
<TradingChart data={kLineData} />
对话框组件
);
}
下面是上周工作的成果 绘制了k线和显示了下拉列表还有价格
下面说一下我开发的步骤
1 首选是使用ai 进行需求分析
使用豆包进行的需求分析
https://www.doubao.com/thread/w0e5291f6269dbb19
2 使用ai 分析用什么工具才能绘制交易专用的图表
https://www.doubao.com/thread/wf2ef2d222fdba7eb
3 使用ai 寻找提供的数据源
使用kimi 寻找数据源
https://www.kimi.com/share/d23na3djqedfoaoeplr0
4 使用ai 开发图表组件
怎么使用ai 开发专业的交易图表组件？现在多数ai 都支持html 在线预览 例如 豆包和kimi
例如我需要绘制k线和成交量在一起的一个图表
先使用ai 制作一个html页面，进行在线预览，如果对效果不满意就完善提示词
我分别使用 豆包 deepseek kimi 若干次 最后在kimi 成功制作了交易组件的html页面
使用kimi制作html 页面
https://www.kimi.com/share/d23na3djqedfoaoeplr0
在制作完成html 页面之后，在用ai将html的内容用react 或者vue 重写一遍
然后就是复制到ide 中 进行进一步的完善
来源：程序园用户自行投稿发布，如果侵权，请联系站长删除
免责声明：如果侵犯了您的权益，请联系站长，我们会及时删除侵权内容，谢谢合作！
页:
[1]