# Creación de un Widget con el Modyo CLI

# Introducción

Te damos la bienvenida a un nuevo tutorial de la serie de entrenamiento de Modyo. Este tutorial se enfoca en crear un Widget, donde podrás utilizar nuestro Catálogo de Widgets Financieros de Modyo utilizando el Modyo CLI.

Al igual que en los otros tutoriales usaremos la marca ficticia "Dynamic Bank".

# Dynamic Bank

Dynamic Bank es el nombre que le damos en Modyo a todo lo referente a demos y ejemplo de la plataforma. Quisimos crearlo para poder ofrecer una experiencia muy cercana a la realidad de lo que significa realmente trabajar con Modyo. Una vez completado este tutorial tu sitio debería lucir así:

Preview of what the final product will look like

# Requisitos Previos

Necesitas tener conocimientos de:

  • HTML
  • CSS
  • JS
  • La plataforma Modyo

Para tener una visión más completa, se recomienda que antes de realizar este tutorial, termines el ejercicio de Creación de un sitio privado

# Paso 1: Instalar Modyo CLI

Para agregar un Widget, tienes que instalar Modyo CLI.

Modyo CLI es una herramienta de línea de comandos basada en los principios de aceleración e integración con comandos GET y PUSH respectivamente.

Para instalar Modyo CLI necesitamos algunas dependencias, que deben estar instaladas de manera global.

Ellas son:

  • Git distributed version control system (v 1.7+)
  • Node (v 14+)
  • Un editor de código como por ejemplo Visual Studio Code
  • Npm (v 6.14+)
  • Yarn (v 1.22+)

Para realizar la instalación se puede usar una de estas opciones en la terminal:

Vía yarn

$ yarn global add @modyo/cli

Vía npm

$ npm i -g @modyo/cli

Una vez instalado, verifica que todo esté bien ejecutando el comando modyo-cli help.

Luego de completar el proceso de instalación, vamos a obtener el Widget de Resumen de Cuentas desde el Catálogo de Widgets Financieros de Modyo.

Para descargar el Widget a tu ambiente local lo hacemos con el siguiente comando:

modyo-cli get modyo-widgets-retail-summary

Esto desgargará un widget basado en Vue. Al terminar el proceso, aparece una vista así:

Screenshot of the terminal output of the previous command

Para editarlo debes navegar a la carpeta modyo-widgets-retail-summary dentro de la terminal.

Tip

Si es la primera vez que ejecutas este widget, asegurate de instalar sus dependencias con npm install, el proceso puede tardar unos minutos dependiendo de tu conexión a internet

Para construirlo de manera local, utiliza yarn serve o npm run serveen tu navegador, el resultado se verá asi en tu navegador:

A screenshot of the the widget running in the browser

# Paso 3: Modificar estilos del Widget

Los Widgets del catálogo se han diseñado en Modyo con un estilo simple. Para hacer cambios debes abrir la carpeta del widget modyo-widgets-retail-summary en tu editor, que en nuestro caso es Visual Studio Code.

Image showing Visual Studio UI

Para cambiar los colores de las variables por los de Dynamic Bank, sigue estos pasos:

  1. Navega a la carpeta src.
  2. Dentro de la carpeta css, abre el archivo _variables.css.
  3. Modifica el código con el siguiente:
$primary-10: #EEF0F5;
$primary-20: #E8EAF1;
$primary-40: #D2D6E5;
$primary-60: #A5AECC;
$primary-80: #7985B2;
$primary-100: #384470;
$primary-dark: #2e4553;
$secondary-10: #eff0f1;
$secondary-20: #e0e2e3;
$secondary-40: #c1c5c7;
$secondary-60: #a1a8aa;
$secondary-80: #828b8e;
$secondary-100: #636e72;
$secondary-dark: #515a5e;
$tertiary-10: #f7f8f9;
$tertiary-20: #f0f2f3;
$tertiary-40: #e0e5e7;
$tertiary-60: #d1d8db;
$tertiary-80: #c1cbcf;
$tertiary-100: #b2bec3;
$tertiary-dark: #a3afb4;
$red: #D7426E;
$yellow: #F2C10D;
$green: #70D960;
$primary: $primary-100;
$secondary: $secondary-100;
$light: $secondary-10;
$dark: $secondary-dark;
  1. Abre el archivo _theme.css.
  2. Modifica la línea 8, dejando el body con un background: white;
  3. En el directorio src/components/SummaryAccount.vue, modifica el header de las cards, modificando el background por $primary-40, específicamente la línea 169 para que luzca así:
.card-header.product-summary__header:first-child {
  border-top-left-radius: 12px;
  border-top-right-radius: 12px;
  background: $primary-40;
}
  1. En la línea 8 le agregamos la clase h6 al h2 de esta manera:
<h2 class="h6 mb-0 text-capitalize">
  {{ account.accountType }}
  <span class="d-block mt-1">{{ $tc('commons.number', account.accountNumber) }}</span>
</h2>
  1. Agrega estilos para que la barra de monto se vea verde:
.m-progress-bar .progress-bar {
  background: $green !important;
}
  1. Abre el archivo App.vue.
  2. Para agregar el título, copia el siguiente código:
<template>
  <article
    id="summary-app"
    class="py-4 py-sm-5">
    <div class="container-fluid px-0">
      <div
        v-if="isLoading"
        class="loading text-center pt-5">
        <font-awesome-icon
          icon="circle-notch"
          size="5x"
          spin />
      </div>
      <div
        v-else
        ref="viewport"
        class="products-viewport">
        <div class="header-summary mb-3">
          <h3 class="h4 text-primary font-weight-bold">Hola</h3>
          <h3 class="h4 text-primary">Bienvenido a Dynamic</h3>
        </div>
        <div
          ref="content"
          class="products-summary d-flex align-items-stretch">
          <summary-account
            v-for="account in accounts"
            :key="`account-${account.id}`"
            :account="account"
            :client-id="clientId" />

          <summary-card
            v-for="card in cards"
            :key="`card-${card.id}`"
            :card="card"
            :client-id="clientId" />

          <summary-add key="add" />
        </div>
      </div>
    </div>
  </article>
</template>

<script>
import ScrollBooster from 'scrollbooster';
import { getURLParams } from '@modyo/financial-commons';
import SummaryAccount from './components/SummaryAccount.vue';
import SummaryCard from './components/SummaryCard.vue';
import SummaryAdd from './components/SummaryAdd.vue';

export default {
  name: 'App',
  components: {
    SummaryAccount,
    SummaryCard,
    SummaryAdd,
  },
  data() {
    return {
      carousel: {},
    };
  },
  computed: {
    isLoading() {
      return this.$store.state.isLoading;
    },
    accounts() {
      return this.$store.state.accounts;
    },
    cards() {
      return this.$store.state.cards;
    },
    clientId() {
      return this.$store.state.clientId;
    },
  },
  created() {
    const client = parseInt(getURLParams('client'), 10) || 1;
    this.$store.commit('SET_CLIENT_ID', client);
    this.$store.dispatch('DO_DATA_INITIALIZATION').then(() => {
      this.initProductsCarousel();
    });
  },
  methods: {
    initProductsCarousel() {
      const { viewport } = this.$refs;
      const { content } = this.$refs;

      // eslint-disable-next-line no-unused-vars
      const sb = new ScrollBooster({
        viewport,
        content,
        direction: 'horizontal',
        emulateScroll: false,
        onUpdate: (state) => {
          if (state.borderCollision.right) {
            content.style.transform = `translateX(${-state.position.x - 20}px)`;
          } else {
            content.style.transform = `translateX(${-state.position.x}px)`;
          }

          if (state.isMoving) {
            viewport.style.cursor = 'grabbing';
          } else {
            viewport.style.cursor = 'grab';
          }
        },
        shouldScroll: (state, event) => {
          // disable scroll if clicked on button
          const isLink = event.target.nodeName.toLowerCase() === 'a';
          return !isLink;
        },
      });

      sb.updateMetrics();
    },
  },
};
</script>

