Guide Claper + cpolar : hébergez une plateforme de présentation interactive de l’accès local à l’accès public

Introduction

Dans des scénarios comme l’enseignement en classe, les lancements de produits et les présentations professionnelles, terminer le contenu ne signifie pas toujours que le public a réellement participé.

Souvent, les séances de questions-réponses en direct peinent à susciter des échanges. Le vote oral est difficile à comptabiliser. Les participants à distance ont également du mal à partager leurs réflexions à temps. Au final, vous ne pouvez compter que sur une enquête après l’événement pour recueillir des retours, et le résultat est souvent loin d’être idéal.

Claper vous permet de téléverser des fichiers PPT ou PDF sur une plateforme de présentation indépendante, et d’ajouter des commentaires en temps réel, des enquêtes, des sondages et des questions-réponses pendant la présentation. Le public n’a qu’à ouvrir la page de l’événement dans un navigateur pour participer directement. L’animateur peut également voir les retours en temps réel depuis l’interface de présentation.

De cette manière, ce qui était autrefois une présentation de diapositives à sens unique peut devenir un processus avec des réponses instantanées et une interaction en direct.

Dans cette configuration, Claper gère les fichiers de présentation et les fonctionnalités interactives. PostgreSQL stocke les données de la plateforme. Docker gère le déploiement. cpolar associe le port local 4000 au sein du réseau local à une URL publique.

Cette solution convient à l’enseignement en classe, à la formation interne, au partage en ligne et aux événements de petite à moyenne taille. Un point à noter : Claper n’est pas un plugin installé directement dans PowerPoint. La présentation proprement dite est diffusée via la page Claper.

1. Déployer Claper avec Docker en une seule fois

Tant que vous disposez d’un appareil compatible avec Docker, vous pouvez faire fonctionner Claper assez rapidement. Vous n’avez pas besoin d’une configuration d’environnement compliquée, et il n’est pas lié à un système d’exploitation spécifique.

Dans cet exemple, j’utilise CentOS 7. Parcourons le processus de déploiement.

Commencez par l’installer et l’exécuter avec Docker, puis créez un répertoire pour stocker les fichiers :

mkdir -p /docker/Claper
cd /docker/Claper

Ensuite, enregistrez le contenu suivant dans un fichier docker-compose.yml.

Lorsque PostgreSQL démarre pour la première fois et que le répertoire de données est vide, il crée l’utilisateur et la base de données à partir des variables d’environnement POSTGRES_* :

POSTGRES_PASSWORD: claper
POSTGRES_USER: claper
POSTGRES_DB: claper

Vous pouvez générer SECRET_KEY_BASE avec la commande suivante :

openssl rand -hex 64

La configuration complète de docker-compose.yml est la suivante :

version: "3.0"

services:
  db:
    image: postgres:9
    volumes:
      - ./postgres-data:/var/lib/postgresql/data
    environment:
      POSTGRES_PASSWORD: claper
      POSTGRES_USER: claper
      POSTGRES_DB: claper
    healthcheck:
      test: ["CMD-SHELL", "pg_isready -U claper"]
      interval: 5s
      timeout: 5s
      retries: 10

  app:
    image: ghcr.io/claperco/claper:latest
    user: "0:0"
    ports:
      - "4000:4000"
    volumes:
      - uploads:/app/uploads
    environment:
      DATABASE_URL: postgres://claper:claper@db:5432/claper
      SECRET_KEY_BASE: 08fdecbc274177363ad3e5457ae910005216dc6d27b470cf69d9524e4fc6b951156b3c4709290054cb76778899ef
      ENDPOINT_PORT: 4000
      ENDPOINT_HOST: 192.168.42.140
      MAX_FILE_SIZE_MB: 50
    depends_on:
      db:
        condition: service_healthy

volumes:
  uploads:

Exécutez ensuite la commande suivante pour démarrer le service :

# Démarrer tous les services
docker-compose up -d

Une fois le service démarré, vous pouvez entrer dans le conteneur PostgreSQL pour le vérifier :

docker exec -it claper-db-1 psql -U claper -d claper

Si vous pouvez accéder normalement à l’invite psql, cela signifie que l’utilisateur et la base de données ont été créés avec succès.

Vous pouvez également utiliser l’utilisateur postgres pour afficher tous les rôles :

docker exec -it claper-db-1 psql -U postgres -c '\du'

Une fois le démarrage terminé, vérifiez si le port 4000 est accessible :

curl http://192.168.42.140:4000

Ouvrez l’adresse suivante, et vous devriez voir la page d’accueil de Claper :

http://localhost:4000

Inscrivez-vous, puis connectez-vous :

Une fois la connexion réussie, vous pouvez accéder au tableau de bord d’administration :

Ensuite, vous pouvez créer un événement de présentation :

Suivez les instructions affichées sur la page.

Cliquez sur Create dans le coin supérieur droit, téléversez un PPT ou un PDF, puis configurez les composants interactifs. Il est recommandé d’activer les commentaires et les sondages, car cela rend l’effet d’interaction plus évident.

