Erstellen einer Instagram-ähnlichen DApp mit IPFS + Vue.js

Instagram ist eine soziale Plattform, auf der Sie Ihre Fotos und Videos für alle Personen freigeben können, mit denen Sie verbunden sind.

Stellen Sie sich nun vor, Sie erstellen eine eigene soziale Plattform wie Instagram. Eine Instagram-ähnliche DApp, die auf der Blockchain-Technologie basiert.

Was wir versuchen zu bauen

In diesem Tutorial werden wir eine Instagram-ähnliche Plattform erstellen, die in beide Technologien integriert ist: InterPlanetary File System IPFS und Ethereum Blockchain. Diese beiden sind aufgrund ihrer ähnlichen Natur seit einiger Zeit eng miteinander verbunden und dezentralisieren die Daten. Und damit, wenn sie eine dezentrale App erstellen, synergetisieren sie ziemlich gut. Sie werden dies später verstehen, wenn Sie das Tutorial lesen.

Außerdem werden wir Vue.js für das Front-End der Anwendung verwenden. Wir werden nicht viel über dieses Tool diskutieren, da ich nicht möchte, dass Sie auf die Idee kommen, dass es nur Vue.js sein sollte. Es gibt viele verfügbare Front-End-Sprachen, die Sie zum Erstellen dieser App verwenden können.

Funktionsliste

  1. Daten hochladen (POST-Image in IPFS)
  2. Daten abrufen (GET-Image von IPFS)

Werkzeuge

  1. Smart Contract Solidity, Remix, Metamask
  2. Frontend Web3.js, ipfs-http-client Vue.js, Vue-cli, Boostrap-vue

Der Inhalt sollte im Voraus gelesen werden

  1. Bereitstellung in Remix und Verwendung von Metamask
  2. Grundfestigkeit

Github

Wenn Sie nur den Code erhalten möchten, können Sie ihn hier herunterladen: https://github.com/openberry-ac/instagram

Warum IPFS?

Grundsätzlich ist das InterPlanetary File System ein Peer-to-Peer-Dateisystem zum Speichern und Freigeben. Mit IPFS können Sie Dateien wie Text, Bilder und sogar Videos hochladen.

In zentralisierten Speichern können Sie nur Daten von ihren Servern abrufen, und die Geschwindigkeit dieser Übertragung hängt von der Entfernung zwischen Ihnen und diesem Server ab. Im Gegensatz zu einem Peer-to-Peer-Speicher wie IPFS können Sie die Daten jedoch von jedem abrufen, der genau die Daten hat, die Sie benötigen, sodass die Übertragung viel schneller ist.

IPFS verwendet inhaltsadressierbare Hashes, um zu überprüfen, ob die erhaltenen Daten korrekt sind, da alle Daten ihren eigenen eindeutigen Hashwert haben.

# Ein Beispiel für die eindeutige Hash-ID einer Datei: Qmf7bwqcd4BD7ohtkCBQvHu1BGMc8wMSP2nrLxsTBLDP4t

Wenn Sie also eine Datei in IPFS hochladen, erhalten Sie die eindeutige Hash-ID der Daten als Rückgabe. Anschließend können Sie sie abrufen, indem Sie denselben Hash über ein Gateway verwenden. So einfach ist das.

# Gateway: https://ipfs.io/ipfs/ # Abrufen: Gateway + eindeutige Hash-ID https://ipfs.io/ipfs/ + Qmf7bwqcd4BD7ohtkCBQvHu1BGMc8wMSP2nrLxsTBLDP4t

Probieren Sie dieses aus! https://ipfs.io/ipfs/Qmf7bwqcd4BD7ohtkCBQvHu1BGMc8wMSP2nrLxsTBLDP4t

Baue das Projekt!

Arbeitsablauf

  • Schreiben Sie unseren Smart Contract
  • Festlegen von Web3.js, Vertragsinstanz und IPFS
  • Benutzerkonto abrufen
  • Daten in IPFS buchen
  • Daten aus IPFS abrufen

