Fazer um tour pelo IDE do AWS Cloud9

Este tópico fornece um tour básico pelo ambiente de desenvolvimento integrado (IDE) do AWS Cloud9. Para aproveitar ao máximo esse tour, siga as etapas mostradas a seguir em sequência.

Pré-requisitos

Para fazer esse tour, é necessário ter uma conta da AWS e um ambiente de desenvolvimento do AWS Cloud9 aberto. Para saber como fazer essas coisas, siga as etapas em Conceitos básicos: tutoriais básicos para o AWS Cloud9. Como alternativa, é possível explorar tópicos relacionados distintos, como Configurar o AWS Cloud9 e Trabalhando com ambientes em AWS Cloud9.

Atenção

Ter um ambiente de desenvolvimento do AWS Cloud9 pode resultar em cobranças na sua conta da AWS. Isso inclui possíveis cobranças pelo Amazon EC2 se você estiver usando um ambiente EC2. Para obter mais informações, consulte Definição de preço Amazon EC2.

Etapa 1: Barra de menus

A barra de menus, na parte superior do IDE, contém comandos comuns para trabalhar com arquivos e código e alterar as configurações do IDE. Também é possível visualizar e executar o código a partir da barra de menus.

Você pode ocultar a barra de menus ao escolher a seta em sua borda, como mostrado a seguir.

Você pode exibir a barra de menus novamente ao escolher a seta no meio de onde a barra de menus estava anteriormente, da seguinte forma.

Compare os resultados com o seguinte.

Use o IDE para trabalhar com um conjunto de arquivos nas próximas diversas seções deste tutorial. Para configurar esses arquivos, selecione File (Arquivo), New File (Novo arquivo).

Em seguida, copie o texto a seguir na guia Untitled1 do editor.

fish.txt
--------
A fish is any member of a group of organisms that consist of
all gill-bearing aquatic craniate animals that lack limbs with
digits. They form a sister group to the tunicates, together
forming the olfactores. Included in this definition are
lampreys and cartilaginous and bony fish as well as various
extinct related groups.

Para salvar o arquivo, selecione File (Arquivo), Save (Salvar). Nomeie o arquivo fish.txt e, em seguida, selecione Save (Salvar).

Repita essas instruções, salvando o segundo arquivo como cat.txt, com o seguinte conteúdo.

cat.txt
-------
The domestic cat is a small, typically furry, carnivorous mammal.
They are often called house cats when kept as indoor pets or
simply cats when there is no need to distinguish them from
other felids and felines. Cats are often valued by humans for
companionship and for their ability to hunt.

Geralmente, existem diversas formas de fazer as coisas no IDE. Por exemplo, para ocultar a barra de menus, em vez de escolher a seta na borda, selecione View (Exibir), Menu Bar (Barra de menus). Para criar um novo arquivo, em vez de selecionar File, New File (Arquivo, Novo arquivo), pressione Alt-N (para Windows/Linux) ou Control-N (para MacOS). Para reduzir o comprimento desse tutorial, descrevemos apenas uma forma de fazer as coisas. À medida que você se acostumar com o IDE, fique à vontade para experimentar e descobrir a forma mais adequada para você.

Etapa 2: Painel

O painel fornece acesso rápido a cada um dos ambientes. No painel, você pode criar, abrir e alterar a configuração para um ambiente.

Para abrir o painel, na barra de menus, escolha AWS Cloud9, Go To Your Dashboard (Ir para o painel).

Para visualizar as configurações do ambiente, selecione o título no cartão my-demo-environment. Para voltar ao painel, use o botão Voltar do navegador da Web ou a trilha de navegação chamada Environments (Ambientes).

Para abrir a IDE para o seu ambiente, escolha Open IDE (Abrir IDE) no interior do cartão my-demo-environment.

nota

Pode levar alguns instantes para o IDE ser exibido novamente.

Etapa 3: Janela Environment (Ambiente)

