后端开发教程 - Java、Spring Boot 实战 - msg200.com
我第一次如何构建一个真实世界的项目
目录
项目介绍👋
技术栈⚛️
线框和设计🎨
数据建模💾
项目组织
Sprint 01：前端📲
Sprint 02：后端
Sprint 03：实现功能⭐
Sprint 04：修复并部署☁️
结论
我学习 Web 开发已有一年了，刚刚为客户交付了我的第一个 MVP，这是我成为真正的开发人员的一大进步。
在本文中，我将大致介绍一下构建过程和设计思维。这绝不是教程，我只是与感兴趣的人分享我的经验。
目录
项目介绍👋
首先介绍一下这个项目。我们需要构建一个 MVP（最小可行产品），用于开发一款同时支持Android和iOS 的移动应用。这款应用名为Allergio，旨在帮助食物过敏人群的生活更加轻松。
借助Allergio，您可以为您的亲戚创建个人资料，注册他们的过敏情况并与您的联系人分享他们的个人资料。
它的核心功能是扫描仪。打开手机的前置摄像头，将其对准任何食品，就会显示潜在过敏原的列表。
为了完成这个任务，我和我的朋友 Walid 组队。他是一位才华横溢的 JavaScript 开发者，很高兴能和他分享这段经历。
技术栈⚛️
为了构建此应用程序，我们决定依赖非常流行的MERN堆栈，其中包括：
➡️ MongoDB
➡️ Express
➡️ React Native
➡️ Node
虽然这些都是我熟悉的技术，但我从未使用过React Native，而且对移动开发概念也不太了解。
我们正在考虑使用AWS和Heroku来托管后端部分并进行文件管理，但我将在修复和部署部分提供更多详细信息。
这听起来已经是一个伟大而令人兴奋的挑战了🤩
以下是我通常使用的工具列表，以增强我的编程体验：
➡️ OS：MacOS➡️
终端：iterm2➡️
IDE：VSCode➡️
版本控制：Git➡️
包管理器：NPM➡️
iOS 模拟器：Xcode➡️
Andorid 模拟器：Android studio➡️
通信：Slack➡️
项目组织：Trello
线框和设计🎨
我们的客户 Xavier 提供了简单的线框，我们对其进行了一些修改，使其看起来“现代”并改进了 UI/UX。
我们主要使用Figma，这是一款非常棒的工具，我百分百推荐。我给你看几个例子。
启动画面：
登录屏幕：
当然，我们根据 2020 年的移动开发惯例重新设计了该应用程序，并从Yuka、Shazam、Spotify等著名应用程序中汲取了灵感……
数据建模💾
由于我们正在构建一个全栈应用程序，因此必须存储和管理数据。如果没有一个清晰且精心设计的行动计划，就贸然开始编码过程，那将是疯狂的。
我们正在使用什么样的数据：
用户👤
{
email: { type: String, required: true, unique: true },
password: { type: String, required: true },
name: { type: String, required: true },
lastName: { type: String, required: true },
image: { type: String },
profiles: [{ type: mongoose.Types.ObjectId, ref: 'Profile' }],
allergens: [{ type: mongoose.Types.ObjectId, ref: 'Allergen' }],
contacts: [{ type: mongoose.Types.ObjectId, ref: 'User' }],
}
个人资料👨👩👧👦（由用户为其亲属创建）
{
name: { type: String, required: true },
image: { type: String, required: true },
allergens: [{ type: mongoose.Types.ObjectId, ref: 'Allergen' }],
readers: [{ type: mongoose.Types.ObjectId, ref: 'User' }],
owner: { type: mongoose.Types.ObjectId, ref: 'User', required: true }
}
➡️过敏原🥜
{
name: { type: String, required: true },
image: { type: String, required: true },
description: { type: String, required: true },
reaction: { type: String, required: true }
}
PS：MongoDB默认提供唯一ID。
太棒了，我们现在知道我们的数据是什么样子的了，但这还不够。为了让我们的应用能够创建、读取、删除和更新数据，我们必须让它有机会与服务器通信。
您可能已经知道，Express使得构建 Rest API 变得非常容易，而这正是我们要做的！
如果您不熟悉 API 架构，我建议您跳过本节。
API 路由：
用户👤⏩/api/users/
➡️（GET /:uid）通过 ID 获取用户。➡️
（POST /signup）创建用户帐户。➡️
（POST /login）登录用户。➡️
（PUT /）编辑用户信息。
个人资料👨👩👧👦⏩ /api/profiles/
➡️（GET /:uid/all）获取用户的所有个人资料。➡️
（GET /:pid）通过 ID 获取个人资料。➡️
（POST /）创建新个人资料。➡️
（PUT /:pid）编辑个人资料信息。
联系人👥 ⏩ /api/contacts/
➡️ (GET /:uid ) 获取用户的联系人。
➡️ (POST /search ) 搜索新联系人。
➡️ (POST /share ) 与联系人分享个人资料。
➡️ (POST / ) 添加联系人。
➡️ (DELETE / ) 删除联系人。
➡️ (POST /unshare ) 取消与联系人分享个人资料。
过敏原🥜⏩/api/allergens/
➡️（GET /:aid）通过 ID 获取过敏原。➡️
（GET /）获取所有过敏原。➡️
（GET /name/:name）通过名称获取过敏原。
我们差不多准备好了，在您进入下一部分之前，我想简单介绍一下文件管理。
这是我们在构建Allergio时遇到的最棘手的问题之一，我认为分享我们想出的解决方案会很有趣。
问题是：如何存储图像？
将图像直接上传到数据库会降低速度，并且大多数图像托管服务都要求您支付月费。
我们决定构建一个非常简单的自定义图片上传服务，它将图片存储在服务器上，并提供一个 URL 来获取图片。这个简单的服务器托管在云端运行的Ubuntu实例上。
这肯定不是最好的解决方案，但考虑到我们必须在相对较短的时间内完成大量工作，它还是可以的。
项目组织
我永远都说不够：组织才是关键！🔑
该组织主要依赖敏捷方法，因为我们在编码训练营期间就接触到了它。
构建过程分为 4 个 5 天的冲刺（每个冲刺都有自己的部分），每个冲刺都必须有明确定义的任务。
我们每周一早上都会聚在一起，制定一份完整的一周任务清单。我们会用Trello为每个任务制作小卡片。
每个星期五，我们都会和客户开会。他总是很乐意听我们演示一个小样，多亏了他每周的反馈，我们最终交付了一款接近他最初预期的产品。
此外，我们尽量坚持每天早上站立会议和下午 5:30 左右进行当天回顾。
每当您开始一个全新的项目时，还有另一个组织关键点，那就是工作流程设置。
我们正在尽可能按照 Git flow 的建议与GitHub合作。
➡️ 不熟悉 Git Flow？别担心，看看我的文章！🧐
最后，让我向您展示我们使用的文件夹结构：
过敏📂
-
后端/
--- 控制器/
--- 模型/
--- 路由/
--- 实用程序/
--- 中间件/ -
前端/
--- 应用程序/
------ 资产/
------ 组件/
------ 屏幕/
------ 上下文/
------ 实用程序/
------ 导航/
Sprint 01：前端📲
终于到了开始编码的时间了！🔥
感谢Expo，它让这个项目成为可能。Expo是一个 React 应用程序框架，它提供了一套工具，让你在几分钟内就能开始构建应用程序，并隐藏了新项目设置过程中的大部分复杂性。
一开始使用React Native非常可怕，因为我们以前从未使用过它，但Expo的文档写得很好，我感觉只需几天就可以永远进行移动开发。
初始化项目后，设置应用内导航是一个很好的起点。React Navigation与 Web 版React Router非常相似，是一个易于上手的优秀库，并且为每种用例提供了良好的解决方案。
我们决定实施底部标签导航以获得最佳用户体验：
另一个重要步骤是设置全局上下文。每个 React 开发者都知道，当项目规模越来越大时，通过 props 提升状态是多么繁琐。
为了满足全局状态的需求，我们主要使用React Context来存储用户信息，例如姓名、姓氏、图像以及用户是否登录。
目前一切运行正常，让我们开始构建屏幕和组件。我们需要构建大约 10 个屏幕（每个选项卡都有内部导航），以及大约两倍数量的组件，例如按钮、卡片、输入框、底部表单等等。
目前，我们正在处理虚拟的硬编码数据。我们的组件主要是函数组件，它们的状态由React Hooks管理。
希望我们有足够的时间在第一个冲刺结束之前实现相机功能并请求外部 API 来收集有关食品产品的信息。
Sprint 02：后端
正如我之前提到的，这个项目的后端是一个链接到云MongoDB数据库的 Node/Express Rest API。
为了使其工作，我们首先安装依赖项，例如cors、body-parser、mongoose、nodemon等。
使用 MongoDB 时，我强烈建议你也使用Mongoose。它能让你的工作轻松很多。只需为你的数据定义 Mongoose 模型，连接到数据库，就可以开始使用了。
然后，我们像我在这里解释的那样注册路线，并将每条路线连接到专用控制器。
每个控制器的行为都必须经过测试，为此您可以尝试一下Postman。
最后，我们通过适当的错误处理中间件提高了服务器的稳健性，并通过 nodemon 和环境变量增强了开发体验。
Sprint 03：实现功能⭐
这是迄今为止最令人兴奋的一周，我们终于看到了之前所做的一切的成果。
我们花了整整一周的时间通过 HTTP 请求将前端用户界面连接到后端控制器并实时更新数据库。
HTTP 请求使用Axios完成，这是个人偏好。
本周有许多功能需要实现：
➡️ 使用电子邮件和密码登录/注册。➡️
创建和更新个人资料。➡️
编辑用户信息。➡️
添加/删除联系人。➡️
与联系人共享个人资料。➡️
从手机图库上传图片。➡️
发送短信邀请朋友。➡️
...
得益于 Expo 令人难以置信的文档，短信、相机和照片库等原生功能得以实现🌟
Sprint 04：修复并部署☁️
这段极其充实的冒险之旅已经结束了。我已经学到了很多，也投入了大量的时间和精力。虽然有些疲惫，但在将项目交给客户之前，我们还有很多工作要做。
数千行代码等待重构，并且仍然存在许多小错误。让我们先清理这些代码，并尽可能修复一些样式问题。
AWS有一个名为 EC2 的云服务。我们创建一个 Ubuntu 实例并通过 SSH 连接。经过一些设置后，我们的服务器和镜像管理器就运行在云端了。
目前，该应用程序仅可通过 Expo 的托管获得，但我们希望很快将其部署到 App Store 和 Play Store 上。
结论
紧张的四周已经过去了，我们很累，项目仍然有一些小问题，但客户很高兴，这才是最重要的。
在我看来，我和我的朋友 Walid 在这里做得很好，第一次参与真正的项目并面对障碍使我们成为更好的开发人员。
我想在本文中提供该应用程序的演示或源代码的链接，但由于该项目处于 alpha 阶段，客户希望对一些信息保密。
非常感谢您的阅读！
我很乐意收到您的反馈，任何关于如何提高自己作为开发人员或博主水平的建议我都非常感谢😇
文章来源：https://dev.to/killianfrappartdev/how-i-built-a-real-world-project-for-the-first-time-5gn5