通过集成Cloudinary＆XATA来构建轻型电子商务店面，并部署以NetLify-DEV365 开发者社区

这篇文章介绍了将Cloudinary＆XATA集成到HTML和CSS静态电子商务网站并部署到NetLify的逐步指南。留在本指南中！

Cloudinary使您无需任何第三方软件即可将数百万张图像和视频上传到网站或应用程序。 XATA是一种无服务器工具，它将使没有编码经验的开发人员在不管理多个应用程序的情况下构建软件和应用程序。另外，使用Netlify，您可以实时部署应用程序，并将其展示给其他开发人员进行审查，而无需支付托管公司的费用。

在本文中，我使用HTML和CSS创建了电子商务网站的基本结构，然后集成了用于上传文件的云解决方案。我将xata.io集成为数据库解决方案，用于存储数据上传，并最终将其部署到NetLify。本文将指导您如何快速执行这些操作。

github url ：
我们在GitHub上完成了这个项目。

https://github.com/Ladyprowess/ecommerce-website-on-cloudinary

先决条件

Windows操作系统
XATA帐户。 Sign up here如果您已经有帐户
一个云帐户。 Signup here如果您没有帐户
VSCODE编辑器或任何其他编辑器（例如Sublime或Notepad）。使用HTML和CSS

电子商务解决方案为企业主提供了在线或通过互联网上宣传和销售其产品的杠杆作用。
步骤1 ：在Windows计算机上下载VScode并启动。
步骤2 ：在桌面上创建一个新文件夹，您将保存所有项目。转到文件，然后单击新文件开始一个新项目。
步骤3 ：启动您的<!DOCType.html>并在创建的文件夹中使用 index.html 保存。

这是我用于此项目的HTML代码。

https://gist.github.com/Ladyprowess/7b014124d03ceb2854b94c50adc9e852
步骤4 ：对于CSS，通过转到文件并单击新文件来启动一个新项目来做同样的事情。
步骤5 ：启动您的CSS代码，并在创建的文件夹中使用 style.css 保存它。

这是我用于此项目的CSS代码。

https://gist.github.com/Ladyprowess/ce8322ac5fceb59ec934644bda1d7df2

如何将云集成到电子商务网站

Cloudinary是一家SaaS技术公司，为移动应用程序和网站提供了端到端的视频和图像管理解决方案。
步骤1 ：在浏览器上转到Cloudinary，免费注册。您可以与Google，github或您的电子邮件注册。

步骤2 ：一旦您登录，仪表板将出现这样的：

步骤3 ：创建HTML和CSS代码以将Cloudinary插入电子商务网站。
CSS代码

`.cloudinary-button {
    display: flex;
      float: left;
      position: relative;
      width: 100%;
      height: 60%;
  border: 3px solid red;
  }`

html代码

<button id="upload_widget" class="cloudinary-button">Upload Product Image</button>
<script src="https://upload-widget.cloudinary.com/global/all.js" type="text/javascript"></script>

登录到Cloudinary后，单击菜单选项中的仪表板。云名称可在帐户详细信息选项中获得。在您需要的HTML代码中复制它。

添加上传预设
使用上传预设，您可以设置用于将资产上传到一个地方的选项，而不是为每个上传调用。您可以设置多个上传预设并在不同的上传情况下使用。
要获得上传预设，请采取以下步骤：

转到设置 s
滚动以上传预设，然后单击添加上传预设。
输入上传预设名称，将签名模式更改为unsigned，然后单击“保存”。
复制上传预设名称并将其粘贴到您的HTML代码中。
uploadpreset：'lady_prowess'
最后，保存您的HTML代码并将其运行在浏览器上。这是您的网站的外观：

完成本节后，这是我们的index.html文件的外观：

<script type="text/javascript">  
var myWidget = cloudinary.createUploadWidget({
  cloudName: 'dii62jcmk', // replace with your cloud name
  uploadPreset: 'lady_prowess'}, (error, result) => { //replace with your upload preset
    if (!error && result && result.event === "success") { 
      console.log('Done! Here is the image info: ', result.info); 
    }
  }
)

document.getElementById("upload_widget").addEventListener("click", function(){
    myWidget.open();
  }, false);

</script>

这是HTML代码的链接：

https://gist.github.com/Ladyprowess/7f2fe13b731f6a2273f0d0949f7502fa

如何将xata.io集成到电子商务网站

xata.io是jamstack应用程序的无服务器数据库，结合了传统数据库的功能，使其更易于管理，消费和存储数据。
步骤1 ：访问https://xata.io/，单击“免费建造您”；可以选择与Google，GitHub或您的电子邮件注册。
步骤2 ：在仪表板上，单击从头开始

步骤3 ：键入表名，然后单击添加表。

步骤4 ：单击加号（+），然后添加一个字符串；命名您的字符串标签

步骤5 ：再次单击加号（+），然后添加布尔值；命名您的布尔人完成

步骤6 ：单击“添加记录”，然后命名标签上传'并创建记录。

步骤7 ：单击“获取代码”摘要，复制JavaScript代码段，然后将其粘贴到您的HTML代码中。然后保存您的HTML代码。

// Generated with CLI
const { getXataClient } = require("./xata");

const xata = getXataClient();

const page = await xata.db.upload.getPaginated({
  pagination: {
    size: 15,
  },
});

console.log(page.records);