Ejercicio: Escritura de código para implementar una aplicación web

5 minutos

En esta unidad, usará herramientas de desarrollo para crear el código de una aplicación web de inicio.

Creación de un proyecto web

El núcleo de las herramientas de la CLI de .NET es la herramienta de línea de comandos dotnet. Con este comando, creará un proyecto web de ASP.NET Core.

Primero, se instala la versión adecuada de dotnet en Cloud Shell. Para este ejercicio, se usará la versión 3.1.102 del SDK.

Ejecute los comandos siguientes en Azure Cloud Shell, a la derecha, para descargar e instalar 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

A continuación, ejecute los comandos siguientes para crear una aplicación ASP.NET Core MVC llamada "BestBikeApp":
```
dotnet new mvc --name BestBikeApp
```

El comando creará una carpeta denominada "BestBikeApp" para almacenar el proyecto.

Prueba opcional de la aplicación web

Vaya a https://shell.azure.com/ en una nueva pestaña para abrir una segunda sesión de shell de comandos. Puede probar la aplicación de forma local en Azure. Para ello, siga estos pasos:

En la sesión de shell de comandos principal, ejecute los comandos siguientes para compilar y ejecutar la aplicación web:

cd BestBikeApp
dotnet run

Debería obtener una salida similar a la siguiente:

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

La salida describe la situación después de iniciar la aplicación: la aplicación se ejecuta y escucha el puerto 5000.

En la segunda sesión de shell de comandos, ejecute el comando siguiente para ir a la aplicación web:

curl -kL http://127.0.0.1:5000/

Debería ver que aparece código HTML, que termina en las líneas siguientes:

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

En la sesión del shell de comandos principal, presione Ctrl+C para salir de la aplicación web.

Para crear una aplicación web de inicio, se usará Maven, una herramienta de administración y compilación de proyectos que se utiliza con frecuencia para aplicaciones de Java. Se usará la plantilla maven-archetype-webapp a fin de generar el código para la aplicación web.

Ejecute los comandos siguientes en Azure Cloud Shell ahora para crear una aplicación web:

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

Ahora, ejecute estos comandos para cambiar al nuevo directorio de aplicación "helloworld" y empaquetar la aplicación para la implementación:
```
cd helloworld
mvn package
```
Cuando el comando termine de ejecutarse, ejecute estos comandos para abrir el directorio target y mostrar su contenido:
```
cd target
ls
```

Tendrá un archivo denominado helloworld.war. Este es el paquete de aplicación web que se va a implementar en App Service.

Para crear una aplicación web Node.js de inicio, se usará el Administrador de paquetes de Node (npm) junto con código de JavaScript para ejecutar el procesamiento real de la página web.

Ejecute los comandos siguientes en Azure Cloud Shell para crear un paquete package.json que describa la aplicación Node.js:
```
cd ~
mkdir helloworld
cd helloworld
npm init -y
```

Esto crea un archivo package.json en la carpeta actual. Debería encontrarlo en la carpeta actual si escribe ls en la ventana del terminal. Se necesitará un archivo de JavaScript para ejecutar la lógica del sitio web. Como este es solo un ejemplo básico, solo se necesitará un archivo: index.js.

Ejecute el comando siguiente en el terminal para crear el archivo:
```
touch index.js
```
Ahora habrá que realizar algunos cambios en los dos archivos. Ejecute el comando siguiente en el terminal para abrir un editor interactivo:
```
code .
```
Seleccione el archivo package.json y realice las modificaciones siguientes en la sección scripts para usar Node.js para iniciar la aplicación web:
```
{
  "name": "helloworld",
  ...
  "scripts": {
    "start": "node index.js"
  },
  ...
}
```
Para guardar el archivo, seleccione el menú ..., o bien presione Ctrl+S en Windows y Linux, o Comando+S en macOS.

Importante

