Главная страница>Связанные с программированием>AI Исходный код
Скачать

Руководство по кодированию ИИ для начинающих

Добро пожаловать в The Tips & Chists для начинающих искусственного интеллекта , всеобъемлющего ресурса, предназначенного для того, чтобы помочь не кодерам эффективно использовать инструменты искусственного интеллекта для разработки веб-сайтов, приложений и других проектов. Это руководство основано на реальном опыте и практическом совете, адаптированном для абсолютных начинающих.

Оглавление

  • Введение
  • Глава 1: Получение ИИ делать то, что вы хотите - сила вдумчивых подсказок
  • Глава 2: Когда дела не идут на вашем пути - устранение неполадок с ИИ и восстановление импульса
  • Глава 3: Использование скриншотов и отслеживания для решения постоянных проблем
  • Глава 4: направление ИИ для эффективного решения проблем, ошибок и проблем
  • Глава 5: Понимание библиотек CDN и их роль в вашем проекте
  • [Глава 6: скоро наступит]
  • [Глава 7: скоро наступит]

Введение

Это руководство также служит свидетельством моего путешествия в качестве начинающего разработчика, который учится использовать силу ИИ. Каждая глава вдохновлена ​​уроками, которые я усвоил при навигации по миру развития, основанного на ИИ. Моя цель - поделиться с вами этими идеями, чтобы вы могли избежать общих ошибок и максимизировать потенциал этих инструментов.

Глава 1: Получение ИИ делать то, что вы хотите - сила вдумчивых подсказок

Позвольте мне поделиться с вами одним из самых больших уроков, которые я усвоил рано. Вот оно: как вы произносите то, что вы просите, ИИ сделать, это все. Разница между получением чего -то блестящего и получением чего -то бесполезного часто сводится к тому, как вы просили этого. Звучит просто, но только этот совет может сэкономить вам много разочарования.

Итак, давайте поговорим о том, как спросить вашего «помощника кодера», чтобы он действительно получил результаты, потому что поверьте мне, то, как вы разговариваете с ИИ, имеет все значение.

Почему спрашивать правильный путь имеет значение

Вот сделка: инструменты искусственного интеллекта умны, но они не читатели. Они великолепны в следующих направлениях, но им нужны эти направления, чтобы быть ясными и конкретными. Если вы расплывчаты или оставляете место для угадываний, все может быстро идти вбок.

Подумайте об этом так: представьте, что вы нанимаете подрядчика, чтобы построить вам дом. Если вы скажете: «Построите мне что-нибудь хорошее», вы можете получить домик на дереве, когда то, что вы действительно хотели, было ранчо из трех спальней с бассейном. Но если вы передадите им чертежи и скажете: «Я хочу этот точный дом с этими точными функциями», они точно знают, что делать.

ИИ работает так же. Если ваши инструкции являются конкретными, вывод будет лучше. Вместо того, чтобы сказать: «Исправьте этот код», попробуйте что -то вроде: «Исправьте проблему с кнопкой отправки, не работает, когда пользователь нажимает его». Вместо того, чтобы «сделать мое приложение красивым», скажем, «модернизируйте пользовательский интерфейс приложения с помощью гладких, профессиональных шрифтов и высококачественных икон». Увидеть разницу? ИИ теперь точно знает, чего вы хотите, и имеет четкий путь, которым нужно следовать.

Магия фраз для конкретной задачи

