Lectores como tú ayudan a apoyar a MUO. Cuando realiza una compra utilizando enlaces en nuestro sitio, podemos ganar una comisión de afiliado. Leer más.

Las características de productividad de Notion se han vuelto cada vez más populares tanto para individuos como para organizaciones. Estas funciones le permiten administrar una amplia gama de tareas, desde almacenar datos personales hasta administrar flujos de trabajo de proyectos. El sistema de base de datos de Notion lo hace posible. Proporciona una interfaz intuitiva para ayudarlo a crear un sistema de administración de contenido personalizable.

Notion proporciona una API rica en funciones que puede integrar fácilmente en cualquier aplicación para interactuar con su sistema de base de datos. Además, puede personalizar la funcionalidad proporcionada para que se ajuste a las necesidades específicas de su aplicación.

Configurar una integración de noción

Notion proporciona varias integraciones que le permiten agregar contenido o datos de otras herramientas como Google Docs directamente a una base de datos de Notion. Sin embargo, para las aplicaciones personalizadas, deberá crear integraciones personalizadas utilizando su API pública.

instagram viewer

Para crear una integración de Notion, siga estos pasos.

  1. Dirigirse a Integración de nociones página web, regístrese e inicie sesión en su cuenta. En la página de resumen de integraciones, haga clic en Nueva Integración para montar uno nuevo.
  2. Proporcione un nombre para su integración, verifique que tenga seleccionada la configuración correcta de las capacidades de integración y haga clic en Entregar. Estos ajustes definen cómo interactúa su aplicación con Notion.
  3. Copie el token de integración interna secreto proporcionado y haga clic en Guardar cambios.

Crear una base de datos de nociones

Con su integración configurada, inicie sesión en su Noción espacio de trabajo para crear una base de datos para su aplicación. Luego, sigue estos pasos:

  1. Haga clic en el Nueva pagina en el panel de menú izquierdo de su espacio de trabajo de Notion.
  2. En la ventana emergente, proporcione el nombre de su base de datos y la tabla configurada por Notion. Finalmente, agregue los campos que requiere a su tabla presionando el botón + botón en la sección de encabezado de su tabla.
  3. Luego, haga clic en el Abrir como página completa botón para expandir la página de la base de datos para llenar la página y ver el ID de la base de datos en la URL.
  4. Necesitará el ID de la base de datos para interactuar con la base de datos desde su aplicación React. El ID de la base de datos es la cadena de caracteres en la URL de la base de datos entre la última barra diagonal (/) y el signo de interrogación (?).
  5. Finalmente, conecte la base de datos a su integración. Este proceso otorga acceso de integración a la base de datos para que pueda almacenar y recuperar datos en su base de datos desde la aplicación React.
  6. En la página de su base de datos, haga clic en el tres puntos en la esquina superior derecha para abrir el menú de configuración de la base de datos. En la parte inferior del panel lateral del menú, haga clic en el Agregar conexiones y busque y seleccione su integración.

Crear un servidor Express

Notion proporciona una biblioteca de cliente que facilita la interacción con la API desde un servidor Express backend. Para usarlo, cree una carpeta de proyecto localmente, cambie el directorio actual a esa carpeta y crear un servidor web express.js.

Puedes encontrar el código de este proyecto en surepositorio GitHub.

A continuación, instale estos paquetes.

npm install @notionhq/client cors body-parser dotenv

El paquete CORS permite que el backend Express y el cliente React intercambien datos a través de los puntos finales de la API. Puede usar el paquete body-parser para procesar las solicitudes HTTP entrantes. Analizará la carga útil de JSON del cliente, recuperará datos específicos y hará que esos datos estén disponibles como un objeto en la propiedad req.body. Por último, el paquete dotenv permite cargar variables de entorno desde un .env archivo en su solicitud.

En el directorio raíz de la carpeta del servidor, cree un archivo .env y agregue el código a continuación:

NOTION_INTEGRATION_TOKEN = 'su token secreto de integración'
NOTION_DATABASE_ID = 'ID de la base de datos'

Configurar el servidor Express

Abre el índice.js archivo en la carpeta del proyecto del servidor y agregue este código:

constante expresar = requerir('expresar');
constante {Cliente} = requerir('@notionhq/cliente');
constante corazones = requerir('corazón');
constante analizador de cuerpo = requerir('analizador de cuerpo');
constante jsonParser = bodyParser.json();
constante puerto = proceso.env. PUERTO || 8000;
requerir('dotenv').config();
constante aplicación = expreso();
app.use (cors());


constante authToken = proceso.env. NOTION_INTEGRATION_TOKEN;
constante notionDbID = proceso.env. NOTION_DATABASE_ID;
constante noción = nuevo Cliente ({autenticación: token de autorización});


aplicación.post('/NotionAPIPost', jsonParser, asíncrono(requerido, res) => {
constante {Fullname, CompanyRole, Location} = req.body;


intentar { 
constante respuesta = esperar noción.páginas.create({
 padre: {
 base de datos_id: nociónDbID,
 },
 propiedades: {
 Nombre completo: {
 título: [
 {
 texto: {
 contenido: nombre completo
 },
 },
 ],
 },
 Rol de la empresa: {
 Texto rico: [
 {
 texto: {
 contenido: CompanyRole
 },
 },
 ],
 },
 Ubicación: {
 Texto rico: [
 {
 texto: {
 contenido: Ubicación
 },
 },
 ],
 },
 },
 });


 res.send (respuesta);
consola.registro("éxito");
 } atrapar (error) {
consola.log (error);
 }
});


