Relacionat
API No Oficial de NotionTutorial 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.
Anem al gra
Blueprint escenari
- Crear-se un usuari de Make.com
- Crear un nou escenari
- Importar-hi la següent blueprint
- Hauria de quedar així
Connexió Custom JS
- Crear-se un usuari de Custom JS
- Crear una funció nova, anomenar-la com es vulgui
- Afegir una input variable que es digui
input_text
- Posar-hi el següent codi i guardar la funció (Save)
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);
- Copiar la API Key per poder realitzar la connexió amb Make
Integració de Notion
- Crear la integració. Guia oficial.
- Anar a Settings, Connections, Develop or manage integrations
- Crear una integració nova
- 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.
- Donar-li a guardar i procedir a seleccionar la configuració.
- 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)
- Seleccionar les següents opcions de configuració
- Guardar (Save) i ja es pot tancar la pestanya.
o simplement entrar al següent link.
Important marcar la opció “Read user information including email addresses”, o no funcionarà.
- Afegir la integració a la pàgina que volem modificar externament (per exemple nosaltres vam afegir-la a la pàgina ).
Nota: totes les subpàgines que tingui la pàgina també seran accessibles (és a dir modificables) mitjançant la integració.
- 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
- Notion
- Custom JS
- Webhooks
Crear una pàgina de github pages amb el botó i la recursivitat
Context:
- 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]