使用 NodeJS、React 和 MongoDB 构建全栈 Shopify 应用程序
使用 NodeJS、MongoDB 以及大量 JavaScript 和 CSS 魔法将您梦想中的 Shopify 应用程序变为现实
讲师：Elisha Kramer
口袋资源独家Udemy付费课程，独家中英文字幕，配套资料齐全！
用不到1/10的价格，即可享受同样的高品质课程，且可以完全拥有，随时随地都可以任意观看和分享。
你将学到什么
- Shopify 应用程序开发
- Shopify 代理应用程序（位于 Shopify 支持的网站的子路径上的面向购物者的应用程序）
- NodeJS 和 Vanilla JavaScipt
- 使用 HTML 和 CSS 与 Shopify 主题集成
- 开发现场制作应用程序
- 如何使用 Ngrok
- 使用 MongoDB 存储数据
- 通过代理应用程序上传图像
- 通过商店管理应用程序上传图像
- 购物者可以通过代理应用程序创建内容
- 商店管理员可以通过商店管理应用程序批准内容
- 带有 Shopify Polaris 的嵌入式 Shopify 管理应用程序
- 使用 Shopify Liquid 语法的代理应用程序
- 电子邮件与 Active Campaign 和 Sendgrid 集成
- 多语言翻译促进国际扩张
- Shopify 管理应用程序中的自定义 CSS 编辑器
- 自定义 CSS *（每个商店）通过代理应用程序注入
- 计费 API 集成 – 免费试用 x 天 + 每月定期付费
要求
- JavaScript 或任何其他编码语言的初级水平
- 有 NodeJS 经验者优先
- 了解 MongoDB 或 MySQL 数据库者优先
- 任何服务器端技术的初级水平
- HTML 和 CSS 是一个加号
- ReactJS 或 NextJS 是一个加号
- AngularJS 是一个优点
描述
当我在 2020 年 6 月第一次开始构建 Shopify 应用程序时。我开始在网上寻找面向购物者的应用程序的好示例，该应用程序位于 Shopify 支持的网站的子路径上。在梳理 Shopify 的文档后，我发现的最佳解决方案是代理应用程序。
但是，我找不到很好地实现它的 Shopify Repo 示例。
在本课程中，我们将介绍如何使用 NodeJS、MongoDB 和大量 JavaScript 构建全栈 Shopify 应用程序。
一路上有大量的工作代码可以帮助您开始构建您的 Dream Shopify 应用程序。
该课程基于 2 个大型 Github 存储库：
存储库 #1：使用 Node 和 React 构建 Shopify 应用程序
这是 Shopify 文档团队本身的演示存储库。
好消息是 Shopify 已经创建了一个关于 NextJS、GraphQL、Apollo Repo 的多部分教程，其中涵盖：
- 介绍
- 设置您的应用程序
- 将您的应用嵌入 Shopify
- 使用 Polaris 构建您的用户界面
- 了解 GraphQL 管理 API
- 使用 Apollo 获取数据
- 使用计费 API 收取费用
- 使用 webhook 监听商店事件
回购#2：Live Social King 回购
Social King Repo（本课程的主要吸引力）实际上是建立在 Shopify 的 Demo NextJS Repo（上面提到的）之上的。
Social King 是一个非常大的、模块化的、“易于推理和扩展”的存储库，已经有超过 1,400 次提交。
除许多其他功能外，它还包括：
1) 多语言翻译
2) Shopify 管理应用程序中的自定义 CSS 编辑器 – CSS 被注入到面向购物者的应用程序中的每个视图中
3) 计费 API – 免费试用 x 天 + 然后每月定期付费。
Social King 的面向购物者的应用程序与竞争对手的实施方案
如果您在客户站点或开发商店安装 Social King，您会发现 Social King 与竞争对手之间的用户体验存在巨大差异。
主要区别在于：
Social King 的开箱即用本地化功能
最重要的是，Shopify 支持来自世界各地的商家 – 不仅仅是英语受众 – 这意味着，使用 Social King 作为样板代码，将允许您的梦想应用程序：
- 支持商家买家的母语。这可能是安装您的应用程序的商家是否坚持免费试用或卸载该应用程序之间的区别
- 在 Shopify 应用商店的关键字竞价系统上获得更多低成本外国关键字的机会
Social King 为商店管理员提供开箱即用的内置 CSS 编辑器
演示版 Shopify 应用程序也不包含内置于商店管理应用程序中的自定义 CSS 编辑器 – 这是一项至关重要的功能，因为它是推动 App Store 上评论的主要功能之一*（Social King 获得评论的速度比现有的更快）玩家）！
当您的梦想应用程序上线并且客户写信请求 CSS/样式调整时，您所要做的就是编辑该给定商店的数据库中保存的 CSS。它非常模块化，是一个快速获胜的关键功能，可以为商家快速增加价值和提供优质服务。
久经考验的 Shopify 应用程序代码
简而言之：Social King 已经上线并为客户提供服务近一年了。客户一直在写信询问新功能和 CSS 调整。我还问过自己这样的问题：“这里容易实现的目标是什么？我们可以构建哪些功能来按时提供最大的回报？”
SPA 与将视图作为液体字符串发送回
当我第一次开始编写 Social King 时，我很自然地尝试使用单页应用程序框架/库，例如：ReactJS、VueJS 和 Angular。
但是，有一个关键缺陷 – 使用任何开箱即用的框架都会导致 Shopify 商店的现有 CSS、页眉和页脚以及任何其他插件在翻译中丢失。
仍然有许多 Shopify 应用程序为了 SPA 的代码清洁度而牺牲给定商店的主题和应用程序。
在本课程中，我们为了客户的愉悦和利益而对其进行了更改。
安装您的应用程序的每个 Shopify 商店都将拥有自己独特的主题和样式。这意味着有时，社区页面（面向购物者）上的元素实际上会从父级继承 CSS。
Shopify 的演示应用程序存储库还不够好吗？！
Social King 演示存储库试图填补 Shopify 文档和演示存储库留下的空白。
官方 Shopify 开源存储库和教程是一个好的开始，但是：
- 它不包含构建成功的面向购物者的多页面应用程序所需的一些基本功能。
- 它不包括购物者和管理应用程序上的图像上传。
- 它不包括多语言支持 – 即一次构建应用程序，然后通过谷歌翻译翻译文本，并使商店管理员能够提供国际化体验的方法。
使用 NodeJS 在服务器端渲染液体视图的好处
NodeJS 代理服务器有一个中间件功能，如下所示：
// 从该路由将所有内容以液体形式发送回去。
router.use((req, res, next) => {
res.set(‘内容类型’, ‘应用程序/液体’);
返回下一个（）；
});
好处是：
a) 每个商店都维护其页眉和页脚
b) 其他 Shopify 应用程序可以补充您面向购物者的应用程序的功能。
“但是，我需要使用 React….”？~
实际上，在我的 Github 上，您可以找到一个由 React 驱动的 Shopify 应用程序。如果您找不到它，请随时与我们联系。
如果 Social King 真的像你说的那么棒，那为什么它要开源呢？
- 继续付出：互联网是一个非常拥挤的地方。一段时间以来，我一直在 YouTube 上消费免费内容，在 Udemy 上消费低成本、高价值的内容。我知道当我在 Udemy 上找到准确的课程来解决我的问题并节省我数周甚至数月的时间时，感觉有多好。充满感恩的生活的一部分就是回报别人给予你的善意和美好事物。
- 互联网是免费或以非常低的成本向人们提供东西的。
- 这里有一个社会使命：许多商人被新冠疫情彻底消灭了。因此，新冠疫情给世界各地的商家敲响了警钟，“让我们上网吧，让我们学习如何在网上取得成功。”
Shopify 是商家以低成本和低时间投入开辟在线销售渠道的最简单方法之一。
因此，我碰巧认为，在 2021 年的这个时候，想要成为电子商务领域一部分的开发人员有很多机会，这就是商业上所说的：“蓝海”（与红海相反，竞争对手在红海中竞争）由于过度拥挤而互相活活吃掉）。
这意味着，这个领域有足够的机会让我取得成功，同时也帮助生态系统取得成功。
您在 Shopify 应用商店上确实能感受到这一点 – 因为这是一个新市场。如果您确实推出了为这些商店增加价值的产品，他们会以评论和每月订阅作为回报，这也有望让您取得成功。这很像一个新的生态系统——开发商的成功与商家的成功紧密相连。因此，为了在这个空间内建立新的关系，为这两个受众增加价值是有意义的。
更多关于 Social King 的信息
您是否希望您的 Shopify 商店支持访客博客？！有了 Social King，终于实现了:)
让购物者处理内容
使购物者能够创建有关您的产品的内容。审核社区分享的每个帖子、内容、图像或视频。
保持社区品牌
您的社交页面与您现有的主题和 Shopify 应用程序集成，开箱即用。启用电子邮件通知以吸引购物者回来。
扩展您的社区
购物者习惯在他们最喜欢的社交网络上使用表情符号。在您自己的社交网络上启用表情符号，并扩展您的社区。
购物者可以：
- 使用图片和“关于”部分创建自己的用户个人资料
- 创建和编辑帖子，包括上传图像和嵌入视频
- 对彼此的帖子发表评论
- 使用表情符号做出反应
商店管理员可以：
- 管理标签以推动围绕特定主题的对话
- 在网站上发布之前审核每个用户生成的帖子和评论
- 与用户生成的内容一起推广相关产品
- 自定义社区页面的外观和风格
增强您的社区氛围
为您的客户提供一个在您自己的品牌下进行博客、联系、分享和学习的平台。
电子邮件通知
当任何帖子或评论获得批准时，购物者会收到一封电子邮件通知，其中包含已批准内容的链接 – 从而将他们带回到您的网站（*免费！）
匹配您的主题并与您现有的应用程序集成
当您安装 Social King 时，您会注意到社区页面将具有与原始主题完全相同的页眉和页脚 – 开箱即用 – 并且所有现有插件也应该直接在您的社区页面上运行。
展望未来
如果您有 Shopify 应用程序创意并且希望存储库能够为您节省数周甚至数月的时间，那么希望这个小课程能为您增加价值。
祝你好运，愿原力与你同在？
本课程适合谁：
- 对 Shopify 应用程序开发感兴趣的人
- 任何想要作为社区一部分进行编码的人
- 任何对电子商务革命感兴趣的人
