Shamane: saving the Przewalski horse! / Shamane : sauvons le cheval de Przewalski !

Discover an international eco-friendly project dedicated to helping this endangered species!

This article is also available on Medium (only in English).

(The Shamane logo shown above was designed by Eric Serre)

Causse Méjean socially nature population © Photo by Florian Drouard (Takh)

The website is available here: / Pour accéder au site internet :

https://takh.geomatys.com/

Do you know of Przewalski’s horse? This species of horse was discovered in 1881 and already nearly extinct by 1970; nowadays, various efforts aim at helping its conservation and saving it by reintroducing populations world-wide: in Mongolia, in China, in Russia…

Shamane is a software prototype that focuses on data mining for science-based conservation and management of the Przewalski horse. For now, it is still in development phase and it needs to be further improved to include more data, AI algorithms and other tools useful for species study and conservation – but it already presents a first basic analysis of the some of the data we currently have on this species…

A screenshot of the portal website page

This project is currently being showcased at the 2021 IUCN congress, that takes place right now in Marseille, France: it started last Friday and will last until next Saturday. This international event for world conservation brings together scientists from everywhere around the planet and offers a whole set of discussions on various topics: biodiversity, sustainable development, protected areas, pandemics…

Hopefully, this event will be a place where Shamane can attract new partners and solidify its foundations 🙂

The partners for this project

I had the chance to work on this project as the web developer for the portal website – the “minisite” I linked above that introduces the project and points to various relevant contents. Although I didn’t take part in the development of the app itself, I got the opportunity to participate in lots of fascinating talks and meetings that taught me a lot about Przewalski’s horse and data mining!

For now, this project is a collaboration between 3 groups: the Takh association, Les Fées Spéciales and Geomatys.

Takh

The Takh association is a team of scientists and an international NGO based in France that was founded in 1990 by Claudia Feh. It aims to save the Przewalski horse by having a small population re-adopt the wild horse behaviour. In 1993, there were 11 individuals, brought over from various European zoos to Le Villaret conservation site, in the south of France.

Ten years later, Takh could finally send some of the horses to their new home: the steppes of Mongolia. By that time, the group had grown to over twenty individuals and, now, there are more than 80 horses in the Mongolian Seer reserve site!

This was made possible by several partnerships and most notably a tight collaboration with the Khomyn Talyn Takhi (KTT) association, the Mongolian counterpart of Takh that looks after the horses once they have been reintroduced in the steppes.

Les Fées Spéciales

I actually talked about Les Fées Spéciales when I discussed the Napoleon project we did in June: they’re a French animation studio that produces media for the cinema, culture and science, and that have done lots of very diverse creations with museums, institutions or scientific groups. And once again, the UI/UX designer for this web page was Marie Saby.

They made the trailer video for the Shamane project that you can see in the first section of the minisite (the one entitled “the project”). Kudos to them for making this great video that provides a great introduction to the project, its goals, its current state and the next steps! 🙂

Les Fées Spéciales made a great trailer video to present the project, its goals and the next steps 🙂

Geomatys

Geomatys is a computing development company specialised in geospatial information processing: those data engineers crunch a lot of data, they are high-level math and software experts and they are currently developing a suite of products called “Examind” to make it easy to display and explore 4D data on maps or globes. Basically, this set of SDKs and tools (based on an open-source core!) allows you to create scenarios where you see the evolution of your data through time and plot it visually in an intuitive and immersive way.

This was essential for the Shamane project because it allowed the scientists from Takh and the engineers from Geomatys to collaboratively build an interactive app to browse the data and understand it in both the spatial and temporal contexts. You can see screenshots and screencasts of this app all throughout the trailer video made by Les Fées 🙂

Creating a website with only vanilla JS

For this project, we quickly settled for a single-page app with some openable sections because we wanted all of the info to be easily and quickly accessible. Also, given the time constraints, we went for a static web page to make it quicker to code.

That’s also why I decided I wouldn’t use any JS framework like React, Angular or Vue. Instead, I wanted to make the website code as lightweight as possible and therefore went for a full vanilla-HTML/CSS/JS tech stack.

The entire DOM is created dynamically from a single initial container <div>, so my index.html is pretty empty; all of the actual instantiation is done via JS thanks to built-in Javascript methods like document.createElement().

Note: by the way – if you want to learn about how we can parse and create HTML DOM trees quickly thanks to vanilla JS, you can check out another article I wrote on this topic a while ago 😉

Doing this allowed me to have a very precise control over my HTML page and all the elements in it.

A notable issue, however, in terms of performances, is that the page contains lots of images and videos – those are pretty large and therefore pretty heavy, so this is probably not as optimised as it could be on lower-tier devices, or when you have a slow Internet connection.

But overall, it was quite nice to work only with native elements and recreate a full DOM tree by hand 🙂

