Anterior

Avançar

Exercício – Escrever o código para implementar um aplicativo Web

Concluído

Nesta unidade, você usará ferramentas para desenvolvedores a fim de criar o código de um aplicativo Web inicial.

Criar um projeto Web

O núcleo das ferramentas da CLI do .NET é a ferramenta de linha de comando dotnet. Usando esse comando, você cria um novo projeto web ASP.NET Core.

Primeiro, vamos instalar a versão 8.0 do dotnet no Cloud Shell. Para esse exercício, estamos usando o SDK versão 3.1.102.

1. Baixe e instale o dotnet 8.0 executando os seguintes comandos na janela do Azure Cloud Shell:

   wget https://dot.net/v1/dotnet-install.sh -O dotnet-install.sh
   chmod +x ./dotnet-install.sh
   ./dotnet-install.sh --channel 8.0
   export PATH="~/.dotnet:$PATH"
   echo "export PATH=~/.dotnet:\$PATH" >> ~/.bashrc
   

2. Em seguida, execute o seguinte comando para criar um novo aplicativo ASP.NET Core Model-View Controller (MVC) chamado "BestBikeApp":

   dotnet new mvc --name BestBikeApp
   

O comando cria uma nova pasta chamada "BestBikeApp" para armazenar seu projeto.

Opcionalmente, teste o aplicativo Web

Abra uma segunda sessão de shell de comando navegando até https://shell.azure.com/ em uma nova guia. Você pode testar seu aplicativo localmente no Azure. Para fazer isso, execute as seguintes etapas:

1. Na sessão do Shell de comando primária, execute os seguintes comandos para criar e executar o aplicativo Web:

   cd BestBikeApp
   dotnet run
   

   Você deve obter uma saída como a do exemplo a seguir:

   warn: Microsoft.AspNetCore.DataProtection.KeyManagement.XmlKeyManager[35]
         No XML encryptor configured. Key {b4a2970c-215c-4eb2-92b4-c28d021158c6} may be persisted to storage in unencrypted form.
   info: Microsoft.Hosting.Lifetime[14]
         Now listening on: http://localhost:5022
   info: Microsoft.Hosting.Lifetime[0]
         Application started. Press Ctrl+C to shut down.
   info: Microsoft.Hosting.Lifetime[0]
         Hosting environment: Development
   info: Microsoft.Hosting.Lifetime[0]
         Content root path: /home/cephas_lin/BestBikeApp
   

   A saída descreve a situação após a inicialização do aplicativo: ele está em execução e escutando a porta 5022. Anote a porta na qual seu aplicativo está sendo executado e da qual está escutando sua saída.

2. Em outra sessão do Cloud Shell, execute o seguinte comando para navegar até seu aplicativo web, substituindo 5000 pela porta que você anotou na etapa anterior:

   curl -kL http://127.0.0.1:5000/
   

   Um HTML deverá aparecer, terminando com as seguintes linhas:

   <div class="text-center">
       <h1 class="display-4">Welcome</h1>
       <p>Learn about <a href="https://learn.microsoft.com/aspnet/core">building Web apps with ASP.NET Core</a>.</p>
   </div>
   
           </main>
       </div>
   
       <footer b-b5g3qljvtd class="border-top footer text-muted">
           <div b-b5g3qljvtd class="container">
               &copy; 2024 - BestBikeApp - <a href="/Home/Privacy">Privacy</a>
           </div>
       </footer>
       <script src="/lib/jquery/dist/jquery.min.js"></script>
       <script src="/lib/bootstrap/dist/js/bootstrap.bundle.min.js"></script>
       <script src="/js/site.js?v=hRQyftXiu1lLX2P9Ly9xa4gHJgLeR1uGN5qegUobtGo"></script>
   
   </body>
   </html>
   

3. Na sessão do shell de comando primário, pressione Ctrl + C para encerrar o aplicativo Web.

Para criar um aplicativo web inicial, usamos o Maven, uma ferramenta de gerenciamento e construção de projetos comumente usada para aplicativos Java. Usamos o modelo maven-archetype-webapp para gerar o código para nosso aplicativo web.

1. Execute os seguintes comandos no Azure Cloud Shell agora para criar um aplicativo Web:

   cd ~
   mvn archetype:generate -DgroupId=example.demo -DartifactId=helloworld -DinteractiveMode=false -DarchetypeArtifactId=maven-archetype-webapp -DarchetypeVersion=1.4
   

2. Agora, execute estes comandos para alterar para o novo diretório de aplicativos "helloworld" e empacotar o aplicativo para implantação:

   cd helloworld
   mvn package
   

3. Após a execução do comando, digite estes comandos para abrir o diretório de destino e listar o conteúdo:

   cd target
   ls
   

Agora você tem um arquivo chamado helloworld.war que é o pacote de aplicativo web que vamos implantar no Serviço de Aplicativo do Azure.

Para criar um aplicativo web Node.js inicial, usamos o Node Package Manager (npm) junto com algum código JavaScript para executar o processamento real da página web.

1. Execute os seguintes comandos no terminal para criar um novo arquivo package.json que descreva nosso aplicativo Node.js:

   cd ~
   mkdir helloworld
   cd helloworld
   npm init -y
   

