Nombre d'articles trouvés : 34

Auteur/autrice : Teddy Kishi

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.