Erstellen Sie eine End-to-End-Dapp auf Aptos

Ein gängiger Weg, ein neues Framework oder eine Programmiersprache zu lernen, ist der Aufbau einer einfachen Todo-Liste. In diesem Tutorial lernen wir, wie man eine End-to-End-Todo-Liste-Dapp erstellt, beginnend mit der Smart-Contract-Seite über die Frontend-Seite bis hin zur Verwendung einer Wallet für die Interaktion zwischen beiden.

Sehen Sie sich den vollständigen Code im Quellcode an.

Nachdem Sie die Voraussetzungen erfüllt und sich eingerichtet haben, wie unten beschrieben, folgen Sie diesem Tutorial in dieser Reihenfolge:

1. Einen Smart Contract erstellen
2. Ein Frontend einrichten
3. Daten von der Chain abrufen
4. Daten zur Chain senden
5. Aufgaben verwalten

Sie müssen haben:

• node und npm

Obwohl wir einige React-Entscheidungen erklären werden, werden wir nicht tief in die Funktionsweise von React eintauchen; daher nehmen wir an, dass Sie bereits Erfahrung mit React haben.

In diesem Abschnitt erstellen wir ein my-first-dapp-Verzeichnis für unsere Projektdateien, sowohl clientseitigen Code (React-basiert) als auch den Move-Code (unser Smart Contract).

Dafür verwenden wir create-aptos-dapp, um das Projekt zu erstellen.

1. Öffnen Sie ein Terminal und navigieren Sie zum gewünschten Verzeichnis für das Projekt (zum Beispiel das Desktop-Verzeichnis).
2. Führen Sie npx create-aptos-dapp@latest aus, um das Projekt zu erstellen.

npx create-aptos-dapp@latest

3. Folgen Sie den Anweisungen, um das Projekt zu erstellen.

• Wählen Sie einen Namen für das Projekt, zum Beispiel my-first-dapp.
• Wählen Sie die Option Full-stack project.
• Wählen Sie die Option Boilerplate Template.
• Der Einfachheit halber wählen Sie, Surf nicht zu verwenden.
• Wählen Sie die Framework-Option Vite app.
• Wählen Sie die Netzwerk-Option Devnet.

Das Tool erstellt das Projekt in einem Verzeichnis mit demselben Namen wie das Projekt und installiert die erforderlichen Abhängigkeiten.

Folgen Sie den Next Steps-Anweisungen.

Jetzt lassen Sie uns einen Smart Contract erstellen.