A janela Environment (Ambiente) exibe uma lista das pastas e arquivos no &env;. Também é possível exibir diferentes tipos de arquivos, como arquivos ocultos.

Para exibir ou ocultar a janela Environment (Ambiente), escolha o botão Environment (Ambiente).

Para mostrar ou ocultar a janela Environment (Ambiente) e o botão Environment (Ambiente), selecione Window (Janela), Environment (Ambiente) na barra de menus.

Para mostrar ou ocultar arquivos, escolha o ícone de engrenagem na janela Environment (Ambiente) e, em seguida selecione Show Hidden Files (Mostrar arquivos ocultos).

Etapa 4: Editor, guias e painéis

O editor é onde você pode escrever código, executar uma sessão de terminal e alterar as configurações do IDE. Cada instância de um arquivo aberto, sessão de terminal e assim por diante é representada por uma guia. As guias podem ser agrupadas em painéis. As guias são exibidas na borda dos painéis.

Para mostrar ou ocultar guias, selecione View (Exibir), Tab Buttons (Botões da guia) na barra de menus.

Para abrir uma nova guia, selecione o ícone + na borda da linha de guias. Em seguida, selecione um dos comandos disponíveis, por exemplo, New File (Novo arquivo), da seguinte forma.

Para exibir dois painéis, selecione o ícone que se parece um menu suspenso, que está na borda da linha de guias. Em seguida, selecione Split Pane in Two Rows (Dividir painel em duas linhas), como mostrado a seguir.

Para retornar a um único painel, selecione o ícone de menu suspenso novamente e, em seguida, selecione o ícone de quadrado único, da seguinte forma.

Etapa 5: Console

O console é um local alternativo para criação e gestão de guias. Por padrão, ele contém uma guia Terminal, mas também pode conter outros tipos de guias.

Para mostrar ou ocultar o console, selecione View (Exibir), Console na barra de menus.

Para expandir ou recolher o console, selecione o ícone de redimensionamento, que está na borda do console, como mostrado a seguir.

Etapa 6: Seção Open Files (Abrir arquivos)

A seção Open Files (Arquivos abertos) exibe uma lista de todos os arquivos atualmente abertos no editor. Open Files (Abrir arquivos) faz parte da janela Environment (Ambiente), como mostrado a seguir.

Para mostrar ou ocultar a seção Open Files (Arquivos abertos), selecione View (Exibir), Open Files (Arquivos abertos) na barra de menus.

Para alternar entre arquivos abertos, escolha o arquivo de interesse na lista.

Etapa 7: Medianiz

A medianiz, na borda de cada arquivo no editor, exibe itens como números de linha e símbolos contextuais ao trabalhar com arquivos.

Para ocultar a medianiz, selecione View (Exibir), Gutter (Medianiz) na barra de menus.

Etapa 8: Barra de status

A barra de status, na borda de cada arquivo no editor, exibe itens como números de linha e caractere, preferência de tipo de arquivo, configurações de espaço e guia, e configurações do editor relacionadas.

Para mostrar ou ocultar a barra de status, selecione View (Exibir), Status Bar (Barra de status) na barra de menus.

Para acessar um número de linha específico, escolha uma guia com o arquivo de interesse. Em seguida, na barra de status, selecione os números de linha e caractere (deve ser algo como 7:45). Digite um número de linha (como 4) e, em seguida, pressione Enter, como mostrado a seguir.

Para alterar a preferência de tipo de arquivo, na barra de status, selecione um tipo de arquivo diferente. Por exemplo, para cat.txt, selecione Ruby para alterar as cores da sintaxe. Para retornar às cores de texto sem formatação, selecione Plain Text (Texto sem formatação), como mostrado a seguir.

Etapa 9: Janela Outline (Estrutura de tópicos)

Use a janela Outline (Descrever) para acessar rapidamente um local de arquivo específico.

