Разработка проекта локально

Обзор

Локальная разработка означает настройку и запуск проекта на собственном компьютере вместо облака или на удаленном сервере. При локальной разработке код можно работать без подключения к Интернету и экспериментировать, не затрагивая динамическое приложение.

Действия, необходимые для настройки локальной среды разработки, отличаются для каждого проекта на основе языков программирования, платформ, инструментов и зависимостей. В этом руководстве вы узнаете основные навыки , необходимые для настройки любого проекта, работая с примером клиентского приложения, созданного на основе HTML, CSS и JavaScript. Затем вы можете применить эти же навыки к другим проектам в будущем.

Установка основных средств разработки

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

1. Настройте VS Code с помощью GitHub Copilot.
2. Установите Git.

Клонирование и открытие репозитория в VS Code

Сначала создайте копию репозитория на компьютере, клонировав его.

1. Начните с клонирования репозитория новых2code/client-side-web-application. Эта ссылка открывает диалоговое окно в VS Code для клонирования репозитория.
2. Выберите расположение для сохранения репозитория на компьютере, а затем нажмите кнопку "Выбрать в качестве назначения репозитория".
3. При появлении запроса откройте репозиторий.

Установка необходимых компонентов для проекта

1. Откройте Copilot Chat, а затем попросите его определить, что необходимо установить с помощью следующего запроса.

   Text

   What do I need to install to develop this project locally? 
   

   В этом примере Copilot скажет, что для этого проекта требуется Node.js. Node.js позволяет запускать код JavaScript на компьютере и предоставляет средства для веб-разработки.

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

   В этом примере можно спросить "Разделы справки установить Node.js?" Copilot предоставит инструкции по посещению http://nodejs.org/ и скачиванию установщика.

Установка зависимостей проекта

Теперь, когда у вас установлено необходимое программное обеспечение, необходимо понять, как использовать его для этого конкретного проекта.

Сначала проверьте файл README. Большинство проектов включают файл README в корневом каталоге, который объясняет, как настроить и запустить проект. Для этого проекта файл README и запрос Copilot сообщит вам, что следующим шагом является установка зависимостей проекта с помощью npm, диспетчера пакетов Node.js.

1. Откройте палитру команд, нажав клавиши CTRL+SHIFT+P (Windows/Linux) или CMD+SHIFT+P (Mac).

2. Введите Terminal: Create New Terminal и нажмите клавишу ВВОД.

3. На вкладке терминала вставьте следующую команду.

   Bash

   npm install
   

Так как этот проект использует Node.js, мы использовали для npm install чтения package.json файла и скачивания всех зависимостей, необходимых для правильной работы проекта. Другие типы проектов будут использовать разные команды. Например, проекты Python могут использовать, а проекты Ruby могут использоватьсяpip install -r requirements.txt``bundle install.

Если README не содержит сведения об установке зависимостей, вы можете:

• Поиск файлов конфигурации: различные проекты используют разные файлы для перечисления зависимостей, например, Node.js использования проектов, использования package.json``requirements.txtпроектов Python и использования Gemfileпроектов Ruby.
• Спросите Copilot: попробуйте выполнить запрос: "Теперь, когда я Node.js установлен, что следующий шаг для настройки этого проекта?"

Запуск и разработка проекта

Теперь, когда среда разработки настроена, вы можете запустить сервер разработки и использовать его для предварительного просмотра изменений в коде.

1. Узнайте, как запустить проект, проверив файл README в папке проекта.

   В этом примере раздел "Действия для локального запуска" в README объясняет, что можно запустить сервер разработки с npm start помощью команды. Введите следующую команду в терминале.

   Bash

   npm start
   

2. Чтобы определить, где доступен локальный сервер, просмотрите выходные данные терминала. Вы увидите, что локальный сервер доступен.http://localhost:8080 Перейдите к адресу в браузере.

3. Внесите небольшое изменение в код, например редактирование текста в HTML-файле или изменение цвета в CSS-файле. Сохранение изменений.

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

   Для этого проекта обновите окно браузера, чтобы увидеть изменения.

Если README не содержит необходимых сведений, проверьте файлы конфигурации для доступных команд. Вы также можете задать Copilot Chat со следующим запросом.

How do I start this project locally?

How do I start this project locally?

Дальнейшие действия

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

Практика с другим проектом: попробуйте настроить другой проект с различными требованиями. Например, @new2codeвеб-приложение Python использует Python и Flask вместо Node.js.

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

• Клонирование репозитория с помощью VS Code
• Попросите Copilot какие средства и зависимости необходимо установить
• Прочитайте файл README, чтобы понять, как запустить проект
• Получение приложения, работающего в браузере

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