Создание сложного компонента React с использованием ChatGPT

ChatGTP, вы слышали о нем?

ChatGPT — это новейший и самый популярный помощник на основе искусственного интеллекта, который в настоящее время озадачивает и восхищает многих людей кажущимися бесконечными забавными и практичными вещами, которые он может создавать.

Своими словами он будет говорить что-то вроде «ChatGPT — это вариант языковой модели GPT (Generative Pre-training Transformer), специально разработанный для генерации человекоподобного текста для использования в чат-ботах и ​​других диалоговых приложениях. Он был обучен на большом наборе данных человеческого разговора и способен генерировать ответы, которые являются связными, контекстуально релевантными и подходящими для данного разговора. ChatGPT можно использовать для создания чат-ботов, способных вести естественные и увлекательные беседы с пользователями, отвечая на их вопросы и предоставляя информацию или помощь по мере необходимости.».

Проще говоря, ChatGPT — это инструмент, цель которого — генерировать ответы, которые звучат так, как может сказать человек, даже эксперт.

Диапазон ChatGPT огромен, но в этом посте я хочу изучить возможности этого инструмента для написания кода и, сделав еще один шаг, я хочу проверить его способность помочь мне создать веб-приложение на JavaScript с использованием сложных компонентов React.

Создание приглашения приложения

Во-первых, мне нужно было придумать простую идею приложения; тот, который не требовал слишком много настройки, но также использовал библиотеку React, а также некоторые дополнительные стили и библиотеки компонентов. В конечном итоге я решил отобразить карту с помощью реагировать-листовка с компонентами Маркер и Всплывающее окно, указывающими на все стадионы НФЛ в Соединенных Штатах, и карусель с использованием реагировать-бутстрап, чтобы циклически перемещаться по каждому стадиону, отображая логотип команды и выделяя связанные Маркер на карте в зависимости от того, какой слайд в карусели выбран.

Поскольку я стремился увидеть, насколько эффективно ChatGPT может помочь в создании компонентов, я использовал create-react-app, чтобы быстро создать приложение. Затем я удалил страницу по умолчанию и начал с чистого листа. Я щелкнул ChatGPT и набрал подсказку:

Создайте реагирующий компонент под названием NFLStadiumMap, который отображает карту с помощью react-leaflet с маркерами и всплывающими окнами, показывающими каждый стадион НФЛ с соответствующей командой, которая там играет, а затем создайте карусель с помощью react-bootstrap, где каждый слайд этих стадионов, а маркеры и всплывающие окна на карте подсвечиваются в зависимости от того, какой слайд выделен в карусели?

ChatGPT ответил следующим блоком:

Можно создать карту с помощью реактивной листовки с маркерами и всплывающими окнами, показывающими каждый стадион НФЛ с соответствующей командой, которая там играет, а затем создать карусель с помощью реактивной загрузки, где слайды представляют собой каждый из этих стадионов, а также маркеры и всплывающие окна. на карте выделяются в зависимости от того, какой слайд выделен в карусели.

Вот пример кода, демонстрирующий, как это можно сделать:

import React, { useState } from 'react';
import { Map, Marker, Popup, TileLayer } from 'react-leaflet';
import { Carousel } from 'react-bootstrap';

const NFLStadiumMap = () => {
  const [activeSlide, setActiveSlide] = useState(0);
  const nflStadiums = [
    {
      name: 'Lambeau Field',
      team: 'Green Bay Packers',
      lat: 44.501389,
      lng: -88.061944
    },
    {
      name: 'MetLife Stadium',
      team: 'New York Giants',
      lat: 40.813611,
      lng: -74.074444
    },
    {
      name: 'AT&T Stadium',
      team: 'Dallas Cowboys',
      lat: 32.747778,
      lng: -97.092778
    }
  ];

  return (
    <div>
      <Map center={[39.099722, -94.578333]} zoom={4}>
        {nflStadiums.map((stadium, index) => (
          <Marker
            position={[stadium.lat, stadium.lng]}
            key={stadium.name}
            onClick={() => setActiveSlide(index)}
            opacity={index === activeSlide ? 1 : 0.5}
          >
            <Popup>{stadium.name}</Popup>
          </Marker>
        ))}
        <TileLayer
          url="https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png"
          attribution='&copy; <a href="http://osm.org/copyright">OpenStreetMap</a> contributors'
        />
      </Map>
      <Carousel activeIndex={activeSlide} onSelect={setActiveSlide}>
        {nflStadiums.map((stadium) => (
          <Carousel.Item key={stadium.name}>
            <img
              className="d-block w-100"
              src={`${stadium.name}.jpg`}
              alt={stadium.name}
            />
            <Carousel.Caption>
              <h3>{stadium.name}</h3>
              <p>{stadium.team}</p>
            </Carousel.Caption>
          </Carousel.Item>
        ))}
      </Carousel>
    </div>
  );
};