Creating a contact form with some PHP scripting

Another important part of this web page is the contact form at the bottom, in the “contact us” section:

The minisite contains a basic HTML contact form, with a custom field type for the phone number with a dial code dropdown

Most of this is a simple HTML form with base inputs or selects that are just styled thanks to CSS; the only particularity is the “phone” section, because we wanted to be able to select a country indicator and automatically get a matching placeholder for the phone number.

So, for the phone input, I relied on a little JS plugin by Jack O’Connor called intl-tel-input: this basic lib can directly transform an input into a specific phone-typed input with the dial code and the phone number on the side. You can check out the Github for more info, but in short, it allowed me to quickly implement this international phone input (it even provides you with the little country flags!) and finish up my contact form properly.

Note: I chose this lib because it doesn’t have any jQuery dependencies which makes it really light – as a rule of thumb, I try and avoid jQuery as much as possible because it usually bloats your page with a heavy dependency…! 🙂

To handle this form submit, of course, I had to go beyond base HTML. So I wrote a simple PHP script to receive the data, format it and send it to a given email address (that is set before hand when you prepare the app on the server).

Dockerising the website for deployment

And this brings me to the last major part of this project, on my end: preparing the website for deployment.

Docker’s logo

All in all, it was pretty straight-forward: we used containerisation with Docker to insure that the site always runs in the same environment. Containerisation is the idea of not only packaging and distributing your code, but also sharing all the tools and context that go along with it (like the operating system settings, the required libs, etc.). It is similar to a virtual machine but lighter, quicker to start up and more efficient to execute. Thanks to Docker, you basically record a “screenshot” of your entire setup that can then be run smoothly on any other computer, and you don’t risk missing dependencies or having incompatible configurations. This made it really easy to require PHP as a base dependency, and then serve the static page thanks to an Apache server.

The only tricky thing was the contact form: because we wanted to send an email from a PHP script to a given mail inbox, we had to allow the Docker to access the outside of the container. By default, because it is a bit like a virtual machine and could potentially do lots of (unexpected/unwanted/dangerous) stuff, Docker apps are isolated from the rest of the system – the containers are well-monitored and cut from the rest of your computer.

So to send an email, we had to do some additional set up in our Docker and open a route just for emails 🙂

Note: during the dev phase, I used a third-party Docker image called maildev to simulate a mail server – it’s really quick and easy-to-use so I really recommend it if you ever have to make a test mail server in Docker 🙂

Conclusion

This collaboration with Takh, Geomatys and Les Fées Spéciales taught me a lot: I designed the entire website in pure HTML/CSS/Javascript and I had to handle various types of resources; plus, there were quite high expectations on the overall style and originality so I needed to be on par with Eric (from Les Fées) and Marie’s work. Overall, it improved my skills in web dev and had me do a little bit of dockerisation in the end to anticipate the deployment, which is always neat!

Also, big thanks to Natalène, Laurent, Jean-Louis, Dorian and Alessandro for their professionalism and overall kindness all through this job 🙂

I’m really glad I could be a part of this adventure and I sincerely hope it will engage people – Shamane will be at the IUCN congress with a stand until September 9, so if you’re around and you want to check out the app, make sure to pop in! Or else just contacting the team to learn more about the project by filling in the contact form on the website to get in touch!

Vous connaissez le cheval de Przewalski? Cette espèce a été découverte en 1881 et elle était déjà au bord de l’extinction un siècle plus tard, en 1970 ; de nos jours, différents groupes s’efforcent d’aider à sa conservation et de sauver ce cheval en réintroduisant des populations à travers le monde : en Mongolie, en Chine, en Russie…

Shamane est un logiciel prototype qui se concentre sur l’analyse de données pour une conservation et un suivi scientifique du cheval de Przewalski. Pour l’instant, il s’agit d’un projet encore en développement et il doit être amélioré pour contenir plus de données, des algorithmes d’IA et d’autres outils utiles à l’étude et la protection de l’espèce – mais Shamane présente déjà une première analyse simple de nos données récentes sur ce cheval…

A screenshot of the portal website page

Ce projet est actuellement en démonstration au congrès 2021 de l’IUCN qui se tient en ce moment-même à Marseille, en France : il a débuté vendredi dernier et se terminera samedi prochain. Cet évènement international pour la protection de la planète rassemble des scientifiques de tous horizons et présente un ensemble de discussions sur des sujets variés : la biodiversité, le développement durable, les zones protégées, les pandémies…

Avec un peu de chance, cet évènement permettra à Shamane d’attirer de nouveaux partenaires et d’assurer ses fondations 🙂

Les partenaires du projet

