从0开始打造一款APP:前端+搭建本机服务,定制暖冬卫衣先到先得

简介: 通义灵码携手科技博主@玺哥超carry 打造全网第一个完整的、面向普通人的自然语言编程教程。完全使用 AI,再配合简单易懂的方法,只要你会打字,就能真正做出一个完整的应用。

通义灵码携手科技博主@玺哥超carry 打造全网第一个完整的、面向普通人的自然语言编程教程。完全使用 AI,再配合简单易懂的方法,只要你会打字,就能真正做出一个完整的应用。

目前前 2 期课程已经上线,欢迎观看视频学习。


第一课 | 前端页面生成:观看视频:https://www.bilibili.com/video/BV1ktSKYQEFz

第二课 | 搭建本机服务:观看视频:https://www.bilibili.com/video/BV1N9zmYSEeC

 

以下是 2 期课程的文字版,方便大家使用。


教程用到的课程包:https://pan.baidu.com/s/1rUfN6Na32ocChPs5MLpi8g?pwd=8f8g

提取码: 8f8g

 

接下来开始我们的应用开发!

 

首先我们下载 VS CODE 这个软件。软件的安装方式很简单,一直点击下一步即可。


打开安装好的 VS CODE,点击左侧的扩展,找到插件市场搜索,在搜索框输入“TONGYI Lingma”。点击第一个搜索结果。


image.png

image.png


在右侧点击安装按钮。


image.png


安装好以后,就会在软件左侧看到通义灵码的按钮。


点击登录,选择使用手机号码登录登录,以后点击自己的头像完成个人认证。登录成功以后,在电脑的任意位置新建一个项目文件夹,把文件夹拖拽到 VS CODE 里。


image.png


如果有弹窗弹出,选择不保存,然后再点击新建文件按钮。新建一个 index.html 文件。


image.png


点击左侧图标的通义灵码按钮。


然后打开课程包。选择「01 前端代码生成」,打开「提示词」,打开「生成首页」。


image.png


打开的文件内容全部复制,粘贴发送给通义灵码,就会根据你的要求开始生成代码。


代码生成完毕以后,向上滑动滚动条,点击复制按钮。回到刚才新建的 index.html 文件,粘贴复制的代码,Ctrl+s保存。


找到 index.html 文件,双击打开,你就会看到这样的界面。


image.png


按下F12键,点击显示隐藏设备工具栏,选择一个合适的预览设备。


此时你会发现你生成的代码可能和想象的不太一样。遇到这种情况没有关系,我们只需要点击重新生成按钮即可。


image.png


因为AI写代码每次都是不同的结果,我们现在只需要学会怎么操作。后面随着课程的深入,我会教大家怎么精确控制样式。


目前重新生成的效果就是和小红书比较相似的界面了。


image.png


接下来我们重复刚才的方法,使用写好的提示词,依次生成内容页、个人主页、内容发布页,到这里我们没有写一行代码就做出了四个网页。

 

如何搭建本机服务呢?

 

本节课我们在本地模拟一个服务器环境,这样我们就可以在浏览器上输入网址以后显示上节课的内容。我们为完成本节课内容的前200名小伙伴,准备了由阿里云天池平台联合通义灵码提供的暖冬卫衣,两款可选哦。


image.png

 

首先打开docker.com,根据自己的电脑选择不同的版本。苹果电脑Intel芯片选第一个,苹果电脑M系列芯片选第二个,windows电脑64Intel芯片选第三个。如果你访问docker官网很慢,前三个最常用的版本已经在课程包里给大家下载好了。下载好以后安装的方式非常简单,一直点击下一步即可。

 

课程包下载链接: https://pan.baidu.com/s/1rUfN6Na32ocChPs5MLpi8g?pwd=8f8g

提取码: 8f8g

 

安装完成以后,记得重启电脑。重启以后鼠标右键点击开始图标,选择运行,在弹出的窗口输入powershell,打开课程包,02搭建本机服务,镜像.txt文件,复制里面的所有内容,按shift+insert粘贴到命令行里,然后按回车执行命令,等待命令执行完毕。


打开刚才安装的docker软件,你就会看到一个叫baota的镜像已经在运行。然后打开浏览器,输入这个网址:


image.png


