Índice

Si no eres un usuario administrador en tu Dolibarr, puedes pasar al punto 3 de esta manual.

1. 💬 Burbuja flotante en todas las páginas
2. ✏️ Modo de selección de texto
   • Selección por arrastre y soltar
   • Selección de contenedores
   • Selección vacía para edición libre
3. ⚙️ Opciones de transformación de texto
   • Tipos de transformación predefinida
   • Idiomas disponibles predefinidos
   • Opciones adicionales (emojis & hashtags)
   • Transformación personalizada
4. Proceso de instalación
5. Configuración e integración con proveedores de IA
6. 💎 Beneficios del módulo AI Writer

SELECCIÓN POR ARRASTRE Y SOLTAR

• Si después de hacer clic por ejemplo en una celda no vacía de una tabla y arrastramos hacia abajo o hacia arriba, podremos seleccionar varias filas de una tabla, aunque no necesariamente toda. Al soltar el ratón se abrirá el cuadro de diálogo para configurar la transformación.
• Lo mismo puede usarse para escoger unos cuantos elementos de una lista de viñetas, en lugar de uno solo.

SELECCIÓN DE CONTENEDORES

Sin embargo, si queremos seleccionar toda una tabla, o toda una lista de viñetas o toda una sección de la página, entonces haremos esto:

1. poner el cursor del ratón dentro de esa "zona"
2. pulsar la tecla SHIFT del teclado
3. desplazar el ratón hacia los lados o hacia arriba o hacia abajo para que se ilumine el contenedor de ese elemento
4. si nos desplazamos fuera de ese contenedor, podremos iluminar el siguiente contenedor, incluso toda la página
5. cuando 

⚠️ Nota: este selector se queda con todo el HTML contenido en la zona señeccionada, y eso a veces incluye bastante código CSS o incluso javascript... que será también enviado por el módulo al LLM para ser procesado. En el prompt ya viene la instrucción de "no tocar" (o "no hacer caso") de CSS y javascript y solo traducir/transformar el "texto visible". Pero yo he notado que al seleccionar demasiados elementos de la página el LLM se confunde, se tarda y a veces no responde. Así que toma este modo de selección como algo "experimental" de momento.

SELECCIÓN VACÍA para EDICIÓN LIBRE

Este modo de selección está interesante:

1. mueve el ratón hasta situarlo en una "zona vacía de texto"
2. eso provocará que ningún elemento de la página quede "remarcado"
3. entonces haz clic con el ratón
4. y se abrirá el cuadro de diálogo para indicar la transformación que queremos
5. pero... ahora el recuadro de "previsualización" del texto seleccionado, ya no aparece y en su lugar tenemos una caja de texto multilínea donde debemos escribir (o pegar) el texto que queramos editar.

Este modo de selección yo lo uso a menudo para mientras trabajo con otras apps que no son Dolibarr y necesito un editor/traductor de texto rápido. Y como sabes, AI Writer es un asistente rápido para usar.

Index

If you are not an administrator user in your Dolibarr, you can skip to point 3 of this manual.

1. 💬 Floating bubble on all pages
2. ✏️ Text selection mode
   • Selection by drag and drop
   • Container selection
   • Empty selection for free editing
3. ⚙️ Text transformation options
   • Predefined transformation types
   • Available predefined languages
   • Additional options (emojis & hashtags)
   • Custom transformation
4. Installation process
5. Configuration and integration with AI providers
6. 💎 Benefits of the AI Writer module

DRAG-AND-DROP SELECTION

• If after clicking for example on a non-empty cell in a table and dragging up or down, we can select multiple rows of a table, though not necessarily all of them. Upon releasing the mouse button, the dialog box to configure the transformation will open.
• The same can be used to choose a few items from a bulleted list, instead of just one.

CONTAINER SELECTION

However, if we want to select an entire table, or an entire bulleted list, or an entire section of the page, then we do this:

1. place the mouse cursor inside that "zone"
2. press the SHIFT key on the keyboard
3. move the mouse sideways or up or down so that the container of that element is highlighted
4. if we move outside that container, we can highlight the next container, even the entire page
5. when

⚠️ Note: this selector captures all the HTML contained in the selected zone, and that sometimes includes quite a bit of CSS or even javascript... which will also be sent by the module to the LLM to be processed. The prompt already includes the instruction to "not touch" (or "ignore") CSS and javascript and only translate/transform the "visible text". But I have noticed that when selecting too many elements from the page, the LLM gets confused, takes longer, and sometimes doesn't respond. So consider this selection mode as something "experimental" for now.

EMPTY SELECTION for FREE EDITING

This selection mode is interesting:

1. move the mouse until it is positioned over an "empty text zone"
2. this will cause no element on the page to be "highlighted"
3. then click with the mouse
4. and the dialog box to specify the transformation we want will open
5. but... now the "preview" box for the selected text no longer appears, and in its place we have a multi-line text box where we must write (or paste) the text we want to edit.

I often use this selection mode while working with other apps that are not Dolibarr and I need a quick text editor/translator. And as you know, AI Writer is a fast assistant to use.

Index

Si vous n'êtes pas un utilisateur administrateur dans votre Dolibarr, vous pouvez passer directement au point 3 de ce manuel.

1. 💬 Bulle flottante sur toutes les pages
2. ✏️ Mode sélection de texte
   • Sélection par glisser-déposer
   • Sélection de conteneurs
   • Sélection vide pour édition libre
3. ⚙️ Options de transformation de texte
   • Types de transformations prédéfinies
   • Langues prédéfinies disponibles
   • Options supplémentaires (emojis & hashtags)
   • Transformation personnalisée
4. Processus d'installation
5. Configuration et intégration avec les fournisseurs d'IA
6. 💎 Avantages du module AI Writer

SÉLECTION PAR GLISSER-DÉPOSER

• Si après avoir cliqué par exemple sur une cellule non vide d'un tableau et que nous glissons vers le bas ou vers le haut, nous pourrons sélectionner plusieurs lignes d'un tableau, bien que pas nécessairement toutes. En relâchant la souris, la boîte de dialogue pour configurer la transformation s'ouvrira.
• La même chose peut être utilisée pour choisir quelques éléments d'une liste à puces, au lieu d'un seul.

SÉLECTION DE CONTENEURS

Cependant, si nous voulons sélectionner un tableau entier, ou toute une liste à puces ou toute une section de la page, alors nous ferons ceci :

1. placer le curseur de la souris à l'intérieur de cette "zone"
2. appuyer sur la touche MAJ du clavier
3. déplacer la souris sur les côtés ou vers le haut ou le bas pour que le conteneur de cet élément soit mis en évidence
4. si nous nous déplaçons en dehors de ce conteneur, nous pourrons mettre en évidence le conteneur suivant, voire toute la page
5. lorsque 

⚠️ Note : ce sélecteur récupère tout le HTML contenu dans la zone sélectionnée, et cela inclut parfois beaucoup de code CSS ou même javascript... qui sera également envoyé par le module au LLM pour être traité. L'instruction de "ne pas toucher" (ou "ignorer") le CSS et le javascript et de ne traduire/transformer que le "texte visible" est déjà présente dans le prompt. Mais j'ai remarqué qu'en sélectionnant trop d'éléments de la page, le LLM se trompe, prend du temps et parfois ne répond pas. Considérez donc ce mode de sélection comme quelque chose d'"expérimental" pour le moment.

SÉLECTION VIDE pour ÉDITION LIBRE

Ce mode de sélection est intéressant :

1. déplacez la souris jusqu'à la placer dans une "zone vide de texte"
2. cela fera qu'aucun élément de la page ne sera "surligné"
3. alors cliquez avec la souris
4. et la boîte de dialogue pour indiquer la transformation que nous voulons s'ouvrira
5. mais... maintenant le cadre de "prévisualisation" du texte sélectionné n'apparaît plus et à sa place nous avons une zone de texte multiligne où nous devons écrire (ou coller) le texte que nous souhaitons éditer.

J'utilise souvent ce mode de sélection lorsque je travaille avec d'autres applications qui ne sont pas Dolibarr et que j'ai besoin d'un éditeur/traducteur de texte rapide. Et comme vous le savez, AI Writer est un assistant rapide à utiliser.

Appendix: Quick Markdown Formatting Guide

Headers

Use # symbols to create headers (1-6 levels):

# H1 - Main Title
## H2 - Section
### H3 - Subsection

Text Formatting

• Bold text: **bold** or __bold__
• Italic text: *italic* or _italic_
• Bold and italic: ***text***
• Strikethrough: ~~strikethrough~~
• Inline code: `code`

Links

Create hyperlinks with [text](URL):

