从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名完成的用户就能得到暖冬卫衣一件,快来参与吧~~~

 

相关文章
|
7天前
|
开发框架 小程序 前端开发
圈子社交app前端+后端源码,uniapp社交兴趣圈子开发,框架php圈子小程序安装搭建
本文介绍了圈子社交APP的源码获取、分析与定制,PHP实现的圈子框架设计及代码编写,以及圈子小程序的安装搭建。涵盖环境配置、数据库设计、前后端开发与接口对接等内容,确保平台的安全性、性能和功能完整性。通过详细指导,帮助开发者快速搭建稳定可靠的圈子社交平台。
72 17
|
5月前
|
安全 前端开发 API
【Azure 应用服务】Azure Web App 服务默认支持一些 Weak TLS Ciphers Suite,是否有办法自定义修改呢?
【Azure 应用服务】Azure Web App 服务默认支持一些 Weak TLS Ciphers Suite,是否有办法自定义修改呢?
|
19天前
|
机器学习/深度学习 前端开发 算法
婚恋交友系统平台 相亲交友平台系统 婚恋交友系统APP 婚恋系统源码 婚恋交友平台开发流程 婚恋交友系统架构设计 婚恋交友系统前端/后端开发 婚恋交友系统匹配推荐算法优化
婚恋交友系统平台通过线上互动帮助单身男女找到合适伴侣,提供用户注册、个人资料填写、匹配推荐、实时聊天、社区互动等功能。开发流程包括需求分析、技术选型、系统架构设计、功能实现、测试优化和上线运维。匹配推荐算法优化是核心,通过用户行为数据分析和机器学习提高匹配准确性。
60 3
|
1月前
|
人工智能 自然语言处理 芯片
上千人挑战,用通义灵码从 0 开始打造一款 App 爆火 | 第二课:搭建本机服务
通义灵码携手科技博主@玺哥超carry 打造全网第一个完整的、面向普通人的自然语言编程教程。完全使用 AI,再配合简单易懂的方法,只要你会打字,就能真正做出一个完整的应用。
1142 9
|
3月前
|
存储 前端开发 JavaScript
前端的全栈之路Meteor篇(四):RPC方法注册及调用-更轻量的服务接口提供方式
RPC机制通过前后端的`callAsync`方法实现了高效的数据交互。后端通过`Meteor.methods()`注册方法,支持异步操作;前端使用`callAsync`调用后端方法,代码更简洁、易读。本文详细介绍了Methods注册机制、异步支持及最佳实践。
|
5月前
|
运维 Kubernetes 容器
【Azure K8S】演示修复因AKS密钥过期而导致创建服务不成功的问题(The provided client secret keys for app ****** are expired)
【Azure K8S】演示修复因AKS密钥过期而导致创建服务不成功的问题(The provided client secret keys for app ****** are expired)
【Azure K8S】演示修复因AKS密钥过期而导致创建服务不成功的问题(The provided client secret keys for app ****** are expired)
|
5月前
|
开发者
【Azure 应用服务】如果发现当前使用的订阅无法在China North 3 区中创建App Service服务,如何来解决这个问题呢?
【Azure 应用服务】如果发现当前使用的订阅无法在China North 3 区中创建App Service服务,如何来解决这个问题呢?
|
5月前
|
Java Linux Windows
【Azure 应用服务】App Service / Function App 修改系统时区为中国时区的办法(Azure中所有服务的默认时间都为UTC时间,转换为北京时间需要+8小时)
【Azure 应用服务】App Service / Function App 修改系统时区为中国时区的办法(Azure中所有服务的默认时间都为UTC时间,转换为北京时间需要+8小时)
|
5月前
|
开发框架 .NET Linux
【Azure 应用服务】 部署到App Service for Linux 服务的Docker 镜像,如何配置监听端口呢?
【Azure 应用服务】 部署到App Service for Linux 服务的Docker 镜像,如何配置监听端口呢?
|
5月前
|
API
【Azure 应用服务】在App Service中调用外部服务API时需要携带客户端证书,而多次调用的情况下会出现WindowsCryptographicException Keyset does not exist异常
【Azure 应用服务】在App Service中调用外部服务API时需要携带客户端证书,而多次调用的情况下会出现WindowsCryptographicException Keyset does not exist异常