Kuinka käyttää Notionin API: ta Reactin kanssa tietojen tallentamiseksi Notion-tietokantaan

Notionin tuottavuusominaisuuksista on tullut yhä suositumpia sekä yksilöiden että organisaatioiden keskuudessa. Näiden ominaisuuksien avulla voit hallita monenlaisia ​​tehtäviä henkilötietojen tallentamisesta projektin työnkulkujen hallintaan. Notionin tietokantajärjestelmä mahdollistaa tämän. Se tarjoaa intuitiivisen käyttöliittymän, jonka avulla voit luoda mukautettavan sisällönhallintajärjestelmän.

Notion tarjoaa monipuolisen sovellusliittymän, jonka voit helposti integroida mihin tahansa sovellukseen vuorovaikutuksessa sen tietokantajärjestelmän kanssa. Lisäksi voit mukauttaa toimintoja sovelluksesi erityistarpeiden mukaan.

Määritä käsiteintegrointi

Notion tarjoaa useita integraatioita, joiden avulla voit lisätä sisältöä tai tietoja muista työkaluista, kuten Google-dokumenteista, suoraan Notion-tietokantaan. Räätälöityjä sovelluksia varten sinun on kuitenkin luotava mukautettuja integraatioita käyttämällä sen julkista sovellusliittymää.

Luo käsite-integraatio noudattamalla näitä ohjeita.

1. Suuntaa kohti Käsitteen integrointi verkkosivu, kirjaudu sisään ja kirjaudu sisään tilillesi. Napsauta integraatioiden yleiskatsaussivulla Uusi integraatio perustaaksesi uuden.
2. Anna integraatiollesi nimi, tarkista, että olet valinnut oikeat integrointitoimintojen asetukset, ja napsauta Lähetä. Nämä asetukset määrittävät, kuinka sovelluksesi on vuorovaikutuksessa Notionin kanssa.
3. Kopioi toimitettu salainen sisäinen integraatiotunnus ja napsauta Tallenna muutokset.

Luo käsitetietokanta

Kun integrointi on määritetty, kirjaudu sisään omaan Käsite työtilaa tietokannan luomiseksi sovelluksellesi. Noudata sitten näitä ohjeita:

1. Klikkaa Uusi sivu -painiketta Notion-työtilan vasemmassa valikkoruudussa.
2. Anna ponnahdusikkunassa tietokantasi nimi ja Notionin asettama taulukko. Lisää lopuksi tarvitsemasi kentät taulukkoosi painamalla + -painiketta taulukon otsikkoosassa.
3. Napsauta sitten Avaa koko sivuna -painiketta laajentaaksesi tietokantasivun täyttämään sivun ja tarkastellaksesi tietokannan tunnusta URL-osoitteessa.
4. Tarvitset tietokantatunnuksen ollaksesi vuorovaikutuksessa React-sovelluksesi tietokannan kanssa. Tietokannan tunnus on merkkijono tietokannan URL-osoitteessa viimeisen vinoviivan (/) ja kysymysmerkin (?) välillä.
5. Yhdistä lopuksi tietokanta integraatiousi. Tämä prosessi antaa integraatiolle pääsyn tietokantaan, jotta voit tallentaa ja hakea tietoja tietokannastasi React-sovelluksesta.
6. Napsauta tietokantasivullasi kolme pistettä oikeassa yläkulmassa avataksesi tietokannan asetusvalikon. Napsauta valikon sivuruudun alaosassa Lisää yhteyksiä -painiketta ja etsi ja valitse integraatiosi.

Luo Express-palvelin

Notion tarjoaa asiakaskirjaston, jonka avulla on helppo olla vuorovaikutuksessa API: n kanssa Express-taustapalvelimesta. Jos haluat käyttää sitä, luo projektikansio paikallisesti, vaihda nykyinen hakemisto kyseiseen kansioon ja Luo express.js-verkkopalvelin.