Para mostrar ou ocultar a janela Outline (Descrever) e o botão Outline (Descrever), selecione Window (Janela), Outline (Descrever) na barra de menus.

Para ver como a janela Outline (Descrever) funciona, crie um arquivo chamado hello.rb. Copie o seguinte código no arquivo e salve-o.

def say_hello(i)
  puts "Hello!"
  puts "i is #{i}"
end

def say_goodbye(i)
  puts "i is now #{i}"
  puts "Goodbye!"
end

i = 1
say_hello(i)
i += 1
say_goodbye(i)

Para mostrar ou ocultar o conteúdo da janela Outline (Estrutura de tópicos), escolha o botão Outline (Estrutura de tópicos).

Depois, na janela Outline (Descrever), selecione say_hello(i) e, depois, selecione say_goodbye(i), como mostrado a seguir.

Etapa 10: Janela Go (Ir)

Você pode usar a janela Go(Ir) para abrir um arquivo no editor, vá para a definição de um símbolo, execute um comando, ou acesse uma linha no arquivo ativo no editor.

Para mostrar o conteúdo da janela Go (Ir), selecione o botão Go (Ir) (a lupa).

Para mostrar ou ocultar a janela Go (Ir) e o botão Go (Ir), selecione Window (Janela), Go (Ir) na barra de menus.

Com a janela Go (Ir) aberta, é possível:

• Digitar uma barra (/) seguida por parte ou o nome completo de um arquivo. Na lista de arquivos correspondentes exibida, escolha um arquivo para abri-lo no editor. Por exemplo, digitar /fish lista fish.txt, enquanto digitar /.txt lista tanto fish.txt quanto cat.txt.

  nota

  A pesquisa de arquivos tem como escopo apenas arquivos e pastas não ocultos na janela Environment (Ambiente).

• Digitar um símbolo (@) seguido do nome de um símbolo. Na lista de símbolos correspondentes exibida, escolha um símbolo para acessá-lo no editor. Por exemplo, com o arquivo hello.rb aberto e ativo no editor, digite @hello para listar say_hello(i) ou digite @say para listar tanto say_hello(i) quanto say_goodbye(i).

  nota

  Se o arquivo ativo no editor faz parte de um projeto de linguagem compatível, a pesquisa por símbolo tem como escopo o projeto atual. Caso contrário, a pesquisa por símbolo tem escopo apenas para o arquivo ativo no editor. Para obter mais informações, consulte Suporte aprimorado e recursos ao TypeScript.

• Digite um ponto (.) seguido pelo nome de um comando. Na lista de comandos exibida, escolha um comando para executá-lo. Por exemplo, digitar .closetab e, em seguida, pressionar Enter fecha a guia atual no editor. Para obter uma lista dos comandos disponíveis, consulte Referência de comandos do Ambiente de desenvolvimento integrado (IDE) do AWS Cloud9.

• Digite dois pontos (:) seguido por um número para ir para esse número de linha no arquivo ativo no editor. Por exemplo, com o arquivo hello.rb aberto e ativo no editor, digite :11 para ir para a linha 11 do arquivo.

Para ver os mapeamentos de chave para cada uma dessas ações com base no modo de teclado atual e sistema operacional, consulte cada um dos comandos Go To (Ir para) disponíveis no menu Go (Ir) na barra de menus.

Etapa 11: Guia Immediate (Urgente)

A guia Immediate (Urgente) permite testar pequenos trechos de código JavaScript. Para ver como a guia Immediate (Urgente) funciona, faça o seguinte.

1. Abra uma guia Immediate (Urgente) selecionando Window (Janela), New Immediate Window (Nova janela Urgente) na barra de menus.