Um novo arquivo package.json é criado na pasta atual. Você deverá encontrá-lo na pasta atual se inserir ls na janela do terminal. Precisamos de um arquivo JavaScript para executar a lógica do nosso site. Para esse exemplo básico, precisamos apenas de um arquivo: index.js.

1. Crie o arquivo executando o seguinte comando no terminal:

   touch index.js
   

2. Agora, precisamos fazer algumas edições em ambos os arquivos. Para abrir um editor interativo, execute o seguinte comando no terminal:

   code .
   

3. Para usar o Node.js para iniciar o aplicativo web, selecione o arquivo package.json e faça as seguintes edições na seção scripts:

   {
     "name": "helloworld",
     ...
     "scripts": {
       "start": "node index.js"
     },
     ...
   }
   

4. Para salvar o arquivo, clique no menu … ou pressione Ctrl+S no Windows e no Linux ou Command+S no macOS.

   Importante

   Sempre que você editar um arquivo no editor, salve-o selecionando o menu ... no canto superior direito do editor ou pressionando Ctrl+S no Windows e no Linux ou Command+S no macOS. Para sair do editor, pressione Ctrl+Q no Windows e no Linux ou clique no canto superior direito do editor e selecione Encerrar no MacOS.

5. Alterne para o arquivo index.js e adicione o conteúdo a seguir a ele. Esse código é um pequeno programa Node.js que sempre responde com "Olá, Mundo!" quando qualquer solicitação GET é feita ao servidor.

   const http = require('http');
   
   const server = http.createServer(function(request, response) {
       response.writeHead(200, { "Content-Type": "text/html" });
       response.end("<html><body><h1>Hello World!</h1></body></html>");
   });
   
   const port = process.env.PORT || 1337;
   server.listen(port);
   
   console.log(`Server running at http://localhost:${port}`);
   

6. Salve o arquivo e encerre o editor selecionando o ícone ... no canto superior direito e depois Salvar e Fechar Editor no menu de contexto ou usando as teclas aceleradoras Ctrl+S e Ctrl+Q no Windows e no Linux.

Opcionalmente, teste o aplicativo Web

Enquanto estiver executando o aplicativo Web Olá, Mundo, você pode verificar se ele está em execução localmente abrindo uma segunda sessão do shell de comando.

1. Em uma nova guia do navegador, navegue até https://shell.azure.com/.

2. Na sessão do Shell de comando primária, execute os seguintes comandos para iniciar o aplicativo Web:

   cd ~/helloworld
   npm start
   

3. Na segunda sessão do Shell de comando, execute os seguintes comandos para procurar o aplicativo Web:

   curl http://127.0.0.1:1337/
   

   Você verá a seguinte saída:

   <html><body><h1>Hello World!</h1></body></html>
   

4. Na sessão do shell de comando primário, pressione Ctrl+C para encerrar o aplicativo Web e feche a segunda guia do navegador da sessão do shell.

Para criar um aplicativo web inicial, usamos a estrutura de aplicativo web Flask.

1. Execute os seguintes comandos no Azure Cloud Shell para configurar um ambiente virtual e instalar o Flask em seu perfil:

   python3 -m venv venv
   source venv/bin/activate
   pip install flask
   

2. Execute estes comandos para criar e alternar para o novo diretório do aplicativo Web:

   mkdir ~/BestBikeApp
   cd ~/BestBikeApp
   

3. Crie um arquivo para o aplicativo Web abrindo application.py no editor interativo do Python:

   code application.py
   

4. Copie e cole o seguinte código Python para criar a funcionalidade do aplicativo Web principal:

   from flask import Flask
   app = Flask(__name__)
   
   @app.route("/")
   def hello():
       return "<html><body><h1>Hello Best Bike App!</h1></body></html>\n"
   

5. Salve o arquivo e saia do editor clicando no menu … no canto superior direito e selecionando Salvar>Fechar editor, ou pressionando Ctrl+S e Ctrl+Q no Windows e no Linux.

6. Para implantar seu aplicativo no Azure, você precisa salvar a lista de requisitos de aplicativo que você criou para ele em um arquivo requirements.txt. Para fazer isso, execute o comando a seguir:

   pip freeze > requirements.txt
   

Opcionalmente, teste o aplicativo Web

Você pode testar o aplicativo localmente no Azure durante a execução.

1. Abra uma segunda sessão do shell de comando em uma nova guia do navegador https://shell.azure.com/.

2. Na sua sessão de shell de comando principal (na janela à direita), execute os seguintes comandos para ativar o ambiente virtual:

   cd ..
   source venv/bin/activate
   

3. Na sua sessão principal do shell de comando (na janela à direita), execute os seguintes comandos para iniciar seu aplicativo web:

   cd ~/BestBikeApp
   export FLASK_APP=application.py
   flask run
   

4. Na segunda sessão do Shell de comando, execute os seguintes comandos para procurar o aplicativo Web:

   curl http://127.0.0.1:5000/
   

   Você deverá obter a seguinte saída HTML:

   <html><body><h1>Hello Best Bike App!</h1></body></html>
   

5. Na sessão do shell de comando primário, pressione Ctrl+C para encerrar o aplicativo Web e feche o Azure Cloud Shell.

Continuar