arrow_back

Cómo implementar una aplicación web de Flask escrita en Python en el entorno flexible de App Engine

Acceder Unirse
Quick tip: Review the prerequisites before you run the lab
Use an Incognito or private browser window to run this lab. This prevents any conflicts between your personal account and the student account, which may cause extra charges incurred to your personal account.
Pon a prueba tus conocimientos y compártelos con nuestra comunidad
done
Obtén acceso a más de 700 labs prácticos, insignias de habilidad y cursos

Cómo implementar una aplicación web de Flask escrita en Python en el entorno flexible de App Engine

Lab 1 hora universal_currency_alt 1 crédito show_chart Introductorio
info Es posible que este lab incorpore herramientas de IA para facilitar tu aprendizaje.
Pon a prueba tus conocimientos y compártelos con nuestra comunidad
done
Obtén acceso a más de 700 labs prácticos, insignias de habilidad y cursos

GSP023

Logotipo de los labs de autoaprendizaje de Google Cloud

Descripción general

En este lab, aprenderás a implementar una aplicación web de Flask escrita en Python en el entorno flexible de App Engine. La aplicación de ejemplo permite que el usuario suba una foto del rostro de alguien y descubra qué tan probable es que esa persona esté feliz. La aplicación usa las APIs de Google Cloud para Vision, Storage y Datastore.

Acerca de App Engine

Las aplicaciones de Google App Engine son fáciles de crear, mantener y escalar a medida que cambian tus necesidades de almacenamiento de datos y tráfico. Con App Engine, no tendrás que mantener servidores. Solo debes subir tu aplicación y estará lista para usar.

Las aplicaciones de App Engine se escalan automáticamente según el tráfico entrante. El balanceo de cargas, los microservicios, la autorización, las bases de datos SQL y NoSQL, la división del tráfico, el registro, la búsqueda, el control de versiones, el lanzamiento, la reversión y el análisis de seguridad son compatibles de forma nativa y sumamente personalizables.

El entorno flexible de App Engine es compatible con una gran cantidad de lenguajes de programación, como Java, Python, PHP, Node.js, Ruby y Go. El entorno estándar de App Engine es una opción adicional para ciertos lenguajes, incluido Python. Los dos entornos proporcionan a los usuarios máxima flexibilidad en el comportamiento de sus aplicaciones, ya que cada uno posee determinadas ventajas. Lee Elige un entorno de App Engine para obtener más información.

Qué aprenderás

  • Cómo implementar una aplicación web sencilla para el entorno flexible de App Engine
  • Cómo acceder a bibliotecas cliente de Google Cloud para Vision, Storage y Datastore
  • Cómo usar Cloud Shell

Requisitos

  • Conocimientos de Python
  • Conocimientos de editores de texto estándares de Linux, como Vim, Emacs o nano
  • Acceso a una imagen de un rostro

Configuración y requisitos

Antes de hacer clic en el botón Comenzar lab

Lee estas instrucciones. Los labs son cronometrados y no se pueden pausar. El cronómetro, que comienza a funcionar cuando haces clic en Comenzar lab, indica por cuánto tiempo tendrás a tu disposición los recursos de Google Cloud.

Este lab práctico te permitirá realizar las actividades correspondientes en un entorno de nube real, no en uno de simulación o demostración. Para ello, se te proporcionan credenciales temporales nuevas que utilizarás para acceder a Google Cloud durante todo el lab.

Para completar este lab, necesitarás lo siguiente:

  • Acceso a un navegador de Internet estándar (se recomienda el navegador Chrome)
Nota: Usa una ventana de navegador privada o de Incógnito para ejecutar este lab. Así evitarás cualquier conflicto entre tu cuenta personal y la cuenta de estudiante, lo que podría generar cargos adicionales en tu cuenta personal.
  • Tiempo para completar el lab: Recuerda que, una vez que comienzas un lab, no puedes pausarlo.
Nota: Si ya tienes un proyecto o una cuenta personal de Google Cloud, no los uses en este lab para evitar cargos adicionales en tu cuenta.