2. Execute algum código na guia Immediate (Urgente). Para testar isso, digite o seguinte código na janela, pressionando Shift-Enter após digitar a linha 1 e novamente após a linha 2. Pressione Enter após a linha 3. (Se você pressionar Enter em vez de Shift-Enter após digitar a linha 1 ou a linha 2, o código será executado antes que o desejado.)

   for (i = 0; i <= 10; i++) { // Press Shift-Enter after typing this line.
     console.log(i)            // Press Shift-Enter after typing this line.
   }                           // Press Enter after typing this line. The numbers 0 to 10 will be printed.

   

Etapa 12: Lista de processos

A Process List (Lista de processos) exibe todos os processos em execução. Encerre ou até mesmo interrompa à força processos que não deseja continuar executando. Para ver como a Process List (Lista de processos) funciona, faça o seguinte.

1. Exiba a Process List (Lista de processos) ao escolher Tools (Ferramentas), Process List (Lista de processos) na barra de menus.

2. Encontre um processo. Na Process List (Lista de processos), digite o nome do processo.

3. Encerre ou interrompa à força um processo. Na lista de processos, selecione o processo e, depois, selecione Kill (Encerrar) ou Force Kill (Encerrar à força).

Etapa 13: Preferências

As Preferências incluem as seguintes configurações.

• Configurações somente para o ambiente atual, como a opção de usar tabulações suaves no editor, os tipos de arquivo a serem ignorados e comportamentos de conclusão de código para linguagens como PHP e Python.

• As configurações do usuário em cada um dos ambientes, como cores, fontes e comportamentos do editor.

• Os mapeamentos de teclas, como as combinações de teclas de atalho preferidas para usar ao trabalhar com arquivos no editor.

• O tema geral do IDE.

Para exibir as preferências, escolha AWS Cloud9, Preferences (Preferências) na barra de menus. Algo como o seguinte é exibido.

Etapa 14: Terminal

Execute uma ou mais sessões de terminal no IDE. Para iniciar uma sessão de terminal, selecione Window (Janela), New Terminal (Novo terminal) na barra de menus. Ou escolha o ícone "mais" ao lado das guias Console e escolha New Terminal (Novo terminal).

Você pode tentar executar um comando no terminal. Por exemplo, no terminal, digite echo $PATH e, depois, pressione Enter para imprimir o valor da variável de ambiente PATH.

Você também pode tentar executar comandos adicionais. Por exemplo, tente comandos como os seguintes.

• pwd para imprimir o caminho para o diretório atual.

• aws --version para imprimir as informações sobre a AWS CLI.

• ls -l para imprimir as informações sobre o diretório atual.

Etapa 15: Janela Debugger (Depurador)

Use a janela Debugger (Depurador) para depurar o código. Por exemplo, avance pelo código em execução uma parte por vez, observe os valores das variáveis ao longo do tempo e explore a pilha de chamadas.

nota

Este procedimento é semelhante a Etapa 2: tour básico do IDE de qualquer um dos tutoriais básicos de IDE.

Para mostrar ou ocultar a janela Debugger (Depurador) e o botão Debugger (Depurador), selecione Window (Janela), Debugger (Depurador) na barra de menus.

Para este tutorial, é possível experimentar a janela Debugger (Depurador) e um código JavaScript fazendo o seguinte.

1. Verifique a instalação do Node.js no ambiente executando o seguinte comando em uma sessão do terminal: node --version. Se o Node.js estiver instalado, o número de versão do Node.js será mostrado na saída, e será possível ir para a etapa 3 deste procedimento para escrever um código JavaScript.

