Interface WebIDE da VM LabEx
O WebIDE LabEx fornece um ambiente de desenvolvimento moderno, semelhante ao VS Code, para tarefas de codificação. Construído no Ubuntu 22.04, ele oferece uma interface familiar para escrever, compilar e executar código em várias linguagens de programação.
Visualização do WebIDE
O ambiente WebIDE é particularmente útil para:
- Escrever e depurar código em várias linguagens de programação (Java, JavaScript, Python, etc.)
- Projetos de desenvolvimento web com recursos de visualização ao vivo, consulte Crie Sua Primeira Página HTML no WebIDE
- Gerenciar arquivos e diretórios de projetos por meio de uma interface intuitiva
- Operações de terminal integradas para tarefas de linha de comando
Layout do Ambiente
A interface WebIDE consiste em vários componentes principais:
- Barra Lateral Esquerda:
- Explorador de arquivos para navegação no projeto
- Funcionalidade de pesquisa
- Controle de origem para operações Git
- Painel de extensões
- Área do Editor: Principal espaço de trabalho de codificação
- Painel Inferior: Terminal, problemas e saída
- Barra de Status: Acesso rápido às configurações e visualização ao vivo
- Barra de Menu Superior: Arquivo, Editar, Exibir e outras opções
Acesso ao Terminal
Você pode abrir o terminal de duas maneiras:
- Clique no ícone no canto inferior esquerdo e mude para a aba Terminal;
- Use o menu superior: Terminal > Novo Terminal
Visualizar HTML
Para visualizar seu arquivo HTML:
- No WebIDE, clique no botão “Go Live” no canto inferior direito.
- Uma nova aba do navegador será aberta com sua página HTML renderizada.
- Ou, você pode clicar na aba “Web 8080” para abrir a visualização.
- Se seu projeto estiver em um subdiretório, você pode acessá-lo clicando no nome do subdiretório no explorador, então ele visualizará automaticamente o arquivo
index.html
nesse diretório. - Se seu projeto tiver vários arquivos HTML, incluindo
index.html
, você pode anexar o nome do arquivo à URL para visualizá-lo diretamente. Por exemplo,https://xxx.labex.io/another-file.html
. - Você pode abrir a visualização em uma nova aba clicando no botão “Abrir em Nova Aba”. Ele abrirá a visualização em uma nova aba do navegador.
“Go Live” irá automaticamente:
- Iniciar um servidor web
- Fornecer atualizações em tempo real conforme você modifica seu código
Dicas: A VM LabEx hospeda a visualização na porta 8080. Você pode compartilhar o link da visualização com outras pessoas para mostrar seu trabalho. Depois que sua VM do laboratório for interrompida, o link da visualização não funcionará mais.
Cenários de Uso
Exemplo de Desenvolvimento Java
Exemplo de Desenvolvimento Java
Seu Primeiro Laboratório Java
Este é um laboratório Java de exemplo que demonstra como escrever, compilar e executar um programa Java simples usando o WebIDE LabEx.
Trabalhando com projetos Java no WebIDE:
- Crie um novo arquivo Java via o explorador
- Escreva seu código Java com destaque de sintaxe
- Compile e execute no terminal:
- Visualize erros de compilação e avisos em tempo real
Exemplo de Desenvolvimento Web
Exemplo de Desenvolvimento Web
Seu Primeiro Laboratório HTML
Este é um laboratório HTML de exemplo que demonstra como criar uma página web simples usando o WebIDE LabEx.
Para tarefas de desenvolvimento frontend:
- Crie arquivos HTML, CSS e JavaScript
- Clique no botão “Go Live” no canto inferior direito
- Acesse sua página web através de:
- Aba Web 8080 no topo da VM LabEx
- Crie novas abas de visualização de porta usando o botão +
Observação: Seu projeto é implantado automaticamente em uma URL pública no servidor LabEx, tornando-o acessível através das abas Web.
Exemplo de Desenvolvimento Python
Exemplo de Desenvolvimento Python
Crie um Processador de Etiqueta de Nome de Astronauta
Este é um desafio Python de exemplo que demonstra como processar nomes de astronautas usando o WebIDE LabEx.
Para programação Python:
- Crie um arquivo Python no explorador
- Escreva seu código Python com:
- Destaque de sintaxe
- Conclusão de código
- Detecção de erros
- Execute seu script no terminal:
- Use o depurador integrado para execução passo a passo
Perguntas Frequentes
Como acesso minha aplicação web?
Como acesso minha aplicação web?
A VM LabEx implanta automaticamente seus projetos web:
-
Porta padrão 8080:
- Clique na aba “Web 8080” no topo da VM LabEx
- Sua aplicação estará acessível através de uma URL pública
-
Portas personalizadas:
- Clique no botão + para criar novas abas de visualização de porta
- Cada porta recebe sua própria URL pública
- Útil para executar vários serviços (por exemplo, frontend e backend)
Observação: Ao contrário do desenvolvimento local, você não acessa o localhost diretamente, pois o LabEx é executado na nuvem.
Quais são os atalhos de teclado essenciais?
Quais são os atalhos de teclado essenciais?
Atalhos comuns no WebIDE:
-
Operações de Arquivo
- Novo Arquivo: Ctrl+N
- Salvar: Ctrl+S
- Encontrar: Ctrl+F
- Substituir: Ctrl+H
-
Controles do Painel
- Alternar Barra Lateral: Ctrl+B
- Alternar Terminal: Ctrl+`
- Paleta de Comandos: Ctrl+Shift+P
-
Recursos do Editor
- Multi-cursor: Alt+Clique
- Selecionar Todas as Ocorrências: Ctrl+Shift+L
- Formatar Documento: Shift+Alt+F
Posso instalar ferramentas ou pacotes adicionais?
Posso instalar ferramentas ou pacotes adicionais?
Sim, você pode instalar ferramentas adicionais usando o gerenciador de pacotes do Ubuntu:
Para gerenciadores de pacotes específicos da linguagem:
- Node.js/npm:
- Python/pip:
Lembre-se que as instalações são temporárias e serão redefinidas quando sua sessão terminar.
Como lido com uploads e downloads de arquivos?
Como lido com uploads e downloads de arquivos?
O WebIDE oferece várias maneiras de gerenciar arquivos:
-
Upload de Arquivos:
- Arraste e solte arquivos no explorador
- Use o upload/download após clicar com o botão direito no explorador
-
Download de Arquivos:
- Clique com o botão direito no arquivo no explorador
- Selecione “Download”
-
Copiar/Colar:
- O conteúdo do texto pode ser copiado diretamente entre sua máquina local e o WebIDE
- Arquivos binários devem usar os recursos de upload/download
Lembre-se que todos os arquivos são temporários e serão perdidos quando sua sessão terminar.