构建全栈电子商务网络应用程序
#javascript #初学者 #node #ecommerce

介绍

这是我在这里的第一篇文章,这不是要教任何人如何构建网络应用程序,而只是分享我的旅程和经验。

话虽如此,在过去的6个月中,我在空闲时间中度过了大部分时间,为朋友建立了一个fully-functional custom e-commerce web app

该应用程序是根据前端的最新趋势HTML5,CSS3和JavaScript构建的,以及Nodejs,MongoDB,Pug,以及用于服务器端的RESTFUL API。 PayPal API已集成为付款。我之所以选择不使用任何框架或图书馆作为前端的原因,为什么我们决定自定义而不是现成的解决方案,以及导致此帖子的所有事件都遵循...

一点点历史首先...

在这个大流行期间的某个时候,我终于受够了我当前的工作和管理提供的激励性,知识,文化和财务刺激(或缺乏),这与编程或IT无关。我终于觉得是时候进行改变了,如果我要改变某些东西,我决定恢复我的旧兴趣和爱好 - 编程。即使我已经编程了任何东西已经有一段时间了,但我一直在忙于IT项目和爱好,所以我从来没有真正离该主题太远了。附加的值-HTML,CSS和JS现在更加完整并且能够构建完整且有用的Web解决方案,这在我的学生时代绝对不是这种情况,当您需要使用HTML表(例如HTML表)进行更复杂的事物比文本段落。

所以,在去年年初的某个时候,我继续投资了前端和后端开发的几门课程,也观​​看了数十个免费课程(以刷新我过去的知识,并随着当前的速度提高这些语言和工具的状态),当我最终感到有信心继续前进时,我决定是时候开始从事项目了。每个人都不同,有人想按主题来解决主题,我会更好地解决问题,如果我有完整的故事(在这种情况下为全栈),我会更好地解决问题。

回到项目...

这是如此复杂的项目,对于如此小的商店来说,功能很多,但是这是一次很棒的学习体验和一个很棒的练习。它挑战我学习很多课程通常不涵盖的东西,想一想您可以将API分组和组织的所有方式,如何以最佳的方式从前端访问它们,并且最重要的是....想想设计。编写代码是一回事,设计有吸引力且可接受的接口是另外一回事。这正是我选择反对使用图书馆和框架的前端的原因,我只是想玩耍并学习尽可能多的CSS属性。

从文件和算法的组织开始,我与MVC一起去了这个项目。即使在组织代码方面有不同的理念,但对于这个项目,我应用了MVC结构,因为它似乎在很大程度上受到Web开发人员的青睐,并且因为它适合该项目的要求。

我基本上构建了一堆用于产品操作的后端API端点(添加,删除,更新等),我知道我肯定会需要的,构建了Mongoose型号,然后返回并构建了一个基本的前端HTML框架(使用最小的CSS),只是为了获得元素的定位感,大小,一般了解一切的外观。

之后,我返回并构建了用户身份验证API(使用JWT非常容易),构建模型,路由,控制器,保护了一些现有路线,已实现的登录/注册表单。

在用户API之后,该是订单API的时候了(还需要建造购物车并拥有付款系统)。我已经考虑了如何实施购物车,并且在无国籍的理念中,我决定应该通过浏览器本地存储实施它。我仍然不确定我是否打了正确的电话,但是在用户的浏览器中将购物车项目对我来说似乎是合乎逻辑的(对于不喜欢登录的用户直到真正必须登录,在这种情况下,这将是 - 实际下订单),以便无论是否登录,他们可以在返回网站时都可以使用购物车。对于付款,我实施了PayPal API。我已经研究了一个话题,考虑了条纹和其他提供商,但最终决定主要是由于领土覆盖范围和与编码无关的其他原因。

在这一点上,我已经进入了该项目的3.5-4个月,我感到有信心我将成功地构建该项目,并且我将相对较快地完成它。但是,我错误计算的是,构建管理面板(旨在管理产品,订单和用户),用户面板(还显示用户订单和喜欢的产品),所有的gimmicks都喜欢和共享按钮,评分,都需要实施大量功能,将占用大量时间和代码。

