mardi 2 septembre 2025

Porter sa WPA sur GitHub

Le problème : Développement vs. Production

Lorsque vous travaillez sur votre ordinateur, vous utilisez probablement un serveur de développement (comme celui de Vite ou Create React App). Ce serveur fait beaucoup de travail en arrière-plan : il compile votre code TypeScript/JSX (.tsx) en JavaScript standard que les navigateurs peuvent comprendre, et il le fait à la volée à chaque fois que vous modifiez un fichier.

Cependant, GitHub Pages est un service d'hébergement de fichiers statiques. Il ne fait aucune compilation. Il se contente de servir les fichiers que vous lui donnez, tels quels.

Votre fichier index.html contient cette ligne :
<script type="module" src="/index.tsx"></script>

Un navigateur web ne peut pas exécuter un fichier .tsx directement. Il va donc échouer à charger le script, et par conséquent, votre application React ne démarrera jamais, laissant visible uniquement la couleur de fond de votre page (un gris très sombre, bg-gray-900, qui apparaît comme un écran noir).

La solution : Le "Build"

Pour que votre application fonctionne sur GitHub Pages, vous devez la "compiler" ou la "builder" pour la production avant de la déployer. Cette étape de "build" va :

  1. Convertir tous vos fichiers .tsx et .ts en fichiers JavaScript optimisés.

  2. Regrouper votre code et ses dépendances en quelques fichiers pour améliorer les performances.

  3. Créer un dossier (généralement nommé dist ou build) contenant une version de production de votre site.

Voici les étapes à suivre :

  1. Lancer la commande de build : Dans le terminal, à la racine de votre projet, exécutez la commande suivante (selon le gestionnaire de paquets que vous utilisez) :

    • npm run build

    • ou yarn build

  2. Déployer le bon dossier : Après l'exécution de la commande, un nouveau dossier dist (ou build) apparaîtra dans votre projet. C'est le contenu de ce dossier que vous devez configurer pour être déployé sur GitHub Pages, et non la totalité de votre projet avec les fichiers sources.

  3. (Important) Configurer le chemin de base : Si votre dépôt GitHub est nommé mon-projet, votre site sera accessible à https://votre-nom.github.io/mon-projet/. Vous devez indiquer cela à votre outil de build. Si vous utilisez Vite, par exemple, vous devez modifier votre fichier vite.config.ts pour y ajouter la ligne base:

    JavaScript
    import { defineConfig } from 'vite'
    import react from '@vitejs/plugin-react'
    
    // https://vitejs.dev/config/
    export default defineConfig({
      plugins: [react()],
      base: '/mon-projet/' // Remplacez 'mon-projet' par le nom de votre dépôt GitHub
    })

    Après cette modification, relancez la commande npm run build.

En résumé, le processus correct est : développer localement -> builder le projet -> déployer le dossier . En suivant ces étapes, votre application s'affichera correctement sur GitHub Pages.

lundi 25 août 2025

Un agenda Google géré par une feuille de calcul Google Sheets

Cette méthode utilise un script pour lire les données de votre Google Sheets, effacer les événements existants dans un Google Calendar, puis créer de nouveaux événements à partir des données de la feuille. Le script peut être exécuté manuellement pour mettre à jour l'agenda.

Logique du Script

  1. Accéder aux données : Le script se connectera à votre feuille Google Sheets et lira les données de chaque ligne.

  2. Effacer l'agenda : Il effacera tous les événements existants dans l'agenda cible pour éviter les doublons ou la présence d'événements obsolètes.

  3. Itérer et créer les événements : Il parcourra ensuite chaque ligne de votre feuille, créant un nouvel événement dans un Google Calendar spécifié pour chaque ligne.

  4. Définir les détails de l'événement : Le script utilisera les données de vos colonnes pour définir le titre de l'événement, la date, l'heure de début (en ajoutant 3 heures pour l'heure de fin) et la description.

  5. Formater la description : Il lira les en-têtes et les données correspondantes des autres colonnes (lieu, animateur, etc.) et les formatera clairement dans la description de l'événement.

