Unlimited Plugins, WordPress themes, videos & courses! Unlimited asset downloads! From $16.50/m
Advertisement
  1. Code
  2. Parse

Beginnen Sie mit dem Erstellen Ihres Blogs mit Parse.js: Migration zu Ihrem eigenen Parse-Server

by
Read Time:16 minsLanguages:
This post is part of a series called Building Your Blog with Parse.js.
Get Started Building Your Blog With Parse.js: Categories

German (Deutsch) translation by Władysław Łucyszyn (you can also view the original English article)

Final product imageFinal product imageFinal product image
What You'll Be Creating

Leider wird Parse.com am 28. Januar 2017 geschlossen. In der vorherigen Serie habe ich Sie durch die gesamte Reise des Aufbaus eines Blog-Systems von Grund auf geführt. Aber alles basierte auf Parse.com, und wenn Sie diese Techniken immer noch verwenden, wird Ihre Website bis dahin leider nicht mehr funktionieren.

Wenn Sie Parse.js (wie ich) immer noch mögen und es weiterhin verwenden möchten, gibt es gute Neuigkeiten. Die netten Leute dort haben es Open Source gemacht, damit wir unsere eigene Kopie auf allen gängigen Webhosting-Diensten betreiben können. Dieses Tutorial soll Ihnen helfen, diese Änderung vorzunehmen und von Parse.com zu Ihrem eigenen Parse-Server auf Heroku zu migrieren.

Ich bin kein Experte für Backend, aber das ist der einfachste Weg, den ich gefunden habe. Wenn Sie Fehler sehen und bessere Methoden zum Teilen haben, hinterlassen Sie auf jeden Fall unten einen Kommentar.

Wenn Sie dieser Episode folgen, wird die Servermigration an sich nicht allzu kompliziert. Mit Docker ist es sogar ganz einfach, ein lokales Parse-Dashboard einzurichten, sodass Sie Ihre Daten weiterhin problemlos anzeigen und damit spielen können.

Diese Tutorial-Reihe wurde jedoch basierend auf Version 1.2.19 von Parse.js erstellt; Um eine Verbindung zu einem eigenständigen Parse-Server herzustellen, müssen wir die Anwendung aktualisieren, um Version 1.9.2 auszuführen. Mit Version 1.5.0 hat Parse die Unterstützung für Backbone eingestellt, und das bedeutet, dass wir einige größere Änderungen im Code benötigen. Wir werden Backbone wieder zur Seite hinzufügen und dort eine Mischung aus Parse und Backbone verwenden.

Das ist ein ziemlich langes Intro, aber keine Angst. Möglicherweise müssen Sie während der Migration hier und da ein Debugging durchführen, aber Sie sollten in Ordnung sein. Sie können jederzeit meinen Quellcode überprüfen oder unten einen Kommentar hinterlassen – ich und diese fantastische Community hier werden unser Bestes geben, um Ihnen zu helfen.

Einrichten und Migrieren zu Parse Server

Als erstes beginnen wir mit der Erstellung eines Parse-Servers. Parse hat dies bereits mit einem detaillierten Migrationsleitfaden und einer langen Liste von Beispielanwendungen auf allen gängigen Plattformen wie Heroku, AWS und Azure sehr einfach gemacht.

Ich werde Sie durch die einfachste, die ich kenne, führen: die Heroku + mLab-Kombination. Es ist zunächst kostenlos und Sie können jederzeit für bessere Hardware und mehr Speicherplatz im selben System bezahlen. Die einzige Einschränkung ist, dass die kostenlose Version von Heroku nach 30 Minuten Inaktivität "schlafen" würde. Wenn Benutzer also Ihre Site besuchen, während der Server "schläft", müssen sie möglicherweise einige Sekunden warten, bis der Server aufwacht, bevor sie die Daten sehen können. (Wenn Sie die Demoseite für dieses Projekt überprüfen und keine Blog-Inhalte rendern, ist das der Grund. Geben Sie ihr eine Minute Zeit und aktualisieren Sie sie.)

