Tu primer proyecto en el FabLabTon premier projet au FabLab

Vamos a crear un formulario conectado a una base de datos a partir de una situación real de empresa. Primero conocerás el problema, luego te guiamos paso a paso dentro de la plataforma AiMaker, y al final te toca a ti crear algo propio. Nous allons créer un formulaire connecté à une base de données à partir d'une situation réelle d'entreprise. D'abord tu découvriras le problème, puis nous te guiderons pas à pas dans la plateforme AiMaker, et à la fin ce sera à toi de créer quelque chose de personnel.

Registro de recepción de leche en una fábrica de quesosRegistre de réception du lait dans une fromagerie

Lácteos La Pradera fabrica quesos frescos, madurados y otros derivados lácteos. Cada día recibe leche cruda de distintos proveedores, que llega en camiones cisterna. Hoy, el personal de recepción anota cada llegada a mano en una planilla de papel que luego se archiva. Lácteos La Pradera fabrique des fromages frais, affinés et d'autres produits laitiers. Chaque jour, elle reçoit du lait cru de différents fournisseurs, livré par camions-citernes. Aujourd'hui, le personnel de réception note chaque arrivée à la main sur une fiche papier, ensuite archivée.

¿Qué problemas genera el papel?Quels problèmes pose le papier ?

¿Qué debe tener el formulario digital?Que doit contenir le formulaire numérique ?

Mejoras frente al papelAméliorations par rapport au papier

• Generar automáticamente un número único para cada recepción.Générer automatiquement un numéro unique pour chaque réception.
• Completar los datos del proveedor al seleccionarlo de una lista.Compléter les données du fournisseur en le sélectionnant dans une liste.
• Validar que las cantidades y demás valores numéricos sean correctos.Vérifier que les quantités et autres valeurs numériques sont correctes.
• Registrar automáticamente la fecha y la hora cuando corresponda.Enregistrer automatiquement la date et l'heure lorsque c'est pertinent.
• Guardar todo en una base de datos centralizada.Tout conserver dans une base de données centralisée.
• Consultar el historial y filtrar por fecha, proveedor o placa.Consulter l'historique et filtrer par date, fournisseur ou plaque.

Ten esta situación presente durante todo el tutorial: la usarás para describir los datos de tu formulario. Garde cette situation en tête tout au long du tutoriel : tu t'en serviras pour décrire les données de ton formulaire.

Crea tu primera Tarea – ObraCrée ta première Tâche – Chantier

Todo proyecto en el FabLab empieza como una tarea. Vamos a crear la tuya. Tout projet au FabLab commence par une tâche. Créons la tienne.

1. Arriba a la izquierda, junto al logo AiMaker, verifica que estás en el espacio FabLab. Si no, ábrelo desde ese menú desplegable. En haut à gauche, à côté du logo AiMaker, vérifie que tu es bien dans l'espace FabLab. Sinon, sélectionne-le dans ce menu déroulant.
2. Haz clic en el botón + Tarea - Obra, arriba a la derecha. Clique sur le bouton + Tâche - Chantier, en haut à droite.
3. Escribe el nombre que quieras darle a tu tarea y confírmala. Saisis le nom que tu veux donner à ta tâche et valide.
4. Tu tarea aparece como una nueva tarjeta en la lista del espacio (en el ejemplo: Form Fabmaker). Ta tâche apparaît comme une nouvelle carte dans la liste de l'espace (dans l'exemple : Form Fabmaker).

Entra al proyecto y elige el modo de creaciónEntre dans le projet et choisis le mode de création

Haz clic en la tarjeta de tu tarea para abrir la carpeta del proyecto. En el centro aparece el bloque MODO DE CREACIÓN con dos opciones. Clique sur la carte de ta tâche pour ouvrir le dossier du projet. Au centre apparaît le bloc MODE DE CRÉATION avec deux options.

1. Haz clic en Obra o en Tarea, según tu caso. Clique sur Chantier ou sur Tâche, selon ton cas.

Describe tu proyecto: corto y largoDécris ton projet : court et long

El asistente te pide dos textos, uno después del otro, en el chat de abajo. L'assistant te demande deux textes, l'un après l'autre, dans le chat en bas.

1. Descripción corta: una frase que resume el proyecto. Aparecerá debajo del título, en el encabezado.
   Ejemplo: «Creación de formularios personalizados» Description courte : une phrase qui résume le projet. Elle apparaîtra sous le titre, dans l'en-tête.
   Exemple : « Création de formulaires personnalisés »