Один улов, который я узнал, состоит в том, чтобы начать с правильной фразы для конкретной задачи-упоминайте ее как секретный соус, который получает ИИ в правильный режим. Вот примеры фраз, которые вы можете использовать для различных ситуаций. Не стесняйтесь копировать, настраивать и использовать их столько, сколько захотите.

  1. Когда что -то сломано:

    • Используйте это: «Исправьте проблему с…»
    • Пример: «Исправьте проблему с кнопкой входа, ничего не делает при нажатии».

    Это говорит ИИ сосредоточиться на решении одной конкретной проблемы. Вместо того, чтобы пытаться переделать весь ваш код, он доходит до решения именно этой проблемы.

    Совет профессионала: если вы знаете, что сломало вещи (например, определенная строка кода), включите эту деталь. А если вы не уверены? Не беспокойтесь - просто сосредоточиться на том, чтобы описать симптомы проблемы как можно более четко.

  2. При добавлении новых функций:

    • Используйте это: «Добавьте функцию к существующему…»
    • Пример: «Добавьте функцию в существующее приложение, которое позволяет пользователям фильтровать продукты по цене, не удаляя любые другие функции».

    Эта фраза стоит своего веса в золоте, потому что она рассказывает AI две критические вещи: (1) Что вы хотите добавить, и (2) что не трогать. Поверьте мне, вы не хотите, чтобы ИИ случайно что -то сломал, пока он добавляет вашу новую блестящую функцию. Вот почему «без удаления каких -либо других функций» очень важна - она ​​держит все остальное нетронутым.

  3. Когда вам нужно исправить ошибки браузера:

    • Используйте это: «Исправьте эти ошибки, найденные в консоли браузера…»
    • Пример: «Исправьте эти ошибки, найденные в консоли браузера: [вставьте здесь сообщения об ошибках]».

    Ладно, это может быть самым подходящим для начинающих, профессиональных кончиков. Если вы создаете веб -приложение, а вещи не работают, ваша консоль браузера похожа на детектив, который уже выяснил место преступления для вас. Чтобы найти его, щелкните правой кнопкой мыши на своей веб-странице, нажмите «Просмотреть» и перейдите на вкладку «Консоль». Там вы увидите сообщения об ошибках - просто скопируйте их и вставьте их в свой инструмент AI.

    Почему это работает так хорошо? Потому что эти сообщения об ошибках часто содержат точную информацию, которую должен выяснить, что пошло не так. Это все равно, что дать ему дорожную карту для исправления вашего приложения. Серьезно, этот трюк - спасатель.

  4. Когда вы хотите улучшить, как выглядит ваше приложение:

    • Используйте это: «Улучшите общее приложение (или конкретную часть) пользовательского интерфейса с профессиональным, современным, визуально привлекательным…»
    • Пример: «Улучшите общий пользовательский интерфейс приложения с профессиональными, современными, визуально привлекательными, высококачественными шрифтами, значками и сплоченной цветовой палитрой, вдохновленной минималистскими дизайнами».

    Давайте будем реальными - разработка субъективна. То, что выглядит великолепно для одного человека, может быть не чужой чашкой чая. Вот почему особенно важно вести ваш ИИ с такими словами, как «современный», «профессионал» и «высококачественный». Эти виды прилагательных помогают ИИ понять общую атмосферу, на которую вы идете.

    Совет профессионала: если у вас есть конкретное приложение или веб -сайт, который вам нравится, упомяните это! Например: «Сделайте это больше похоже на дизайн Spotify». ИИ попытается имитировать этот стиль и применить его к вашему проекту.

  5. При удалении функций:

    • Используйте это: «Удалите [функцию] и все связанный код, не разбивая основные функции приложения».
    • Пример: «Удалите панель поиска и весь связанный код, не разбивая корзину покупок или функции профиля пользователя».

    Удаление функций может быть сложным, потому что вы не хотите случайно брать что -то важное. Эта фраза позволяет ИИ знать, чтобы чисто удалить эту функцию, но оставляют все остальное, работающее точно так, как следовало бы.

  6. Когда вы что -то случайно удаляете:

    • Используйте это: «Я потерял [файл], пожалуйста, восстановите его так, чтобы проект выглядел и функционировал точно так же, как он».
    • Пример: «Я потерял файл style.css, пожалуйста, восстановите его, чтобы проект выглядел и функционировал точно так же, как и раньше».

    Важно, чтобы ИИ знал, какой файл вы потеряли, и дать ему некоторый контекст (например, «этот файл обрабатывал весь стиль для моей домашней страницы»). Хотя ИИ может не восстановить файл идеально, он часто обеспечивает достаточно, чтобы вернуть вещи в нужное русло.

Ключ к успеху: получить конкретный

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

  • Всегда описывайте то, что вы хотите на простом, простом языке. Не переполняйте это!
  • Сосредоточьтесь на одной задаче за раз. Большие, многочасовые подсказки могут сокрушить ИИ.
  • Не бойтесь экспериментировать. Если первый ответ не совсем правильный, настройте формулировку и попробуйте еще раз.

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

Помните, как вы говорите, что это имеет значение!

