AI编程:快速打造专属读书笔记系统

更新时间:

本实验介绍如何不写一行代码,用通义灵码从01帮你生成读书笔记管理系统,并基于ECS完成系统的部署和对外服务的发布。

实验简介

通义灵码是由阿里云提供的智能编码辅助工具,提供代码智能生成、智能问答、多文件修改、编程智能体等能力,为开发者带来高效、流畅的编码体验。本实验介绍如何不写一行代码,用通义灵码从01帮你生成读书笔记管理系统,并基于ECS完成系统的部署和对外服务的发布。

实验室资源方式简介

进入实操前,请确保阿里云账号满足以下条件:

  • 个人账号资源

    • 使用您个人的云资源进行操作,资源归属于个人。

    • 平台仅提供手册参考,不会对资源做任何操作。

  • 确保已完成云工开物 300 元代金券领取。

  • 已通过实名认证且账户余额 ≥0 元。

  • 本实验预计费用约为 1元(按1小时且使用默认参数计费),将使用300元专属权益优惠券进行费用抵扣,实际费用请以实际账单为准。

  • 注意:登录通义灵码时的账号 需和 阿里云账号 保持一致!!

如果您调整了资源规格、使用时长,或执行了本方案以外的操作,可能导致费用发生变化,请以控制台显示的实际价格和最终账单为准。

领取专属权益及创建实验资源

在开始实验之前,请先点击右侧屏幕的“进入实操”再进行后续操作

image

本次实验需要您通过领取阿里云云工开物学生专属300元抵扣券兑换本次实操的云资源,如未领取请先点击领取。(若已领取请跳过)

image

重要

实验产生的费用优先使用优惠券,优惠券使用完毕后需您自行承担。

学生认证

安装通义灵码

VSCode为例,找到拓展,搜索“lingma”,搜到后点击安装,安装成功后,进行登录image.png大家也可以自行访问通义灵码下载和安装教程,查看更多安装指南参考~

image

实验步骤

  1. 我们先在电脑里新建一个【notes】文件夹,用于存放读书笔记源文件,然后在VSCode(其他IDE也可以)里面打开这个文件夹

  2. 切换到通义灵码,模式选择【智能体】

    image.png

  3. 输入下面的promt:

    我想生成一个我的读书笔记网站,可以创建笔记,修改笔记,删除笔记、查询笔记,每条笔记有笔记ID,笔记标题,笔记内容,笔记创建人,笔记创建时间,笔记修改时间。支持根据上面几个字段进行笔记查询。我希望用简单的前端技术就能实现,帮我想一下promt。

    image.png

  4. 通义灵码在分析后,给出了非常明确的promt

    image.png

  5. 继续输入:

    请在当前项目下,按照简化版开发提示 (Prompt)帮我创建页面吧

    image.png

  6. 可以看到通义灵码开始创建相应的代码文件,创建完成后,点击工作区的【接受】按钮

    image.png

  7. 接着返回到电脑里新建的【notes】文件夹,双击 index.html文件

    image.png

    通义灵码已经为我们生成了一个读书笔记管理系统

    image

    重要

    注意:因为智能体生成每次生成的内容是随机的,如果大家的页面和我的不一样,不用慌,只需让通义灵码按照你的想法一步步做优化即可。

  8. 测试相应的功能

    • 新建笔记:输入笔记标题、笔记内容、作者等,点击【保存笔记】

      image

      image

    • 可见,创建笔记的功能是正常的,但是样式稍显简陋,我们让通义灵码继续优化。

      比如,我们希望笔记能够用表格的样式来展现更简约,输入以下promt:

      笔记列表用表格样式展示,表格的第一行标题是;笔记ID、笔记标题、笔记内容、创建人、创建时间、操作

      image.png

      生成完之后,点击工作区的【接受】按钮

      接着刷新页面,看下修改后的效果,我们发现,通义灵码已经将页面改成了我们希望的样子

      image

    • 接下来,如果你有继续希望优化的点,可以继续优化,例如:

      输入以下promt:

      点击某条笔记右侧的编辑按钮,那条展示态的笔记标题和笔记内容变成编辑态

      image.png

      待通义灵码改完后,点击工作区的【接受】按钮

      优化后的效果也是不错:

      image

    • 此外,我们还发现每次进入页面,笔记会不显示,我们也还是告诉灵码让它优化:

      输入以下promt:

      每次刷新页面,已建好的读书笔记默认展示

      image.png

      点击工作区的【接受】按钮

      这样,经过简单的几轮优化后,页面已经基本满足了我们的诉求

      image

