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

5 minutos

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.

Execute o seguinte comando para criar um aplicativo Model-View Cotroller (MVC) do ASP.NET Core chamado "BestBikeApp":

dotnet new mvc --name BestBikeApp

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

Opcionalmente, teste o aplicativo Web

Você pode testar o aplicativo localmente no Azure. Para fazer isso, execute as seguintes etapas:

Execute os seguintes comandos para criar e executar o seu aplicativo Web em segundo plano:

cd BestBikeApp
dotnet run &

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

[1] <process-number>
<username> [ ~/BestBikeApp ]$ Building...
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:<port>
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

Na saída, anote os valores de <process-number> e <port>.

Execute o comando a seguir para navegar até o seu aplicativo Web, substituindo <port> pela porta que você anotou na última etapa.

curl -kL http://localhost:<port>/

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://video2.skills-academy.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>

Usando o <número de processo> que você anotou anteriormente, pare o dotnet:
```
kill <process-number>
```

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.

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.5

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
```
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.

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

cd ~
mkdir helloworld
cd helloworld
cat >package.json <<EOL
{
  "name": "helloworld",
  "version": "1.0.0",
  "scripts": {
    "start": "node index.js"
  }
}
EOL

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.

Crie o arquivo executando o seguinte comando no terminal:

cat >index.js <<EOL
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}\`);
EOL

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.

Em uma nova guia do navegador, navegue até https://shell.azure.com/.
Na sessão do shell de comando principal, execute os seguintes comandos para iniciar o seu aplicativo Web em segundo plano:
```
cd ~/helloworld
npm start &
```
Você deve obter uma saída como a do exemplo a seguir:
```
[1] <process-number>
> helloworld@1.0.0 start
> node index.js

Server running at http://localhost:1337
```
Na saída, anote o valor de <process-number>.
Na mesma sessão do Cloud Shell, execute o comando a seguir para navegar até o seu aplicativo Web.
```
curl -kL http://localhost:1337/
```
Você deverá obter o seguinte resultado:
```
<html><body><h1>Hello World!</h1></body></html>
```
Usando o <número de processo> que você anotou anteriormente, pare o nó:
```
kill <process-number>
```

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

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
```
Execute estes comandos para criar e alternar para o novo diretório do aplicativo Web:
```
mkdir ~/BestBikeApp
cd ~/BestBikeApp
```

Crie um novo arquivo chamado application.py com uma resposta HTML básica:

cat >application.py <<EOL
from flask import Flask
app = Flask(__name__)

@app.route("/")
def hello():
    return "<html><body><h1>Hello Best Bike App!</h1></body></html>\n"
EOL

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.

Execute os seguintes comandos para iniciar o seu aplicativo Web em segundo plano:
```
cd ~/BestBikeApp
export FLASK_APP=application.py
flask run &
```
Você deve obter uma saída como a do exemplo a seguir:
```
[1] <process-number>
 * Serving Flask app 'application.py'
 * Debug mode: off
WARNING: This is a development server. Do not use it in a production deployment. Use a production WSGI server instead.
 * Running on http://127.0.0.1:5000
Press CTRL+C to quit
```
Na saída, anote o valor de <process-number>. Como o processo está em execução em segundo plano, você não pode sair com CTRL+C. Você precisará interrompê-lo com o número do processo.
Execute o comando a seguir para navegar até o seu aplicativo Web.
```
curl -kL http://localhost:5000/
```
Você deverá obter a seguinte saída HTML:
```
<html><body><h1>Hello Best Bike App!</h1></body></html>
```
Usando o <número de processo> que você anotou anteriormente, pare o Flask:
```
kill <process-number>
```

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

Criar um projeto Web

Opcionalmente, teste o aplicativo Web

Opcionalmente, teste o aplicativo Web

Opcionalmente, teste o aplicativo Web

Comentários