Crear una integració de Notion, utilitzar Make, la API Oficial, fitxers JSON i molt més!

Crear una integració de Notion, utilitzar Make, la API Oficial, fitxers JSON i molt més!

Relacionat

㊙️
API No Oficial de Notion

Tutorial Inicial: Renderitzar el text copiat de ChatGPT

El que volem aconseguir

Una integració que ens permeti copiar el text de ChatGPT a Notion en format blocs (LaTeX inclòs)
Aquí podeu veure com funciona:
Copiar text de ChatGPT a Notion
Copiar text de ChatGPT a Notion
.

Anem al gra

Blueprint escenari
  1. Crear-se un usuari de Make.com
  1. Crear un nou escenari
  1. Importar-hi la següent blueprint
  1. Hauria de quedar així
    1. notion image
Connexió Custom JS
  1. Crear-se un usuari de Custom JS
  1. Crear una funció nova, anomenar-la com es vulgui
  1. Afegir una input variable que es digui input_text
    1. notion image
  1. Posar-hi el següent codi i guardar la funció (Save)
    1. Codi
      // Function to transform the input string into a JSON object function transformToJSON(inputString) { try { // Step 1: Properly escape LaTeX backslashes for JSON compatibility const escapedString = inputString .replace(/\\\\/g, '\\\\\\\\') // Handle existing escaped backslashes .replace(/\\\(/g, '\\\\(') // Handle LaTeX parentheses .replace(/\\\)/g, '\\\\)') // Handle LaTeX parentheses .replace(/\\/g, '\\\\'); // Escape single backslashes for JSON compatibility // Step 2: Add double quotes around unquoted keys const jsonCompatibleString = escapedString .replace(/(\w+):/g, '"$1":') .replace(/([{\[\],])\s*(\w+):/g, '$1"$2":') .replace(/(['"])?([a-zA-Z0-9_]+)(['"])?\s*:/g, '"$2":'); // Ensure proper key quoting // Step 3: Remove trailing commas const noTrailingCommasString = jsonCompatibleString .replace(/,(\s*[}\]])/g, '$1'); // Remove trailing commas before closing brackets // Step 4: Wrap in array brackets and parse const jsonArrayString = `[${noTrailingCommasString.trim()}]`; // Step 5: Parse and return JSON object const jsonArray = JSON.parse(jsonArrayString); return jsonArray; } catch (error) { console.error("Error parsing JSON:", error); return null; } } // Function to process the JSON object and separate equations function blockToSeparatedEquations(input = [{ text: { content: "" }, annotations: {} }]) { return input.reduce((prev, curr) => prev.concat(separateEquations(curr)), []); } // Function to separate equations from the text content function separateEquations(input = { text: { content: "" }, annotations: {} }) { let str = ''; let result = []; for (let i = 0; i < input.text.content.length; i++) { let item = input.text.content[i]; if ((i + 1) < input.text.content.length) { const nextItem = input.text.content[i + 1]; if (item === '\\' && nextItem === '(') { result.push(buildText(str, input.annotations)); let lastIndex = input.text.content.indexOf("\\)", i) + 2; let eq = input.text.content.substring(i + 2, lastIndex - 2); result.push(buildEquation(eq)); i = lastIndex - 1; // Update the index to the end of the current equation str = ''; } else { str += item; } } else { str += item; } } if (str !== '') { result.push(buildText(str, input.annotations)); } return result; } // Function to build an equation object function buildEquation(eq) { // Preserve LaTeX formatting, but remove any trailing backslash const fixedEquation = eq.replace(/\\$/, ''); // Remove trailing backslash if exists return { type: 'equation', equation: { expression: fixedEquation, // Use the fixed equation string }, }; } // Function to build a text object function buildText(txt, annotations) { // Remove trailing backslashes from plain text, but preserve those in the middle if needed const fixedText = txt.replace(/\\$/, ''); // Only remove a backslash if it's the last character return { type: 'text', text: { content: fixedText, }, annotations, }; } // Example usage var inputString1 = input.input_text; var textIntermig = transformToJSON(inputString1); // Convert input string to JSON object return blockToSeparatedEquations(textIntermig);
  1. Copiar la API Key per poder realitzar la connexió amb Make
    1. notion image
