1908 views
Installer et configurer une cartographie Gogocarto basée sur Odoo == Dans le cadre du développement des Monnaies Locales Complémentaires et Citoyennes (MLCC), l'association [Lokavaluto](https://lokavaluto.fr) a conçu un module Odoo opensource permettant l'export automatique de données de Contacts de [Odoo](https://odoo.com) vers l'outil de cartographie [Gogocarto](https://www.gogocarto.fr). Ce module Odoo a été développé de manière générique, afin qu'il puisse être utilisable par n'importe quelle autre entité que les MLCC. Il est publié dans la [bibliothèque OCA](https://odoo-community.org/shop) (Odoo Community Association). [TOC] --- ## Avant de commencer Pour vous inspirer et vous donner un aperçu des possibles, voici quelques exemples de cartographies qui ont été réalisées avec ce tutoriel, et sont connectées à un logiciel Odoo : * [Carte de la MLCC La Roue](https://laroue.gogocarto.fr) * [Carte de la MLCC La Miel](https://map.lamiel.net) --- ## Installation du module Odoo pour l'export automatique Depuis votre instance Odoo, installez le module `partner_gogocarto_export_api` ![](/uploads/upload_f890efc5b56b9b0a45f21ddf8990980a.png) Ce module installera également (si pas déjà installé) les modules - `base_geolocalization` - `partner_geolocalize_usability` Il faudra également installer un module pour utiliser un outil externe de calcul des coordonnées géographiques. Nous conseillons le module `` ## Configuration du module Odoo ### Sélectionner les champs à exporter automatiquement **Chaque société dans votre odoo a son propre export des partners qu'elle a le droit de voir dans la base de données.** Ainsi les champs que vous sélectionnerez sont liés à la société Odoo à laquelle vous appartenez. Pour aller modifier la liste des champs à exporter, deux moyens : * Dans **Configurations > Utilisateurs et Sociétés > Sociétés > votre société.** Vous trouverez un onglet "*Gogocarto Setup*". * Dans **Configurations > Paramètres Généraux > Gogocarto**. Vous trouverez un champ de sélection "*Partner fields to export for Gogocarto map*". Dans ce champs, sélectionnez tous les champs de vos fiches Contacts/Membres que vous souhaitez exporter pour les voir apparaître sur votre cartographie. Et sauvegardez.. :::info L'installation du module "**Tags multiple selection**" est recommandé, pour pouvoir sélectionner plusieurs champs d'un coup. ::: :::success **Exemple de configuration:** ![](https://docs.elabore.coop/uploads/589a7ff3bee05cce23711410b.png) ::: :::danger Il y a deux champs "code postal" vérifié dans le json (https://monsiteOdoo.org/web/id_de_la_société/get_http_gogocarto_elements) que vous avez sélectionné le bon. ::: ### Indiquer quels contacts exporter automatiquement Pour exporter des fiches Contact vers Gogocarto, il faut cocher la case "In Gogocarto" sur chacune d'elle. :::info L'utilisation du module "**Mass Editing**" (ou "**Édition en lot**") est vivement recommandée, pour cocher cette case simultannément sur tous les contacts respectants vos critères d'export. ::: :::info **Cas de la gestion des contacts avec des fiches profiles :** Si vous avez le module `partner_profiles` installé ([source](https://https://github.com/elabore-coop/partner-tools)), vous devez adapterles données exportées en indiquant lesquelles doivent provenir de la **fiche administrative**, et lesquelles doivent provenir de la **fiche publique**. Pour cela, il est nécessaire d'installer le module `partner_profiles_gogocarto_export`, qui rajoutera un champ de configuration dédié à la fiche publique : ![](https://docs.elabore.coop/uploads/880217e9013911af382d4a919.png) Avec cette nouvelle configuration, listez : - à **gauche** tous les champs à exporter de la **fiche administrative** - à **droite** tous les champs à exporter de la **fiche publique** ::: ### Et ça fonctionne ? Pour vérifier le bon fonctionnement de l'export automatique, vous pouvez aller vérifier une URL sur votre instance Odoo... attention à l'*id de la société* : > https://monsiteOdoo.org/web/id_de_la_société/get_http_gogocarto_elements ###### *exemple : https://monodoo.org/web/1/get_http_gogocarto_elements* :::info **Cas de la gestion des contacts avec des fiches profiles :** Les informations issues des fiches publiques doivent se trouver dans un "noeud" (ie rassemblées dans un champ "macro") qui se nomme `public_profile_id` ::: :::danger Ça ne fonctionne pas si : * Si vous ne voyez rien : erreur de configuration * Si vous avez un message d'erreur : * vérifiez que l'**id de la société** est le bon * veuillez [contacter l'équipe Lokavaluto](https://chat.lokavaluto.fr/channel/Carte_Gogocarto) ::: :::success Si vous voyez une liste de données, **bravo l'export automatique fonctionne !** On peut attaquer la suite ! ::: --- ## Installation de la cartographie Gogocarto Il y a plusieurs manières de s'installer une cartographie Gogocarto : * en l'installant sur les serveurs mutualisés de Gogocarto * en l'installant sur ses propres serveurs : * avec la suite JustOdooIt * *"from scratch"*, tout à la main. ### Installation sur les serveurs de Gogocarto La structure Gogocarto propose une solution d'hébergement mutualisé pour les cartographie. De cette manière, vous pouvez créer en quelques clics une carte opérationnelle. :::warning **Attention : **les cartes créées ainsi ont toutes leur URL se finissant par ".gogocarto.fr". Ainsi l'adresse Internet de votre carte sera https://monprojet.gogocarto.fr ::: 1. Rendez-vous sur https://gogocarto.fr 2. Cliquez sur "**CRÉER UN PROJET**" 3. Remplissez les informations du formulaire, puis cliquez sur "**CRÉER**" 4. Créez le premier compte administrateur 5. Vous voici arrivé sur l'interface d'administration ! :::success **Bravo, votre cartographie est prête à être configurée !** ::: ### Installation via la suite JustOdooIt Les scripts d'installation de la suite JustOdooIt permettent d'installer un serveur Gogocarto sous forme de container Docker. Un peu plus complexe à mettre en place que la solution précédente, cette installation permet d'avoir Gogocarto d'installé sur ses propres serveurs, en parallèle, ou non, de ses autres outils. De plus, la suite JustoOdooIt permet une installation rapide avec un minimum de configuration. :::warning **Attention :** il faut que vous ayez déclaré et configuré correctement le nom de domaine que vous souhaitez utiliser pour la cartographie AVANT de faire les actions suivantes. ::: 1. Connectez-vous en SSH à votre serveur, et passez en mode root 2. Rendez-vous dans le répertoire ``/opt/apps/myc-deploy`` 3. Éditez le fichier `compose.yml` et rajoutez y les lignes suivantes : ```= gogocarto: options: admin-password: admin relations: publish-dir: frontend: domain: carte.monnomdedommaine.org ``` 4. Lancez la création du container: ``` compose --debug up ``` 5. Rendez-vous sur votre url https://carte.monnomdedommaine.org :::success **Bravo, votre cartographie est prête à être configurée !** ::: ### Installation "from scratch" Si vous souhaitez faire l'installation de Gogocarto "à la main", vous pouvez [suivre le Tutoriel officiel](https://gitlab.adullact.net/pixelhumain/GoGoCarto/-/blob/master/docs/installation.md). --- ## Configuration de la cartographie Gogocarto ![](/uploads/upload_b914c7d3a2ef484531e7b15cb8f1ff60.png) :::info Pour vous connecter à l'interface d'administration, allez sur https://monURLgogocarto.org/admin, et utilisez les identifiants enregistrés lors de l'installation. ::: ### Prérequis :::warning **ATTENTION :** si cette partie est mal réalisée, votre import ne fonctionnera pas... ::: Avant de mettre en place un import, il est nécessaire de configurer un minimum le logiciel, pour qu'il soit prêt à accueillir les données. La principale configuration bloquante avant l'import est la définition des **catégories**. Configurez les catégories de votre carte Gogocarto en suivant les tutoriels officiels : * [Les bases des catégories](https://peertube.openstreetmap.fr/w/41XVNGpufTRG7xQspvZttP) * [Les catégories avancées](https://peertube.openstreetmap.fr/w/dtMEFB1FjkCX83bB16fWQN) :::danger ATTENTION : les blocages d'import dûs aux catégories sont souvent à cause de **types catégories ++obligatoires++**, qui ne sont pas trouvés dans l'import. ::: ### Configuration de l'import dynamique 1. Allez dans *"Données / Import"*, puis dans *"Import dynamique"* 2. Créez un nouvel import 3. Remplissez au moins les informations suivantes : * nom de l'import * URL de l'API JSON : https://monodoo.org/web/get_http_gogocarto_elements * fréquence de mise à jour : la valeur indique un nombre de jours * Attribut à comparer pour la mise à jour = `write_date` 4. Cliquez sur *"Sauvegarder"* 5. Renseignez la correspondance des champs importés :::info **Cas de la gestion des contacts avec des fiches profiles :** les champs issus des fiches publiques seront précédés du préfixe `public_profile_id` ::: 6. Cliquez sur *"Lire les données"* 7. Renseignez la correspondance des catégories 8. Cliquez de nouveau sur *"Lire les données"* 9. Si tout est **vert**, cliquez sur *"Importer les données"* Pour une configuration avancée, n'hésitez pas à [consulter la vidéo officielle sur l'import dynamique](https://peertube.openstreetmap.fr/w/kJFWYLCjcNhxZhLzjzLbnJ). Vous trouverez en **annexe** des [modèles de code à insérer dans l'onglet *"Modifier les données en exécutant du code"*](./xQanUX_IRHyTMjnCV6uGpQ?both#Mod%C3%A8le-de-code-suppl%C3%A9mentaire-pour-l%E2%80%99import-dynamique) vous permettant de : * changer un boolean en catégorie * importer les données du module Odoo *"Partners Contact Full Details"* :::danger **En cas d'échec :** * lisez bien le message d'erreur, il comporte peut-être un indice vers la correction * vérifiez que certaines entrées ne sont pas en attente de modération : * il manque peut-être une catégorie obligatoire * Gogocarto n'a peut-être pas réussi à localiser l'élément sur la carte * sinon venez [nous consulter](https://chat.lokavaluto.fr/channel/Carte_Gogocarto) ! ::: :::success Si tout est au bon, Gogocarto vous indique le nombre d'éléments importés. **Félicitations, vous pouvez aller consulter vos données sur la carte !** ::: ### Configuration de la fiche d'informations Maintenant que vos éléments sont importés sur votre cartographie, il faut personnaliser la fiche de chaque élément qui sera affichée lorsque les visiteurs sélectionneront un élement sur la carte. ![](/uploads/upload_5d79b944f1195f8592c1a593a01854de.png) Cette configuration se fait depuis `Personnalisation > Fiche Détail`, où une interface de code Markdown + Nunjucks est mise à disposition. **Pour remplir cette fiche détail**, vous êtes encouragés à : * visionner la [vidéo tutorielle pour apprendre à manipuler les données de Gogocarto](https://peertube.openstreetmap.fr/w/bJKx463yREfCQYAP3CXcZj) * vous reporter à [l'exemple dans les **annexes**](./xQanUX_IRHyTMjnCV6uGpQ?both#Exemple-de-configuration-d%E2%80%99une-Fiche-D%C3%A9tail), issu de la cartographie https://map.lagemme.org ### Configuration de la recherche dans les champs ::: info L'objectif ici est de pouvoir faire une recherche par mots clés et faire apparaitre dans les résultats tous les points qui contiennent les mots recherchés ::: - ```Personnalisation``` --> Formulaire ![](https://docs.elabore.coop/uploads/a73ac80d95ccd709b10996907.png) - Faire un glisser déposer (de droite à gauche) du type de champ concerné (généralement texte ou texte long) - Editez le bloc (icône crayon) - Nom du champ: aller chercher le champ concerné par la recherche - Libellé: nom du champ - ```Cocher Recherche dans ce champ``` ![](https://docs.elabore.coop/uploads/a73ac80d95ccd709b10996908.png) - Cliquez enfin sur ![](https://docs.elabore.coop/uploads/a73ac80d95ccd709b10996909.png) ::: success La recherche dans ce champ devrait maintenant fonctionner ::: --- ## Affichage de la cartographie Gogocarto dans Odoo Pour afficher la cartographie en iframe sur une page (appelée *Cartographie* dans l'exeple ci-dessous) de votre site web Odoo, créez une nouvelle page, éditez le HTML/CSS, et insérez-y le code suivant : ```html= <t t-name="website.cartographie"> <t t-call="website.layout"> <div id="wrap" class="oe_structure oe_empty"> <section class="s_text_block pb32 pt0" data-name="Text block"> <div class="embed-responsive embed-responsive-16by9"> <iframe src="https://macarto.org/annuaire" width="800" height="600" frameborder="0"/> </div> </section> </div> </t> </t> ``` --- ## Annexes ### Modèle de code supplémentaire pour l'import dynamique Code à insérer dans l'onglet *"Modifier les données en exécutant du code"* de l'import dynamique. Remplacez les valeurs suivantes : * `my_new_category` : le nom de votre nouveau champ Catégorie * `Name of the category` : le label de votre catégorie, qui sera affiché sur la carte * `boolean_field` : le nom de votre champ boolean dans votre export ```php= <?php foreach($data as $key => $row) { # transform a boolean in a category $data[$key]['my_new_category'] = []; if ($row['boolean_field']) { $data[$key]['my_new_category'][] = 'Name of the category'; } # to get URL from Odoo Miscelleanous Contacts # you can add all the contact types you need $data[$key]['facebook'] = ''; $data[$key]['instagram'] = ''; $data[$key]['linkedin'] = ''; if($row['extra_contact_ids']){ foreach($row['extra_contact_ids'] as $contact){ if(str_contains($contact['name'], 'facebook')){ $data[$key]['facebook'] = $contact['name']; } if(str_contains($contact['name'], 'instagram')){ $data[$key]['instagram'] = $contact['name']; } if(str_contains($contact['name'], 'linkedin')){ $data[$key]['linkedin'] = $contact['name']; } } # import the logo of your partner from Odoo # WARNING: the partner must me published on the website if($row['id']){ $data[$key]['logo'] = 'https://myodoo.org/web/image?model=res.partner&id=' . $row['id'] . '&field=image_medium'; } } ``` Cliquez sur "*Lire les données*", vous aurez alors de **nouveaux champs à synchroniser** dans le 3eme onglet. Si vous avez de nouveaux champs Catégorie : * **synchronisez les champs créés par ce code** (*my_new_category*) avec les catégories * cliquez une nouvelle fois sur "*Lire les données*" et **synchronisez les nouvelles catégories apparues**. ### Exemple de configuration d'une Fiche Détail Exemple issu de la cartographie de la [Monnaie Locale Complémentaire et Citoyenne La MIEL](https://map.lagemme.org) : **Entête de la fiche :** ```html= <img style="float:right;" src="{{ logo }}"/><br/> {{ detailed_activity }} ________________________________ {{ address|gogo_text }} ``` **Corps de la fiche :** ```html= {{ taxonomy|gogo_taxonomy }} {% if member_comment or specific_offer or convention_signature_date or specific_offer %} ________________________________ <h2>Plus de détails : </h2>{% endif %} {% if member_comment %}{{ member_comment }}</br>{% endif %} {% if convention_signature_date %}<b>Date d'adhésion : </b>{{ convention_signature_date }}</br>{% endif %} {% if opening_time %}<b>Horaires d'ouverture : </b>{{ opening_time }}</br>{% endif %} {% if specific_offer %}<b>Offre spécifique MIEL : </b>{{ specific_offer }}</br>{% endif %} ________________________________ <h2>Informations de contact : </h2> {% if website %}<b><a href="{{ website }}" target="_blank">Site Web</a></b>{% endif %} {% if website and ((facebook != "") or (instagram != "") or (linkedin != "")) %} - {% endif %} {% if (facebook != "") %}<b><a href="{{ facebook }}" target="_blank">Facebook</a></b>{% endif %} {% if (facebook != "") and ((instagram != "") or (linkedin != "")) %} - {% endif %} {% if (instagram != "") %}<b><a href="{{ instagram }}" target="_blank">Instagram</a></b>{% endif %} {% if (instagram != "") and (linkedin != "") %} - {% endif %} {% if (linkedin != "") %}<b><a href="{{ linkedin }}" target="_blank">LinkedIn</a></b>{% endif %} {% if website or (facebook != "") or (instagram != "") or (linkedin != "") %}</br>{% endif %} {% if email %}<b>Email : </b><a href="mailto:{{ email }}">{{ email }}</a></br>{% endif %} {% if phone %}<b>Téléphone : </b><a href="tel:{{ phone }}">{{ phone }}</a></br>{% endif %} {% if mobile %}<b>Portable : </b><a href="tel:{{ mobile }}">{{ mobile }}</a>{% endif %} <br/> <br/> ```