Глава 2: Когда дела не идут на вашем пути - устранение неполадок с ИИ и восстановление импульса

Работа с ИИ по созданию приложений и веб -сайтов не всегда плавно парусный спорт. Будут моменты, когда вы чувствуете, что находитесь в броске, только чтобы ударить по стене, где, кажется, ничего не работает. Вы дали четкие инструкции AI (или вы так думали), вы перефразировали свои запросы, и все же ... ваш проект не продвигается вперед.

Эта глава посвящена устранению неисправностей этих разочаровывающих ситуаций и отклеинства.

Шаг 1: Начните Fresh - почему новый разговор может спасти день

Иногда ИИ просто ... забывает себя. Если вы обнаруживаете, что повторяете команду снова и снова, и ничего не меняется, проблема может быть не с вашими инструкциями - это может быть история чата.

Языковые модели ИИ работают, отслеживая предыдущие инструкции и ответы в текущем разговоре. Со временем эта история может стать загроможденной противоречивым контекстом . Например:

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

Исправление: Начните новый разговор с ИИ.

  • Откройте новый чат, вставьте самую последнюю версию вашего кода и объясните, что вы пытаетесь достичь.
  • Запуск свежей очищает историю и устраняет противоречия, которые, возможно, подкрались во время вашего постоянного разговора.
  • Бонус: новый чат часто может привести к лучшим, более целенаправленным результатам, потому что ИИ не отвлекается на его прошлые «мысли». Это как нажать кнопку сброса.

Шаг 2: Остерегайтесь противоречивого кода

Если запуск Fresh не решает проблему, есть вероятность, что проблема находится в самом коде. Противоречивый код происходит , когда два фрагмента кода говорят вашему приложению делать противоположные вещи. Это часто может происходить, когда:

  • ИИ добавил новую функцию, но забыл очистить или удалить старый код, связанный с предыдущей версией этой функции.
  • Вы пытались исправить несколько проблем по одному, и ИИ случайно создал логику.
  • Вы работаете над сложным проектом, и где -то по пути что -то запуталось.

Например:

  • Представьте, что вы создаете кнопку для своего приложения. В одной части вашего кода говорится: «Когда кнопка нажимается, отправьте форму». Другая часть говорит: «Когда кнопка нажимается, обновите страницу». Теперь приложение смущено - вы можете отправить кнопку или обновлять?

Исправление: попросите ИИ идентифицировать и разрешить противоречия. Используя функцию чата вашего помощника искусственного интеллекта, вы можете дать ему подсказку, например, «просмотреть мой код и определить любые части, которые могут противоречить друг другу». Затем вставьте соответствующие разделы в чат.

Еще одно исправление: отладка вручную. Если ИИ не ловит проблему (или вы просто хотите больше контроля), начните тестировать кусочки вашего приложения по одному. Отключите или прокомментируйте части кода и посмотрите, как ведет себя приложение, когда эти разделы не работают. Этот процесс может помочь вам найти конкретные линии, вызывающие конфликт.

Шаг 3: Используйте ИИ в качестве партнера по отладки, не внося немедленных изменений

Вот изменение игры: ИИ не всегда нужно писать для вас код. Вы также можете использовать его в качестве партнера по доверенной отладке, чтобы ответить на ваши вопросы и направить вас через проблемы, фактически не изменяя свой проект. Этот подход дает вам больше контроля и может помочь вам лучше понять, как все связано.

Например, вы можете спросить:

  • «Что может привести к сбою моего приложения, когда я нажимаю кнопку« Отправить »?»
  • «Как этот раздел моего JavaScript взаимодействует с стилем CSS ниже?»
  • «Какое влияние будет удалить эту переменную на остальную часть кода?»

Это обратно и вдали не о передаче управления ИИ-это использование его в качестве тренера по кодированию. Рассматривая ИИ как учителя, а не как исполнителя задачи, вы можете разблокировать идеи, которые помогут вам устранения устранения устранения устранения и лучше.

Шаг 4: Попробуйте другую модель ИИ или платформу

