使用 Gatsby、Snipcart 和 Flotiq 构建电子商务网站
如今形势严峻，许多企业都在努力将销售转移到线上。因此，这一次，我们将深入探讨如何使用 Snipcart、Flotiq 和 Gatsby 构建电子商务平台。
我们将从一个新的 Flotiq 帐户开始，构建内容类型定义，将其与 Gatsby starter 连接起来，最后使用 Heroku 将其部署到线上。
您将获得：
- 一个简洁美观、功能齐全的电子商务网站，展示您自己的产品，并在互联网上实时运行。
你需要准备：
我们开始吧！
准备好您的 Flotiq 账户
在这个项目中，我们将使用 Flotiq 来存储产品信息，例如名称、价格等。
只需几个简单的步骤，应该不会超过 1 分钟即可完成。
注册账号，只需30秒
首先你需要一个免费的Flotiq账户，在Flotiq注册一个免费账户即可。无需付款，无需信用卡，只需使用你的Github账户或邮箱连接即可。
创建内容类型定义，只需 30 秒
最关键的一步——您必须告诉Flotiq您希望在系统中存储哪种类型的数据。内容类型的名称及其属性是什么。
首次登录时，界面会非常空，没有任何内容。请前往该Type definitions屏幕。
这里列出了一些简单的样板内容类型，如果您时间紧迫，这将是一个很好的起点。
点击，Product然后点击Save。您无需进行任何更改即可开始使用此项目！
创建内容，只需 2 分钟
要让这个项目正常运行，你需要创建几个产品。在左侧边栏点击Content“→” Products，然后点击Add new Product object按钮。
请输入产品详情。
您可以上传自己的图片，也可以使用我们强大的 Unsplash 集成功能——前往Stock photos媒体库中的相应选项卡，浏览数千张精美图片。
最后——点击Save button。
重复以上步骤，直至生产完所有产品。
提示：如果您想以编程方式导入成百上千种产品，而不是手动输入，可以使用 Flotiq
batchAPI 中的接口。了解更多关于Flotiq 批量内容创建的信息。
开始你的 Gatsby 项目，只需 2 分钟
为了简化操作，我们准备了一个 Gatsby 入门模板，它集成了 Flotiq 作为产品数据源。您只需配置项目、安装依赖项，即可快速上线。
克隆仓库
首先克隆代码仓库：
git clone https://github.com/flotiq/gatsby-starter-products
配置 Flotiq
然后，在仓库的根目录下创建一个名为 `.config` 的文件.env。该文件用于存储 Flotiq 和 Snipcart 的配置信息。将以下内容放入该.env文件中：
GATSBY_FLOTIQ_BASE_URL="https://api.flotiq.com"
FLOTIQ_API_KEY="YOUR FLOTIQ API KEY"
您可以在界面中的用户个人资料部分找到您的 Flotiq API 密钥：
注意：我们强烈建议您创建一个有作用域的 API 密钥（阅读更多关于API 访问的信息），但对于开发环境，您可以使用界面中提供的默认只读密钥。
检查一下是否有效！
就这么简单。一切就绪。安装 NPM 依赖项并启动你的 Gatsby 项目：
npm install
gatsby develop
您现在应该可以在以下位置看到您的商店http://localhost:8000：
开始在线销售
是的，就是这么简单。
您几乎已经准备好开始销售了；最后一步是正确配置 Snipcart。
配置代码片段
前往Snipcart并登录您的帐户 - 获取您的公共 API 密钥。
将该密钥放入.env文件中，使文件现在看起来像这样：
GATSBY_FLOTIQ_BASE_URL="https://api.flotiq.com"
FLOTIQ_API_KEY="YOUR FLOTIQ API KEY"
SNIPCART_API_KEY="YOUR SNIPCART KEY"
然后使用以下命令重启 Gatsby gatsby develop：
将商品放入购物车后，您应该会看到以下内容：
完成结账步骤后，您将看到最终屏幕：
但如果您尝试从本地计算机下单，最终结果会是这样的：
所以——如果您想全面测试集成功能——现在是时候让这个网站上线了！
使用 Heroku 将网站上线，耗时 2 分钟
为了方便起见，我们准备了一个按钮，点击即可立即将您的项目发布到互联网上。
按下按钮！
登录 Heroku 后（可以使用免费帐户），您需要为您的项目选择一个域名。我们使用了snipcart-flotiq.
然后将.env文件中的详细信息复制到输入字段中。
然后点击Deploy app。一两分钟后，您的应用就上线了！
提示：
如果您想将此项目托管在您自己的域名下，可以使用Cloudflare 提供的免费服务，并借助以下技巧将自定义域名添加到免费的 Heroku 帐户。通常情况下，您需要在 Heroku 上付费才能实现这一点，但没办法，现在经济形势严峻。
请在 Snipcart 中提供域名
在等待部署完成期间，请前往您的 Snipcart 个人资料页面并配置您的域名：
验证结果
结果如何？您已成功下单！
而且你也能立即在 Snipcart 中看到它。
结论
您已成功构建并部署了一个端到端的无代码电子商务平台，这要归功于 Flotiq、Snipcart 和 Gatsby 提供的工具和模板。虽然在正式上线电子商务平台之前还有许多重要事项需要考虑，但这无疑是最大限度降低技术成本和工作量的绝佳方法。
和往常一样——请告诉我们您的使用体验如何！
文章来源：https://dev.to/flotiq/build-an-e-commerce-site-with-gatsby-and-snipcart-3jpg本文最初以《Flotiq深度解析：使用Snipcart、Flotiq、Gatsby和Heroku开始在线销售》为题发表。