2. Descripción larga (intención o demanda): explica qué quieres lograr y para qué.
   Ejemplo: «Este proyecto busca aprender a crear formularios personalizados a través de una experiencia práctica.» Description longue (intention ou demande) : explique ce que tu veux obtenir et pourquoi.
   Exemple : « Ce projet vise à assimiler la création de formulaires personnalisés par le biais d'une expérience pratique. »
3. Envía cada texto con el botón naranja o con Enter. Envoie chaque texte avec le bouton orange ou avec Entrée.

Tu primer documento aparece en InputTon premier document apparaît dans Input

Con la descripción larga, la plataforma genera automáticamente un archivo Markdown que guarda la descripción corta y la intención. À partir de la description longue, la plateforme génère automatiquement un fichier Markdown qui contient la description courte et l'intention.

1. Mira el panel Input a la izquierda: ahora muestra 1 archivo, por ejemplo chantier_intention.md. Regarde le panneau Input à gauche : il affiche maintenant 1 fichier, par exemple chantier_intention.md.
2. El asistente confirma que el archivo fue creado y queda desbloqueado para conversar libremente sobre tu proyecto. L'assistant confirme que le fichier a été créé et il est désormais débloqué pour discuter librement de ton projet.

Clasifica el documento en WikiMakerClasse le document dans WikiMaker

Al pasar tu documento a WikiMaker, este entra en el contexto de fuentes que la IA va a consultar cuando trabajes en el proyecto. En passant ton document dans WikiMaker, il rejoint le contexte des sources que l'IA interrogera quand tu travailleras sur le projet.

1. En el mensaje de confirmación del asistente, haz clic en → Indexar en WikiMaker. Dans le message de confirmation de l'assistant, clique sur → Indexer dans WikiMaker.
2. El botón cambia a verde: Indexado en WikiMaker. Le bouton passe au vert : Indexé dans WikiMaker.
3. Una ventana guiada te muestra dónde quedó guardado tu archivo: en WikiMaker, en el panel de la derecha. Haz clic en Siguiente →. Une fenêtre guidée te montre où ton fichier a été enregistré : dans WikiMaker, dans le panneau de droite. Clique sur Suivant →.

Archiva el documento fuenteArchive le document source

Una vez que el documento está en WikiMaker, puedes archivar la copia original. Así se conserva segura para clasificarla más tarde, o puedes dejarla en la zona Input si lo prefieres. Une fois le document dans WikiMaker, tu peux archiver la copie d'origine. Elle est ainsi conservée en sécurité pour la classer plus tard, ou tu peux la laisser dans la zone Input si tu préfères.

1. En la ventana guiada Archivar, a la pregunta «¿Desea archivar la fuente?», haz clic en Sí, archivar la fuente. Dans la fenêtre guidée Archiver, à la question « Souhaitez-vous archiver la source ? », clique sur Oui, archiver la source.
2. Haz clic en Siguiente → para continuar. Clique sur Suivant → pour continuer.

Conoce las herramientas del proyectoDécouvre les outils du projet

En el panel de la derecha de cada proyecto hay varias herramientas. Las irás estudiando de forma progresiva a lo largo de la formación. Dans le panneau de droite de chaque projet se trouvent plusieurs outils. Tu les découvriras progressivement au fil de la formation.

1. Ubica el panel de herramientas a la derecha, con sus tres grupos: Desarrollo (DIY), Lanzamiento MakerApp y Gestión colaborativa (DIT). Repère le panneau d'outils à droite, avec ses trois groupes : Développement (DIY), Lancement MakerApp et Gestion collaborative (DIT).
2. Haz clic en BuildMaker para entrar a la zona de creación. Clique sur BuildMaker pour entrer dans la zone de création.

La vista principal de BuildMakerLa vue principale de BuildMaker

Esta es la pantalla que verás al entrar a BuildMaker. Tiene tres zonas. Voici l'écran que tu verras en entrant dans BuildMaker. Il comporte trois zones.

Elige el camino Form AppChoisis le parcours Form App

Para crear un formulario usamos el Maker Path Form App. Al seleccionarlo, la lista de constructores se filtra y muestra solo las dos opciones que necesitas. Pour créer un formulaire, nous utilisons le Maker Path Form App. En le sélectionnant, la liste des constructeurs se filtre et n'affiche que les deux options dont tu as besoin.