Если одна модель ИИ не дает вам ответов, с которыми вы можете работать, попробуйте смешать вещи. Разные модели имеют разные сильные стороны:

  • CHATGPT (особенно GPT-4): Отлично подходит для советов по кодированию общего назначения, отладки и генерации многократных фрагментов кода.
  • Клод (антроп): часто превосходит понимание сложных инструкций и суммирования кода, но может пропустить более подробные данные отладки.
  • Gemini (Google): может предоставить дополнительный контекст, если вы имеете дело с инструментами или технологиями, связанными с Google.
  • Специализированные помощники кодирования (например, курсор, Github Copilot, Windsurf): интегрируется непосредственно в IDE для помощи в кодировании в реальном времени.

Вот как это сделать:

  1. Скопируйте свой текущий код или описание проблемы.
  2. Вставьте его в другую модель.
  3. Задайте тот же или похожий вопрос.

Даже если вы работали исключительно с одним инструментом, переход на другой может предоставить ценные новые перспективы (и решения).

Шаг 5: Включите изменение изменений в вашем IDE или AI Assistant

Чанженолы - это спасатели. Они позволяют вам:

  • Отслеживайте именно то, что ИИ отредактировал или добавил в ваш проект.
  • Обратный обратный переход, если что -то пойдет не так.
  • Сравните старые версии вашего кода, чтобы точно определить проблемы.

Многие инструменты и IDE позволяют включить изменение изменений или историю версий. Если нет, вы можете использовать GIT для управления версией для достижения того же эффекта.

Шаг 6: Рассмотрим переключение языков программирования

Иногда проблема - это не ты или ИИ - это язык, который вы выбрали. Если ваше приложение не работает или чувствует себя слишком сложным, спросите ИИ: «Является ли [текущий язык] лучший выбор для этого проекта?»

Эта одна смена может изменить игру.

Не сдавайся, но сделай перерыв!

Глава 3: Использование скриншотов и отслеживания для решения постоянных проблем

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

Использование скриншотов для передачи проблем

Снимок экрана может часто произносить больше, чем слова, особенно когда что -то в вашем пользовательском интерфейсе не выглядит или ведет себя, как и ожидалось. Однако без надлежащего контекста ИИ может неверно истолковывать скриншот и предположить, что он представляет собой решение, которое вы хотите, а не проблему, которую вы выделяете. Чтобы решить эту проблему, очень важно сочетать ваш скриншот с точными подсказками, которые направляют внимание ИИ.

Лучшие методы использования скриншотов

  1. Дайте четкое описание вместе с скриншотом:
    Снимок экрана без контекста может привести к недоразумениям. Например, если вы выделяете визуальную ошибку, включите объяснение, подобное:

    • «Этот скриншот показывает пользовательский интерфейс после отправки формы. Кнопка должна перенаправить пользователя на страницу подтверждения, но ничего не происходит. Пожалуйста, определите проблему ».

  2. Выделите ключевые области на скриншоте:
    Используйте базовые инструменты редактирования изображений, чтобы обвести, подчеркнуть или аннотировать части экрана, которые имеют отношение к проблеме. Это помогает ИИ знать, где сосредоточиться.

  3. Уточните, что скриншот представляет собой проблему:
    Чтобы AI не неправильно истолковывает изображение в качестве желаемого вывода, используйте эту подсказку:

    • «Проблема продолжается - изображение показывает проблему, а не решение».

    Почему это работает: эта фраза явно говорит ИИ рассматривать скриншот как доказательство проблемы, гарантируя, что он анализирует проблему, а не предполагает результат.

Устранение неполадок изменений, которые не отражаются в пользовательском интерфейсе

Другая распространенная проблема - когда ИИ генерирует изменения кода, которые не отображаются в приложении или пользовательском интерфейсе веб -сайта. Это может произойти по нескольким причинам - проблемы развертывания, неспасенные изменения или даже скрытые ошибки в структуре проекта. Скриншоты здесь особенно полезны, потому что они могут визуально захватить состояния «до» и «после», помогая ИИ точно определить то, что пошло не так.

Пример устранения неполадок рабочего процесса:

  1. Сделайте два скриншота:

    • Один показывает состояние пользовательского интерфейса перед применением изменений.
    • Другой показывает пользовательский интерфейс после применения изменений (где остается проблема).

  2. Включите оба скриншота в свою подсказку с объяснением, например:

    • «Эти два скриншота показывают пользовательский интерфейс до и после того, как я внедрил предлагаемые изменения. Пользовательский интерфейс не отражает изменения. Проанализируйте код, чтобы найти проблему и исправить ее ».

  3. Используйте целевые подсказки, чтобы пойти глубже:

    • «Проанализируйте весь каталог и ищите проблемы, которые предотвращают внедрение ваших изменений».
    • «Выясните, почему ваши изменения не отражают то, что я вижу в проекте».

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

