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.

  1. Ejecute los comandos siguientes en Azure Cloud Shell, a la derecha, para descargar e instalar dotnet.

    wget -q -O - https://dot.net/v1/dotnet-install.sh | bash -s -- --version 3.1.102
export PATH="~/.dotnet:$PATH"
echo "export PATH=~/.dotnet:\$PATH" >> ~/.bashrc

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

Abra una segunda sesión del shell de comandos, por ejemplo desde https://shell.azure.com/. Puede probar la aplicación localmente en Azure. Para ello, siga estos pasos:

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

    Debe obtener algo parecido a lo 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.

  2. 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://docs.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. 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.

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

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

  3. Cuando el comando termine de ejecutarse, ejecute estos comandos para abrir el directorio "target" y mostrar su contenido.

    cd target
ls

Verá 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.

  1. Ejecute los siguientes comandos en Azure Cloud Shell para crear un nuevo paquete package.json que describa nuestra aplicación Node.js.

    cd ~
mkdir helloworld
cd helloworld
npm init -y

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

  1. Ejecute el comando siguiente en el terminal para crear el archivo.

    touch index.js

  2. Ahora habrá que realizar algunos cambios en los dos archivos. Ejecute el comando siguiente en el terminal para abrir un editor interactivo.

    code .

  3. 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"
  },
  ...
}

  4. Guarde el archivo seleccionando el menú ... o presione (Ctrl+S en Windows y Linux, y 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 presionando (Ctrl+S en Windows y Linux, o Comando+S en macOS). Para salir del editor, presione Ctrl+Q en Windows y Linux; Comando+Q en macOS.

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

  2. Guarde el archivo y salga del editor; para ello, seleccione el icono ☰ en la parte superior derecha y, después, seleccione Guardar > Cerrar editor en el menú contextual, o bien presione Ctrl+S y Ctrl+Q en Windows y Linux; Command+S y Command+Q en macOS.

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.

  1. En una nueva pestaña del explorador, vaya a https://shell.azure.com/.

  2. En la sesión de shell de comandos principal, ejecute los comandos siguientes para iniciar la aplicación web.

    cd ~/helloworld
npm start

  3. 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/

    Debe ver lo siguiente.

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

  4. En 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.

  1. Ejecute los comandos siguientes para configurar un entorno virtual e instalar Flask en el perfil.

    python3 -m venv venv
source venv/bin/activate
pip install flask

  2. Ejecute estos comandos en Azure Cloud Shell ahora para crear el directorio para la nueva aplicación web.

    mkdir ~/BestBikeApp
cd ~/BestBikeApp

  3. Para crear un archivo para la aplicación web, abra application.py en el editor interactivo de Python.

    code application.py

  4. 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"

  5. Guarde el archivo y salga del editor. Guarde el archivo y salga del editor; para ello, seleccione el menú ... en la parte superior derecha y, a continuación, seleccione Guardar > Cerrar editor o presione Ctrl+S y Ctrl+Q en Windows y Linux; Command+S y Command+Q en macOS.

  6. 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 siguiente comando:

    pip freeze > requirements.txt

Prueba opcional de la aplicación web

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

  1. Abra una segunda sesión del shell de comandos en una nueva pestaña del explorador https://shell.azure.com/.

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

  3. 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 ver la siguiente salida HTML.

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

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