Interface WebIDE da VM LabEx

​

Visualização do WebIDE

1. Escrever e depurar código em várias linguagens de programação (Java, JavaScript, Python, etc.)
2. Projetos de desenvolvimento web com recursos de visualização ao vivo, consulte Crie Sua Primeira Página HTML no WebIDE
3. Gerenciar arquivos e diretórios de projetos por meio de uma interface intuitiva
4. Operações de terminal integradas para tarefas de linha de comando

​

Layout do Ambiente

1. 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
2. Área do Editor: Principal espaço de trabalho de codificação
3. Painel Inferior: Terminal, problemas e saída
4. Barra de Status: Acesso rápido às configurações e visualização ao vivo
5. Barra de Menu Superior: Arquivo, Editar, Exibir e outras opções

​

Acesso ao Terminal

1. Clique no ícone no canto inferior esquerdo e mude para a aba Terminal;
2. Use o menu superior: Terminal > Novo Terminal

​

Visualizar HTML

1. No WebIDE, clique no botão “Go Live” no canto inferior direito.
2. Uma nova aba do navegador será aberta com sua página HTML renderizada.
3. Ou, você pode clicar na aba “Web 8080” para abrir a visualização.
4. 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.
5. 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.
6. 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.

• 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

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:

1. Crie um novo arquivo Java via o explorador
2. Escreva seu código Java com destaque de sintaxe
3. Compile e execute no terminal:

Copy

javac MyClass.java
java MyClass

4. Visualize erros de compilação e avisos em tempo real

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:

1. Crie arquivos HTML, CSS e JavaScript
2. Clique no botão “Go Live” no canto inferior direito
3. 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

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:

1. Crie um arquivo Python no explorador
2. Escreva seu código Python com:
   • Destaque de sintaxe
   • Conclusão de código
   • Detecção de erros
3. Execute seu script no terminal:

Copy

python3 script.py

4. Use o depurador integrado para execução passo a passo

​

Perguntas Frequentes

Como acesso minha aplicação web?

A VM LabEx implanta automaticamente seus projetos web:

1. 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
2. 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?

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?

Sim, você pode instalar ferramentas adicionais usando o gerenciador de pacotes do Ubuntu:

Copy

sudo apt update
sudo apt install package-name

Para gerenciadores de pacotes específicos da linguagem:

• Node.js/npm:

Copy

npm install package-name

• Python/pip:

Copy

pip install package-name

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?

O WebIDE oferece várias maneiras de gerenciar arquivos:

1. Upload de Arquivos:
   • Arraste e solte arquivos no explorador
   • Use o upload/download após clicar com o botão direito no explorador
   
2. Download de Arquivos:
   • Clique com o botão direito no arquivo no explorador
   • Selecione “Download”
3. 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.