将读书笔记系统部署到阿里云上

  1. 假如我们不知道如何将读书笔记部署到阿里云ECS服务器,可以输入以下promt:

    我想将上面这个读书笔记系统部署到阿里云ECS上,并运行起来,应该怎么做

    image.png

  2. 灵码推荐了2种安装Web服务的方式,我不想安装NginxApache,希望用nodejs:

    我想用nodejs来运行,请给出明确的步骤

    image.png

    image.png

  3. 步骤里面提到,需要生成一个nodejs的服务器文件,可以让通义灵码直接帮忙生成,以便后续一起上传文件:

    请直接帮我创建一个server.js文件,以便我能在阿里云ECS能跑起来

    image.png

    点击工作区的【接受】按钮

    接下来,我们按照通义灵码前面给出的指引,一步步完成代码的部署。中间有任何不清楚的,可以反复追问通义灵码

  4. 开通阿里云ECS

  5. 进入服务器管理控制台

    进入ECS的控制台,等待1分钟左右,实例即创建好了,这里的公网IP地址,以及最开始设置的密码,在稍后连接服务器需要用到

  6. 上传读书笔记源文件到服务器,并运行

    • 首先,我们打开本地的终端命令行工具,按照前面灵码的提示,通过ssh连接远程服务器 

      ssh root@你的服务器公网IP ,然后系统会提示你键入密码

      image

    • 然后在服务器里安装项目运行需要的环境:NodeJS

      dnf install nodejs -y

      image

    • 输入下面的命令,验证是否安装成功

      node -v

      npm -v

      出现版本号显示已成功安装

      image

    • 完成之后,我们再通过SCP上传本地电脑里的读书笔记文件到服务器。

      输入:exit 

      image

    • 退回到本地,然后输入

      scp -r /Users/moon/Downloads/notes root@你的服务器公网IP:/root/

      image

    • 上传完成后,再连接到服务器:ssh root@你的服务器的IP

      切换到读书笔记所在目录:cd notes 

      node server.js

      image

    • 运行成功,然后我们在浏览器里面输入地址+端口: https://你的公网IP:80

      可以看到我们的页面无法访问

      image

    • 这是因为ECS里默认没有开启80端口,我们前往ECS的控制台,选择【安全组】—【管理规则】

      image

    • 点击【快速添加】,勾选HTTP80端口,点击【确定】

      image

    • 然后我们刷新我们的页面或者重新输入IP:80,即可看到我们的页面已经成功部署到阿里云上了

      image

    • 新建1条笔记,读书笔记的功能也是OK

      image

    • 这样你的笔记系统也可以分享给别人访问啦~

实验资源释放

  1. 实验结束后,通义灵码账号无需注销,无资源释放。

  2. 点击 云服务器ECS—实例—复制实例ID,点击【删除】

    image

    在弹窗粘贴实例ID,并进行勾选,点击【确定删除】

    image

    完成安全验证后,即可成功释放实例。

    image

    检查是否成功释放资源

    image

关闭实验

  • 在完成实验后,点击 结束实操

    image

  • 点击 取消 回到实验页面,点击 确定 跳转实验评分

    image

  • 请为本次实验评分,并给出您的建议,点击 确认,结束本次实验

    image