Catégorie : Développement

Comment afficher plusieurs repères sur Google Maps à partir d’adresses dans un fichier Excel

Posté le Mis à jour le par Teddy Kishi
Temps de lecture : 3 minutes
Écouter cet article

Si vous travaillez avec un grand nombre d’adresses, vous savez combien il peut être fastidieux de les copier-coller une à une dans Google Maps. Heureusement, il existe une solution simple et efficace : importer directement un fichier CSV contenant vos adresses dans Google Maps via My Maps.

Dans cet article, nous vous expliquons pas à pas comment créer une carte personnalisée avec vos adresses, ainsi que quelques astuces pour optimiser l’importation et l’utilisation de votre carte.

Étape 1 : Préparer votre fichier CSV

Avant de commencer, il est essentiel de structurer correctement votre fichier Excel et de l’exporter au format CSV (Comma-Separated Values). Voici les bonnes pratiques à suivre :

  1. Structure des colonnes :
    • Créez une colonne nommée Adresse, qui contiendra toutes vos adresses complètes.
    • Vous pouvez ajouter d’autres colonnes optionnelles comme Nom ou Description pour personnaliser les points d’intérêt sur la carte.
  2. Format du fichier CSV :
    • Assurez-vous que les colonnes sont séparées par des virgules.
    • Enregistrez le fichier avec l’encodage UTF-8. Cela évitera les problèmes d’affichage des caractères spéciaux (accents, symboles, etc.) lors de l’importation.

Pour exporter votre fichier depuis Excel :

  • Cliquez sur Fichier > Enregistrer sous.
  • Choisissez le format CSV (délimité par des virgules).
  • Sélectionnez l’encodage UTF-8 si cette option est disponible.

Étape 2 : Importer le fichier dans Google My Maps

Une fois votre fichier CSV prêt, rendez-vous sur Google My Maps pour créer votre carte.

  1. Accédez à Google My Maps.
  2. Cliquez sur + Créer une nouvelle carte.
  3. Dans le panneau de gauche, cliquez sur Importer.
  4. Sélectionnez votre fichier CSV préalablement enregistré.
  5. Google vous demandera de choisir la colonne contenant les adresses à afficher. Sélectionnez la colonne Adresse.
  6. Définissez une colonne pour les noms ou descriptions si vous en avez ajouté une.

Après quelques secondes, Google Maps placera automatiquement des marqueurs sur votre carte à chaque adresse mentionnée.

Étape 3 : Personnaliser votre carte

Vous pouvez personnaliser l’apparence de votre carte pour la rendre plus attractive et lisible.

  • Modifier les icônes et couleurs : Cliquez sur un marqueur, puis sur l’icône de peinture pour changer son apparence.
  • Ajouter des couches : Vous pouvez organiser vos adresses en différentes catégories, par exemple par ville ou par type d’emplacement.
  • Ajouter des descriptions : Cliquez sur chaque marqueur pour ajouter des détails supplémentaires.

Étape 4 : Partager et exploiter votre carte

Google My Maps permet de partager vos cartes avec d’autres utilisateurs ou de les rendre publiques. Voici comment procéder :

  1. Cliquez sur Partager dans le panneau de gauche.
  2. Définissez les autorisations de partage :
    • Privé : seuls les utilisateurs ayant un lien peuvent y accéder.
    • Public : tout le monde peut consulter votre carte.

Vous pouvez partager le lien par e-mail, le publier sur les réseaux sociaux ou l’intégrer à votre site Web.

Cas d’utilisation pratiques

Voici quelques exemples de situations où cette fonctionnalité peut vous être utile :

  1. Planification de voyage : Créez un itinéraire avec tous les sites à visiter, les hôtels et les restaurants.
  2. Gestion commerciale : Visualisez vos clients ou points de vente sur une carte pour optimiser vos tournées.
  3. Organisation d’événements : Localisez les différents lieux d’un événement (parking, scène principale, entrées).
  4. Analyse géographique : Comparez la répartition de vos points d’intérêt selon les zones géographiques.

