Logo Cinquin Andy Signature

Guide: Plugin Obsidian pour exporter une note vers Strapi

Développeur Freelance - Logo

Guide: Plugin Obsidian pour exporter une note vers Strapi

Publié le 4 avril 2024 -  par Andy Cinquin

Plugin ObsidianStrapiExport de notesConfiguration pas à pasObsidianAPI StrapiOpenAIExportation de contenu

Plugin Obsidian pour exporter une note vers Strapi

Dans cet article nous allons voir ensemble, étape par étape comment utiliser mon Plugin Obsidian dans Strapi.
Les éléments requis sont :
  • Un élément que vous voulez publier, écrit dans votre Vault Obsidian
  • Une API en ligne, et disponible.
  • Accès à distance et depuis internet à votre API possible (en local ça ne fonctionnera pas !)
  • Une clé OpenAI.

Tuto

Je vais faire avec vous, lorsque je crée cet article, la configuration de ce plugin. Première étape, on installe le plugin : 🚀 Strapi Exporter: Supercharge Your Obsidian-to-Strapi Workflow, export an obsidian notes directly to your Strapi API
Screenshot of a GitHub repository page showing details about the latest release version labeled as 'Release 1.0.17 (Latest)'
On va dans release
Screenshot of software release page showing version 1.0.17 on version control platform with important assets 'main.js' and 'manifest.json' highlighted.
On télécharge le main.js & le manifest.js, de la dernière version disponible.
On va ensuite à la racine de notre Obsidian (pour moi c'est C:\Users\andyq\Obsidian)
Computer file explorer window displaying a list of folders with .obsidian folder highlighted, along with menu options and other folders
On va dans le .obsidian
Computer screen displaying a file manager window with a '.obsidian' directory open, highlighting a 'plugins' subfolder. User interface in French.
Puis dans plugins
Computer file explorer window displaying folders of plugins for Obsidian software
Et on crée un nouveau dossier "notes-to-strapi-export-article-ai".
Computer screen displaying a file explorer window with highlighted files 'main.js' (188 KB) and 'manifest.json' (1 KB)
Et on met nos deux fichiers précédemment téléchargés ici. Ensuite on ouvre notre Vault Obsidian et on passe par les paramètres
Computer screen showing open applications including a text editor with directory structures and code snippets, highlighted text, and red arrows pointing to a file directory named 'manifest.json'
Screenshot of Obsidian note-taking software with highlight on 'Strapi Exporter, Notes to Strapi article AI enhanced' plugin in the Community plugins section
On active le plugin, puis on passe sur la partie configuration.

Configuration

On va donc maintenant passer aux configurations

Strapi API Token

On va commencer par le token Strapi.
Screenshot of settings page labeled 'Strapi & OpenAI Settings' with input fields for Strapi API Token, OpenAI API Key, and additional content customization prompt. Strapi API Token field highlighted in red.
On va sur l'API Strapi. Dans settings, API Token, et on crée un Token
User interface of the Strapi application showing the API Tokens settings page with a list of API tokens named 'access_admin' created 8 months ago.

Simple

User interface showing a form for creating an API token with fields for name, description, and duration. Full access selected. Permissions section for categories like Article with multiple actions. Save button at top right corner.
En full access, comme ça, pas de soucis de droit

Avancée (optionnel)

Avec les droits strictement nécessaires pour créer un article, il est nécessaire également, d'avoir les droits d'upload d'images.
Screenshot of a web interface for creating an API token with fields for name, description, duration, type, and permissions for Article actions.
Computer interface for creating an API token with various permissions settings. Highlighted section shows 'upload' permission within the 'Upload' category.
On prend le Token Obsidian généré, et on le met dans notre config :
Screenshot of a web interface for creating or editing an access token named 'token obsidian' with fields for token name, description, type, and duration, and permissions settings for various actions.
Software interface displaying settings for Strapi & OpenAI API tokens, content generation customization, Strapi URL, and JSON template

Open AI Settings

OpenAI Platform On va chercher un secret dans la config d'OpenAI.
Webpage interface for managing API keys with various key management options and settings
On crée notre secret ici,
User interface for creating a new secret key with options for naming and setting permissions
Dialog box titled 'Save your key' with cautionary message to save secret key securely. Redacted area for key, 'Copy' button, and permissions note for reading and writing API resources.
User interface for configuring Strapi & OpenAI settings with input fields for API tokens and additional prompts
On met notre clé ici

Additional prompt

On complète avec un prompt additionnel si besoin, pour spécifier des informations supplémentaires, ici, on est libre, on donnera des infos en plus à ChatGPT pour avoir de meilleurs résultats. Par exemple, moi dans ma config j'ai mis ça :
If present, the locale needs to be 'fr' and the content in French, and generate at least 8 tags if present in the schema too. If present, the rank needs to be 999. 
Meta Description: Write an attractive meta description including the main keyword, which encourages clicking on the article from the search results. 
Optimization for Readers and Search Engines: Write content that is not only optimized for search engines but also engaging and informative for readers. The content must answer their questions or solve a problem.

Strapi settings - call 1

Strapi URL ( call 1 )

Graphical user interface for setting up Strapi integration, featuring fields for Strapi instance URL, JSON template, JSON template description, Strapi article creation URL, and Strapi content attribute name.
On va maintenant configurer le premier call ( celui qui va venir créer nos articles par exemple )
Screenshot of a dashboard displaying the documentation section of a content management system with version 1.0.0 and last generated timestamp.
Pour ce faire, on va dans documentation, puis Open Documentation
On récupère l'URL générale de notre Strapi, ici pour moi c'est :
Screenshot of Swagger documentation for API endpoints including Users-Permissions, About, Article, and Upload - File
Et on remplace l'adresse locale affichée, par l'adresse distante, pour moi, ça donne donc https://api.andy-cinquin.fr

Json template config

Web interface screenshot showing Strapi Settings input fields for Strapi URL and JSON Template. JSON Template input field highlighted with red border.
Web interface for API documentation and interaction with Swagger UI or similar tool, showcasing GET and POST requests for '/articles' endpoint
Et on récupère dans notre swagger côté Strapi, le schéma de données que nous devons envoyer. On supprime les liens vers d'autres tables en cascades (désolé ! ce n'est pas encore implémenté !) Et on supprime la partie "content" (la partie qui correspondra au contenu principal de votre article / réalisation ), ainsi que les images pour le moment.
Ce qui donne pour moi :
{
    "data": {
      "title": "string",
      "seo_title": "string",
      "seo_description": "string",
      "slug": "string",
      "excerpt": "string",
      "links": [
        {
          "id": "number",
          "label": "string",
          "url": "string"
        }
      ],
      "subtitle": "string",
      "type": "string",
      "rank": "number",
      "tags": [
        {
          "id": "number",
          "name": "string"
        }
      ],
      "locale": "string"
    }
  }