export default NFLStadiumMap;

В этом примере мы используем react-leaflet для создания компонента карты с маркерами для каждого стадиона НФЛ. Мы также включили всплывающее окно для каждого маркера, которое отображает название стадиона. Мы используем переменную состояния activeSlide, чтобы отслеживать

примечание: кажется, что ChatGPT прервал объяснение; тем не менее, блок кода был там!

Подключаем код

На первый взгляд блок кода кажется отличным! Он имеет все основные части и даже включает отчеты об импорте и экспорте! Однако при ближайшем рассмотрении оказалось, что ответ был немного ошибочным, нуждался в дальнейших корректировках, а также не упомянул несколько ключевых зависимостей и шагов, необходимых для того, чтобы компонент работал правильно и так, как я себе представлял. Позволь мне объяснить:

  1. Если вы не знакомы с какой-либо библиотекой, для их настройки требуются дополнительные действия. Например, react-leaflet требует, чтобы вы включили ссылку на файл CSS Leaflet и скрипт для JavaScript Leaflet в разделе заголовка вашего документа. Библиотека react-bootstrap также требует тега link в заголовке, а также импорт CSS-кода bootstrap.
  2. В ответе говорилось, что Map был правильным импортом модуля для использования для отображения фактической карты из реагирующей листовки. Однако правильным термином модуля является MapContainer.
  3. Не все стадионы были включены в переменную стадионы. Данные, которые он дал, были правильными, но они дали только три стадиона. Как много раз и по-разному я спрашивал ChatGTP, он не генерировал данные и не включал все стадионы, поэтому в итоге я просто заполнил остальные стадионы самостоятельно. Я знаю, что есть несколько бесплатных API для использования (ChatGTP даже перечислил несколько для меня), но я решил заполнить его сам, чтобы попытаться как можно меньше изменить исходный формат ответа. В итоге я создал файл JSON с данными и передал переменную, которая извлекала данные через свойства, в компонент NFLStadiumMap. Из-за изменений я изменил имена переменных, чтобы они соответствовали.
  4. Стили, которые я себе представлял, не были встроены в компонент, хотя обе библиотеки предлагают настройки стилей для своих компонентов. В итоге я изменил размер карты, цвет карусели, поля и отступы вокруг изображений логотипа команды, чтобы добиться желаемого вида.

После этих небольших изменений мой компонент стал следующим:

import React, { useState } from 'react';
import { MapContainer, Marker, Popup, TileLayer } from 'react-leaflet';
import { Carousel } from 'react-bootstrap';

const NFLStadiumMap = ( {stadiums} ) => {
  const [activeSlide, setActiveSlide] = useState(0);

  return (
    <div>
      <MapContainer 
        center={[39.099722, -94.578333]} 
        zoom={4}
        style={{ height: '40vh', width: '50wh' }}>
        {stadiums.map((stadium, index) => (
          <Marker
            position={[stadium.lat, stadium.lng]}
            key={stadium.team}
            onClick={() => setActiveSlide(index)}
            opacity={index === activeSlide ? 1 : 0.5}
          >
            <Popup>
              <h3>{stadium.team}</h3>
              {stadium.name}
              </Popup>
          </Marker>
        ))}
        <TileLayer
          url="https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png"
          attribution='&copy; <a href="http://osm.org/copyright">OpenStreetMap</a> contributors'
        />
      </MapContainer>
      <Carousel variant="dark" activeIndex={activeSlide} onSelect={setActiveSlide}>
        {stadiums.map((stadium) => (
          <Carousel.Item key={stadium.team}>
            <img
              className="d-block mx-auto img-fluid pb-5 mb-5"
              src={stadium.logo}
              alt={stadium.name}
            />
            <Carousel.Caption>
              <h1>{stadium.team}</h1>
              <p>{stadium.name}</p>
            </Carousel.Caption>
          </Carousel.Item>
        ))}
      </Carousel>
    </div>
  );
};