Schreiben Sie unseren Smart Contract

Bei der Erstellung dieses Vertrags verwenden wir Solidity.

Solidity ist eine objektorientierte Hochsprache für die Implementierung intelligenter Verträge. https://solidity.readthedocs.io/en/v0.5.3/

Hier ist die Funktion, die in unserem Vertrag enthalten sein wird:

  • sendHash (_imgHash, _textHash) - sendet die Bild- und Text-Hashes und speichert sie.
  • getCounter () - Ruft die Gesamtzahl der bereits gespeicherten Beiträge ab.
  • getHash (_index) - Ruft die Bild- und Text-Hashes unter Verwendung einer Indexnummer ab.

Wir werden unseren Vertrag InstagramPosting.sol nennen und die neueste und stabile Version von Solidity, Version 0.5.3, verwenden. Außerdem haben wir die SafeMath-Bibliothek für sichere mathematische Operationen importiert.

In diesem Codeausschnitt haben wir eine Struktur mit dem Namen Post erstellt. Dies enthält die Daten: owner, imgHash und textHash, die zum Speichern der Post-Daten verwendet werden.

  • Eigentümer (Adresse) - Die Adresse des Eigentümers der Post.
  • imgHash (Zeichenfolge) - die Hashes von Bildern, die in IPFS gespeichert sind.
  • textHash (Zeichenfolge) - Die Hashes der in IPFS gespeicherten Bildunterschriften.

Dann haben wir eine öffentliche Zuordnung für Post deklariert. Wir haben ein Mapping mit dem Namen posts erstellt, um die Daten mit uint256 als Schlüsselreferenz aufzulisten und zu speichern. Zuletzt haben wir ein uint256 mit dem Namen postCtr erstellt, um es innerhalb der Posts-Zuordnung zu durchlaufen.

Als nächstes wird die sendHash-Funktion verwendet. Hier werden die aus einem IPFS-Upload abgerufenen Bild- und Text-Hashes gesendet (wie in den Parametern _img und _text zu sehen) und gespeichert. Erhöhen Sie vor dem Speichern zunächst die Variable postCtr mit der Funktion add () von SafeMath um 1, um einen Überlauf zu vermeiden, und legen Sie sie als neue Indexreferenz des Beitrags fest. Danach wird der msg.sender, der sich auf die Adresse des Absenders bezieht, als Eigentümer des Beitrags gespeichert, gefolgt vom Speichern der beiden Hashes in imgHash und textHash.

Im letzten Teil sehen wir die Ausgabe NewPost (), dies bezieht sich auf das Ereignis über der Funktion. Es ist ein Ereignisbeobachter, der die Webanwendung benachrichtigt, wenn die Funktionstransaktion sendHash () abgeschlossen ist.

Die Sendefunktion ist abgeschlossen. Jetzt erstellen wir eine Funktion, die sie abruft.

Wie Sie sehen würden, spielt getCounter () eine Rolle beim Abrufen eines Hashs, da es die Anzahl der gesamten Beiträge basierend auf der postCtr-Variablen zurückgibt.

Für die Funktion getHash () können wir durch einfaches Auswählen einer Indexnummer (wie im Parameter _index zu sehen) im Bereich des von getCounter () zurückgegebenen Werts nach innen gehen und unseren gewünschten Beitrag erhalten. Die Rückgabedaten sind img, text und owner und werden jeweils durch die Posts gefüllt, die dem ausgewählten Index zugeordnet sind.

InstagramPosting.sol

Festlegen von Web3.js, Vertragsinstanz und IPFS

Für dieses Tutorial wird ein Vorlagenprojekt mit Frontend bereitgestellt, das Sie verwenden können, während Sie diesem Tutorial folgen. Sie können das Projekt klonen:

# git klone die Projektvorlage git clone -b boilerplate --single-branch https://github.com/openberry-ac/instagram.git
# gehe zum Ordner cd instagram
# Installieren Sie die in der Webanwendung npm install benötigten Pakete