1. En la Caja de herramientas, dentro de Maker Paths, haz clic en Form App. Dans la Boîte à outils, sous Maker Paths, clique sur Form App.
2. Revisa las dos opciones que aparecen en Constructores: Observe les deux options qui apparaissent dans Constructeurs :

Describe los datos de tu formularioDécris les données de ton formulaire

Al lanzar el primer constructor, el asistente te pide describir qué datos va a almacenar tu formulario. Aquí es donde usas la situación problema. Au lancement du premier constructeur, l'assistant te demande de décrire les données que ton formulaire va stocker. C'est ici que tu utilises la situation-problème.

1. Haz clic en Iniciar Form App. Arriba aparece PROCESO EN CURSO · aimaker-begin-form. Clique sur Démarrer Form App. En haut apparaît PROCESSUS EN COURS · aimaker-begin-form.
2. El asistente (marcado ACTION REQUIRED) pide una breve descripción del formulario que quieres crear. L'assistant (marqué ACTION REQUIRED) demande une brève description du formulaire que tu veux créer.
3. Escribe en el campo Type your answer… la descripción de los datos, apoyándote en la tabla de la situación problema, y haz clic en Submit. Écris dans le champ Type your answer… la description des données, en t'appuyant sur le tableau de la situation-problème, puis clique sur Submit.

Ejemplo de respuestaExemple de réponse

Revisa la propuesta y genera el formularioVérifie la proposition et génère le formulaire

Con tu descripción, el asistente razona y te propone la estructura del formulario: el nombre de la tabla y la lista de campos. Antes de generar nada, te pide tu decisión. À partir de ta description, l'assistant raisonne et te propose la structure du formulaire : le nom de la table et la liste des champs. Avant de générer quoi que ce soit, il te demande ta décision.

1. Lee la propuesta y verifica que los campos correspondan a la situación problema (en el ejemplo, la tabla milk_receptions con registration_number, reception_date, license_plate, supplier_code…). Lis la proposition et vérifie que les champs correspondent à la situation-problème (dans l'exemple, la table milk_receptions avec registration_number, reception_date, license_plate, supplier_code…).
2. Elige una de las tres opciones: Choisis l'une des trois options :

3. Haz clic en Submit para confirmar tu elección. Clique sur Submit pour confirmer ton choix.
4. Espera mientras aparece AI is thinking…: el formulario se está generando según tu descripción. Patiente pendant que s'affiche AI is thinking… : le formulaire est en cours de génération selon ta description.

Confirma que el formulario se generóVérifie que le formulaire a été généré

Cuando termina el proceso, el chat muestra que el archivo del formulario se generó y se guardó correctamente. À la fin du processus, le chat indique que le fichier du formulaire a été généré et enregistré correctement.

1. Busca el bloque aimaker-processor con la etiqueta SUCCESS y el mensaje 1 files received, 1 files saved. Repère le bloc aimaker-processor avec l'étiquette SUCCESS et le message 1 files received, 1 files saved.
2. Debajo, el asistente aparece como COMPLETED con el aviso Process Completed. En dessous, l'assistant apparaît comme COMPLETED avec l'indication Process Completed.

Encuentra el archivo en el Panel de controlRetrouve le fichier dans le Tableau de bord

Para ver el archivo generado, cambia a la vista Panel de control. Allí están las carpetas de todos tus proyectos. Pour voir le fichier généré, passe à la vue Tableau de bord. Tu y trouveras les dossiers de tous tes projets.

1. Arriba a la izquierda, junto al logo AiMaker, abre el menú desplegable (donde antes elegiste FabLab) y selecciona Panel de control. En haut à gauche, à côté du logo AiMaker, ouvre le menu déroulant (où tu avais choisi FabLab) et sélectionne Tableau de bord.
2. Se abre la Zona Do It Yourself. En la sección Carpetas, haz clic en la carpeta de tu proyecto (en el ejemplo, Form Fabmaker). La Zone Do It Yourself s'ouvre. Dans la section Dossiers, clique sur le dossier de ton projet (dans l'exemple, Form Fabmaker).

Abre la carpeta BuildMakerOuvre le dossier BuildMaker

Dentro de la carpeta del proyecto hay una subcarpeta por cada herramienta, organizadas en secciones: Datos, Desarrollo (DIY), MakerApp y Gestión colaborativa (DIT). Dans le dossier du projet se trouve un sous-dossier par outil, organisés en sections : Données, Développement (DIY), MakerApp et Gestion collaborative (DIT).

