Привет! В этом сообщении блога я поделился методами и идеями, которые можно использовать в качестве разработчика интерфейса, чтобы улучшить свои навыки кодирования и сэкономить огромное количество времени. Я предоставил реальные примеры и варианты использования, чтобы повысить вашу эффективность при использовании ChatGPT. Я надеюсь, что вы получите пользу от этого.
Итак, без лишних слов, давайте рассмотрим несколько примеров того, как ChatGPT можно использовать во фронтенд-разработке.
1. ChatGPT — это не Google. Прежде всего, я могу дать вам простой совет, чтобы получить лучшие результаты от ChatGPT: не используйте ChatGPT, как Google. ChatGPT — это ИИ, он может понимать сложные детали, логику и плохо написанный код. Он может изменить свой собственный ответ, дав соответствующие инструкции. вы можете направить ИИ к нужному вам решению. Относитесь к chatgpt как к коллеге. Общайтесь с ним так же, как если бы вы попросили коллегу помочь решить проблему. Вы задаете уточняющие вопросы и создаете цепочку подсказок. Вы можете попросить использовать другой метод/конкретную библиотеку. простое написание более качественных инструкций может сильно повлиять на его реакцию, что подводит нас к следующему пункту.
2. Ваши вопросы являются 100% ответственностью за ответ:- Многие из нас совершают ошибку, предоставляя неверную или неполную информацию, а затем мы ожидаем, что ChatGPT предоставит идеальный код. Как я уже упоминал выше, он может понимать сложные вопросы, поэтому лучше сформулировать ваши вопросы как можно подробнее со всеми необходимыми особенностями. давайте посмотрим на пример ниже, чтобы понять, как вопросы могут повлиять на ответ.
Один эксперимент для вас, используйте эти два вопроса, чтобы получить ответы от ChatGPT и сравнить эффективность кода. Мы всегда упускаем из виду самые простые вещи.
Создайте форму в React с 3 текстовыми полями ввода, одним раскрывающимся списком, одним вводом файла, кнопкой отправки и сброса.
Я хочу написать код для страницы формы с входными данными, эти входные данные должны быть частью группы форм. Три входа должны быть входным текстом с проверками, один вход должен быть раскрывающимся списком с заполнителем как «выбрать снизу», один вход должен быть входным файлом только для .pdf. предоставить две кнопки внизу «Отправить» и «Сбросить». Не нажимайте кнопку отправки, пока не будут введены все данные. После нажатия «отправить» вызовите API и передайте все входные данные в качестве параметров; при нажатии «сброс» сбрасываются все поля ввода.
Теперь, если вы хотите добавить свою собственную настройку, не стесняйтесь делать это, просто чтобы понять, как детали могут повлиять на ответ. попробуйте эти входы и сравните результаты. вы будете поражены, увидев разницу. Но поймите одну вещь; ChatGPT не всегда пишет правильный код. Вы должны правильно протестировать код. Если код не работает, задайте дополнительный вопрос, упомянув об ошибке, с которой вы столкнулись, или о том, как вы хотите, чтобы определенные функции работали. Помните, что более конкретные вопросы приводят к лучшей подсказке. Предоставьте как можно больше соответствующей информации.
3. Вы можете создавать целые компоненты. Одна из удивительных вещей, которую ChatGPT делает для вас, заключается в том, что он не только экономит время на написание сложного кода, но и экономит время на написание целых компонентов. Если вы не являетесь старшим разработчиком, вам нужно время, чтобы написать компонент с нуля, и вы склонны совершать глупые ошибки, которые снова могут потребовать часов для отладки, ChatGPT сэкономит вам буквально часы, предоставив скелет для вашего компонента вместе с CSS. Вы можете попросить сгенерировать адаптивный код, добавить определенные функции и улучшить свой CSS. Вы можете попросить использовать конкретную библиотеку. Возможности безграничны, но не стесняйтесь предоставлять информацию (конечно, не давайте ИИ никаких учетных данных или конфиденциальной информации). Вот следующий пример для создания компонентов.
например, я хотел создать компонент страницы администратора со списком и разбиением на страницы в React.
вот приглашение, которое я использовал, попробуйте это, чтобы сгенерировать ответ -›
Напишите код в React, чтобы создать компонент страницы администратора для отображения списка пользователей. вызовите API, чтобы получить список из бэкэнда. Я хочу отображать пользовательские данные в табличном формате с 7-8 столбцами и 25 строками на 1 страницу. включить нумерацию страниц. сохранить свойства пагинации внизу. при нажатии на следующую страницу вызовите API со свойствами разбивки на страницы, чтобы получить следующие 25 пользователей. предоставьте опцию добавления пользователя вверху, чтобы перейти на другую страницу. напишите для этого CSS, оставьте его отзывчивым и оставьте 20px сверху и снизу.
Это не высокий стандарт обучения, но даже с самым простым языком вы можете сэкономить несколько часов работы. Не забывайте, что вы всегда можете внести дополнительные изменения.
4. Исправления ошибок: все мы потратили часы на отладку, и это абсолютная головная боль. Хотя важно понимать, почему возникла ошибка, вы можете значительно улучшить отладку с помощью ChatGPT. Основы использования ChatGPT никогда не меняются. Если в консоли присутствуют ошибки, в большинстве случаев отладка проста, но если она занимает больше времени, чем ожидалось, скопируйте и вставьте ошибку в ChatGPT, а также предоставьте свой код для этого конкретного компонента (html + js / JSX).
Проверьте следующий пример. Я предоставил код и описал свою проблему.
Это дало мне исправленный код и решение проблемы, которую я описал.
ChatGPT обнаружит проблемы в коде или предложит варианты отладки. Вы также можете попросить ChatGPT изменить и переписать код. Если код ведет себя неправильно или функциональность не работает должным образом, вы можете описать ситуацию, как возникает ошибка и каковы ваши ожидания; Не забудьте предоставить код (ChatGPT не возражает против сотен строк кода). Необходимо предоставить полный код, потому что если мы пропустили важные шаги/допустили орфографические ошибки/или написали плохой код. Опять же, если вы не получили ожидаемого ответа от ChatGPT, задайте дополнительные вопросы.
Примечания. ChatGPT не является правильным на 100%, он может предоставить вам устаревший код. Это может ввести вас в заблуждение, если вы будете использовать определенный метод, который может быть даже невозможен. Тщательно перепроверьте и протестируйте код.
ChatGPT — это инструмент, но вам нужно понимать код, чтобы стать лучшим разработчиком и исправить проблему, которая может возникнуть в будущем.
