# \[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

{% hint style="info" %}
Si utilizan otra tecnología o framework algunas cosas de esta guía pueden no funcionar o requerir adaptación
{% endhint %}

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-integracion-basica-amplify-sdk-tienda-unica](https://amplify-docs.gitbook.io/amplify/espanol/guias/guia-integracion-basica-amplify-sdk-tienda-unica "mention") 

### 1. Creando nuestro proyecto

{% hint style="success" %}
Versiones utilizadas en esta guía

Next: 14.1.4

Amplify: 0.0.67
{% endhint %}

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

<figure><img src="https://1156615638-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FIVxTOBwXRT0ttBC3wYK9%2Fuploads%2F5NWBJ0bldQLMGavHiXA9%2Fimage.png?alt=media&#x26;token=58be6b70-ef48-4bf6-b96b-889cbef40249" alt=""><figcaption></figcaption></figure>

### 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.

<figure><img src="https://1156615638-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FIVxTOBwXRT0ttBC3wYK9%2Fuploads%2F2YFAoAcxcmzIX62kUuIt%2Fimage.png?alt=media&#x26;token=b24d7cfc-772c-4d8b-90da-be6cbb6acb80" alt=""><figcaption></figcaption></figure>

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:

```javascript
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:

```json
{
    "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.


---

# Agent Instructions: Querying This Documentation

If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.

Perform an HTTP GET request on the current page URL with the `ask` query parameter:

```
GET https://amplify-docs.gitbook.io/amplify/espanol/guias/guia-leyendo-balances-tienda-unica.md?ask=<question>
```

The question should be specific, self-contained, and written in natural language.
The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.

Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.