[OpenAI](https://openai.com)

Result: OpenAI

Images

Insert images using ![alt text](image-url):

![Logo](https://example.com/ubuntu.png)

Quotes

Single-level quote using >

Nested quote using >>

Continuation...

Using this:

> Single-level quote using `>`
>> Nested quote using `>>`
>
> Continuation...

Lists

Unordered Lists

Use -, *, or + for bullets:

- First item
- Second item
 - Nested item (indented with TAB character)
 - Another nested item
- Third item

Ordered Lists

Use numbers followed by periods:

1. First item
2. Second item
3. Third item

Code Blocks

Inline Code

Use single backticks: `code here`

Code Blocks

Use triple backticks with optional language identifier:

```php
$variable = "Hello World";
echo $variable;
```

Horizontal Rules

Create dividers with ---, ***, or ___:

Tables

Create tables using pipes | and dashes -:

| Column 1 | Column 2 | Column 3 |
|----------|----------|----------|
| Data 1 | Data 2 | Data 3 |
| Data 4 | Data 5 | Data 6 |

Result:

Task Lists

Create checkboxes with - [ ] or - [x]:

[x] Completed task
[ ] Pending task
[ ] Another pending task

Result:
Completed task
Pending task
Another pending task

Escaping Special Characters

If you need to include characters in your text that Markdown uses for formatting, you can "escape" them by placing a backslash \ as a prefix:

Common Use Cases

Without escaping: *italic* **bold** `code`
Escaped: \*asterisks\* \*\*stars\*\* \`backticks\`

Result:

• Without escaping: italic bold code
• Escaped: *asterisks* **stars** `backticks`

Note: Markdown rendering may vary depending on the platform (GitHub, GitLab, Reddit, Dolibarr, etc.).

Anexo: Guía rápida de formateo con Markdown

Encabezados

Usos # símbolos para crear encabezados (1-6 niveles):

# H1 - Main Title
## H2 - Section
### H3 - Subsection

Formato de texto

• Texto en negrita: **bold** o __bold__
• Texto en cursiva: *italic* o _italic_
• Negrita y cursiva: ***text***
• Strikethrough: ~~strikethrough~~
• Inline code: `code`

Enlaces

Crea hipervínculos con [text](URL):

[OpenAI](https://openai.com)

Resultado: OpenAI

Imágenes

Insertar imágenes usando ![alt text](image-url):

![Logo](https://example.com/ubuntu.png)

Citas

Cita de un solo nivel utilizando >

Cita anidada usando >>

Continuación...

Usando esto:

> Cita de un solo nivel utilizando `>`
>> Cita anidada usando `>>`
>
> Continuación...

Listas

Listas desordenadas

Usos -, *, o + Para viñetas:

- Primer elemento
- Segundo elemento
 - Elemento anidado (sangrado con el caracter TAB)
 - Otro elemento anidado
- Tercer elemento

Listas ordenadas

Utilice números seguidos de períodos:

1. Primer elemento
2. Segundo elemento
3. Tercer elemento

Bloques de código

Código en línea

Utilice comillas invertidas individuales: `código aquí`

Bloques de código

Utilice "backticks" triples con identificador de lenguaje opcional:

```php
$variable = "Hola Mundo";
echo $variable;
```

Reglas horizontales

Crea divisores con ---, ***, o ___:

Tablas

Crea tablas usando "pipes" | y guiones -:

| Columna 1 | Columna 2 | Columna 3 |
|----------|----------|----------|
| Datos 1 | Datos 2 | Datos 3 |
| Datos 4 | Datos 5 | Datos 6 |

Resultado:

Listas de tareas

Crea casillas de verificación con - [ ] o - [x]:

[x] Tarea completada
[ ] Tarea pendiente
[ ] Otra tarea pendiente

Result:
Tarea completada
Tarea pendiente
Otra tarea pendiente

Escapando carácteres especiales

Si necesitas incluir en tu texto los caracteres que Markdown usa para formateo, puedes "escaparlos" colocando la barra inclinada \ como prefijo:

Casos de uso habituales

Sin escapar: *itálica* **negrita** `código`
Escapado: \*asteriscos\* \*\*estrellas\*\* \`backticks\`

Resultado:

• Sin escapar: itálica negrita código
• Escapado: *asteriscos* **estrellas** `backticks`

Nota: el renderizado de Markdown puede variar dependiendo de la plataforma (GitHub, GitLab, Reddit, Dolibarr, etc.).

Introducción

Brizy PRO es mi constructor de páginas preferido para WordPress. Lo tiene casi todo. Sin embargo, una característica que aún le falta hoy es la integración con los comentarios nativos de WordPress para entradas de blog.

En esta guía, compartiré cómo lo resolví.

Un shortcode para comentarios de WordPress

El primer problema por resolver es que (hasta donde pude averiguar) no existe un shortcode que nos permita insertar el widget de comentarios de WordPress en, por ejemplo, una plantilla de Brizy. Brizy permite agregar shortcodes existentes de WordPress (nativos o de cualquier otro plugin instalado), pero no tiene uno para comentarios. Es una de esas cosas raras de WordPress que nunca he entendido.

Mi propio plugin para tener un shortcode de comentarios

Después de probar varios enfoques, descubrí que se puede "fácilmente" cargar un nuevo shortcode en WordPress agregando este código PHP, por ejemplo, en el archivo functions.php de su tema actual:

<?php
/*
Plugin Name: My Comments Shortcode
Plugin URI: 
Description: Lets you to use shortcode [wpse_comments_template] to insert native Wordpress post comments.
Version: 1.0
Author: IMASDEWEB
License: GPL v2 or later
*/

// Prevenir acceso directo al archivo
if (!defined('ABSPATH')) {
    exit;
}

// Registrar el shortcode
function register_comments_shortcode() {
    add_shortcode('wpse_comments_template', 'render_comments_template');
}

// Función que maneja la lógica del shortcode 
function render_comments_template($atts = array(), $content = '') {
    if (is_singular() && post_type_supports(get_post_type(), 'comments')) {
        ob_start();
        comments_template();
        add_filter('comments_open', 'wpse_comments_open');
        add_filter('get_comments_number', 'wpse_comments_number');
        return ob_get_clean();
    }
    return '';
}

// Inicializar el plugin
add_action('init', 'register_comments_shortcode');

El problema es que este método es muy poco conveniente, así que busqué una forma de crear un plugin de WordPress que haga lo mismo. Y en realidad es muy simple:

• puedes descargarlo aquí: my-comments-shortcode.zip

Es un archivo ZIP que contiene solo estos 2 archivos:

• readme.txt
• my-comments-shortcode.php

Cómo insertar comentarios en una plantilla de Brizy

Primero, instale este plugin en su WordPress. Luego, edite la plantilla de Brizy que creó para ENTRADAS de blog (modo SINGLE), y por ejemplo, debajo del cuadro donde indicó que debe aparecer el contenido de la ENTRADA, cree otro bloque de tipo "shortcode" y configúrelo con este código:

Es tan simple. Después de guardar los cambios, verá que los comentarios de WordPress ahora aparecen en ENTRADAS que usan esa plantilla.
 
Nota: puede trabajar en el formato de los elementos de la lista de comentarios y el formulario para agregar un nuevo comentario reescribiendo los estilos que los afectan en el CSS adicional de su tema. Ya debería saber que los desarrolladores de Brizy recomiendan usar un hijo de Blocksy como el "tema host" óptimo para Brizy.

Introduction

Brizy PRO is my preferred page builder for WordPress. It has almost everything. However, one feature it still lacks today is the integration with native WordPress comments for blog posts.

In this guide, I'll share how I solved this.

A shortcode for WordPress comments

The first problem to solve is that (as far as I could find out) there isn't a shortcode that allows us to insert the WordPress comments widget in, for example, a Brizy template. Brizy allows you to add existing shortcodes from your WordPress (native or from any other installed plugin), but it doesn't have one for comments. It's one of those rare things about WordPress that I've never understood.

My own plugin to have a comments shortcode

After trying several approaches, I found that you can "easily" load a new shortcode in WordPress by adding this PHP code, for example, in the functions.php file of your current theme:

<?php
/*
Plugin Name: My Comments Shortcode
Plugin URI: 
Description: Lets you to use shortcode [wpse_comments_template] to insert native Wordpress post comments.
Version: 1.0
Author: IMASDEWEB
License: GPL v2 or later
*/

// Prevenir acceso directo al archivo
if (!defined('ABSPATH')) {
    exit;
}

// Registrar el shortcode
function register_comments_shortcode() {
    add_shortcode('wpse_comments_template', 'render_comments_template');
}

// Función que maneja la lógica del shortcode 
function render_comments_template($atts = array(), $content = '') {
    if (is_singular() && post_type_supports(get_post_type(), 'comments')) {
        ob_start();
        comments_template();
        add_filter('comments_open', 'wpse_comments_open');
        add_filter('get_comments_number', 'wpse_comments_number');
        return ob_get_clean();
    }
    return '';
}

// Inicializar el plugin
add_action('init', 'register_comments_shortcode');

The problem is that this method is very inconvenient, so I looked for a way to create a WordPress plugin that does the same thing. And it's actually very simple:

• you can download it here: my-comments-shortcode.zip

It's a ZIP file containing just these 2 files:

• readme.txt
• my-comments-shortcode.php

How to insert comments in a Brizy template

First, install this plugin in your WordPress. Then, edit the Brizy template you created for blog POSTS (SINGLE mode), and for example, below the box where you indicated the POST content should appear, create another block of type "shortcode" and configure it with this code:

It's that simple. After saving changes, you'll see that WordPress comments now appear in POSTS using that template.
 
Note: you can work on the format of those comment list elements and the form to add a new comment by rewriting the styles that affect them in your theme's additional CSS. You should already know that Brizy developers recommend using a Blocksy-child as the optimal "host theme" for Brizy.

Index

Si vous n'êtes pas un utilisateur administrateur de votre Dolibarr, vous pouvez passer au point 3 de ce manuel.

1. Processus d'installation
2. Intégration avec les fournisseurs d'IA
   • OpenAI (génération de texte)
   • Anthropic.com (génération de texte avec vision)
   • Perplexity (gén. de texte et recherche sur internet)
   • Fal.ai (gén. d'images avec FLUX et StableDiffusion)
3. Converser avec une IA
4. Prochainement
5. Accès à DEMO

Index

If you are not an administrative user of your Dolibarr, you can skip to point 3 of this manual.

1. Installation Process
2. Integration with AI Providers
   • OpenAI (text generation)
   • Anthropic.com (text generation with vision)
   • Perplexity (text generation and online search)
   • Fal.ai (image generation with FLUX & StableDifussion)
3. Conversing with an AI
4. Coming Soon
5. Access to DEMO

Índice

Si no eres un usuario administrador en tu Dolibarr, puedes pasar al punto 3 de esta manual.

1. Proceso de instalación
2. Integración con proveedores de IA
   • OpenAI.com (generación de texto)
   • Anthropic.com (generación de texto con visión)
   • Perplexity.ai (gen. de texto y búsqueda en internet)
   • Fal.ai (gen. de imágenes con FLUX y StableDifussion)
3. Conversar con una IA
4. Próximamente
5. Acceso a DEMO

Requeriments

• Minimum required hardware:  2 CPU + 2Gb RAM
• From HestiaCP, create a new user and new subdomain: live.mydomain.com
• From HestiaCP install SSL certificate and set auto-redirect to the https for it.

Create a NGINX template

You could edit the file /etc/nginx/conf.d/domains/live.mydomain.com.ssl.conf directly, but any changes would be lost when you update HestiaCP. To preserve the changes, the correct approach is to create an NGINX template and then assign it to your recently created subdomain.

Note: I chose port 8445 because it is free on my VM, but you can use any other port that is available. Keep in mind that this port number will be used later in the .env file for the Jitsi Docker container to listen on.

cd /usr/local/hestia/data/templates/web/nginx/
cp default.tpl jitsi-port-8445.tpl
cp default.stpl jitsi-port-8445.stpl

We only need to customize the .stpl :

nano jitsi-port-8445.stpl

You must set these lines replacing the existing ones:

location / {
	proxy_pass https://%ip%:8445;
	proxy_http_version 1.1;
	proxy_set_header Host $host;
	proxy_set_header X-Real-IP $remote_addr;
	proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
	proxy_set_header X-Forwarded-Proto $scheme;

	# WebSocket support
	proxy_set_header Upgrade $http_upgrade;
	proxy_set_header Connection "upgrade";

	# Aumentar los timeouts para conexiones largas
	proxy_read_timeout 3600s;
	proxy_send_timeout 3600s;

	# Buffering
	proxy_buffering off;
}

also change the port on this @fallback:

location @fallback {
        proxy_pass https://%ip%:8445;
}

and comment this line aswell:

# proxy_hide_header Upgrade;

Create a NGINX template

Then we need set this template as Proxy Template for this subdomain:

1. go to HestiaCP on web browser
2. edit the subdomain you have created
3. click on Advanced options
4. on Proxy Template choose jitsi-port-8445
5. click Save

Install docker

sudo apt update
sudo apt upgrade -y

sudo apt install apt-transport-https ca-certificates curl software-properties-common -y

curl -fsSL https://download.docker.com/linux/ubuntu/gpg | sudo gpg --dearmor -o /usr/share/keyrings/docker-archive-keyring.gpg

echo "deb [arch=amd64 signed-by=/usr/share/keyrings/docker-archive-keyring.gpg] https://download.docker.com/linux/ubuntu $(lsb_release -cs) stable" | sudo tee /etc/apt/sources.list.d/docker.list > /dev/null

sudo apt update
sudo apt install docker-ce -y
sudo systemctl status docker
docker ps

Install docker compose:

sudo curl -L "https://github.com/docker/compose/releases/latest/download/docker-compose-$(uname -s)-$(uname -m)" -o /usr/local/bin/docker-compose

sudo chmod +x /usr/local/bin/docker-compose

docker-compose --version

Install docker of Jitsi:

• live30 is the user i created on HestiaCP to admin the subdomain live.mydomain.com.
• I installed it in a new docker directory within the user's home directory, but you can perform the next installation steps in any other directory on your VM. I simply thought it would be a good idea to do it here.

mkdir /home/live30/docker
cd /home/live30/docker

wget $(curl -s https://api.github.com/repos/jitsi/docker-jitsi-meet/releases/latest | grep 'zip' | cut -d\" -f4)

unzip stable-9646
rm -rf stable-9646
mv jitsi-docker-jitsi-meet-1797ac8/ jitsi
cd jitsi

cp env.example .env
./gen-passwords.sh
nano .env

At the .env file you must set these lines as minimum:

• i recommend to use the absolute path to the .jitsi-meet-cfg directory on CONFIG parameter
• i recommend to use 2 ports 100% free in your VM

...
CONFIG=/home/live30/docker/jitsi/.jitsi-meet-cfg
HTTP_PORT=8005
HTTPS_PORT=8445
TZ=America/Hermosillo
PUBLIC_URL=https://live.mydomain.com
...
ENABLE_AUTH=1 # let only registered users to create rooms
ENABLE_GUESTS=1
AUTH_TYPE=internal # using username & passdord 
...
RESTART_POLICY=unless-stopped

Permanent storage out of docker container:

mkdir -p ./.jitsi-meet-cfg/{web,transcripts,prosody/config,prosody/prosody-plugins-custom,jicofo,jvb,jigasi,jibri}

Modify docker-compose.yml to set jitsi network with static IPs:

networks:
    meet.jitsi:
      ipam:
         driver: default
         config:
          - subnet: 172.20.0.0/16

on each web service set (incrementing the 172.20.0.2 on ipv4_address):

        networks:
            meet.jitsi:
              ipv4_address: 172.20.0.2

The resulting docker-compose.yml file should look something like this:

version: '3.5'

services:
    # Frontend
    web:
        image: jitsi/web:${JITSI_IMAGE_VERSION:-stable-9646}
        restart: ${RESTART_POLICY:-unless-stopped}
        ports:
            - '${HTTP_PORT}:80'
            - '${HTTPS_PORT}:443'
        volumes:
            - ${CONFIG}/web:/config:Z
            - ${CONFIG}/web/crontabs:/var/spool/cron/crontabs:Z
            - ${CONFIG}/transcripts:/usr/share/jitsi-meet/transcripts:Z
            - ./imasdeweb/watermark.svg:/usr/share/jitsi-meet/images/watermark.svg
        environment:
            - AMPLITUDE_ID
            - ANALYTICS_SCRIPT_URLS
 			- ... (long list)
            
        networks:
            meet.jitsi:
              ipv4_address: 172.20.0.2
        depends_on:
            - jvb

    # XMPP server
    prosody:
        image: jitsi/prosody:${JITSI_IMAGE_VERSION:-stable-9646}
        restart: ${RESTART_POLICY:-unless-stopped}
        expose:
            - '${XMPP_PORT:-5222}'
            - '${PROSODY_S2S_PORT:-5269}'
            - '5347'
            - '${PROSODY_HTTP_PORT:-5280}'
        volumes:
            - ${CONFIG}/prosody/config:/config:Z
            - ${CONFIG}/prosody/prosody-plugins-custom:/prosody-plugins-custom:Z
        environment:
            - AUTH_TYPE
            - DISABLE_POLLS
 			- ... (long list)
 			
        networks:
            meet.jitsi:
                aliases:
                    - ${XMPP_SERVER:-xmpp.meet.jitsi}
                ipv4_address: 172.20.0.3

    # Focus component
    jicofo:
        image: jitsi/jicofo:${JITSI_IMAGE_VERSION:-stable-9646}
        restart: ${RESTART_POLICY:-unless-stopped}
        ports:
            - '127.0.0.1:${JICOFO_REST_PORT:-8888}:8888'
        volumes:
            - ${CONFIG}/jicofo:/config:Z
        environment:
            - AUTH_TYPE
            - BRIDGE_AVG_PARTICIPANT_STRESS
 			- ... (long list)
   			
        depends_on:
            - prosody
        networks:
            meet.jitsi:
              ipv4_address: 172.20.0.4

    # Video bridge
    jvb:
        image: jitsi/jvb:${JITSI_IMAGE_VERSION:-stable-9646}
        restart: ${RESTART_POLICY:-unless-stopped}
        ports:
            - '${JVB_PORT:-10000}:${JVB_PORT:-10000}/udp'
            - '127.0.0.1:${JVB_COLIBRI_PORT:-8080}:8080'
        volumes:
            - ${CONFIG}/jvb:/config:Z
        environment:
            - AUTOSCALER_SIDECAR_KEY_FILE
            - AUTOSCALER_SIDECAR_KEY_ID
 			- ... (long list)

        depends_on:
            - prosody
        networks:
            meet.jitsi:
              ipv4_address: 172.20.0.5

# Custom network so all services can communicate using a FQDN
networks:
    meet.jitsi:
      ipam:
         driver: default
         config:
          - subnet: 172.20.0.0/16

Run docker compose:

docker compose up -d

Create user with authentication

which are the unique which can create rooms:

docker-compose exec prosody prosodyctl --config=/config/prosody.cfg.lua register [USERNAME] meet.jitsi [PASSWORD]

BONUS EXTRA: Change  corner logo

As a final but important detail, especially in professional scenarios, is to change the default logo that appears in the top-left corner on both the home page and the conference view. By default, you see a semi-transparent Jitsi SVG logo. To replace it with your own, follow these steps:

1. upload the new SVG from your local console

scp -P 22 watermark.svg root@live.mydomain.com:/home/live30/docker/jitsi

2. from your VM console:

cd /home/live30/docker/jitsi
nano docker-compose.yml

on "web" service "volumes" add this line:

 - ./watermark.svg:/usr/share/jitsi-meet/images/watermark.svg

3. finally restart your containers:

docker compose up -d --force-recreate

It's all !!!
Enjoy it 😎

Esta imagen es lo que obtienes cuando le das una mala instrucción a una IA generadora de imágenes: "Anuncio cartel neumáticos de ocasión para coches, furgonetas y camiones". Claramente la imagen producida no es lo que el usuario esperaba.

🔸Primer consejo: DESCRIBIR

A las IAs generadoras de imágenes le has de dar una descripción de los elementos de la imagen. En este caso, algo como: "Una fila de neumáticos ordenados de menor a mayor sobre una carretera vacía en el desierto." (por poner un ejemplo). No le hagas preguntas o esperes que le ponga creatividad para decidir qué incluir o no en la imagen.

Los detalles de más que coloque la IA de imágenes serán para "rellenar" o "adornar" e irán en consonancia con los elementos que le hayas pedido. Pero si le pides algo como "Haz un anuncio para neumáticos de coches y camiones", puede salir cualquier cosa, y posiblemente muy alejado de lo que esperabas.

🔸 Segundo consejo: USAr IA DE TEXTO

Si lo que quieres es algo de ayuda por parte de una IA para posibles ideas de COMPOSICIÓN de esa imagen, entonces debes ir a una IA generadora de texto (chatGPT, Claude, Llama, Mistral, etc.) y tener una CONVERSACIÓN explicándole acerca de la intención y función de tu imagen. Y pidiéndole que te de varias ideas alternativas.

Finalmente, incluso es muy útil cerrar esa conversación pidiéndole algo como: "Redacta una descripción de esta idea de imagen con todo detalle, para que una IA generadora de imágenes pueda crearla.". Y verás que te dará una descripción que te va a funcionar muy bien. Abajo te muestro unos cuantos ejemplos prácticos.

🔸 Tercer consejo: USAR INGLÉS

Las IAs generadoras de imágenes trabajan 10 veces mejor si les das la descripción de la imagen en inglés!! Usa una IA de texto para traducir del español al inglés. No trates de hacerlo tú mism@!!! digo, a menos que tengas nivel nativo. En este tipo de composiciones, escoger la palabra correcta determina demasiado el resultado.

🔸 Cuarto consejo: REDUCIR TEXTOS

De momento las IAs generadoras de texto tienen bastantes problemas para agregar texto a las imágenes que producen. Estoy usando FLUX que es la más avanzada en este sentido (hasta donde sé, y a día de hoy Agosto 2024), y se sigue confundiendo muchísimo.

Si el texto que quieres poner es de una sola palabra aumenta por mucho las probabilidades de que lo escriba bien. Y si es en inglés, incluso frases completas sin problema. Lo malo es en otros idiomas, como el español. 🙁

Por tanto, mi consejo es que 1) uses poco texto, 2) tal vez el texto lo agregas después con una herramienta de edición gráfica clásica.
 

😎 Procedimiento recomendado

1. IA GENERADORA DE TEXTO

En mi caso he ido a chatGPT, pero puedes usar ClaudeAI, Llama (de Meta), Mistral, Perplexity, o cualquier otra plataforma donde puedas interactuar con un chatbot conversacional tipo LLM.

Le he hecho esta petición:

"Ayúdame a generar un baner gráfico que sirva como Anuncio cartel neumáticos de ocasión para coches, furgonetas y camiones. Dame 3 alternativas interesantes."

y me ha respondido esto:

Aquí tienes tres ideas diferentes para un banner gráfico sobre la venta de neumáticos de ocasión:

1. Opción 1: Estilo moderno y profesional
   - Fondo: Un fondo oscuro con un patrón sutil de textura de neumático.
   - Texto principal: "¡Neumáticos de Ocasión para Cualquier Vehículo!"
     - Subtexto: "Coches, Furgonetas y Camiones"
   - Elementos gráficos: Imágenes de neumáticos de diferentes tamaños colocados estratégicamente, como si estuvieran alineados en una fila, resaltando la variedad disponible.
   - Llamada a la acción: Un botón prominente que diga "Ver Ofertas" en color rojo o amarillo para captar la atención.

2. Opción 2: Estilo llamativo y dinámico
   - Fondo: Colores vibrantes, como rojo y negro, con un efecto de velocidad o movimiento.
   - Texto principal: "¡Las Mejores Ofertas en Neumáticos de Ocasión!"
     - Subtexto: "Desde coches compactos hasta camiones pesados"
   - Elementos gráficos: Un coche deportivo, una furgoneta y un camión en diferentes ángulos, con neumáticos destacados en primer plano. Podrías incluir un medidor de ahorro en una esquina.
   - Llamada a la acción: Un banner inferior con "Compra Ahora y Ahorra".

3. Opción 3: Estilo limpio y minimalista
   - Fondo: Blanco o gris claro con sombras suaves.
   - Texto principal: "Neumáticos de Ocasión para Cada Necesidad"
     - Subtexto: "Calidad a Precios Imbatibles para Coches, Furgonetas y Camiones"
   - Elementos gráficos: Una sola imagen central de un neumático de alta calidad con reflejos, acompañado por pequeños íconos de coche, furgoneta y camión.
   - Llamada a la acción: Un botón en azul que diga "Descubre Más".

Estas opciones te dan variedad en cuanto a estilo y enfoque, para que puedas elegir la que mejor se ajuste a la imagen que quieres proyectar. ¿Te gustaría que generara una de estas alternativas como imagen?

Entonces el siguiente paso es pedirle que no los ponga más fácil para trabajar con la IA generadora de imágenes, y le pedí esto:

Ok, me encantó la primera. Redacta por favor un párrafo descriptivo para una IA generadora de imágenes, dando todos los detalles que puedan ayudar.

A lo que respondió:

Create a modern and professional banner advertising second-hand tires for cars, vans, and trucks. The background should be dark with a subtle tire texture, giving a sleek and industrial feel. The main text reads "¡Neumáticos de Ocasión para Cualquier Vehículo!" in bold, metallic silver letters, with a smaller subtext below: "Coches, Furgonetas y Camiones" in a lighter shade of silver or white. Arrange images of tires in different sizes, aligned horizontally, to showcase the variety available. Each tire should be realistically detailed, with highlights and shadows to emphasize their texture and quality. Include a prominent call-to-action button in the lower right corner that says "Ver Ofertas" in bold red or yellow, contrasting sharply with the dark background. Ensure the overall layout is balanced, with the text and images well-distributed, giving the banner a professional and eye-catching look.

2. IA GENERADORA DE IMÁGENES: FLUX

Entonces me fui a la plataforma fal.ai donde puedes darte de alta gratuitamente y te regalan $12 USD de saldo para usar cualquiera de las IAs generadoras de imágenes que tienen, y usé el modelo FLUX-PRO (de Black Forest Labs, en Alemania) que es el más avanzado a día de hoy, apenas hace un mes que fue su estreno mundial y ha sido todo un exitazo.

Veamos la imagen que me generó con el prompt anterior:

No está nada mal! mucho mejor!! ahora si parece un banner gráfico publicitario. Aunque tal como puedes ver, ¡¡el texto está nefasto!!

De hecho, me fui de nuevo a chatGPT y le pedí un prompt para generar la segunda idea que me había propuesto y me dió esto:

Create a vibrant and dynamic banner for second-hand tires, targeting cars, vans, and trucks. The background should feature bold colors like red and black, with a motion effect to convey speed and energy. The main text reads "¡Las Mejores Ofertas en Neumáticos de Ocasión!" in large, bold white letters, with a subtext underneath: "Desde coches compactos hasta camiones pesados" in a smaller, italicized font. Include dynamic images of a sports car, a van, and a truck, positioned at different angles to create a sense of motion. Highlight the tires prominently in the foreground, ensuring they appear glossy and new. In one corner, add a small savings meter to emphasize affordability. At the bottom of the banner, include a bright, eye-catching call-to-action bar with the text "Compra Ahora y Ahorra" in bold letters. The overall design should be energetic and attention-grabbing, perfect for attracting customers looking for a great deal.

y al darle ese prompt a FLUX-PRO generó esto otro:

¡es mucho más espectacular! y también sigue teniendo ese aspecto de anuncio publicitario que andamos persiguiendo. Aunque de nuevo, el texto en español quedó ilegible.

Repetí el proceso para la última idea de chatGPT y me dió este prompt:

Design a clean and minimalist banner for second-hand tires suitable for cars, vans, and trucks. Use a light background in white or soft grey, with gentle shadows to add depth. The main text reads "Neumáticos de Ocasión para Cada Necesidad" in sleek, modern black or dark grey letters, centered on the banner. Below, in smaller, lighter text, add the subtext "Calidad a Precios Imbatibles para Coches, Furgonetas y Camiones." Place a single, high-quality tire image in the center of the banner, with detailed reflections and textures to showcase its quality. Surround the tire with small, subtle icons representing a car, a van, and a truck, evenly spaced around it. In the bottom center, include a simple blue call-to-action button that reads "Descubre Más" in a clean, readable font. The overall aesthetic should be refined, with a focus on simplicity and elegance, appealing to a discerning audience.

y al dárselo a FLUX me generó esto:

¡también está estupenda! y de nuevo el texto es lo que está mal 😞

No te confundas, esta IA sabe dibujar texto "estupendamente" mientras sea en INGLÉS. Déjame mostrarte la imagen que generó al reemplazar en el prompt anterior los textos a incluir en el banner al español:

Design a clean and minimalist banner for second-hand tires suitable for cars, vans, and trucks. Use a light background in white or soft grey, with gentle shadows to add depth. The main text reads "Used Tires for Every Need" in sleek, modern black or dark grey letters, centered on the banner. Below, in smaller, lighter text, add the subtext "Quality at Unbeatable Prices for Cars, Vans, and Trucks." Place a single, high-quality tire image in the center of the banner, with detailed reflections and textures to showcase its quality. Surround the tire with small, subtle icons representing a car, a van, and a truck, evenly spaced around it. In the bottom center, include a simple blue call-to-action button that reads "Discover More" in a clean, readable font. The overall aesthetic should be refined, with a focus on simplicity and elegance, appealing to a discerning audience.

así quedó la imagen: ... impecable! 🤗

Introducción

Ya sabrás que la mayoría de usuarios de wordpress no se preocupan muchos por ciertos "detalles" técnicos como la optimización de las imágenes. Normalmente Wordpress hace una gestión muy buena de las imágenes de la Biblioteca de Medios, generando diferentes copias de la imagen subida por el usuario, para usar una u otra en función del contexto y tamaño de pantalla del visitante. Lo cuál agiliza mucho la navegación de los visitantes.

Sin embargo, cuando una web empieza a tener varios años de uso y con un ritmo de publicación intensa de artículos, el problema empieza a ser el aumento considerable del espacio de almacenamiento de esas imágenes, y no tanto las copias optimizadas generadas de forma automática por wordpress sino las imágenes originales, que wordpress NO ELIMINA.

Entonces, queriendo hacer algo al respecto de esta situación (pueden ser varios Gb de almacenamiento! que aparte de ocupar espacio ralentiza y sobredimensiona los backups) decidí hacer un simple script de PHP que ejecutado desde el terminal del servidor para optimizar miles de imágenes en un par de minutos con un solo comando.

Nota anecdótica: la IA de Claude fue la artífice del script, obviamente guiada por un atinado "prompt", y un par de iteraciones para dotar al script de algunos extras interesantes.

Detalles del script

Qué hace el script:

• revisar recursivamente todo un directorio
• busca las imágenes JPG, JPEG y PNG
• redimensiona las imágenes que sobrepasen cierta resolución
• opcionalmente comprime las imágenes

Las opciones de ejecución (para hacerllo más seguro) se definen al inicio del script:

$dir = '/ruta/al/directorio'; // Directorio a procesar
$maxWidth = 1920; // Ancho máximo
$maxHeight = 1080; // Alto máximo
$jpegQuality = 85; // Calidad JPEG (0-100)
$pngCompression = 9; // Nivel de compresión PNG (0-9)
$processAllImages = false; // False para procesar solo las que exceden las dimensiones máximas

Puedes descargarlo aquí: optimizar-imagenes-recursivamente.php.zip

// Configuración
$dir = '/ruta/al/directorio'; // Directorio a procesar
$maxWidth = 1920; // Ancho máximo
$maxHeight = 1080; // Alto máximo
$jpegQuality = 78; // Calidad JPEG (0-100)
$pngCompression = 9; // Nivel de compresión PNG (0-9)
$processAllImages = false; // Establecer en true para procesar todas las imágenes, false para procesar solo las que exceden las dimensiones máximas

// Función para optimizar una imagen
function optimizeImage($file) {
    global $maxWidth, $maxHeight, $jpegQuality, $pngCompression, $processAllImages;

    $image = new Imagick($file);
    $origWidth = $image->getImageWidth();
    $origHeight = $image->getImageHeight();

    $needsRescaling = ($origWidth > $maxWidth || $origHeight > $maxHeight);

    if ($needsRescaling || $processAllImages) {
        // Redimensionar si excede las dimensiones máximas
        if ($needsRescaling) {
            $image->resizeImage($maxWidth, $maxHeight, Imagick::FILTER_LANCZOS, 1, true);
        }

        // Optimizar según el tipo de imagen
        $format = strtolower($image->getImageFormat());
        if ($format === 'jpeg' || $format === 'jpg') {
            $image->setImageCompression(Imagick::COMPRESSION_JPEG);
            $image->setImageCompressionQuality($jpegQuality);
        } elseif ($format === 'png') {
            $image->setImageCompression(Imagick::COMPRESSION_ZIP);
            $image->setImageCompressionQuality($pngCompression * 10); // Imagick usa escala 0-100
        }

        // Guardar la imagen optimizada
        $image->writeImage($file);
        echo "Imagen procesada: " . $file . PHP_EOL;
    } else {
        echo "Imagen no procesada (dimensiones dentro de los límites): " . $file . PHP_EOL;
    }

    $image->clear();
}

// Función para procesar un directorio recursivamente
function processDirectory($dir) {
    $files = new RecursiveIteratorIterator(
        new RecursiveDirectoryIterator($dir, RecursiveDirectoryIterator::SKIP_DOTS),
        RecursiveIteratorIterator::SELF_FIRST
    );

    foreach ($files as $file) {
        if ($file->isFile()) {
            $extension = strtolower($file->getExtension());
            if (in_array($extension, ['jpg', 'jpeg', 'png'])) {
                optimizeImage($file->getPathname());
            }
        }
    }
}

// Ejecutar el proceso
processDirectory($dir);

echo "Proceso completado." . PHP_EOL;

Eficacia de la optimización de las imágenes

Aumentará la eficacia si:

• tienes imágenes demasiado grandes
• o decides poner un máximo de resolución ajustado (por ejemplo 1200px por 800px)
• calibras el script para una compresión JPEG por debajo de 75

Aviso a navegantes

• Si defines $processAllImages = true; entonces el script abrirá todas las imágenes y las volvera a guardar. Este es un proceso que produce una pérdida de calidad de imagen CADA VEZ QUE SE EJCUTA. Es decir, idealmente no lo ejecutes DOS VECES en la misma imagen!
   
• En cambio, sí puedes configurar sin riesgos una ejecución automática con esa opción en FALSE, y no hay problema con ello, porqué "lo único" que hará en cada ejecución es controlar que nunca haya imágenes con "demasiada resolución", pero las otras imágenes no las tocará 😁

Considerations

• Each time it's runned generate a backup like: backup_20240715_173357.sql.gz using year, month, day, hour, minute and second to build the filename.
• So it's a Gzipped file (it occupy about 7 times less)
• Let you specify how many backups to keep, so you can set this script on your server cronjobs (scheduled tasks) to be runned each X hours/days.
• You must put this file in the same root directory than .env file of Castopod
• To run it from the server cronjobs (run this: crontab -e) you can define a line like this for a daily backup:

@daily sh /home/podcast.myserver.com/backup_database.sh > /dev/null

• It took me about 3 hours of work to get this script running with these requirements, even with the help of Claude AI, which after 8 iterations in code generation, we managed to get it so complete!!

Bash script

You can download it here: castopod_backup_database.sh.zip

This is the content:

#!/bin/bash
# 
# caos30 & Claude AI - 2024-07-15
#
# - This script dumps the Castopod database
# - It also lets you specify how many backups to keep
# - So you can run it from your cron jobs
# - The DB connection is taken from the .env Castopod file

# Number of backups to keep
KEEP_BACKUPS=5

# Determine the script's directory
SCRIPT_DIR="$( cd "$( dirname "${BASH_SOURCE[0]}" )" && pwd )"

# Function to read variables from .env file
read_env() {
    ENV_FILE="${SCRIPT_DIR}/.env"
    if [ -f "$ENV_FILE" ]; then
        while IFS= read -r line || [[ -n "$line" ]]; do
            if [[ -z "$line" || "$line" == \#* ]]; then
                continue
            fi
            if [[ "$line" =~ ^([^=]+)=(.*)$ ]]; then
                key="${BASH_REMATCH[1]}"
                value="${BASH_REMATCH[2]}"
                value=$(echo "$value" | sed -e 's/^"//' -e 's/"$//')
                eval "${key//./_}='$value'"
            else
                echo "Warning: Malformed line in .env file: $line"
            fi
        done < "$ENV_FILE"
    else
        echo "The .env file does not exist in ${SCRIPT_DIR}"
        exit 1
    fi
}

# Read variables from .env file
read_env

# Assign variables
HOST="${database_default_hostname}"
DB="${database_default_database}"
USER="${database_default_username}"
PASS="${database_default_password}"
PREFIX="${database_default_DBPrefix}"

# Backup file name
BACKUP_FILE="${SCRIPT_DIR}/backup_$(date +%Y%m%d_%H%M%S).sql"
COMPRESSED_BACKUP_FILE="${BACKUP_FILE}.gz"

# Function to perform the backup
do_backup() {
    mysqldump --host="$HOST" --user="$USER" --password="$PASS" \
              --skip-lock-tables --no-tablespaces \
              "$DB" > "$BACKUP_FILE"
}

# Function to compress the backup
compress_backup() {
    gzip -f "$BACKUP_FILE"
}

# Function to cleanup old backups
cleanup_old_backups() {
    local backup_files=($(ls -t "${SCRIPT_DIR}"/backup_*.sql.gz 2>/dev/null))
    local count=${#backup_files[@]}

    if [ $count -gt $KEEP_BACKUPS ]; then
        echo "Cleaning up old backups..."
        for ((i=$KEEP_BACKUPS; i<$count; i++)); do
            echo "Removing old backup: ${backup_files[i]}"
            rm "${backup_files[i]}"
        done
    fi
}

# Change to the script's directory
cd "$SCRIPT_DIR"

# Cleanup old backups before creating a new one
cleanup_old_backups

# Perform the database dump
if do_backup; then
    echo "Backup created successfully: $BACKUP_FILE"
    
    # Compress the backup
    if compress_backup; then
        echo "Backup compressed successfully: $COMPRESSED_BACKUP_FILE"
        # Note: gzip has already removed the original file, so we don't need to do it manually
    else
        echo "Error compressing the backup."
        exit 1
    fi
else
    echo "Error performing database backup."
    exit 1
fi

# Final cleanup to ensure we don't exceed the limit
cleanup_old_backups

echo "Backup process completed."

Estaba hoy usando el chat de Claude para solicitarle ideas para monetizar un podcast usando IA (spoiler: es un proyecto que estoy cocinando), cuando sin pedirselo me generó un "artefacto" ("artifact" le llaman en inglés) a la derecha del chat con un gráfico del tipo "mapa mental". En realidad yo nunca le pedí que me hiciera un gráfico, pero la IA entendió que en el contexto de lo que le estaba comentando (mi idea de unir la IA con los contenidos de un podcast) tomó la iniciativa de generar un diagrama!!

Para que sepas de qué estoy hablando, te muestro a continuación otro ejemplo que he probado a continuación: le pedí directamente "Genera un diagrama ..." y esto es lo que generó!!

Trucos

• Después de que te haya creado el diagrama, le puedes pedir que le cambie lo que tú creas necesario: colores, disposición etc.
• Por ejemplo, le puedes pedir que en lugar de disposición "arriba a abajo" o construya con disposición "izquierda a derecha".
• Una vez creado el diagrama, puedes pulsar el botón "Code" y te mostrará que el diagrama está construido de forma "super-natural" con un código como este:

Mermaid

Vengo descubriendo que detrás de este "motor de construcción de diagramas" está Mermaid, que es una herramienta de código abierto para crear diagramas y gráficos de forma sencilla utilizando texto en formato similar a Markdown:

1. Facilidad de uso: Permite crear diagramas complejos escribiendo texto simple en lugar de dibujar manualmente.
2. Versatilidad: Soporta varios tipos de diagramas, incluyendo diagramas de flujo, diagramas de secuencia, gráficos Gantt, diagramas de clases, entre otros.
3. Basado en JavaScript: Es una herramienta basada en JavaScript que convierte el texto en diagramas visuales de forma dinámica.
4. Integración: Se puede integrar fácilmente en diversas plataformas y aplicaciones, como GitHub, GitLab, Confluence y más.
5. Editor en línea: Cuenta con un editor en vivo (Mermaid Live Editor) que permite crear y visualizar diagramas en tiempo real.
6. Aplicaciones en educación: Es útil para crear mapas conceptuales, mapas mentales y gráficos de flujo, lo que la hace valiosa en entornos educativos.
7. Colaboración: Facilita la colaboración en equipos, especialmente en entornos empresariales y de desarrollo de software.
8. Sintaxis inspirada en Markdown: Utiliza una sintaxis simple y fácil de aprender, similar a Markdown.
9. Exportación: Los diagramas creados pueden exportarse en varios formatos, como PNG, SVG, etc.
10. Código como diagrama: Permite mantener los diagramas como código, lo que facilita su versionado y mantenimiento.

Editor oficial gratuito de Mermaid.

Claude chat vs chatGPT

En fin, se nota que Claude se está esforzando en superar a competidores como chatGPT. Al día en el que estamos (Julio 2024) su modelo Sonnet 3.5 ya supera a los GPT4 disponibles de OpenAI, y su innovación de los artifacts que generan y ejecutan código interactivo y visual junto al chat, en tiempo real, está siendo un chatGPT killer en toda regla.

A día de hoy ambos generan código, aunque chatGPT no lo ejecuta en pantalla. Aunque es muy posible que implementen esto en su interfaz próximamente. De momento los de Claude (Anthropic) les han adelantado.

• https://claude.ai/
• https://chatgpt.com/

Ver presentación en CANVA

Guión de la presentación en CANVA

INTRODUCCIÓN ¿PORQUÉ AHORA TODOS HABLAN DE IA ?

Porqué llegaron las IA generativas

#RedesNeuronales #CrearContenidoOriginal #AprendizajeProfundo #GenerarTexto
#GenerarImágenes #GenerarAudio #GenerarVideo #DatosExistentes
#BecarioMuyMotivadoPeroBecario

Diferencias con otras ramas de la IA

#GeneraContenidoNuevo #EsUnReplicadorCasiPerfecto
#AprendePatronesYEstructurasSoloViendo #MultiModal
#SonModelosPorqueModelanLoQueVen #LLM

Evolución histórica y estado actual de la IA generativa

#OrigenesDecada1940 #VAEsAño2013 #TransformersAño2017 #GPTAño2018
#chatGPTAño2022NOV #ExpansiónReciente #AplicacionesGeneralizadas
#RevoluciónCreativa #PropiedadesEmergentesSorpresa

Principales modelos y aplicaciones

#GPT4 #ChatGPT #DALLE #StableDiffusion #Midjourney #Gemini #Bard #Perplexity
#ClaudeAnthropic #ModelosOpensource #LLamaDeMeta #MixtralFrancia #GeneraciónTexto
#GeneraciónImágenes #DiseñoProductos #MarketingPublicidad
#EntretenimientoVideojuegos #ExtraccionYResumenDeDocumentos
#GeneracionAutomatizadaDeContenidosPersonalizados #AutomatizacionDeAnalisisSemanticos

APLICACIONES DE LA IA GENERATIVA EN EL SECTOR INDUSTRIAL

DISEÑO Y DESARROLLO DE PRODUCTOS :

• Generación de ideas y conceptos innovadores
• Optimización de diseños basada en restricciones
• Creación de prototipos virtuales y simulaciones

CONTROL DE CALIDAD :

• Elaboración de planes en base a normas del sector
• Análisis predictivo de fallos y mantenimiento
• Análisis y generación de informes

GESTIÓN DE RECURSOS HUMANOS :

• Soporte en procesos de reclutamiento y selección
• Generación de contenidos formativos personalizados
• Asistentes virtuales para consultas de empleados

GESTIÓN DE INVENTARIOS Y CADENA DE SUMINISTRO :

• Predicción de demanda y optimización de stocks
• Generación automática de descripciones de productos
• Soporte en negociaciones con proveedores

EJEMPLOS PRÁCTICOS Y EJERCICIOS

1. ALGO SENCILLO PARA EMPEZAR: REDACTAR UNA CARTA FAMILIAR

2. GENERAR IDEAS INNOVADORAS PARA NUEVOS PRODUCTOS USANDO CHATGPT

3. ANALIZAR UN CURRÍCULUM Y GENERAR UN INFORME CON CHATGPT

4. IDEAR UN PLAN PARA MEJORAR LA SEGURIDAD SEGÚN NORMAS OFICIALES CON PERPLEXITY.AI

5. GENERAR UN PLAN DE “ONBOARDING“ PERSONALIZADO CON PERPLEXITY.AI

6. ANALIZAR UN DOCUMENTO DE EXCEL CON DATOS TABULADOS

7. REDACCIÓN DE CORREOS DIFÍCILES A CLIENTES O PROVEEDORES EN INGLÉS!

8. GENERAR MÉTODO DE CÁLCULO DE COSTOS DE PRODUCCIÓN Y SUGERENCIAS PARA POWER BI

9. ANALIZAR DATOS ESTADÍSTICOS EN IMÁGENES Y CONVERSIÓN DE MONEDAS

10. ANALIZAR DATOS CONTABLES EN TABLA PDF Y GENERAR UN INFORME EN WORD

CONSIDERACIONES ÉTICAS Y RETOS

• Sesgos y falta de transparencia en los modelos
• Responsabilidad y Rendición de Cuentas
• Propiedad intelectual del contenido generado
• Privacidad y seguridad de los datos
• Impacto en el empleo y desplazamiento de tareas

Masterclass IA para New Concept Technology

Hermosillo, Sonora, México - Junio 2024

Chez IMASDEWEB, nous avons développé le module Stocktransfers pour le projet open source Dolibarr ERP/CRM en PHP. Sur cette page, nous présentons son fonctionnement, que vous soyez déjà utilisateur ou que vous envisagiez de l'utiliser.

Dolistore: https://www.dolistore.com/fr/modules/866-Stock-transfers.html

Note: english version of this user guide.

Nota: versión en español de esta guía.

Présentation

L'objectif de ce module est d'offrir une interface plus conviviale que celle native de Dolibarr pour effectuer des transferts de produits d'un entrepôt à un autre (entrepôts de notre entreprise). Si le module Achats (également d'IMASDEWEB) est installé, un bouton apparaît en cas de rupture de stock pour le transfert, permettant la création d'un nouveau processus d'achat pour le stock manquant.

Le module permet le téléchargement d'un fichier PDF avec la liste des produits à transférer et un espace en bas pour les trois signatures de l'expéditeur, du transporteur et de la personne qui recevra les produits dans l'entrepôt de destination, comme c'est habituel dans ce type de mouvement de marchandises.

Installation

Vous devez déjà savoir qu'installer un module dans Dolibar est aussi simple que :

Une fois que vous l'avez fait, il apparaîtra dans la configuration des modules, dans le panneau Dolibarr du groupe Gestion des Produits (PM), sous le nom Produits - stocktransfers:

Accès au module

Une fois activé, vous pouvez y accéder de deux manières possibles:

• en visitant la section Produits, puis dans le menu latéral gauche, vous verrez les deux options pour ce module: Transferts / Nouveau transfert
  
                          
   
• ou bien, depuis le Tableau de bord, où vous trouverez une boîte avec les 5 derniers transferts de stock.
  
           
   

Liste des transferts

Il n'y a pas grand-chose à dire sur la liste des transferts. Ce qui est le plus intéressant, c'est d'expliquer les valeurs possibles pour la colonne État:

Création d'un transfert

La fiche d'un transfert à l'état Brouillon ressemblerait à celle illustrée ci-dessous:

• En haut, il y a une première partie descriptive où les champs obligatoires sont toujours l'Entrepôt d'origine et l'Entrepôt de destination. Optionnellement, ce mouvement de stock peut être associé à un projet que nous avons dans Dolibarr (si le module Projets est activé). Les dates de départ et d'arrivée seront obligatoires lorsque nous voudrons changer l'état à Envoyé ou Reçu, respectivement.
   
• À tout moment, nous pouvons télécharger un PDF qui sera utile pour que le transporteur l'ait avec lui et le signe lors de la livraison et de la réception de la marchandise.
   
• Tant que l'état reste en Brouillon, nous pourrons ajouter plus de produits au transfert.

Rupture de stock

La colonne Stock indique la quantité de produit disponible dans l'entrepôt d'origine. Dans le cas où elle est inférieure à celle que nous devons transférer, un symbole d'alerte apparaîtra dans cette colonne. De plus, tant que le stock n'est pas suffisant pour tous les produits, nous ne pourrons pas changer l'état du transfert à Envoyé.

Comment résoudre le problème de rupture de stock? Cela dépendra du cas:

• Si la quantité de stock indiquée dans cette colonne ne correspond pas à celle réellement disponible dans l'entrepôt, nous devrons effectuer une correction de stock en suivant la fonction native de Dolibarr à cet effet.
   
• Mais si cette quantité de stock est correcte, alors nous devrons faire des achats pour augmenter notre stock dans l'entrepôt d'origine et pouvoir procéder au transfert.

Dans tous les cas, le module Stocktransfers facilite la tâche. Dans le premier cas, nous voyons qu'il y a un bouton pour chaque ligne de produit avec le symbole d'alerte qui , lorsqu'on le presse, ouvre dans un autre onglet du navigateur le formulaire Dolibarr pour créer une correction de stock pour ce produit:

Nous devrons indiquer l'entrepôt dans lequel nous voulons corriger le stock, sélectionner "Ajouter" dans la liste déroulante et indiquer le nombre de pièces à ajouter. Attention: nous devons nous référer au tableau qui apparaît en bas du formulaire, car il indique le nombre actuel de pièces pour chaque entrepôt. Dans notre exemple : 37. Ainsi, si après avoir fait un inventaire dans l'entrepôt, il s'avère qu'il y a 57 pièces, nous devons faire une correction pour ajouter la différence: 20 pièces, dans notre exemple.

Une fois que nous avons généré cette correction de stock, nous devrons rafraîchir la page du transfert pour mettre à jour les chiffres de stock.

Faire des achats

Comme mentionné précédemment, si la raison de la rupture de stock n'est pas une erreur, mais que nous avons simplement besoin d'acheter quelques pièces avant de pouvoir les transférer vers l'autre entrepôt, alors le module StockTransfers facilite la tâche si le module Achats (également d'IMASDEWEB) est installé. Si ce n'est pas le cas, il vous suffira de suivre les procédures habituelles de Dolibarr pour passer des commandes à vos fournisseurs afin de vous approvisionner.

Si le module Achats est installé, vous verrez le bouton "Faire des achats":

En le cliquant, un "processus d'achat" sera généré dans le module Achats, incluant tous les produits pour lesquels nous avons un manque de stock pour ce transfert, avec la différence entre les quantités à transférer et le stock que nous avons en entrepôt. Tout cela en un seul clic:

De plus, comme c'est habituel dans le module Achats, il affichera déjà les prix existants des fournisseurs qui nous fournissent ces produits, prêt à demander des devis si nécessaire, ou à passer les commandes.

Marchandise envoyée, marchandise reçue

Une fois que nous avons le stock nécessaire de tous les produits à transférer, le bouton "Changer l'état en Envoyé" deviendra visible. Il suffit de le presser pour changer l'état de notre transfert. Le système nous obligera à remplir la "Date de départ". Une fois que l'état est passé à "Envoyé", le bouton "Changer l'état en Reçu" apparaîtra, nous obligeant également à remplir la "Date d'arrivée".

Dans tous les cas, il ne sera plus possible d'ajouter de nouveaux produits, bien que le bouton "Revenir à l'état Brouillon" soit toujours disponible.

Personnaliser le tableau des produits

Chaque entreprise organise ses produits de manière légèrement différente. Pour cette raison, vous pouvez choisir les colonnes à afficher dans le tableau des produits d'un transfert :

• Propriétés uniques pour ce transfert de produit : lot, note
• Propriétés natives du produit dans Dolibarr : note privée/publique, prix, coût, etc.
• Propriétés supplémentaires du produit : celles que vous avez définies dans la configuration du module Produits.

PDF pour le transfert

En appuyant sur le bouton "Télécharger le PDF", un document PDF est généré en temps réel, comme celui que nous voyons ci-dessous, qui est généralement imprimé et porté sur soi pour être signé par les personnes qui livrent la marchandise, le destinataire et le transporteur. Ce document reprend certaines des données figurant dans le formulaire, si elles ont été remplies, telles que le projet, le nom du transporteur et le nombre de colis.

Dans la section Paramètres du module Stocktransfers, vous pouvez configurer en détail l'apparence et le contenu du PDF :

• en-tête et pied de page du document
• colonnes de produits à afficher
• signatures à afficher à la fin du document

Site Web de type DEMO

Si vous souhaitez essayer le module Stocktransfers, contactez-nous et nous vous fournirons volontiers le nom d'utilisateur et le mot de passe. Nous ne les mettons pas ici publiquement pour éviter des attaques inutiles.

→ Formulaire de contact

Chez IMASDEWEB, nous avons développé le module "Purchases" (Achats) pour le projet open source Dolibarr ERP/CRM en PHP. Dans ce guide, nous présentons son fonctionnement, que vous soyez déjà utilisateur ou que vous envisagiez de l'utiliser.

Nota: versión en castellano de este manual de usuario.

Note: english version of this user guide.

Présentation

Ce module Achats a été développé comme un assistant permettant de réaliser de manière rapide et simple l'achat de X produits:

En fin de compte, une interface plus facile et plus agile à utiliser qui permet de faire la même chose que vous pouvez déjà faire avec l'interface native de Dolibarr, mais de manière beaucoup plus confortable. Bien, en fait, dans Dolibarr, il serait très complexe de comparer les prix de chaque produit pour chaque fournisseur, puis d'assembler les différentes commandes. Et évidemment, il n'y a aucun moyen de capturer les prix dont vous avez besoin.

Installation

Vous devez déjà savoir qu'installer un module dans Dolibar est aussi simple que:

Une fois cela fait, il apparaîtra dans la configuration des modules, dans le panneau de Dolibarr. Dans le cas de ce module, vous le verrez dans le groupe Gestion des Relations avec les Fournisseurs (SRM), sous le nom Achats.

Accès au module

Une fois activé, nous y accéderons de deux manières possibles:

• en visitant la section Commerciale, puis dans le menu latéral gauche, nous verrons les deux options pour ce module : Nouvel achat / Liste
  
                          
   
• ou bien, depuis le Tableau de bord de démarrage, où nous aurons une boîte avec les 5 derniers achats.
  
           
   

Liste des achats

Il n'y a pas grand-chose à dire sur la liste des processus d'achat. Le plus intéressant est d'expliquer les valeurs possibles pour la colonne État:

Édition d'un achat

La fiche d'un achat en cours se présenterait comme celle montrée ci-dessous (cliquez pour ouvrir dans un nouvel onglet du navigateur et voir le détail):

• En haut, il y a un bref formulaire avec juste les informations descriptives minimales, parmi lesquelles il vaut la peine de souligner que nous pouvons lier l'achat à un projet que nous avons créé dans Dolibarr, si nous avons activé le module Projets.
   
• Sous ce bref formulaire, il y a une barre de boutons d'action, pour enregistrer des modifications dans ledit formulaire, pour envoyer par courriel des demandes de devis aux fournisseurs sélectionnés, pour créer des commandes ou pour supprimer l'achat:
  
  
   
• Sous ces boutons, nous avons la liste des produits : un tableau où chaque ligne contiendra un produit à acheter et à son tour un tableau comparant les prix d'un ou plusieurs fournisseurs. Dans la première ligne, nous avons l'état de ce produit : 1) sans prix, 2) avec prix mais sans commande, 3) une commande créée.
  
  
  
  De plus, tant que nous n'avons pas passé la commande, nous pouvons changer la quantité que nous avons besoin d'acheter. Les boutons situés à la fin de la ligne nous permettent de : retirer le produit de ce processus d'achat, enregistrer les modifications (si nous modifions une valeur dans l'une des boîtes de texte de cette ligne du tableau), accéder à la page de gestion des stocks du produit dans Dolibarr.
  
  Note: il est important de comprendre que nous pouvons changer les valeurs des boîtes de texte de ce tableau de prix, c'est-à-dire changer la quantité du produit, le prix unitaire ou le minimum d'unités que le fournisseur exige que nous achetions, et la page recalculera automatiquement en temps réel le prix final dans la dernière colonne, dans la monnaie de notre entreprise, mais ces changements ne seront pas sauvegardés automatiquement sur le serveur (!!) donc si nous voulons sauvegarder les changements, nous devons appuyer sur le bouton d'enregistrement des modifications.
  
   
• Examinons en détail le tableau de comparaison des prix. La partie contenant les boîtes pour éditer les prix est particulièrement intéressante:
  
  
  
  Couleurs: les zones de texte apparaîtront en vert si le fournisseur concerné a répondu à la demande de devis (nous verrons plus bas comment faire cette demande) et a confirmé avoir en stock ce produit. En revanche, elles apparaîtront en orange si la demande a déjà été envoyée à ce fournisseur mais qu'il n'a pas encore répondu. Finalement, elles seront en rouge lorsque le fournisseur aura répondu et indiqué qu'il ne peut pas fournir ce produit. Dans ce dernier cas, le contrôle circulaire pour Créer une commande (dernière colonne du tableau des prix) sera désactivé et remplacé par une icône qui affichera le commentaire laissé par le fournisseur.
  
  Calculs: cela dit, avec ce module Achats et le patch Dolibarr suggéré, nous pouvons gérer "normalement" les prix des fournisseurs dans d'autres monnaies (première colonne) et en même temps pouvoir comparer le prix final (avant-dernière colonne) dans notre propre monnaie (MXN dans mon cas). Gardez à l'esprit que pour calculer le Prix final, le Prix unitaire est multiplié par le Minimum d'unités ou par le nombre d'Unités (le plus élevé de ces deux valeurs est pris). Par exemple, dans le cas du deuxième fournisseur de l'image (celui en orange), il exige d'acheter un minimum de 5 unités, donc nous multiplions le prix unitaire par 5 pour obtenir le Prix final. Tandis que pour les autres fournisseurs, nous multiplions par 4, qui est le nombre d'unités dont nous avons besoin.
  
  Changements de monnaie: les changements de monnaie (c'est-à-dire, combien de MXN sont un USD) sont pris en temps réel par le module Achats sur le site web du Fonds Monétaire International. En réalité, pour ne pas appeler trop souvent ce site externe et pour ne pas ralentir le chargement de cette page de devis, une consultation de ce site est faite seulement toutes les 12 heures. En définitive, nous pouvons être assez sûrs que le calcul entre monnaies est suffisamment ajusté à la réalité, et fonctionne totalement de manière automatique et en arrière-plan. Au fait, vous devez aussi savoir que une fois que nous passons la commande d'un produit, le module Achats enregistre les changements de monnaie à ce moment-là, et à l'avenir, lorsque vous reviendrez consulter la fiche de cet achat, il vous montrera le tableau comparatif des prix conformément aux changements de monnaie au moment de passer la commande. Tant qu'une commande n'est pas créée, les changements seront mis à jour, donc aujourd'hui vous pouvez voir un prix de $11USD en pesos mexicains différent de celui que vous voyiez hier dans le même tableau, évidemment parce que chaque jour les taux de change fluctuent.
  
  
  
  
  Delete button: when clicked, it will show us a dialog box asking if we want to only remove this price from this comparison, or if we also want to eliminate the price of this supplier for this Dolibarr system product. If you are sure that the supplier is never going to sell you that product or simply has never given you a price, it is advisable that you choose the second option.
  
  Edit price button: will open in a new tab of the browser the usual Dolibarr form for editing the price of this supplier for this product. What is useful for us? Well, because there we have more editing options than in our comparison table. For example, there we can edit the VAT to apply for this product.
  
  Email button: is a link of the type "mailto" and therefore will open our mailing program that we have configured on our machine, by filling in the recipient's box with the email address of the supplier in question. For this reason, this button does not appear when in Dolibarr we have not filled in the email field for the supplier in question.
  
  
  
  Créer une commande: finalement, lorsque nous aurons les prix que nous attendions des différents fournisseurs, ou lorsque nous devrons passer une commande, nous cocherons la case circulaire de la dernière colonne Créer une commande. En réalité, la manière de procéder est la suivante : pour chacun des produits que nous avons inclus dans cet achat, nous marquerons les offres des fournisseurs qui nous semblent les plus appropriées. Et sans avoir besoin d'avoir fait ce choix pour tous les produits, nous cliquerons sur le bouton Créer des commandes situé au-dessus du tableau des produits et la page déploiera un nouveau tableau avec les commandes à créer pour chaque fournisseur, s'il y a plusieurs fournisseurs sélectionnés, et les produits à commander à chacun:
  
  
  
  Si nous cliquons à nouveau sur le bouton Créer des commandes, la boîte de dialogue se cachera, et si nous le faisons à nouveau, elle réapparaîtra mais mise à jour. C'est-à-dire que si entre les deux clics nous avons changé notre sélection de fournisseur pour un produit, cette liste de commandes/fournisseurs sera mise à jour.
  
  Lorsque nous cliquons sur l'un des boutons Créer une commande dans la colonne Action, le module Achats créera la commande correspondante en mode brouillon, en remplissant les informations du fournisseur, du taux de change (si elle est dans une monnaie différente de celle de notre entreprise) et la liste des produits et quantités que nous devons acheter. Le nouveau bon de commande s'ouvrira dans un nouvel onglet du navigateur.
  
  Une fois une commande créée de cette manière, en actualisant cette page d'achat, nous verrons que le tableau comparatif des prix des produits commandés a été désactivé et un bouton apparaît, nous donnant accès à la fiche de la commande en question:
  
  
  
   

Demander des devis aux fournisseurs

Cela dit, nous devons procéder de cette manière:

1. Une fois que dans notre achat, nous avons préparé la liste des produits à acheter
    
2. Le système aura automatiquement ajouté les prix des fournisseurs déjà présents dans notre système pour ces produits
    
3. Optionnellement, nous pouvons ajouter plus de fournisseurs à un produit spécifique (vous pouvez indiquer un prix de "0" si vous n'avez pas encore le prix de ces fournisseurs pour ce produit)
    
4. Ensuite, en cliquant sur le bouton Envoyer des e-mails demandant un devis, une boîte de dialogue s'affichera, d'où avec un seul clic sur le nouveau bouton Envoyer des e-mails demandant un devis, ces e-mails seront envoyés, au moins aux fournisseurs pour lesquels nous avons une adresse e-mail définie. Dans le cas de l'image ci-dessous, seulement le premier.
   
   
    
5. Dans cet e-mail que recevront les fournisseurs, il leur est spécifié DANS LEUR LANGUE (tant que le module Achats est traduit dans cette langue) la liste des produits que nous souhaitons faire chiffrer et ils sont invités à visiter un formulaire web où ils peuvent eux-mêmes saisir les prix et les conditions.
    
6. Nous pouvons visiter ce formulaire web de saisie des prix en cliquant sur les boutons Formulaire de la boîte de dialogue précédente. Chaque formulaire est unique pour chaque achat et fournisseur, et les paramètres de l'URL sont cryptés pour éviter qu'ils puissent manipuler l'URL et accéder aux prix d'autres fournisseurs.
   
   Il est recommandé que si le fournisseur en question n'a pas d'e-mail ou nous transmet ses prix par un autre moyen (téléphone, WhatsApp, courrier, etc.), nous utilisions son formulaire de saisie pour introduire ses prix. De cette façon, nous les verrons marqués en vert (ou en rouge, si un produit n'est pas disponible) dans le tableau comparatif des prix de ce module.
    
7. Voici à quoi ressemble ce formulaire web de saisie des prix pour le fournisseur:
   
   
   
   Il n'a pas besoin de beaucoup de commentaires, car il est conçu pour être auto-explicatif afin que les fournisseurs se sentent le plus à l'aise possible. Si nous cliquons sur le bouton Informations supplémentaires, le fournisseur a la possibilité d'ajouter un commentaire général sur cette "éventuelle commande", et peut également nous fournir des informations de contact plus complètes. Mais c'est une étape facultative:
   
   
   
   Note: au moment où nous passons une commande incluant certains de ces produits, que ce soit pour ce fournisseur ou pour un autre de notre liste, l'introduction de prix dans les lignes correspondantes de ce tableau des prix sera bloquée, si le fournisseur entre tardivement ou visite ce formulaire ultérieurement.
    
8. aAaprès que le fournisseur ait appuyé sur le bouton Envoyer de ce formulaire de devis, le système enverra un e-mail à l'utilisateur de Dolibarr qui a créé cet achat dans le système, avec les prix et les commentaires du fournisseur. Informations qui, par ailleurs, sont affichées dans le tableau comparatif des prix du module. Ces prix modifient également les prix que nous avons stockés dans Dolibarr pour ces produits et ce fournisseur.

Site web de type DÉMO

Si vous êtes intéressé à tester le module Achats sur un Dolibarr 5.0.8, contactez-nous et nous serons heureux de vous fournir le nom d'utilisateur et le mot de passe. Nous ne les publions pas ici pour éviter des attaques inutiles.

→ Contact form

Nota: versión en español de esta guía de usuario.

Note: english version of this user guide.

Accès à la DÉMO

À quoi sert ce module

Une fois installé et activé, le module ajoutera une troisième zone de texte sur la page de connexion:

Considérations pour remplir cette troisième zone:

• Il est OPTIONNEL de la remplir: elle ne sera validée que si l'utilisateur qui essaie de se connecter a activé l'utilisation de TOTP 2FA. Pour les autres utilisateurs, l'authentification continuera de se faire uniquement avec le nom d'utilisateur et le mot de passe.
   
• Vous devez entrer un code TOTP de 6 chiffres généré par des applications telles que Aegis (Android) ou d'autres applications multiplateformes comme Authy ou Google Authenticator.
   
• Ce système d'authentification dépend du fait que le serveur sur lequel Dolibarr est installé et l'appareil sur lequel l'utilisateur a installé l'application de génération de codes aient leur horloge interne synchronisée avec l'heure sur internet. Normalement, cela n'est pas exact, et le code généré par l'application est en avance ou en retard par rapport à celui du serveur, donc ne vous inquiétez pas si vous ne réussissez pas à vous connecter du premier coup. Dans ces cas, essayez d'utiliser le code d'accès au début de la période de 30 secondes que vous donne l'application, ou bien à la fin. Normalement, cela fonctionnera à l'une de ces deux extrémités. Si ce n'est pas le cas, vous devrez vérifier lequel n'est pas correctement réglé : votre application ou votre serveur Dolibarr (généralement, le problème vient de l'application ou de l'heure du téléphone sur lequel l'application est installée).

Accès en recevant le code par courriel

Cela est possible depuis la version 1.7 (Déc. 2022). C'est une alternative d'utilisation que chaque utilisateur doit activer s'il souhaite l'utiliser. Une fois activé, pour se connecter, il faut:

1. saisir le nom d'utilisateur et le mot de passe corrects, et laisser vide la case du code

2. en cliquant sur le bouton CONNEXION, le système actualisera le formulaire d'accès. Si les identifiants étaient corrects, il affichera alors un lien pour envoyer l'email dans ces conditions :

   a) l'utilisateur a activé l'envoi par email de ce code (c'est une option que chaque utilisateur peut activer/désactiver)
   b) ou bien l'administrateur a configuré le module pour exiger TOUJOURS de tous les utilisateurs l'utilisation du deuxième facteur et a également activé l'option d'envoi par email pendant la « période de grâce », pendant que l'utilisateur n'a pas encore configuré son TOTP.

3. en cliquant sur ce lien, le système envoie un code temporaire de 6 chiffres au courriel de l'utilisateur et le confirme à l'écran
4. après avoir reçu le courriel, il faut saisir le code reçu avant 30 secondes et appuyer de nouveau sur le bouton CONNEXION

Évidemment, ce mécanisme est également utile pour pouvoir accéder lorsque l'on n'a pas accès au générateur TOTP. Mais il sera aussi le mécanisme préféré de nombreux de vos utilisateurs, qui ne sont pas encore habitués à utiliser une application génératrice de codes TOTP. 😅

Activer la clé TOTP d'un utilisateur

Nous irons à notre fiche utilisateur (personne ne peut l'activer pour nous) et là, nous verrons un bouton ACTIVER:

En le pressant, le navigateur demandera au serveur une clé TOTP de 16 chiffres et son code QR correspondant. Vous devez ouvrir votre application de génération de codes et chercher l'option "ajouter un nouveau compte". Si c'est une application mobile, elle vous donnera normalement l'option de "scanner un code QR", mais si ce n'est pas le cas, vous pouvez toujours copier manuellement la clé de 16 chiffres:

Pour que cette clé soit LIÉE À VOTRE UTILISATEUR, vous devez utiliser cette application de génération de codes pour prendre votre premier code TOTP et le valider (voir ci-dessus). Vous pouvez essayer autant de fois que nécessaire. Si vous ne parvenez pas à valider aucun code, vérifiez alors la configuration horaire de votre appareil (ou peut-être aussi de votre serveur, bien que ce soit étrange qu'un serveur soit "hors du temps").

Une fois que vous avez validé un code, la clé devient LIÉE:

À partir de ce moment, si vous ou quelqu'un d'autre essaie d'accéder à Dolibarr avec votre nom d'utilisateur et votre mot de passe sans saisir un code TOTP correct, il ne pourra plus accéder à Dolibarr:

Vous pouvez définir votre propre clé secrète

Particulièrement utile pour ceux d'entre nous qui administrent plusieurs instances de Dolibarr est la possibilité d'utiliser la même clé secrète dans toutes ces instances pour le 2FA. Pour cela, le module facilite les choses de la manière suivante (à partir de la version 1.2) : lorsque nous essayons d'activer le 2FA, il génère un jeton aléatoire et affiche son code QR, comme nous l'avons vu ci-dessus. À ce moment, nous devons appuyer sur le bouton avec le crayon qui se trouve au-dessus du code QR, à côté du jeton générateur:

Et ainsi nous pourrons éditer manuellement la clé secrète:

En appuyant sur le bouton avec le code QR (à sa droite) ou en faisant ENTRÉE, le processus de validation et d'activation continue comme dans le cas ci-dessus:

Considérations de sécurité

Veuillez prendre en compte ce qui suit:

• Chaque utilisateur doit activer sa propre clé TOTP de 16 chiffres. Personne ne peut le faire à sa place, pas même un utilisateur administrateur.
• Les utilisateurs administrateurs peuvent voir quels utilisateurs ont activé leur clé TOTP, mais ils ne peuvent pas connaître la clé elle-même. Cela permet d'éviter les risques d'usurpation d'identité lors de l'accès à Dolibarr.
• Cependant, un utilisateur administrateur peut DÉSACTIVER la clé TOTP d'autres utilisateurs. Cette procédure est mise en place comme un mécanisme simple pour désactiver les clés TOTP dans le cas où un utilisateur perd sa clé et a besoin d'accéder au système pour en générer une autre. Bien entendu, tous les utilisateurs peuvent changer leur clé à tout moment, tant qu'ils ont accès au système.

Voici comment cela est indiqué dans la Liste des utilisateurs qui ont activé une clé:

Bien que si un utilisateur accède à la fiche d'un autre utilisateur (même s'il est administrateur), il verra la clé semi-masquée:

Désactivation de la clé TOTP de votre utilisateur

En revanche, lorsqu'on visite sa propre fiche utilisateur, on peut parfaitement voir sa clé et même scanner le code avec d'autres applications:

Pour désactiver la clé TOTP active, il faut Modifier ma fiche utilisateur:

Note: en fait, si un administrateur accède à Modifier la fiche d'un autre utilisateur, il verra également le même bouton DÉSACTIVER.
 

Filtrer les visiteurs selon leur pays d'origine

Cette amélioration a été introduite avec la version 1.4 et vise à limiter l'accès à votre Dolibarr depuis n'importe quelle IP qui n'est pas dans le pays que vous définissez. Pour cela, dans la section de configuration, vous pouvez définir une LISTE BLANCHE DE PAYS.

La première chose que vous devez faire (si vous avez une version de PHP 8 ou supérieure) est de télécharger la base de données "GeoLite2" de MaxMind, qui est gratuite. Vous devez vous inscrire et la télécharger.

https://dev.maxmind.com/geoip/geolite2-free-geolocation-data

Le module l'installera dans Dolibarr et activera le module natif de géolocalisation, dont nous avons besoin pour consulter cette base de données et pouvoir filtrer les adresses IP par pays d'origine.

Évidemment, au visiteur détecté venant d'un autre pays, il ne sera pas mentionné le pays depuis lequel il doit accéder. L'idée est de rendre la tâche difficile aux intrus indésirables et aux bots. Autrement dit, cette mesure seule constitue déjà une barrière intéressante pour une large majorité de bots qui explorent aveuglément où s'introduire. Évidemment, si quelqu'un vous lance une attaque, il saura comment découvrir votre pays et utilisera un VPN pour essayer d'entrer.

Si vous laissez cette liste de pays vide, alors le module ne tiendra simplement pas compte de l'IP de ceux qui tentent d'accéder.

Note technique: il est nécessaire d'avoir installé et activé sur votre serveur le module PHP mod_geoip (par exemple le paquet php7.4-geoip dans le cas de PHP 7.4). Si vous ne l'avez pas installé, alors le module vous l'indiquera dans cet onglet ci-dessus "Configuration IP".

Listes blanches d'IP de confiance (PARE-FEU)

Depuis la version 22.1, vous pouvez l'utiliser comme PARE-FEU : vous pouvez définir quelques listes d'IP et de plages d'IP de confiance pour lesquelles vous pouvez soit les exempter de saisir le second facteur lors de la connexion, soit interdire la connexion à tout visiteur qui ne provient PAS de ces IP.

Comment ça marche ? Dans la section de configuration du module, dans l'onglet "Filtrage par IP", vous disposez de deux zones de texte brut pour définir une liste d'IP ou de plages d'IP séparées par des virgules.

Quelle IP Dois-je Utiliser ?

Le module affiche votre adresse IP actuelle en haut des paramètres. C'est l'adresse IP que votre serveur détecte lorsque vous vous connectez à Dolibarr—et c'est exactement ce que vous devez saisir dans la liste blanche.

Important : Votre "IP actuelle" peut différer selon votre configuration réseau :

• Accès public/Internet : Vous verrez votre IP publique (ex., 217.71.206.235)
• Réseau local (LAN) : Vous verrez une IP privée (ex., 10.0.8.28, 192.168.1.x)
• VPN/SDN (ZeroTier, Tailscale, etc.) : Vous verrez l'IP de réseau virtuel assignée par votre VPN

Toujours vérifier l'IP affichée dans l'interface du module avant de configurer votre liste blanche pour éviter de vous bloquer.

Utilisation de Plages d'IP pour Plus de Flexibilité

Au lieu d'ajouter des IP individuelles, vous pouvez définir des plages d'IP pour couvrir plusieurs appareils ou des IP dynamiques (utile avec DHCP). Le module supporte trois formats :

• IP unique : 203.0.113.10
  Seulement cette IP exacte
   
• Notation CIDR : 10.0.8.0/24
  Toutes les IP de 10.0.8.0 à 10.0.8.255 (256 adresses)
   
• Plage de–à : 203.0.113.10-203.0.113.50
  Toutes les IP entre ces deux adresses (41 IP)
   
• Combinaison : 200.1.2.3, 200.1.2.4, 203.0.113.0/24
  Plusieurs IP/plages séparées par des virgules

Deux Listes Blanches Séparées

Le module fournit deux listes d'IP indépendantes :

1. Restreindre l'accès à Dolibarr : Bloque les tentatives de connexion depuis des IP non listées (mode pare-feu)
2. Ne pas demander 2FA : Ignore l'authentification à deux facteurs pour les IP de confiance (mode commodité)

Si vous laissez les deux listes vides, le module ne filtrera aucune IP—tout le monde peut accéder normalement.

Se souvenir d'un appareil comme sûr

Depuis la version 1.5, le module vous permet de définir une période de temps (1 jour/semaine/mois) pendant laquelle il se souviendra de votre navigateur web et ne vous demandera pas à nouveau le code TOTP à 6 chiffres. Vous pouvez également définir que le code TOTP soit TOUJOURS demandé. En fait, c'est l'option par défaut.

Bien que ce soit une nouvelle caractéristique qui améliore grandement l'usabilité des codes TOTP, surtout lorsque vous gérez plusieurs instances de Dolibarr tout au long de la semaine, vous devez vous rappeler que PLUS DE CONFORT signifie toujours MOINS DE SÉCURITÉ... malheureusement, ils sont toujours inversement proportionnels. Donc, je vous recommande d'évaluer l'environnement de sécurité depuis lequel vos utilisateurs accèdent avant de décider d'assouplir l'utilisation des TOTP.

De plus, comme ce système fonctionne GRÂCE AUX COOKIES, il cessera de fonctionner si vous visitez votre Dolibarr depuis un onglet en mode incognito ou si vous supprimez les cookies dans votre navigateur après votre visite. Ce que je vous recommande si vous n'êtes pas sur votre propre machine, par exemple. Le module peut se souvenir d'autant d'appareils que l'utilisateur souhaite utiliser. Ainsi, en accédant temporairement depuis un onglet incognito sur un nouvel appareil, le module n'oubliera aucun de vos autres appareils déjà utilisés.

Bien sûr, toujours limité au temps d'expiration que vous définissez dans la configuration du module:

Alors, comment dois-je accéder à Dolibarr maintenant?

Si vous avez défini une période pour se souvenir des appareils, alors ma recommandation est de vous connecter de la manière suivante:

En résumé: vous devez seulement entrer l'utilisateur et le mot de passe et appuyer sur ENTRÉE. Et de temps en temps (lorsque la période de mémorisation expire), le code TOTP à 6 chiffres vous sera demandé. Pratique, n'est-ce pas?

Question fréquente

Que faire si vous vous retrouvez bloqué

Si vous vous êtes retrouvé "bloqué hors de votre Dolibarr" pour l'une de ces raisons :

• après avoir configuré ces options d'IP ou de pays de manière trop stricte
• ou peut-être après avoir perdu l'application génératrice de jetons à 6 chiffres

Alors la solution est "facile" :

1. connectez-vous à votre serveur via FTP/SSH et sortez le répertoire du module (normalement dans /htdocs/custom/totp2fa) hors de /htdocs
2. accédez à nouveau à votre Dolibarr avec votre compte utilisateur, et vous verrez qu'il ne vous demande pas le second facteur
3. replacez le répertoire du module à sa place
4. et si vous ne vous êtes pas déconnecté de Dolibarr, vous pouvez aller dans la configuration du module et corriger ce qui bloquait votre accès

Remarque : n'ayez pas peur de "perdre des informations" en effectuant ces déplacements du répertoire du module, car vous n'affectez pas la base de données, donc vous ne perdrez pas les configurations de tous vos utilisateurs.

Accès à la DÉMO