Partie 2 / Blogs / Perficient

Dans la deuxième partie de cette série, nous expliquons comment les professionnels peuvent tirer parti ChatGPT coder. Ce blog explique comment procéder avec la version gratuite et payé version.

Aperçu

Si vous lisez la première partie, vous saurez qu’il était souvent possible de faire en sorte que la version 3.5 soit proche du niveau 4. Juste un avertissement avant de commencer, cela n’est pas possible pour certains des aspects les plus utiles de l’utilisation de ChatGPT-4 pour le code. . J’indiquerai quelques utilisations du 3,5, mais lorsque nous passerons au 4, j’expliquerai pourquoi l’investissement en vaut la peine et en quoi le 3,5 est insuffisant.

Tirer parti de ChatGPT-3.5 pour le code

Passe-partout

ChatGPT-3.5 excelle dans la production de données banales mais coutume code. Par exemple, un template Vue, mais avec plusieurs complications déjà intégrées :

Rapide: Générez un modèle Vue pour un composant NoteCard. Contrôlez s’il apparaît via le calcul qui vérifie à la fois un accessoire ShouldAppear et s’il a un titre et une description qui ne sont pas nuls. Il doit éventuellement prendre un lien, qui n’apparaîtra pas s’il n’y a pas de destination du lien, et indiquer « Lien » si aucun texte de lien n’est fourni. Fournissez un appel d’API fictif dans le montage qui vérifie un point de terminaison pour voir si ce point de terminaison contient des données. Pendant que l’appel d’API est en cours, le chargement doit être défini sur true et différents styles appliqués lors du chargement sont vrais.

Je vais souligner ce qu’il fait bien et mal ci-dessous, vous pouvez consulter la réponse complète du code à la fin :

<template>
  <div class="note-card" v-if="shouldAppear && (title || description)">
    <div class="note-card-content">
      <h3>{{ title }}</h3>
      <p>{{ description }}</p>
      <a v-if="https://blogs.perficient.com/2024/02/07/leveraging-chatgpt-for-professionals-part-2/linkDestination" :href="https://blogs.perficient.com/2024/02/07/leveraging-chatgpt-for-professionals-part-2/linkDestination">{{ linkText || 'Link' }}</a>
    </div>
    <div class="note-card-loader" v-if="loading">
      <!-- Loading styles go here -->
      Loading...
    </div>
  </div>
</template>

<script>
export default {
  props: {
...
  },
  data() {
...
  },
  computed: {
    // Computed property to check if the card should appear
    isVisible() {
      return this.shouldAppear && (this.title || this.description);
    },
  },
  mounted() {
    if (this.linkDestination) {
      // Simulate an API call
      this.loading = true;
      ...
      }, 2000); // Simulate a 2-second API call
    }
  },
};
</script>

<style scoped>
...
</style>

Le bon:

• Cela comprenait tout ce que j’ai dit
• Il simule automatiquement un délai sur l’appel d’API, afin que je puisse tester la sensation du chargement sans avoir besoin de connecter l’API.

Le mauvais:

• Il n’a pas interprété correctement mon « chargement signifie différents styles »
• Il n’utilise pas la propriété calculée « isVisible », même s’il a une logique en double.
• Je n’ai pas demandé de styles, sauf peut-être en faisant allusion à un espace réservé pour charger les styles.
• Quelques violations des bonnes pratiques Vue

Bien sûr, ChatGPT-4 a fait toutes ces choses correctement dès la première invite.

Mais une solution est facile. Je l’ai demandé :

Utilisez la propriété calculée, ne dupliquez pas le code. Ne me donnez pas de styles, juste un espace réservé pour le chargement. De plus, je souhaite changer de style lorsque le chargement est vrai, sans avoir d’éléments DOM différents. Suivez les bonnes pratiques de codage Vue.

Cela a corrigé toutes les erreurs majeures et l’a rendu presque identique au résultat de ChatGPT-4.

Des questions

Aide sur la méthode

Pour la plupart, j’ai complètement arrêté de chercher sans fin dans la documentation et qui sait quoi d’autre, comme ChatGPT peut me le dire tout de suite. Par exemple:

Rapide: J’utilise indexOf(‘six’) en Javascript pour essayer de trouver où se trouve le mot « six » dans une chaîne, mais je veux la dernière occurrence, pas la première.

ChatGPT-3.5 :

Le indexOf La méthode en JavaScript renvoie uniquement l’index de la première occurrence de la sous-chaîne spécifiée dans la chaîne donnée. Si vous souhaitez trouver l’index de la dernière occurrence de « six » dans une chaîne, vous pouvez utiliser l’approche suivante :

var str = « Ceci sont les six premiers. Il y en a six autres ici. Et les six derniers sont ici. » ; var lastIndex = str.lastIndexOf(« six »); console.log(« La dernière occurrence de ‘six’ est à l’index : ” + lastIndex);

Dans cet exemple, nous utilisons le lastIndexOf méthode au lieu de indexOf. Il recherchera la dernière occurrence de « six » dans la chaîne et renverra son index. Le résultat sera l’index de la dernière occurrence de « six » dans la chaîne.

Je recommande toujours de lire la documentation en matière de sécurité et, en général, je suggère de consulter la documentation. Cependant, les petites nuances de langage comme l’exemple ci-dessus et d’autres fonctionnalités banales sont beaucoup plus faciles à rechercher avec ChatGPT.

Expliquez ce code

Dans quelle mesure ce que fait ce code est-il évident dès le départ ?

let options = props.options.map((locationNamePair, index) => {
  return (
    <Link href={locationNamePair[0]} key={index + locationNamePair[0]}>
      <a className={styles.optionsLink}>{locationNamePair[1]}</a>
    </Link>
  );
});

let mobileStructureOnClick = (
  <div className={styles.mobileLinks}>
      {options}
  </div>
)

Les noms de code et le nom de fichier étant OptionsAccordion peut aider, mais surtout pour un nouveau développeur React, certaines constructions et utilisations de variables peuvent prêter à confusion. ChatGPT répond à «Pouvez-vous m’expliquer ce code ?»

ChatGPT-3.5 :

Certainement! Ce code semble faire partie d’un composant React et est utilisé pour générer une liste de liens basée sur le props.options tableau. Permettez-moi de le décomposer étape par étape :

1. let options = props.options.map((locationNamePair, index) => { ... });Ici, vous cartographiez le props.options tableau. On dirait props.options est un tableau de paires, où chaque paire est constituée d’une URL (locationNamePair[0]) et un nom d’affichage (locationNamePair[1]). Le .map() La fonction est utilisée pour parcourir chaque paire du tableau.À l’intérieur de .map() fonction, pour chaque paire, un élément JSX est créé à l’aide de la <Link> et <a> Mots clés. Le href attribut du <Link> Le composant est défini sur l’URL (locationNamePair[0]), et le key l’attribut est défini sur le index plus locationNamePair[0] pour identifier de manière unique chaque élément de lien. Le contenu du lien (<a>) est défini sur le nom d’affichage (locationNamePair[1]), et il a un nom de classe styles.optionsLinkqui est probablement utilisé à des fins de style.
2. let mobileStructureOnClick = ( <div className={styles.mobileLinks}> {options} </div> );Ici, vous créez un élément JSX mobileStructureOnClick. Cet élément contient un <div> avec le nom de la classe styles.mobileLinks, qui est également probablement utilisé pour le style. À l’intérieur de ceci <div>vous rendez le options variable.En d’autres termes, vous affichez la liste des liens générés précédemment dans ce <div>et il sera affiché sous la forme d’une liste d’options cliquables sur votre page Web.

Dans l’ensemble, ce code génère dynamiquement une liste de liens basée sur les données de props.options et les restitue dans un <div>, conçu pour une vue mobile. Il s’agit d’un modèle courant dans React pour le rendu de listes dynamiques d’éléments basées sur des données.

Résumé

ChatGPT-3.5 est idéal pour les passe-partout, les explications de code, la recherche de syntaxe et même certaines modifications de code banales.

Tirer parti de ChatGPT-4

ChatGPT-4 est un développeur senior qui n’a pas dormi depuis plusieurs jours. Il produira un code de qualité, connaît les tenants et aboutissants d’un langage ou d’un système et peut fournir un retour d’information de haut niveau. Vous voudrez peut-être le vérifier, peut-être que le manque de sommeil l’a amené à mélanger certaines choses.

