Comment créer un en-tête dynamique pour Twitter

Au milieu de l’année 2021, une nouvelle tendance de conception de Twitter est apparue : les en-têtes mis à jour dynamiquement. Les développeurs ont décidé que les en-têtes statiques étaient ennuyeux et que les en-têtes dynamiques de Twitter étaient la voie à suivre.

Depuis lors, de nombreux développeurs (dont moi) ont créé des bandeaux dynamiques sur Twitter. Mais qu’est-ce que cela signifie réellement ?

L’idée est d’utiliser une bibliothèque de traitement d’images pour créer et ajouter plusieurs images ensemble de manière programmatique, puis de télécharger la version finale sur Twitter

Group-1

Cette idée a ouvert de nombreuses possibilités pour les utilisateurs de Twitter, puisque vous pouvez désormais utiliser les en-têtes Twitter pour présenter ou faire de la publicité pour tout ce que vous voulez.

En fait, certains développeurs en ont fait un produit SaaS. Mais dans mon cas, je voulais juste garder le minimum et afficher seulement mes followers actuels et un message d’accueil personnalisé. Voici le résultat final de ce que nous allons construire ici :

Web-capture_6-10-2021_84628_twitter.com

Dans ce tutoriel, vous apprendrez à créer une bannière Twitter qui est mise à jour dynamiquement avec les photos de profil de vos abonnés actuels toutes les 60 secondes.

Que devez-vous savoir pour suivre ce tutoriel ? Des connaissances de base sur Node.js et JavaScript seront extrêmement utiles pour que vous puissiez tirer le meilleur parti de ce que nous apprenons ici.

Pour créer notre en-tête Twitter dynamique, nous allons utiliser Nodejs et la bibliothèque de traitement d’images sharp. Nous allons utiliser sharp pour créer et fusionner des morceaux de notre en-tête dynamique.

Pour commencer, vous allez avoir besoin d’une nouvelle bannière. Pour cela, vous pouvez utiliser votre logiciel d’édition d’image préféré, mais dans mon cas, j’ai utilisé Figma.

J’ai ouvert Figma et créé une nouvelle bannière Twitter de 1500px x 500px. J’ai ensuite ajouté des boîtes et du texte factices pour visualiser où j’allais placer les choses avec netteté par la suite.

Screenshot--3-

Comment créer une application Twitter

Pour continuer, vous allez avoir besoin d’un compte Twitter Developer. Un compte de développeur vous permet d’interagir avec l’API de Twitter. Si vous n’avez pas encore de compte de développeur, rendez-vous sur le portail des développeurs Twitter et créez-en un.

Pour interagir pleinement avec l’API Twitter, par exemple pour extraire des tweets ou des followers, vous aurez besoin de quelques clés d’accès.

Pour obtenir ces clés d’accès, vous devez créer une application Twitter. Connectez-vous à votre tableau de bord et créez une nouvelle application Twitter avec un nom unique. Une fois que vous avez terminé, cliquez sur l’onglet clés et jetons.

Screenshot--11-

Copiez vos jetons d’accès et enregistrez-les dans votre presse-papiers ou dans un fichier texte pour le moment. Cliquez ensuite sur Générer des secrets, et copiez-les également.

Screenshot--15-

En outre, il est important que vous mettiez à jour les autorisations de votre application Twitter en cliquant sur le bouton « Modifier » :

Screenshot--12-

Une fois que vous avez cliqué sur le bouton d’édition, allez-y et sélectionnez la permission Lire et écrire des messages directs :

Voir aussi :  Comment réussir en tant qu'entrepreneur - Le guide du développeur pour la stratégie et la conception d'une startup
Screenshot--13-

Comment mettre en place le projet

Ouvrez votre éditeur de code, et une fois que vous êtes dans le répertoire de votre choix, ouvrez votre terminal. J’utilise le terminal intégré de Visual Studio Code. Allez-y et créez un nouveau répertoire :

mkdir twitter-banner

Ensuite, vous devez cd votre chemin dans ce nouveau répertoire, donc allez-y et exécutez :

cd twitter-banner

Une fois que vous êtes dans ce répertoire, créons notre projet Node.js en exécutant cette commande :

npm init -y

En ce moment, vous avez un projet Nodejs vide, alors allons-y et installons toutes les dépendances dont nous aurons besoin.

