爱猫程序员给自家小猪咪做了一个上门喂养小程序 |
您所在的位置:网站首页 › 上门做电脑程序 › 爱猫程序员给自家小猪咪做了一个上门喂养小程序 |
🐱前言
每次一到节假日,都好想和好朋友们一起出去玩,但是心里总放不下家里的小猪咪,于是心想能不能找一个喂养师上门喂养呢。于是找了几个上门喂养的平台,并最终下单了服务。 真的不得不说,上门喂养的小姐姐真的非常用心和专业。她们来到我家期间,全情投入地照顾着我的毛孩子,让它吃得饱饱的,看起来胖乎乎的。更令我感动的是,她们还全程录像了照料过程,并将视频发送给我,让我能够时刻了解小猪咪的情况。 分享下小猪咪美照👇 我也是程序员,为什么我不能自己也做一个上门喂养的小程序呢,于是经过调研,发现了其他的几个平台各有各的弊端和优点,然后诞生出了最初的想法如何做一个把其他平台的弊端去除掉,做一个最好的上门喂养平台。 🎨开始设计 于是开始琢磨figma~~~因为任何c端都是通过首页再去衍生出其他页面整体样式的,所以先着手制作首页,只要首页定好了其他页面都好说。
由于刚入门设计一开始丑丑的,不忍直视~~~ 经过不断的练习琢磨参考最后定稿,给大家推荐下我经常参考我素材网站花瓣 由于页面太多了就不一一展示啦~~~ 给各大掘友分享一下我最满意的设计页面 签到结合了猫咪的元素统一使用了同一只猫咪素材~整体效果偏向手绘风格。 这个扭蛋机真是一笔一画画了一天才出来的,真的哭😭啦~,由于AE动画太过麻烦所以每一个扭蛋球球的滚动都用代码去实现~~ uniapp + nestjs + mysql NestJS是一个基于Node.js的开发框架,它提供了一种构建可扩展且模块化的服务端应用程序的方式,所以对于前端而言是最好上手的一门语法。 Nestjs学习推荐给各大掘友推荐一下本人从0到1上手nestjs的教程,就是一下小册就是以下这本,初级直接上手跟着写一遍基本就会啦 建议学习到 61章左右就可以开始写后端项目啦 选择服务地点-选择服务人员-点击预约-添加服务宠物-付款 根据申请流程逐步填写,由于服务人员是平台与用户产生信任的标准,所以我们加大了通过审核的门槛,把一些只追求利益,而不是真正热爱宠物的人员拒之门外,保护双方利益。 后端代码写完之后我们需要把服务部署到腾讯云,以下是具体步骤 1.腾讯云创建镜像仓库前往腾讯云创建容器镜像服务,这样我们就可以把本地docker镜像推送到腾讯云中了,这个容器镜像服务个人版是免费的 通过执行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.部署完成命令返回执行结果显示执行完成,说明已经部署成功了 由于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个接口 预计这个月上线毛孩子用品盲盒抽奖,有兴趣的友友们也可关注下哦 后期展望,帮助更多的流浪动物有一个温暖的家 目前小程序已经上线啦~,友友们可以前往小程序搜索 喵汪舰 前往体验, 或者扫描一下二维码前往 因为我是一个前端开发,所以对于设计感觉还是挺好的,所以上手比较快。 一条学习建议路线:前端-后端-设计-产品,最终形成了一个完整的产品产出。 以下的链接是这个项目中我经常用到的素材网站: freepik国外素材网站-可以找到大部份的插画素材 figma自带社区-获取参考的产品素材 花瓣国内素材参考网站-涵盖了国内基本的产品素材 pinterest国外大型素材网-你想到的基本都有 总结一个产品的产出不仅仅依靠代码,还要好的用户体验,还需要不断的优化迭代, 最后给一起并肩前行的创业者们的一段话: 在创业的道路上,我们正在追逐梦想,挑战极限,为自己和世界创造新的可能性。这个旅程充满了风险和不确定性,但也蕴藏着无限的机遇和成就,不要害怕失败,勇于面对失败,将其视为成功的必经之路。 |
今日新闻 |
推荐新闻 |
CopyRight 2018-2019 办公设备维修网 版权所有 豫ICP备15022753号-3 |