Étapes pour l'implémentation

  1. Créez un Google Calendar dédié : Il est recommandé de créer un nouvel agenda spécialement pour ces événements. Cela évite que le script ne modifie accidentellement votre agenda personnel.

  2. Ouvrez l'éditeur de script : Dans votre Google Sheets, allez dans Extensions > Apps Script. Cela ouvrira un nouvel onglet avec l'éditeur de script.

  3. Collez le code : Copiez le code ci-dessous et collez-le dans l'éditeur. Vous devrez remplacer les identifiants YOUR_SPREADSHEET_ID et YOUR_CALENDAR_ID par les vôtres.

  4. Configurez le script :

    • YOUR_SPREADSHEET_ID : Remplacez par l'ID de votre feuille Google Sheets. Vous le trouvez dans l'URL de votre feuille (c'est la longue chaîne de lettres et de chiffres entre /d/ et /edit).

    • YOUR_CALENDAR_ID : Remplacez par l'ID de votre nouvel agenda. Pour le trouver, allez dans les paramètres de votre Google Calendar, sélectionnez l'agenda que vous avez créé, et cherchez l'ID de l'agenda sous Intégrer l'agenda.

  5. Sauvegardez le script : Cliquez sur l'icône de la disquette pour sauvegarder le projet.

  6. Exécutez le script : Cliquez sur le bouton Exécuter (▶️). La première fois que vous l'exécutez, vous devrez donner au script les autorisations nécessaires pour accéder à votre Google Sheets et Google Calendar.

  7. Intégrez l'agenda : Allez sur votre site Google Sites. Insérez un nouvel élément et sélectionnez Intégrer > Agenda. Sélectionnez l'agenda que vous venez de mettre à jour.

3 modifications à faire du script suivant YOUR_CALENDAR_ID et YOUR_SPREADSHEET_ID'
____________________________________________________________



// Fonction pour effacer tous les événements d'un agenda spécifique
function clearCalendar() {
  const calendarId = 'YOUR_CALENDAR_ID'; // Remplacez par votre ID de calendrier
  const calendar = CalendarApp.getCalendarById(calendarId);
  if (!calendar) {
    Logger.log('Erreur : l\'ID de calendrier est invalide. Veuillez vérifier l\'ID.');
    return;
  }
  const events = calendar.getEvents(new Date('1970-01-01'), new Date('2100-01-01'));
  
  Logger.log('Suppression de ' + events.length + ' événements...');
  for (let i = 0; i < events.length; i++) {
    events[i].deleteEvent();
  }
}

// Fonction pour créer de nouveaux événements à partir de la feuille Google Sheets
function createEventsFromSheet() {
  const spreadsheetId = 'YOUR_SPREADSHEET_ID'; // Remplacez par votre ID de feuille de calcul
  const calendarId = 'YOUR_CALENDAR_ID'; // Remplacez par votre ID de calendrier
  const sheet = SpreadsheetApp.openById(spreadsheetId).getActiveSheet();
  
  // Efface d'abord l'agenda pour éviter les doublons et les événements obsolètes
  clearCalendar();
  
  const dataRange = sheet.getDataRange();
  const values = dataRange.getValues();
  const headers = values[0];
  
  // Saute la première ligne qui contient les en-têtes
  for (let i = 1; i < values.length; i++) {
    const row = values[i];
    
    const eventTitle = row[0];
    const dateStr = row[1]; // Les dates sont lues comme du texte
    const startTimeStr = row[2]; // Les heures sont lues comme du texte
    
    // Vérifie si la ligne contient un titre, une date et une heure de début
    if (eventTitle && dateStr && startTimeStr) {
      
      const [day, month, year] = dateStr.split('/').map(Number);
      const [hour, minute] = startTimeStr.split(':').map(Number);
      
      const startDate = new Date(year, month - 1, day, hour, minute);
      // L'événement dure 3 heures
      const endDate = new Date(startDate.getTime() + 3 * 60 * 60 * 1000); 
      
      // Crée la chaîne de description détaillée à partir des autres colonnes
      let description = '';
      for (let j = 3; j < headers.length; j++) {
        if (headers[j] && row[j]) {
          description += `${headers[j]} : ${row[j]}\n`;
        }
      }
      
      // Crée l'événement dans l'agenda
      try {
        CalendarApp.getCalendarById(calendarId).createEvent(eventTitle, startDate, endDate, {
          description: description
        });
      } catch (e) {
        Logger.log('Impossible de créer l\'événement : ' + eventTitle + ' Erreur : ' + e.message);
      }
    } else {
      // Si la ligne n'a pas de titre, de date ou d'heure de début, la sauter
      Logger.log('Ligne ignorée : ' + row);
    }
  }
}

lundi 18 août 2025

Créer une application avec Android Studio et I.A.

Ouvrir Android Studio 
Créer un nouveau projet. 
Choisir "Empty Activity"
Sous la racine "Android"
Sous-dossiers : App et Gradle Scripts

Donner un nom au projet
    Le nom du package est donné
    Le dossier dans lequel est sauvegardé le projet (AndroidStudioProjects à la racine de l'utilisateur
    SDK minimum API 24
    Language : Kotlin (recommandé par Google)

mercredi 13 août 2025

Créer un site sur Github

 Pour créer un site avec GitHub, utiliser **GitHub Pages**. Voici les étapes principales :

Documentation Github Pages

1. **Crée un dépôt GitHub**  

   - Va sur [github.com](https://github.com) et connecte-toi.

   - Clique sur "New" pour créer un nouveau repository.

   - Donne-lui un nom, par exemple `nomdemonsite.github.io` (pour un site personnel) ou un autre nom pour un site de projet.


2. **Ajoute tes fichiers de site**  

   - Ajoute un fichier `index.html` (page principale).

   - Tu peux aussi ajouter des fichiers CSS, images, etc.


3. **Active GitHub Pages**  

   - Va dans les "Settings" du dépôt.

   - Cherche la section "Pages".

   - Choisis la branche à publier (par exemple `main` ou `gh-pages`), puis le dossier (généralement `/root` pour la racine).

   - Clique sur "Save".


4. **Attends la publication**  

   - GitHub va générer ton site.  

   - Tu verras l’URL de ton site, du type :  

     `https://nomdemonsite.github.io/`  

     ou  

     `https://nomdemonsite.github.io/nom-du-depot/`


5. **Modifie ton site**  

   - Tu peux éditer tes fichiers et les pousser à nouveau sur GitHub, ton site sera mis à jour automatiquement.


**Pour aller plus loin:  

- Tu peux utiliser des générateurs de site statique comme Jekyll, Hugo, ou simplement écrire ton HTML/CSS.

_____________________________________________

  1. Dans le coin supérieur droit de n’importe quelle page, sélectionnez sur , puis cliquez sur Nouveau référentiel.

    Capture d’écran d’un menu déroulant GitHub montrant les options permettant de créer des éléments. L’élément de menu « Nouveau référentiel » est souligné en orange foncé.

  2. Entrez username.github.io comme nom du dépôt Remplacez username par votre nom d’utilisateur GitHub. Par exemple, si votre nom d’utilisateur est octocat, le nom du dépôt doit être octocat.github.io.

    Capture d’écran des paramètres GitHub Pages dans un dépôt. Le champ nom du dépôt contient le texte « octocat.github.io » et est délimité en orange foncé.

  3. Choisissez une visibilité de dépôt. Pour plus d’informations, consultez « À propos des dépôts ».

  4. Sélectionnez Initialize this repository with a README (Initialiser ce dépôt à l’aide d’un fichier LISEZMOI).

  5. Cliquez sur Créer le dépôt.

  6. Sous le nom de votre dépôt, cliquez sur  Paramètres. Si vous ne voyez pas l’onglet « Paramètres », sélectionnez le menu déroulant  , puis cliquez sur Paramètres.

    Capture d’écran d’un en-tête de dépôt montrant les onglets. L’onglet « Paramètres » est mis en évidence avec un encadré orange foncé.

  7. Dans la section « Code et automatisation » de la barre latérale, cliquez sur  Pages.

  8. Sous « Génération et déploiement », sous « Source », sélectionnez Déployer à partir d’une branche.

  9. Sous « Génération et déploiement », sous « Branche », utilisez le menu déroulant Branche et sélectionnez une source de publication.

    Capture d’écran des paramètres Pages dans un dépôt GitHub. Un menu permettant de sélectionner une branche pour une source de publication, intitulé « Aucun », est indiqué en orange foncé.

  10. Ouvrez éventuellement le fichier README.md de votre dépôt. Le fichier README.md est l’endroit où vous allez écrire le contenu de votre site. Vous pouvez modifier le fichier ou conserver le contenu par défaut pour l’instant.

  11. Accédez à username.github.io pour voir votre nouveau site web. Notez qu'il peut s'écouler jusqu'à 10 minutes avant que les modifications apportées à votre site ne soient publiées après avoir été transférées sur GitHub.

  12. https://votre-nom.github.io/nom-du-depot/

samedi 2 août 2025

La BD ALTI dans QGIS

 BD ALTI 25 m par département : https://geoservices.ign.fr/bdalti

Choisir le département
Cliquer sur le lien de téléchargement
Le fichier est au format d'archive  .7Z
Décompresser l'archive
Les dalles sont au format .ASC
Sauvegarder ces dalles dans un dossie

Pour se situerdans QGIS
ID 753 à IGN : Carte de France routière : ID 753 SCANDEP_PYR-JPEG_FXX_WM
IGN : Altitude
IGN : Estompage
IGN : 
Plan IGN J+1
IGN : Plan IGN v2
IGN : Noms (des villes)
IGN : Ortho 20 cm
IGN : Hydrographie
IGN : Estompage haute résolution


ID 2 au BRGM : Carte géologique image de la France au million
ID 6 au BRGM : Carte géologique image de la France au 1/250000
ID 38 au BRGM : Carte d'assemblage des cartes géologiques au 1/50 000e
ID 7 au BRGM : Carte géologique image de la France au 1/50 000e

Dans QGIS :

Ajouter une couche Raster
Lui affecter un nom
Dans le gestionnaire des sources de données, choisir Raster
Dans Source : Jeux de données Raster, développer ...
Rechercher les dalles .ASC 
Sélectionner le groupe de dalles intéressantes
Cliquer sur Ajouter (en bas de la fenêtre)
Les dalles s'affichent.

Fusionner plusieurs dalles (si besoin)

Si tu as plusieurs fichiers .asc ou .tif et veux une seule couche :

  1. Menu Raster > Divers > Fusion

  2. Ajoute les fichiers

  3. Choisis un nom pour le raster fusionné

  4. Laisse les options par défaut

  5. Clique sur "Exécuter"

Appliquer un dégradé de couleur :

  1. Clique droit sur la couche > "Propriétés"

  2. Onglet "Symbologie"

  3. Type : "Pseudocolor à bande unique"

  4. Choisis une rampe de couleurs (par ex. Viridis, Terrain, etc.)

  5. Clique sur "Classer" pour générer les classes

  6. Clique sur OK

Supprimer plusieurs couches

cliquer sur la première couche
shift + cliquer sur la dernière couche. Garder le shift enfoncé.
Cliquer à droire
Menu contextuel > Supprimer les couches

dimanche 27 juillet 2025

Ajouter une couche altitude dans QGIS

Allez dans Couche > Ajouter une couche > Ajouter une couche WMS/WMTS....

Créez une nouvelle connexion en renseignant l'URL du service WMS/WMTS de l'IGN (vous pouvez trouver ces URLs sur la documentation des Géoservices IGN).

Donnez un nom à la connexion et cliquez sur OK.

Rechercher "altitude" avec la loupe

Couche Patrinat_BPM format image/png

Ajouter et Fermer

La France apparaît en petit sur l'écran . Zoomer

Retrouver ses clés API sur IGN

 Aller sur le portail des API IGN :👉 https://geoservices.ign.fr/

Se connecter à votre compte (ou créer un compte si ce n’est pas encore fait) :
Cliquez sur "Connexion" en haut à droite.
Entrez vos identifiants (ou inscrivez-vous).

Une fois connecté, allez dans votre espace personnel :
Cliquez sur votre nom (en haut à droite).
Sélectionnez "Mes clés" dans le menu déroulant.
Vous verrez la liste de vos clés API :
Chaque clé a un nom, une date de création, un statut (active/inactive).
Cliquez sur le nom de la clé pour obtenir les détails complets (clé en clair à copier).