Творческие способы использования скриншотов при отладке

Скриншоты не только для определения проблем пользовательского интерфейса. Вот несколько дополнительных способов использовать скриншоты для улучшения общения с вашим помощником искусственного интеллекта:

  1. Показать сообщения об ошибках или журналы:
    Если ваш браузер -консоль или журнал приложения показывает ошибку, сделайте ее снимок экрана и включите подсказку, подобную:

    • «Это сообщение об ошибке появляется в консоли браузера после нажатия кнопки« Отправить ». Пожалуйста, определите проблему, вызывающую эту ошибку, и предоставьте решение ».

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

    • «Этот скриншот показывает мобильный макет, где разбито меню навигации. Он должен рухнуть в меню гамбургера, но оно остается расширенным. Пожалуйста, исправьте эту проблему ».

  3. Выделите отсутствующие элементы в пользовательском интерфейсе:
    Если что -то не хватает в вашем пользовательском интерфейсе (например, изображение, кнопку или текст), используйте скриншот, чтобы показать его отсутствие:

    • «Этот скриншот показывает текущий пользовательский интерфейс. Кнопка «Добавить в корзину» отсутствует ниже каждого списка продукта. Пожалуйста, проанализируйте код и убедитесь, что кнопка появляется в правильном месте ».

  4. Сравнение дизайнов:
    Используйте скриншоты проектов из аналогичных приложений или проектов в качестве вдохновения, и попросите ИИ воспроизвести элементы из этих проектов:

    • «Вот скриншот на Navbar конкурента. Сделайте мой Navbar выглядеть так, соответствуя его стилю и отзывчивости ».

Просить ИИ создать пользовательскую систему отслеживания изменений

Еще одна частая задача с помощью A-Actisted Development-это когда ИИ забывает предварительные изменения или теряет отслеживание изменений, которые он внес. Чтобы бороться с этим, вы можете попросить ИИ создать пользовательскую систему отслеживания изменений в вашем проекте. Эта система будет документировать изменения, которые она вносит, выступая в качестве «памяти» для ссылки, когда что -то пойдет не так.

Пример подсказки для создания системы отслеживания:

  • «Создайте систему в рамках проекта, которая автоматически отслеживает все изменения, внесенные в код, наряду с временными метками и описаниями каждого изменения».

Это может включать в себя:

  1. Централизованный файл журнала:
    ИИ может создать файл (например, changelog.txt ), где он автоматически добавляет описание каждого изменения, которое он вносит:

    • Пример формата для записей ChangeLog: 
       Timestamp: 2025-01-06 11:30PM
File Edited: main.js
Description: Fixed the submit button functionality to redirect to the confirmation page.

  2. Встроенные код Комментарии:
    Попросите ИИ аннотировать его изменения непосредственно в коде:

    • Пример: 
       // Added event listener to fix the submit button issue (2025-01-06)
submitButton.addEventListener('click', handleSubmit);

  3. Номера версий или теги:
    Иметь в коде номера версий или теги встроенного искусственного интеллекта, чтобы при необходимости вы могли вернуться к конкретным пунктам:

    • Пример подсказки: «Добавьте теги версии в комментарии в верхней части каждого файла, обновляя их каждый раз, когда вносятся изменение».

Почему это помогает:

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

Отслеживание демонстрации с использованием функции агента курсора:

https://github.com/techcow2/cursor-agent-tracking

Глава 4: направление ИИ для эффективного решения проблем, ошибок и проблем

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

Проблема: избегание повторяющихся ошибок

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

Решение: написание подсказок о контекстном порядке

Чтобы предотвратить эти проблемы, вы можете создать подсказки, которые объединяют описание вашей задачи с явными инструкциями о том, чего избежать. Это гарантирует, что ИИ с осторожностью подходит к задаче и фокусируется на решении проблемы, не вызывая дальнейших осложнений.