Löydät tämän projektin koodin siitäGitHub-arkisto.

Asenna seuraavaksi nämä paketit.

npm install @notionhq/client cors body-parser dotenv

CORS-paketin avulla Express-taustajärjestelmä ja React-asiakas voivat vaihtaa tietoja API-päätepisteiden kautta. Voit käyttää body-parser-pakettia saapuvien HTTP-pyyntöjen käsittelyyn. Jäsennät JSON-hyötykuorman asiakkaalta, noutat tietyt tiedot ja asetat tiedot saataville objektina req.body-ominaisuudessa. Lopuksi dotenv-paketti mahdollistaa ympäristömuuttujien lataamisen a .env tiedosto hakemuksessasi.

Luo palvelinkansion juurihakemistoon .env-tiedosto ja lisää alla oleva koodi:

NOTION_INTEGRATION_TOKEN = "integroinnin salainen tunnus"
NOTION_DATABASE_ID = 'tietokannan tunnus'

Määritä Express-palvelin

Avaa index.js tiedosto palvelimen projektikansioon ja lisää tämä koodi:

konst express = vaatia('ilmaista');
konst {Asiakas} = vaatia('@notionhq/client');
konst cors = vaatia("cors");
konst bodyParser = vaatia('body-parser');
konst jsonParser = bodyParser.json();
konst portti = process.env. SATAMA || 8000;
vaatia('dotenv').config();
konst sovellus = express();
app.use (cors());
konst authToken = process.env. NOTION_INTEGRATION_TOKEN;
konst notionDbID = process.env. NOTION_DATABASE_ID;
konst käsite = Uusi Asiakas ({tod: authToken});
app.post('/NotionAPIPost', jsonParser, asynk(req, res) => {
konst {Kokonimi, Yrityksen Rooli, Sijainti} = vaadittu runko;
yrittää { 
konst vastaus = odottaa notion.pages.create({
 vanhempi: {
 tietokannan_tunnus: käsiteDbID,
 },
 ominaisuudet: {
 Koko nimi: {
 otsikko: [
 {
 teksti: {
 Sisältö: Koko nimi
 },
 },
 ],
 },
 Yrityksen rooli: {
 rich_text: [
 {
 teksti: {
 Sisältö: CompanyRole
 },
 },
 ],
 },
 Sijainti: {
 rich_text: [
 {
 teksti: {
 sisältö: Sijainti
 },
 },
 ],
 },
 },
 });
 res.send (vastaus);
konsoli.Hirsi("menestys");
 } ottaa kiinni (virhe) {
konsoli.log (virhe);
 }
});
app.get('/NotionAPIGet', asynk(req, res) => {
yrittää { 
konst vastaus = odottaa notion.databases.query({
 tietokannan_tunnus: käsiteDbID, 
 lajittelee: [
 {
 aikaleima: 'created_time',
 suunta: "laskeva",
 },
 ]
 });
 res.send (vastaus);
konst {tulokset} = vastaus;
konsoli.Hirsi("menestys");
 } ottaa kiinni (virhe) {
konsoli.log (virhe);
 }
});
app.listen (portti, () => {
konsoli.Hirsi('palvelin kuuntelee portissa 8000!');
});

Tämä koodi tekee seuraavaa:

• Notionin asiakaskirjasto tarjoaa tavan olla vuorovaikutuksessa Notionin API: n kanssa ja suorittaa erilaisia ​​toimintoja, kuten lukea ja kirjoittaa tietoja tietokantaan.
• Asiakasmenetelmä luo uuden ilmentymän Notion-objektille. Tämä objekti alustetaan todennusparametrilla, joka ottaa todennustunnuksen, integrointivaltuuden.
• Kaksi HTTP-menetelmää – get ja post – tekevät pyyntöjä Notionin API: lle. Postitusmenetelmä ottaa otsikkoonsa tietokannan tunnuksen, joka määrittää tietokannan, johon tiedot kirjoitetaan luomismenetelmällä. Pyynnön runko sisältää myös uuden sivun ominaisuudet: tallennettavat käyttäjätiedot.
• Get-menetelmä kysyy ja hakee käyttäjätietoja tietokannasta ja lajittelee ne luomisajankohdan mukaan.