Toujours dans le répertoire du projet et dans votre terminal, exécutez ce qui suit :

npm i dotenv axios sharp twitter-api-client

Nous utiliserons dotenv pour lire nos variables environnementales. axios nous permet de télécharger des images à distance. Le twitter-api-client est ce que nous allons utiliser pour établir et communiquer avec Twitter. Et enfin sharp est une bibliothèque de traitement d’image que nous utiliserons dans ce tutoriel pour créer notre en-tête dynamique.

Avant de continuer, vous devez créer un fichier .env et ajouter les clés d’accès et les secrets que vous avez copiés de Twitter plus tôt :

Screenshot--10-

Créez un fichier index.js avec le code suivant :

// étape 1
const dotenv = require("dotenv") ;
dotenv.config() ;
const {TwitterClient } = require("twitter-api-client") ;
const axios = require("axios") ;
const sharp = require("sharp") ;

// étape 2
const twitterClient = new TwitterClient({
  apiKey : process.env.API_KEY,
  apiSecret : process.env.API_SECRET,
  accessToken : process.env.ACCESS_TOKEN,
  accessTokenSecret : process.env.ACCESS_SECRET,
}) ;

// étape 3
async function get_followers() {
  const followers = await twitterClient.accountsAndUsers.followersList({
    count : 3,
  }) ;

  console.log(followers) ;
}

// appelle la fonction
get_followers()

Dans ce code, nous importons nos dépendances installées et les stockons dans des variables, par exemple sharp = require("sharp").

Dans la deuxième étape, nous nous connectons à Twitter.

Et enfin, nous avons créé une fonction get_followers(). En utilisant notre twitter-api-client nous avons récupéré nos followers, et en utilisant le paramètre count nous avons restreint la récupération à seulement 3 followers.

💡 Voici une astuce : si vous vivez dans un pays où Twitter n’est pas disponible actuellement (comme moi), vous pouvez installer un VPN sur votre système.

Maintenant, ouvrez votre fichier package.json et ajoutez un script de démarrage "start" : "node index.js" comme ceci :

Screenshot--8-

Maintenant, exécutez npm start, et si tout fonctionne bien, vous devriez voir vos 3 followers imprimés sur la console :

Screenshot--9-

Comment récupérer les followers de Twitter

Pour démarrer, nous allons commencer par récupérer nos followers récents depuis Twitter, ce que nous avons déjà fait dans la dernière section. Il suffit de modifier votre fichier index.js avec le code suivant :