输入账号wongvio,输入密码123123。进入以后,你看到的就是最常用的服务器管理软件的后台界面。点击左侧网站菜单,点击添加按钮,点击添加站点,输入xiaohongshu.localhost,点击确定。在浏览器网址输入xiaohongshu.localhost,你就会看到创建成功的提示页面。然后把我们上节课制作好的文件放到E盘下方的这个目录里,直接覆盖就可以。


image.png

 

回到刚才的浏览器,按F5刷新,你就会看到已经变成了上节课制作的页面。


到这里本节课就已经完成了。本节课非常简单,你已经迅速学会了怎么搭建一个服务器端。目前你只要照做就可以,不用思考太多细节。后面我会有单独的课程详细介绍服务器的细节。


卫衣领取方式:用手机拍摄下可以在你自己的电脑上访问 xiaohongshu.localhost 的视频,发布到你的社交账号,记得 @玺哥超Carry @通义灵码 并带上话题 #天池AI001,前200名完成的用户就能得到暖冬卫衣一件,快来参与吧~~~

 

相关文章
|
1月前
|
NoSQL 应用服务中间件 PHP
布谷一对一直播源码服务器环境配置及app功能
一对一直播源码阿里云服务器环境配置及要求
|
4月前
|
JavaScript NoSQL 中间件
《Node.js后端修炼手册》——揭秘服务器搭建与部署上线的生死时速,让你一战成名!
【8月更文挑战第27天】本文详细介绍如何从零开始利用Node.js构建后端服务器并部署至生产环境。首先,通过简易步骤搭建基础服务器,包括环境安装与配置。接着,引入Express框架优化路由与中间件管理,提升开发效率。随后,利用Mongoose实现MongoDB数据库连接,增强数据交互能力。为保证系统稳定性,文中还讲解了错误处理机制。最后,通过PM2等工具部署应用至生产环境,确保高效运行。本教程辅以示例代码,帮助读者快速掌握Node.js后端开发全流程。
110 2
|
7月前
|
关系型数据库 MySQL Shell
在1024中部署抖音server项目 | 青训营
在1024中部署抖音server项目 | 青训营
|
负载均衡 网络协议 应用服务中间件
当当网266买来的1399页Nginx笔记,原来我入门都不算
Nginx (engine x) 是一个高性能的HTTP和反向代理web服务器,同时也提供了IMAP/POP3/SMTP服务。Nginx是由伊戈尔·赛索耶夫为俄罗斯访问量第二的Rambler.ru站点(俄文:Рамблер)开发的,第一个公开版本0.1.0发布于2004年10月4日。
当当网266买来的1399页Nginx笔记,原来我入门都不算
|
SQL 关系型数据库 MySQL
三步搭建个人网站并发布上线---内网穿透
随着软件技术的发展,我们已经可以通过几个简单的步骤,在家用电脑上搭建起像样的个人博客网站,并通过cpolar搭建的数据隧道,将其发布到公共互联网上,实现以最低成本建立个人博客网站的目标。今天,我们就为大家介绍,如何用短短三步,建立起一个像样的个人独立网站。
三步搭建个人网站并发布上线---内网穿透
|
XML JSON 算法
一看便会微信后台服务器开发 |Go主题月
就要下班了,兵长打开手机,看到弹出的某微信聊天机器人广告便点了进去,于是有了如下故事.
109 0
|
编解码 人工智能 大数据
久等了!阿里云开发者社区APP服务上线啦!
阿里云开发者社区APP服务上线啦!本文将为大家介绍APP服务中不可错过的亮点及下载地址。
2947 4
久等了!阿里云开发者社区APP服务上线啦!
|
前端开发 Java 关系型数据库
一天撸一个财务APP系统【安卓端+前端+后端】
昨天没事,开发了一个APP的财务系统,如果需要学习开发,可以一起啊!
102 0
一天撸一个财务APP系统【安卓端+前端+后端】
再搞个大点的 某小视频App X-Gorgon 分析
再搞个大点的 某小视频App X-Gorgon 分析
再搞个大点的 某小视频App X-Gorgon 分析
|
监控 iOS开发
APP - APP监控软件,美团 24 小时不间断定位上热搜
APP - APP监控软件,美团 24 小时不间断定位上热搜
306 0
APP - APP监控软件,美团 24 小时不间断定位上热搜

热门文章

最新文章