Installieren Sie mithilfe der bereitgestellten Vorlage im Stammordner die Pakete (web3 und ipfs-http-client):

# web3 installieren npm install -s [email protected]
# installiere ipfs-http-client npm installiere -s ipfs-http-client
# Webanwendung ausführen npm run dev

Wenn Sie die App ausführen, sollte die Seite folgendermaßen aussehen.

Gehen wir nun in web3.js in den Vertragsordner. Hier richten wir unser web3 ein und initialisieren es, indem wir das web3-Paket mit dem Namen Web3 importieren und dann eine konstante Variable mit dem Namen web3 deklarieren und Web3 darauf instanziieren.

Der Code sollte folgendermaßen aussehen:

web3.js

Wir haben web3.js erfolgreich erstellt. Gehen Sie nun zurück zu Ihrem Browser und aktualisieren Sie die Seite. Sie müssen auf Verbindungsanforderung in Metamask umgeleitet werden.

Klicken Sie auf VERBINDEN, und Ihr Vertrag ist jetzt mit dem Ethereum-Netzwerk verbunden.

Anschließend erstellen wir in contractInstance.js, das sich ebenfalls im Vertragsordner befindet, eine Instanz unseres Vertrags mithilfe des ABI und deklarieren die Vertragsadresse.

Um den Smart-Vertrag auf Ethereum zu verbinden, werden ABI und seine Vertragsadresse benötigt.

Klicken Sie dann unter Remix auf der Registerkarte Ausführen in der Liste der bereitgestellten Verträge auf die Schaltfläche Kopieren neben dem gewünschten Vertrag, um die Vertragsadresse abzurufen.

Deklarieren Sie es dann in contractInstance.js auch für eine konstante Variable mit dem Namen address

Kehren Sie erneut zu Remix zurück, wechseln Sie zur Registerkarte Kompilieren und kopieren Sie ABI, indem Sie auf die Schaltfläche klicken.

Fügen Sie es nun in unsere contractInstance.js ein, indem Sie es für eine konstante Variable mit dem Namen abi deklarieren.

contractInstance.js sollte so aussehen, mit Ihrer kopierten Adresse und abi.

Jetzt können Sie sich mit dem Vertrag verbinden.

Um nun eine Verbindung zu IPFS herzustellen, gehen Sie zu ipfs.js, das sich ebenfalls im Vertragsordner befindet, importieren Sie dann ipfs-http-client und nennen Sie es IPFS. Instanziieren Sie dann IPFS in einer konstanten Variablen, ipfs, um eine Verbindung zum infura-Gateway herzustellen. Wir werden das Gateway von infura verwenden, um Daten in IPFS zu veröffentlichen und abzurufen.

ipfs.js

Nachdem wir mit der Instanziierung von IPFS fertig sind, müssen wir den Vertrag in main.js deklarieren, damit wir die Funktionen in unserem Smart-Vertrag aufrufen können.

main.js

Wir müssen die Vertragsinstanz deklarieren, die oben bereits importiert wurde. Fügen Sie also den Vertrag in die Daten ein, um die Vertragsinstanz zu deklarieren. Damit können wir Methoden aus unserem implementierten Smart Contract aufrufen.

Schließlich sind wir mit der Einrichtung von Web3, Vertrag und IPFS fertig. Jetzt ist es Zeit zu lernen, wie man Daten in IPFS veröffentlicht und abruft.

Daten in IPFS buchen

Zunächst lernen Sie, wie Sie die Daten in IPFS veröffentlichen. Bevor wir dies tun können, müssen wir zuerst die Brieftaschenadresse des Benutzers abrufen und festlegen. In main.js erstellen wir innerhalb von Methoden eine asynchrone Funktion namens updateAccount (), um das aktuelle Konto abzurufen, das in der Metamask verwendet wird.

Lassen Sie uns nun lernen, wie wir Beiträge in die Ethereum Blockchain und das IPFS hochladen können. Öffnen wir zunächst die App.vue, die im Ordner src angezeigt wird.