À ce stade, la plateforme de présentation interactive Claper a été déployée.

Vous pouvez maintenant créer un événement de présentation et inviter le public à y participer. Qu’il scanne un code QR sur place ou ouvre un lien à distance, le public peut participer au moyen de commentaires, d’enquêtes, de sondages et d’autres méthodes. Il peut également laisser des données de retour utiles au cours du processus.

Qu’il s’agisse d’un rapport en salle de réunion, d’un cours en classe ou d’un événement de lancement en ligne, Claper peut transformer une explication à sens unique en une interaction bidirectionnelle avec un plus fort sentiment de participation.

2. Installer cpolar

Si vous avez déjà déployé Claper en local et que les fonctionnalités de commentaires, d’enquêtes et de retours en temps réel sont configurées, vous pouvez toutefois rencontrer un problème lorsque vous souhaitez que des collègues, des clients ou des étudiants participent à distance. Ils ne peuvent pas accéder à :

http://your-internal-ip:4000

La raison est simple : le service fonctionne à l’intérieur d’un réseau local et ne dispose pas d’une adresse IP publique, les appareils externes ne peuvent donc pas l’atteindre.

C’est là que cpolar peut aider à résoudre le problème de l’accès public.

cpolar peut mapper des services exécutés sur votre ordinateur local, tels que SSH, des services Web et des bases de données, vers Internet public. Cela signifie que même si le service fonctionne à la maison, dans un bureau ou à l’intérieur d’une machine virtuelle, il reste accessible via une URL publique.

Vous trouverez ci-dessous les étapes d’installation de cpolar.

Installez-le avec le script en un clic :

sudo curl https://get.cpolar.sh | sh

Après l’installation, exécutez la commande suivante pour vérifier l’état du service cpolar. Si l’état est normal, le service a démarré avec succès.

sudo systemctl status cpolar

Une fois cpolar installé et démarré avec succès, saisissez l’IP de l’hôte de la machine virtuelle suivie du port 9200 dans votre navigateur pour accéder à l’interface de gestion :

http://ip:9200

Vous pouvez également l’ouvrir localement :

http://localhost:9200

Après vous être connecté avec le compte enregistré sur le site officiel de cpolar, vous verrez l’interface de configuration Web de cpolar. La configuration ultérieure des tunnels pourra être effectuée depuis cette page.

3. Configurer une URL publique

Après vous être connecté à l’interface de gestion Web UI de cpolar, cliquez sur Gestion des tunnels → Créer un tunnel dans le tableau de bord de gauche.

Configurez-le avec les paramètres suivants :

• Nom du tunnel : valeur personnalisée. Cet exemple utilise claper. Assurez-vous qu’il ne duplique pas le nom d’un tunnel existant.

• Protocole : http

• Adresse locale : 4000

• Type de domaine : domaine aléatoire

• Région : choisissez China Top

Une fois la création réussie, ouvrez Liste des tunnels en ligne à gauche. Vous verrez l’URL publique qui vient d’être générée.

Ensuite, utilisez cette adresse sur un autre ordinateur ou téléphone, et vous pourrez accéder à la page Claper déployée localement depuis Internet public.

Après un accès réussi, la page ressemble à ceci :

4. Réserver une URL publique fixe

Une URL publique aléatoire peut être utilisée temporairement. Mais si vous souhaitez partager le service avec d’autres personnes pendant une période plus longue, une adresse qui change fréquemment n’est pas très pratique.

Vous pouvez donc configurer ici un sous-domaine de second niveau fixe dans cpolar. Après la configuration, cette URL publique ne changera plus aléatoirement à chaque fois.

Cliquez sur Réserver à gauche, puis sélectionnez Réserver un sous-domaine de second niveau. Choisissez China Top comme région, puis définissez un nom de sous-domaine de second niveau.

Dans cet exemple, le sous-domaine utilisé est capler. Vous pouvez le personnaliser selon vos propres besoins. Après avoir rempli les informations de remarque, cliquez sur Reserve.

Revenez ensuite à l’interface de gestion Web UI de cpolar. Cliquez sur Tunnel Management → Tunnel List dans le tableau de bord de gauche. Trouvez le tunnel que vous souhaitez configurer, puis cliquez sur Edit à droite.

Ensuite, modifiez les informations du tunnel et configurez le sous-domaine de second niveau réservé dans le tunnel :

• Type de domaine : choisissez le sous-domaine de second niveau

• Sous-domaine : saisissez le sous-domaine de second niveau réservé avec succès

• Région : China Top

Après avoir terminé les paramètres, cliquez sur Update.

Une fois la mise à jour terminée, ouvrez à nouveau Online Tunnel List. Vous verrez que l’URL publique aléatoire d’origine est devenue une URL fixe de sous-domaine de second niveau.

