Construire une DApp de Bout en Bout sur Aptos

Une façon courante d’apprendre un nouveau framework ou langage de programmation est de construire une simple liste de tâches. Dans ce tutoriel, nous apprendrons comment construire une DApp de liste de tâches de bout en bout, en commençant par le côté contrat intelligent jusqu’au côté front-end et finalement l’utilisation d’un portefeuille pour interagir avec les deux.

Voir le code complet dans le code-source.

Après avoir rempli les prérequis et vous être configuré comme décrit ci-dessous, vous suivrez ce tutoriel dans cet ordre :

1. Créer un contrat intelligent
2. Configurer un frontend
3. Récupérer des données de la chaîne
4. Soumettre des données à la chaîne
5. Gérer les tâches

Vous devez avoir :

• node et npm

Bien que nous expliquerons certaines décisions React, nous n’allons pas plonger profondément dans le fonctionnement de React ; nous supposons donc que vous avez une certaine expérience préalable avec React.

Dans cette section, nous créerons un répertoire my-first-dapp pour contenir nos fichiers de projet, à la fois le code côté client (basé sur React) et le code Move (notre contrat intelligent).

Pour cela, nous utiliserons create-aptos-dapp pour créer le projet.

1. Ouvrez un terminal et naviguez vers le répertoire souhaité pour le projet (par exemple, le répertoire Desktop).
2. Exécutez npx create-aptos-dapp@latest pour créer le projet.

npx create-aptos-dapp@latest

3. Suivez les instructions pour créer le projet.

• Choisissez un nom pour le projet, par exemple my-first-dapp.
• Choisissez l’option Full-stack project.
• Choisissez l’option Boilerplate Template.
• Pour la simplicité, choisissez de ne pas utiliser Surf.
• Choisissez l’option de framework Vite app.
• Choisissez l’option de réseau Devnet.

L’outil créera le projet dans un répertoire avec le même nom que le projet et installera les dépendances requises.

Suivez les instructions Next Steps.

Maintenant créons un contrat intelligent.