Airtable demo refresh

This commit is contained in:
SheetJS 2024-05-04 23:43:33 -04:00
parent bb40aa756f
commit 2964215c95
6 changed files with 146 additions and 49 deletions

@ -13,6 +13,9 @@ import Tabs from '@theme/Tabs';
import TabItem from '@theme/TabItem';
import CodeBlock from '@theme/CodeBlock';
export const r = {style: {color:"red"}};
export const R = {style: {backgroundColor:"darkred"}};
GatsbyJS is a framework for creating websites. It uses React components for page
templates and GraphQL for loading data.
@ -176,7 +179,7 @@ This demo was tested in the following environments:
| GatsbyJS | Date |
|:---------|:-----------|
| `5.12.1` | 2023-12-04 |
| `5.13.4` | 2024-05-04 |
| `4.25.8` | 2024-03-27 |
:::
@ -189,6 +192,25 @@ This demo was tested in the following environments:
npx gatsby telemetry --disable
```
:::info pass
In NodeJS 22, the process displayed an error:
<pre>
<span {...R}> ERROR </span><span {...r}> UNKNOWN</span>
{`\n`}
{`\n`}
(node:25039) [DEP0040] DeprecationWarning: The `punycode` module is deprecated.
Please use a userland alternative instead.
(Use `node --trace-deprecation ...` to show where the warning was created)
</pre>
**This is a false report!**
The error can be safely ignored.
:::
1) Create a template site:
```bash
@ -333,11 +355,60 @@ Press the Execute Query button (`▶`) and data should show up in the right pane
![GraphiQL Screenshot](pathname:///gatsby/graphiql.png)
<details>
<summary><b>Sample Output</b> (click to show)</summary>
In GatsbyJS version `5.13.4`, the raw output was:
```json title="GraphQL query result from GatsbyJS 5.13.4"
{
"data": {
"allPresXlsxSheet1": {
"edges": [
{
"node": {
"Name": "Bill Clinton",
"Index": 42
}
},
{
"node": {
"Name": "GeorgeW Bush",
"Index": 43
}
},
{
"node": {
"Name": "Barack Obama",
"Index": 44
}
},
{
"node": {
"Name": "Donald Trump",
"Index": 45
}
},
{
"node": {
"Name": "Joseph Biden",
"Index": 46
}
}
]
}
},
"extensions": {}
}
```
</details>
### React page
8) Create a new file `src/pages/pres.js` that uses the query and displays the result:
```jsx title="src/pages/pres.js"
```jsx title="src/pages/pres.js (create new file)"
import { graphql } from "gatsby"
import * as React from "react"

@ -29,8 +29,12 @@ This demo was tested in the following environments:
| PouchDB | Date |
|:--------|:----------:|
| `7.3.1` | 2023-12-04 |
| `8.0.1` | 2023-12-04 |
| `8.0.1` | 2024-05-04 |
| `7.3.1` | 2024-05-04 |
| `6.4.3` | 2024-05-04 |
| `5.4.5` | 2024-05-04 |
| `4.0.3` | 2024-05-04 |
| `3.6.0` | 2024-05-04 |
:::
@ -131,11 +135,25 @@ The ZIP file should have `MD5` checksum `ac4da7cb0cade1be293ba222462f109c`:
```bash
curl -LO https://github.com/nickcolley/getting-started-todo/archive/master.zip
md5sum master.zip || md5 master.zip
### the checksum will be printed
```
:::note pass
If the download is unavailable, a mirror is available at
https://docs.sheetjs.com/pouchdb/master.zip
https://docs.sheetjs.com/pouchdb/master.zip :
```bash
curl -LO https://docs.sheetjs.com/pouchdb/master.zip
md5sum master.zip || md5 master.zip
```
:::
The second command will display the checksum:
```bash
ac4da7cb0cade1be293ba222462f109c master.zip
```
1) Unzip the `master.zip` file and enter the folder:
@ -146,7 +164,7 @@ cd getting-started-todo-master
2) Edit `index.html` to reference the SheetJS library and add a button:
<CodeBlock language="html" title="index.html">{`\
<CodeBlock language="html" title="index.html (add highlighted lines)">{`\
<body>
<!-- highlight-start -->
<script src="https://cdn.sheetjs.com/xlsx-${current}/package/dist/xlsx.full.min.js"></script>
@ -157,19 +175,19 @@ cd getting-started-todo-master
3) Near the end of `index.html`, look for a script tag referencing a CDN:
```html title="index.html"
```html title="index.html (find line)"
<script src="//cdn.jsdelivr.net/pouchdb/3.2.0/pouchdb.min.js"></script>
```
Upgrade PouchDB by changing the `src` attribute to the production build[^10]:
```html
```html title="index.html (replace line)"
<script src="//cdn.jsdelivr.net/npm/pouchdb@8.0.1/dist/pouchdb.min.js"></script>
```
4) Just before the end of `js/app.js`, add a `click` event listener:
```js title="js/app.js"
```js title="js/app.js (add highlighted lines)"
if (remoteCouch) {
sync();
}
@ -219,7 +237,7 @@ opened in a web browser.
6) Access the URL from step 5 with a web browser.
7) Add two items "Sheet" and "js". Mark "Sheet" as completed. The page should
7) Add two items "js" and "Sheet". Mark "Sheet" as completed. The page should
look like the following screenshot:
![todos screenshot](pathname:///pouchdb/todos.png)
@ -230,7 +248,7 @@ export named "SheetJSPouch.xlsx"
9) Open the file in a spreadsheet editor. It should match the following table:
| title | completed |
|:------|:----------|
|:------|:---------:|
| Sheet | TRUE |
| js | FALSE |

