盖茨比乔布斯_通过盖茨比使用Airtable

最新推荐文章于 2024-11-01 14:48:20 发布

cukw6666

最新推荐文章于 2024-11-01 14:48:20 发布

阅读量367

点赞数

文章标签： java python js 大数据 javascript ViewUI

原文链接：https://www.digitalocean.com/community/tutorials/gatsbyjs-using-airtable-with-gatsby

版权

盖茨比乔布斯

I first discovered Airtable in late 2018, and was immediately blown away. For those not already familiar with it yet, Airtable is a cloud-based collaborative database-spreadsheet hybrid application. It offers a flexible and intuitive GUI, reasonable prices (along with a generous free tier), and a full REST API with excellent auto-generated documentation. It also works great as a data source for Gatsby.js, and I’m excited to show you how!

我于2018年末首次发现Airtable ，并立即被炸毁。对于尚未熟悉它的用户，Airtable是一个基于云的协作数据库-电子表格混合应用程序。它提供了灵活直观的GUI，合理的价格(以及免费的免费套餐)以及具有出色自动生成文档的完整REST API。它也作为数据源的伟大工程Gatsby.js ，我很高兴地告诉你如何！

In this lesson we are going to create a very basic food truck menu using Airtable, and then display it (almost) effortlessly in a Gatsby website. This article assumes you already have a basic Gatsby.js project set up and you’re ready to edit. If you need help getting to that point, try going through the Your First Steps with Gatsby v2 post and then return here afterwards.

在本课程中，我们将使用Airtable创建一个非常基本的食品卡车菜单，然后(几乎)毫不费力地在Gatsby网站上显示它。本文假设您已经建立了一个基本的Gatsby.js项目，并且已经准备好进行编辑。如果您需要帮助，请尝试阅读“ 使用Gatsby v2的第一步”，然后再返回此处。

飞机场设置 (Airtable Setup)

Since this is more of a Gatsby-focused article, we will only cover the general steps involved on the Airtable side of things. You will quickly see that Airtable’s UI is very intuitive, and the auto-generated documentation is top-notch when needed. I encourage you to take a slow afternoon to explore the features and functionality available with it, though… As you’ll discover just how powerful and flexible it can be. (I use it in several personal and client projects, and not just with Gatsby!)

由于这是一篇有关盖茨比的文章，因此我们仅介绍Airtable方面涉及的一般步骤。您将很快看到Airtable的UI 非常直观，并且在需要时自动生成的文档是一流的。我鼓励您花一个缓慢的下午来探索它的可用功能，因为……您会发现它的功能和灵活性。 (我在多个个人和客户项目中使用了它，而不仅仅是盖茨比！)

1.创建一个Airtable账户 (1. Create an Airtable account)

The first thing we need to do is create an Airtable account, unless you already have one. Just head over to the Airtable website and click the ‘Sign Up’ link in the main nav.

我们需要做的第一件事是创建一个Airtable帐户，除非您已经拥有一个。只需转到Airtable网站，然后单击主导航栏中的“注册”链接即可。

Once you’re signed up (and/or signed in), you will be at the main dashboard. You’re initially provided with a single workspace, which holds a collection of demonstration bases (a.k.a. databases.) Each base can contain any number of tables, which function like database tables.

Workspaces and bases are free to create, so feel free to create a new empty workspace here if you like. (This is recommended, but not required.)

工作区和基础可以自由创建，因此，如果愿意，可以在此处随意创建一个新的空工作区。 (这是推荐的，但不是必需的。)

2.建立一个新的基地 (2. Create a new base)

For our food truck menu, we need to create a new base. Let’s create one by clicking the gray 'Add a base’ button inside the workspace of your choice.

对于我们的食品卡车菜单，我们需要创建一个新的基地。通过在您选择的工作空间内单击灰色的“添加基础”按钮来创建一个。

Select the “start from scratch” option when asked, and then in the pop-up we will give our new base a title. (You can also assign a color and glyph for the icon, if you want.) Let’s name ours ChompsFoodTruck.

询问时选择“从头开始”选项，然后在弹出窗口中给新的基础命名。 (如果需要，您还可以为图标分配颜色和字形。)让我们将其命名为ChompsFoodTruck 。