Пошаговые инструкции:

  1. Вернуться к стабильному состоянию (при необходимости):

    • Прежде чем вносить изменения, убедитесь, что ваш проект находится в стабильном состоянии, где он работает правильно без проблемных дополнений или модификаций.

  2. Определите и документируйте проблему:

    • Соберите всю соответствующую информацию о проблеме:
      • Сообщения об ошибках из журналов или консолей.
      • Шаги, чтобы воспроизвести проблему.
      • Наблюдаемое поведение и ожидаемое поведение.

  3. Создайте свою подсказку:

    • Используйте этот шаблон, чтобы направлять ИИ: 
       Implement [task/feature] carefully while avoiding [specific problem/error]. Ensure all existing functionality remains intact.
    • Примеры:
      • «Добавьте функцию, которая позволяет пользователям фильтровать продукты по категории на домашней странице. Внимательно реализуйте эту функцию и избегайте этой ошибки: TypeError: не удается прочитать «карту» не определенной ».
      • «Исправьте проблему с помощью кнопки входа в систему, а не перенаправлять пользователей после подачи. Убедитесь, что другие функции не нарушены в ходе этого процесса ».

  4. Предоставить контекст (если применимо):

    • Если вы подозреваете, что определенные части вашего кода связаны с проблемой, включите эти данные в вашу подсказку: 
       The error might be caused by how the product list is being rendered. Please ensure any changes to this part of the code do not introduce new bugs.

  5. Просмотреть и тестовые выводы:

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

Почему это работает

  • Осознание ошибок: включение конкретных проблем или ошибок в вашу подсказку помогает ИИ сосредоточиться на том, чтобы избежать известных ловушек.
  • Точность: фразы, такие как «реализовать тщательно», сигнал о том, что точность имеет решающее значение.
  • Упреждающая отладка: этот подход побуждает ИИ анализировать потенциальные риски и производить решения, которые являются как эффективными, так и безопасными.

Глава 5: Понимание библиотек CDN и их роль в вашем проекте

При создании или улучшении веб-сайта или веб-приложения, эффективность и производительность являются двумя критическими факторами. Одним из эффективных способов достижения этих целей является использование библиотек сети доставки контента (CDN) . В этой главе будет проведено то, что такое библиотека CDN, как она приносит пользу вашему проекту, и представят некоторые из самых популярных библиотек, таких как CSS Taillid, начальная загрузка, пользовательский интерфейс и многое другое. Он также даст полезные примеры того, как побудить вашего помощника по искусству интегрировать и использовать эти библиотеки, особенно полезные, если вы новичок в кодировании и полагаетесь на ИИ для упрощения задач разработки.

Что такое библиотека CDN?

Сеть поставки контента (CDN) представляет собой географически распределенную сеть серверов, которая обеспечивает веб -контент, например, библиотеки JavaScript, Frameworks CSS или шрифты, которые, по -видимому, на основе их местоположения. Библиотека CDN относится к версии популярной структуры или инструмента (например, начальной загрузки или jQuery), которая размещена в этих сетях. Вместо того, чтобы загружать файлы на свой собственный сервер или машину для разработки, вы ссылаетесь непосредственно из CDN.

Зачем использовать библиотеки CDN?

  1. Более быстрое время загрузки
    CDN обслуживают файлы с серверов, расположенных ближе всего к вашим пользователям, сокращая время, необходимое для загрузки вашего сайта.

  2. Сниженная полоса пропускания для вашего сервера
    Разгрузка библиотечного хостинга на CDN означает, что ваш собственный сервер не должен обрабатывать эти загрузки файлов.

  3. Простота реализации
    Вы можете быстро добавить мощные библиотеки - часто с одной или двумя строками кода.

  4. Автоматические обновления
    CDN обычно размещают последние версии библиотек, поэтому вы можете легко оставаться в курсе.

  5. Кэширование преимуществ
    Если пользователь уже загрузил ту же библиотеку или структуру из CDN на другом сайте, их браузер может использовать кэшированную версию, ускоряя время загрузки.

Как подсказывать ИИ использовать библиотеки CDN

