
## Introduction

L'utilisation d'un Raspberry Pi comme runner GitHub peut être une solution économique et efficace pour automatiser vos workflows de CI/CD. Dans cet article, nous allons explorer comment configurer des runners GitHub sur votre Raspberry Pi et les utiliser pour un déploiement rapide.

## Prérequis

- Un Raspberry Pi (3 ou plus récent recommandé) avec Raspberry Pi OS installé
- Une connexion internet stable
- Un compte GitHub avec des droits d'administrateur sur le repository cible

## Configuration du Raspberry Pi

Avant de commencer, assurez-vous que votre Raspberry Pi est à jour :

```bash
sudo apt update
sudo apt upgrade -y
```

## Installation du runner GitHub

1. Connectez-vous à votre compte GitHub et accédez au repository où vous souhaitez ajouter le runner.

2. Allez dans Settings > Actions > Runners et cliquez sur "New self-hosted runner".

3. Choisissez "Linux" comme système d'exploitation.

4. Suivez les instructions pour télécharger et configurer le runner sur votre Raspberry Pi. Voici un exemple de commandes que vous devrez exécuter :

```bash
mkdir actions-runner && cd actions-runner
curl -o actions-runner-linux-arm-2.299.1.tar.gz -L https://github.com/actions/runner/releases/download/v2.299.1/actions-runner-linux-arm-2.299.1.tar.gz
tar xzf ./actions-runner-linux-arm-2.299.1.tar.gz
```

5. Configurez le runner :

```bash
./config.sh --url https://github.com/[OWNER]/[REPO] --token [TOKEN]
```

Remplacez `[OWNER]`, `[REPO]` et `[TOKEN]` par les valeurs appropriées fournies par GitHub.

6. Installez et démarrez le service runner :

```bash
sudo ./svc.sh install
sudo ./svc.sh start
```

## Configuration du workflow GitHub Actions

Créez ou modifiez le fichier `.github/workflows/deploy.yml` dans votre repository :

```yaml
name: Deploy to Raspberry Pi

on:
  push:
    branches: [ main ]

jobs:
  deploy:
    runs-on: self-hosted
    steps:
    - uses: actions/checkout@v2
    - name: Deploy application
      run: |
        # Commandes de déploiement
        echo "Déploiement en cours..."
        # Exemple : copier les fichiers vers le répertoire de déploiement
        cp -R ./* /chemin/vers/votre/app/
        # Redémarrer les services si nécessaire
        sudo systemctl restart votre-service
```

## Optimisation pour un déploiement rapide

1. Utilisez des caches pour accélérer les builds :

```yaml
    - uses: actions/cache@v2
      with:
        path: ~/.npm
        key: ${{ runner.OS }}-node-${{ hashFiles('**/package-lock.json') }}
```

2. Limitez les fichiers à copier en utilisant `.gitignore` et `.dockerignore`.

3. Utilisez des builds incrementaux quand c'est possible.

4. Parallélisez les tâches qui peuvent l'être :

```yaml
jobs:
  build:
    runs-on: self-hosted
    steps:
      # ...

  test:
    runs-on: self-hosted
    steps:
      # ...

  deploy:
    needs: [build, test]
    runs-on: self-hosted
    steps:
      # ...
```

## Sécurité et bonnes pratiques

1. Utilisez des secrets GitHub pour stocker les informations sensibles.

2. Limitez les permissions du runner au strict nécessaire.

3. Mettez régulièrement à jour le runner et le système d'exploitation du Raspberry Pi.

4. Surveillez l'utilisation des ressources du Raspberry Pi pour éviter la surcharge.

## Conclusion

L'utilisation d'un Raspberry Pi comme runner GitHub offre une solution flexible et économique pour l'intégration continue et le déploiement. En suivant ces étapes, vous pouvez mettre en place un système de déploiement rapide et efficace pour vos projets.


> **Note :** Cet article fournit une base solide pour configurer des runners GitHub sur un Raspberry Pi. Pour des configurations plus avancées ou des conseils sur l'optimisation des performances, n'hésitez pas à me contacter via la page [Contact](/contact).

