Anterior

Seguinte

Exercício – escrever código para implementar uma aplicação Web

Concluído

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

Criar um projeto Web novo

No centro das ferramentas da CLI de .NET encontra-se a ferramenta de linha de comandos dotnet. Usando esse comando, você criará um novo projeto Web ASP.NET Core.

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

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. Em seguida, execute o seguinte comando para criar um novo aplicativo ASP.NET Core MVC chamado "BestBikeApp":

   dotnet new mvc --name BestBikeApp
   

O comando criará uma nova pasta chamada "BestBikeApp" para manter o seu projeto.

Testar a sua aplicação Web (opcional)

Abra uma segunda sessão do shell de comando navegando até https://shell.azure.com/ uma nova guia. Você pode testar seu aplicativo localmente no Azure. Para fazê-lo, siga os seguintes passos:

1. Na sessão da shell de comandos primária, execute os seguintes comandos para compilar e executar a aplicação Web:

   cd BestBikeApp
   dotnet run
   

   Você deve obter uma saída como a 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
   

   O resultado descreve a situação após iniciar a sua aplicação. A aplicação está em execução e a escutar na porta 5000.

2. Na segunda sessão da shell de comandos, execute o seguinte comando para aceder à sua aplicação Web:

   curl -kL http://127.0.0.1:5000/
   

   Você verá algum HTML aparecer, terminando nas 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 sua sessão da shell de comandos primária, prima Ctrl+C para sair da sua aplicação Web.

Para criar uma aplicação Web inicial, usaremos o Maven, uma ferramenta de gerenciamento de projetos e construção comumente usada para aplicativos Java. Vamos utilizar o modelo maven-archetype-webapp para gerar o código para a nossa aplicação Web.

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

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

2. Agora, execute os seguintes comandos para mudar para o diretório da nova aplicação "olamundo" e empacote a aplicação para implementação:

   cd helloworld
   mvn package
   

3. Quando o comando terminar de ser executado, execute estes comandos para abrir o diretório de destino e listar seu conteúdo:

   cd target
   ls
   

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

Para criar uma aplicação Web Node.js de arranque, vamos utilizar o Gestor de Pacotes de Nós (npm), juntamente com algum código de JavaScript para executar o processamento da página Web em questão.

1. Execute os seguintes comandos no Azure Cloud Shell para criar um novo package.json que descreverá nosso aplicativo Node.js:

   cd ~
   mkdir helloworld
   cd helloworld
   npm init -y
   

Isso cria um novo package.json arquivo na pasta atual. Você deve encontrá-lo na pasta atual se você entrar ls na janela do terminal. Precisaremos de um arquivo JavaScript para executar a lógica do nosso site. Como este é 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 temos de fazer algumas edições em ambos os ficheiros. Execute o seguinte comando no terminal para abrir um editor interativo:

   code .
   

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

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

4. Salve o arquivo selecionando o menu ... ou pressione Ctrl+S no Windows e Linux ou Command+S no macOS.

   Importante

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

5. Mude para o ficheiro index.js e adicione os seguintes conteúdos ao mesmo. Este é um pequeno programa Node.js que sempre responde com "Hello World!" quando qualquer solicitação GET é feita para o 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 seu arquivo e saia do editor selecionando o ícone ... no canto superior direito e selecionando Salvar e Fechar Editor no menu de contexto, ou usando as teclas aceleradoras Ctrl+S e Ctrl+Q no Windows e Linux.

Testar a sua aplicação Web (opcional)

Enquanto estiver executando o aplicativo Web helloworld, você pode verificar se ele está sendo executado localmente abrindo uma segunda sessão de shell de comando.

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

2. Na sua sessão da shell de comandos primária, execute os seguintes comandos para iniciar a sua aplicação Web:

   cd ~/helloworld
   npm start
   

3. Na segunda sessão da shell de comandos, execute o seguinte comando para aceder à sua aplicação Web:

   curl http://127.0.0.1:1337/
   

   Deverá obter o seguinte resultado:

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

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

Para criar uma aplicação web inicial, usaremos a estrutura de aplicação web Flask.

1. Execute os seguintes comandos no Azure Cloud Shell para configurar um ambiente virtual e instalar o Flask no 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 novo arquivo para seu aplicativo Web abrindo application.py no editor interativo python:

   code application.py
   

4. Copie e cole o seguinte código Python para criar a principal funcionalidade da aplicação Web:

   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 seu arquivo e saia do editor selecionando o menu ... no canto superior direito e, em seguida, selecionando Salvar>Fechar Editor ou pressionando Ctrl+S e Ctrl+Q no Windows e Linux.

6. Para implantar seu aplicativo no Azure, você precisará salvar a lista de requisitos de aplicativo que você fez para ele em um arquivo .txt requisitos. Para tal, execute o seguinte comando:

   pip freeze > requirements.txt
   

Testar a sua aplicação Web (opcional)

Você pode testar seu aplicativo localmente no Azure enquanto ele está em execução.

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

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

   cd ..
   source venv/bin/activate
   

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

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

4. Na segunda sessão da shell de comandos, execute o seguinte comando para aceder à sua aplicação Web:

   curl http://127.0.0.1:5000/
   

   Você deve obter a seguinte saída HTML:

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

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

Continuar