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ê criará um projeto Web ASP.NET Core.

Primeiro, vamos instalar a versão correta do dotnet no Cloud Shell. Para este exercício, usaremos a versão 3.1.102 do SDK.

1. Execute os seguintes comandos no Azure Cloud Shell à direita para baixar e instalar o dotnet:

   wget -q -O - https://dotnet.microsoft.com/download/dotnet/scripts/v1/dotnet-install.sh | bash -s -- --version 6.0.404
   export PATH="~/.dotnet:$PATH"
   echo "export PATH=~/.dotnet:\$PATH" >> ~/.bashrc
   

2. Depois, execute o seguinte comando para criar um aplicativo MVC ASP.NET Core chamado "BestBikeApp":

   dotnet new mvc --name BestBikeApp
   

O comando criará uma pasta chamada "BestBikeApp" para manter o 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 semelhante à seguinte:

   info: Microsoft.Hosting.Lifetime[0]
         Now listening on: https://localhost:5001
   info: Microsoft.Hosting.Lifetime[0]
         Now listening on: http://localhost:5000
   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/user/BestBikeApp
   

   A saída descreve a situação após iniciar o aplicativo: ele está em execução e escutando na porta 5000.

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

   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 class="border-top footer text-muted">
            <div class="container">
                &copy; 2021 - 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=4q1jwFhaPaZgr8WAUSrux6hAuh0XDg9kPS3xIVq36I0"></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, usaremos o Maven, uma ferramenta de gerenciamento e criação de projetos usada com frequência para aplicativos Java. Usaremos o modelo de 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
   

Você terá um arquivo listado chamado helloworld.war. Esse é o pacote de aplicativos Web que implantaremos no Serviço de Aplicativo.

Para criar um aplicativo Web inicial do Node.js, usaremos o npm (Gerenciador de Pacotes do Node) juntamente com alguns códigos JavaScript para executar o processamento real da página da Web.

1. Execute os seguintes comandos no Azure Cloud Shell para criar um package.json que descreve o aplicativo Node.js:

   cd ~
   mkdir helloworld
   cd helloworld
   npm init -y
   

Isso cria um arquivo package.json na pasta atual. Você deverá encontrá-lo na pasta atual se inserir ls na janela do terminal. Precisaremos de um arquivo JavaScript para executar nossa lógica de site. Como esse é apenas um exemplo básico, só precisaremos de um arquivo: index.js.

1. Execute o seguinte comando no terminal para criar o arquivo:

   touch index.js
   

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

   code .
   

3. Selecione o arquivo package.json e faça as edições a seguir na seção scripts para usar o Node.js e iniciar o aplicativo Web:

   {
     "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. Este é um programa Node.js pequeno para sempre responder 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, usaremos a estrutura de aplicativo Web do 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 o aplicativo no Azure, você precisará salvar a lista de requisitos do 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 sessão do shell de comando primário (à direita), execute os comandos a seguir para iniciar o aplicativo Web:

   cd ..
   source venv/bin/activate
   

3. Na sessão do shell de comando primário (à direita), execute os seguintes comandos para iniciar o 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