💡 Pro Tip: When working with client projects in Airtable, always create a new workspace for each client. Ownership of bases cannot be transferred, but ownership of workspaces can!

Tip专业提示：在Airtable中处理客户端项目时，请始终为每个客户端创建一个新的工作区。基地的所有权无法转让，但工作空间的所有权可以转让！

3.重命名默认表 (3. Rename the default table)

With our new base initialized, click on its icon to start configuring it.

在我们的新底座已初始化的情况下，单击其图标以开始对其进行配置。

You’ll notice that the tab at the top is labeled Table 1, so we should rename it to something more appropriate. Let’s rename it to Sandwiches for our purposes.

您会注意到顶部的选项卡标记为Table 1 ，因此我们应该将其重命名为更合适的名称。让我们将其重命名为Sandwiches 。

Since we reference this table name over in Gatsby, I recommend using camelCase or PascalCase naming if your table name needs multiple words, e.g. SoupsAndSalads

由于我们在Gatsby中引用了该表名，因此，如果您的表名需要多个单词(例如SoupsAndSalads ，我建议使用camelCase或PascalCase命名

4.编辑表格 (4. Edit the table)

Let’s edit the Sandwiches table structure to fit our needs:

让我们编辑“ Sandwiches表结构以适合我们的需求：

Step 1: Delete the default Notes and Attachments columns.
步骤1：删除默认的Notes and Attachments列。
Step 2: Create two new columns, Description (type: Single Line Text) and Price (type: Currency)
步骤2：创建两个新列， Description (类型：Single Line Text)和Price (类型：Currency)
Step 3: Add a few rows of sample data! Use your favorite sandwiches, and make up a price and description for each.
步骤3：添加几行示例数据！使用您最喜欢的三明治，并为每个三明治定价和描述。

With those steps out of the way, we have a simple Sandwiches table set up in our ChompsFoodTruck base. We could easily duplicate this to make other menu sections, like sides and/or drinks, but we’ll keep it simple for this lesson.

完成这些步骤后，我们在ChompsFoodTruck基地中建立了一个简单的Sandwiches表。我们可以很容易地复制它来制作其他菜单部分，例如侧面和/或饮料，但在本课中我们将使其保持简单。

5. Airtable API凭证 (5. Airtable API Credentials)

We only have one step left in Airtable: obtaining our API credentials. Making calls to the Airtable API requires both a base ID and an API Key.

在Airtable中，我们只剩下一步：获取我们的API凭据。调用Airtable API既需要base ID又需要API Key 。

To get the base ID, click the Help link next to your profile link (top right), and then click API documentation in the dropdown. This will auto-generate fresh documentation for our ChompsFoodTruck base in a new browser tab. Then click the Sandwiches menu link, and in the example (JavaScript) code on the right you’ll see the base ID listed:

要获取基本ID，请单击您的个人资料链接(右上方)旁边的“ Help链接，然后单击下拉列表中的API documentation 。这将在新的浏览器选项卡中自动为我们的ChompsFoodTruck基础生成新文档。然后，单击“ Sandwiches菜单链接，在右侧的示例(JavaScript)代码中，您将看到列出的基本ID：

var base = new Airtable({apiKey: 'YOUR_API_KEY'})
                .base('appABCD12345'); // 👈 nice!

To get your API key, just head over to your account overview page. There you’ll see a button to (re)generate a new key.

要获取您的API密钥，只需转到您的帐户概述页面即可。在那里，您会看到一个用于(重新)生成新密钥的按钮。

Our Airtable setup is complete! (And that auto-generated documentation was neat, right?!) Let’s head back over to our Gatsby project, where we will bring in this data with almost zero effort.

我们的Airtable设置已完成！ (而且自动生成的文档很整洁，对吗？！)让我们回到Gatsby项目中，我们将以几乎零的努力来引入这些数据。

将数据带入盖茨比 (Bringing the Data into Gatsby)

We could write some code using the code examples provided by the Airtable documentation, and it’s not difficult to work with. However, since we are using Gatsby it’s always a good idea to look in the plugins section on their official site for something that will help.

我们可以使用Airtable文档提供的代码示例来编写一些代码，并且使用起来并不难。但是，由于我们正在使用Gatsby，因此在其官方网站上的“插件”部分中查找有帮助的东西始终是一个好主意。

Luckily for us, there is an excellent gatsby-source-airtable plugin that we can use! This plugin can fetch rows of data from multiple bases and tables in Airtable, and it automatically converts them all into GraphQL nodes.

对我们来说幸运的是，我们可以使用一个出色的gatsby-source-airtable插件！该插件可以从Airtable中的多个基础和表中获取数据行，并将其全部自动转换为GraphQL节点。

1.安装 (1. Installation)

The first thing we need to do is install the gatsby-source-airtable plugin. Let’s stop our development server if it’s running, and then at the command prompt:

我们需要做的第一件事是安装gatsby-source-airtable插件。让我们停止开发服务器(如果正在运行)，然后在命令提示符下：

$ yarn add gatsby-source-airtable

2.插件配置 (2. Plugin Configuration)

As with all Gatsby plugins, we also need to include it in gatsby-config.js and set some configuration options. Let’s do that now by inserting it into the plugins array, as shown here:

与所有Gatsby插件一样，我们还需要将其包含在gatsby-config.js并设置一些配置选项。现在，通过将其插入plugins数组中来进行操作，如下所示：

gatsby-config.js

// ... siteMetadata above here
plugins: [
  {
    resolve: `gatsby-source-airtable`,
    options: {
      apiKey: `YOUR_AIRTABLE_API_KEY`,
      tables: [
        {
          baseId: `AIRTABLE_BASE_ID`,
          tableName: `Sandwiches`
        },
        // We can add other bases/tables here, too!
        //{
          //baseId: `AIRTABLE_BASE_ID`,
          //tableName: `Sides`
        //}
      ]
    }
  },
  // ... other plugins here
]

This is the minimum configuration, and it is all that we need to retrieve our sandwich data. Let’s make sure it works by restarting our dev server and then opening GraphiQL in a browser tab. (Typically this URL is: http://localhost:8000/___graphql)

这是最低配置，这是我们检索三明治数据所需的全部。让我们重新启动开发服务器，然后在浏览器选项卡中打开GraphiQL，以确保它可以正常工作。 (通常，此URL为： http://localhost:8000/___graphql )

You should see two new entries at the top of the Explorer menu on the left: airtable and allAirtable. If you query the data in allAirtable.nodes, you should see all of your sandwich data listed. Awesome! 🥪🥪🥪

您应该在左侧“ Explorer菜单的顶部看到两个新条目： airtable和allAirtable 。如果查询allAirtable.nodes的数据， allAirtable.nodes应该看到列出的所有三明治数据。太棒了！ 🥪🥪🥪

3.显示我们的数据 (3. Displaying our data)

At this point we now have our Airtable base set up, and we’ve already got the data in GraphQL nodes available to Gatsby. All that’s left is do is query and display it on our site! We could certainly do that by using a page-level query, but for maximum portability let’s instead create a new Menu component and use a static query within it.

至此，我们已经建立了Airtable基础，并且我们已经获得了GraphQL节点中可供Gatsby使用的数据。剩下要做的就是查询并将其显示在我们的网站上！我们当然可以通过使用页面级查询来做到这一点，但是为了获得最大的可移植性，让我们创建一个新的Menu组件并在其中使用静态查询。

Let’s create a new file at /src/components/Menu.js, and add the following code:

让我们在/src/components/Menu.js创建一个新文件，并添加以下代码：

/src/components/Menu.js

import React from 'react';
import { useStaticQuery, graphql } from 'gatsby';

const Menu = () => {
  const data = useStaticQuery(graphql`
    query MenuQuery {
      sandwiches: allAirtable(
        filter: { table: { eq: "Sandwiches" } }
        sort: { fields: data___Price, order: DESC }
      ) {
        nodes {
          data {
            Name
            Price
            Description
          }
          recordId
        }
      }
    }
  `);

  return (
    <div>
      <h3>Sandwiches</h3>

      <ul>
        {data.sandwiches.nodes.map((item, i) => (
          <li key={item.recordId}>
            <p>
              {item.data.Name}, ${item.data.Price}
            </p>
            <p>{item.data.Description}</p>
          </li>
        ))}
      </ul>
    </div>
  );
};

export default Menu;

As you can see, we are just mapping over our sandwich data and returning <li> elements. Note that we are making use of a newer feature of Gatsby, useStaticQuery, which uses a built-in React Hook to allow GraphQL queries inside any component at build time.

如您所见，我们只是映射我们的三明治数据并返回<li>元素。请注意，我们正在利用Gatsby的较新功能useStaticQuery ，该功能使用内置的React Hook允许在构建时在任何组件内部进行GraphQL查询。

Important: This feature requires Gatsby version 2.1.0 or higher, and React 16.8.0 or higher.

重要提示：此功能需要Gatsby 2.1.0或更高版本以及React 16.8.0或更高版本。

Also notice that we’re making use of a filter option in the query to ensure we are only retrieving data from the Sandwiches table. (In this manner, we could create additional queries if we had other menu sections!)

还要注意，我们在查询中使用了filter选项，以确保仅从Sandwiches表中检索数据。 (以这种方式，如果我们还有其他菜单部分，我们可以创建其他查询！)

That’s it! We can now use our new Menu component anywhere in our project, just like any other component. (I would recommend styling it, though!)

而已！现在，我们可以在项目的任何地方使用新的Menu组件，就像其他任何组件一样。 (不过，我建议您设置样式！)

其他插件配置选项 (Other plugin config options)

We’ve already used the two required options within each tables object, baseId and tableName, and those don’t really need much explanation. But there are a few other useful options available inside each tables object:

我们已经在每个tables对象中使用了两个必需的选项baseId和tableName ，而这些选项实际上并不需要太多解释。但是，每个tables对象中还有一些其他有用的选项：

tableView: (String) This option allows you to use a custom view that you’ve set up inside Airtable. (e.g. for highly customized row ordering and/or filtering you’ve done on the Airtable side.)
tableView ：(字符串)此选项允许您使用在Airtable中设置的自定义视图。 (例如，对于高度定制的行排序和/或过滤，您已经在Airtable端完成了此操作。)
queryName: (String) Sometimes you may be using two bases that have tables with the same names. With this option, you can set an alternate name for a table to make GraphQL queries easier to work with.
queryName ：(字符串)有时您可能会使用两个具有相同名称的表的库。使用此选项，您可以为表设置一个备用名称，以使GraphQL查询更易于使用。
mapping: (Object) This option lets you map columns to specific data types for Gatsby to transform. It’s invaluable for using with markdown data or with image attachments!
mapping ：(对象)此选项使您可以将列映射到特定数据类型以供Gatsby转换。与Markdown数据或图像附件一起使用时，这是无价的！
tableLinks: (Array of strings) Airtable offers a special column type that links to entries of other tables. With this option, we define these column names to make sure Gatsby retrieves the full data. (Otherwise, it will only fetch each linked item’s ID.)
tableLinks ：(字符串数组)Airtable提供了一种特殊的列类型，该类型链接到其他表的条目。使用此选项，我们定义这些列名称以确保Gatsby检索完整数据。 (否则，它将仅获取每个链接项目的ID。)

The plugin documentation goes into greater detail about these options, and some fantastic usage examples are available in the plugin’s Github repo, including both image processing and markdown processing examples.

插件文档更详细地介绍了这些选项，插件的Github存储库中提供了一些出色的用法示例，包括图像处理和降价处理示例。

结论 (Conclusion)

This menu example was somewhat basic, but hopefully you’ve seen that Airtable and Gatsby.js make an incredible duo – especially with help from the gatsby-source-airtable plugin. Don’t stop here, though! I definitely encourage you to further explore and tinker around with Airtable’s features on your own. Possible ideas:

这个菜单示例有些基本，但是希望您已经看到Airtable和Gatsby.js成为了令人难以置信的二人组合-尤其是在gatsby-source-airtable插件的帮助下。但是不要在这里停下来！我绝对鼓励您自己进一步探索和修改Airtable的功能。可能的想法：

Try adding new tables with other menu sections, e.g. Nachos and Drinks.
尝试添加带有其他菜单部分的新表格，例如Nachos和Drinks 。
Try creating an Info table to store the food truck’s email, phone number, logo, etc.
尝试创建一个Info表来存储餐车的电子邮件，电话号码，徽标等。
Try adding images for your menu items, and then use Gatsby’s fantastic Image component to display them.
尝试为菜单项添加图像，然后使用Gatsby的奇妙Image组件显示它们。