day14-小游戏上线-换脸小程序需求

今日内容

1 上线Trae开发的游戏项目

1.1 云服务器购买

# 1 上次课使用Trae生成的项目--》只能在我浏览器上运行--》我自己玩
	-javascript，html，css---》运行在浏览器中的--》只要有浏览器，就能运行
    
# 2 我们目标：我们使用Trae写的小游戏---》大家都能玩
	-我的朋友，你的朋友，所有人，只能能上网的【电脑，手机】--》浏览器打开小游戏--》都能玩
    
    
# 3 分析
	1 代码有了-【消消乐】
    2 我们要有一台电脑【要装系统】--》7*24*365 一直运行
    3 电脑接入互联网【所有互联网用户，可以通ip地址访问到这台电脑】
    	-我们现在电脑，能上网，但是没有独立ip
    4 用不使用他的电脑【能上网】--》浏览器中输入：我们这台机器的ip地址--》访问到我们的项目--》就能玩了
    
    
# 4 目前我们主要使用ipv4
	-长这样：192.168.10.110---》个数有限制--》全球所有设备都要能上网的话，必须有个ip地址
    -家庭宽带--》运营商--》不会给独立ip---》都是动态ip--》我们无法根据ip地址访问到我们机器
    -企业宽带：很贵--》运营商--》会给独立ip----》公司企业的官网--》就可以部署在这个ip上
    
    
# 5 所以我们需要 租 一台 云服务器
	-云服务器：
    	云：我们看不见，不在我们跟前，比如：阿里的云 服务器，在西湖水底放着
        服务器：一台电脑，有独立ip地址，可以把项目放在上面--》互联网用户可以访问
        
        
# 6 最终：租了云服务器，把我们游戏放上---》互联网用户就可以玩了


# 7 强调：云服务器，大家可以先不租【是花钱的】，大家先学课程，后期要开发出一个完成的微信小程序--》如果大家想让别人用到你的微信小程序---》大家再购买也不迟


# 8 云服务厂商，有很多---》 1 新用户免费试用    2 新用户可以很低价格购买一年的云服务器
	-阿里云
    -腾讯云
    -华为云
    。。。。

1.1.1 购买阿里云

# 0 如果要租--》你账户中至少有有100元


# 1 阿里云地址：
https://ecs.console.aliyun.com/?spm=5176.12818093_47.resourceCenter.1.3be92cc9PrgvfE
    
# 2 登录后--》创建实例[租一台电脑]
	-想象成去电脑城组装电脑：内存，cpu，硬盘。。。

image-20260419202756378

image-20260419202834166

image-20260419203021408

image-20260419203222073

image-20260419203234948

image-20260419203344364

image-20260419203549343

1.2 部署上线项目

#1 使用软件：远程连接到 租的机器--》命令窗口，没有图形化界面
	finallshell：http://hostbuf.com/t/988.html
    安装到我们电脑上：双击一路下一步
    
#2 打开软件：远程连接到 租的云服务器
	-连接方式：如下图
    	-租的机器的IP地址：47.116.186.186
        -用户名：root
        -密码:LiuQingzheng123?
            
            
# 3 把我们的游戏源代码--》压缩--》zip 

# 4 上传到我们租的服务上-放在了 home--》project 文件夹下

# 5 在租的服务器上装一个软件 nginx
	-软件运行起来-->能监听租的服务器的 80 端口
    -端口：就是电脑的窗户--》一台电脑有 65536 个窗口
	-外部的电脑[我们电脑]---》访问我们这个租的服务器--》如果在浏览器中访问---》默认就走 80 这个窗口
    
# 6 安装步骤：只需要复制粘贴即可
	1    cd ~                                                  # 回家
    2    wget https://nginx.org/download/nginx-1.28.0.tar.gz   # 下载nginx
    3    tar -xf nginx-1.28.0.tar.gz                           # 解压压缩包
    4    cd nginx-1.28.0                                       # 进入到软件中
    5    dnf install -y pcre-devel gcc make zlib-devel openssl-devel # 安装一些依赖
    6    ./configure --prefix=/usr/local/nginx --with-http_ssl_module  # 配置文件
    7     make &&  make install                                        # 编译安装
    8     ln -s /usr/local/nginx/sbin/nginx /usr/bin/nginx             # 建立快捷方式
    
    
# 7 启动 nginx，在任意路径下
nginx 

# 8 浏览器访问【你们换成你们的】
http://47.116.186.186/
    
    
# 9 默认nginx 会返回一个页面，就是我们看到的--》我改一下你们看看【大家不用做】
cd /usr/local/nginx/html

# 10 把我们刚刚的游戏源代码，解压在这个目录下
cd /usr/local/nginx/html
# 重新把游戏传到这个目录
# 解压游戏 使用软件解压
yum install -y unzip  # 解压zip的软件

unzip xiaoxiaole.zip  # 解压这个文件夹


# 11 如果关了nginx 重启
nginx  # 启动
nginx -s stop  # 停止

image-20260419204059140

image-20260419204159184

image-20260419204236476

image-20260419204318619

image-20260419204430626

image-20260419204653687

