Интерфейс WebIDE LabEx VM
WebIDE LabEx предоставляет современную среду разработки, похожую на VS Code, для задач кодирования. Построенный на Ubuntu 22.04, он предлагает знакомый интерфейс для написания, компиляции и запуска кода на нескольких языках программирования.
Предварительный просмотр WebIDE
Среда WebIDE особенно полезна для:
- Написания и отладки кода на различных языках программирования (Java, JavaScript, Python и т. д.)
- Проектов веб-разработки с возможностями живого просмотра, см. Создайте свою первую HTML-страницу в WebIDE
- Управления файлами и каталогами проекта через интуитивно понятный интерфейс
- Интегрированных операций терминала для задач командной строки
Расположение среды
Интерфейс WebIDE состоит из нескольких ключевых компонентов:
- Левая боковая панель:
- Проводник файлов для навигации по проекту
- Функция поиска
- Управление исходным кодом для операций Git
- Панель расширений
- Область редактора: Основная рабочая область кодирования
- Нижняя панель: Терминал, проблемы и вывод
- Строка состояния: Быстрый доступ к настройкам и живому просмотру
- Верхняя панель меню: Файл, Правка, Вид и другие параметры
Доступ к терминалу
Вы можете открыть терминал двумя способами:
- Нажмите на значок в левом нижнем углу и переключитесь на вкладку Terminal;
- Используйте верхнее меню: Terminal > New Terminal
Предварительный просмотр HTML
Чтобы просмотреть ваш HTML-файл:
- В WebIDE нажмите кнопку “Go Live” в правом нижнем углу.
- Откроется новая вкладка браузера с отображением вашей HTML-страницы.
- Или вы можете нажать на вкладку “Web 8080”, чтобы открыть предварительный просмотр.
- Если ваш проект находится в подкаталоге, вы можете получить к нему доступ, щелкнув имя подкаталога в проводнике, тогда он автоматически отобразит файл
index.html
в этом каталоге. - Если ваш проект содержит несколько HTML-файлов, включая
index.html
, вы можете добавить имя файла к URL-адресу, чтобы просмотреть его напрямую. Например,https://xxx.labex.io/another-file.html
. - Вы можете открыть предварительный просмотр в новой вкладке, нажав кнопку “Open in New Tab”. Он откроет предварительный просмотр в новой вкладке браузера.
“Go Live” автоматически:
- Запустит веб-сервер
- Предоставит обновления в реальном времени по мере изменения вашего кода
Советы: LabEx VM размещает предварительный просмотр на порту 8080. Вы можете поделиться ссылкой на предварительный просмотр с другими, чтобы продемонстрировать свою работу. После остановки вашей lab vm ссылка на предварительный просмотр больше не будет работать.
Сценарии использования
Пример разработки на Java
Пример разработки на Java
Ваша первая Java Lab
Это пример Java lab, который демонстрирует, как писать, компилировать и запускать простую программу на Java с использованием LabEx WebIDE.
Работа с проектами Java в WebIDE:
- Создайте новый файл Java через проводник
- Напишите свой код Java с подсветкой синтаксиса
- Скомпилируйте и запустите в терминале:
- Просматривайте ошибки компиляции и предупреждения в реальном времени
Пример веб-разработки
Пример веб-разработки
Ваша первая HTML Lab
Это пример HTML lab, который демонстрирует, как создать простую веб-страницу с использованием LabEx WebIDE.
Для задач разработки интерфейса:
- Создайте файлы HTML, CSS и JavaScript
- Нажмите кнопку “Go Live” в правом нижнем углу
- Доступ к вашей веб-странице через:
- Вкладка Web 8080 в верхней части LabEx VM
- Создайте новые вкладки предварительного просмотра портов, используя кнопку +
Примечание: Ваш проект автоматически развертывается в общедоступном URL-адресе на сервере LabEx, что делает его доступным через вкладки Web.
Пример разработки на Python
Пример разработки на Python
Создайте процессор именных тегов астронавтов
Это пример задачи на Python, который демонстрирует, как обрабатывать имена астронавтов с использованием LabEx WebIDE.
Для программирования на Python:
- Создайте файл Python в проводнике
- Напишите свой код Python с:
- Подсветкой синтаксиса
- Завершением кода
- Обнаружением ошибок
- Запустите свой скрипт в терминале:
- Используйте интегрированный отладчик для пошагового выполнения
Часто задаваемые вопросы
Как мне получить доступ к моему веб-приложению?
Как мне получить доступ к моему веб-приложению?
LabEx VM автоматически развертывает ваши веб-проекты:
-
Порт по умолчанию 8080:
- Нажмите вкладку “Web 8080” в верхней части LabEx VM
- Ваше приложение будет доступно через общедоступный URL-адрес
-
Пользовательские порты:
- Нажмите кнопку +, чтобы создать новые вкладки предварительного просмотра портов
- Каждый порт получает свой собственный общедоступный 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:
Для менеджеров пакетов, зависящих от языка:
- Node.js/npm:
- Python/pip:
Помните, что установки временные и будут сброшены при завершении сеанса.
Как мне обрабатывать загрузку и скачивание файлов?
Как мне обрабатывать загрузку и скачивание файлов?
WebIDE предоставляет несколько способов управления файлами:
-
Загрузка файлов:
- Перетащите файлы в проводник
- Используйте загрузку/скачивание после щелчка правой кнопкой мыши в проводнике
-
Скачивание файлов:
- Щелкните правой кнопкой мыши файл в проводнике
- Выберите “Скачать”
-
Копировать/Вставить:
- Текстовое содержимое можно скопировать непосредственно между вашей локальной машиной и WebIDE
- Двоичные файлы следует использовать функции загрузки/скачивания
Помните, что все файлы временные и будут потеряны при завершении сеанса.