Une démonstration rapide de la supériorité de ChatGPT-4 et une preuve de niveaux de connaissances plus élevés :

Moi:

Je crée un composant d’en-tête en réaction avec Typescript, qui prendra un nombre dynamique d’enfants JSX. J’en ai besoin pour les cartographier et les envelopper chacun dans un bouton. Les boutons contrôleront si les panneaux apparaissent ou non ci-dessous. Supposons que l’état est géré au-dessus de l’en-tête et que l’en-tête a simplement accès à un paramètre d’index qu’il peut appeler en cliquant sur le bouton. Sortez uniquement le composant.

ChatGPT-3.5 :

import React, { useState } from 'react';

interface HeaderProps {
  children: React.ReactNode[];
}

const Header: React.FC<HeaderProps> = ({ children }) => {
  const [activeIndex, setActiveIndex] = useState<number | null>(null);

  const handleButtonClick = (index: number) => {
    setActiveIndex(activeIndex === index ? null : index);
  };

  return (
    <div>
      {React.Children.map(children, (child, index) => (
        <div key={index}>
          <button onClick={() => handleButtonClick(index)}>Toggle Panel {index + 1}</button>
          {activeIndex === index && child}
        </div>
      ))}
    </div>
  );
};

export default Header;

Échoue:

• Index des contrôles dans l’en-tête, j’ai dit que cela avait été fait dans le parent
• J’ai dit qu’un bouton enveloppe l’enfant, cela met un div… et n’enveloppe pas du tout l’enfant avec le bouton
• key={index} — Les instructions indiquaient qu’il s’agissait d’un dynamique list, donc utiliser simplement index ici est inexact
• ce chèque : activeIndex === index && child est redondant

Non seulement cela entraîne des erreurs dans certaines fonctionnalités de réaction clés, mais cela ne fonctionnerait pas visuellement compte tenu de la structure choisie.

ChatGPT-4 (avec Expert en réaction) :

import React, { ReactNode } from 'react';

interface HeaderProps {
  children: ReactNode[];
  onButtonClick: (index: number) => void;
}

const Header: React.FC<HeaderProps> = ({ children, onButtonClick }) => {
  return (
    <div>
      {children.map((child, index) => (
        <button key={index} onClick={() => onButtonClick(index)}>
          {child}
        </button>
      ))}
    </div>
  );
};

export default Header;

Échec : même erreur clé

ChatGPT-4, utilisant un GPT accessible au public, parvient à créer presque exactement ce que j’ai décrit, en enveloppant chaque enfant dans un bouton et en affichant chaque bouton dans un div, que je pourrais probablement qualifier de conteneur d’en-tête.

GPT

La boutique GPT est l’autre avantage considérable de ChatGPT-4 par rapport à ChatGPT-3.5. Les GPT vous permettent de précharger des invites personnalisées qui pilotent le reste de l’interaction, ainsi que des données personnalisées et des appels d’API. Par exemple, concevons-en un qui ne commettra pas cette erreur clé.

Instructions personnalisées

Avez-vous un ensemble de normes que vous souhaitez appliquer à votre code ? Avec ChatGPT-3.5, vous devrez coller ces étapes dans chaque nouveau chat, et dans un chat où vous dépassez la fenêtre contextuelle (vous avez eu trop d’allers-retours et il ne se souvient plus du premier message), il oubliera aussi. ChatGPT-4 n’a pas ce problème. Un exemple simpliste :

Moi:

Je veux que toutes mes variables soient préfixées par « mxf_ ». Tout ce que je vous donne dans cette conversion, préfixez-le par « mxf_ ». Voici le premier code :

ChatGPT-3.5 :

Bien sûr, voici votre code avec les variables préfixées par « mxf_ » :

let mxf_userName="John Doe";
const mxf_userId = 102;
var mxf_userStatus="active";

console.log('User Name:', mxf_userName);
console.log('User ID:', mxf_userId);
console.log('User Status:', mxf_userStatus);

mxf_userName="Jane Doe";
mxf_userStatus="inactive";

console.log('Updated User Name:', mxf_userName);
console.log('Updated User Status:', mxf_userStatus);

Désormais, toutes les variables sont préfixées par « mxf_ ».

