Youtube training #1 - Githubissues

zamrokk commented 1 year ago

Transcript FR :

Bienvenu à notre premier cours d'applications décentralisées sur Tezos

 Nous allons faire un jeu de Poke (i.e pousser du doigt quelqu'un en anglais) à travers un smart contrat. Le lien vers le code est dans la description ainsi que la correction. La page du tutoriel est celle que vous voyez à l'instant.

Qu'est ce qu'une application décentralisée ? Une application classique qui se base sur la technologie blockchain pour mettre en relation des utilisateurs directement sans intermédiaire, sécurisée, non altérable par un tiers, sans censure et avec une disponibilité supérieure au Cloud. Les transactions s'effectuent à travers des smart contract (i.e contrat intelligents). Ce sont des programmes informatiques qui exécutent un code qui est auditable publiquement et exposent une API à travers n'importe quel nœud du réseau.

Nous allons apprendre comment créer un projet Tezos avec Taqueria, créer un smart contract en JS Ligo, déployer sur un test local et réel, créer la dapp en utilisant la librairie taquito , utiliser un wallet dans le navigateur et finalement utiliser un indexer.

Le diagramme de séquence du jeu : un utilisateur envoie un poke à un smart contrat qui enregistre une trace dans son storage (i.e état)

Pour commencer, veuillez installer les programmes suivants. Aussi, il est très important d'avoir Docker installé et qui tourne sur votre machine car il est utilisé par taqueria pour lancer les commandes.
Ici on voit dans VS code les extensions de Taqueria et ligo

On va créer un projet taqueria et installer les plugins nécessaires pour taqueria.
On commence par créer le premier contrat pokeGame
On ouvre le projet dans vs code et on édite le contenu par défaut du fichier créé. On copie colle le code.

Chaque contrat a une fonction main avec des arguments et type de retour fixé par convention. Les arguments se composent d'un paramètre et du stockage. Tout est strictement typé en ligo.
La fonction main est un point d'entrée qui sert de redirection vers les fonctions internes du contrat. On peut utiliser match pour faire du pattern matching  (ou switch) sur le paramètre d'entrée.

Maintenant on va écrire la fonction Poke, à chaque poke sur le contrat on enregistre une trace dans le storage. Pour cela, on définit le type de storage et on ajoute une trace au storage.
On copie donc cette ligne de définition et on remplace l'existante. On ajoute la fonction Poke avant le main. On utilise ici la bibliothèque Tezos pour récupérer l'adresse de l'appelant (Tezos.get_source).  Voir la documentation pour plus de détails.

Maintenant on va tester le code. On va utiliser cette commande pour compiler le contrat. Chaque fois qu'on va compilé celà va remplacer le fichier compilé .tz (bytecode Michelson) dans le dossier artifact.
Maintenant on crée un autre contrat pour définir le stockage à l'initialisation du contrat lors du premier déploiement.
On remplace le codé autogénéré, puis on recompile à nouveau. Par convention, taqueria compile le contrat , le stockage et les paramètres associés s'ils suivent une certaines convention de nommage de fichier. On voit ici le code Michelson compilé

On va avoir maintenant besoin d'une wallet pour déployer le contrat. Si on utilise le testnet local appelé flextesa, on n'en a pas vraiment besoin. Mais ici on va utiliser plus tard un service en ligne d'indexeur alors on va se concentrer sur le déploiement réel en Ghostnet. On peut réutiliser un fichier de faucet comme ici pour passer les transactions. On va changer la configuration dans taqueria pour ajouter ce wallet.
On ajoute aussi un nouvel environnement "testing" qui pointe vers le ghostnet.

Maintenant, vous pouvez installer un wallet dans votre browser comme Temple, et importer la clé privée de ce wallet si vous voulez aussi l'utiliser comme utilisateur final. Sinon, créez un nouveau compte et allez dans un faucet pour récupérer des tez. Ici le lien vers la vidéo du faucet.

Déployons le contrat avec cette commande. De façon optionnelle vous pouvez aussi tester sur flextesa pour voir comment ça marche avec les commandes suivantes.

Maintenant que le contrat est déployé, on passe sur la dapp côté frontend. On crée un projet React en Typescript. On installe le client Tezos Taquito, la librairie beacon pour l'interaction de wallet et l'api de l'indexeur pour plus tard.
Avec Taqueria, on peut générer les classes Typescript de notre contrat, puis l’utiliser dans notre frontend.  Puis on démarre le serveur pour voir s'il compile et tourne correctement.

On va ajouter des boutons de connexion et de déconnexion. On remplace le fichier App.tsx par notre page de login. On crée les fichiers de composant de connexion et déconnexion. On colle le code du README des deux boutons.

Le bouton de connexion va afficher une fenêtre pour demander à l'utilisateur l'autorisation de signer les transactions sur un compte sélectionné.
Le bouton de déconnexion va nettoyer toutes les données relatives au compte.

Voyons maintenant comment afficher mon contrat et les autres contrats similaires au mien à travers l'indexeur.  Au lieu de parcourir toute la chaîne de blocs pour savoir où sont les adresses de ces contrats, on va utiliser le service d'API TZKT comme indexeur. On considère ça comme une API de cache par dessus le node qui fournit des informations plus riches et liées entre elles.

Pour récupérer l'adresse de mon contrat comme point de départ des autres contrats, on va changer le script de démarrage pour aller chercher dans taqueria cette adresse et l'ajouter en variable d'environnement au serveur front dans un fichier .env  .
Remplaçons la ligne en question dans le fichier package.json.

Ajoutons un bouton pour appeler l'indexeur,  et stockons le résultat dans une liste.
Modifions App.tsx , on importe les librairies indexeur, la fonction qui appelle le service API de l'indexeur.

On change le code HTML pour faire apparaître le bouton, on le met à la suite du code de template React.

On sauvegarde et fichier et on relance le serveur. Le nouveau script va générer un fichier de variable d'environnement contenant l'adresse du contrat déployé par taqueria.
On se connecte de nouveau et on clique sur "Fetch contract". On peut voir maintenant la liste de tous les contrats PokeGame sur Ghostnet.

Il faut maintenant pouvoir poker ces contrats. Pour ça on va ajouter un bouton de Poke. On revient dans App.tsx et on ajoute une fonction qui interagit avec le contrat. A partir de l'adresse du contrat , on récupère l'objet contrat et on appelle la seule méthode qu'il y a par défaut : "default". Attention dans le cas d'un seul entrypoint déclaré dans Tezos, le Michelson va créer un entrypoint nommé "default" et non le nom du paramètre pourtant déclaré.

On change le rendu html encore une fois pour faire apparaître le bouton

Attention, il y a un bug dans taqueria quand il n'y a qu'un seul entrypoint de déclaré, il faut rectifier ça à la main dans le fichier pokeGame.types.ts. On déclare la fonction default manquante à la main.
Sauvegarder le fichier et visualisez le nouveau bouton poke. Cliquer dessus, signer la transaction avec la wallet et attendre la pop de confirmation de la transaction effectuée.

Il manque maintenant de visualiser les traces dans le storage du contrat. riend e plus simple,  on va changer le template html pour afficher le contenu du storage
Sauvegardez, reconnectez vous si nécessaire, affichez les contrats en cliquant sur le bouton fetch.

Et voilà, voici le contenu de chaque contrat

Bravo vous avez terminé ce training d'introduction aux applications décentralisées sur Tezos. Vous êtes capable de créer une application de A à Z du backend représenté par le smart contrat au frontend puis interagir avec un contrat déployé sur le ghostnet.

La prochaine fois nous verrons comment écrire des tests unitaires et comment un contrat peut appeler un autre contrat.

Merci d'avoir visionné ce training , n'oubliez pas de liker si vous avez aimé la formation et de vous abonner à notre chaîne Youtube

Au revoir et à bientôt

zamrokk commented 1 year ago

Transcript EN

Welcome to our first lesson in decentralized applications on Tezos

 We are going to make a Poke game through a smart contract. The link to the code is in the description as well as the correction. The tutorial page is the one you see now.

What is a decentralized application? A classic application that is based on blockchain technology to connect users directly without an intermediary, secure, non-alterable by a third party, without censorship and with greater availability than the Cloud. Transactions are carried out through smart contracts. These are computer programs that run auditable code and expose an API through any node on the network.

We will learn how to create a Tezos project with Taqueria, create a smart contract in JS Ligo, deploy on a local and real testnet, create the dapp using the taquito library, use a wallet in the browser and finally use an indexer.

The game sequence diagram: a user sends a poke to a smart contract which records a trace in its storage

To begin, please install the following softwares. Also, it is very important to have Docker installed and running on your machine as it is used by taqueria to run commands.
Here we see in VS code the extensions of Taqueria and ligo

We will create a taqueria project and install the necessary plugins for taqueria.
We start by creating the first pokeGame contract.
We open the project in vs code and we edit the default content of the created file. We copy and paste the code.

Each contract has a main function with arguments and a return type fixed by convention. Arguments consist of a parameter and a storage. Everything is strictly typed in ligo.
The main function is an entry point that serves as a redirect to the internal functions of the contract. You can use match to do pattern matching (or switch) on the input parameter.

Now we are going to write the Poke function, at each poke on the contract we save a trace in the storage. To do this, we define the type of storage and add a trace to the storage.
We therefore copy this line of definition and we replace the existing one. We add the Poke function before the main. Here we use the Tezos library to retrieve the caller's address (Tezos.get_source).  See the documentation for more details.

Now let's test the code. We will use this command to compile the contract. Each time we compile it will replace the compiled .tz file (Michelson bytecode) in the artifact folder.
Now we create another contract to define the storage at the initialization of the contract during the first deployment.
We replace the auto generated code, then we recompile again. By convention, taqueria compiles the contract, storage and related parameters if they follow a certain file naming convention. We see here the compiled Michelson code

We will now need a wallet to deploy the contract. If we use the local testnet called flextesa, we don't really need it to test the backend only. But here we will later use an online indexer service so we will focus on the actual Ghostnet deployment. You can reuse a faucet like here to pass transactions. We will change the configuration in taqueria to add this faucet wallet.
We also add a new "testing" environment that points to the ghostnet.

Now you can install a wallet in your browser like Temple, and import the private key of this faucet wallet. You can also use it as an end user. Otherwise, create a new account and go to a faucet to collect some tez. Here is the link to the other video.

Let's deploy the contract with this command. Optionally you can also test on flextesa to see how it works with the following commands.

Now that the contract is deployed, we move on to the dapp on the frontend side. We create a React project in Typescript. We install the Tezos Taquito client, the beacon library for wallet interaction and the indexer API for later.
With Taqueria, we can generate the Typescript classes of our contract, then use it in our frontend. Then we start the server to see if it compiles and runs correctly.

We will add login and logout buttons. We replace the App.tsx file with our login page. The login and logout component files are created. We paste the README code of the two buttons.

The login button will display a window to ask the user for authorization to sign transactions on a selected account.
The logout button will clean all data related to the account.

Now let's see how to display my contract and other contracts similar to mine through the indexer. Instead of browsing the entire blockchain to find out where the addresses of these contracts are, we will use TZKT as an indexer. We can consider this as a cache API on top of the node that provides richer and more interrelated information.

To retrieve the address of my contract as a starting point for the other contracts, we will change the startup script to look for this address in taqueria and add it as an environment variable to the front server in an .env file.
Let's replace the line in question in the package.json file.

Let's add a button to call the indexer, and store the result in a list.
Let's modify App.tsx , we import the indexer libraries, the function that calls the indexer API service.

We change the HTML code to make the button appear, we put it after the React template code.

Save and file and restart the server. The new script will generate an environment variable file containing the address of the contract deployed by taqueria.
We connect again and click on "Fetch contract". We can now see the list of all PokeGame contracts on Ghostnet.

It is now necessary to be able to poke these contracts. For that we will add a Poke button. We go back to App.tsx and add a function that interacts with the contract. From the address of the contract, we retrieve the contract object and we call the only method that there is by default : "default". Be careful, in the case of a single entrypoint declared in Tezos, the Michelson will create a unique entrypoint named "default" and not the name of the parameter yet declared.

We change the html rendering once again to make the button appear.

Be careful, there is a bug in taqueria when there is only one declared entrypoint, we have to correct that by hand in the pokeGame.types.ts file. We declare the missing declaration by hand.
Save the file and view the new poke button. Click on it, sign the transaction with the wallet and wait for the confirmation popup of the transaction made.

We still miss visualizing the traces in the storage of the contract. Nothing simpler, we will change the html template to display the contents of the storage
Save, reconnect if necessary, display the contracts by clicking on the fetch button.

And voilà, here is the content of each contract storage

Congratulations, you have completed this introductory training to decentralized applications on Tezos. You are able to create an application from A to Z from the backend represented by the smart contract to the frontend and then interact with a contract deployed on the ghostnet.

Next time, we will see how to write unit tests and how a contract can call another contract.

Thank you for watching this training, don't forget to like if you liked it and to subscribe to our Youtube channel

Goodbye and see you soon

zamrokk commented 1 year ago

Transcript ES

Bienvenido a nuestra primera lección sobre aplicaciones descentralizadas en Tezos

Vamos a hacer un juego Poke a través de un contrato inteligente. El enlace al código está en la descripción, así como la corrección. La página del tutorial es la que ves ahora.

¿Qué es una aplicación descentralizada? Una aplicación clásica que se basa en la tecnología blockchain para conectar usuarios directamente sin intermediario, segura, inalterable por un tercero, sin censura y con mayor disponibilidad que la Nube. Las transacciones se realizan a través de contratos. Estos son programas informáticos que ejecutan código auditable y exponen una API a través de cualquier nodo de la red.

Aprenderemos a crear un proyecto de Tezos con Taqueria, crear un contrato inteligente en JS Ligo, implementar en una red de prueba local y real, crear el dapp usando la biblioteca taquito, usar una billetera en el navegador y finalmente usar un indexador.

El diagrama de secuencia del juego: un usuario envía un toque a un contrato inteligente que registra un rastro en su almacenamiento

Para comenzar, instale los siguientes softwares. Además, es muy importante tener Docker instalado y ejecutándose en su máquina, ya que Taqueria lo utiliza para ejecutar comandos.
Aquí vemos en código VS las extensiones de Taqueria y ligo

Crearemos un proyecto de taqueria e instalaremos los complementos necesarios para taqueria.
Comenzamos creando el primer pokeGame .
Abrimos el proyecto en código vs y editamos el contenido por defecto del archivo creado. Copiamos y pegamos el código.

Cada contrato tiene una principal con argumentos y un tipo de retorno fijado por convención. Los argumentos constan de un parámetro y un almacenamiento. Todo está estrictamente escrito en ligo.
La función principal es un punto de entrada que sirve como redirección a las funciones internas del contrato. Puede usar match para hacer coincidir patrones (o cambiar) en el parámetro de entrada.

Ahora vamos a escribir la función Poke, en cada poke del contrato guardamos un rastro en el almacenamiento. Para ello, definimos el tipo de almacenamiento y añadimos un seguimiento al almacenamiento.
Por lo tanto, copiamos esta línea de definición y reemplazamos la existente. Añadimos la función Poke antes de la principal. Aquí usamos la biblioteca de Tezos para recuperar la dirección de la persona que llama (Tezos.get_source).  Consulte la documentación para obtener más detalles.

Ahora vamos a probar el código. Usaremos este comando para compilar el contrato. Cada vez que compilamos, reemplazará el archivo .tz compilado (código de bytes de Michelson) en la carpeta del artefacto.
Ahora creamos otro contrato para definir el almacenamiento en la inicialización del contrato durante la primera implementación.
Reemplazamos el código generado automáticamente, luego volvemos a compilar. Por convención, taqueria compila el contrato, el almacenamiento y los parámetros relacionados si siguen una determinada convención de nomenclatura de archivos. Vemos aquí el código Michelson compilado

. Ahora necesitaremos una billetera para implementar el contrato. Si usamos la red de prueba local llamada flextesa, realmente no la necesitamos para probar solo el backend. Pero aquí usaremos más tarde un servicio de indexación en línea, por lo que nos centraremos en la implementación real de Ghostnet. Puede reutilizar un grifo como aquí para pasar transacciones. Cambiaremos la configuración en taqueria para agregar esta billetera faucet.
También agregamos un nuevo entorno de "prueba" que apunta a la red fantasma.

Ahora puede instalar una billetera en su navegador como Temple e importar la clave privada de esta billetera faucet. También puede usarlo como usuario final. De lo contrario, cree una nueva cuenta y vaya a un grifo para recolectar algunos tez. Aquí está el enlace al otro video.

Implementemos el contrato con este comando. Opcionalmente también puedes probar en flextesa para ver cómo funciona con los siguientes comandos.

Ahora que el contrato está implementado, pasamos a la dapp en el lado de la interfaz. Creamos un proyecto React en Typescript. Instalamos el cliente Tezos Taquito, la biblioteca de balizas para la interacción con la billetera y la API indexadora para más adelante.
Con Taqueria, podemos generar las clases Typescript de nuestro contrato, luego usarlo en nuestra interfaz. Luego iniciamos el servidor para ver si compila y se ejecuta correctamente.

Agregaremos botones de inicio y cierre de sesión. Reemplazamos el archivo App.tsx con nuestra página de inicio de sesión. Se crean los archivos del componente de inicio y cierre de sesión. Pegamos el código README de los dos botones.

El botón de inicio de sesión mostrará una ventana para solicitar al usuario autorización para firmar transacciones en una cuenta seleccionada.
El botón de cierre de sesión limpiará todos los datos relacionados con la cuenta.

Ahora veamos cómo mostrar mi contrato y otros contratos similares al mío a través del indexador. En lugar de navegar por toda la cadena de bloques para averiguar dónde están las direcciones de estos contratos, utilizaremos TZKT como indexador. Podemos considerar esto como una API de caché en la parte superior del nodo que proporciona información más rica e interrelacionada.

Para recuperar la dirección de mi contrato como punto de partida para los otros contratos, cambiaremos el script de inicio para buscar esta dirección en taqueria y agregarla como una variable de entorno al servidor frontal en un archivo .env.
Reemplacemos la línea en cuestión en el archivo package.json.

Agreguemos un botón para llamar al indexador y almacenemos el resultado en una lista.
Modifiquemos App.tsx, importamos las bibliotecas del indexador, la función que llama al servicio API del indexador.

Cambiamos el código HTML para que aparezca el botón, lo ponemos después del código de la plantilla de React.

Guarde y archive y reinicie el servidor. El nuevo script generará un archivo de variables de entorno que contiene la dirección del contrato implementado por taqueria.
Nos conectamos de nuevo y pulsamos en "Obtener contrato". Ahora podemos ver la lista de todos los contratos de PokeGame en Ghostnet.

Ahora es necesario poder empujar estos contratos. Para eso agregaremos un botón Poke. Volvemos a App.tsx y añadimos una función que interactúa con el contrato. Desde la dirección del contrato, recuperamos el objeto del contrato y llamamos al único método que existe por defecto : "default". Tenga cuidado, en el caso de un punto de entrada único declarado en Tezos, Michelson creará un punto de entrada único llamado "predeterminado" y no el nombre del parámetro aún declarado.

Cambiamos la representación html una vez más para que aparezca el botón.

Ojo, hay un error en taqueria cuando solo hay un punto de entrada declarado, tenemos que corregir eso a mano en el archivo pokeGame.types.ts. Declaramos la declaración faltante a mano.
Guarde el archivo y vea el nuevo botón poke. Haga clic en él, firme la transacción con la billetera y espere la ventana emergente de confirmación de la transacción realizada.

Todavía extrañamos visualizar las huellas en el almacenamiento del contrato. Nada más simple, cambiaremos la plantilla html para mostrar el contenido del almacenamiento
. Guardar, volver a conectar si es necesario, mostrar los contratos haciendo clic en el botón de búsqueda.

Y voilà, aquí está el contenido de cada contrato de almacenamiento

Felicitaciones, ha completado esta capacitación introductoria a las aplicaciones descentralizadas en Tezos. Puede crear una aplicación de la A a la Z desde el backend representado por el contrato inteligente hasta el frontend y luego interactuar con un contrato implementado en la red fantasma.

La próxima vez, veremos cómo escribir pruebas unitarias y cómo un contrato puede llamar a otro contrato.

Gracias por ver esta capacitación, no olvides darle me gusta si te gustó y suscribirte a nuestro canal de Youtube.

Hasta pronto.

vanessamontesb commented 1 year ago

Bienvenido a nuestra primera lección sobre aplicaciones descentralizadas en Tezos

Vamos a hacer un juego Poke a través de un contrato inteligente. El enlace al código está en la descripción, así como la corrección. La página del tutorial es la que ves ahora.

¿Qué es una aplicación descentralizada? Una aplicación clásica que se basa en la tecnología blockchain para conectar usuarios directamente sin intermediario, segura, inalterable por un tercero, sin censura y con mayor disponibilidad que la Nube. Las transacciones se realizan a través de contratos. Estos son programas informáticos que ejecutan código auditable y exponen una API a través de cualquier nodo de la red.

Aprenderemos a crear un proyecto de Tezos con Taqueria, crear un contrato inteligente en JS Ligo, implementar en una red de prueba local y real, crear un dapp usando la biblioteca taquito, usar una billetera en el navegador y finalmente usar un indexador.

El diagrama de secuencia del juego: un usuario envía un toque a un contrato inteligente, el cual registra un rastro en su almacenamiento

Para comenzar, instale los siguientes softwares. Además, es muy importante tener Docker instalado y ejecutándose en su máquina, ya que Taqueria lo utiliza para ejecutar comandos. Aquí vemos en código VS las extensiones de Taqueria y ligo

Crearemos un proyecto de taqueria e instalaremos los complementos necesarios para taqueria. Comenzamos creando el primer pokeGame . Abrimos el proyecto en visual studio code y editamos el contenido por defecto del archivo creado. Copiamos y pegamos el código.

Cada contrato tiene una principal con argumentos y un tipo de retorno fijado por convención. Los argumentos constan de un parámetro y un almacenamiento. Todo está estrictamente escrito en ligo. La función principal es un punto de entrada que sirve como redirección a las funciones internas del contrato. Puede usar match para hacer coincidir patrones (o cambiar) en el parámetro de entrada.

Ahora vamos a escribir la función Poke, en cada poke del contrato guardamos un rastro en el almacenamiento. Para ello, definimos el tipo de almacenamiento y añadimos un seguimiento al almacenamiento. Por lo tanto, copiamos esta línea de definición y reemplazamos la existente. Añadimos la función Poke antes de la principal. Aquí usamos la biblioteca de Tezos para recuperar la dirección de la persona que llama (Tezos.get_source). Consulte la documentación para obtener más detalles.

Ahora vamos a probar el código. Usaremos este comando para compilar el contrato. Cada vez que compilamos, reemplazará el archivo .tz compilado (código de bytes de Michelson) en la carpeta del artefacto. Ahora creamos otro contrato para definir el almacenamiento en la inicialización del contrato durante la primera implementación. Reemplazamos el código generado automáticamente, luego volvemos a compilar. Por convención, taqueria compila el contrato, el almacenamiento y los parámetros relacionados si siguen una determinada convención de nomenclatura de archivos. Vemos aquí el código Michelson compilado

. Ahora necesitaremos una billetera para implementar el contrato. Podemos usar la red de prueba local llamada flextesa, pero aquí usaremos un servicio de indexación en línea, por lo que nos centraremos en la implementación real de Ghostnet. Puede reutilizar un grifo como aquí para pasar transacciones. Cambiaremos la configuración en taqueria para agregar esta billetera faucet. También agregamos un nuevo entorno de "prueba" que apunta a la red fantasma.

Ahora puede instalar una billetera en su navegador como Temple e importar la clave privada de esta billetera faucet. También puede usarlo como usuario final. De lo contrario, cree una nueva cuenta y vaya a un grifo para recolectar algunos tez. Aquí está el enlace al otro video.

Implementemos el contrato con este comando. Opcionalmente también puedes probar en flextesa para ver cómo funciona con los siguientes comandos.

Ahora que el contrato está implementado, pasamos a la dapp en el lado de la interfaz. Creamos un proyecto React en Typescript. Instalamos el cliente Tezos Taquito, la biblioteca de balizas para la interacción con la billetera y la API indexadora para más adelante. Con Taqueria, podemos generar las clases Typescript de nuestro contrato, luego usarlo en nuestra interfaz. Luego iniciamos el servidor para ver si compila y se ejecuta correctamente.

Agregaremos botones de inicio y cierre de sesión. Reemplazamos el archivo App.tsx con nuestra página de inicio de sesión. Se crean los archivos del componente de inicio y cierre de sesión. Pegamos el código README de los dos botones.

El botón de inicio de sesión mostrará una ventana para solicitar al usuario autorización para firmar transacciones en una cuenta seleccionada. El botón de cierre de sesión limpiará todos los datos relacionados con la cuenta.

Ahora veamos cómo mostrar nuestro contrato y otros contratos similares al nuestro a través del indexador. En lugar de navegar por toda la cadena de bloques para averiguar dónde están las direcciones de estos contratos, utilizaremos TZKT como indexador. Podemos considerar esto como una API de caché en la parte superior del nodo que proporciona información más rica e interrelacionada.

Para recuperar la dirección de nuestro contrato como punto de partida para los otros contratos, cambiaremos el script de inicio para buscar esta dirección en taqueria y agregarla como una variable de entorno al servidor frontal en un archivo .env. Reemplacemos la línea en cuestión en el archivo package.json.

Agreguemos un botón para llamar al indexador y almacenemos el resultado en una lista. Modifiquemos App.tsx, importamos las bibliotecas del indexador, la función que llama al servicio API del indexador.

Cambiamos el código HTML para que aparezca el botón, lo ponemos después del código de la plantilla de React.

Guarde y archive y reinicie el servidor. El nuevo script generará un archivo de variables de entorno que contiene la dirección del contrato implementado por taqueria. Nos conectamos de nuevo y pulsamos en "Obtener contrato". Ahora podemos ver la lista de todos los contratos de PokeGame en Ghostnet.

Ahora es necesario poder empujar estos contratos. Para eso agregaremos un botón Poke. Volvemos a App.tsx y añadimos una función que interactúa con el contrato. Desde la dirección del contrato, recuperamos el objeto del contrato y llamamos al único método que existe por defecto : "default". Tenga cuidado, en el caso de un punto de entrada único declarado en Tezos, Michelson creará un punto de entrada único llamado "predeterminado" y no el nombre del parámetro aún declarado.

Cambiamos la representación html una vez más para que aparezca el botón.

Ojo, hay un error en taqueria cuando solo hay un punto de entrada declarado, tenemos que corregir eso a mano en el archivo pokeGame.types.ts. Declaramos la declaración faltante a mano. Guarde el archivo y vea el nuevo botón poke. Haga clic en él, firme la transacción con la billetera y espere la ventana emergente de confirmación de la transacción realizada.

Todavía extrañamos visualizar las huellas en el almacenamiento del contrato. Nada más simple, cambiaremos la plantilla html para mostrar el contenido del almacenamiento . Guardar, volver a conectar si es necesario, mostrar los contratos haciendo clic en el botón de búsqueda.

Y voilà, aquí está el contenido de cada contrato de almacenamiento

Felicitaciones, ha completado esta capacitación introductoria a las aplicaciones descentralizadas en Tezos. Puede crear una aplicación de la A a la Z desde el backend representado por el contrato inteligente hasta el frontend y luego interactuar con un contrato implementado en la red fantasma.

La próxima vez, veremos cómo escribir pruebas unitarias y cómo un contrato puede llamar a otro contrato.

Gracias por ver esta capacitación, no olvides darle me gusta si te gustó y suscribirte a nuestro canal de Youtube.

Hasta pronto.