J’ai eu la chance d’être développeuse web pour ce projet pour la réalisation du site portail – le “minisite” dont je donne le lien plus haut, qui introduit le projet et pointe vers divers contenus. Même si je n’ai pas participé au développement de l’app elle-même, j’ai pu participer à de nombreuses conversations et réunions fort intéressantes qui m’ont appris beaucoup sur le cheval de Przewalski et l’analyse de données !

A l’heure actuelle, ce projet est une collaboration entre 3 groupes : l’association Takh, Les Fées Spéciales et Geomatys.

Takh

L’association Takh est une équipe scientifique et une ONG internationale basée en France qui a été fondée en 1990 par Claudia Feh. Son but est de sauver le cheval de Przewalski en permettant à une petite population de retrouver son comportement sauvage. En 1993, 11 individus ont été ramenés au site de conservation du Villaret (dans le sud de la France) depuis plusieurs zoos européens.

Dix ans plus tard, Takh pouvait enfin envoyer quelques chevaux vers leur nouveau chez-eux : les steppes de Mongolie. Durant cette période, le groupe s’était agrandi pour compter plus de vingt individus et, aujourd’hui, il y a plus de 80 chevaux dans la réserve de Seer en Mongolie !

Ceci a été rendu possible par plusieurs partenariats et en particulier une collaboration étroite avec l’association Khomyn Talyn Takhi (KTT), l’homologue mongolien de Takh qui s’occupe des chevaux après qu’ils aient été réintroduits dans les steppes.

Les Fées Spéciales

J’ai déjà parlé des Fées Spéciales quand j’ai présenté le projet sur Napoleon que nous avons réalisé en juin : les Fées sont un studio d’animation français qui produit des médias pour le cinéma, la culture et la science, et qui ont déjà participé à de nombreuses créations avec des musées, des institutions ou des groupes scientifiques. Et encore une fois, la designeuse UI/UX pour la page web était Marie Saby.

Les Fées ont réalisé la vidéo trailer pour le projet Shamane que vous pouvez voir dans la première section du minisite (intitulée “the project”). Un grand bravo à eux pour cette belle vidéo qui introduit le projet, ses buts, l’état actuel et les prochaines étapes ! 🙂

Les Fées Spéciales ont réalisé une belle vidéo trailer pour présentation le projet, ses buts et les prochaines étapes 🙂

Geomatys

Geomatys est une société de développement informatique, spécialisée dans le traitement de l’information spatialisée : ces ingénieurs de la donnée étudient de la donnée en masse, ce sont des experts en maths et en programmation qui travaillent actuellement à développer une suite de produits appelée “Examind” pour faciliter la visualisation et l’exploration de données 4D sur des cartes ou des globes. Leur ensemble de SDKs et d’outils (basés sur un coeur open-source) permettent de créer des scénarios qui montrent l’évolution des données à travers le temps et la représentent visuellement de manière intuitive et immersive.

C’était essentiel pour le projet Shamane car cela a permis aux scientifiques de Takh et aux ingénieurs de Geomatys de construire ensemble une app interactive pour parcourir les données et les comprendre dans un contexte spatial et temporel. Vous pouvez voir des captures d’écran et des enregistrements vidéos de l’app tout au long de la vidéo trailer réalisée par Les Fées 🙂

Créer un site web en vanilla JS

Pour ce projet, nous nous sommes rapidement orientés vers une single-page app avec des sections à ouvrir car nous voulions présenter toute l’information de manière claire et concise. Aussi, à cause des contraintes de temps, nous avons décidé de faire une page web statique qui était plus rapide à coder.

C’est également pour cette raison que j’ai choisi de ne pas utiliser de framework JS comme React, Angular ou Vue. J’ai plutôt souhaité faire le code le plus léger possible et j’ai utilisé un ensemble de technologies totalement natives, ou “vanilla” (HTML/CSS/JS).

Tout le DOM est créé dynamiquement à partir d’une seule <div> initiale “conteneur”, donc mon index.html est relativement réduit ; toute l’instantiation des éléments HTML est faite en Javascript l’aide de méthodes intégrées comme document.createElement().

Note : au fait – si vous voulez en apprendre plus sur l’extraction et la création d’arbres DOM HTML à l’aide de JS vanilla, vous pouvez aller jeter un oeil à un autre article que j’ai écrit sur ce sujet il y a un moment 😉

Cette technique m’a permis d’avoir un contrôle très précis de ma page HTML et des éléments qui y résident.

Un problème notable, cependant, en termes de performances, est que la page contient beaucoup d’images et de vidéos – elles sont assez grandes et donc assez lourdes à charger, donc le site pourrait sans doute être plus optimisé pour les appareils et les connexions Internet plus lentes.

Mais dans l’ensemble, j’ai trouvé que travailler avec des éléments natifs et recréer un arbre DOM à la main était agréable et très instructif 🙂

Créer un formulaire de contact (avec un peu de PHP)

Une autre partie importante de cette page web est le formulaire de contact en bas, dans la section “contact us” :