Configurer des runners GitHub sur Raspberry Pi pour un déploiement rapide


## Introduction

Si vous utilisez WebStorm ou IntelliJ IDEA et que vous avez remarqué que le texte dans le terminal intégré est trop espacé, rendant la lecture difficile, ne vous inquiétez pas. Ce problème peut être résolu facilement en ajustant quelques paramètres. Dans cet article, nous allons vous guider à travers les étapes pour corriger ce problème.

![Exemple du problème](/images/dev/problem.png)
*Le problème : les lettres sont trop espacées*


## Étapes pour résoudre le problème

1. **Ouvrir les paramètres**
   - Sur Windows/Linux : Allez dans `File > Settings`
   - Sur macOS : Allez dans `WebStorm/IntelliJ IDEA > Preferences`

2. **Accéder aux paramètres du terminal**
   - Dans la barre de recherche des paramètres, tapez "Console Font"
   - Cliquez sur `Editor > Color Scheme > Console Font`

3. **Ajuster la taille de la police**
   - Trouvez le champ "Size" (Taille)
   - Réduisez la valeur actuelle. Par exemple, si elle est à 13, essayez de la mettre à 12 ou 11
   - (Si ça ne fonctionne pas, essayez de changer la police sur "Monospaced" ou "Courier New")
4. **Appliquer les changements**
   - Cliquez sur "Apply" puis "OK" pour sauvegarder les modifications

5. **Redémarrer l'application**
   - Fermez complètement WebStorm ou IntelliJ IDEA
   - Relancez l'application pour que les changements prennent effet

![Exemple de solution](/images/dev/solution.png)
*La solution : changer la valeur et redémarrer l'IDE*

## Conseils supplémentaires

- Si le problème persiste, vous pouvez également essayer d'ajuster la "Line height" (hauteur de ligne) dans les mêmes paramètres.
- Assurez-vous que la case "Use console font instead of the default" est cochée pour que vos modifications s'appliquent.
- N'hésitez pas à expérimenter avec différentes polices si la police actuelle ne vous convient pas.

## Conclusion

En suivant ces étapes simples, vous devriez pouvoir résoudre le problème d'espacement excessif dans le terminal de WebStorm et IntelliJ IDEA. Si vous rencontrez d'autres problèmes ou si vous avez des questions, n'hésitez pas à consulter la documentation officielle de JetBrains ou à contacter leur support.

Bonne programmation !


Comment résoudre le problème de lettre trop espacé dans le terminal WebStorm et IntelliJ IDEA


## Introduction

Les notifications push sont un élément clé pour engager les utilisateurs dans une Progressive Web App (PWA). Cependant, leur mise en œuvre sur iOS peut être un défi. Dans cet article, nous allons explorer comment créer un système de notifications robuste pour votre PWA sur iOS, en couvrant les abonnements, les permissions, et la création d'une API Express pour gérer le tout.

## Configuration initiale

Avant de plonger dans le code, assurez-vous que votre PWA est correctement configurée avec un fichier manifest et un service worker. Vous aurez également besoin d'un certificat Apple Push Notification service (APNs) pour envoyer des notifications sur iOS.

## Gestion des permissions

La première étape consiste à demander la permission d'envoyer des notifications. Voici comment procéder :

```javascript
async function requestNotificationPermission() {
  if (!("Notification" in window)) {
    console.log("Ce navigateur ne supporte pas les notifications desktop");
    return;
  }

  try {
    const permission = await Notification.requestPermission();
    if (permission === "granted") {
      console.log("Permission de notification accordée");
      subscribeUserToPush();
    } else {
      console.log("Permission de notification refusée");
    }
  } catch (error) {
    console.error("Erreur lors de la demande de permission:", error);
  }
}
```

## Abonnement aux notifications

Une fois la permission accordée, nous pouvons abonner l'utilisateur aux notifications push :

