Hur man använder Notions API med React to Store Data i en Notion Database

Notions produktivitetsfunktioner har blivit allt mer populära för både individer och organisationer. Dessa funktioner låter dig hantera ett brett utbud av uppgifter, från att lagra personliga data till att hantera projektarbetsflöden. Notions databassystem gör detta möjligt. Det ger ett intuitivt gränssnitt som hjälper dig att skapa ett anpassningsbart innehållshanteringssystem.

Notion tillhandahåller ett funktionsrikt API som du enkelt kan integrera i vilken applikation som helst för att interagera med dess databassystem. Dessutom kan du anpassa den tillhandahållna funktionaliteten för att passa din applikations specifika behov.

Konfigurera en begreppsintegration

Notion tillhandahåller flera integrationer som låter dig lägga till innehåll eller data från andra verktyg som Google Docs direkt i en Notion-databas. Men för specialbyggda applikationer måste du skapa anpassade integrationer med dess offentliga API.

Följ dessa steg för att skapa en Notion-integration.

1. Gå över till Integrationen av Notion webbsida, registrera dig och logga in på ditt konto. Klicka på översiktssidan för integrationer Ny integration för att sätta upp en ny.
2. Ange ett namn för din integration, kontrollera att du har valt rätt integrationsfunktionsinställningar och klicka Skicka in. Dessa inställningar definierar hur din applikation interagerar med Notion.
3. Kopiera den hemliga interna integrationstoken som tillhandahålls och klicka Spara ändringar.

Skapa en idédatabas

Med din integrationsuppsättning loggar du in på din Begrepp arbetsyta för att skapa en databas för din applikation. Följ sedan dessa steg:

1. Klicka på Ny sida knappen på den vänstra menyrutan i din Notion-arbetsyta.
2. I popup-fönstret anger du namnet på din databas och tabellen som har skapats av Notion. Lägg slutligen till de fält du behöver i din tabell genom att trycka på + knappen i rubriken i tabellen.
3. Klicka sedan på Öppna som helsida knappen för att expandera databassidan för att fylla sidan och visa databas-ID: t på URL: en.
4. Du behöver databas-ID: t för att interagera med databasen från din React-applikation. Databas-ID: t är teckensträngen i databasens URL mellan det sista snedstrecket (/) och frågetecknet (?).
5. Slutligen, anslut databasen till din integration. Denna process ger integrationen åtkomst till databasen så att du kan lagra och hämta data på din databas från React-applikationen.
6. På din databassida klickar du på tre prickar i det övre högra hörnet för att öppna menyn för databasinställningar. Längst ned i menyns sidopanel klickar du på Lägg till anslutningar knappen och sök efter och välj din integration.

Skapa en Express-server

Notion tillhandahåller ett klientbibliotek som gör det enkelt att interagera med API: t från en backend Express-server. För att använda den, skapa en projektmapp lokalt, ändra den aktuella katalogen till den mappen och skapa en express.js webbserver.

Du kan hitta detta projekts kod i dessGitHub-förråd.

Installera sedan dessa paket.

npm installera @notionhq/client cors body-parser dotenv

CORS-paketet tillåter Express-backend- och React-klienten att utbyta data genom API-ändpunkterna. Du kan använda body-parser-paketet för att behandla inkommande HTTP-förfrågningar. Du kommer att analysera JSON-nyttolasten från klienten, hämta specifik data och göra denna data tillgänglig som ett objekt i egenskapen req.body. Slutligen gör dotenv-paketet det möjligt att ladda miljövariabler från en .env fil i din ansökan.

Skapa en .env-fil i servermappens rotkatalog och lägg till koden nedan:

NOTION_INTEGRATION_TOKEN = "din integrationshemliga token"
NOTION_DATABASE_ID = 'databas-ID'

Konfigurera Express Server

Öppna index.js fil i serverprojektmappen och lägg till denna kod:

konst uttrycka = behöva('uttrycka');
konst {Kund} = behöva('@notionhq/klient');
konst cors = behöva('cors');
konst bodyParser = behöva("kroppstolkare");
konst jsonParser = bodyParser.json();
konst port = process.env. PORT || 8000;
behöva('dotenv').config();
konst app = express();
app.use (cors());
konst authToken = process.env. NOTION_INTEGRATION_TOKEN;
konst notionDbID = process.env. NOTION_DATABASE_ID;
konst föreställning = ny Klient ({auth: authToken});
app.post('/NotionAPIPost', jsonParser, asynkron(req, res) => {
konst {Fullnamn, CompanyRole, Location} = req.body;
Prova { 
konst svar = vänta notion.pages.create({
 förälder: {
 database_id: notionDbID,
 },
 egenskaper: {
 Fullständiga namn: {
 titel: [
 {
 text: {
 innehåll: Fullständigt namn
 },
 },
 ],
 },
 Företagsroll: {
 rik text: [
 {
 text: {
 innehåll: Företagsroll
 },
 },
 ],
 },
 Plats: {
 rik text: [
 {
 text: {
 innehåll: Plats
 },
 },
 ],
 },
 },
 });
 res.send (svar);
trösta.logga("Framgång");
 } fånga (fel) {
trösta.log (fel);
 }
});
app.get('/NotionAPIGet', asynkron(req, res) => {
Prova { 
konst svar = vänta notion.databases.query({
 database_id: notionDbID, 
 sorterar: [
 {
 tidsstämpel: "skapad_tid",
 riktning: 'nedåtgående',
 },
 ]
 });
 res.send (svar);
konst {resultat} = svar;
trösta.logga("Framgång");
 } fånga (fel) {
trösta.log (fel);
 }
});
app.listen (port, () => {
trösta.logga('server lyssnar på port 8000!');
});