Dieser Teil basiert weitgehend auf dem Heroku-Leitfaden für die Bereitstellung eines Parse-Servers und dem eigenen Migrationsleitfaden von Parse. Ich habe dort einfach den einfachsten und narrensichersten Weg gewählt.

Schritt 1: Registrieren Sie sich und erstellen Sie eine neue App auf Heroku

Wenn Sie noch kein Heroku-Konto haben, erstellen Sie eines. Es ist eine sehr beliebte Plattform für die Entwicklung und das Hosten kleiner Web-Apps.

Nachdem Sie sich registriert haben, gehen Sie zu Ihrem Heroku-Dashboard und erstellen Sie eine neue App – das ist Ihr Server.

Create new appCreate new appCreate new app

Geben Sie ihm einen Namen, wenn Sie möchten:

Add app nameAdd app nameAdd app name

Schritt 2: mLab MongoDB hinzufügen

Jetzt benötigen Sie eine Datenbank, um die Daten zu speichern. Und fügen wir mLab als Add-on hinzu.

Gehen Sie zu Ressourcen > Add-ons, suchen Sie nach "mLab" und fügen Sie es hinzu:

Add mLab MongoDBAdd mLab MongoDBAdd mLab MongoDB

Sandbox reicht für die Entwicklung aus – Sie können jederzeit ein Upgrade durchführen und mehr bezahlen, um dort mehr Speicherplatz zu erhalten.

Sobald Sie mLab hinzugefügt haben, können Sie den MongoDB-URI davon abrufen.

Gehen Sie in Ihrem Heroku-Dashboard zu Einstellungen > Konfigurationsvariablen und klicken Sie auf Konfigurationsvariablen anzeigen.

Get MONGODB_URIGet MONGODB_URIGet MONGODB_URI

Dort sehen Sie den MongoDB-URI für Ihre Datenbank. Kopieren Sie es, und jetzt können wir mit der Migration der Datenbank beginnen.

Schritt 3: Datenbankmigration

Gehen Sie zu Parse.com und suchen Sie die App, die Sie migrieren möchten. Die Open-Source-Version von Parse Server unterstützt nur eine App pro Server. Wenn Sie also mehrere Apps haben möchten, müssen Sie diesen Vorgang wiederholen und mehrere Server erstellen. Wählen Sie jetzt einfach einen aus.

Gehen Sie in dieser App zu App-Einstellungen > Allgemein > App-Verwaltung und klicken Sie auf Migrieren.

Start MigrateStart MigrateStart Migrate

Fügen Sie dann den gerade kopierten MongoDB-URI ein und beginnen Sie mit der Migration.

Connect MongoDBConnect MongoDBConnect MongoDB

Bald sollten Sie diesen Bildschirm sehen:

Syne DoneSyne DoneSyne Done

Das bedeutet, dass Sie jetzt alle Ihre Daten in Ihrer mLab MongoDB haben sollten. Einfach genug, oder?

Aber stellen Sie Ihre App noch nicht fertig – warten wir, bis wir dieselben Daten von unserem lokalen Parse-Dashboard sehen und damit spielen können, und gehen Sie dann zurück und stellen Sie sie fertig.

Schritt 4: Bereitstellen von Parse-Server

Jetzt, da die Datenbank bereits migriert ist, können wir den Parse-Server bereitstellen.

Wenn Sie noch kein GitHub-Konto haben, erstellen Sie eines. Es ist wahrscheinlich der beliebteste Ort, an dem Leute ihren Code teilen und verwalten.

Forken Sie mit Ihrem GitHub-Konto das offizielle Parse Server-Beispiel-Repository ab.

Fork official Parse Server example repoFork official Parse Server example repoFork official Parse Server example repo

Kehren Sie dann zu Ihrem Heroku-Dashboard zurück. Wählen Sie unter Bereitstellen > Bereitstellungsmethode GitHub aus und stellen Sie eine Verbindung zu Ihrem GitHub-Konto her.

Suchen Sie danach nach parse und suchen Sie Ihr parse-server-example-Repository und stellen Sie eine Verbindung her.