@ -199,15 +199,15 @@ Local files can be read using the SheetJS `readFile` method[^7]:
const wb = XLSX.readFile("SheetJSAirtableTest.xlsb");
(async() => {
await airtable_load_workbook(table, wb);
});
})();
```
## Complete Example
:::note Tested Deployments
This demo was last tested on 2023 September 03. At the time, free accounts
included limited API access.
This demo was last tested on 2024 May 04. At the time, free accounts included
limited API access.
:::
@ -217,8 +217,8 @@ included limited API access.
:::note pass
In the past, Airtable offered API keys. They are slated to deprecate API keys
in January 2024. They recommend "Personal Access Tokens" for operations.
In the past, Airtable offered API keys. They were officially deprecated on 2024
February 1. They recommend "Personal Access Tokens" for operations.
:::
@ -226,7 +226,14 @@ API actions will require a PAT, which must be created through the developer hub:
1) Click on account icon (topright area of the page) and select "Developer Hub".
2) Click "Create Token".
:::caution pass
The email address associated with the account must be verified before attempting
to create a token.
:::
2) Click the blue "Create Token" button.
3) In the form, make the following selections:
@ -234,7 +241,7 @@ API actions will require a PAT, which must be created through the developer hub:
- Scopes: `data.records:read` and `data.records:write` (adding 2 scopes)
- Access: "All current and future bases in all current and future workspaces"
The form will look like the screenshot below:
The form will look like the following screenshot:
![Airtable PAT Form](pathname:///airtable/pat.png)
@ -246,21 +253,39 @@ For the purposes of this demo, a sample workspace should be created:
5) Download https://docs.sheetjs.com/pres.xlsx
6) Create a project in Airtable using "Quickly upload". Select "Microsoft Excel"
6) Click "Back to Home" to return to the home page.
7) Create a project in Airtable using "Quickly upload". Select "Microsoft Excel"
and select the downloaded file from step 1. Click "Upload", then "Import".
7) A workspace will be created. The name will be found in the URL. For example:
8) A workspace will be created. The name will be found in the URL. For example:
```
https://airtable.com/appblahblah/tblblahblah/blahblah
--------------------/^^^^^^^^^^^/ workspace name
```
the first part after the `.com` will be the workspace name.
The first part after the `.com` will be the workspace name. Copy the name.
### New Project
9) Create a new project:
```bash
mkdir -p sheetjs-airtable
cd sheetjs-airtable
npm init -y
```
10) Install dependencies:
<CodeBlock language="bash">{`\
npm i --save https://cdn.sheetjs.com/xlsx-${current}/xlsx-${current}.tgz airtable`}
</CodeBlock>
### Exporting Data
8) Save the following to `SheetJSAirtableRead.js`:
11) Save the following to `SheetJSAirtableRead.js`:
```js title="SheetJSAirtableRead.js"
const Airtable = require("airtable"), XLSX = require("xlsx");
@ -282,15 +307,9 @@ const base = "app...";
})();
```
9) Replace the values in the highlighted lines with the PAT and workspace name.
12) Replace the values in the highlighted lines with the PAT and workspace name.
10) Install dependencies:
<CodeBlock language="bash">{`\
npm i --save https://cdn.sheetjs.com/xlsx-${current}/xlsx-${current}.tgz airtable`}
</CodeBlock>
11) Run the script:
13) Run the script:
```bash
node SheetJSAirtableRead.js
@ -300,19 +319,14 @@ The script should write `SheetJSAirtable.xlsb`. The file can be opened in Excel.
### Importing Data
12) Create a file `SheetJSAirpend.xlsx` with some new records in sheet `Sheet1`:
14) Download [`SheetJSAirpend.xlsx`](pathname:///airtable/SheetJSAirpend.xlsx)
to the project folder:
![Records to append](pathname:///airtable/airpend.png)
`npx xlsx-cli SheetJSAirpend.xlsx` should print the following data:
```csv
Sheet1
Name,Index
Someone Else,47
```bash
curl -LO https://docs.sheetjs.com/airtable/SheetJSAirpend.xlsx
```
13) Save the following to `SheetJSAirtableWrite.js`:
15) Save the following to `SheetJSAirtableWrite.js`:
```js title="SheetJSAirtableWrite.js"
const Airtable = require("airtable"), XLSX = require("xlsx");
@ -332,15 +346,9 @@ const base = "app...";
})();
```
14) Replace the values in the highlighted lines with the PAT and workspace name.
16) Replace the values in the highlighted lines with the PAT and workspace name.
15) Install dependencies:
<CodeBlock language="bash">{`\
npm i --save https://cdn.sheetjs.com/xlsx-${current}/xlsx-${current}.tgz airtable`}
</CodeBlock>
16) Run the script:
17) Run the script:
```bash
node SheetJSAirtableWrite.js

Binary file not shown.

Binary file not shown.

Before

Width:  |  Height:  |  Size: 16 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 45 KiB

After

Width:  |  Height:  |  Size: 44 KiB