export default NFLStadiumMap;

В итоге страница вышла отличной! Требовались лишь минимальные изменения, чтобы выполнить то, что я намеревался сделать. В общем, на создание этого замечательного приложения ушло всего несколько минут! Чтобы увидеть мое репо, нажмите здесь! Если вы хотите проверить сам сайт, нажмите здесь!

Анализ и критика способности ChatGPT создавать приложения

ChatGPT обладает поразительной способностью предоставлять технически точные блоки кода, которые могут быть почти готовы к развертыванию на основе заданной подсказки. Подсказка, которую я использовал, требовала ответа, который включал базовые знания JavaScript, React, а также дополнительные знания React-Bootstrap и React-Leaflet. Если бы я кодил приложение один, это могло бы занять больше времени, так как мне пришлось бы читать документы, чтобы понять, как правильно реализовать различные функции, которые я хотел. В этом смысле это действительно ускорило время разработки.

При этом у любого разработчика, желающего использовать ChatGPT в повседневной жизни, определенно есть несколько ограничений. Для начала ChatGPT требует точности и детализации подсказок. Например, чтобы создать приложение с картой, булавками и велосипедными изображениями команд NFL, вы должны знать, какие конкретные компоненты вы хотите использовать (например, маркер и всплывающее окно react-leaflet, React-Bootstrap Carousel). Кроме того, данный ответ предполагал, что у меня есть некоторые базовые знания о том, как реализовать компонент React, и о необходимых вспомогательных шагах для настройки.

В заключение, ChatGPT может быть замечательным и полезным инструментом для разработчиков, поскольку он позволяет быстро создавать прототипы и генерировать код. Однако важно помнить, что ChatGPT не заменяет человеческий опыт и знания. Для получения наиболее точных и полезных результатов требуются точные и подробные подсказки, а для эффективной реализации и устранения неполадок в сгенерированном коде необходимо некоторое базовое понимание используемых технологий. Хотя ChatGPT может сэкономить время и силы в определенных ситуациях, это не волшебное решение, и его следует использовать в сочетании с собственными навыками и способностями разработчика.

Вот краткий список некоторых плюсов и минусов для разработчиков, использующих ChatGPT:

Плюсы:

  1. ChatGPT может быстро генерировать готовые к работе блоки кода и компоненты для специальных подсказок. Это само по себе может значительно увеличить время разработки.
  2. ChatGPT может генерировать код с использованием незнакомых библиотек и фреймворков, таких как приведенный выше пример с использованием React-Bootstrap или React-Leaflet, экономя время разработчиков на отладке и чтении документации. Это позволяет разработчикам больше сосредоточиться на архитектуре проекта.
  3. ChatGPT может предоставить экспертные объяснения сложных концепций и проблем кодирования простыми словами, помогая улучшить понимание тем, начиная от реализации сгенерированных компонентов и заканчивая вопросами о структуре данных и алгоритмах.

Минусы:

  1. ChatGPT лучше всего работает, когда его используют разработчики, обладающие определенным уровнем технических знаний. Важно иметь базовое представление об используемых технологиях, чтобы эффективно внедрять и устранять неполадки в сгенерированном коде.
  2. ChatGPT имеет ограничения и не всегда может правильно идентифицировать и исправлять ошибки или ошибки в сгенерированном коде.
  3. ChatGPT не будет генерировать или компилировать полные наборы данных. В настоящее время он предоставляет только частичный набор данных или модель.

Загляните в репозиторий GitHub или поэкспериментируйте с развернутым приложением здесь!

Эта статья была написана Куртом Крэндаллом | Гитхаб | ЛинкедИн