Connect to GitHubConnect to GitHubConnect to GitHub

Wenn alles funktioniert, sollten Sie sehen, dass es wie folgt verbunden ist:

Repo ConnectedRepo ConnectedRepo Connected

Scrollen Sie nun nach unten zum Ende der Seite. Klicken Sie unter Manuelle Bereitstellung auf Zweigstelle bereitstellen.

Deploy BranchDeploy BranchDeploy Branch

Sie sehen, wie Ihr Parse-Server bereitgestellt wird, und bald sehen Sie diesen Bildschirm:

Successfully deployedSuccessfully deployedSuccessfully deployed

Klicken Sie auf die Schaltfläche Anzeigen und Sie sehen diese Seite:

View Server PageView Server PageView Server Page

Das bedeutet, dass Ihr Server jetzt glücklich läuft! Und die URL, die Sie sehen, ist die URL Ihres Servers. Sie werden es später brauchen.

Ich weiß, dass es sich unwirklich anfühlt, diese einfache Zeile zu sehen und zu wissen, dass der Server in Betrieb ist. Aber glauben Sie mir, das Kraftpaket läuft dort. Und Ihre App kann bereits darauf lesen und schreiben.

Wenn Sie dies überprüfen möchten, können Sie Folgendes ausführen:

Einrichten eines lokalen Parse-Dashboards

Wenn Sie ein Befehlszeilen-Ninja sind, wird es Ihnen wahrscheinlich von hier aus gut gehen. Aber wenn Sie wie ich sind und die benutzerfreundliche Oberfläche des Parse-Dashboards genießen, folgen Sie diesem Teil, um Ihr eigenes Parse-Dashboard auf Ihrem lokalen Computer einzurichten, damit Sie Ihre Parse-Daten visuell sehen und damit spielen können, wie Sie es gewohnt sind.

Auch hier können Sie Ihr Dashboard auf verschiedene Arten installieren. Ich werde Ihnen nur den meiner Erfahrung nach einfachsten Weg mit Docker zeigen.

Schritt 1: Docker installieren

Wenn Sie Docker nicht haben, installieren Sie es zuerst (Mac | Windows).

Es packt eine ganze Umgebung in eine Box, sodass Sie nicht dem ziemlich komplizierten lokalen Installations-Tutorial folgen und im Terminal durch die Reifen springen müssen.

Schritt 2: Erstellen Sie das Parse-Dashboard-Image

Klonen Sie bei laufendem Docker das Parse Dashboard-Repository auf Ihren Computer und rufen Sie dieses Repository auf.

Für absolute GitHub-Neulinge laden Sie es einfach als Zip-Datei herunter.

Download Parse Dashboard RepoDownload Parse Dashboard RepoDownload Parse Dashboard Repo

Entpacken Sie es und legen Sie es an einem Ort ab, an den Sie sich erinnern können. Öffnen Sie Ihre Terminal-App, wenn Sie auf einem Mac sind, geben Sie cd ein (dort benötigen Sie ein Leerzeichen nach cd) und ziehen Sie den Ordner hinein.

Drag in unzipped folderDrag in unzipped folderDrag in unzipped folder

Drücken Sie dann die Eingabetaste.

Sie sollten so etwas sehen, und das bedeutet, dass Sie an der richtigen Stelle sind.

Jetzt können Sie schnell überprüfen, ob Ihr Docker korrekt installiert ist, indem Sie diesen Befehl einfügen:

Wenn die Version angezeigt wird, auf der Sie sich befinden, wie folgt:

Es ist installiert und Sie können fortfahren.

Wenn es stattdessen heißt:

Sie müssen überprüfen, ob Sie Docker richtig installiert haben.

Wenn Docker korrekt installiert ist, fügen Sie diesen Befehl ein und drücken Sie die Eingabetaste:

Dadurch wird ein lokales Image für das Parse-Dashboard erstellt (du kannst den Docker-Jargon ignorieren).

Sie werden viele Zeilen beim Scrollen sehen. Keine Panik – geben Sie es einfach eine Weile, und Sie werden sehen, wie es so endet:

Das bedeutet, dass Sie fertig sind – das Image wurde erfolgreich erstellt.

Wenn Sie den Befehl docker images ausführen, sehen Sie ihn dort:

Schritt 3: Parse Dashboard mit Parse Server verbinden

Nun, das ist nur ein Image, und es ist noch kein laufender Server. Wenn es ausgeführt wird, möchten wir, dass es mit dem Parse-Server und der gerade erstellten MongoDB verbunden ist.

Dazu müssen wir zunächst einige Schlüssel in Heroku erstellen, damit es erkennen kann, wem der Zugriff auf die Daten gewährt werden soll.

Gehen Sie zu Ihrem Heroku-Dashboard und gehen Sie erneut zu Einstellungen > Konfigurationsvariablen. Diesmal müssen wir dort zwei Variablen hinzufügen: APP_ID und MASTER_KEY. APP_ID kann alles sein, was man sich leicht merken kann, während MASTER_KEY besser ein wirklich langes und kompliziertes Passwort sein sollte.

Add APP_ID and MASTER_KEYAdd APP_ID and MASTER_KEYAdd APP_ID and MASTER_KEY

Mit diesen Schlüsseln können wir jetzt eine einfache Konfigurationsdatei in das Stammverzeichnis Ihres Parse-Dashboard-Ordners schreiben. Sie können alles von vim bis TextEdit oder Notepad verwenden – das Ziel ist es, eine config.json-Datei im Klartext mit diesem Inhalt zu erstellen:

Und natürlich ersetzen Sie your-app-url durch die Link-URL "View" (die Seite mit der Aufschrift "Ich träume davon, eine Website zu sein"), aber belassen Sie das /parse dort am Ende; ersetzen Sie your-app-id und your-master-key durch die gerade hinzugefügten Konfigurationsvariablen; und geben Sie Ihrer App einen Namen und ersetzen Sie your-app-name damit.

Speichern Sie die Datei und führen Sie den Befehl ls im Terminal aus, um sicherzustellen, dass Sie die Datei config.json an der richtigen Stelle platzieren.

Wenn Sie config.json in dieser Liste sehen, können Sie fortfahren.

Führen Sie nun den Befehl pwd aus, um den Ort zu erhalten, an dem Sie sich befinden:

Kopieren Sie diesen Pfad.

Fügen Sie dann diesen Befehl ein, um einen Docker-Container zu erstellen (auch hier können Sie diesen Jargon ignorieren) und führen Sie Ihr Parse-Dashboard aus. Denken Sie daran, meinen Pfad durch den Pfad zu ersetzen, den Sie gerade erhalten haben.

Von oben nach unten führt dieser Befehl diese Dinge aus (die Sie auch ignorieren können):

Wenn alles durchläuft, wird eine lange Zeichenfolge ohne Fehlermeldung an Sie zurückgegeben. So was:

Und jetzt läuft Ihr Parse-Dashboard! Schau es dir unter http://localhost:8080/ an.

Es kann langsam sein und anfangs eine leere Seite anzeigen, aber geben Sie ihm einfach ein paar Minuten und Sie sehen einen Anmeldebildschirm:

Local Parse Dashboard LoginLocal Parse Dashboard LoginLocal Parse Dashboard Login

Jetzt können Sie sich mit user als Benutzernamen anmelden und pass als Passwort übergeben – es ist in der config.json definiert, falls Sie es nicht früher bemerkt haben. Sie können sie auch nach Belieben ändern.

Und Sie werden diese vertraute Benutzeroberfläche von Ihrem lokalen Computer aus sehen und mit Ihren Daten (jetzt in mLab MongoDB) spielen, wie Sie es immer tun.

Local Parse DashboardLocal Parse DashboardLocal Parse Dashboard

Ein paar abschließende Anmerkungen zu diesem lokalen Dashboard:

Erstens können Sie diesen Container von nun an jederzeit mit diesen beiden Befehlen stoppen und starten:

Wenn Sie also Ihren Computer neu starten, müssen Sie die vorherigen Schritte nicht erneut ausführen, sondern sagen Sie ihm einfach, dass er neu starten soll.

Und zweitens müssen Sie nicht mehrere Parse-Dashboards erstellen, wenn Sie über mehrere Parse-Server verfügen. Fügen Sie einfach mehrere Apps in der config.json wie folgt hinzu:

Jedes Mal, wenn Sie Änderungen an config.json vornehmen, müssen Sie den Docker-Container neu starten:

Und dann sehen Sie die vorgenommenen Änderungen.

Schritt 4: Migration abschließen

Spielen Sie jetzt mit Ihrem neuen Parse-Dashboard, und wenn alles funktioniert, können Sie jetzt zu Parse.com zurückkehren und die Migration abschließen.

Finalize migrationFinalize migrationFinalize migration

Wenn Sie dann Ihre Anwendungen und Ihr Dashboard überprüfen, werden Sie feststellen, dass sie alle ohne Probleme auf magische Weise auf Ihren neuen Server verweisen.

Aktualisieren Sie den Code für die Ausführung auf Parse 1.9.2 Run

Das ist toll! Ich wünschte, es könnte so bleiben und wir könnten dieses Tutorial früher beenden. Aber wie bereits erwähnt, verlässt sich Ihre alte Parse.js-App immer noch auf Parse.com-Server, um sie auf den richtigen neuen Server zu verweisen. Und es wird nach dem 28. Januar 2017 nicht mehr funktionieren.

Damit es für immer läuft (Daumen drücken), müssen wir aufhören, die JavaScript-Schlüssel zu verwenden, um auf die App zu verweisen (die auf Parse.com angewiesen ist, um herauszufinden, auf welche Datenbank wir verweisen sollen) und direkt auf unseren Parse-Server verweisen.

Schritt 1: Aktualisieren Sie die JavaScript-Bibliotheken

Lassen Sie uns zunächst die Datei Parse.js aktualisieren, die wir in index.html verwenden.

Anstatt die Version 1.2.19 zu verwenden:

Wechseln Sie auf die neueste Version:

Außerdem fügen wir Lodash und Backbone hinzu. Da Parse Backbone nicht mehr unterstützt, müssen wir es einschließen, um die Ansichten und den Router weiterhin verwenden zu können.

Schritt 2: Zeigen Sie auf Ihren Parse-Server

Dann gehen wir zu site.js.

Als erstes müssen Sie die Funktion Parse.initialize() aktualisieren, sodass sie auf Ihren eigenen Parse-Server verweist.

Vorher kann es so aussehen:

Zeigen Sie es nun auf Ihren Parse-Server.

Schritt 3: Von der Reaktion zum Rückgrat

Lassen Sie uns als nächstes ein kurzes Update durchführen, um alle Parse.View, Parse.Router und Parse.history in Backbone.View, Backbone.Router und Backbone.history zu ändern. Diese werden von Parse nicht mehr unterstützt, daher benötigen wir einen Fallback.

Es ist nicht die angenehmste Sache der Welt, Class auf diese Weise zu kombinieren, aber wenn Sie die geringsten Änderungen an Ihrem Code vornehmen und ihn ausführen möchten, ist dies möglicherweise der einfachste Weg.

Schritt 4: Von der Sammlung zur Abfrage; Vom fetch bis zum find

Eine andere Sache, die Parse nicht mehr unterstützt, ist Collection. Und es ist viel dorniger als die anderen drei. Der Wechsel von Parse.Collection zu Backbone.Collection funktioniert nicht. Wir müssen die Logik mit Parse-Abfragen neu schreiben.

Ich werde die Blogs-Sammlung als Beispiel verwenden, um Ihnen zu zeigen, wie wir unseren Blog aktualisieren können, damit er mit dem neuen Parse.js funktioniert.

Zuvor haben wir zuerst eine Class für Blogs definiert:

Und dann haben wir in der Funktion BlogRouter.start() eine Instanz dieser Klasse erstellt, die die Sammlung von Blöcken enthält.