Enfin, ouvrez l’URL publique fixe dans le navigateur sur n’importe quel appareil. Si la page s’ouvre normalement, cela signifie que l’adresse publique fixe du sous-domaine de deuxième niveau a été configurée avec succès.

Conclusion

Claper ne résout pas le problème de la mise en page des PPT. Il résout le problème de la participation pendant une présentation.

Le public peut consulter le contenu, soumettre des questions et participer à des sondages sur la même page. Le présentateur peut également voir plus rapidement les retours sur place. Cette approche est particulièrement adaptée aux cours, aux formations et aux événements de lancement qui nécessitent une communication bidirectionnelle.

Avant de l’utiliser officiellement, quelques points méritent d’être vérifiés à l’avance :

1. Remplacez le mot de passe par défaut de la base de données dans docker-compose.yml.

2. Utilisez la commande suivante pour générer un SECRET_KEY_BASE indépendant. N’utilisez pas directement la valeur d’exemple de cet article.

openssl rand -hex 64

1. Après avoir configuré l’URL publique, vérifiez si ENDPOINT_HOST doit être remplacé par le domaine d’accès réel. Sinon, les liens d’invitation ou la communication en temps réel peuvent encore pointer vers l’IP du réseau local.

2. Pour l’image PostgreSQL, il est recommandé d’utiliser une version actuellement prise en charge par le projet. Il n’est pas recommandé de continuer à utiliser longtemps l’ancien postgres:9.

Dans l’ensemble, l’idée centrale de cette solution est claire :

Tout d’abord, utilisez Docker pour lancer Claper. Utilisez ensuite cpolar pour mapper le port local 4000 vers Internet public. Ainsi, qu’il s’agisse d’un événement sur site ou d’une présentation à distance, le public peut participer via un navigateur.

Pour les salles de classe, les sessions de formation, les démonstrations de produit et les partages en ligne, cette approche génère davantage de retours que la simple lecture d’un PPT, et elle facilite également la participation du public.

FAQ sur Claper

Qu’est-ce que Claper ?

Claper est un outil de présentation interactive open source. Il permet de transformer des présentations PPT ou PDF classiques en sessions en ligne avec des sondages, des questions-réponses et des retours du public. Il est utile pour les salles de classe, les formations en ligne, les démonstrations de produit et les événements en direct.

Claper peut-il être déployé avec Docker ?

Oui. Claper prend en charge le déploiement auto-hébergé, ce qui convient aux utilisateurs qui souhaitent gérer leurs propres données de présentation, liens d’accès et environnement de déploiement.

Pourquoi Claper a-t-il besoin d’un accès public ?

Si Claper ne s’exécute qu’en local ou au sein d’un réseau privé, les utilisateurs externes ne peuvent pas ouvrir la page de présentation. Des outils comme cpolar ou Cloudflare Tunnel peuvent exposer le service local à Internet public, afin que le public puisse participer depuis un navigateur.

Que fait cpolar dans cette configuration de Claper ?

cpolar mappe le service Claper local, généralement exécuté sur le port 4000, vers une URL publique. C’est utile pour les démonstrations temporaires, les cours en ligne, le partage à distance et les tests rapides.

À quels scénarios Claper convient-il ?

Claper convient aux présentations qui nécessitent une réelle participation du public, comme l’interaction en classe, la formation en ligne, les lancements de produits, les démonstrations clients, les sessions de partage internes et les événements à distance.

Outils associés

• Claper : une plateforme de présentation interactive open source permettant d’ajouter des sondages, des questions-réponses et des retours du public à des présentations PPT ou PDF.

• Docker : une plateforme de conteneurs permettant d’exécuter rapidement des services web comme Claper.

• Docker Compose : un outil permettant de gérer plusieurs services, tels que Claper et PostgreSQL, dans un même déploiement.

• PostgreSQL : le service de base de données couramment utilisé dans les déploiements auto-hébergés de Claper.

• cpolar : un outil de tunnelisation pouvant exposer un service Claper local à une URL publique.

• Cloudflare Tunnel : une autre option de tunnelisation pour exposer des services locaux à l’Internet public.

• Nginx : un outil courant de proxy inverse pour l’association de domaines et le transfert de services dans les déploiements à long terme.

• Let’s Encrypt : un service gratuit de certificats SSL permettant d’activer HTTPS sur des domaines personnalisés.

Liens connexes

• Documentation de Claper : apprenez les bases de Claper et de sa configuration auto-hébergée.

• Dépôt GitHub de Claper : consultez le code source, les versions, les problèmes et les informations du projet.

• Image Docker de Claper : consultez l’image de conteneur Claper et les détails du package.

• Documentation de cpolar : apprenez à créer des tunnels HTTP, des URL publiques et des configurations de l’interface Web.

• Documentation de Cloudflare Tunnel : apprenez à exposer des services locaux à l’Internet public.

• Documentation de Docker Compose : apprenez à exécuter et à gérer des applications multi-conteneurs.

• Image Docker PostgreSQL : consultez les variables d’environnement du conteneur PostgreSQL et les paramètres d’initialisation.