Introducción a AWS

Cree una aplicación Web básica

Implemente una aplicación Web y agregue interactividad con una API y una base de datos

En este módulo implementará la función sin servidor utilizando API Gateway.

Introducción

En este módulo utilizaremos Amazon API Gateway para crear una API RESTful que nos permitirá llamar a la función Lambda desde un cliente Web (en general se refiere al navegador Web de un usuario). API Gateway cumplirá la función de capa intermedia entre el cliente HTML que creamos en el Módulo Uno y el backend sin servidor que creamos en el Módulo Dos.

Lo que aprenderá

  • Crear una API nueva usando API Gateway
  • Definir métodos HTTP (Protocolo de Transferencia de Hipertexto) en la API
  • Disparar una función Lambda desde una API
  • Habilitar CORS en una API para poder usarla desde un sitio Web
  • Probar una API creada con API Gateway desde la consola de administración de AWS

Conceptos clave

RESTful API REST significa “Transferencia de Estado Representacional” y se trata de un patrón arquitectónico para crear servicios Web. API significa “interfaz de programa de aplicación”. Por lo tanto, la RESTful API implementa el patrón arquitectónico.

Métodos de solicitud HTTP: los métodos HTTP están diseñados para permitir la comunicación entre clientes y servidores. Los métodos como GET o PUT definidos por el protocolo HTTP se utilizan para indicar qué acción realizar en los recursos.

CORS: los mecanismos CORS (intercambio de recursos de origen cruzado) utilizan encabezados HTTP para indicarle al navegador que debe permitir que una aplicación Web específica se ejecute en un origen (dominio) y que tenga permiso para acceder a los recursos seleccionados de un servidor en otro origen.

Borde optimizado: es un recurso que usa la infraestructura global de AWS para asistir mejor a los clientes de todo el mundo.

 Tiempo de realización

5 minutos

 Servicios utilizados

Implementación

  • Crear una nueva API REST
    1. Inicie sesión en la consola de API Gateway.
    2. Haga clic en el botón naranja “Crear API”.
    3. Busque el cuadro REST API y haga clic en el botón naranja “Crear” que se encuentra allí.
    4. En “Elegir el protocolo”, seleccione REST.
    5. En “Crear una API nueva”, seleccione Nueva API.
    6. En el campo “Nombre de API”, escriba HelloWorldAPI.
    7. En el menú desplegable “Tipo de punto de enlace” seleccione “Borde optimizado” (Nota: Los puntos de enlace con borde optimizado son mejores para los clientes diseminados geográficamente. Esto los convierte en la mejor opción para los servicios públicos a los cuales se obtiene acceso a través de Internet. Normalmente, los puntos de enlace regionales se utilizan para las API a las cuales se obtiene acceso principalmente desde la misma región de AWS).
    8. Haga clic en el botón azul “Crear API”. La configuración debe quedar como en la siguiente captura de pantalla:
    Full Stack tutorial API settings
  • Crear un recurso y método nuevo
    1. En la barra de navegación izquierda, haga clic en “Recursos” en la API HelloWorld.
    2. Con el recurso “/” seleccionado, haga clic en “Crear método” en el menú desplegable de acciones.
    3. Seleccione POST en el nuevo menú desplegable que aparece y, a continuación, haga clic en la marca de verificación.
    4. Seleccione Función Lambda para el tipo de integración.
    5. En el campo “Función” escriba HelloWorldFunction.
    6. Haga clic en el botón azul “Guardar”.
    7. Verá un mensaje que indica que le está concediendo a la API que está creando un permiso para llamar a la función Lambda. Haga clic en el botón “Aceptar”.
    8. Seleccione el método POST recientemente creado, y luego, “Habilitar CORS” en el menú desplegable de acciones.
    9. Deje seleccionada la marca de verificación POST y haga clic en el botó azul “Habilitar CORS y reemplazar los encabezados CORS existentes”.
    Full Stack tutorial EnableCORS

    10. Verá un mensaje de solicitud de confirmación de los cambios de método. Haga clic en el botón azul “Sí, reemplazar los valores existentes”.

    Full Stack tutorial ConfirmMethodChanges
  • Implementar una API
    1. En la lista desplegable “Acciones”, seleccione “Implementar API”.
    2. En la lista desplegable “Etapa de implementación” seleccione “[Nueva etapa]”.
    3. En “Nombre de etapa” escriba dev.
    4. Elija “Implementar”.
    5. Copie y guarde la URL junto a “Invocar URL” (la necesitará en el módulo cinco).
  • Validar la API
    1. En la barra de navegación izquierda, haga clic en “Recursos”.
    2. Ahora, los métodos para nuestra API aparecerán en una lista a la derecha. Haga clic en “POST”.
    3. Haga clic en el pequeño rayo azul.
    4. Pegue lo siguiente en el campo “Cuerpo de la solicitud”:
    {
        "firstName":"Grace",
        "lastName":"Hopper"
    }

    5. Haga clic en el botón azul “Probar”.

    6. A la derecha verá una respuesta con el Código 200.

    7. ¡Genial! Creamos y probamos una API que llama a la función de Lambda.


Arquitectura de aplicaciones

Hemos terminado el Módulo Tres. Es hora de revisar la arquitectura:

full-stack amplify console arch diagram module 3

Agregamos API Gateway y la conectamos a la función Lambda existente. Ahora podemos disparar la función con una llamada a la API. Aún no sabemos generar esta llamada desde el cliente Web. Primero agregaremos la tabla de datos en el Módulo Cuatro y conectaremos todo en el Módulo Cinco.

¿Este módulo le resultó útil?

Gracias
Indíquenos lo que le gustó.
Lamentamos haberlo decepcionado
¿Hay información desactualizada, confusa o inexacta? Ayúdenos a mejorar este tutorial con sus comentarios.

Crear una tabla de datos