1. En la sección Desarrollo (DIY), ubica la carpeta BuildMaker. El número junto a su etiqueta indica cuántos archivos contiene (aquí, 1). Dans la section Développement (DIY), repère le dossier BuildMaker. Le chiffre à côté de son étiquette indique combien de fichiers il contient (ici, 1).
2. Haz clic en BuildMaker: allí verás el formulario HTML generado. Clique sur BuildMaker : tu y verras le formulaire HTML généré.

Entra a MakerApp LaunchEntre dans MakerApp Launch

Una vez revisado el archivo HTML, pasamos a la herramienta de despliegue: MakerApp Launch. Une fois le fichier HTML vérifié, nous passons à l'outil de déploiement : MakerApp Launch.

1. En el menú junto al logo AiMaker, vuelve a la vista FabLab. Dans le menu à côté du logo AiMaker, reviens à la vue FabLab.
2. Abre la tarjeta de tu proyecto (en el ejemplo, Form Fabmaker). Ouvre la carte de ton projet (dans l'exemple, Form Fabmaker).
3. En el panel de herramientas de la derecha, sección Lanzamiento MakerApp, haz clic en MakerApp Launch. Dans le panneau d'outils à droite, section Lancement MakerApp, clique sur MakerApp Launch.

Crea el proyecto a desplegarCrée le projet à déployer

MakerApp Launch abre el formulario Nuevo Proyecto de Aplicaciones Compuestas: un proyecto donde varias aplicaciones pueden conectarse entre sí. Aquí defines el proyecto que vas a desplegar. MakerApp Launch ouvre le formulaire Nouveau Projet d'Applications Composées : un projet où plusieurs applications peuvent être connectées entre elles. C'est ici que tu définis le projet que tu vas déployer.

1. En Título, escribe el nombre del proyecto. Ejemplo: «Ficha de Recepción de Leche». Dans Titre, écris le nom du projet. Exemple : « Fiche de Réception de Lait ».
2. En Descripción, explica brevemente qué es. Ejemplo: «Formulario conectado a una base de datos». Dans Description, explique brièvement de quoi il s'agit. Exemple : « Formulaire connecté à une base de données ».
3. Haz clic en Crear. Clique sur Créer.

Crea un despliegue de aplicaciónCrée un déploiement d'application

Ya dentro de tu proyecto, en la sección Despliegue de aplicaciones, vas a crear el despliegue que le dará a tu formulario su propia dirección web. Une fois dans ton projet, dans la section Déploiement d'applications, tu vas créer le déploiement qui donnera à ton formulaire sa propre adresse web.

1. Haz clic en + Crear un despliegue de aplicación. Clique sur + Créer un déploiement d'application.
2. En la ventana Nuevo Despliegue, escribe el Título del despliegue. Ejemplo: «Lait form». Dans la fenêtre Nouveau Déploiement, écris le Titre du déploiement. Exemple : « Lait form ».
3. El subdominio se genera automáticamente a partir del título (aquí lait-form), y debajo ves la URL final: https://lait-form.dok.aimaker.fr. Le sous-domaine est généré automatiquement à partir du titre (ici lait-form), et en dessous tu vois l'URL finale : https://lait-form.dok.aimaker.fr.
4. Haz clic en Crear. Clique sur Créer.

Crea la base de datosCrée la base de données

Tu despliegue aparece en la tabla con el estado En espera de archivos y la columna de base de datos en Sin BD. Ahora le creas la base de datos donde se guardarán los registros del formulario. Ton déploiement apparaît dans le tableau avec le statut En attente de fichiers et la colonne base de données sur Sans BD. Tu vas maintenant lui créer la base de données où seront enregistrées les saisies du formulaire.

1. En la columna Acciones de tu despliegue, haz clic en los tres puntos ⋮. Dans la colonne Actions de ton déploiement, clique sur les trois points ⋮.
2. Selecciona Crear una base de datos. Sélectionne Créer une base de données.

1. En la ventana Create Database, escribe un nombre simple en Database name. Ejemplo: form_data. Dans la fenêtre Create Database, écris un nom simple dans Database name. Exemple : form_data.
2. Haz clic en Crear. Clique sur Créer.

Carga el formulario en el despliegueCharge le formulaire dans le déploiement

La base de datos ya aparece en la tabla (ej. doitandshare_form_data_c417), pero el estado sigue en En espera de archivos: falta cargar el archivo que creaste en BuildMaker. La base de données apparaît maintenant dans le tableau (ex. doitandshare_form_data_c417), mais le statut est toujours En attente de fichiers : il reste à charger le fichier créé dans BuildMaker.

1. En la columna Acciones, haz clic en el icono de subir archivo (la nube con flecha). Dans la colonne Actions, clique sur l'icône de téléversement (le nuage avec une flèche).

1. En la ventana Subir archivos para el despliegue, bajo Carpetas de BuildMaker, aparece la carpeta con tu formulario (ej. buildmaker/dummy-form.html_…). Haz clic en Seleccionar →. Dans la fenêtre Téléverser des fichiers pour le déploiement, sous Dossiers de BuildMaker, apparaît le dossier de ton formulaire (ex. buildmaker/dummy-form.html_…). Clique sur Sélectionner →.

Despliega tu aplicaciónDéploie ton application

Con los archivos cargados, el estado cambia a Archivos listos y se habilita el botón del cohete: es el que pone tu formulario en internet. Une fois les fichiers chargés, le statut passe à Archivos listos et le bouton fusée s'active : c'est lui qui met ton formulaire en ligne.

1. Haz clic en el botón azul del cohete 🚀 en la columna Acciones. Clique sur le bouton bleu fusée 🚀 dans la colonne Actions.

1. El botón muestra un indicador de carga mientras se despliega. Espera entre 2 y 3 minutos hasta que la app quede publicada en internet. Le bouton affiche un indicateur de chargement pendant le déploiement. Patiente 2 à 3 minutes jusqu'à ce que l'application soit en ligne.

¡Tu formulario está en internet!Ton formulaire est en ligne !

Cuando termina el despliegue, el estado cambia a ✓ Desplegado y tu aplicación ya vive en internet. Une fois le déploiement terminé, le statut passe à ✓ Déployé et ton application est désormais en ligne.

1. Ubica los enlaces de tu app: en URL de despliegue y en URL personalizada (el subdominio creado, ej. lait-form.dok.aimaker.fr). Repère les liens de ton application : dans URL de déploiement et dans URL personnalisée (le sous-domaine créé, ex. lait-form.dok.aimaker.fr).

Abre y comparte tu formularioOuvre et partage ton formulaire

Entra al enlace generado: tu formulario se abre en el navegador, listo para usarse. Los datos que se ingresen quedan guardados en la base de datos que creaste. Ouvre le lien généré : ton formulaire s'affiche dans le navigateur, prêt à l'emploi. Les données saisies sont enregistrées dans la base de données que tu as créée.

1. Haz clic en el enlace de tu app. Se abre en una nueva pestaña (ej. aimp-doitandshare-595.dok.aimaker.fr/dummy-form.html). Clique sur le lien de ton application. Il s'ouvre dans un nouvel onglet (ex. aimp-doitandshare-595.dok.aimaker.fr/dummy-form.html).
2. Verifica que el formulario tenga las secciones de la situación problema: Recepción, Camión y transporte, Proveedor… Vérifie que le formulaire contient les sections de la situation-problème : Réception, Camion & transport, Fournisseur…
3. Comparte el formulario enviando el enlace: quien lo reciba podrá registrar datos, que se almacenarán en tu base de datos. Partage le formulaire en envoyant le lien : la personne qui le reçoit pourra saisir des données, qui seront stockées dans ta base de données.

Diligencia el formulario y verifica la base de datosRemplis le formulaire et vérifie la base de données

Para cerrar el ejercicio, comprueba que todo funciona de punta a punta: lo que se escribe en el formulario debe quedar guardado en la base de datos. Pour clore l'exercice, vérifie que tout fonctionne de bout en bout : ce qui est saisi dans le formulaire doit être enregistré dans la base de données.

1. Abre tu formulario y diligéncialo con una recepción de leche de ejemplo (placa, conductor, proveedor, litros, temperatura, acidez…). Ouvre ton formulaire et remplis-le avec une réception de lait d'exemple (plaque, chauffeur, fournisseur, litres, température, acidité…).
2. Envía el formulario. Envoie le formulaire.
3. Verifica que la información quedó almacenada en la base de datos que creaste (ej. doitandshare_form_data_c417). Vérifie que les informations ont bien été enregistrées dans la base de données que tu as créée (ex. doitandshare_form_data_c417).

Datos de prueba sugeridosDonnées de test suggérées