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

技术分享 8个月前 (07-29) 0 999+

关注

虽然也在工作使用使用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线和显示了下拉列表还有价格