「豆包Marscode体验官」使用Marscode帮我完成“天气预报”小项目核心

我正在参加「豆包MarsCode初体验」征文活动豆包MarsCode体验官-｛玩转AI｝开启智能编程之旅，拿手机大奖 - 掘金 (juejin.cn)

豆包MarsCode（www.MarsCode.cn/home） 是基于字节跳动豆包大模型打造的更智能、更便捷的开发工具，提供 Cloud IDE 及 AI 编程助手两种使用形态。

作为豆包代码模型的具体应用， 豆包MarsCode 支持智能识别当前编码任务相关的上下文信息，同时将代码理解、生成、优化、推荐、补全、审查等多维能力融为一体，无缝嵌入研发流程的各个环节，帮助开发者提升代码开发质量和效率。

安装MarsCode

看完是不是觉得豆包MarsCode助手很牛，那么我们来安装使用一下。直接来到官网：豆包 MarsCode - 编程助手

感受一下

我们通过写一个类似天气预报的小项目来感受一下Mars Code给我们带来的便利

首先我们得获取当前时间渲染到页面上

来看看Mars Code给我们补全的代码

let now=ref()
// 获取当前时间函数
const getCurrentTime = () => {
    now.value = new Date().toLocaleString()
}

// 定时器
let timer = setInterval(getCurrentTime, 1000)

再来看看我们自己写的代码

let now = ref('00:00:00')
setInterval(() => {
    now.value = new Date().toLocaleTimeString()
}, 1000);

恐怖如斯基本与我们想写的一样

这里我们要使用高德地图提供的api功能

通过IP定位获取当前城市信息

相关方法可以去到高德地图官方文档学习概述-地图 JS API 2.0|高德地图API (amap.com)

AMap.plugin('AMap.CitySearch', function () {
    var citySearch = new AMap.CitySearch()
    citySearch.getLocalCity(function (status, result) {
        if (status === 'complete' && result.info === 'OK') {
            state.city = result.city;
            console.log(state.city);
            getWeather(result.city);
        }
    })
})

让我们再来看看Mars Code代码解释能力

获取实时天气和未来天气

 const getWeather = (city) => {
    //加载天气查询插件
    AMap.plugin("AMap.Weather", function () {
        //创建天气查询实例
        var weather = new AMap.Weather();
        //执行实时天气信息查询
        weather.getLive(city, function (err, data) {
            // console.log(err, data);
            //err 正确时返回 null
            //data 返回实时天气数据，返回数据见下表
            state.today = data
        });
    });
    AMap.plugin("AMap.Weather", function () {
        //创建天气查询实例
        var weather = new AMap.Weather();
        //执行实时天气信息查询
        weather.getForecast(city, function (err, data) {
            console.log(data.forecasts);
            //err 正确时返回 null
            //data 返回天气预报数据，返回数据见下表
            state.tmday = data.forecasts

            // 保证内部的逻辑会在页面渲染完毕后执行
            nextTick(() => {
                initEcharts(data.forecasts.map(item => item.dayTemp))
            })
            // console.log(state.tmday);
        });
    });
}

看！这么多注释都是Mars Code给我们写的，更方便我们理解代码了。

选择城市与获取天气

const selectCity = ({ selectedOptions }) => {
    state.city = selectedOptions[1].text;
    getWeather(state.city);
    state.show = false;
}

我们再来看看它的单测能力

确实牛，更方便我们检查代码了。

最后使用Echart

我们一开始可以通过Mars Code的AI对话询问一下有啥方法能帮我们完成这个折线图

很方便的给我们提供了方法

npm install echarts

然后我们通过这个指令安装 Apache ECharts，最后根据它提供给我们的代码修改一下数据就能呈现出我们想要的效果了。

我们的代码就修改为

const echartsWrap = ref(null)  // 获取html结构
const initEcharts = (arr) => {
    // console.log(echartsWrap.value);
    let myEchart = echarts.init(echartsWrap.value)
    myEchart.setOption({

        tooltip: {},
        xAxis: {
            type: 'category',
            data: ['今天', '明天', '后天', '大后天']
        },
        yAxis: {},
        series: [
            {
                name: '温度',
                type: 'line',
                data: arr
            }
        ]
    });
}

总结

这个豆包Mars Code编程助手提供的智能补全、智能预测、智能问答等能力，确实方便了我们开发和学习，对于我们代码的理解也很到位，真的很方便。