```javascript
async function subscribeUserToPush() {
  const swRegistration = await navigator.serviceWorker.ready;
  
  try {
    const subscription = await swRegistration.pushManager.subscribe({
      userVisibleOnly: true,
      applicationServerKey: urlBase64ToUint8Array(PUBLIC_VAPID_KEY)
    });
    
    console.log('Utilisateur abonné:', subscription);
    sendSubscriptionToServer(subscription);
  } catch (error) {
    console.error('Échec de l'abonnement:', error);
  }
}
```

## API Express pour la gestion des abonnements

Créons maintenant une API Express simple pour gérer les abonnements côté serveur :

```javascript
const express = require('express');
const webpush = require('web-push');
const bodyParser = require('body-parser');

const app = express();
app.use(bodyParser.json());

const subscriptions = new Set();

app.post('/subscribe', (req, res) => {
  const subscription = req.body;
  subscriptions.add(subscription);
  res.status(201).json({});
});

app.post('/unsubscribe', (req, res) => {
  const subscription = req.body;
  subscriptions.delete(subscription);
  res.status(200).json({});
});

app.post('/notify', (req, res) => {
  const notification = {
    title: 'Nouvelle notification',
    body: 'Ceci est le corps de la notification',
    icon: '/icon.png'
  };

  Promise.all(
    Array.from(subscriptions).map(subscription => 
      webpush.sendNotification(subscription, JSON.stringify(notification))
    )
  )
  .then(() => res.status(200).json({}))
  .catch(error => {
    console.error('Erreur lors de l'envoi des notifications:', error);
    res.sendStatus(500);
  });
});

app.listen(3000, () => console.log('Serveur démarré sur le port 3000'));
```

## Envoi de notifications

Pour envoyer des notifications, utilisez l'endpoint `/notify` de votre API. Vous pouvez le déclencher manuellement ou via un système automatisé selon vos besoins.

## Conclusion

La mise en place d'un système de notifications pour une PWA sur iOS nécessite une attention particulière aux permissions et à la gestion des abonnements. En suivant ces étapes, vous pouvez créer une expérience utilisateur engageante tout en respectant les préférences de vos utilisateurs en matière de notifications.

N'oubliez pas de tester abondamment votre implémentation sur différents appareils iOS pour assurer une compatibilité optimale.


> **Note :** Cet article couvre les bases de la mise en place des notifications pour PWA sur iOS. Pour des scénarios plus avancés ou des problèmes spécifiques, n'hésitez pas à consulter la documentation officiale d'Apple sur les notifications web push ou à me contacter via la page [Contact](/contact).

Créer un système de notifications pour PWA sur iOS


## Introduction

Un système de statistiques bien conçu peut fournir des informations précieuses sur l'utilisation de votre application. Dans cet article, nous allons explorer comment créer rapidement un système de statistiques robuste en utilisant Express.js comme backend API.

## Configuration du serveur Express

Commençons par mettre en place notre serveur Express avec les dépendances nécessaires :

```javascript
const express = require('express');
const bodyParser = require('body-parser');
const cors = require('cors');

const app = express();
app.use(cors());
app.use(bodyParser.json());

const PORT = process.env.PORT || 3000;

app.listen(PORT, () => {
  console.log(`Serveur en écoute sur le port ${PORT}`);
});
```

## Création des endpoints pour les statistiques

Maintenant, créons quelques endpoints pour collecter et récupérer des statistiques :

```javascript
// Stockage en mémoire pour les statistiques (à remplacer par une base de données dans un environnement de production)
let stats = {
  pageViews: {},
  userActions: [],
  errors: []
};

// Endpoint pour enregistrer une vue de page
app.post('/api/stats/pageview', (req, res) => {
  const { page } = req.body;
  stats.pageViews[page] = (stats.pageViews[page] || 0) + 1;
  res.status(200).json({ message: 'Page view recorded' });
});

// Endpoint pour enregistrer une action utilisateur
app.post('/api/stats/useraction', (req, res) => {
  const { action, details } = req.body;
  stats.userActions.push({ action, details, timestamp: new Date() });
  res.status(200).json({ message: 'User action recorded' });
});

// Endpoint pour enregistrer une erreur
app.post('/api/stats/error', (req, res) => {
  const { error, context } = req.body;
  stats.errors.push({ error, context, timestamp: new Date() });
  res.status(200).json({ message: 'Error recorded' });
});

// Endpoint pour récupérer toutes les statistiques
app.get('/api/stats', (req, res) => {
  res.status(200).json(stats);
});
```

