3.2 Wie passt „Dfinity Frontend“ das Frontend für Ihr Dapp an? (Reagieren+JSX)
Schritt:
ein neues Projekt erstellen
Erstellen Sie ein neues Projekt und verschieben Sie das aktuelle Verzeichnis des Befehlsterminals in das Stammverzeichnis des Projekts.
Installieren Sie das React-Framework für das Projekt
- Installieren Sie das React-Modul, indem Sie Folgendes ausführen:
npm install --save react react-dom
- Installieren Sie den erforderlichen Compiler-Loader für die TypeScript-Sprache, indem Sie Folgendes ausführen:
npm install --save-dev typescript ts-loader
- Installieren Sie die erforderlichen CSS-Loader, indem Sie Folgendes ausführen:
npm install --save-dev style-loader css-loader
Wenn npm installder Befehl eine Schwachstelle meldet, möchten Sie möglicherweise auch den Befehl ausführen, npm audit fixum zu versuchen, die gemeldete Schwachstelle zu beheben, bevor Sie fortfahren.
| NOTIZ |
Alternativ zur Installation dieser Module können Sie die Standarddatei bearbeiten, package.jsonum die Abhängigkeiten des Projekts hinzuzufügen |
{
"name": "contacts_assets",
"version": "0.1.0",
"description": "",
"keywords": [],
"scripts": {
"build": "webpack"
},
"devDependencies": {
"assert": "2.0.0",
"buffer": "6.0.3",
"css-loader": "^5.2.1",
"events": "3.3.0",
"html-webpack-plugin": "5.3.1",
"process": "0.11.10",
"stream-browserify": "3.0.0",
"style-loader": "^2.0.0",
"terser-webpack-plugin": "5.1.1",
"ts-loader": "^8.1.0",
"typescript": "^4.2.4",
"util": "0.12.3",
"webpack-cli": "4.5.0",
"webpack": "5.24.4"
},
"dependencies": {
"@dfinity/agent": "0.10.0",
"@dfinity/candid": "0.10.0",
"@dfinity/principal": "0.10.0",
"react-dom": "^17.0.2",
"react": "^17.0.2"
}
}
Die Version des JavaScript-Agenten in dieser Beispieldatei package.json ist 0.10.0. In den meisten Fällen möchten Sie jedoch die neueste verfügbare Version des Agenten verwenden. Wenn Sie ein neues Projekt erstellen, dfx newruft der Befehl automatisch die neueste Version des JavaScript-Agenten für Sie ab. npm install --save @dfinity/agentSie können die neueste Version auch manuell abrufen , indem Sie den Befehl nach dem Erstellen des Projekts ausführen .
Standardprogramm ändern
1. Öffnen Sie die Datei in einem Texteditor src/contacts/main.mound löschen Sie den vorhandenen Inhalt.
2. Kopieren Sie den folgenden Beispielcode und fügen Sie ihn in die Datei ein:
import List "mo:base/List";
import AssocList "mo:base/AssocList";
actor Contact {
var contacts : ContactsMap = List.nil();
type Name = Text;
type Phone = Nat;
type Entry = {
name : Name;
address1 : Text;
address2 : Text;
email : Text;
phone : Phone;
};
type ContactsMap = AssocList.AssocList<Name, Entry>;
func nameEq(lhs : Name, rhs : Name) : Bool {
return lhs == rhs;
};
public func insert(name : Name, address1 : Text, address2 : Text, email : Text, phone : Phone) : async () {
let newEntry : Entry = {
name;
address1;
address2;
email;
phone;
};
let (newContacts, _) = AssocList.replace(
contacts,
name,
func(n: Name, m: Name) : Bool {
n == m },
?newEntry
);
contacts := newContacts;
};
public query func lookup(name : Name) : async ?Entry {
return AssocList.find(contacts, name, nameEq);
};
};
3. Speichern Sie Ihre Änderungen und schließen Sie die Datei main.mo, um fortzufahren.
Ändern Sie die Frontend-Datei
Jetzt ist es an der Zeit, ein neues Frontend für das Programm zu erstellen.
1. Öffnen Sie die Webpack-Konfigurationsdatei () in einem Texteditor webpack.config.js.
2. Ändern Sie den Front-End-Eintrag und ersetzen Sie die Standarddatei index.html durch index.jsx.
entry: {
// The frontend.entrypoint points to the HTML file for this build, so we need
// to replace the extension to `.js`.
index: path.join(__dirname, asset_entry).replace(/\.html$/, ".jsx"),
},
3. Suchen Sie moduledas Kommentarbeispiel des Schlüssels über dem Plug-Abschnitt und kommentieren Sie die folgenden Zeilen aus:
module: {
rules: [
{
test: /\.(js|ts)x?$/, loader: "ts-loader" },
{
test: /\.css$/, use: ['style-loader','css-loader'] }
]
},
4. Mit diesen Einstellungen kann Ihr Programm den Compiler verwenden ts-loaderund CSS-Dateien importieren.
HINWEIS: Wenn Sie Unterstützung für .scss- oder .sass-Dateien hinzufügen möchten, sollten Sie Folgendes installieren sass-loader:
npm install --save react react-dom
Fügen Sie dann diese zusätzliche Regel unterhalb der Regel in webpack.config.jshinzu :css-loader
module: {
rules: [
// ...
{
test: /\.s[ac]ss$/i,
use: [
// Creates `style` nodes from JS strings
"style-loader",
// Translates CSS into CommonJS
"css-loader",
// Compiles Sass to CSS
"sass-loader",
],
},
]
},
5. Speichern Sie die Änderungen und schließen Sie webpack.config.jsdie Datei, um fortzufahren.
6. Erstellen Sie eine neue Datei mit dem Namen im Stammverzeichnis des Projekts tsconfig.json.
7. Öffnen Sie die Datei in einem Texteditor tsconfig.json, kopieren Sie dann Folgendes und fügen Sie es in die Datei ein:
{
"compilerOptions": {
"target": "es2018", /* Specify ECMAScript target version: 'ES3' (default), 'ES5', 'ES2015', 'ES2016', 'ES2017', 'ES2018', 'ES2019' or 'ESNEXT'. */
"lib": ["ES2018", "DOM"], /* Specify library files to be included in the compilation. */
"allowJs": true, /* Allow javascript files to be compiled. */
"jsx": "react", /* Specify JSX code generation: 'preserve', 'react-native', or 'react'. */
},
"include": ["src/**/*"],
}
8. Speichern Sie die Änderungen und schließen Sie tsconfig.jsondie Datei, um fortzufahren.
Fügen Sie dem Projekt ein Stylesheet hinzu
Nun kann ein neues Cascading Stylesheet erstellt und dem Projekt hinzugefügt werden.
1. Wechseln Sie in src/contacts _ assets/assetsdas Verzeichnis.
2. Öffnen Sie die Datei in einem Texteditor main.cssund löschen Sie den vorhandenen Inhalt.
3. Definieren Sie einige Stilattribute für das Frontend. Kopieren Sie beispielsweise die folgenden Stile und fügen Sie sie in die Datei ein:
html {
background-color: bisque;
}
body {
font-family: Arial, Helvetica, sans-serif;
display: block;
margin: 10px;
}
h1 {
color: darkblue;
font-size: 32px;
}
div.new-entry {
margin: 30px 20px 30px 20px;
}
.new-entry > div {
margin-bottom: 15px;
}
table {
margin-top: 12px;
border-top: 1px solid darkblue;
border-bottom: 1px solid darkblue;
}
#form {
margin: 30px 0 30px 20px;
}
button {
line-height: 20px;
}
#lookupName {
margin-right: 12px;
}
4. Speichern Sie die Änderungen und schließen Sie die Datei main.css. Benennen Sie sie in mycontacts.css um, um fortzufahren.
5. Wechseln Sie in src/contacts _ assets/srcdas Verzeichnis.
cd ../src
6. Öffnen Sie die Standarddatei in einem Texteditor index.jsund löschen Sie den vorhandenen Inhalt.
7. Kopieren Sie den folgenden Beispielcode und fügen Sie ihn in index.jsdie Datei ein:
import * as React from "react";
import { render } from "react-dom";
import { contacts } from "../../declarations/contacts";
import "../assets/mycontacts.css";
const Contact = () => {
async function doInsert() {
let name = document.getElementById("newEntryName").value;
let add1 = document.getElementById("newEntryAddress1").value;
let add2 = document.getElementById("newEntryAddress2").value;
let email = document.getElementById("newEntryEmail").value;
let phone = document.getElementById("newEntryPhone").value;
contacts.insert(name, add1, add2, email, parseInt(phone, 10));
}
async function lookup() {
let name = document.getElementById("lookupName").value;
contacts.lookup(name).then((opt_entry) => {
let entry;
if (opt_entry.length == 0) {
entry = { name: "", description: "", phone: "" };
} else {
entry = opt_entry[0];
}
document.getElementById("newEntryName").value = entry.name;
document.getElementById("newEntryAddress1").value = entry.address1;
document.getElementById("newEntryAddress2").value = entry.address2;
document.getElementById("newEntryEmail").value = entry.email;
document.getElementById("newEntryPhone").value = entry.phone.toString();
});
}
return (
<div className="new-entry">
<h1>My Contacts</h1>
<div>
Add or update contact information:
<form id="contact">
<table>
<tbody>
<tr>
<td>Name:</td>
<td>
<input id="newEntryName"></input>
</td>
</tr>
<tr>
<td>Address 1 (street):</td>
<td>
<input id="newEntryAddress1"></input>
</td>
</tr>
<tr>
<td>Address 2 (city and state):</td>
<td>
<input id="newEntryAddress2"></input>
</td>
</tr>
<tr>
<td>Email:</td>
<td>
<input id="newEntryEmail"></input>
</td>
</tr>
<tr>
<td>Phone:</td>
<td>
<input id="newEntryPhone" type="number"></input>
</td>
</tr>
</tbody>
</table>
</form>
</div>
<div>
<button onClick={() => doInsert()}>Add Contact</button>
</div>
<div>
Lookup name:{" "}
<input id="lookupName" style={
{ lineHeight: "20px" }}></input>
<button onClick={() => lookup()}>Lookup</button>
</div>
</div>
);
};
document.title = "DFINITY CONTACT EXAMPLE";
render(<Contact />, document.getElementById("contacts"));
index.js8. Benennen Sie die geänderte Datei um, indem Sie den folgenden Befehl ausführen index.jsx:
mv index.js index.jsx
9. Öffnen Sie die Standarddatei src/contacts_assets/src/index.htmlin einem Texteditor, löschen Sie main.cssden Link und <div id = "contacts" > </div>aktualisieren Sie den Textinhalt mit .
Zum Beispiel:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width" />
<title>contacts</title>
<base href="/" />
</head>
<body>
<main>
<div id="contacts"></div>
</main>
</body>
</html>
10. Kehren Sie zum Stammverzeichnis des Projektverzeichnisses zurück.
Lokales Netzwerk starten
Starten Sie die Umgebung lokal:
dfx start --background
Registrieren, erstellen und bereitstellen Sie Dapps
So stellen Sie Dapps bereit:
1. Überprüfen Sie ggf., dass Sie sich noch im Stammverzeichnis des Projekts befinden.
2. Registrieren, erstellen und stellen Sie das Dapp bereit, indem Sie die folgenden Befehle ausführen:
dfx deploy
Um JAR-Dateien auf einer Internetcomputer-Blockchain bereitzustellen, müssen Sie mit der Befehlszeilenoption --network angeben, dass Sie die Bereitstellung auf einem Internetcomputer statt in Ihrer lokalen Umgebung durchführen:
dfx deploy --network=ic
PS: Nach der Bereitstellung können Sie direkt über das Prinzip des Asset-Kanisters auf das Front-End zugreifen, zum Beispiel: https://6neag-ryaaa-aaaai-qfikq-cai.raw.ic0.app
3. Starten Sie den Webpack-Entwicklungsserver:
npm start
Vorderansicht anzeigen
1. Öffnen Sie Ihren Browser und navigieren Sie zu <a href="http://localhost:8080">http://localhost:8080</a>. (oder http://localhost: 8000
/?canisterId=${Asset-Kanister-ID} unter http://localhost: 8080
/?canisterId=${Asset-Kanister-ID}）
| NOTIZ |
| Es ist zu beachten, dass der Überwachungsport nach der DFX-Bereitstellung 8000 und der Überwachungsport nach dem NPM-Start 8080 ist. Wir können localhost:8080 verwenden, um direkt auf das Frontend des Projekts zuzugreifen, nicht jedoch localhost:8000. Wir müssen später den Parameter canisterId hinzufügen (daraus können wir die Beziehung zwischen den beiden von dfx start und npm start geöffneten Diensten erkennen). |
2. Überprüfen Sie, ob der Inhalt korrekt ist, zum Beispiel:
3. Erstellen Sie einen oder mehrere Testdatensätze, indem Sie Text in die Eingabefelder „Name“, „Adresse“ und „E-Mail“ sowie eine Nummer in das Eingabefeld „Telefon“ eingeben und dann auf „Kontakt hinzufügen“ klicken.
4. Leeren Sie die Formularfelder und geben Sie den Kontaktnamen in das Feld „Namen suchen“ ein. Klicken Sie dann auf „Suchen“, um die gespeicherten Kontaktinformationen anzuzeigen.
Denken Sie daran, dass der von Ihnen eingegebene Suchname genau mit dem Namen des hinzugefügten Kontakts übereinstimmen muss.
Ändern Sie das Stylesheet und testen Sie die Änderungen
Nachdem Sie die DApp „Kontakte“ überprüft haben, müssen Sie möglicherweise einige Änderungen vornehmen. So ändern Sie die Stylesheet-Eigenschaften:
Öffnen Sie die Datei in einem Texteditor src/contacts_assets/assets/mycontacts.cssund ändern Sie ihre Stileinstellungen.
Beispielsweise möchten Sie möglicherweise die Hintergrundfarbe oder den Stil eines Eingabeformulars ändern.
Sie sollten das Update sofort in einem geöffneten Browserfenster sehen.
Ändern Sie den Front-End- oder Back-End-Code
Wenn Sie noch einen Schritt weiter gehen möchten, können Sie versuchen, den Front-End- oder Back-End-Code für dieses Tutorial zu ändern. Sie könnten beispielsweise versuchen, das Tutorial wie folgt zu ändern:
Ändern Sie nach dem Hinzufügen eines neuen Kontakts (z. B. im onClickRahmen einer Veranstaltung) den Frontend-Code, um das Eingabefeld zu leeren.
Die Funktion des Motoko-Programms wurde geändert, um eine Teilübereinstimmung anstelle einer Nameexakten Zeichenfolgenübereinstimmung auf dem Feld durchzuführen. (Sie müssen dfx„Deploy“ ausführen, um Ihre Änderungen in Ihrer lokalen Umgebung zu testen.)
Ändern Sie das Motoko-Programm, um Suchvorgänge basierend auf verschiedenen Feldern zu ermöglichen.
Stoppen Sie die Ausführungsumgebung des lokalen Kanisters
Wenn Sie mit dem Experimentieren mit einem Programm fertig sind, können Sie die lokale Umgebung stoppen, damit sie nicht weiter im Hintergrund ausgeführt wird.
Stoppen Sie die lokale Entwicklungsumgebung:
1. Drücken Sie in einem Terminal, das den Webpack-Entwicklungsserver anzeigt, Strg-C, um den Entwicklungsserver zu unterbrechen.
2. Führen Sie den folgenden Befehl aus, um das Internet-Computernetzwerk zu stoppen:
dfx stop
