Crear una aplicación web básica

TUTORIAL

Introducción
Crear una aplicación Web
Crear una función sin servidor
Creación de una tabla de datos
Haga clic aquí
Adición de interactividad a una aplicación web
Haga clic aquí
Eliminación de recursos

Módulo 5: agregar interactividad a la aplicación web

En este módulo, modificará el sitio web estático para invocar la API y mostrar el texto personalizado.

Información general

En este módulo, actualizaremos el sitio web estático que creamos en el módulo uno para invocar la API de REST que creamos en el módulo tres. Esto agregará la capacidad de mostrar el texto basado en lo que ingresó.

Qué logrará

En este módulo, podrá:
  • Llamar a una API de API Gateway desde una página HTML
  • Cargar una nueva versión de una aplicación web en la consola de Amplify

Conceptos clave

Implementar un sitio web: hacer que un sitio web esté disponible para los usuarios.

Entorno: una etapa como “prod”, “dev” o “staging” donde se puede ejecutar una aplicación o sitio web.

Invocar una API: enviar un evento a una API para desencadenar un comportamiento específico.

 Tiempo mínimo de realización

5 minutos

 Servicios utilizados

Amazon API Gateway
AWS Amplify

 Última actualización

4 de abril de 2023

Implementación

    1. Abra el archivo index.html que creó en el módulo uno.
    2. Reemplace el código existente por lo siguiente:
    <!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>Hello World</title>
    <!-- Add some CSS to change client UI -->
    <style>
    body {
        background-color: #232F3E;
        }
    label, button {
        color: #FF9900;
        font-family: Arial, Helvetica, sans-serif;
        font-size: 20px;
        margin-left: 40px;
        }
     input {
        color: #232F3E;
        font-family: Arial, Helvetica, sans-serif;
        font-size: 20px;
        margin-left: 20px;
        }
    </style>
    <script>
        // define the callAPI function that takes a first name and last name as parameters
        var callAPI = (firstName,lastName)=>{
            // instantiate a headers object
            var myHeaders = new Headers();
            // add content type header to object
            myHeaders.append("Content-Type", "application/json");
            // using built in JSON utility package turn object to string and store in a variable
            var raw = JSON.stringify({"firstName":firstName,"lastName":lastName});
            // create a JSON object with parameters for API call and store in a variable
            var requestOptions = {
                method: 'POST',
                headers: myHeaders,
                body: raw,
                redirect: 'follow'
            };
            // make API call with parameters and use promises to get response
            fetch("YOUR-API-INVOKE-URL", requestOptions)
            .then(response => response.text())
            .then(result => alert(JSON.parse(result).body))
            .catch(error => console.log('error', error));
        }
    </script>
</head>
<body>
    <form>
        <label>First Name :</label>
        <input type="text" id="fName">
        <label>Last Name :</label>
        <input type="text" id="lName">
        <!-- set button onClick method to call function we defined passing input values as parameters -->
        <button type="button" onclick="callAPI(document.getElementById('fName').value,document.getElementById('lName').value)">Call API</button>
    </form>
</body>
</html>

    3. Asegúrese de agregar su URL de invocación de API en la línea 41 (desde el módulo tres). Nota: Si no tiene la URL de su API, para obtenerla en la consola de API Gateway, seleccione la API y luego elija etapas.

    4. Guarde el archivo.

    5. Comprima en ZIP únicamente el archivo HTML.

    6. Abra la consola de Amplify.

    7. Elija la aplicación web que creó en el módulo uno.

    8. Elija el botón blanco Elegir archivos.

    9. Seleccione el archivo ZIP que creó en el paso 5.

    10. Cuando se carga el archivo, automáticamente comienza un proceso de implementación. Una vez que vea una barra verde, la implementación se habrá completado.

    1. Elija la URL en Dominio.
    2. La aplicación web actualizada debería cargarse en el navegador.
    3. Escriba su nombre (o lo que prefiera) y elija el botón Llamar a la API.
    4. Debería ver un mensaje que comienza con Hola desde Lambda seguido del texto que escribió.
     
    ¡Enhorabuena! Ahora tiene una aplicación web en funcionamiento implementada por la consola de Amplify que puede llamar a una función de Lambda a través de API Gateway.

Arquitectura de aplicaciones

Con todos los módulos completados, esta es la arquitectura de lo que creó:

En el diagrama de arquitectura se muestran los servicios alojados en la nube de AWS, con las conexiones de usuarios externos a los servicios de AWS interconectados.

Todos los servicios de AWS que configuramos pueden comunicarse de forma segura entre sí. Cuando un usuario elige un botón en la aplicación web, realiza una llamada a nuestra API, que activa la función de Lambda. Esta función de Lambda escribe en una base de datos y devuelve un mensaje a nuestro cliente a través de API Gateway. IAM administra todos los permisos.

¡Enhorabuena!

Creó con éxito una aplicación web en AWS. En el siguiente módulo, limpiaremos los recursos utilizados en este tutorial para que no incurra en cargos no deseados en su cuenta.

¿Le resultó útil esta página?

 Comentarios
Iniciar el módulo seis

Eliminación de recursos