## Intégration côté client

Pour utiliser notre API de statistiques, nous pouvons créer une petite bibliothèque côté client :

```javascript
class StatsCollector {
  constructor(apiUrl) {
    this.apiUrl = apiUrl;
  }

  async recordPageView(page) {
    return this.sendRequest('/pageview', { page });
  }

  async recordUserAction(action, details) {
    return this.sendRequest('/useraction', { action, details });
  }

  async recordError(error, context) {
    return this.sendRequest('/error', { error: error.message, context });
  }

  async sendRequest(endpoint, data) {
    try {
      const response = await fetch(`${this.apiUrl}${endpoint}`, {
        method: 'POST',
        headers: {
          'Content-Type': 'application/json',
        },
        body: JSON.stringify(data),
      });
      return response.json();
    } catch (error) {
      console.error('Erreur lors de l'envoi des statistiques:', error);
    }
  }
}

// Utilisation
const stats = new StatsCollector('http://localhost:3000/api/stats');
stats.recordPageView('/home');
stats.recordUserAction('button_click', { buttonId: 'submit-form' });
```

## Visualisation des statistiques

Pour visualiser rapidement vos statistiques, vous pouvez créer une simple page de tableau de bord :

```html
<!DOCTYPE html>
<html lang="fr">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Tableau de bord des statistiques</title>
    <script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
</head>
<body>
    <h1>Tableau de bord des statistiques</h1>
    <canvas id="pageViewsChart"></canvas>
    <ul id="userActionsList"></ul>
    <ul id="errorsList"></ul>

    <script>
        async function fetchStats() {
            const response = await fetch('http://localhost:3000/api/stats');
            return response.json();
        }

        async function renderDashboard() {
            const stats = await fetchStats();
            
            // Rendu du graphique des vues de page
            const ctx = document.getElementById('pageViewsChart').getContext('2d');
            new Chart(ctx, {
                type: 'bar',
                data: {
                    labels: Object.keys(stats.pageViews),
                    datasets: [{
                        label: 'Vues de page',
                        data: Object.values(stats.pageViews)
                    }]
                }
            });

            // Rendu de la liste des actions utilisateur
            const userActionsList = document.getElementById('userActionsList');
            stats.userActions.forEach(action => {
                const li = document.createElement('li');
                li.textContent = `${action.action} - ${new Date(action.timestamp).toLocaleString()}`;
                userActionsList.appendChild(li);
            });

            // Rendu de la liste des erreurs
            const errorsList = document.getElementById('errorsList');
            stats.errors.forEach(error => {
                const li = document.createElement('li');
                li.textContent = `${error.error} - ${new Date(error.timestamp).toLocaleString()}`;
                errorsList.appendChild(li);
            });
        }

        renderDashboard();
    </script>
</body>
</html>
```

## Conclusion

Ce système de statistiques rapide vous permet de collecter et de visualiser facilement des données sur l'utilisation de votre application. Pour un environnement de production, vous devriez considérer l'ajout d'une base de données pour le stockage persistant, l'implémentation de l'authentification pour sécuriser vos endpoints, et l'optimisation des performances pour gérer un grand volume de requêtes.


> **Note :** Cet article fournit une base solide pour créer un système de statistiques simple. Pour des fonctionnalités plus avancées ou des conseils sur l'optimisation des performances, n'hésitez pas à me contacter via la page [Contact](/contact).

#Développement

2024

Articles

2023

Articles

Tags :

Autres liens