...
async function get_followers() {
  const followers = await twitterClient.accountsAndUsers.followersList({
    screen_name : process.env.TWITTER_HANDLE,
    count : 3,
  }) ;

  const image_data = [] ;
  let count = 0 ;

  const get_followers_img = new Promise((resolve, reject) => {
    followers.users.forEach((follower, index,arr) => {
      process_image(
        follower.profile_image_url_https,
        `${follower.screen_name}.png`
      ).then(() => {
        const follower_avatar = {
          entrée : `${follower.screen_name}.png`,
          top : 380,
          left : parseInt(`${1050 + 120 * index}`),
        } ;
        image_data.push(follower_avatar) ;
        count++ ;
        si (count === arr.length) resolve() ;
      }) ;

    }) ;
  }) ;

Décomposons un peu ce code : nous avons d’abord créé une fonction get_followers(). À l’intérieur de la fonction, nous avons récupéré nos followers récents et les avons enregistrés dans la variable followers. Ensuite nous avons créé une nouvelle Promise appelée get_followers_img et pour chacun des followers nous avons appelé une fonction process_img():

process_image(
        follower.profile_image_url_https,
        `${follower.screen_name}-${index}.png`
      )

La fonction prend deux paramètres : l’URL de l’image du follower et le nom de l’image (pour lequel nous avons utilisé le nom d’écran du follower ${follower.screen_name}.png).

Voir aussi :  Comment utiliser les plugins dans Figma

Une autre chose que je voulais souligner est la donnée follower_img_data. Vous vous souvenez quand j’ai dit que nous allions créer et ajouter plusieurs images ensemble ? Pour faire cela, vous avez besoin de trois propriétés :

  1. entrée : Le chemin vers le fichier
  2. top : Position verticale de l’image
  3. gauche : Position horizontale

Nous poussons chacune des follower_img_data dans notre tableau image_data:

image_data.push(follower_img_data) ;

Enfin, nous vérifions si tous les processus sont terminés et nous les résolvons :

...
count++ ;
si (count === arr.length) resolve() ;

Comment traiter les images

Dans l’étape précédente, nous avons appelé une fonction process_img() que nous n’avons pas encore créée. Dans cette étape, nous allons créer cette fonction.

Dans votre index.js, créez la fonction avec le code suivant :

...
async function process_image(url, image_path) {
  await axios({
    url,
    responseType : "arraybuffer",
  }).then(
    (réponse) =>
      new Promise((resolve, reject) => {
        const rounded_corners = new Buffer.from(
          ''
        ) ;
        resolve(
          sharp(réponse.données)
            .resize(100, 100)
            .composite([
              {
                input : rounded_corners,
                blend : "dest-in",
              },
            ])
            .png()
            .toFile(chemin_image)
        ) ;
      })
  ) ;
}

sharp ne supporte pas l’utilisation d’images distantes (images non stockées sur votre système de fichiers), nous utiliserons donc axios pour télécharger les images distantes depuis Twitter. Puis finalement, lorsque nos promesses seront résolues, nous utiliserons sharp pour redimensionner et sauvegarder les images dans Buffer sur notre système de fichiers en utilisant toFile(image_path).

Note : Buffer fait ici référence à la mémoire utilisée pour stocker temporairement des données (et dans notre cas des images). Vous pouvez utiliser ces données comme si elles se trouvaient dans votre système de fichiers.

Vous remarquerez également que nous avons créé une variable rounded_corners dans laquelle nous avons dessiné un rectangle avec svg :

const rounded_corners = new Buffer.from('
    
        
    
') ;

Pour que notre rectangle créé imite une image arrondie, il doit :

  • a la même taille que notre image redimensionnée 100
  • son rayon vertical et horizontal est la moitié de la taille de notre image redimensionnée 50

Comment créer le texte

Tout doit être une image – même le texte. Pour créer du texte avec précision, nous devons le créer sous forme d’images SVG et le sauvegarder dans le stockage Buffer. Maintenant, dans votre fichier index.js, créez une fonction appelée create_text():

...
async function create_text(width, height, text) {
  essayez {
    const svg_img = `${text}
    
    ` ;
    const svg_img_buffer = Buffer.from(svg_img) ;
    retourne svg_img_buffer ;
  } catch (erreur) {
    console.log(erreur) ;
  }
}

La fonction create_text() prend trois paramètres :

  1. width : largeur de l’image
  2. height : hauteur de l’image
  3. text : texte réel que vous voulez écrire, par exemple Hello World

Comment dessiner la bannière Twitter

Jusqu’à présent, tout va bien ! Nous avons créé et traité plusieurs images, et maintenant vient la partie amusante : ajouter ces images ensemble pour créer une nouvelle image.

Pour commencer, retournez à votre fonction get_followers() et ajoutez ceci à la fin :

  get_followers_img.then(() => {
     draw_image(image_data) ;
  }) ;

Maintenant, créons la fonction draw_image que nous venons d’appeler. Créez une nouvelle fonction draw_image dans votre fichier index.js comme ceci :

...
fonction asynchrone draw_image(image_data) {
  try {
    const hour = new Date().getHours() ;
    const welcomeTypes = ["Morning", "Afternoon", "Evening"] ;
    let welcomeText = "" ;

    if (hour < 12) welcomeText = welcomeTypes[0] ;
    else if (hour < 18) welcomeText = welcomeTypes[1] ;
    sinon welcomeText = welcomeTypes[2] ;

    const svg_greeting = await create_text(500, 100, welcomeText) ;

    image_data.push({
      input : svg_greeting,
      top : 52,
      left : 220,
    }) ;

    await sharp("twitter-banner.png")
      .composite(image_data)
      .toFile("new-twitter-banner.png") ;

    // télécharge la bannière sur twitter
    upload_banner(image_data) ;
  } catch (erreur) {
    console.log(error) ;
  }
}

La première chose que nous avons faite dans ce code a été de créer un texte d’accueil en fonction de l’heure de la journée. Ensuite, à l’aide de la fonction create_text() que nous avons créée plus tôt, nous avons créé et enregistré le message d’accueil sous forme d’image tampon SVG :

const svg_greeting = await create_text(500, 100, welcomeText) ;

L’étape suivante consistait à ajouter notre nouvelle image tampon à notre tableau de données d’image :

    image_data.push({
      input : svg_greeting,
      top : 52,
      left : 220,
    }) ;

Notez que j’ai obtenu les valeurs de haut et de gauche à partir du design Figma (ne les inventez pas !).

Voir aussi :  Comment créer un sélecteur de mode sombre avec Tailwind CSS et Flowbite

Ensuite, nous avons combiné nos multiples images en une seule en utilisant .composite(image_data) et l’avons enregistrée dans un nouveau fichier appelé new-twitter-banner.png.

    await sharp("twitter-banner.png")
      .composite(image_data)
      .toFile("new-twitter-banner.png") ;

Enfin, une fois que nous avons réussi à créer notre nouvelle image, nous appelons la fonction upload_banner(). Comme son nom l’indique, elle nous permet de télécharger notre nouvelle bannière Twitter sur Twitter.

Comment télécharger la bannière sur Twitter

Pour télécharger notre nouvelle bannière sur Twitter, nous devons d’abord lire l’image depuis notre système de fichiers. Nous avons donc besoin d’un nouveau module. Ne vous inquiétez pas – nous n’allons pas l’installer, il est fourni avec NodeJs.

En haut de index.js où nous avons requis d’autres modules, ajoutez ce qui suit :

// autres modules
const fs = require("fs") ;

Puis au bas de votre fichier index.js, créez une fonction upload_banner() avec le code suivant :

async function upload_banner(files) {
  try {
    const base64 = await fs.readFileSync("new-twitter-banner.png", {
      encodage : "base64",
    }) ;
    await twitterClient.accountsAndUsers
      .accountUpdateProfileBanner({
        bannière : base64,
      })
      .then(() => {
        console.log("Téléchargement sur Twitter effectué") ;
        delete_files(files) ;
      }) ;
  } catch (erreur) {
    console.log(erreur) ;
  }
}

Remarquez que nous avons appelé une autre fonction delete_files() une fois l’image téléchargée sur Twitter. En effet, nous ne voulons pas que notre serveur soit rempli d’images de nos nouveaux followers, donc après chaque téléchargement réussi, nous supprimons les images :

...
fonction asynchrone delete_files(files) {
  try {
    files.forEach((file) => {
      si (file.input.includes('.png')) {
        fs.unlinkSync(fichier.input) ;
        console.log("Fichier supprimé") ;
      }
    }) ;
  } catch (err) {
    console.error(err) ;
  }
}

La fonction ci-dessus vérifie nos données d'image (maintenant appelées fichiers) et pour chaque entrée, elle vérifie si l’entrée inclut .png. Elle fait cela parce que certaines de nos images (texte SVG) sont des tampons et ne sont pas enregistrées dans notre système de fichiers. Ainsi, tenter de les supprimer entraînerait une erreur.

Enfin, nous voulons exécuter la fonction get_followers() tous les 60s car c’est là que tout commence :

...
get_followers() ;
setInterval(() => {
  get_followers() ;
}, 60000) ;

Et c’est tout ! Si vous êtes intéressés, le code complet est sur Github :

GitHub – iamspruce/twitter-banner : Un script NodeJs simple pour mettre à jour ma bannière Twitter avec les images des nouveaux followers

Un simple script NodeJs pour mettre à jour ma bannière Twitter avec les images des nouveaux abonnés – GitHub – iamspruce/twitter-banner : Un simple script NodeJs pour mettre à jour ma bannière Twitter avec les images des nouveaux abonnés

twitter-banner

Conclusion

Si vous êtes arrivé jusqu’ici, félicitations ! Vous devriez maintenant voir votre en-tête Twitter dynamique. Et selon l’heure de la journée, vous devriez voir un message d’accueil – dans mon cas, c’est le matin au moment où j’écris ces lignes :

Web-capture_2-10-2021_105540_twitter.com

Le reste dépend maintenant de votre créativité. Si vous avez créé quelque chose de merveilleux avec cela, n’hésitez pas à le tweeter et à me taguer @sprucekhalifa. Et n’oubliez pas de cliquer sur le bouton « suivre ».

Alors je vous le dis : « Allez dans le monde et soyez créatifs ». Oh et bon codage !