Desarrollo

Consumiendo una función Lambda con Vue JS y Axios. AWS Desde 0. Parte 2

Por: Mario Negrete

Continuando con información acerca de Vue JS y sus funciones. La parte 1 de esta entrada se centró en al construcción de una función Lambda desde 0. Ahora es tiempo de probarla de una manera local y consumirla desde Vue JS.

Probando la función Lambda

Cuando se está desarrollando la aplicación podría ser útil probar localmente. SAM proporciona esto mediante contenedores Docker los cuales simulan la ejecución del ambiente de Lambda. Se puede correr localmente o invocar la función lambda directamente. El siguiente comando correra localmente la función Lambda

sam local start-api

Lo que hará será cargar la imagen de Docker que puede tomar un poco. Después de cargarla se podrá probar con curl como lo muestre la ruta. En este caso.

Curl http://127.0.1:3000/hello

Se anexa una imagen con dos consolas uno ejecutando y consiguiendo el resultado, la otra recibiendo la petición. Lambda Este comando replicó el servicio REST API. Descargando en el contenedor la función para obtener el mismo resultado que ejecutando la función en la nube. Para hacer una invocación única directamente será con el siguiente comando. Lambda El comando Invoke directamente invoca las funciones Lambda y puede pasarse el payload de eventos de entrada que se proporcione. Con este comando lo que se hace es pasar por payload lo que el archivo event.json tenga proporcionado en la aplicación.

Consumiendo el servicio con Vue JS

Anteriormente se publicó la primer entrada de Vue JS con conceptos básicos sobre Vue JS. Ahora sigue consumir un servicio de API REST (Get). Consumir y mostrar la información a través de la lógica de la aplicación es una acción muy común en cualquier aplicación, la cual implica una conexión HTTP para realizarse. En Vue JS una forma muy popular de realizarlo es con Axios un cliente basado en promesas. Lo primero será instalarlo el cual puede ser por medio de npm o yarn, para este caso donde se usó el uso de un script para Vue JS, se importará de la misma manera Axios. > Para proyectos grandes se recomienda la implementación de Vue JS por medio del gestor de npm. El html quedaría de la siguiente manera.



Ejemplo Vue JS


<a href="https://cdn.jsdelivr.net/npm/vue/dist/vue.js">https://cdn.jsdelivr.net/npm/vue/dist/vue.js</a>
<a href="https://cdn.jsdelivr.net/npm/axios/dist/axios.min.js">https://cdn.jsdelivr.net/npm/axios/dist/axios.min.js</a>

    <div id="app">
        {{ info }}
      </div>
    
            new Vue({
            el: '#app',
            data () {
                return {
                info: null
                }
            },
            mounted () {
                axios
                .get('https://avkg899xt2.execute-api.us-east-1.amazonaws.com/Prod/hello')
                .then(response =&gt; (this.info = response.data.message))
            }
        })
    


El resultado será el siguiente. prueba vue El código lo que hace es pedir por medio de un request GET. La respuesta tendrá toda la información, con el data se muestra el contenido de la llamada y el message nuestro Hola Mundo. Este valor está vinculado a la variable info la cual es mostrada en pantalla. También se puede consumir el servicio mediante un evento. Se debe agregar una sección de métodos, agregarlo y ejecutarlo por ejemplo con el clic de un botón, como se muestra a continuación.



Ejemplo Vue JS


<a href="https://cdn.jsdelivr.net/npm/vue/dist/vue.js">https://cdn.jsdelivr.net/npm/vue/dist/vue.js</a>
<a href="https://cdn.jsdelivr.net/npm/axios/dist/axios.min.js">https://cdn.jsdelivr.net/npm/axios/dist/axios.min.js</a>

    <div id="app">
         {{ info }}  
        Consumir Lambda
    </div>
    
            new Vue({
            el: '#app',
            data () {
                return {
                info: null
                }
            },
            mounted () {
            },
            methods: {
                sendData() {
                    axios
                    .get('https://avkg899xt2.execute-api.us-east-1.amazonaws.com/Prod/hello')
                    .then(response =&gt; (this.info = response.data.message))
                }
            }

        })
    


GET De esta manera se tiene una petición del tipo GET implementada. En esta entrada dividida en dos partes se vinculó una nueva cuenta de AWS, se creó una aplicación serverless con SAM creando una función Lambda, se probó de manera local y se consumió por medio de Vue JS con Axios. Si tienes interés en cierta funcionalidad extra, o cómo complemenetar las funciones, puedes escribir a Rocktech R+D. Las entradas de Vue JS continuarán, ¿tienes alguna petición o recomendación para la siguiente entrada?. @MarioRguezz

Av. Cerro Gordo del Campestre 201
Int. 303
Col. Las Quintas
León, Gto.
C.P. 37125

ROCKTECH R+D © 2020