Ejercicio: Analizar las limitaciones de una aplicación web basada en sondeo

  • 15 minutos

Antes de cambiar el prototipo, debe ejecutarlo para validar las suposiciones. El prototipo se encuentra en un repositorio de código fuente en GitHub.

Creación de recursos de Azure

  1. En una ventana o pestaña del explorador independiente, bifurque el repositorio de ejemplo en GitHub con el siguiente vínculo: mslearn-advocates.azure-functions-and-signalr. Esto le permite insertar los cambios en su propia versión del código fuente. Este es un paso necesario para implementar el código fuente en Azure más adelante en el módulo.

  2. En el terminal, clone el repositorio. En el siguiente comando, reemplace MicrosoftDocs por su cuenta:

    git clone https://github.com/MicrosoftDocs/mslearn-advocates.azure-functions-and-signalr stock-prototype

  3. Instale las dependencias en la carpeta setup-resources.

    cd stock-prototype/setup-resources && npm install

    Si recibe advertencias sobre EBADENGINE, puede omitirlas.

  4. Inicio de sesión en Azure con la CLI de Azure.

    az login

  5. Vea las suscripciones y establezca la suscripción predeterminada de Azure.

    Vea las suscripciones.

    az account list --output json | jq -r '.[] | .name' | sort

    Para establecer la suscripción predeterminada, reemplace YOUR-SUBSCRIPTION-ID por un id. de suscripción de la salida anterior de la CLI de Azure.

    az account set --subscription <YOUR-SUBSCRIPTION-ID>

    Esta suscripción predeterminada se usa para crear los recursos de Azure.

  6. Cree los recursos de Azure y cargue los datos de ejemplo en la base de datos. El proceso puede tardar unos minutos en completarse.

    bash create-start-resources.sh "<YOUR-SUBSCRIPTION-NAME>"

    Asegúrese de encapsular el nombre entre comillas dobles. Si el script genera un error sobre la ubicación que carece de recursos disponibles, edite el script para cambiar la ubicación: LOCATION=<NEW LOCATION>.

  7. Copie la información necesaria para ejecutar el prototipo.

    Tipo de recurso Variable del entorno
    Azure Cosmos DB Se conoce como COSMOSDB_CONNECTION_STRING.
    Azure Storage Se conoce como STORAGE_CONNECTION_STRING.
    Grupo de recursos Se conoce como RESOURCE_GROUP_NAME.

  8. Use un script de Node.js para cargar datos de ejemplo en la base de datos con el comando siguiente.

    npm start

  9. En el terminal, vaya a la carpeta raíz.

    cd ..

Instalación de dependencias y ejecución del prototipo

  1. Instale las dependencias.

    cd start/client && npm install && cd ../..
cd start/server && npm install && cd ../..

  2. Si la notificación le pide que seleccione una aplicación de Azure Functions para el área de trabajo, seleccione start/server. Esta es la aplicación de funciones que usará para ejecutar el código del lado servidor.

  3. Si recibe una notificación sobre cómo instalar la versión más reciente de Azure Functions Core Tools, seleccione Instalar.

Obtención de las direcciones URL de cliente y servidor

Cuando se ejecuta localmente, las aplicaciones cliente y servidor deben saber dónde encontrarse entre sí. Las direcciones URL son:

  • Cliente: http://localhost:3000
  • Servidor: http://localhost:7071

Actualización de la configuración local de la aplicación de Azure Functions

Agregue las cadenas de conexión a la aplicación de Azure Functions del prototipo.

  1. Cree el archivo ./start/server/local.settings.json y pegue lo siguiente. Este archivo tiene los valores de configuración del proyecto de funciones locales.

    {
  "IsEncrypted": false,
  "Values": {
    "AzureWebJobsStorage": "<STORAGE_CONNECTION_STRING>",
    "FUNCTIONS_WORKER_RUNTIME": "node",
    "AzureWebJobsFeatureFlags": "EnableWorkerIndexing",
    "COSMOSDB_CONNECTION_STRING": "<COSMOSDB_CONNECTION_STRING>"
  },
  "Host" : {
    "LocalHttpPort": 7071,
    "CORS": "http://localhost:3000",
    "CORSCredentials": true
  }
}

  2. Actualice las siguientes variables con los valores que copió de arriba.

    Propiedad Valor
    AzureWebJobsStorage Reemplace por la cadena de conexión de Storage.
    COSMOSDB_CONNECTION_STRING Reemplace por la cadena de conexión de Cosmos DB.

    Ahora, la aplicación de Functions puede recibir solicitudes del cliente y, a continuación, conectarse a la base de datos y administrar correctamente el desencadenador del temporizador.

Adición de la configuración local para la aplicación cliente

Agregue la dirección URL del servidor a la aplicación cliente del prototipo.

Abra ./start/client y cree un archivo .env con el siguiente contenido.

BACKEND_URL=http://localhost:7071

Ejecute la aplicación de servidor.

  1. En el terminal, inicie la aplicación Azure Functions.

    cd start/server && npm start

  2. Espere hasta que el terminal muestre los puntos de conexión de la API.

    Functions:

        getStocks: [GET] http://localhost:7071/api/getStocks

        setPrice: timerTrigger

Ejecución de la aplicación cliente

  1. En un nuevo terminal, inicie la aplicación cliente.

    cd start/client && npm start

  2. Cuando la notificación muestre que la aplicación se está ejecutando, seleccione Abrir en explorador para usar el prototipo.

    Captura de pantalla de la notificación de Visual Studio Code para abrir el explorador.

  3. Organice las ventanas del navegador para que pueda ver el terminal y el prototipo de los precios de las acciones al mismo tiempo.

  4. En la ventana del explorador prototipo, abra las herramientas de desarrollo del explorador. Observe que el explorador realiza una solicitud a la API cada 5 segundos para todos los datos, aunque los datos no hayan cambiado.

  5. En la ventana del explorador, vea la salida de la aplicación de Azure Functions. Un solo precio de acción cambia cada minuto. Cuando cambia el precio de la API, la siguiente captura de cliente de todos los datos incluye ese cambio.

    Captura de pantalla del terminal de Visual Studio Code que muestra la salida de la consola del cambio de precio de acciones.

  6. En los terminales start-client y start-server, detenga las aplicaciones con Ctrl + C o elimine el terminal seleccionando el icono de papelera.

En esta unidad, ejecutó el prototipo. Aunque el cliente se ejecuta correctamente, no es eficaz. Aunque es posible que cada cliente individual no observe esto con un número tan pequeño de acciones, esto cambiará a medida que crezca el número de acciones y el número de clientes que extraen del servidor. El prototipo se puede mejorar. Vamos a aprender cómo en la siguiente unidad.