Den här koden gör följande:

• Notions klientbibliotek ger ett sätt att interagera med Notions API och utföra olika operationer, som att läsa och skriva data till din databas.
• Klientmetoden skapar en ny instans av objektet Notion. Detta objekt initieras med en auth-parameter som tar en autentiseringstoken, integrationstoken.
• De två HTTP-metoderna – get och post – gör förfrågningar till Notions API. Postmetoden tar in ett databas-ID i sin rubrik som anger databasen att skriva data till med hjälp av skapa-metoden. Brödtexten i begäran innehåller också egenskaperna för den nya sidan: användardata som ska lagras.
• Get-metoden frågar och hämtar användardata från databasen och sorterar dem efter när de skapades.

Slutligen, snurra upp utvecklingsservern med hjälp av Nodemon, monitorn Node.js:

npm start

Konfigurera en React Client

I rotkatalogen för din projektmapp, skapa en React-applikation, och installera Axios. Du kommer att använda det här biblioteket för att göra HTTP-förfrågningar från webbläsaren.

npm installera axios

Implementera POST- och GET-API-metoderna

Öppna src/App.js fil, ta bort pannplattan React-koden och ersätt den med denna kod:

importera Reagera, { useState} från'reagera';
importera Axios från"axios";
fungeraApp() {
konst [namn, setName] = useState("");
konst [roll, setRole] = useState("");
konst [plats, setLocation] = useState("");
konst [APIData, setAPIData] = useState([]);
konst handleSubmit = (e) => {
 e.preventDefault();
 Axios.post(' http://localhost: 8000/NotionAPIPost', {
 Fullständigt namn: namn,
 FöretagRoll: roll,
 Plats: plats
 }).fånga(fel => {
trösta.log (fel);
 });
 Axios.get(' http://localhost: 8000/NotionAPIGet')
 .sedan(svar => {
 setAPIData (response.data.results);
trösta.log (response.data.results);
 }).fånga(fel => { 
trösta.log (fel);
 }); 
 };
lämna tillbaka (

"App">
"App-header">
"form">


Förnamn</p>
 typ="text"
 platshållare="Förnamn ..."
 onChange={(e) => {setName (e.target.value)}}
 />

Företagsroll</p>
 typ="text"
 platshållare = "Företagets roll..."
 onChange={(e) => {setRole (e.target.value)}}
 />

 Företagsroll</p>
 typ="text"
 platshållare = "Plats..."
 onChange={(e) => {setLocation (e.target.value)}}
 />
"Skicka in">Skicka in</button>
 </form>
 </div>

"Data">
API DATA</p>
 {
 APIData.map((data) => {
lämna tillbaka (



Namn: {data.properties. Fullständigt namn.titel[0].plain_text}</p>

Roll: {data.properties. CompanyRole.rich_text[0].plain_text}</p>

Plats: {data.properties. Location.rich_text[0].plain_text}</p> 
 </div>
 )
 })
 }
 </div>
 </header>
 </div>
 );
}




exporterastandard App;

Den här komponenten återger ett formulär som tillåter en användare att skicka in sitt namn, roll och platsinformation. Den använder useState-hook för att lagra användarens indatavärden i tillståndsvariabler och gör sedan en POST-begäran till ett server-API och skickar användarens information när de trycker på knappen Skicka.

Efter framgångsrik inlämning gör den här koden en GET-begäran till samma serversida API för att hämta data som den just skickade. Slutligen mappar den hämtad data, lagrad i tillstånd, och återger den i API DATA avsnitt under formuläret.

Snurra upp Reacts utvecklingsserver och gå över till http://localhost: 3000 i din webbläsare för att se resultat.

Använder Notion som ett innehållshanteringssystem

Notion är ett otroligt mångsidigt produktivitetsverktyg som, förutom datalagring, kan fungera som ett innehållshanteringssystem (CMS) för dina applikationer. Dess flexibla databassystem tillhandahåller en uppsättning redigeringsverktyg och hanteringsfunktioner som förenklar processen för att hantera innehåll för din applikation.