ChatGPT, l’IA qui résout les problèmes de code, mais avec une faille., A Unix Mind In A Windows World
Astuces

ChatGPT, l’IA qui résout les problèmes de code, mais avec une faille.

Des erreurs de code.

Je travaille actuellement sur la conversion d’un site web conçu avec Adobe Muse en VueJS, où l’une des pages a un layout particulier : un bloc (.infoOffre) composé de 4 sous blocs, contenant chacun une image d’illustration (.privat) et un texte descriptif (.nicole).
La position de l’image d’illustration par rapport au texte varie d’un bloc à l’autre : dans le premier et le 3e bloc, l’image est à gauche du texte, tandis que dans le 2e et le 4e bloc, l’image est plutôt à droite du texte.

Rien qui ne puisse être réglé avec des classes CSS alternées. Toutefois, j’avais envie de tester la puissance de Chat GPT.

Je lui ai donc soumis le problème, avec mon code.

L’intelligence artificielle m’a fourni la réponse suivante

<template>
  <div id="lagence">
    <div id="agencewrapper2">
      <div id="ghislaine" class="container">
        <div class="infoOffre" v-for="(offre, index) in agence.offreContenu" :key="offre.id">
          <div v-bind:class="className(index)">
            <div class="nicole">
              <h4>{{ offre.titre }}</h4>
              <p>{{ offre.contenu }}</p>
              <span>{{ offre.souscontenu }}</span>
            </div>
            <div class="privat">
              <img :src="offre.illustration" alt="agence de développement abidjan">
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  layout: 'content',
  async asyncData({ $content, params, app, error }) {
    const agence = await $content(app.i18n.locale, "agence", params.slug)
      .fetch()
      .catch(() => {
        error({ statusCode: 404, message: 'Page not found' })
      })
    return { agence };
  },
  data() {
    return {
      counter: 0
    }
  },
  computed: {
    className(index) {
      if ((index + this.counter) % 2 === 0) {
        return 'normal';
      } else {
        return 'normalalt';
      }
    }
  },
  methods: {
    incrementCounter() {
      this.counter++;
    }
  }
};
</script>

Ce code comporte 2 ou 3 erreurs, a une variable superflue ( counter) et renvoie plus d’informations que nécessaire. En gros, il n’est pas efficace.
Mais surtout, il renvoie l’erreur suivante

_vm.className is not a function

Une bonne pratique est d’utiliser les versions abrégées des attributs. Remplaçons donc

      <div v-bind:class="className(index)">

par

      <div :class="className(index)">

On peut également remplacer les références à className . C’est un point de détail pour certains, mais cette fonction ressemble trop à un attribut de ReactJS.

      <div v-bind:class="nomdelaClasse(index)">
 nomdelaclasse(index) {
      if ((index + this.counter) % 2 === 0) {
        return 'normal';
      } else {
        return 'normalalt';
      }
    }

Ensuite, on peut déplacer la fonction qui permet d’afficher nos classes alternées de computed à methods , étant donné qu’on souhaite que le code s’exécute chaque fois que l’on appelle.

  methods: {
    incrementCounter() {
      this.counter++;
    },
     nomdelaclasse(index) {
      if ((index + this.counter) % 2 === 0) {
        return 'normal';
      } else {
        return 'normalalt';
      }
    }
  }

Enfin, la variable counter ne sert à rien ici, l’index du v-for permet d’avoir une variable incrémentée automatiquement au fur et à mesure que la boucle v-for est executée.

  data() {
    return {
    }
  },
  computed: {
   
  },
  methods: {
     nomdelaclasse(index) {
      if ((index + this.counter) % 2 === 0) {
        return 'normal';
      } else {
        return 'normalalt';
      }
    }
  }
};

Ce qui donne le code ci-dessous

<template>
  <div id="lagence">
    <div id="agencewrapper2">
      <div id="ghislaine" class="container">
        <div class="infoOffre" v-for="(offre, index) in agence.offreContenu" :key="offre.id">
          <div v-bind:class="nomdelaclasse(index)">
            <div class="nicole">
              <h4>{{ offre.titre }}</h4>
              <p>{{ offre.contenu }}</p>
              <span>{{ offre.souscontenu }}</span>
            </div>
            <div class="privat">
              <img :src="offre.illustration" alt="agence de développement abidjan">
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  layout: 'content',
  async asyncData({ $content, params, app, error }) {
    const agence = await $content(app.i18n.locale, "agence", params.slug)
      .fetch()
      .catch(() => {
        error({ statusCode: 404, message: 'Page not found' })
      })
    return { agence };
  },
  data() {
    return {
    }
  },
  computed: {

  },
  methods: {
     nomdelaclasse(index) {
      if ((index) % 2 === 0) {
        return 'normal';
      } else {
        return 'normalalt';
      }
    }
  }
};
</script>

Pour résumer,

ChatGPT est un outil fantastique et une avancée sans précédent dans le domaine de l’intelligence artificielle. Toutefois, en ce qui concerne le code, il y a, pour l’instant, un manque de qualité . En d’autres termes, le modèle n’est pas encore l’ensemble de sous données nécessaires pour produire un code sans faille.

Évitez donc d’aller plaquer du code récupéré sur ChatGPT çà et là dans vos applications web sans le vérifier auparavant.

Utilisez plutôt Stack Overflow pour cela 🙂

Jean-Luc Houédanou

Jean-Luc Houédanou
Jean-Luc Houédanou est un blogueur spécialisé dans l'innovation et la transformation numérique, avec une expérience en développement web front-end. Après avoir obtenu un Master en gestion du commerce électronique de l'Université de Sherbrooke, il a travaillé sur des projets d'envergure mondiale pour diverses entreprises, startups et organisations internationales. Il est également impliqué dans des projets communautaires et technologiques en Afrique. Il aide, par le biais de ce blog, les lecteurs à s'adapter aux évolutions rapides de la technologie et des tendances du marché. En plus de ses articles sur l'innovation et la transformation numérique, Jean-Luc Houédanou écrit également des colonnes d'opinion et donne des conseils sur le bien-être mental. Son objectif est d'aider les lecteurs à se développer personnellement et professionnellement, en leur fournissant des conseils pratiques pour gérer le stress et améliorer leur qualité de vie.

Laisser un commentaire

Votre adresse e-mail ne sera pas publiée. Les champs obligatoires sont indiqués avec *