Интерфейс WebIDE LabEx VM

​

Предварительный просмотр WebIDE

1. Написания и отладки кода на различных языках программирования (Java, JavaScript, Python и т. д.)
2. Проектов веб-разработки с возможностями живого просмотра, см. Создайте свою первую HTML-страницу в WebIDE
3. Управления файлами и каталогами проекта через интуитивно понятный интерфейс
4. Интегрированных операций терминала для задач командной строки

​

Расположение среды

1. Левая боковая панель:
   • Проводник файлов для навигации по проекту
   • Функция поиска
   • Управление исходным кодом для операций Git
   • Панель расширений
2. Область редактора: Основная рабочая область кодирования
3. Нижняя панель: Терминал, проблемы и вывод
4. Строка состояния: Быстрый доступ к настройкам и живому просмотру
5. Верхняя панель меню: Файл, Правка, Вид и другие параметры

​

Доступ к терминалу

1. Нажмите на значок в левом нижнем углу и переключитесь на вкладку Terminal;
2. Используйте верхнее меню: Terminal > New Terminal

​

Предварительный просмотр HTML

1. В WebIDE нажмите кнопку “Go Live” в правом нижнем углу.
2. Откроется новая вкладка браузера с отображением вашей HTML-страницы.
3. Или вы можете нажать на вкладку “Web 8080”, чтобы открыть предварительный просмотр.
4. Если ваш проект находится в подкаталоге, вы можете получить к нему доступ, щелкнув имя подкаталога в проводнике, тогда он автоматически отобразит файл index.html в этом каталоге.
5. Если ваш проект содержит несколько HTML-файлов, включая index.html, вы можете добавить имя файла к URL-адресу, чтобы просмотреть его напрямую. Например, https://xxx.labex.io/another-file.html.
6. Вы можете открыть предварительный просмотр в новой вкладке, нажав кнопку “Open in New Tab”. Он откроет предварительный просмотр в новой вкладке браузера.

• Запустит веб-сервер
• Предоставит обновления в реальном времени по мере изменения вашего кода

Советы: LabEx VM размещает предварительный просмотр на порту 8080. Вы можете поделиться ссылкой на предварительный просмотр с другими, чтобы продемонстрировать свою работу. После остановки вашей lab vm ссылка на предварительный просмотр больше не будет работать.

​

Сценарии использования

Пример разработки на Java

Ваша первая Java Lab

Это пример Java lab, который демонстрирует, как писать, компилировать и запускать простую программу на Java с использованием LabEx WebIDE.

Работа с проектами Java в WebIDE:

1. Создайте новый файл Java через проводник
2. Напишите свой код Java с подсветкой синтаксиса
3. Скомпилируйте и запустите в терминале:

Copy

javac MyClass.java
java MyClass

4. Просматривайте ошибки компиляции и предупреждения в реальном времени

Пример веб-разработки

Ваша первая HTML Lab

Это пример HTML lab, который демонстрирует, как создать простую веб-страницу с использованием LabEx WebIDE.

Для задач разработки интерфейса:

1. Создайте файлы HTML, CSS и JavaScript
2. Нажмите кнопку “Go Live” в правом нижнем углу
3. Доступ к вашей веб-странице через:
   • Вкладка Web 8080 в верхней части LabEx VM
   • Создайте новые вкладки предварительного просмотра портов, используя кнопку +

Примечание: Ваш проект автоматически развертывается в общедоступном URL-адресе на сервере LabEx, что делает его доступным через вкладки Web.

Пример разработки на Python

Создайте процессор именных тегов астронавтов

Это пример задачи на Python, который демонстрирует, как обрабатывать имена астронавтов с использованием LabEx WebIDE.

Для программирования на Python:

1. Создайте файл Python в проводнике
2. Напишите свой код Python с:
   • Подсветкой синтаксиса
   • Завершением кода
   • Обнаружением ошибок
3. Запустите свой скрипт в терминале:

Copy

python3 script.py

4. Используйте интегрированный отладчик для пошагового выполнения

​

Часто задаваемые вопросы

Как мне получить доступ к моему веб-приложению?

LabEx VM автоматически развертывает ваши веб-проекты:

1. Порт по умолчанию 8080:
   • Нажмите вкладку “Web 8080” в верхней части LabEx VM
   • Ваше приложение будет доступно через общедоступный URL-адрес
2. Пользовательские порты:
   • Нажмите кнопку +, чтобы создать новые вкладки предварительного просмотра портов
   • Каждый порт получает свой собственный общедоступный URL-адрес
   • Полезно для запуска нескольких служб (например, интерфейса и бэкенда)

Примечание: В отличие от локальной разработки, вы не получаете доступ к localhost напрямую, поскольку LabEx работает в облаке.

Какие основные сочетания клавиш?

Общие сочетания клавиш в WebIDE:

• Операции с файлами
  • Новый файл: Ctrl+N
  • Сохранить: Ctrl+S
  • Найти: Ctrl+F
  • Заменить: Ctrl+H
• Элементы управления панелью
  • Переключить боковую панель: Ctrl+B
  • Переключить терминал: Ctrl+`
  • Палитра команд: Ctrl+Shift+P
• Функции редактора
  • Мульти-курсор: Alt+Click
  • Выбрать все вхождения: Ctrl+Shift+L
  • Форматировать документ: Shift+Alt+F

Могу ли я установить дополнительные инструменты или пакеты?

Да, вы можете установить дополнительные инструменты с помощью менеджера пакетов Ubuntu:

Copy

sudo apt update
sudo apt install package-name

Для менеджеров пакетов, зависящих от языка:

• Node.js/npm:

Copy

npm install package-name

• Python/pip:

Copy

pip install package-name

Помните, что установки временные и будут сброшены при завершении сеанса.

Как мне обрабатывать загрузку и скачивание файлов?

WebIDE предоставляет несколько способов управления файлами:

1. Загрузка файлов:
   • Перетащите файлы в проводник
   • Используйте загрузку/скачивание после щелчка правой кнопкой мыши в проводнике
   
2. Скачивание файлов:
   • Щелкните правой кнопкой мыши файл в проводнике
   • Выберите “Скачать”
3. Копировать/Вставить:
   • Текстовое содержимое можно скопировать непосредственно между вашей локальной машиной и WebIDE
   • Двоичные файлы следует использовать функции загрузки/скачивания

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