Cómo iniciar tu lab y acceder a la consola de Google Cloud

  1. Haga clic en el botón Comenzar lab. Si debe pagar por el lab, se abrirá una ventana emergente para que seleccione su forma de pago. A la izquierda, se encuentra el panel Detalles del lab, que tiene estos elementos:

    • El botón Abrir la consola de Google Cloud
    • El tiempo restante
    • Las credenciales temporales que debe usar para el lab
    • Otra información para completar el lab, si es necesaria

  2. Haz clic en Abrir la consola de Google Cloud (o haz clic con el botón derecho y selecciona Abrir el vínculo en una ventana de incógnito si ejecutas el navegador Chrome).

    El lab inicia recursos y abre otra pestaña en la que se muestra la página de acceso.

    Sugerencia: Ordene las pestañas en ventanas separadas, una junto a la otra.

    Nota: Si ves el diálogo Elegir una cuenta, haz clic en Usar otra cuenta.

  3. De ser necesario, copia el nombre de usuario a continuación y pégalo en el diálogo Acceder.

    {{{user_0.username | "Username"}}}

    También puedes encontrar el nombre de usuario en el panel Detalles del lab.

  4. Haz clic en Siguiente.

  5. Copia la contraseña que aparece a continuación y pégala en el diálogo Te damos la bienvenida.

    {{{user_0.password | "Password"}}}

    También puedes encontrar la contraseña en el panel Detalles del lab.

  6. Haz clic en Siguiente.

    Importante: Debes usar las credenciales que te proporciona el lab. No uses las credenciales de tu cuenta de Google Cloud. Nota: Usar tu propia Cuenta de Google podría generar cargos adicionales.

  7. Haga clic para avanzar por las páginas siguientes:

    • Acepta los Términos y Condiciones.
    • No agregues opciones de recuperación o autenticación de dos factores (esta es una cuenta temporal).
    • No te registres para obtener pruebas gratuitas.

Después de un momento, se abrirá la consola de Google Cloud en esta pestaña.

Nota: Para ver un menú con una lista de productos y servicios de Google Cloud, haz clic en el menú de navegación que se encuentra en la parte superior izquierda. Ícono del menú de navegación

Activa Cloud Shell

Cloud Shell es una máquina virtual que cuenta con herramientas para desarrolladores. Ofrece un directorio principal persistente de 5 GB y se ejecuta en Google Cloud. Cloud Shell proporciona acceso de línea de comandos a tus recursos de Google Cloud.

  1. Haz clic en Activar Cloud Shell Ícono de Activar Cloud Shell en la parte superior de la consola de Google Cloud.

Cuando te conectes, habrás completado la autenticación, y el proyecto estará configurado con tu PROJECT_ID. El resultado contiene una línea que declara el PROJECT_ID para esta sesión:

Your Cloud Platform project in this session is set to YOUR_PROJECT_ID

gcloud es la herramienta de línea de comandos de Google Cloud. Viene preinstalada en Cloud Shell y es compatible con la función de autocompletado con tabulador.

  1. Puedes solicitar el nombre de la cuenta activa con este comando (opcional):
gcloud auth list

  1. Haz clic en Autorizar.

  2. Ahora, el resultado debería verse de la siguiente manera:

Resultado:

ACTIVE: * ACCOUNT: student-01-xxxxxxxxxxxx@qwiklabs.net To set the active account, run: $ gcloud config set account `ACCOUNT`
  1. Puedes solicitar el ID del proyecto con este comando (opcional):
gcloud config list project

Resultado:

[core] project = <project_ID>

Resultado de ejemplo:

[core] project = qwiklabs-gcp-44776a13dea667a6 Nota: Para obtener toda la documentación de gcloud, consulta la guía con la descripción general de gcloud CLI en Google Cloud.

Tarea 1: Obtén el código de muestra

  1. En Cloud Shell, ejecuta el siguiente comando para clonar el repositorio de GitHub:
gcloud storage cp -r gs://spls/gsp023/flex_and_vision/ .
  1. Usa el comando de cambio de directorio flex_and_vision:
cd flex_and_vision

Tarea 2: Autentica solicitudes a las APIs

Las APIs de Vision, Storage y Datastore se habilitan automáticamente para que las uses en este lab. Para hacer solicitudes a las APIs, necesitará credenciales de cuentas de servicio. Puedes generar credenciales desde tu proyecto con gcloud en Cloud Shell. Tu ID del proyecto se encuentra en la pestaña en la que comenzaste el lab.

  1. Establece una variable de entorno para tu ID del proyecto:
export PROJECT_ID=$(gcloud config get-value project)
  1. Crea una cuenta de servicio para acceder a las APIs de Google Cloud cuando realices pruebas locales:
gcloud iam service-accounts create qwiklab \ --display-name "My Qwiklab Service Account"
  1. Otorga los permisos adecuados a tu nueva cuenta de servicio:
gcloud projects add-iam-policy-binding ${PROJECT_ID} \ --member serviceAccount:qwiklab@${PROJECT_ID}.iam.gserviceaccount.com \ --role roles/owner
  1. Después de crear tu cuenta de servicio, crea una clave para ella:
gcloud iam service-accounts keys create ~/key.json \ --iam-account qwiklab@${PROJECT_ID}.iam.gserviceaccount.com

Este comando genera una clave de cuenta de servicio que se almacena en un archivo JSON llamado key.json en tu directorio principal.

  1. Usa la ruta de acceso absoluta de la clave generada para determinar una variable de entorno para tu clave de cuenta de servicio:
export GOOGLE_APPLICATION_CREDENTIALS="/home/${USER}/key.json"

Obtén más información para autenticar la API de Vision en la guía de inicio rápido para configurar la API de Vision.

Haz clic en Revisar mi progreso a continuación para revisar tu progreso en el lab.

Autenticar solicitudes a las APIs

Tarea 3: Prueba la aplicación de forma local

Inicia tu entorno virtual e instala las dependencias

  1. Crea un entorno aislado de Python 3 llamado env con virtualenv:
virtualenv -p python3 env
  1. Ingresa tu nuevo entorno virtualenv llamado env:
source env/bin/activate
  1. Usa pippara instalar las dependencias de tu proyecto desde el archivo requirements.txt:
pip install -r requirements.txt

El archivo requirements.txt es una lista de las dependencias de paquetes que necesitas para tu proyecto. El comando anterior descargó todas estas dependencias de paquetes en virtualenv.

Crea una aplicación de App Engine

  1. Primero, crea una variable de entorno con la región asignada:
AE_REGION={{{project_0.startup_script.app_region|REGION}}}
  1. A continuación, crea una instancia de App Engine usando lo siguiente:
gcloud app create --region=$AE_REGION

Crea un bucket de Storage

  1. Primero, define la variable de entorno CLOUD_STORAGE_BUCKET para que sea igual al nombre de tu ID de proyecto (PROJECT_ID). Generalmente, se recomienda que asignes a tu bucket el mismo nombre que para PROJECT_ID por conveniencia:
export CLOUD_STORAGE_BUCKET=${PROJECT_ID}
  1. Ahora, ejecuta el siguiente comando para crear un bucket con el mismo nombre que PROJECT_ID:
gsutil mb gs://${PROJECT_ID}

Haz clic en Revisar mi progreso a continuación para revisar tu progreso en el lab.

Crear una aplicación de App Engine y un depósito de almacenamiento

Ejecuta la aplicación

  1. Ejecuta el siguiente comando para iniciar tu aplicación:
python main.py
  1. Una vez que se haya iniciado la aplicación, haz clic en el ícono de Vista previa en la Web Ícono de vista previa en la Web, en la barra de herramientas de Cloud Shell, y selecciona Preview on port 8080.

En tu navegador, se abrirá una pestaña y se conectará al servidor que acabas de iniciar. Deberías ver algo como esto:

Página de la app

Ahora todo se pondrá más interesante.

  1. Haz clic en el botón Elegir archivo, busca una imagen de un rostro humano en tu computadora y, luego, haz clic en Enviar.

Después de subir una foto, deberías ver algo como esto:

Página de muestra de detección de rostro

Nota: Cuando hayas terminado de probar tu aplicación de forma local, presiona CTRL + C en Cloud Shell para apagar el servidor web local.

Haz clic en Revisar mi progreso a continuación para revisar tu progreso en el lab.

Ejecutar la aplicación

Tarea 4: Explora el código

Diseño del código de muestra

La muestra tiene el siguiente diseño:

templates/ homepage.html /* HTML template that uses Jinja2 */ app.yaml /* App Engine application configuration file */ main.py /* Python Flask web application */ requirements.txt /* List of dependencies for the project */

main.py

Este archivo de Python es una aplicación web de Flask. La aplicación permite que los usuarios envíen fotos (preferentemente de rostros), las cuales se almacenan en Cloud Storage y se analizan con la función de detección de rostro de la API de Cloud Vision. La información clave sobre cada foto se almacena en Datastore, la base de datos NoSQL de Google Cloud, a la que se accede cada vez que un usuario visita el sitio web.

