Application Point Médian - Behind the scenes !

🌘 Objectifs de cet atelier

• Partager le parcours de création de l’application Point Médian

• Présenter le coeur du logiciel

• Présenter la création de l’interface

• Présenter quelques technologies qui permettent d’itérer super rapidement (DevOps)

🌘 Parcours de création

• Un besoin: Utiliser le point médian dans l’écriture inclusive

• Un problème: Pas évident à faire sur le clavier

• Première solution: Une fonction Python pour convertir un texte que j’avais déjà en main

🌘 Améliorations

• Identifier davantage de cas de figure à l’aide de ressources que j’avais sous la main

  • Guide RH d’écriture inclusive

  • Guide d’écriture inclusive

  • Identifier des cas de figure similaires pour les regrouper et éviter d’avoir trop de cas à gérer

• Gérer des caractères additionnels (- et /)

• Faire une application web pour PC avec Flask

• Déployer l’application dans un Docker

• Déployer le docker sur CapRover

• Automatiser la compilation du docker sur GitLab avec Docker in Docker

• Automatiser le déploiement sur CapRover

• Faire des tests unitaires avec Python pour éviter les régressions

🌘 Constats

• Progression successive

• Maintenant

• une mise à jour de mon code passe en production en moins de 3 minutes

• de manière entièrement automatique.

• Voici les outils que j’ai utilisés

• PyCharm IDE

• Flask et Bootstrap pour l’application web

• Docker, GitLab et CapRover pour le déploiement

🌘 Intellij IDEA ou PyCharm

• Environnement de développement gratuit

• Utile pour de nombreux langages de programmation

• La version commerciale offre davantage de modules et d’options de collaboration

🌘 Coeur du de l’application point-median: Expression régulière

• Le coeur du logiciel est une fonction qui utilise les expressions régulières.

• Souvent appelées Regex

• Permettent de représenter des motifs de texte et de les extraire

🌘 Exemple avec deux groupes

(teur[s]?)[.\-/]([t]?rice[s]?)

🌘 Exemple avec trois groupes

• Voici comment la visualiser avec un diagramme “chemin de fer”

• https://regexper.com/

(teur)[.\-/](trice)[.\-/]([s]+)

🌘 Création de l’interface avec Flask et Bootstrap

🌘 Flask

• Flask est un module Python qui permet de faire des applications web simples

• Il consiste en trois parties:

• du contenu web, comme des pages HTML, des scripts Javascript, des fichiers CSS et des images

• des templates Jinja2, qui sont des fonctions Python pour du contenu dynamique dans les pages

• Un script python utilisant des décorateurs pour indiquer les pages web

🌘 Illustrons ça

• Source: Devopedia - Licence CC-BY-SA

🌘 Code HTML du formulaire

Voici le code HTML du formulaire de saisir

<div class="container">
<form class="form-inline">
    <div class="form-group">
        <label class="sr-only" for="texte_input">Texte en
            entrée</label><br>
        <textarea id="texte_input" class="form-control" name="texte_input"></textarea>
    </div>
    <br>
    <div class="form-group">
        <button type="submit" class="btn btn-primary">Convertir</button>
    </div>
</form>
</div>

🌘 Bootstrap

• Afin de rendre l’application adaptative sur mobile, j’ai utilisé Bootstrap, un outil Javascript/CSS

• On voit ici un exemple de templates Jinja2 entre les accolades {{ }}

Exemple :

<script src="\{\{ url_for('static', filename='js/jquery.min.js') \}\}"></script>

(il faut enlever les \ que j’ai dû ajouter pour le site web, justement parce que j’utilise aussi du templating !)

🌘 Exemple de Bootstrap: barre de navigation

Voici un exemple de composants tiré de la librairie Bootstrap: la barre de navigation

<nav class="navbar navbar-toggleable-md navbar-inverse bg-light">
    <div class="container">
        <h1>Convertisseur point médian</h1>
    </div>
</nav>

🌘 Rendre l’application dynamique: JQuery

JQuery permet d’écrire des fonctions pour rendre l’application dynamique. Comme ça, elle ne se recharge pas à chaque fois qu’on convertit un texte.

$(document).ready(function () {
    $('form').on('submit', function (event) {
        $.ajax({
            data: {
                texte_input: $('#texte_input').val(),
            },
            type: 'POST',
            url: '/point_median'
        })
            .done(function (data) {
                $('textarea#output').
                val(data.texte_output).show();
            });
        event.preventDefault();
    });
});

🌘 Fonction appelée

Cette fonction est appelée lorsque le bouton est cliqué.

@app.route('/point_median', methods=['POST']) def call_convertir_point_median():
    texte = request.form['texte_input']
    # Règles à 3 composantes
    texte_output = convertir_point_median(texte)
    return jsonify({'texte_output': texte_output})

🌘 Docker

• Docker est une plateforme qui utilise le noyau Linux et des conteneurs d’applications pour exécuter des applications orientées serveur sur n’importe quel système basé sur Linux.

• Source: Devopedia — Licence CC-BY-SA

🌘 Dockerfile

• Le Dockerfile permet de prendre une image existante et d’y mettre notre application pour créer une nouvelle image.

FROM python:3.10.5-slim-buster

WORKDIR /python-docker

COPY requirements.txt requirements.txt
RUN pip3 install -r requirements.txt

COPY templates templates
COPY app.py app.py
COPY static static

CMD [ "python3", "-m" , "flask", "run", "--host=0.0.0.0"]

🌘 CapRover

• CapRover est une plateforme de type PaaS qui permet de gérer simplement des applications utilisant Docker.

🌘 PaaS

• Le PaaS est un modèle d’infonuagique où le client gère les données et l’application, mais pas le reste.

• Source: Here’s how I deal with managed platform outages - CC-BY

🌘 DevOps

Le DevOps est une technique de développement logiciel qui permet d’accélérer le cycle de développement en utilisant de l’automatisation et de déploiement en continu par la même équipe.

• Source: Devopedia — Licence CC-BY-SA

🌘 GitLab

L’environnement GitLab est un logiciel en ligne qui permet la gestion de code source et la gestion de projets de développement, incluant toute la partie intégration et déploiement en continu (CI/CD) et le DevOps.

🌘 GitLab CI/CD

• Tout se passe dans le fichier .gitlab-ci.yml

• On définit les différentes étapes pour publier l’application

stages:
  - test
  - dockerize

🌘 Étape du test

• Je vais maintenant te montrer l’étape de test, on pourra voir le contenu du fichier .gitlab-ci.yml

🌘 Tests unitaires

• Un test unitaire permet de tester un scénario de l’application et s’assurer que le bon résultat est obtenu

• Voici un exemple:

assert convertir_point_median("invité.e") == "invité·e"

🌘 Contenu du fichier .gitlab-ci.yml pour l’étape de test

test-cases:
  stage: test
  image: python:3
  before_script:
    - pip install -r requirements.txt
  script:
    - pytest test.py

🌘 Git

• Pour orchestrer tout ce beau travail, j’utilise git, un gestionnaire de code source.

• Pour envoyer le travail au serveur, j’utilise ces deux commandes. Le serveur s’occupe ensuite de faire le reste et de rendre l’application disponible

git commit -m "voici des modifications" git push origin main

🌘 Ressources

• Convertisseur point médian

• Guide RH d’écriture inclusive

• Guide d’écriture inclusive