Exercício – escrever código para implementar uma aplicação Web
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 8.0 do dotnet
no Cloud Shell. Para este exercício, vamos utilizar a versão SDK 3.1.102.
Execute os seguintes comandos à direita para baixar e instalar o dotnet 8.0:
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
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:
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:
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 depois de iniciar seu aplicativo: o aplicativo está em execução e escutando na porta 5022.
Em outra sessão do Cloud Shell, execute o seguinte comando para navegar até seu aplicativo 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 b-b5g3qljvtd class="border-top footer text-muted"> <div b-b5g3qljvtd class="container"> © 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>
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.
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
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
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.
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
.
Execute o seguinte comando no terminal para criar o arquivo:
touch index.js
Agora temos de fazer algumas edições em ambos os ficheiros. Execute o seguinte comando no terminal para abrir um editor interativo:
code .
Selecione o
package.json
arquivo e faça as seguintes edições nascripts
seção para usá Node.js para iniciar o aplicativo Web:{ "name": "helloworld", ... "scripts": { "start": "node index.js" }, ... }
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.
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}`);
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.
Em uma nova guia do navegador, navegue até https://shell.azure.com/.
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
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>
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.
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
Execute estes comandos para criar e alternar para o novo diretório do aplicativo Web:
mkdir ~/BestBikeApp cd ~/BestBikeApp
Crie um novo arquivo para seu aplicativo Web abrindo application.py no editor interativo python:
code application.py
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"
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.
Para implantar seu aplicativo no Azure, você precisará salvar a lista de requisitos de aplicativo que você fez para ele em um arquivo de requirements.txt . 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.
Abra uma segunda sessão de shell de comando em uma nova guia https://shell.azure.com/do navegador .
Na sessão principal do shell de comando (à direita), execute os seguintes comandos para ativar o ambiente virtual:
cd .. source venv/bin/activate
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
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>
Na sessão principal do shell de comando, pressione Ctrl+C para sair do aplicativo Web e feche o Azure Cloud Shell secundário.