Introducción

Esta entrada continuará con la integración de VueJS con otras herramientas de Amazon Web Services (AWS). Para llevar a cabo las siguientes instrucciones donde el resultado será dar de alta un sitio web con autenticación configurada y consulta de datos se necesita una cuenta de AWS, Amplify CLI, NodeJS y VueJS. Durante las entradas de AWS Desde 0, se han visto conceptos básicos configurados para la integración con VueJS. Esta configuración cubrirá los aspectos bñasicos necesarios que requerirá el sitio para estar en línea.

Amplify

AWS Amplify es un conjunto de herramientas y servicios que permiten crear aplicaciones escalables de una manera segura. Amplify facilita la creación de flujos los cuales permiten que los desarrolladores liberen aplicaciones de una forma sencilla. Tambiñen incluye una biblioteca de acceso libre el cual proporsiona soporte para frameworks de javascripts o móviles como iOS y Android. Configurar el backend en minutos y desplegarlo fácilmente es una de las tantas funciones que ofrece el servicio además del serverless, autorizaciones, API, análitica, almaceamiento y host.

GraphQL

GraphQL es un lenguaje de consulta para API el cual puede correr consultas con la información existente. GraphQL proporciona una descripción completa y entendible de los datos de un API. Las consultas pueden obtener toda la información en una sola consulta y se integran fácilmente. En este caso se integrará con DynamoDB. DynamoDB es una base de datos NoSQL el cual funciona con clave valor.

Configurando el entorno

Requsitos
Amplify CLI
NodeJS
VueJS

Para Amplify es necesario contar con una cuenta de AWS para continuar con la integración (en la entrada Consumiendo una función Lambda con Vue JS y Axios. AWS Desde 0. Parte 1 se encuentra una configuración inicial de la cuenta).

Los comandos para instalar AWS-AMPLIFY son los siguientes.

npm install -g @aws-amplify/cli

Para instalar NodeJS es

nvm install 13 && nvm use 13

Para instalar VueJS el comando es el siguiente

npm install -g @vue/cli

En esta práctica se trabajará con la VueJS desde el gestor de NPM y no con el uso de enlaces como se ha estado usando en entradas anteriores.

Iniciando la aplicación en VueJS

El proyecto de VueJS con el siguiente comando

vue create website

Se va a mostrar la siguiente pantalla donde se escogerá la configuración con babel y eslint con el gestor NPM

Una vez ejecutado, se recomienda la configuración manual donde se escogerá entre las opciones router y se aceptará. Una vez ejecutado los comandos lo siguiente será entrar en la carpeta.

cd. website

Lo siguiente será abrir el código en un editor para facilitar su edición para este ejercicio se usó Visual Studio Code con el plugin Vetur para archivos .vue. Una vez dentro, se puede visualizar la estructura básica del proyecto en VueJS, si se desea correr el proyecto es con el comando que se muestra a continuación, donde se ejecutará en el puerto 8080 por defecto.

npm run serve

De esta manera se asegura que está corriendo el proyecto, si se continua en la misma consola es necesario suspender el servicio, para continuar con la integración de Amplify.

Integración de Amplify

Desde la raíz del proyecto se sigue la configuración de servicios en la nube usando Amplify CLI con el siguiente comando

amplify init

Lo siguiente es llenar la respectiva información respecto a tu ambiente de desarrollo. Si no cuentas con un perfil de AWS será necesario ingresar las credenciales. Lo cual creará una carpeta de amplify que se integra al proyecto.

La configuración seleccionada fue por defecto dea cuerdo al entorno de trabajo.

Lo siguiente será enlazar Amplify a VueJS con los siguientes comandos

npm install --save aws-amplify-vue
npm i aws-amplify-vue
npm i aws-amplify

Después de ejecutar el comando se va a editar el main.js agregando la configuración de la biblioteca de AWS al proyecto de VueJS. Esta configuración actualizada se puede obtener mediante el siguiente sitio

import Amplify, * as AmplifyModules from "aws-amplify";
import { AmplifyPlugin } from "aws-amplify-vue";
import awsconfig from "./aws-exports";
Amplify.configure(awsconfig);
Vue.use(AmplifyPlugin, AmplifyModules);

Lo que hace es importar en la aplicación la parte de Amplify para su uso en la aplicación VueJS.

Configuración de API

Ahora configurado Amplify y VueJS además de tenerlos integrados, se comienza con la parte del API corriendo el siguiente comando

amplify add api

Se escoge la opción de GraphQL y el uso de Amazon Cognito User Pool. Cognito User pool es un directorio de usuarios en Amazon Cognito otro servicio de AWS. Este pool de usuarios podrán loguearse en el sitio a tráves del uso de Cognito. Tiene integración con redes como Google o Facebook, para este caso será manual sin eso. Se escoge la configuración por defecto que va a crear una estructura de lista TO-DO. Lo siguiente es publicar con el siguiente comando.

amplify push

Se preguntará si quieres generar código para graphQL API, se escogerá Yes y Javascript con opción.

Lo siguiente será entrar a AWS al servicio de AppSync, este simplifica el desarrollo de la aplicación generando un API flexible, segura, manipulable y administrada.