Integració de Notion
  1. Crear la integració. Guia oficial.
    1. Anar a Settings, Connections, Develop or manage integrations
      1. notion image
        o simplement entrar al següent link.
    2. Crear una integració nova
      1. notion image
    3. Triar un nom, el workspace associat i escollir la opció ”Internal” com a tipus d’integració. Opcionalment posar-hi una icona per reconèixer-la millor.
      1. notion image
    4. Donar-li a guardar i procedir a seleccionar la configuració.
      1. Copiar el “Integration Secret” i guardar-lo a algun lloc (sinó més endavant sempre es pot tornar a accedir a la integració i copiar-lo de nou)
        1. notion image
      2. Seleccionar les següents opcions de configuració
        1. notion image
          Important marcar la opció “Read user information including email addresses”, o no funcionarà.
    5. Guardar (Save) i ja es pot tancar la pestanya.
  1. Afegir la integració a la pàgina que volem modificar externament (per exemple nosaltres vam afegir-la a la pàgina ).
    1. notion image
      Nota: totes les subpàgines que tingui la pàgina també seran accessibles (és a dir modificables) mitjançant la integració.
  1. Ja estaria, ara només cal tenir copiat el “Secret” de la integració per fer la connexió des de Make.
Realitzar les connexions de l’escenari
  1. Notion
  1. Custom JS
  1. Webhooks
Crear una pàgina de github pages amb el botó i la recursivitat
Context:
  1. Crear una pàgina HTML

Anem per parts

📌
El següent són processos independents que cal entendre

Generar el ‘token’ secret d’una integració privada

Saber executar la API Call “Retrieve Children Blocks” correctament

Entendre què és un JSON vàlid

Aprendre a concatenar text

Aprendre a substituir text

Aprendre a buscar i extreure text

Saber utilitzar els filtres de Make

Saber executar la API Call “Append Children Blocks” correctament

Saber executar les API Call “Update Block” i “Delete Block”

Aconseguir que un Webhooks inicialitzi un escenari

Crear una pàgina web amb un botó

HTML pàgina incrustada

La manera de fer que el botó activi el WebHooks sense obrir la URL en una pestanya nova és utilitzant la funció fetch(), que fa un HTTP request sense anar-hi.
<html> <body> <script> function fireWebHook() { fetch('https://hook.eu2.make.com/udta9y8m4nqfm31lrk47xid8krbvobie'); } </script> <style> .container { height: 40px; position: relative; } .center { margin: 0; position: absolute; top: 50%; left: 50%; -ms-transform: translate(-50%, -50%); transform: translate(-50%, -50%); } </style> <div class="container"> <div class="center"> <button class="boto-generar" onclick="fireWebHook()">Enriquir Contingut</button> </div> </div> </body> </html>
Tot el codi es troba en el <body> ja que és una pàgina HTML molt senzilla. La part de javascript (fer l’HTTP request) es troba dins l’etiqueta <script>, i la part del CSS (disseny del botó) es troba dins de l’etiqueta <style>.
Com a HTML solament tenim un contenidor, i dins d’aquest un botó que al clicar-se executa la funció de javascript que fa el HTTP request.

Publicar-la a github pages

Saber utilitzar la Webhooks Response i utilitzar funcions recursives

Saber utilitzar un mòdul de Custom JS amb el codi que vulguem

🤩
Perfecte! Ara que sabem fer tot això, anem a posar-ho tot junt.

Tutorial part 1

[Vídeo.mp4]

Tutorial part 2

[Vídeo.mp4]