爱猫程序员给自家小猪咪做了一个上门喂养小程序

您所在的位置:网站首页 上门做电脑程序 爱猫程序员给自家小猪咪做了一个上门喂养小程序

爱猫程序员给自家小猪咪做了一个上门喂养小程序

2024-03-25 16:41| 来源: 网络整理| 查看: 265

🐱前言

每次一到节假日,都好想和好朋友们一起出去玩,但是心里总放不下家里的小猪咪,于是心想能不能找一个喂养师上门喂养呢。于是找了几个上门喂养的平台,并最终下单了服务。

真的不得不说,上门喂养的小姐姐真的非常用心和专业。她们来到我家期间,全情投入地照顾着我的毛孩子,让它吃得饱饱的,看起来胖乎乎的。更令我感动的是,她们还全程录像了照料过程,并将视频发送给我,让我能够时刻了解小猪咪的情况。

分享下小猪咪美照👇

🤔️思考

我也是程序员,为什么我不能自己也做一个上门喂养的小程序呢,于是经过调研,发现了其他的几个平台各有各的弊端和优点,然后诞生出了最初的想法如何做一个把其他平台的弊端去除掉,做一个最好的上门喂养平台。

🎨开始设计 于是开始琢磨figma~~~

因为任何c端都是通过首页再去衍生出其他页面整体样式的,所以先着手制作首页,只要首页定好了其他页面都好说。 image.png

一周后....开始着手设计🤔️...思考...参考....初版定稿

由于刚入门设计一开始丑丑的,不忍直视~~~

再经过几天的琢磨思考...改版...最终确定首页

经过不断的练习琢磨参考最后定稿,给大家推荐下我经常参考我素材网站花瓣

N天之后......其他页面陆续出炉

由于页面太多了就不一一展示啦~~~

image.png

最满意的设计页面

给各大掘友分享一下我最满意的设计页面

签到

结合了猫咪的元素统一使用了同一只猫咪素材~整体效果偏向手绘风格。

image.png

抽奖扭蛋

这个扭蛋机真是一笔一画画了一天才出来的,真的哭😭啦~,由于AE动画太过麻烦所以每一个扭蛋球球的滚动都用代码去实现~~

image.png

💻编程 技术选型

uniapp + nestjs + mysql

NestJS是一个基于Node.js的开发框架,它提供了一种构建可扩展且模块化的服务端应用程序的方式,所以对于前端而言是最好上手的一门语法。

Nestjs学习推荐

给各大掘友推荐一下本人从0到1上手nestjs的教程,就是一下小册就是以下这本,初级直接上手跟着写一遍基本就会啦

image.png

建议学习到 61章左右就可以开始写后端项目啦

小程序端基本使用逻辑 用户下单-服务人员上门服务完成-用户检查完成后确认订单完成-订单款项打款到服务人员钱包 用户注册成为服务人员-设置服务范围-上线开始服务-等待用户给服务人员下单 下单流程

选择服务地点-选择服务人员-点击预约-添加服务宠物-付款

image.png

服务人员认证流程

根据申请流程逐步填写,由于服务人员是平台与用户产生信任的标准,所以我们加大了通过审核的门槛,把一些只追求利益,而不是真正热爱宠物的人员拒之门外,保护双方利益。

image.png

后端Nestjs部署

后端代码写完之后我们需要把服务部署到腾讯云,以下是具体步骤

1.腾讯云创建镜像仓库

前往腾讯云创建容器镜像服务,这样我们就可以把本地docker镜像推送到腾讯云中了,这个容器镜像服务个人版是免费的

image.png

2.打包Nestjs

通过执行docker命令部署到本地的docker

image.png

👇以下是具体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集群)

image.png

然后我们去创建一个自动化执行命令,去执行服务器的docker部署

image.png

创建命令

image.png

执行命令

image.png

👇以下是命令代码

# 停止服务 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.部署完成

命令返回执行结果显示执行完成,说明已经部署成功了

image.png

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个接口

image.png

后期版本更新

预计这个月上线毛孩子用品盲盒抽奖,有兴趣的友友们也可关注下哦

Frame 2608921.png

后期展望,帮助更多的流浪动物有一个温暖的家

image.png 小程序上线

目前小程序已经上线啦~,友友们可以前往小程序搜索 喵汪舰 前往体验, 或者扫描一下二维码前往

开业海报.jpg 我的学习路线

因为我是一个前端开发,所以对于设计感觉还是挺好的,所以上手比较快。 一条学习建议路线:前端-后端-设计-产品,最终形成了一个完整的产品产出。

以下的链接是这个项目中我经常用到的素材网站:

freepik国外素材网站-可以找到大部份的插画素材

figma自带社区-获取参考的产品素材

花瓣国内素材参考网站-涵盖了国内基本的产品素材

pinterest国外大型素材网-你想到的基本都有

总结

一个产品的产出不仅仅依靠代码,还要好的用户体验,还需要不断的优化迭代,

最后给一起并肩前行的创业者们的一段话:

在创业的道路上,我们正在追逐梦想,挑战极限,为自己和世界创造新的可能性。这个旅程充满了风险和不确定性,但也蕴藏着无限的机遇和成就,不要害怕失败,勇于面对失败,将其视为成功的必经之路。



【本文地址】


今日新闻


推荐新闻


CopyRight 2018-2019 办公设备维修网 版权所有 豫ICP备15022753号-3