I lettori come te aiutano a sostenere MUO. Quando effettui un acquisto utilizzando i link sul nostro sito, potremmo guadagnare una commissione di affiliazione. Per saperne di più.

Le funzionalità di produttività di Notion sono diventate sempre più popolari sia per gli individui che per le organizzazioni. Queste funzionalità consentono di gestire un'ampia gamma di attività, dall'archiviazione dei dati personali alla gestione dei flussi di lavoro del progetto. Il sistema di database di Notion lo rende possibile. Fornisce un'interfaccia intuitiva per aiutarti a creare un sistema di gestione dei contenuti personalizzabile.

Notion fornisce un'API ricca di funzionalità che puoi facilmente integrare in qualsiasi applicazione per interagire con il suo sistema di database. Inoltre, è possibile personalizzare la funzionalità fornita per adattarla alle esigenze specifiche dell'applicazione.

Impostare un'integrazione di nozioni

Notion fornisce diverse integrazioni che consentono di aggiungere contenuti o dati da altri strumenti come Google Docs direttamente in un database Notion. Tuttavia, per le applicazioni personalizzate, dovrai creare integrazioni personalizzate utilizzando la sua API pubblica.

instagram viewer

Per creare un'integrazione Notion, segui questi passaggi.

  1. Vai a Integrazione di nozioni pagina web, registrati e accedi al tuo account. Nella pagina della panoramica delle integrazioni, fare clic su Nuova integrazione per allestirne uno nuovo.
  2. Fornisci un nome per la tua integrazione, verifica di aver selezionato le impostazioni delle funzionalità di integrazione corrette e fai clic Invia. Queste impostazioni definiscono il modo in cui la tua applicazione interagisce con Notion.
  3. Copia il token di integrazione interno segreto fornito e fai clic Salvare le modifiche.

Crea un database di nozioni

Con la configurazione dell'integrazione, accedi al tuo Nozione workspace per creare un database per la tua applicazione. Quindi, segui questi passaggi:

  1. Clicca il Nuova pagina pulsante nel riquadro del menu a sinistra dell'area di lavoro di Notion.
  2. Nella finestra pop-up, fornisci il nome del tuo database e la tabella impostata da Notion. Infine, aggiungi i campi che desideri alla tua tabella premendo il + pulsante nella sezione dell'intestazione della tabella.
  3. Quindi, fare clic su Apri come pagina intera pulsante per espandere la pagina del database per riempire la pagina e visualizzare l'ID del database sull'URL.
  4. Avrai bisogno dell'ID del database per interagire con il database dalla tua applicazione React. L'ID del database è la stringa di caratteri nell'URL del database compresa tra l'ultima barra (/) e il punto interrogativo (?).
  5. Infine, collega il database alla tua integrazione. Questo processo garantisce l'accesso di integrazione al database in modo da poter archiviare e recuperare i dati nel database dall'applicazione React.
  6. Nella pagina del database, fare clic su tre punti nell'angolo in alto a destra per aprire il menu delle impostazioni del database. Nella parte inferiore del riquadro laterale del menu, fare clic su Aggiungi connessioni e cerca e seleziona la tua integrazione.

Crea un Server Express

Notion fornisce una libreria client che semplifica l'interazione con l'API da un server Express back-end. Per usarlo, crea una cartella di progetto localmente, cambia la directory corrente in quella cartella e creare un server web express.js.

Puoi trovare il codice di questo progetto nel suo fileDeposito GitHub.

Successivamente, installa questi pacchetti.

npm install @notionhq/client cors body-parser dotenv

Il pacchetto CORS consente al backend Express e al client React di scambiare dati tramite gli endpoint API. È possibile utilizzare il pacchetto body-parser per elaborare le richieste HTTP in entrata. Analizzerai il payload JSON dal client, recupererai dati specifici e li renderai disponibili come oggetto nella proprietà req.body. Infine, il pacchetto dotenv rende possibile caricare variabili d'ambiente da a .env file nella tua applicazione.

Nella directory principale della cartella del server, crea un file .env e aggiungi il codice seguente:

NOTION_INTEGRATION_TOKEN = 'il tuo token segreto di integrazione'
NOTION_DATABASE_ID = 'ID banca dati'

Configurare il server Express

Apri il index.js file nella cartella del progetto del server e aggiungi questo codice:

cost espresso = richiedere('esprimere');
cost {Cliente} = richiedere('@notionhq/cliente');
cost cor = richiedere('cor');
cost bodyParser = richiedere('analizzatore del corpo');
cost jsonParser = bodyParser.json();
cost porta = processo.env. PORTO || 8000;
richiedere('dotenv'.config();
cost app = espresso();
app.use(cors());


cost authToken = process.env. NOTION_INTEGRATION_TOKEN;
cost notionDbID = process.env. NOTION_DATABASE_ID;
cost nozione = nuovo Cliente ({aut: authToken});


app.post('/NotionAPIPost', jsonParser, asincrono(req, res) => {
cost {Fullname, CompanyRole, Location} = req.body;


Tentativo { 
cost risposta = aspetta notion.pages.create({
 genitore: {
 database_id: nozioneDbID,
 },
 proprietà: {
 Nome e cognome: {
 titolo: [
 {
 testo: {
 contenuto: nome completo
 },
 },
 ],
 },
 Ruolo azienda: {
 testo_rich: [
 {
 testo: {
 contenuto: CompanyRole
 },
 },
 ],
 },
 Posizione: {
 testo_rich: [
 {
 testo: {
 contenuto: posizione
 },
 },
 ],
 },
 },
 });


 res.send (risposta);
consolare.tronco d'albero("successo");
 } presa (errore) {
consolare.log (errore);
 }
});


app.get('/NotionAPIGet', asincrono(req, res) => {
Tentativo { 
cost risposta = aspetta nozione.database.query({
 database_id: nozioneDbID, 
 ordina: [
 {
 timestamp: 'creato_ora',
 direzione: 'discendente',
 },
 ]
 });


 res.send (risposta);
cost {risultati} = risposta;
consolare.tronco d'albero("successo");
 } presa (errore) {
consolare.log (errore);
 }
});
app.listen (porta, () => {
consolare.tronco d'albero('server in ascolto sulla porta 8000!');
});

Questo codice fa quanto segue:

  • La libreria client di Notion fornisce un modo per interagire con l'API di Notion ed eseguire varie operazioni, come la lettura e la scrittura di dati nel database.
  • Il metodo client crea una nuova istanza dell'oggetto Notion. Questo oggetto viene inizializzato con un parametro auth che accetta un token di autenticazione, il token di integrazione.
  • I due metodi HTTP, get e post, inviano richieste all'API di Notion. Il metodo post accetta un ID database nella sua intestazione che specifica il database in cui scrivere i dati utilizzando il metodo create. Il corpo della richiesta contiene anche le proprietà della nuova pagina: i dati utente da memorizzare.
  • Il metodo get interroga e recupera i dati utente dal database e li ordina in base all'ora in cui sono stati creati.

Infine, avvia il server di sviluppo utilizzando Nodemon, il monitor Node.js:

inizio npm

Imposta un client React

Nella directory principale della cartella del progetto, creare un'applicazione Reacte installa Axios. Utilizzerai questa libreria per effettuare richieste HTTP dal browser.

npm installa axios

Implementa i metodi API POST e GET

Apri il src/App.js file, eliminare il codice standard React e sostituirlo con questo codice:

importare Reagisci, {useState} da'reagire';
importare Axios da'assio';
funzioneApp() {
cost [nome, setName] = useState("");
cost [ruolo, setRole] = useState("");
cost [posizione, setLocazione] = useState("");
cost [APIData, setAPIData] = useState([]);


cost handleSubmit = (e) => {
 e.preventDefault();


 Axios.post(' http://localhost: 8000/NotionAPIPost', {
 Nome completo: nome,
 CompanyRole: ruolo,
 Luogo: luogo
 }).presa(errore => {
consolare.log (errore);
 });


 Axios.get(' http://localhost: 8000/NotionAPIGet')
 .Poi(risposta => {
 setAPIData (response.data.results);
consolare.log (response.data.results);
 }).presa(errore => { 
consolare.log (errore);
 }); 
 };


ritorno (


"App">
"Intestazione app">
"modulo">


Nome</p>


 tipo="testo"
 segnaposto="Nome di battesimo ..."
 onChange={(e) => {setName (e.target.value)}}
 />




Ruolo aziendale</p>


 tipo="testo"
 segnaposto = "Ruolo aziendale..."
 onChange={(e) => {setRole (e.target.value)}}
 />




 Ruolo aziendale</p>


 tipo="testo"
 segnaposto = "Posizione..."
 onChange={(e) => {setLocation (e.target.value)}}
 />






"Dati">
DATI API</p>
 {
 APIData.map((dati) => {
ritorno (




Nome: {data.properties. Nome completo.titolo[0].plain_text}</p>


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


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










esportarepredefinito Applicazione;

Questo componente esegue il rendering di un modulo che consente a un utente di inviare il proprio nome, ruolo e informazioni sulla posizione. Utilizza l'hook useState per memorizzare i valori di input dell'utente nelle variabili di stato e quindi effettua una richiesta POST a un'API lato server, passando le informazioni dell'utente dopo aver premuto il pulsante di invio.

Dopo l'invio riuscito, questo codice invia una richiesta GET alla stessa API lato server per recuperare i dati appena inviati. Infine, esegue la mappatura dei dati recuperati, archiviati nello stato e li rende nel file DATI API sotto il modulo.

Avvia il server di sviluppo di React e vai su http://localhost: 3000 sul tuo browser per visualizzare i risultati.

Utilizzo di Notion come sistema di gestione dei contenuti

Notion è uno strumento di produttività incredibilmente versatile che, oltre all'archiviazione dei dati, può fungere da sistema di gestione dei contenuti (CMS) per le tue applicazioni. Il suo sistema di database flessibile fornisce una serie di strumenti di modifica e funzionalità di gestione che semplificano il processo di gestione dei contenuti per la tua applicazione.