N’hésitez pas à tester ces options pour trouver celle qui correspond le mieux à vos besoins.

Pour finir…

Importer un fichier CSV d’adresses dans Google Maps est une solution pratique pour visualiser rapidement vos données géographiques. En suivant ce tutoriel, vous gagnez du temps et pouvez exploiter votre carte de manière optimale, que ce soit pour le travail ou les loisirs.

Préparez votre fichier, essayez Google My Maps dès aujourd’hui et explorez toutes les possibilités offertes par cet outil puissant !

Laravel : Ajouter une fonction globale pour afficher les chiffres façon YouTube

Posté le Mis à jour le par Teddy Kishi
Temps de lecture : 2 minutes
Écouter cet article

Tu veux afficher des chiffres de manière simplifiée dans ton application Laravel, comme sur YouTube ou Instagram ? Par exemple, transformer 1 000 en 1K, 1 000 000 en 1M, etc.

Bonne nouvelle : c’est simple ! Dans ce tuto rapide, on va créer une fonction globale que tu pourras réutiliser partout dans ton application Laravel.

Pourquoi créer une fonction globale dans Laravel ?

Créer une fonction globale permet de :

  • Simplifier ton code en évitant les répétitions.
  • Faciliter les modifications futures.
  • Améliorer la lisibilité et la maintenance du projet.

C’est pratique, rapide, et très simple à mettre en place.

Étape 1 : Créer un fichier « helpers.php »

Commence par créer un dossier Helpers dans le dossier app de Laravel si celui-ci n’existe pas déjà. Ensuite, crée un fichier nommé helpers.php à cet endroit :

app/Helpers/helpers.php

Voici le contenu du fichier avec notre fonction magique :

if (! function_exists('format_number')) {
    /**
     * Formate un nombre en version courte (1K, 1M, 1B...).
     *
     * @param int|float $number
     * @return string
     */
    function format_number($number)
    {
        if ($number < 1000) {
            return $number;
        } elseif ($number < 1000000) {
            return round($number / 1000, 1) . 'K';
        } elseif ($number < 1000000000) {
            return round($number / 1000000, 1) . 'M';
        } else {
            return round($number / 1000000000, 1) . 'B';
        }
    }
}

Étape 2 : Charger automatiquement ta fonction globale

Ouvre ton fichier composer.json situé à la racine de ton projet Laravel, et cherche la section autoload. Ajoute le chemin vers ton fichier comme ceci :

"autoload": {
    "files": [
        "app/Helpers/helpers.php"
    ]
}

Puis, exécute la commande suivante dans ton terminal afin d’appliquer les changements :

composer dump-autoload

Maintenant ta fonction est chargée automatiquement dans toute ton application Laravel !

Étape 3 : Utiliser ta fonction partout

Tu peux désormais utiliser ta fonction format_number aussi bien dans tes contrôleurs que dans tes vues Blade très facilement.

Par exemple, dans un contrôleur :

public function dashboard()
{
    $followers = 4500;
    $formattedFollowers = format_number($followers);

    return view('dashboard', compact('formattedFollowers'));
}

Et directement dans une vue Blade :

<p>{{ format_number(1250) }} abonnés</p>

Résultat :

1.3K abonnés

Voilà, tu as désormais une fonction globale simple et efficace pour afficher des chiffres raccourcis à la manière de YouTube ou Instagram dans ton application Laravel. N’hésite pas à l’adapter à tes besoins spécifiques ou à la rendre plus sophistiquée selon les cas.

Bonne programmation ! 🚀

Communication en temps réel entre une page web et un Arduino avec Node.js et Socket.IO

Posté le Mis à jour le par Teddy Kishi
Temps de lecture : 2 minutes
Écouter cet article

Vous souhaitez créer une interaction dynamique entre une page web et un Arduino ? Grâce à Node.js et Socket.IO, il est possible d’établir une communication bidirectionnelle en temps réel. Dans cet article, nous allons voir comment envoyer des messages depuis un formulaire web vers un Arduino Uno, traiter ces messages et renvoyer une réponse affichée sur la page web.