Если вы совершенно новичок в кодировании и полагаетесь на ИИ для настройки своего проекта, вот быстрые примеры, которые вы можете использовать для интеграции библиотеки AI:

  • Интеграция структуры CSS
    Пример подсказки:

    «Используйте Bootstrap CDN в моем существующем HTML -файле. Убедитесь, что NAVBAR рушится на мобильных устройствах. Поместите нижний колонтитул внизу с простым уведомлением об авторском праве ».

  • Переход из одной рамки в другой
    Пример подсказки:

    «Замените Tailwind CSS на начальную загрузку через CDN в моем проекте. Тщательно преобразуйте существующие классы Tailwind в эквиваленты Bootstrap, чтобы сохранить тот же общий дизайн ».

  • Добавление утилиты JavaScript
    Пример подсказки:

    «Включите Lodash из CDN в моем индексе. Html. Затем, в моем файле Main.js, продемонстрируйте, как использовать функцию дебюра Lodash для текстового ввода ».

Эти подсказки дают ясность ИИ, на какую библиотеку использовать, как ее использовать (через CDN), и любые конкретные задачи или функции, которые вы хотите реализованы.

Популярные библиотеки CDN для веб -разработки

Ниже вы найдете популярные библиотеки, которые вы можете легко добавить в свой проект через CDN. Каждая запись включает в себя описание, заметки об использовании, образец фрагмента и пример приглашения для вашего ИИ.

1. Творческий ветер CSS

  • Описание:
    Утилита, первая структура CSS, которая помогает быстро создавать пользовательские проекты, используя предварительно определенные классы в вашем HTML.

  • Лучше всего для:
    Разработчики, которые хотят детальный контроль над дизайном, не написав много пользовательских CSS.

  • Образец реализации: 

     <link 
  href="https://cdn.jsdelivr.net/npm/[email protected]/dist/tailwind.min.css"
  rel="stylesheet"
>

  • Пример подсказки AI:

    «Добавьте Tailwind CSS в мой проект через CDN. Создайте домашнюю страницу с заголовком, простой секцией героев и нижним колонтитулом. Используйте классы Tailwind, чтобы обеспечить чистый, современный дизайн ».

2. начальная загрузка

  • Описание:
    Один из наиболее широко используемых каркасов CSS для отзывчивых, первых мобильных веб-сайтов. Он поставляется с предварительно разработанными компонентами, такими как Navbars, Forms, Modals и многое другое.

  • Лучше всего для:
    Новички, которые хотят быстрого и последовательного дизайна с минимальной настройкой.

  • Образец реализации: 

     <link 
  href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css"
  rel="stylesheet"
>
<script 
  src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js"
></script>

  • Пример подсказки AI:

    «Добавьте последние ссылки на Bootstrap CDN на мой сайт. Создайте отзывчивый Navbar с выпадающим списком для «служб» и строкой поиска справа. Убедитесь, что он хорошо смотрится на мобильных устройствах ».

3. Материал UI (MUI)

  • Описание:
    Библиотека на основе React, которая реализует систему разработки материалов Google, предлагая готовые к использованию компоненты, такие как кнопки, карты и диалоги.

  • Лучше всего для:
    Реактируйте проекты, требующие эстетической эстетики из гладкого, современного и профессионального дизайна.

  • Образец реализации:

    • CDN для значков материала: 
       <link 
  href="https://fonts.googleapis.com/icon?family=Material+Icons" 
  rel="stylesheet"
>
    • Реагировать интеграцию (через NPM): 
       npm install @mui/material @emotion/react @emotion/styled

    (В то время как материальный пользовательский интерфейс в основном рекомендует NPM, вы все равно можете ссылаться на их шрифты иконы через CDN.)

  • Пример подсказки AI:

    «Интегрируйте значки материала из CDN и используйте их в моем приложении React. Создайте простой компонент карты для отображения продуктов с помощью кнопки «Добавить в корзину» в стиле материала ».

4. Font потрясающий

  • Описание:
    Комплексная библиотека значков, предлагающая масштабируемые векторные значки, которые можно легко стиливать с помощью CSS.

  • Лучше всего для:
    Быстрое добавление значков в социальных сетях, значков NAV или любой другой иконографии без создания пользовательских SVG.

  • Образец реализации: 

     <link 
  href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0-beta3/css/all.min.css"
  rel="stylesheet"
>

  • Пример подсказки AI:

    «Добавьте Font Awesome в мой HTML через CDN. Замените все иконки заполнителей в моем Navbar на шрифты Awesome иконки для «Дома», «Профиль» и «Cart». Убедитесь, что они правильно масштабируются на мобильных устройствах ».