<style lang="scss" scoped>
.products-viewport {
  overflow: hidden;

  cursor: grab;
}

@media (max-width: 575.98px) {
  .header-summary h2 {
    font-size: 24px;
  }
}
.header-summary {
  margin-left: 30px;
}
@media (min-width: 1200px) {
  .header-summary {
    margin-left: 140px;
  }
}
</style>

Una vez que termines de darle el look and feel al widget, tu sitio se verá como el de esta imagen y estarás listo para hacer push a los servidores de Modyo.

# Paso 4: Enviar Widget al sitio

Para hacer el push del Widget al sitio en Modyo, tienes que generar la configuración en el Modyo CLI para que sepa hacia donde va el push.

Sigue estos pasos para crear el archivo de configuración:

  1. En la carpeta raíz del widget, crea un archivo .env.
  2. Agrega el siguiente código y remplaza [Account url] y [Modyo API Token] según tu contexto:
MODYO_ACCOUNT_URL=[URL de tu cuenta ie: http://myaccount.modyo.cloud]
MODYO_SITE_HOST=[ El site donde planeas publicar ej: private-site ]
MODYO_VERSION=9
MODYO_TOKEN= [Modyo API Token]
MODYO_BUILD_DIRECTORY=dist
MODYO_WIDGET_NAME=Summary

Para obtener un API token, sigue estos pasos:

  1. En el menú principal de la Plataforma, selecciona Configuración y haz click en Acceso a la API
  2. Haz click en + Nuevo Acceso a la API.
  3. En el modal completa los siguientes datos:
Name modyo-cli
Description Token que se utilizara para hacer push desde modyo-cli
Redirect URI urn:ietf:wg:oauth:2.0:oob
Image showing the New application for API Access window
  1. Una vez creado el API access, haz click en Equipo.
  2. Busca y selecciona tu usuario.
  3. Haz click en el apartado de Acceso a la API y haz click en + Nuevo Token de Acceso.
  4. Selecciona modyo-cli y haz click en Crear Token.
Image showing the Generate Access Token window

Ahora que ya tienes un token, puedes agregarlo al archivo .env de configuración.

Image showing the generated Access Token

Ejecutar npm run build

  1. En la terminal, usa el comando modyo-cli push Summary, este comando lleva el widget al tu sitio. Lo podrás encontrar en el apartado de Widgets Personalizados.
Image showing that the Widget was uploaded to Modyo Platform successfully

Tip

Si encuentras problemas para ejecutar el comando de compilacion , prueba instalar una version compatible de postCSS con esta linea

npm i -D @fullhuman/postcss-purgecss@3.0.0 postcss@7.0.35

  1. Para hacerlo disponible en la biblioteca de widgets, en la plataforma, dentro de Channels -> Sitios, entra a tu sitio.
  2. Haz click en Widgets, tu widget se encontrará listado como un Widget listo para ser publicado. Entra a tu widget y haz click en Publicar.
  3. En la ventana de Revisar y Publicar, selecciona tu widget y haz click en Publicar. Selecciona la opción de Publicar Ahora.
Image showing the Generate Access Token window
  1. Selecciona Pages y haz click en Home.
  2. Borra el Widget de HTML existente y agrega tu Custom Widget.
Image showing your new widget in a page

# Paso 5: Revisar y Publicar Home, Navigation, y Template

Una vez realizados los pasos anteriores, revisa todo el sitio en modo vista previa. Al estar conforme con el resultado, debes publicar los cambios para dejar todos los cambios disponibles a tus usuarios finales.

Para realizar una publicación, desde la sección Resumen, haz click en el botón Publicar donde se abrirá un panel con los cambios que haz realizado.

Image showing the Review & Publish window

Selecciona todos los cambios pendientes, y haz click en Publicar. Selecciona Publicar Ahora.

# Conclusiones

¡Muy bien! Haz finalizado el curso de Sitio Privado con Widgets del Modyo CLI.

Encuentra mas informacion sobre Modyo:

Last Updated: 8/6/2022,