Matériel et logiciels nécessaires

  • Arduino Uno : la carte microcontrôleur.
  • Câble USB : pour connecter l’Arduino à l’ordinateur.
  • Ordinateur : avec Node.js installé.
  • Bibliothèques Node.js : Express, Socket.IO et SerialPort.

Étapes de mise en place

Configurer le Serveur Node.js : Créez un fichier server.js et ajoutez le code suivant : 

const express = require('express');
const http = require('http');
const socketIo = require('socket.io');
const SerialPort = require('serialport');
const Readline = require('@serialport/parser-readline');

const app = express();
const server = http.createServer(app);
const io = socketIo(server);

// Remplacez '/dev/ttyACM0' par le port série de votre Arduino
const port = new SerialPort('/dev/ttyACM0', { baudRate: 9600 });
const parser = port.pipe(new Readline({ delimiter: '\n' }));

app.use(express.static('public'));

io.on('connection', (socket) => {
  console.log('Un client est connecté');

  socket.on('messageToArduino', (msg) => {
    port.write(msg + '\n');
  });

  parser.on('data', (data) => {
    socket.emit('messageFromArduino', data);
  });
});

server.listen(3000, () => {
  console.log('Serveur à l\'écoute sur le port 3000');
});

Ce code crée un serveur web qui sert des fichiers statiques depuis le dossier public, écoute les connexions Socket.IO et communique avec l’Arduino via le port série.

Créer la page web : Dans le dossier public, créez un fichier index.html avec le contenu suivant : 

<!DOCTYPE html>
<html lang="fr">
<head>
  <meta charset="UTF-8">
  <title>Communication Web-Arduino</title>
</head>
<body>
  <h1>Envoyer un message à l'Arduino</h1>
  <form id="form">
    <input type="text" id="input" placeholder="Entrez votre message" required>
    <button type="submit">Envoyer</button>
  </form>
  <h2>Réponse de l'Arduino :</h2>
  <pre id="response"></pre>

  <script src="/socket.io/socket.io.js"></script>
  <script>
    const socket = io();
    const form = document.getElementById('form');
    const input = document.getElementById('input');
    const response = document.getElementById('response');

    form.addEventListener('submit', function(e) {
      e.preventDefault();
      socket.emit('messageToArduino', input.value);
      input.value = '';
    });

    socket.on('messageFromArduino', function(msg) {
      response.textContent = msg;
    });
  </script>
</body>
</html>

Cette page permet à l’utilisateur d’envoyer un message à l’Arduino via un formulaire et d’afficher la réponse reçue.

Programmer l’Arduino : Utilisez le code suivant pour votre Arduino : 

void setup() {
  Serial.begin(9600);
}

void loop() {
  if (Serial.available() > 0) {
    String message = Serial.readStringUntil('\n');
    int separatorIndex = message.indexOf(':');
    if (separatorIndex != -1) {
      String key = message.substring(0, separatorIndex);
      String value = message.substring(separatorIndex + 1);
      key.trim();
      value.trim();
      String response = "Clé: " + key + " | Valeur: " + value;
      Serial.println(response);
    } else {
      Serial.println("Format invalide. Utilisez 'clé:valeur'");
    }
  }
}

Ce programme lit les messages reçus, les analyse pour extraire une clé et une valeur, puis renvoie une réponse appropriée.

Lancer l’application

Installer les dépendances : Dans le dossier de votre projet, exécutez :

  npm install express socket.io serialport @serialport/parser-readline

Démarrer le serveur : Lancez le serveur avec :

  node server.js

Accéder à l’interface web : Ouvrez votre navigateur à l’adresse http://localhost:3000 pour utiliser le formulaire et interagir avec l’Arduino.

En suivant ces étapes, vous pouvez établir une communication en temps réel entre une page web et un Arduino, permettant des interactions dynamiques pour divers projets. N’hésitez pas à adapter et étendre cet exemple pour répondre à vos besoins spécifiques.