Esta aplicación usa las bibliotecas cliente de Google Cloud para Storage, Datastore y Vision. Estas bibliotecas cliente facilitan el acceso a las APIs de Cloud desde tus lenguajes de programación preferidos.

Veamos algunos fragmentos clave del código.

En la sección de importaciones, ubicada en la parte superior, importamos los distintos paquetes que necesitamos para nuestro código. Importamos las bibliotecas cliente de Google Cloud para Datastore, Storage y Vision de esta manera:

from google.cloud import datastore from google.cloud import storage from google.cloud import vision

Código que determina lo que sucede cuando un usuario visita la URL raíz del sitio web

Este código muestra lo que sucede cuando un usuario visita la URL raíz del sitio web. Se crea un objeto cliente de Datastore, que se usa para acceder a la biblioteca cliente de esta solución. Se ejecuta una consulta en Datastore para entidades del tipo Rostros. Por último, se procesa la plantilla HTML y se pasa image_entities, que extrajimos de Datastore como una variable.

@app.route('/') def homepage(): # Create a Cloud Datastore client. datastore_client = datastore.Client() # Use the Cloud Datastore client to fetch information from Datastore about # each photo. query = datastore_client.query(kind='Faces') image_entities = list(query.fetch()) # Return a Jinja2 HTML template and pass in image_entities as a parameter. return render_template('homepage.html', image_entities=image_entities)

Analicemos cómo se guardan las entidades en Datastore. Datastore es la solución de base de datos NoSQL de Google Cloud. Los datos se almacenan en objetos llamados entidades. A cada entidad se le asigna una clave única de identificación, que se puede crear usando un tipo y una cadena de nombre de clave. Un tipo es un bucket de organización que designa el tipo de entidad que es. Por ejemplo, recomendamos que configures tipos para fotos, personas y animales.

Cada entidad puede tener múltiples propiedades definidas por el desarrollador, que pueden tener valores de varios tipos, incluidos números enteros, números de punto flotante, cadenas, fechas o datos binarios:

# Create a Cloud Datastore client. datastore_client = datastore.Client() # Fetch the current date / time. current_datetime = datetime.now() # The kind for the new entity. kind = 'Faces' # The name/ID for the new entity. name = blob.name # Create the Cloud Datastore key for the new entity. key = datastore_client.key(kind, name) # Construct the new entity using the key. Set dictionary values for entity # keys blob_name, storage_public_url, timestamp, and joy. entity = datastore.Entity(key) entity['blob_name'] = blob.name entity['image_public_url'] = blob.public_url entity['timestamp'] = current_datetime entity['joy'] = face_joy # Save the new entity to Datastore. datastore_client.put(entity)

De manera similar a Datastore, se puede acceder a las bibliotecas cliente de Storage y Vision de forma programática. Puedes abrir el archivo main.py tú mismo con vim, emacs o nano para explorar todo el código de muestra.

homepage.html

El framework web de Flask aprovecha Jinja2 como un motor de plantillas. Esto nos permite pasar variables y expresiones de main.py a homepage.html que se reemplazan por valores cuando la página se procesa.

Obtén más información sobre Jinja2 en la documentación de Template Designer.

Esta plantilla HTML de Jinja2 muestra un formulario para que los usuarios envíen fotos a la base de datos. También muestra cada imagen que se envió antes junto con su nombre de archivo, fecha y hora de carga, y la probabilidad de que el rostro detectado por la API de Vision esté feliz.

<h1>Google Cloud Platform - Face Detection Sample</h1> <p>This Python Flask application demonstrates App Engine Flexible, Google Cloud Storage, Datastore, and the Cloud Vision API.</p> <br> <html> <body> <form action="upload_photo" method="POST" enctype="multipart/form-data"> Upload File: <input type="file" name="file"><br> <input type="submit" name="submit" value="Submit"> </form> {% for image_entity in image_entities %} <img src="{{image_entity['image_public_url']}}" width=200 height=200> <p>{{image_entity['blob_name']}} was uploaded {{image_entity['timestamp']}}.</p> <p>Joy Likelihood for Face: {{image_entity['joy']}}</p> {% endfor %} </body> </html>

Tarea 5: Implementa la aplicación en un entorno flexible de App Engine

El entorno flexible de App Engine utiliza un archivo llamado app.yaml para describir la configuración de implementación de una aplicación. Si falta ese archivo, App Engine intentará deducir la configuración de la implementación. Sin embargo, se recomienda proporcionar este archivo.

  1. A continuación, modificarás app.yaml con el editor que prefieras: vim, nano o emacs. Usaremos el editor nano:
nano app.yaml
  1. Cuando app.yaml esté abierto, reemplaza <your-cloud-storage-bucket> por el nombre de tu bucket de Cloud Storage. Si olvidaste el nombre de tu bucket de Cloud Storage, copia el ID del proyecto en el panel de detalles del lab.

La sección env_variables define las variables de entorno que se usarán en main.py cuando se implemente la aplicación.

  1. A continuación, agrega el siguiente código al final del archivo para configurar tu app para que use el escalamiento manual:
manual_scaling: instances: 1
  1. Por último, cambia python_version de 3 a 3.7 para implementar tu aplicación de App Engine correctamente.

Tu archivo debería verse así:

runtime: python env: flex entrypoint: gunicorn -b :$PORT main:app runtime_config: python_version: 3.7 env_variables: CLOUD_STORAGE_BUCKET: <your-cloud-storage-bucket> manual_scaling: instances: 1

Esta es la configuración básica que se necesita para implementar una aplicación de Python 3 en el entorno flexible de App Engine. Puedes obtener más información para configurar App Engine en la guía Configura tu app con app.yaml.

  1. Guarda y cierra el archivo en nano:
  • Presiona CTRL + X.
  • Cuando se te solicite, escribe Y y presiona INTRO.
  1. Actualiza el código de tiempo de espera de Cloud Build de la siguiente manera:
gcloud config set app/cloud_build_timeout 1000
  1. Usa gcloud para implementar tu aplicación en App Engine:
gcloud app deploy

Si aparece la pregunta Do you want to continue (Y/n), escribe Y y presiona INTRO.

Observa Cloud Shell mientras se compila la aplicación. Este proceso puede demorar hasta 10 minutos. El entorno flexible de App Engine aprovisiona automáticamente una instancia de máquina virtual de Compute Engine para ti en segundo plano y, luego, instala la aplicación y la inicia.

  1. Después de implementar la aplicación, usa la siguiente URL para abrirla en tu navegador web:
https://<PROJECT_ID>.appspot.com Nota: Si olvidaste el PROJECT_ID, ejecuta gcloud config list project en Cloud Shell.

Haz clic en Revisar mi progreso a continuación para revisar tu progreso en el lab.

Implementar la app

¡Felicitaciones!

¡Felicitaciones! En este lab, aprendiste a escribir y a implementar una aplicación web de Python en el entorno flexible de App Engine.

Próximos pasos/Más información

Capacitación y certificación de Google Cloud

Recibe la formación que necesitas para aprovechar al máximo las tecnologías de Google Cloud. Nuestras clases incluyen habilidades técnicas y recomendaciones para ayudarte a avanzar rápidamente y a seguir aprendiendo. Para que puedas realizar nuestros cursos cuando más te convenga, ofrecemos distintos tipos de capacitación de nivel básico a avanzado: a pedido, presenciales y virtuales. Las certificaciones te ayudan a validar y demostrar tus habilidades y tu conocimiento técnico respecto a las tecnologías de Google Cloud.

Última actualización del manual: 13 de octubre de 2023

Prueba más reciente del lab: 13 de octubre de 2023

Copyright 2025 Google LLC. All rights reserved. Google y el logotipo de Google son marcas de Google LLC. Los demás nombres de productos y empresas pueden ser marcas de las respectivas empresas a las que estén asociados.

Before you begin

  1. Labs create a Google Cloud project and resources for a fixed time
  2. Labs have a time limit and no pause feature. If you end the lab, you'll have to restart from the beginning.
  3. On the top left of your screen, click Start lab to begin

Use private browsing

  1. Copy the provided Username and Password for the lab
  2. Click Open console in private mode

Sign in to the Console

  1. Sign in using your lab credentials. Using other credentials might cause errors or incur charges.
  2. Accept the terms, and skip the recovery resource page
  3. Don't click End lab unless you've finished the lab or want to restart it, as it will clear your work and remove the project

Este contenido no está disponible en este momento

Te enviaremos una notificación por correo electrónico cuando esté disponible

¡Genial!

Nos comunicaremos contigo por correo electrónico si está disponible

One lab at a time

Confirm to end all existing labs and start this one

Setup your console before you begin

Use an Incognito or private browser window to run this lab. This prevents any conflicts between your personal account and the Student account, which may cause extra charges incurred to your personal account.