Se encontrará el proyecto que se creó al usar el amplify push, se entra a este proyecto y en la parte de queries se ejecuta el siguiente comando. Las mutaciones en GraphQL permiten crear, actualizar y eliminar registros.

mutation {
  createTodo(input:{id: 1, name: "bota", description: "grande"}){
    id
    name
    description
  }
}

Si se ejecuta ahorita, como se encuentra la integración de Cognito pools pedirá autenticación, esto es configuración inicial la cual puede ser modificada.

Se necesita crear un usuario para poder hacer uso de la consulta, por lo que se va a configurar y crear desde la aplicación de VueJS. Se entrará en la aplicación que se encuentra en el puerto 8080 y se escogerá crear una cuenta. Se llenan los datos y se enviará un correo de confirmación al correo que fue dado de alta. Por defecto se encuentra en la carpeta de views los archivos About.vue y Home.vue.

About.vue

<template>
  <div class="home">
    <amplify-authenticator></amplify-authenticator>
    <amplify-sign-out></amplify-sign-out>
  </div>
</template>

<script>
import { AmplifyEventBus } from "aws-amplify-vue";
export default {
  mounted() {
    AmplifyEventBus.$on("authState", info => {
      console.log("auth", info);
      if (info === "signedIn") {
        this.$router.push("about");
      }
    });
  },
  name: "home",
  components: {}
};
</script>

Lo que hace este método es lo siguiente, usar el <amplify-authenticator> el cuál genera un login por defecto, si se desea algo diferente, se deberá hacer una configuración diferente. <amplify-sign-out> muestra un botón para cerrar la sesión el cual solo aparece hasta que se cuenta con sesión. AmplifyEventBus es un paquete que implementa un Vue EventBus para emitir y escuchar los eventos dentro de los compoenntes.

Home.vue

<template>
  <div class="about">
    <amplify-connect :query="listTodosQuery">
      <template slot-scope="{ loading, data, errors }">
        <div v-if="loading">
          Loading...
        </div>
        <div v-if="errors.length > 0">Errors</div>
        <div v-else-if="data">
          {{ data }}
        </div>
      </template>
    </amplify-connect>
  </div>
</template>
<script>
import { components } from "aws-amplify-vue";
const ListTodoQuery = `query ListTodos {
    listTodos {
      items {
        id
        name
        description
      }
    }
  }
  `;
export default {
  components: {
    ...components
  },
  computed: {
    listTodosQuery() {
      return this.$Amplify.graphqlOperation(ListTodoQuery);
    }
  }
};
</script>

Se hace un import de aws-amplify-vue, se genera una constante ListTodoQuery la cual tiene una consulta para tomar una lista con elementos los cuales tengan id, name y description. La expresión computed es exactamente como un método a diferencia que esta propiedad está guardada sobre su respectiva dependencia reactiva. La cual ejecuta la operación GraphQL. En la etiqueta <amplify-connect :query="listTodosQuery"> se puede observar la consulta donde en el template tomará 3 datos. Loading mientras carga la información, data mientras toma la información y Errors en caso de que tenga un defecto. Por ahora no devolverá ninguna información ya que no hay datos guardados.

Se entra al servicio de AWS Cognito, y se escogerá la opción de "Manage User Pools".

Se escogerá el pool de la aplicación que se creó y al entrar se tomará el ID, este en conjunto con el correo y la contraseña permitira realizar consultas. Regresando al AppSync en la parte de queries, se podrá ingresar los datos y permitirá efectuar las consultas.

Si se revisa el vinculo que tiene GraphQL se podrá observar que se creó una conexión con DynamoDB donde al revisar la estructura creada por defecto se encuentra el resultado de la mutación.

Si se hace la siguiente consulta, traera los valores guardados en DynamoDB.

query {
   listTodos {
        items {
            id
            name
            description
            }
        }
}

Si se vuelve a la aplicación y se revisa, cargará y posteriormente mostará la consulta en formato JSON.

Una vez configurado y funcionando se puede ejecutar el siguiente comando para hacer el host con el comando.

amplify add hosting

Por esta ocasión se escogió la configuración manual, sin embargo se recomienda la configuración con un repositorio para que sea escalable. Se puede realizar posteriormente de igual manera.

Al entrar al sitio de AWS con el servicio Amplify se encontrará el sitio, para que routers de VueJS trabaje adecuadamente se debe agregar una regla la cual reescriba.

</^[^.]+$|\.(?!(css|gif|ico|jpg|js|png|txt|svg|woff|ttf|map|json)$)([^.]+$)/>

Con target address

/index.html

Y tipo 200.

De esta manera cuando se corra y despliegue se tendrá una url teniendo el sitio funcionando. La vista de home tiene implementado el login y logout, además de lo necesario para crear una cuenta. Al cargar la información hace una redirección a about donde se hace la consulta a DynamoDB para obtener el elemento que se creó directamente en AppSync con el ID de Cognito. De esta manera no se tuvo que configurar correos, CRUD de usuarios, base de datos de una manera manual y se tuvo el resultado en minutos.