尽管如此,我继续以简单的仪表板方式构建了管理员部分,而没有花哨的图形或大量的眼神(始终可以添加)商店起飞,产品和订单开始堆积)。

在这一点上,我意识到我需要具有产品存档功能,该功能将存储所有产品版本的快照。在我看来,每个产品详细信息可能会在其生命周期期间发生更改,并且必须有一个跟踪每个版本所包含的内容以及每个用户订购的版本。我考虑了如何实现此问题,并决定将整个产品数据存储为存档版本。每次更新产品时,其版本都会自动增加,旧数据被存储为存档副本。管理面板可以访问产品存档,因此基本上,管理面板中的每张产品卡还显示该产品的存档版本。这对我来说似乎很整洁,因为管理员可以轻松访问此数据,并查看每个用户在投诉时订购的内容,但是我仍然想知道是否有一种更优雅的方法来实施此数据(仅存储差异数据或其他东西)...

我不必重写太多的代码来实现新的模型,控制器和档案功能的路线,但是,加上我在构建购物车时遇到的一些问题,使我意识到服用的重要性在开始处理代码之前,是时候正确思考和计划您的算法以及它们之间的所有必要接口。这是我的第一个大型项目,有了我尚未学到的东西,我无法预见到这一点,但是,对于我计划的下一个项目,我肯定会更了解(这就是为什么我购买了1.5平方米白板:d)。

我需要实现的最后一个后端功能是电子邮件功能,我确实使用了NodeMailer。它相对较简单,具有足够的文档,并且在实施此问题时没有问题。我调整了一些现成的电子邮件模板,这些模板可以在线找到,因为我没有时间设计新的电子邮件,但是我打算回到此模板,并制作新的网站设计和品牌。

最后,界面需要进行最终形状,并获得现代网站通常具有的所有妆容,并使其响应迅速。这个过程有点挣扎,因为我没有任何无花果或XD设计要对抗,而且每个人在……一切方面都有不同的品味。在这里,使用框架,库,模板在节省时间和代码上都可以极大地帮助您,但是我不后悔步行走这条路线,因为这是一次很棒的学习体验,而且我想实施一些功能(例如交替的产品卡以及整个卡设计)我找不到这些前端工具的功能。我花了很多时间寻找一些想法和设计,结合了一些我真正喜欢的界面概念,在Photoshop和Illustrator中做了很少的工作,并提出了现在该项目的V1设计的内容。

最后,即使我知道我本可以更好地对此网络应用程序的某些方面(尤其是我绝对需要清理的CSS,贝宝帐户仍然是开发帐户,所以不要订购任何东西但是,:d等),考虑到我需要很多事情,并且确实通过构建这个电子商务网站来学习,我仍然对最终结果感到满意。我采取了努力使SEO通过制造SSR-ED以及使用SLUG来进行优化,并在其他方面使用SLUGS。我仍然需要对HTML,CSS和SEO合规性进行测试,但是我期望这里没有任何重大问题,只是较小的属性调整。

我有几个功能可能在最终发布之前添加(访问柜台,搜索功能,评论,可怕的cookie通知等),但是大多数已经实现了计划的内容。

那么,这个冗长的帖子有什么意义?

首先,正确自我介绍。这是我在这里的第一篇文章,我计划全职追求这一开发道路,因此我认为这是与其他开发人员联系,学习一些东西,与他人分享经验和知识的绝佳机会,并可能在未来的项目上进行合作。

其次,我认为这个网站是与过去的论坛最接近的东西,而且说实话,我想念其中许多人,因为用户转向社交网络或更糟的是,他们失去了大量的吸引力。在我的生活中,我学到并分享了大量的事情,这要归功于论坛和出色的成员,您实际上无法在其他地方学习的东西,获取有关您无法访问的事情的信息,我觉得我需要尽我所能保存这种文化。

我不想用代码和算法负担这篇文章的负担,因为这不是这篇文章的重点,但是我正在使整个代码在GITHUB上可用。

我非常感谢任何人可能对我设计和构建代码的建议,评论或批评者,尤其是在确保应用程序时。