Le minisite contient un formulaire HTML basique, avec un type de champ particulier pour le téléphone qui gère un sélecteur d’indicateur de pays

Dans l’ensemble, ce formulaire est un formulaire HTML standard avec des entrées et des sélecteurs basique qui ont juste un style CSS particulier pour la mise en forme ; la seule particularité est pour l’input du téléphone, car nous voulions pouvoir choisir un indicateur de pays et avoir un exemple de numéro correspondant mis à jour automatiquement.

Pour ça, j’ai utilisé un petit plugin JS par Jack O’Connor appelé intl-tel-input : cette lib basique peut transformer n’importe quel <input> en une entrée spécifiquement pour un numéro de téléphone, avec un indicatif et le numéro séparé. Vous pouvez aller voir le Github pour plus d’infos mais, globalement, ce plugin m’a permis de rapidement implémenter ce champ de numéro de téléphone international (il contient même les drapeaux des pays !) et de finaliser le formulaire de contact proprement.

Note : j’ai choisi cette lib car elle n’a pas de dépendance à jQuery, ce qui la rend très légère – de manière générale, j’essaie toujours d’éviter jQuery autant que possible car ça alourdit souvent la page web de manière significative… ! 🙂

Pour gérer l’envoi de ce formulaire de contact, je ne pouvais évidemment pas me contenter de simple HTML. J’ai donc écrit un script en PHP simple pour récupérer les données, les formatter et les retransmettre à une adresse mail donnée (qui est définie à l’avance quand le site est mis en ligne sur le seveur).

“Dockeriser” le site pour le déploiement

Cela m’amène au dernier point notable de ce projet, de mon côté : la préparation du site pour le déploiement.

Docker’s logo

Dans l’ensemble, c’était assez classique : nous avons utilisé de la containerisation avec Docker pour assurer que le site aurait toujours le même environnement d’exécution. La containerisation, c’est l’idée de ne pas seulement packager et distribuer son code, mais d’aussi partager tous les outils et le contexte qui lui permet de fonctionner (comme des paramètres de système, des dépendances, etc.). Cela ressemble à une machine virtuelle, mais les conteneurs sont plus légers, plus rapides à lancer et plus efficaces. Grâce à Docker, on fait en quelque sorte une “capture” de notre espace de travail qui peut ensuite être utilisé sans problème sur n’import quel autre ordinateur, sans risquer d’avoir un problème d’import ou une configuration incompatible. Ça nous a permis de facilement définir PHP comme une dépendance de base, et d’ensuite servir la page statique à l’aide d’un serveur Apache.

La seule difficulté était la gestion du formulaire de contact : comme nous voulions pouvoir envoyer un email depuis le script PHP vers une boîte de réception donnée, nous devions autoriser Docker à accéder à l’extérieur du conteneur. Par défaut, comme les conteneurs sont un peu comme des machines virtuelles et qu’ils peuvent potentiellement contenir beaucoup de choses (inattendues/non désirés/dangereuses), les apps Docker sont isolées du reste du système – les conteneurs sont bien surveillés et coupés du reste de l’ordinateur.

Donc, pour pouvoir envoyer un mail, nous avons dû ajouter quelques étapes de configuration dans notre Docker pour ouvrir une route pour les emails 🙂

Note : pendant la phase de développement, j’ai utilisé une image Docker annexe appelée maildev pour simuler un serveur de mails – c’est très simple à mettre en place et à utiliser, je le recommande vivement si vous devez un jour créer un serveur de mail de test en Docker 🙂

Conclusion

Cette collaboration avec Takh, Geomatys et Les Fées Spéciales m’a appris beaucoup : c’était l’occasion de travailler sur du HTML/CSS/Javascript natif et de gérer différents types de contenus (images et vidéos). De plus, il y avait des attentes importantes sur le style et l’originalité visuelle ; je devais donc être au niveau des designs d’Eric (des Fées) et de Marie ! Dans l’ensemble, ce projet a amélioré mes compétences en développement web et m’a permis de refaire un peu de dockerization sur la fin pour préparer le déploiement, ce qui est toujours passionnant !

Et bien sûr, un grand merci à Natalène, Laurent, Jean-Louis, Dorian et Alessandro pour leur professionnalisme et leur gentillesse tout au long de ce projet !

Je suis vraiment ravie d’avoir fait partie de cette aventure et j’espère sincèrement que le site intéressera – Shamane aura un stand au congrès de l’IUCN jusqu’au 9 septembre, alors si vous êtes dans la région et que vous voulez voir l’app, n’hésitez pas à passer les voir ! Ou bien vous pouvez simplement contacter l’équipe pour en apprendre plus sur le projet en remplissant le formulaire de contact sur le site !

Leave a Reply

Your email address will not be published. Required fields are marked *