image-20260419204830706

image-20260419204946026

image-20260419205027952

image-20260419205439621

image-20260419210104899

image-20260419210611539

同学问题

# 1 这个案例的实际意义
	举个例子：你哥们要跟他女朋友求婚---》收你1000块
    	-你给我近几年你们的合照--》做个网站--》背景音乐是今天要嫁给你啦，幻灯片播放你们的照片
        
        
        
# 2 咱们的服务器，99.999都是linux操作系统
	-个人pc百分之80 都是win，18% 是mac， 2% linux 桌面系统
    -linux：乌班图，centos，redhat，麒麟。。。。
    	-命令几乎一样

1.3 常见的一些软件类型

# 1 抖音，淘宝，京东，饿了么。。。。软件
	-能上网的软件 都是分前端 后端
    -单机软件，不在讨论范围内

# 分类
	-1 桌面应用【装在电脑桌面上的软件】
    	-qq
        -迅雷
        -百度网盘
        -微信
        。。。
   -2 APP ：
		安卓app
    	ios app
        华为鸿蒙app
   -3 微信小程序：轻量级--》不需要额外安装，直接在微信中用--》使用率挺高
		美团
    	京东
        百度网盘
        
   -4 web网页
		淘宝
    	京东
        百度网盘
        
# 这些软件都有前台后台
	-跟用户交互的叫前台： 桌面，app，小程序，web网页
    	-桌面：QT， pyqt等等技术
        -app：
        	-安卓：java 语言
            -ios：object c，swift语言
            -鸿蒙：ts语言
        -小程序：微信小程序
        	-wxml，wxss，js编写 ： 本质就是js，html，css
       	-web网页
        	js，html，css
            
    -他们都需要有后台
    	-存用户的信息：用户名，密码，消费记录
        -python：Django框架，FastAPI框架，flask框架
        -GO：gin框架，beego框架
        -java：springBoot框架。。，springCloud
        -php
        -c
# 软件前后端交互，都是用 API 接口方式

image-20260419214140483

2 一键换脸项目需求分析

2.1 软件开发流程

# 1 公司立项： 一键换脸小程序
------------我们+AI编辑器---------------
# 2 产品经理设计：需求：功能
	-产品原型图：专业工具：墨刀
# 3 UI部门设计软件界面
	
# 4 分部门开发
	-后端开发：后端
    -前端开发：小程序
# 5 测试

# 6 上线
-----------------------------------
# 7 运营。。。。

image-20260419220417305

2.2 软件的功能-需求-老师定好了

# 1 注册功能

# 2 登录功能

# 3 首页
	-上传换脸图片，上传原图--》点击换脸--》实现换脸
    
# 4 换脸历史
	-历史换的所有脸--》下载
    
# 5 个人中心页面
	-个人姓名等信息
   

# 羊了个羊：最高峰一天进账 500w
	-看广告：广告收入
    -非常多的人看广告
    -有游戏功能的广告播放器

    
####################
# 我们不是专业的产品经理--》使用Trae帮我们生成 一键换脸项目 的需求分析书
# 只需要使用提示词--》让Trae生成即可--》生成后，我们改动即可


#### 提示词

你是一个工作经验丰富的软件架构师，擅长编写软件需求分析书，现在帮我设计一款智能换脸微信小程序，分为微信小程序端(使用微信原生开发)和后端API(后端使用Django4+mysql8)，帮我生成需求文档，写入到  /1-项目需求分析书.md中，后端对接Coze换脸工作流，要求实现如下功能:
    注册：用户名，邮箱，密码，确认密码注册
    登录：用户名 和密码登录
    退出：退出微信小程序
    个人中心：显示个人姓名和默认头像
    换脸功能:用户上传两张图片[可以拍照]，调用Coze工作流即可完成换脸;
    查看换脸历史功能

3 UI示意图

UI 美工部门上场---》设计软件界面，配色，图片。。。
我们借助于Trae帮我们生成
	-Trae 生 html页面---》UI图以html页面呈现的
    -我们可能会不满意：调教ai--》让它改到们满意

3.1 通过提示词生成

你是一位资深设计师，你非常了解微信小程序的设计风格，拥有丰富的全栈开发经验和极高的审美，擅长设计现代风格的微信小程序端界面

## 我的微信小程序需求是：
我要做一款智能换脸微信小程序，你根据需求分析书，设计出界面

## 我的要求
1.页面元素尽量高级美观，遵循移动端设计规范，注重UI设计细节。
2.所有数据使用假数据，所有页面都可以点击交互。
3.图标使用CDN方式引入。
4.把设计图生成在 目录下，每个子页面都是一个但单独的html，方便在一个页面展示全，index.html里把所有子页面展示出来。
5.界面尺寸模拟IPhone17 Pro，让页面圆角化，使其更像真实微信小程序界面。
6.不要生成状态栏。
7.微信小程序底部使用Tabbar显示 ：首页[换脸功能]，历史[换脸历史]，个人[g]，可以切换。

请按以上要求生成完整的高保真原型图(html)
posted @ 2026-04-21 10:54  凫弥  阅读(2)  评论(0)    收藏  举报