Wir werden nur innerhalb des Skript-Tags arbeiten, jetzt unter Methoden, ist die leere asynchrone Funktion onSubmit (), die in der Funktion handleOk () aufgerufen wird und prüft, ob die Eingabe nicht leer ist. Die Funktion onSubmit () sendet eine Datei an IPFS und die abgerufenen Hashes werden an unseren Vertrag gesendet.

Wir benötigen auch eine Funktion, die die Auswahl der Datei übernimmt und sie in Puffer konvertiert, und eine Funktion, die die konvertierte Datei in Puffer zurückgibt. Dies kann in captureFile () erfolgen.

und um den Code sauberer zu machen, haben wir die Funktion convertToBuffer () für die Konvertierung von Dateien in Puffer erstellt.

Ok, lassen Sie uns einen Kontrollpunkt darüber geben, was wir bisher getan haben. In diesem Teil des Tutorials geht es um das Hochladen von Bildern in das IPFS. Versuchen wir also, es hochzuladen und zu überprüfen, ob es wirklich im IPFS gespeichert ist.

Fügen Sie jedoch vor dem Hochladen ein Konsolenprotokoll hinzu, um den Hash des Bildes zu überprüfen, das in das IPFS hochgeladen werden soll. Fügen Sie in der Funktion onSubmit () den Logger hinzu, nachdem wir den Image-Hash von ipfs erhalten haben und bevor wir den Wert zurückgeben. Dieser Teil des Codes sollte folgendermaßen aussehen:

Hinweis: Sie können die console.log () nach diesem Prüfpunkt löschen.

Laden Sie nun ein Bild auf unsere Seite hoch und aktivieren Sie "imgHash" in der Browserkonsole.

Verwenden Sie, wie oben erwähnt, diese URL, um zu überprüfen, ob das Bild in IPFS hochgeladen wurde:

https://ipfs.io/ipfs/ + imgHash

Daten aus IPFS abrufen

Wir möchten unser hochgeladenes Bild nicht immer unter https://ipfs.io/ipfs/ überprüfen. Wir möchten es auf unserer Seite anzeigen. Dazu müssen wir in der Datei main.js in der asynchronen Funktion getPosts () die Bilder in IPFS abrufen. So gehen wir vor:

In Ordung! Wir sind mit allem fertig. Dies sollte die Ausgabe sein:

Wenn Sie den vollständigen Code dieses Tutorials wünschen, können Sie ihn hier überprüfen: https://github.com/openberry-ac/instagram

Zusammenfassung

Sie haben gerade Ihre eigene Instagram-Webanwendung erstellt, die in IPFS und Ethereum integriert ist! Sie haben großartige Arbeit geleistet, um so weit zu kommen. Sie können dies Ihren Entwicklerfreunden voll und ganz zeigen!

In diesem Tutorial haben Sie gelernt, wie Sie Dateien aus IPFS senden und abrufen und wie Sie eine Verbindung damit herstellen. Außerdem haben Sie gelernt, wie Sie mit Ihrem Smart-Vertrag interagieren, indem Sie eine Verbindung zu Web3 herstellen. Mann, du hast einen langen Weg zurückgelegt und es gehört dir!

Ich bin jetzt stolz:

Für Ihren nächsten Schritt möchten Sie möglicherweise mehr über IPFS und Solidity erfahren. Es gibt so viel mehr, was Sie aus diesen Technologien lernen und tun können. Klicken Sie also auf die Links, die ich gerade gegeben habe!

Sie können diesem von Ihnen erstellten Projekt auch weitere Funktionen hinzufügen und Ihre eigene dezentrale Live-Instagram-ähnliche Anwendung bereitstellen, Ihren Anruf!

Na dann, bis zum nächsten Tutorial!

Wenn Sie sich für folgende Themen interessieren:

  • Staatsverwaltung
  • Seitenweiterleitung

Lass es uns wissen, indem du klatschst.

openberry ist ein Tutorial-Marktplatz, auf dem jeder die Blockchain-Programmierung erlernen kann.