爱猫程序员给自家小猪咪做了一个上门喂养小程序
🐱前言
每次一到节假日,都好想和好朋友们一起出去玩,但是心里总放不下家里的小猪咪,于是心想能不能找一个喂养师上门喂养呢。于是找了几个上门喂养的平台,并最终下单了服务。
真的不得不说,上门喂养的小姐姐真的非常用心和专业。她们来到我家期间,全情投入地照顾着我的毛孩子,让它吃得饱饱的,看起来胖乎乎的。更令我感动的是,她们还全程录像了照料过程,并将视频发送给我,让我能够时刻了解小猪咪的情况。
分享下小猪咪美照👇
🤔️思考
我也是程序员,为什么我不能自己也做一个上门喂养的小程序呢,于是经过调研,发现了其他的几个平台各有各的弊端和优点,然后诞生出了最初的想法如何做一个把其他平台的弊端去除掉,做一个最好的上门喂养平台。
🎨开始设计
于是开始琢磨figma~~~
因为任何c端都是通过首页再去衍生出其他页面整体样式的,所以先着手制作首页,只要首页定好了其他页面都好说。
一周后....开始着手设计🤔️...思考...参考....初版定稿
由于刚入门设计一开始丑丑的,不忍直视~~~
再经过几天的琢磨思考...改版...最终确定首页
经过不断的练习琢磨参考最后定稿,给大家推荐下我经常参考我素材网站花瓣
N天之后......其他页面陆续出炉
由于页面太多了就不一一展示啦~~~
最满意的设计页面
给各大掘友分享一下我最满意的设计页面
签到
结合了猫咪的元素统一使用了同一只猫咪素材~整体效果偏向手绘风格。
抽奖扭蛋
这个扭蛋机真是一笔一画画了一天才出来的,真的哭😭啦~,由于AE动画太过麻烦所以每一个扭蛋球球的滚动都用代码去实现~~
💻编程
技术选型
uniapp + nestjs + mysql
NestJS是一个基于Node.js的开发框架,它提供了一种构建可扩展且模块化的服务端应用程序的方式,所以对于前端而言是最好上手的一门语法。
Nestjs学习推荐
给各大掘友推荐一下本人从0到1上手nestjs的教程,就是一下小册就是以下这本,初级直接上手跟着写一遍基本就会啦
建议学习到 61章左右就可以开始写后端项目啦
小程序端基本使用逻辑
- 用户下单-服务人员上门服务完成-用户检查完成后确认订单完成-订单款项打款到服务人员钱包
- 用户注册成为服务人员-设置服务范围-上线开始服务-等待用户给服务人员下单
下单流程
选择服务地点-选择服务人员-点击预约-添加服务宠物-付款
服务人员认证流程
根据申请流程逐步填写,由于服务人员是平台与用户产生信任的标准,所以我们加大了通过审核的门槛,把一些只追求利益,而不是真正热爱宠物的人员拒之门外,保护双方利益。
后端Nestjs部署
后端代码写完之后我们需要把服务部署到腾讯云,以下是具体步骤
1.腾讯云创建镜像仓库
前往腾讯云创建容器镜像服务,这样我们就可以把本地docker镜像推送到腾讯云中了,这个容器镜像服务个人版是免费的
2.打包Nestjs
通过执行docker命令部署到本地的docker
👇以下是具体docker代码
FROM --platform=linux/amd64 node:18-alpine3.14 as build-stage
WORKDIR /app
COPY package.json .
COPY cert .
COPY catdogship.com_nginx .
COPY ecosystem.config.js .
RUN npm config set registry https://registry.npmmirror.com/
RUN npm install
COPY . .
# 第一个镜像执行 build
RUN npm run build
# FROM 继承 node 镜像创建一个新镜像
FROM --platform=linux/amd64 node:18-alpine3.14 as production-stage
# 通过 COPY --from-build-stage 从那个镜像内复制 /app/dist 的文件到当前镜像的 /app 下
COPY --from=build-stage /app/package.json /app/package.json
COPY --from=build-stage /app/ecosystem.config.js /app/ecosystem.config.js
COPY --from=build-stage /app/dist /app/src/
COPY --from=build-stage /app/cert /app/cert/
COPY --from=build-stage /app/public /app/public/
COPY --from=build-stage /app/static /app/static/
COPY --from=build-stage /app/catdogship.com_nginx /app/catdogship.com_nginx/
WORKDIR /app
# 切到 /app 目录执行 npm install --production 只安装 dependencies 依赖
RUN npm install --production
RUN npm install pm2 -g
EXPOSE 443
CMD ["pm2-runtime", "/app/ecosystem.config.js"]
3.推送到腾讯云
本地打包完成之后我们需要把本地的docker推送到腾讯云中,所以我们本地写一个sh脚本
执行推送
#!/bin/bash
# 生成当前时间
timestamp=$(date +%Y-%m-%d-%H-%M)
# Step 1: 构建镜像
docker build -t hello:$timestamp .
# Step 2: 查找镜像的标签
image_id=$(docker images -q hello:$timestamp)
# Step 3: 为镜像添加新的标签
docker tag $image_id 你的腾讯云镜像地址:$timestamp
docker push 你的腾讯云镜像地址:$timestamp
4.部署到服务器
由于我使用的是轻量级应用服务器,所以直接使用自动化助手去进行部署(PS:可能有一些小伙伴会问为什么用轻量级应用服务器呢,因为目前用户量不是很多,轻量级应用服务器足够支撑,后面用户量起来会考虑转为k8s集群)
然后我们去创建一个自动化执行命令,去执行服务器的docker部署
创建命令
执行命令
👇以下是命令代码
# 停止服务
docker stop hello
# 删除容器
docker rm hello
# 拉取镜像
docker pull 你的腾讯云镜像地:{{key}}
#读取image名称
image_id=$(docker images -q 你的腾讯云镜像地:{{key}})
# 运行容器
docker run -d -p 443:443 -e TZ=Asia/Shanghai --name hello $image_id
5.部署完成
命令返回执行结果显示执行完成,说明已经部署成功了
6.Nestjs服务器端的管理
由于node是一个单线程,所以我们使用的是pm2去进行管理node,它可以把node变成一个多线程并进行管理
由于nestjs中使用到了定时任务,而定时任务只需要开一条线程去做就好了,所以我增加了一个环境变量NODE_ENV
来对定时任务进行管理
module.exports = {
apps: [
{
name: 'wx-applets',
// 指定要运行的应用程序的入口文件路径
script: '/app/src/main.js',
exec_mode: 'cluster',
// 集群模式下的实例数-启动了2个服务进程
instances: 4,
// 如果设置为 true,则避免使用进程 ID 为日志文件添加后缀
combine_logs: true,
// 如果服务占用的内存超过300M,会自动进行重启。
// max_memory_restart: '1000M',
env: {
NODE_ENV: 'production',
},
},
{
name: 'wx-applets-scheduled-tasks',
script: '/app/src/main.js',
instances: 1,
// 采用分叉模式,创建一个单独的进程
exec_mode: 'fork',
env: {
NODE_ENV: 'tasks',
},
},
],
};
后端总结
到目前为止前台的业务接口都写完了做了个统计一共有179个接口
后期版本更新
预计这个月上线毛孩子用品盲盒抽奖,有兴趣的友友们也可关注下哦
后期展望,帮助更多的流浪动物有一个温暖的家
小程序上线
目前小程序已经上线啦~,友友们可以前往小程序搜索 喵汪舰 前往体验,
或者扫描一下二维码前往
我的学习路线
因为我是一个前端开发,所以对于设计感觉还是挺好的,所以上手比较快。
一条学习建议路线:前端-后端-设计-产品,最终形成了一个完整的产品产出。
以下的链接是这个项目中我经常用到的素材网站:
总结
一个产品的产出不仅仅依靠代码,还要好的用户体验,还需要不断的优化迭代,
最后给一起并肩前行的创业者们的一段话:
在创业的道路上,我们正在追逐梦想,挑战极限,为自己和世界创造新的可能性。这个旅程充满了风险和不确定性,但也蕴藏着无限的机遇和成就,不要害怕失败,勇于面对失败,将其视为成功的必经之路。
来源:juejin.cn/post/7348363812948033575