Danach rufen wir fetch() für diese Sammlung auf, um Blog-Daten abzurufen. Wie in BlogRouter.index():

Jetzt können wir diese Klassendeklaration einfach löschen und BlogRouter.blogs zu einer Parse-Abfrage machen:

Und wenn wir es aufrufen, verwenden wir anstelle von fetch() find().

Dieser Teil kann eine Weile dauern, da wir für diese Serie einige verschiedene Anwendungsfälle haben. Möglicherweise müssen Sie ein wenig debuggen – zu diesem Zeitpunkt wird die Seite noch nicht richtig gerendert, selbst wenn die Daten korrekt abgerufen werden. Wenn Sie es vorziehen, Dinge beim Reparieren gerendert zu sehen, lesen Sie sie bis zum Ende durch und beginnen Sie dann mit der Änderung Ihres Codes und dem Debuggen.

Schritt 5: Überprüfen Sie die Ansichtsobjekte

Wenn alle Daten korrekt abgerufen werden, müssen Sie als Nächstes die Daten überprüfen, die Sie an Ihre View-Objekte übergeben.

Zuvor konnten wir alles, was wir wollten, an ein View-Objekt übergeben. In diesem Beispiel haben wir den username direkt an blogsAdminView übergeben, damit wir Benutzer mit ihrem Benutzernamen begrüßen können.

Dies würde auch nicht mehr funktionieren, wenn wir die View ändern, um vom Backbone.View-Objekt aus erweitert zu werden. Wir können jetzt nur model und collection weitergeben.

Wir müssen also den currentUser als Modell übergeben:

Und ändern Sie die BlogsAdminView entsprechend.

Auch hier müssen Sie möglicherweise ein wenig testen und debuggen, damit alles funktioniert.

Schritt 6: Aktualisieren Sie die Lenkervorlagen, um sie an die neue Datenstruktur anzupassen

Und schließlich hat sich zwischen den Versionsänderungen auch die Datenstruktur des Parse-Objekts etwas geändert.

Vorher sah jedes Objekt so aus:

Das ist nun die neue Struktur:

Das bedeutet, dass wir auch unsere Handlebar-Vorlagen aktualisieren müssen, um die neuen Daten korrekt zu rendern:

Zuvor haben wir beispielsweise für die Kategorien in der Seitenleiste die folgende Vorlage geschrieben:

Jetzt müssen wir {{objectId}} auf {{id}} und {{name}} auf {{attributes.name}} aktualisieren.

Jetzt wird Ihre Seite gerendert.

Auch hier, wenn Sie sich nicht ganz genau an die Logik der Site erinnern, müssen Sie hier möglicherweise ein wenig durch einige Reifen springen. Wenn Sie nicht weiterkommen, können Sie jederzeit meinen Quellcode überprüfen.

Abschluss

Hier hast du es. Hoffentlich kann es Ihnen helfen, Ihre Daten zu speichern, bevor Parse.com heruntergefahren wird – oder Ihren Code wiederbeleben, wenn Sie ihn brauchen. Nach dem 28. Januar 2017 gehen alle Daten verloren, aber wenn Sie den Code aktualisieren, funktioniert er wieder.

Auch hier bin ich unglaublich traurig, dass Parse.com nicht mehr läuft und diese Tutorial-Serie für Neulinge nicht funktioniert (es sei denn, sie beziehen sich immer wieder auf diesen letzten Teil). Aber hoffentlich hat es ein paar Leuten geholfen, zu lernen, wie man eine Website codiert.

Von diesem Zeitpunkt an liegt es ganz bei Ihnen, ob Sie migrieren oder eine neue Sprache lernen möchten. Ich hoffe, es wird ein wenig einfacher, weil Sie hier einige nützliche Konzepte gelernt haben.

Herzliche Grüße! Und hinterlassen Sie mir einen Kommentar, wenn Sie diese Serie hilfreich finden.

Advertisement
Did you find this post useful?
Advertisement
Looking for something to help kick start your next project?
Envato Market has a range of items for sale to help get you started.