2. Se precisar instalar o Node.js, faça o seguinte.

   1. Execute os seguintes comandos, um por vez, para garantir que o ambiente tenha as atualizações mais recentes e, em seguida, baixe o Gerenciador de versão do Node (nvm). (O nvm é um script de shell Bash simples, útil para instalar e gerenciar versões do Node.js. Para obter mais informações, consulte Node Version Manager no GitHub.)

      Para Amazon Linux:

      sudo yum -y update
      curl -o- https://raw.githubusercontent.com/creationix/nvm/v0.33.0/install.sh | bash

      Para Ubuntu Server:

      sudo apt update
      curl -o- https://raw.githubusercontent.com/creationix/nvm/v0.33.0/install.sh | bash

   2. Use um editor de texto para atualizar o arquivo de perfil do shell (por exemplo, ~/.bashrc) e permitir que o nvm seja carregado. Por exemplo, na janela Environment (Ambiente) do IDE, selecione o ícone de engrenagem e, em seguida, escolha Show Home in Favorites (Exibir página inicial nos favoritos). Repita essa etapa e selecione também Show Hidden Files (Exibir arquivos ocultos).

   3. Abra o arquivo ~/.bashrc.

   4. Digite ou cole o seguinte código no final do arquivo para permitir que o nvm faça upload.

      Para Amazon Linux:

      export NVM_DIR="/home/ec2-user/.nvm"
      [ -s "$NVM_DIR/nvm.sh" ] && \. "$NVM_DIR/nvm.sh"  # This loads nvm.

      Para Ubuntu Server:

      export NVM_DIR="/home/ubuntu/.nvm"
      [ -s "$NVM_DIR/nvm.sh" ] && \. "$NVM_DIR/nvm.sh"  # This loads nvm.

   5. Salve o arquivo.

   6. Feche essa sessão de terminal e inicie uma nova. Depois, execute o comando a seguir para instalar a versão mais recente do Node.js.

      nvm install node

3. Escreva algum código JavaScript para depurar. Por exemplo, crie um arquivo, adicione o seguinte código ao arquivo e salve-o como hello.js.

   var i;
   
   i = 10;
   
   console.log("Hello!");
   console.log("i is " + i);
   
   i += 1;
   
   console.log("i is now " + i);
   console.log("Goodbye!");

4. Adicione alguns pontos de interrupção no código. Por exemplo, no gutter, selecione a margem ao lado das linhas 6 e 10. Um círculo vermelho é exibido ao lado de cada um desses números de linha, como mostrado a seguir.

   

5. Agora você está pronto para depurar o código JavaScript. Para isso, faça o seguinte.

   1. Para mostrar ou ocultar o conteúdo da janela Debugger (Depurador), escolha o botão Debugger (Depurador), conforme mostrado na próxima etapa.

   2. Observe o valor da variável denominada i enquanto o código está em execução. Na janela Debugger (Depurador), em Watch Expressions (Expressões de observação), selecione Type an expression here (Digite uma expressão aqui). Digite a letra i e, em seguida, pressione Enter, como mostrado a seguir.

      

   3. Comece a executar o código. Selecione Run (Executar), Run With (Executar com), Node.js, como mostrado a seguir.

      

   4. O código pausa a execução na linha 6. A janela Debugger (Depurador) exibe o valor de i em Watch Expressions (Expressões de observação), que atualmente é 10.

      

   5. Na janela Debugger (Depurador), selecione Resume (Retomar), que é o ícone de seta azul, como mostrado a seguir.

      

   6. O código pausa a execução na linha 10. A janela Debugger (Depurador) agora exibe o novo valor de i, que atualmente é 11.

   7. Selecione Resume (Retomar) novamente. O código é executado até o final. A saída é impressa na guia hello.js do console, como mostrado a seguir.

      

Compare os resultados com o seguinte.

Considerações finais

Atenção

Lembre-se de que ter um ambiente de desenvolvimento do AWS Cloud9 pode resultar em cobranças na sua conta da AWS. Isso inclui possíveis cobranças pelo Amazon EC2 se você estiver usando um ambiente EC2. Para obter mais informações, consulte Definição de preço Amazon EC2.

Há tópicos adicionais na seção pai (Trabalhar com a IDE) que você pode querer explorar. No entanto, quando terminar de fazer o tour pelo IDE do AWS Cloud9 e não precisar mais do ambiente, exclua-o e seus recursos associados, conforme descrito em Exclusão de um ambiente.