[GUIA] Leyendo balances (Tienda única)

En esta guía vamos a aprender como leer los balances de nuestra tienda de forma programática utilizando Next JS

Si utilizan otra tecnología o framework algunas cosas de esta guía pueden no funcionar o requerir adaptación

En esta guia vamos a asumir que ya tenes una cuenta de Amplify creada y configurada como "Tienda única". Si ese no es el caso te recomendamos que primero leas [GUIA] Integración básica Amplify SDK (Tienda única)

1. Creando nuestro proyecto

Versiones utilizadas en esta guía

Next: 14.1.4

Amplify: 0.0.67

En esta ocasión vamos a estar usando Next para la creación de nuestro proyecto pero Amplify es compatible con cualquier stack tecnológico mientras tengamos un frontend para mostrar el SDK y un backend para enviar los requests de forma segura.

A. Cloná el siguiente repositorio: https://github.com/Fundit-Finance/read-balance-with-next

B. Creá en la raíz del proyecto un archivo que se llame .env.local copiando el contenido de .env.example

C. Reemplaza las variables API_KEY y CLIENT_ID por las de tu cuenta

D. Instala las dependencias del proyecto ejecutando npm install

E. Inicia el servidor con el comando npm run dev

F. Ingresa a http://localhost:3000 y si todo esta configurado correctamente deberías ver el SDK funcionando y el balance

2. Entendiendo el flujo de la integración

En esta ocasión vamos a enfocarnos exclusivamente en el balance de nuestra cuenta.

Frontend

En este ejemplo el frontend se basa en hacer un HTTP Request a nuestra api interna para que la misma consulte el balance a la API de Amplify.

El motivo por el que se realiza de esta forma y no consultando directamente la API de Amplify desde el Frontend es que las llamadas de balances necesitan autenticación lo que implica enviar información sensible dentro de los headers de las llamadas. El código que ejecuta esta llamada es:

async function fetchBalance() {
  try {
    const getBalance = await axios.get(
      "http://localhost:3000/api/amplify/balance"
    );
  
    setBalance(getBalance?.data?.available ?? 0);
  } catch (err) {
    setBalance(0);
  }
}

---

Backend

Dentro de nuestra API vamos a encontrar un endpoint [GET] /api/amplify/balance el cual se encarga de llamar a la API de Amplify enviando los headers correspondientes para autenticarnos y obtener la información que buscamos. El objeto de respuesta de dicha API es:

{
    "available": 1234,
    "rate": 1000,
}

en donde available es la cantidad de USD que tiene la cuenta y rate es la cotización actual contra "fiat".

Por último, si realizamos un pago a nuestra cuenta y actualizamos la pagina o clickeamos el botón "Refresh balance" vamos a ver que nuestro balance se ve actualizado en nuestro frontend.