| ... | @@ -6,18 +6,35 @@ Willkommen zur Entwicklerdokumentation für DEXWeb, unserer innovativen dezentra |
... | @@ -6,18 +6,35 @@ Willkommen zur Entwicklerdokumentation für DEXWeb, unserer innovativen dezentra |
|
|
|
|
|
|
|
## Inhaltsverzeichnis
|
|
## Inhaltsverzeichnis
|
|
|
|
|
|
|
|
1. [Einführung](#einf%C3%BChrung)
|
|
1. [Einführung](#einführung)
|
|
|
2. [Projektstruktur](#projektstruktur)
|
|
2. [Projektübersicht](#projektübersicht)
|
|
|
3. [Technologie-Stack](#technologie-stack)
|
|
3. [Projektstruktur](#projektstruktur)
|
|
|
4. [Installation und Einrichtung](#installation-und-einrichtung)
|
|
4. [Technologie-Stack](#technologie-stack)
|
|
|
5. [Smart Contracts](#smart-contracts)
|
|
5. [Installation und Einrichtung](#installation-und-einrichtung)
|
|
|
6. [Frontend-Entwicklung](#frontend-entwicklung)
|
|
6. [Smart Contracts](#smart-contracts)
|
|
|
|
7. [Frontend-Entwicklung](#frontend-entwicklung)
|
|
|
|
8. [Testing](#testing)
|
|
|
|
9. [Deployment](#deployment)
|
|
|
|
10. [Ressourcen](#ressourcen)
|
|
|
|
|
|
|
|
---
|
|
---
|
|
|
|
|
|
|
|
## Einführung
|
|
## Einführung
|
|
|
|
|
|
|
|
DEXWeb ist eine dezentralisierte Tauschbörse für Kryptowährungen, die Benutzern ermöglicht, sicher und direkt über den Webbrowser zu handeln. Die Plattform verwendet Smart Contracts auf der Polygon Blockchain, um einen vertrauenswürdigen und intermediärfreien Austausch zu gewährleisten.
|
|
DEXWeb ist eine dezentralisierte Tauschbörse für Kryptowährungen, die Benutzern ermöglicht, sicher und direkt über den Webbrowser zu handeln. Die Plattform verwendet Smart Contracts auf der Polygon-Blockchain, um einen vertrauenswürdigen und intermediärfreien Austausch zu gewährleisten.
|
|
|
|
|
|
|
|
---
|
|
|
|
|
|
|
|
## Projektübersicht
|
|
|
|
|
|
|
|
### Vision
|
|
|
|
Unsere Vision war es, eine benutzerfreundliche und sichere Plattform zu entwickeln, die es Benutzern ermöglicht, Kryptowährungen dezentral zu tauschen. DEXWeb zielt darauf ab, den Handel ohne zentrale Autorität zu ermöglichen und dabei niedrige Transaktionskosten und schnelle Abwicklung zu bieten.
|
|
|
|
|
|
|
|
### Use-Case
|
|
|
|
DEXWeb ermöglicht es Benutzern, ihre Kryptowährungen direkt von ihren Wallets aus zu tauschen, ohne auf zentrale Börsen angewiesen zu sein. Dies erhöht die Sicherheit und Privatsphäre der Benutzer.
|
|
|
|
|
|
|
|
### Entwicklung
|
|
|
|
Wir haben eine dezentralisierte Anwendung (dApp) entwickelt, die Smart Contracts auf der Polygon-Blockchain verwendet und eine benutzerfreundliche Oberfläche bietet, um den Austausch von Kryptowährungen zu erleichtern.
|
|
|
|
|
|
|
|
---
|
|
---
|
|
|
|
|
|
| ... | @@ -27,8 +44,7 @@ Das DEXWeb-Projekt ist in mehrere Hauptkomponenten unterteilt: |
... | @@ -27,8 +44,7 @@ Das DEXWeb-Projekt ist in mehrere Hauptkomponenten unterteilt: |
|
|
|
|
|
|
|
- **Smart Contracts**: Enthält alle Solidity-Dateien und Migrationen.
|
|
- **Smart Contracts**: Enthält alle Solidity-Dateien und Migrationen.
|
|
|
- **Frontend**: Besteht aus der Benutzeroberfläche und den zugehörigen Assets.
|
|
- **Frontend**: Besteht aus der Benutzeroberfläche und den zugehörigen Assets.
|
|
|
- **Backend**: Umfasst Server-Logik, API-Endpunkte und Datenbankintegration.
|
|
- **Tests**: Beinhaltet Unit- und Integrationstests für Smart Contracts und das Backend.
|
|
|
- **Tests**: Beinhaltet Unit- und Integrationstests für Smart Contracts und Backend.
|
|
|
|
|
|
|
|
|
|
---
|
|
---
|
|
|
|
|
|
| ... | @@ -38,8 +54,9 @@ DEXWeb verwendet die folgenden Technologien: |
... | @@ -38,8 +54,9 @@ DEXWeb verwendet die folgenden Technologien: |
|
|
|
|
|
|
|
- **Blockchain**: Polygon (Ethereum-kompatibel)
|
|
- **Blockchain**: Polygon (Ethereum-kompatibel)
|
|
|
- **Smart Contracts**: [Solidity](https://soliditylang.org/)
|
|
- **Smart Contracts**: [Solidity](https://soliditylang.org/)
|
|
|
- **Frontend**: [React](https://react.dev/),
|
|
- **Frontend**: [React](https://react.dev/), [Next.js](https://nextjs.org/)
|
|
|
- **Testen**: [Hardhat](https://hardhat.org/)
|
|
- **Testing**: [Hardhat](https://hardhat.org/)
|
|
|
|
- **Tools**: [Thirdweb SDK](https://thirdweb.com/), [Vercel](https://vercel.com/), [CoinGecko API](https://www.coingecko.com/en/api)
|
|
|
|
|
|
|
|
---
|
|
---
|
|
|
|
|
|
| ... | @@ -47,10 +64,10 @@ DEXWeb verwendet die folgenden Technologien: |
... | @@ -47,10 +64,10 @@ DEXWeb verwendet die folgenden Technologien: |
|
|
|
|
|
|
|
### Voraussetzungen
|
|
### Voraussetzungen
|
|
|
|
|
|
|
|
Stelle sicher, dass die folgenden Software-Komponenten installiert sind:
|
|
Stellen Sie sicher, dass die folgenden Software-Komponenten installiert sind:
|
|
|
|
|
|
|
|
- Node.js 18.14.2
|
|
- Node.js (Version 18.14.2 oder höher)
|
|
|
- npm
|
|
- npm (Node Package Manager)
|
|
|
- Yarn (global installiert)
|
|
- Yarn (global installiert)
|
|
|
|
|
|
|
|
### Installation
|
|
### Installation
|
| ... | @@ -60,97 +77,7 @@ Stelle sicher, dass die folgenden Software-Komponenten installiert sind: |
... | @@ -60,97 +77,7 @@ Stelle sicher, dass die folgenden Software-Komponenten installiert sind: |
|
|
```bash
|
|
```bash
|
|
|
git clone https://gitlab.bht-berlin.de/s88999/dexweb.git
|
|
git clone https://gitlab.bht-berlin.de/s88999/dexweb.git
|
|
|
cd dexweb/Frontend/Dexwebapp
|
|
cd dexweb/Frontend/Dexwebapp
|
|
|
```
|
|
|
|
|
2. Abhängigkeiten installieren:
|
|
|
|
|
|
|
|
|
|
```bash
|
|
|
|
|
bash npm install --global yarn
|
|
|
|
|
bash yarn install
|
|
|
|
|
```
|
|
|
|
|
|
|
|
|
|
### Verwendung
|
|
|
|
|
|
|
|
|
|
Um das Projekt lokal auszuführen, folgen Sie diesen Schritten:
|
|
|
|
|
1. _Starten des lokalen Entwicklungsservers:_
|
|
|
|
|
|
|
|
|
|
bash yarn dev
|
|
|
|
|
2. Öffnen Sie Ihren Webbrowser und navigieren Sie zu , um die Anwendung zu verwenden.
|
|
|
|
|
3. _Wallet-Verbindung:_
|
|
|
|
|
- Klicken Sie auf "Verbinden" in der oberen rechten Ecke der Anwendung.
|
|
|
|
|
- Wählen Sie Ihre bevorzugte Wallet aus der Liste aus (z.B. MetaMask).
|
|
|
|
|
- Folgen Sie den Anweisungen, um sich mit Ihrer Wallet zu verbinden.
|
|
|
|
|
4. _Token swapen:_
|
|
|
|
|
- Wählen Sie das Token-Paar aus, das Sie tauschen möchten.
|
|
|
|
|
- Geben Sie den Betrag ein, den Sie tauschen möchten.
|
|
|
|
|
- Klicken Sie auf "Swapen", um den Tausch durchzuführen.
|
|
|
|
|
- Folgen Sie den Anweisungen in Ihrer Wallet, um den Tausch zu bestätigen.
|
|
|
|
|
|
|
|
|
|
---
|
|
|
|
|
|
|
|
|
|
## Smart Contracts
|
|
|
|
|
|
|
|
|
|
### Übersicht
|
|
|
|
|
|
|
|
|
|
Die Haupt-Smart Contracts für DEXWeb befinden sich im `contracts` Verzeichnis und sind in Solidity geschrieben. Der primäre Vertrag ist `DEXWeb.sol`, der die Hauptlogik für den Austausch von Kryptowährungen enthält.
|
|
|
|
|
|
|
|
|
|
### DEXWeb.sol
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
---
|
|
|
|
|
|
|
|
|
|
## **Frontend-Entwicklung**
|
|
2. Abhängigkeiten installieren:
|
|
|
|
|
|
|
|
Das Frontend von DEXWeb ist mit React und thirdweb gebaut und befindet sich im **`frontend`** Verzeichnis.
|
|
|
|
|
|
|
|
|
|
### **Hauptkomponenten**
|
|
|
|
|
|
|
|
|
|
* **Pages**: Die Hauptkomponente, die die Anwendung rendert.
|
|
|
|
|
* **components/**: Enthält wiederverwendbare UI-Komponenten.
|
|
|
|
|
|
|
|
|
|
### Beispielcode für thirdweb-integration
|
|
|
|
|
|
|
|
|
|
```plaintext
|
|
|
|
|
|
|
|
|
|
```
|
|
|
|
|
# Smart Contract Dokumentationsprozess
|
|
|
|
|
|
|
|
|
|
## Überblick
|
|
|
|
|
|
|
|
|
|
Dieser Prozess beschreibt die Erstellung einer umfassenden Dokumentation für einen Smart Contract, von der Generierung der JSON-Dokumentation bis zur Darstellung als Webseite.
|
|
|
|
|
|
|
|
|
|
## Erstellung der JSON-Dokumentation
|
|
|
|
|
|
|
|
|
|
- Verwendung des Solidity-Compilers (solc) zur Generierung einer JSON-Ausgabe des Smart Contracts.
|
|
|
|
|
- Konfiguration der Compiler-Einstellungen für die Ausgabe von ABI, Bytecode, Methoden-Identifikatoren, Metadaten sowie User- und Developer-Dokumentation.
|
|
|
|
|
- Ergebnis: solc-output.json mit detaillierten Informationen über den Contract.
|
|
|
|
|
|
|
|
|
|
## Umwandlung von JSON zu Markdown
|
|
|
|
|
|
|
|
|
|
- Erstellung eines Node.js-Skripts zur Umwandlung der JSON-Ausgabe in eine Markdown-Datei.
|
|
|
|
|
- Das Skript liest solc-output.json und extrahiert relevante Informationen.
|
|
|
|
|
- Generierung von strukturiertem Markdown-Text, der Folgendes enthält:
|
|
|
|
|
- Benutzer-Dokumentation (Methoden, Beschreibungen, Parameter, Rückgabewerte)
|
|
|
|
|
- Entwickler-Dokumentation (Fehler, Events, detaillierte Methodenbeschreibungen)
|
|
|
|
|
- Speicherung des generierten Markdown-Textes in Contract.md im docs-Verzeichnis.
|
|
|
|
|
|
|
|
|
|
## Anzeige der Markdown-Datei als Webseite mit MkDocs
|
|
|
|
|
|
|
|
|
|
1. Installation von MkDocs
|
|
|
|
|
2. Projekt erstellen
|
|
|
|
|
3. Konfiguration in mkdocs.yml
|
|
|
|
|
4. Dokumentation hinzufügen: Verschieben der generierten Contract.md in das docs-Verzeichnis
|
|
|
|
|
5. Lokale Vorschau starten
|
|
|
|
|
6. Erstellung der statischen Seite
|
|
|
|
|
7. Optionales Deployment auf GitHub Pages
|
|
|
|
|
|
|
|
|
|
## Vorteile der Verwendung von MkDocs
|
|
|
|
|
|
|
|
|
|
- Einfache Bedienung und Konfiguration
|
|
|
|
|
- Unterstützung von Themes für professionelles Aussehen
|
|
|
|
|
- Integrierte Suchfunktion
|
|
|
|
|
- Verwaltung mehrerer Seiten
|
|
|
|
|
- Einfache Navigation zwischen Dokumenten
|
|
|
|
|
|
|
|
|
|
## Schlussfolgerung
|
|
|
|
|
|
|
|
|
|
Dieser Prozess ermöglicht die Erstellung einer gut strukturierten, lesbaren und wartbaren Dokumentation für Smart Contracts. Die Verwendung von Markdown als Zwischenformat bietet Vorteile bei der Versionskontrolle und Flexibilität bei der Anzeige. MkDocs transformiert die Dokumentation in eine ansprechende, navigierbare Website, die für Entwickler und Benutzer gleichermaßen nützlich ist. |
|
```yarn install |
|
\ No newline at end of file |
|
|