5. jQuery

  • Описание:
    Классическая библиотека JavaScript, известная благодаря упрощению манипуляций с DOM, обработкой событий и операциями AJAX.

  • Лучше всего для:
    Наследие проекты или начинающие, которые хотят проводить сложные взаимодействия с пользовательским интерфейсом, не написав обширный ванильный JavaScript.

  • Образец реализации: 

     <script 
  src="https://code.jquery.com/jquery-3.6.4.min.js"
></script>

  • Пример подсказки AI:

    «Добавьте jQuery через CDN в мой index.html. Покажите мне, как скрыть Div, когда пользователь нажимает кнопку, и зарегистрируйте сообщение успеха в консоли ».

6. Лодаш

  • Описание:
    Библиотека утилит JavaScript, которая предоставляет широкий спектр функций для манипулирования данными, включая глубокое клонирование, деберу и многое другое.

  • Лучше всего для:
    Упрощение сложных операций на массивах, объектах и ​​струнах.

  • Образец реализации: 

     <script 
  src="https://cdn.jsdelivr.net/npm/[email protected]/lodash.min.js"
></script>

  • Пример подсказки AI:

    «Добавьте Lodash из CDN. Преобразуйте мои существующие для петли в методы Lodash и продемонстрируйте, как дебайт поле поиска ».

7. animate.css

  • Описание:
    Библиотека CSS, предлагающая готовые анимации (исчезает, отскочит, слайд и т. Д.), Которая вы можете применить к элементам, добавив определенные классы.

  • Лучше всего для:
    Быстро добавление анимации в элементы без написания пользовательских анимаций CSS.

  • Образец реализации: 

     <link 
  href="https://cdnjs.cloudflare.com/ajax/libs/animate.css/4.1.1/animate.min.css" 
  rel="stylesheet"
>

  • Пример подсказки AI:

    «Включите animate.css через CDN и примените анимацию затухания в раздел моего героя на загрузке страницы. Также примените эффект отскока на кнопку «Зарегистрироваться сейчас».

8. chart.js

  • Описание:
    Универсальная библиотека JavaScript для создания интерактивных диаграмм и графиков.

  • Лучше всего для:
    Новички, которые хотят простого способа визуализации данных без погружения в более сложные библиотеки.

  • Образец реализации: 

     <script src="https://cdn.jsdelivr.net/npm/chart.js"></script>

     const ctx = document.getElementById('myChart').getContext('2d');
new Chart(ctx, {
  type: 'bar',
  data: {
    labels: ['Red', 'Blue', 'Yellow'],
    datasets: [{
      label: '# of Votes',
      data: [12, 19, 3],
      backgroundColor: ['red', 'blue', 'yellow']
    }]
  }
});

  • Пример подсказки AI:

    «Добавьте chart.js через CDN и создайте планку, показывающие ежемесячные данные о продажах. Обивайте ось Y как «продажи» и оси X с месяцами года ».

Выбор правильной библиотеки для вашего проекта

  1. Определите свои потребности
    Решите, нужна ли вам помощь в основном с стилем (CSS) или с функциональностью JavaScript. Некоторые библиотеки (такие как начальная загрузка или попутный ветер) сосредоточены на дизайне, в то время как другие (такие как jQuery или Lodash) сосредоточены на помощи в задачах JavaScript.

  2. Проверьте совместимость
    Убедитесь, что выбранная вами библиотека хорошо работает с инструментами или фреймворками, которые у вас уже есть.

  3. Ищите активное сообщество и документацию
    Хорошо поддерживаемые библиотеки, как правило, имеют лучшие учебные пособия, более крупные сообщества для устранения неполадок и частые обновления.

  4. Спросите свой ИИ
    Если вы все еще не уверены, какую библиотеку использовать, предложите вашему искусственному интеллекту:

    «Какая библиотека лучше всего подходит для начинающего, очень настраиваемого пользовательского интерфейса: популярного вещества, начальной загрузки или материала?»

    ИИ может объяснить плюсы и минусы для каждого выбора в контексте вашего проекта.

Расширять
Дополнительная информация
Связанные приложения
Рекомендуем вам
Связанные новости Все