aplicación.obtener('/NotionAPIGet', asíncrono(requerido, res) => {
intentar { 
constante respuesta = esperar noción.bases de datos.consulta({
 base de datos_id: nociónDbID, 
 ordena: [
 {
 marca de tiempo: 'tiempo_creado',
 dirección: 'descendente',
 },
 ]
 });


 res.send (respuesta);
constante {resultados} = respuesta;
consola.registro("éxito");
 } atrapar (error) {
consola.log (error);
 }
});
app.listen (puerto, () => {
consola.registro('¡servidor escuchando en el puerto 8000!');
});

Este código hace lo siguiente:

  • La biblioteca de cliente de Notion proporciona una forma de interactuar con la API de Notion y realizar varias operaciones, como leer y escribir datos en su base de datos.
  • El método de cliente crea una nueva instancia del objeto Notion. Este objeto se inicializa con un parámetro de autenticación que toma un token de autenticación, el token de integración.
  • Los dos métodos HTTP, obtener y publicar, realizan solicitudes a la API de Notion. El método de publicación toma una ID de base de datos en su encabezado que especifica la base de datos para escribir datos usando el método de creación. El cuerpo de la solicitud también contiene las propiedades de la nueva página: los datos del usuario para almacenar.
  • El método get consulta y recupera datos de usuario de la base de datos y los ordena según el momento en que se crearon.

Finalmente, activa el servidor de desarrollo usando Nodemon, el monitor de Node.js:

inicio de npm

Configurar un cliente React

En el directorio raíz de la carpeta de su proyecto, crear una aplicación Reacte instale Axios. Utilizará esta biblioteca para realizar solicitudes HTTP desde el navegador.

npm instalar axios

Implementar los métodos API POST y GET

Abre el src/Aplicación.js archivo, elimine el código React repetitivo y reemplácelo con este código:

importar Reaccionar, { estado de uso} de'reaccionar';
importar Axios de'axíos';
funciónaplicación() {
constante [nombre, establecerNombre] = usarEstado("");
constante [rol, establecerRol] = usarEstado("");
constante [ubicación, establecerUbicación] = usarEstado("");
constante [APIData, setAPIData] = useState([]);


constante manejarEnviar = (mi) => {
 e.preventDefault();


 Axios.post(' http://localhost: 8000/NotionAPIPost', {
 Nombre completo: nombre,
 CompanyRole: rol,
 ubicación: ubicación
 }).atrapar(error => {
consola.log (error);
 });


 Axios.get(' http://localhost: 8000/NotionAPIGet')
 .entonces(respuesta => {
 setAPIData (respuesta.datos.resultados);
consola.log (respuesta.datos.resultados);
 }).atrapar(error => { 
consola.log (error);
 }); 
 };


devolver (


"Aplicación">
"Encabezado de la aplicación">
"forma">


Nombre</p>


 tipo ="texto"
 marcador de posición ="Nombre de pila ..."
 onChange={(e) => {setName (e.target.value)}}
 />




Rol de la empresa</p>


 tipo ="texto"
 marcador de posición = "Función de la empresa..."
 onChange={(e) => {setRole (e.target.value)}}
 />




 Rol de la empresa</p>


 tipo ="texto"
 marcador de posición = "Ubicación..."
 onChange={(e) => {setLocation (e.target.value)}}
 />






"Datos">
DATOS API</p>
 {
 APIData.mapa((datos) => {
devolver (




Nombre: {datos.propiedades. Nombre completo.título[0].plain_text}</p>


Rol: {datos.propiedades. CompanyRole.rich_text[0].plain_text}</p>


Ubicación: {datos.propiedades. Ubicación.rich_text[0].plain_text}</p> 
 </div>
 )
 })
 }
 </div>
 </header>
 </div>
 );
}










exportarpor defecto aplicación;

Este componente genera un formulario que permite a un usuario enviar su nombre, rol e información de ubicación. Utiliza el enlace useState para almacenar los valores de entrada del usuario en variables de estado y luego realiza una solicitud POST a una API del lado del servidor, pasando la información del usuario una vez que presiona el botón Enviar.

Tras el envío exitoso, este código realiza una solicitud GET a la misma API del lado del servidor para recuperar los datos que acaba de enviar. Por último, mapea los datos recuperados, almacenados en estado, y los representa en el DATOS API sección debajo del formulario.

Activa el servidor de desarrollo de React y dirígete a http://localhost: 3000 en su navegador para ver los resultados.

Uso de Notion como sistema de gestión de contenido

Notion es una herramienta de productividad increíblemente versátil que, además del almacenamiento de datos, puede servir como un sistema de gestión de contenido (CMS) para sus aplicaciones. Su sistema de base de datos flexible proporciona un conjunto de herramientas de edición y funciones de administración que simplifican el proceso de administración de contenido para su aplicación.