Pyöritä lopuksi kehityspalvelin käyttämällä Nodemon, Node.js-monitori:

npm aloitus

Määritä React-asiakas

Projektikansiosi juurihakemistossa luo React-sovellusja asenna Axios. Käytät tätä kirjastoa HTTP-pyyntöjen tekemiseen selaimesta.

npm asennus axios

Ota käyttöön POST- ja GET API -menetelmät

Avaa src/App.js tiedosto, poista tiivistelmä React-koodi ja korvaa se tällä koodilla:

tuonti Reagoi, { useState} alkaen'reagoi';
tuonti Axios alkaen"aksiot";
toimintoSovellus() {
konst [nimi, setName] = useState("");
konst [role, setRole] = useState("");
konst [sijainti, setLocation] = useState("");
konst [APIData, setAPIData] = useState([]);
konst handleSubmit = (e) => {
 e.preventDefault();
 Axios.post(' http://localhost: 8000/NotionAPIPost, {
 Koko nimi: nimi,
 Yrityksen Rooli: rooli,
 Sijainti: sijainti
 }).ottaa kiinni(virhe => {
konsoli.log (virhe);
 });
 Axios.get(' http://localhost: 8000/NotionAPIGet')
 .sitten(vastaus => {
 setAPIData (response.data.results);
konsoli.log (response.data.results);
 }).ottaa kiinni(virhe => { 
konsoli.log (virhe);
 }); 
 };
palata (

"Sovellus">
"Sovelluksen otsikko">
"lomake">


Etunimi</p>
 tyyppi="teksti"
 paikkamerkki="Etunimi ..."
 onChange={(e) => {setName (e.target.value)}}
 />

Yrityksen rooli</p>
 tyyppi="teksti"
 paikkamerkki = "Yhtiön rooli..."
 onChange={(e) => {setRole (e.target.value)}}
 />

 Yrityksen rooli</p>
 tyyppi="teksti"
 paikkamerkki = "Sijainti..."
 onChange={(e) => {setLocation (e.target.value)}}
 />
"Lähetä">Lähetä</button>
 </form>
 </div>

"Data">
API DATA</p>
 {
 APIData.map((tiedot) => {
palata (



Nimi: {data.properties. kokonimi.title[0].plain_text}</p>

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

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




viedäoletuksena Sovellus;

Tämä komponentti muodostaa lomakkeen, jonka avulla käyttäjä voi lähettää nimensä, roolinsa ja sijaintitietonsa. Se tallentaa käyttäjän syötearvot tilamuuttujiin useState-koukun avulla ja tekee sitten POST-pyynnön palvelinpuolen API: lle ja välittää käyttäjän tiedot, kun he painavat lähetyspainiketta.

Onnistuneen lähetyksen jälkeen tämä koodi tekee GET-pyynnön samalle palvelinpuolen API: lle hakeakseen juuri lähettämänsä tiedot. Lopuksi se kartoittaa haetut tiedot, jotka on tallennettu tilaan, ja tekee sen tilassa API-TIEDOT osio lomakkeen alla.

Pyöritä Reactin kehityspalvelin ja siirry siihen http://localhost: 3000 selaimessasi nähdäksesi tulokset.

Notionin käyttö sisällönhallintajärjestelmänä

Notion on uskomattoman monipuolinen tuottavuustyökalu, joka voi tietojen tallennuksen lisäksi toimia sisällönhallintajärjestelmänä (CMS) sovelluksissasi. Sen joustava tietokantajärjestelmä tarjoaa joukon muokkaustyökaluja ja hallintaominaisuuksia, jotka yksinkertaistavat sovelluksesi sisällön hallintaa.