Siempre que edite un archivo en el editor, no olvide guardarlo posteriormente mediante el menú … de la esquina superior derecha del editor, o mediante Ctrl+S en Windows y Linux, o Comando+S en macOS. Para salir del editor, presione Ctrl+Q en Windows y Linux, o bien haga clic en la esquina superior derecha del editor y seleccione Salir en MacOS.

Cambie al archivo index.js y agregue el siguiente contenido. Se trata de un programa pequeño de Node.js que siempre responde con "Hola mundo" cuando se realiza una solicitud GET al 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}`);

Guarde el archivo y salga del editor. Para ello, seleccione el icono ... en la parte superior derecha y seleccione Guardar y Cerrar editor en el menú contextual, o bien con las teclas de aceleración Ctrl+S y Ctrl+Q en Windows y Linux.

Prueba opcional de la aplicación web

Mientras ejecuta la aplicación web helloworld, puede comprobar que se ejecuta localmente si abre una segunda sesión de shell de comandos.

En una nueva pestaña del explorador, vaya a https://shell.azure.com/.
En la sesión de shell de comandos principal, ejecute los comandos siguientes para iniciar la aplicación web:
```
cd ~/helloworld
npm start
```
En la segunda sesión de shell de comandos, ejecute el comando siguiente para ir a la aplicación web:
```
curl http://127.0.0.1:1337/
```
Debería obtener la siguiente salida:
```
<html><body><h1>Hello World!</h1></body></html>
```
Desde la sesión de shell de comandos principal, presione Ctrl+C para salir de la aplicación web y, después, cierre la segunda pestaña del explorador de sesión de shell.

Para crear una aplicación web de inicio se usará el marco de trabajo de la aplicación web Flask.

Ejecute los comandos siguientes en Azure Cloud Shell para configurar un entorno virtual e instalar Flask en el perfil:
```
python3 -m venv venv
source venv/bin/activate
pip install flask
```
Ejecute estos comandos para crear y cambiar al nuevo directorio de la aplicación web:
```
mkdir ~/BestBikeApp
cd ~/BestBikeApp
```
A fin de crear un archivo para la aplicación web, abra application.py en el editor interactivo de Python:
```
code application.py
```

Copie y pegue el siguiente código de Python para crear la funcionalidad principal de la aplicación web:

from flask import Flask
app = Flask(__name__)

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

Guarde el archivo y salga del editor. Para ello, seleccione el menú ... en la parte superior derecha y elija Guardar>Cerrar editor o presione Ctrl+S y Ctrl+Q en Windows y Linux.
Para implementar la aplicación en Azure, tendrá que guardar la lista de requisitos de la aplicación que ha creado para ella en un archivo requirements.txt. Para ello, ejecute el comando siguiente:
```
pip freeze > requirements.txt
```

Prueba opcional de la aplicación web

Puede probar la aplicación localmente en Azure mientras se ejecuta.

Abra una segunda sesión del shell de comandos en una nueva pestaña del explorador https://shell.azure.com/.
Desde la sesión de shell de comandos principal (a la derecha), ejecute los comandos siguientes para activar el entorno virtual:
```
cd ..
source venv/bin/activate
```
Desde la sesión de shell de comandos principal (a la derecha), ejecute los comandos siguientes para iniciar la aplicación web:
```
cd ~/BestBikeApp
export FLASK_APP=application.py
flask run
```
En la segunda sesión de shell de comandos, ejecute el comando siguiente para ir a la aplicación web:
```
curl http://127.0.0.1:5000/
```
Debería obtener la siguiente salida HTML:
```
<html><body><h1>Hello Best Bike App!</h1></body></html>
```
Desde la sesión de shell de comandos principal, presione Ctrl+C para salir de la aplicación web y, después, cierre la sesión de Azure Cloud Shell secundaria.

Continuar

Ejercicio: Escritura de código para implementar una aplicación web

Creación de un proyecto web

Prueba opcional de la aplicación web

Prueba opcional de la aplicación web

Prueba opcional de la aplicación web

Comentarios