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

Introducción
Crear una aplicación Web
Crear una función sin servidor
Crear una tabla de datos
agregar interactividad a la aplicación Web

Módulo 5: agregue interactividad a la aplicación Web

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

Introducción

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

Lo que aprenderá

  • 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

Implementación de un sitio Web Hacer disponible un sitio Web para los usuarios.

Entorno Una etapa como "prod," "dev," o "staging" donde se puede ejecutar una aplicación o sitio web.

Invocación de una API: enviar un evento a una API para desencadenar un comportamiento específico.

 Tiempo de realización

5 minutos

 Servicios utilizados

Amazon API Gateway
Consola de AWS Amplify

Implementación

    1. Abra el archivo index.html que creó en el Módulo uno.
    2. Reemplace el código existente con 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, puede obtenerla en la consola de API Gateway haciendo clic en la API y luego, en “etapas”.

    4. Guarde el archivo.

    5. ZIP (comprima) únicamente el archivo HTML.

    6. Abra la consola de Amplify.

    7. Haga clic en la aplicación Web que creó en el Módulo 1.

    8. Haga clic en el botón blanco Choose files (Elegir archivos).

    9. Seleccione el archivo ZIP que creó en el módulo 5.

    10. Cuando se carga el archivo, automáticamente comenzará un proceso de implementación. Una vez que vea una barra verde, se completará su implementación.

    1. Haga clic en el URL de Domain (Dominio).
    2. La aplicación Web actualizada debería cargarse en el navegador.
    3. Ingrese su nombre (o lo que prefiera) y haga clic en el botón “Llamar a la API”.
    4. Debería ver un mensaje que comienza con “Hola desde Lambda” seguido del texto que escribió.
    5. ¡Felicitaciones, ahora tiene una aplicación Web en funcionamiento implementado en la consola de Amplify que puede llamar a una función de Lambda a través de API Gateway!

Arquitectura de la aplicación

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

Todos los servicios de AWS que configuramos pueden comunicarse de forma segura entre sí. Cuando un usuario hace clic en 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. Todos los permisos son administrados por IAM.

¿Este módulo le resultó útil?

 Comentarios

¡Felicitaciones!

¡Creó con éxito una aplicación Web en AWS! Como un gran próximo paso, profundice más en tecnología son servidor y bases de datos y amplíe sus conocimientos de la nube de AWS.

Profundice más con tecnología sin servidor
Profundice más con bases de datos