Json template config description

Ensuite, on va configurer la suite de notre plugin avec la partie "description" On reprend le même template, mais on décrit ce à quoi nos données doivent ressembler, on donne des détails et des indications. En langage naturel (gestion par un LLM, incroyable non ?)
{
    "data": {
      "title": "Title of the item, as a short string",
      "seo_title": "SEO optimized title, as a short string",
      "seo_description": "SEO optimized description, as a short string",
      "slug": "URL-friendly string derived from the title",
      "excerpt": "A short preview or snippet from the content",
      "links": "Array of related links with ID, label, and URL",
      "subtitle": "Subtitle or secondary title, as a short string",
      "type": "Category or type of the item, as a short string",
      "rank": "Numerical ranking or order priority, as a number",
      "tags": "Array of associated tags with ID and name",
      "locale": "Locale or language code, as a short string"
    }
  }
Ça donne ça pour moi !

Strapi create url

User interface displaying Strapi Article Create URL and Strapi Content Attribute Name text input fields filled with specific values.
Ça c'est l'url complète vers la création d'un article ou réalisation, pour moi c'est https://api.andy-cinquin.fr/api/articles

Strapi content attribute name call

Screenshot of a JSON data structure template with keys like 'title,' 'content,' 'seo description,' highlighting key-value pairs.
Pour moi le contenu principal de mon article se retrouve ici, j'indique juste le nom de ce champ ici (je fais ça pour économiser des tokens dans les calls API vers OpenAI !)

Optional (image)

Screenshot of user interface showing Main Image Settings with Enable Main Image option toggled off
Pour le coup, cet élément est optionnel, si vous avez une image, par exemple un fond, ou une illustration à ajouter en même temps à votre API et que vous voulez faire tout en même temps, c'est une bonne méthode.
Pour pouvoir être utilisé, il faut avoir un dossier dans votre Obsidian qui se nomme "image"
Computer interface displaying a dropdown menu labeled 'Utilisation du plugin obsidian Strapi', with an expanded item showing an image file named 'Presentation tuto' in PNG format.
L'architecture doit ressembler à ça pour pouvoir utiliser une image unique
Computer interface displaying Main Image Settings with enable option and full path property field highlighted in red box

Optional (gallery)

Screenshot of Main Gallery plugin settings page showing options to enable the gallery and folder structure instructions
Même système que pour les images, mais avec "gallery".
Computer screen displaying a file navigation window with a folder named 'gallery' expanded to reveal PNG image files named 'Andy_C_unicorn_group_i...' and 'LightIn_as_a_fish_5ef0c8c8c...'. A red box highlights the folder and its contents.

Configuration call 2 ( optionnel )

Vous pouvez de la même façon, configurer une seconde route, de la même façon
-> Vous devrez redémarrer votre application lorsque vous activez votre seconde route !

Utilisation de l'application

Computer screen displaying a note-taking application with a folder tree on the left and a text document in French on the right. Red boxes highlight 'gallery' field and corresponding folder in the interface.
Une fois que tout ça est configuré, il suffit de cliquer sur le petit icône d'upload à gauche dans la sidebar pour upload l'article lui-même
Et voilà, laissez faire la magie !



En vous remerciant de votre visite, n'hésitez pas à me contacter pour toute demande de renseignements, devis ou proposition de collaboration. Je me ferai un plaisir de vous répondre dans les plus brefs délais.
Vous avez aimé cet article ? N'hésitez pas à le partager !

DÉVELOPPONS ENSEMBLE VOS PROJETS

Une idée, un projet ? Je suis là pour répondre à vos demandes et vous accompagner.
N’hésitez pas, je serais ravi d’échanger avec vous sur votre projet !
© 2024 Andy Cinquin - Tous droits réservés - Developed & Designed with ❤️ 🐝 ForHives co-founders