Voici maintenant ce même code après lui avoir envoyé de très nombreux messages :

ChatGPT-3.5 :

Le code fourni est écrit en JavaScript et définit des variables userName, userIdet userStatus. Il enregistre ensuite leurs valeurs sur la console et met à jour les valeurs de userName et userStatus avant d’enregistrer les valeurs mises à jour.

Voici une ventilation du code : …

Comme vous pouvez le constater, il a oublié la consigne initiale. Ce problème n’existe pas avec les GPT de ChatGPT-4. Une instruction simple comme celle-ci serait mémorisée pendant tout le chat :

Mais ça va mieux. Peut-être avez-vous beaucoup de choses différentes que vous aimeriez faire, et peut-être qu’elles sont en conflit les unes avec les autres, ou donneraient lieu à une liste d’une longueur si vertigineuse que vous auriez du mal à savoir ce que vous y avez mis. Ou peut-être travaillez-vous dans un contexte de code que vous avez déjà soumis : si vous mettez à jour un GPT, toute discussion existante avec ce GPT le fait. pas recevoir la mise à jour. Comment alors pourrait-on obtenir leur GPT mis à jour pour voir leur contexte sans refaire l’ensemble du chat ?

Eh bien, avec ChatGPT-4, vous pouvez simplement référencer les GPT depuis le chat ! Mon bot, par exemple, pourrait être appelé à nettoyer le code créé par ChatGPT-4 par défaut :

Ci-dessus, je sélectionne le bot, Code Standard Bot. Dans le chat ci-dessous, remarquez comment il passe de ChatGPT à Code Standard Bot, et il implémente le préfixe simpliste « mxf_ » que j’avais déclaré plus tôt.

C’est donc cool – imaginez toutes les différentes «procédures stockées», si vous voulez, qui pourraient exister dans de nombreux GPT différents. Tout ce que vous avez à faire est de les convoquer dans une seule conversation, forgeant le code de l’idée à la réalité perfectionnée.

Pertinence des données et Internet

ChatGPT-4 est également connecté à Internet et formé sur des données plus récentes. Cela signifie que ChatGPT-4 comprend mieux les réponses à partir de données plus récentes et que Bing recherche également des questions présentant des aspects temporels évidents. Par exemple:

<template>
  <div class="note-card" v-if="shouldAppear && (title || description)">
    <div class="note-card-content">
      <h3>{{ title }}</h3>
      <p>{{ description }}</p>
      <a v-if="https://blogs.perficient.com/2024/02/07/leveraging-chatgpt-for-professionals-part-2/linkDestination" :href="https://blogs.perficient.com/2024/02/07/leveraging-chatgpt-for-professionals-part-2/linkDestination">{{ linkText || 'Link' }}</a>
    </div>
    <div class="note-card-loader" v-if="loading">
      <!-- Loading styles go here -->
      Loading...
    </div>
  </div>
</template>

<script>
export default {
  props: {
    shouldAppear: Boolean,
    title: String,
    description: String,
    linkDestination: String,
    linkText: String,
  },
  data() {
    return {
      loading: false,
    };
  },
  computed: {
    // Computed property to check if the card should appear
    isVisible() {
      return this.shouldAppear && (this.title || this.description);
    },
  },
  mounted() {
    if (this.linkDestination) {
      // Simulate an API call
      this.loading = true;
      setTimeout(() => {
        // Mock response from the API
        const apiResponse = {
          data: {
            // Add your API data properties here
          },
        };
        // Check if the API data is available
        if (apiResponse.data) {
          // Update the component data with the API data
          // Example: this.title = apiResponse.data.title;
          // this.description = apiResponse.data.description;
          this.loading = false; // Set loading to false when data is available
        } else {
          this.loading = false; // Set loading to false if API call fails
        }
      }, 2000); // Simulate a 2-second API call
    }
  },
};
</script>

<style scoped>
.note-card {
  border: 1px solid #ccc;
  padding: 20px;
  margin: 10px;
  background-color: #fff;
}
.note-card-content {
  margin-bottom: 10px;
}
.note-card-loader {
  /* Loading styles go here */
  background-color: #f0f0f0;
  text-align: center;
  padding: 10px;
}
</style>