使用Cloudinary，Xata和Next.js构建时间轴跟踪器-DEV365 开发者社区

使用Cloudinary，Xata和Next.js构建时间轴跟踪器

#javascript #网络开发人员 #nextjs #xata

时间轴在视觉上表示完成我们项目所需的工作。它显示了每个活动完成的日期，因此我们可以监视我们的进度。另一方面，它还可能传达实现截止日期所需的条件，从而使管理期望和长期项目的优先级更加直接。

。

该帖子将教我们如何在Next.js应用程序中使用Cloudinary和Xata构建时间轴跟踪器。

查看实时演示here。

github存储库

Olanetsoft / Timeline-Tracker-with-Cloudinary-Xata-and-NextJs

使用Cloudinary，XATA和NextJS构建时间轴跟踪器

This is a Next.js project boottry用koude0。

入门

首先，运行开发服务器：

http://localhost:3000以查看结果。

您可以通过修改pages/index.js开始编辑页面。编辑文件时，页面自动更新。

可以在http://localhost:3000/api/hello上访问API routes。可以在pages/api/hello.js中编辑此端点。

pages/api目录映射到/api/*。该目录中的文件被视为API routes而不是React页面。

了解更多

要了解有关Next.js的更多信息，请查看以下资源：

Next.js Documentation-了解Next.js功能和API。
Learn Next.js-互动Next.js教程。

您可以查看the Next.js GitHub repository-欢迎您的反馈和贡献！

在Vercel上部署

部署下一个的最简单方法。

View on GitHub

什么是云？

Cloudinary提供了一个安全，全面的API，可快速有效地从服务器端，浏览器或移动应用程序上传媒体文件。我们可以使用Cloudinary的REST API或客户端库（SDK）上传媒体资产，该资产使与网站和移动应用程序集成更加易于访问。

什么是XATA？

Xata是一个无服务器数据平台，使我们能够管理，扩展，防止停机，缓存和维护我们的数据库以改善我们的开发工作流程。此外，它提供了一个关系数据库，有效的搜索引擎等等。

先决条件

在开始本教程之前，我们应该有以下内容：

对ES6 JavaScript功能的基本理解
安装在我们的PC中的Nodejs
对钩子的知识
纱线或NPM软件包管理器

项目设置和安装

要继续，让我们在我们的首选目录中使用git命令克隆以下内容：

git clone https://github.com/Olanetsoft/Timeline-Tracker-with-Cloudinary-Xata-and-NextJs/tree/starter

运行以下命令使用yarn软件包管理器安装所有依赖项。

yarn && yarn dev

或运行以下命令使用npm软件包管理器安装所有依赖项，以在http://localhost:3000上启动项目。

npm install && npm run dev

我们应该有类似于下面的东西。

创建和设置XATA

在本节中，我们将通过signing up为新帐户或log in设置Xata个人资料。成功注册后，我们将重定向到我们的仪表板。

。

接下来，我们将单击Add a database，输入我们的首选数据库名称* ，然后* 单击 create。我们将被重定向到数据库页面，类似于下面所示。

我们将创建一个名为users的表，以保存我们平台上注册的用户的所有记录，如下所示。

将以下列添加到users表。

列名	数据类型	唯一
firstName	字符串	[]
lastname	字符串	[]
电子邮件	电子邮件	[x]
密码	字符串	[]

我们将重复上述过程，以创建一个名为timelines的新表格，并使用以下列;

列名	数据类型	唯一	表
标题	字符串	[]	-
描述	字符串	[]	-
时间轴	字符串	[]	-
image_url	字符串	[]	-
用户	链接	[]	用户表

接下来，我们将使用以下以下命令创建的远程XATA数据库。

。

# Install the Xata CLI globally
npm i -g @xata.io/cli

全球安装XATA CLI后，我们将使用以下命令在本地启动数据库实例。

xata init --db https://Olubisi-Idris-Ayinde-s-workspace-s.us-east-1.xata.sh/db/timeline

要获取我们数据库的上述代码段，请转到用户表，然后单击Get code snippet,。

。

运行命令以初始化项目；我们将看到一个提示，要求我们选择一些配置。让我们选择以下内容。

我们的浏览器会自动打开以设置API键的名称，如下所示。随意选择您的首选名称。

在我们的终端上，我们可以接受其他提示来添加.gitignore和.env,，如下所示。

在我们项目的根部，我们将在目录/src/xata.js.

中看到一个带有XATA_API_KEY和XataClient的env文件

我们在项目中成功配置XATA。

配置云和数据库上传图像

我们将使用Cloudinary的上传媒体资产。创建一个free Cloudinary account以获得云名称， api键和 api secret 。

在我们项目的根目录中更新.env文件。

CLOUDINARY_CLOUD_NAME= '*********************'
CLOUDINARY_API_KEY='****************************'
CLOUDINARY_SECRET= "****************************"

阻止应用程序在终端中运行并运行YARN DEV或NPM运行DEV以重新启动服务器。

实施用户身份验证

在本节中，我们将实现用户身份验证功能，以帮助用户注册并登录我们的应用程序以创建时间表。

注册功能

在pages/api/目录中，使用以下代码段更新register.js文件。

# pages/api/register.js

import { getXataClient } from "../../src/xata";
import { promisify } from "util";
import bcrypt from "bcryptjs"; // bcrypt to hash user password

// Hash password with bcrypt
const hash = promisify(bcrypt.hash);

// initialize XataClient function
const xata = getXataClient();

export default async function register(req, res) {
 // Get user data from request body
 const { firstName, lastName, email, password } = req.body;

 // Fetch user from database using email address as unique identifier if it exists
 const userExist = await xata.db.users.filter({ email }).getFirst();

 // If user exists, return error
 if (userExist) {
     res.status(400);
     throw new Error("User already exists"); // throw error if user with email already exists
 }

 // Create a new user in the database
 const user = await xata.db.users.create({
     firstName,
     lastName,
     email,
     password: await hash(password, 10),
  });

 res.json({ message: "Success" });
   if (!user) {
   res.status(400);
   throw new Error("Invalid user data");
  }
}

在上面的代码段中，我们：

创建了一个名为register的函数，用req和res作为参数
从请求正文中提取firstName, lastName, email, and password
检查用户是否已经使用其电子邮件地址存在
使用BYCRYPT软件包哈希用户的密码
使用Xata客户端getXataClient在我们的数据库中创建新的用户记录，如果用户doedoes notist

接下来，请在/pages目录下导航register.js文件，然后使用以下代码段进行更新。

https://gist.github.com/Olanetsoft/48d1da1ff3c7e1afe2226446f9b5a88a

在上面的代码段中，handleSubmit函数将用户数据发送到我们之前创建的寄存器API，从而使我们可以在数据库中创建新用户。

让我们转到components/目录中的Navber.js文件，然后使用以下代码段进行更新。

import Head from "next/head";
import Image from "next/image";
import Link from "next/link";
import { useRouter } from "next/router";

const Navbar = ({ isAuthenticated }) => {
  const router = useRouter();

  return (
    <div className="relative container mx-auto px-6 flex flex-col space-y-2">
      <div className="flex flex-col space-y-4 pb-10">
        <header className="flex flex-col items-center justify-center space-y-4">
          <h1 className="text-4xl font-bold text-center">
            <Link href="/" className="text-white-600 hover:text-gray-400">
              Build a Timeline Tracker with Cloudinary, Xata and NextJs
            </Link>
          </h1>
          {isAuthenticated ? (
            <button
              className="bg-gray-600 hover:bg-gray-700 text-white font-bold py-2 px-4 rounded focus:outline-none focus:shadow-outline"
              type="button"
              onClick={() => {
                router.push("/upload");
              }}
            >
              Add New Timeline
            </button>
          ) : (
            <button
              className="bg-gray-600 hover:bg-gray-700 text-white font-bold py-2 px-4 rounded focus:outline-none focus:shadow-outline"
              type="button"
              onClick={() => {
                router.push("/register");
              }}
            >
              Register or Login to Create a Timeline
            </button>
          )}
        </header>
      </div>
    </div>
  );
};

export default Navbar;

在上面的代码段中，我们添加了isAuthenticated Props和一张检查仅在未登录用户时显示Register or Login to Create a Timeline。

接下来，我们可以在pages/目录下更新index.js，并使用以下代码代码段来实现isAuthenticated数据并检索我们数据库中创建的所有时间表记录。

https://gist.github.com/Olanetsoft/0e1f2cae8ca73a031ae94dc99e4062a2

前往我们的浏览器，我们应该有类似于下面所示的东西。在下一节中，我们将实现登录功能。