Erste Schritte mit Parse

Ich bin ein großer Fan von Parse, einer Technologie, die die Entwicklung von Web- und mobilen Apps beschleunigt. Sie können Daten in der Cloud speichern, synchronisieren und übertragen, ohne eine Zeile serverseitigen Codes schreiben zu müssen. Lesen Sie weiter, um zu erfahren, wie Sie Parse in Ihr nächstes Projekt integrieren können.

Ein bisschen Hintergrund

Die Interaktion mit der Datenbank ist äußerst schmerzlos!

Lassen Sie uns einen Schritt zurückgehen und prüfen, wo die Webentwicklung vor fünf Jahren war. Wir verwendeten Sprachen wie PHP / Ruby im Backend, die mit relationalen Datenbanken (wie MySQL) interagierten, und unser Frontend war mit verschiedenen JavaScript-Dateien übersät. Ich weiß nicht, wie es Ihnen geht, aber die meisten meiner Projekte waren auf einem Server mit wenig Festplattenspeicher, RAM und Bandbreite.

Viele neue Technologien nutzen die Cloud und es ist nicht ungewöhnlich, dass Entwickler diese kostengünstigen Services wie AWS, Amazon S3, Heroku und andere nutzen. Die Einführung dieser Dienste hat die Webentwicklungslandschaft grundlegend verändert. mehr von dem, was wir tun, liegt in der Cloud.

Heute betrachten wir Parse, ein Startup, das ein Cloud-basiertes Datenverwaltungssystem bietet. Durch die Nutzung ihres Dienstes konnte ich schnell neue mobile und Web-Apps erstellen. Wir werden Parse verwenden, um die obligatorische To-Do-Webanwendung zu erstellen, und ich hoffe, Sie erhalten einen Vorgeschmack darauf, was der Service bieten kann.

Was ist Parse??

Einfach gesagt ist Parse ein Cloud-basiertes Datenverwaltungssystem, mit dem Sie Web- und mobile Apps schnell entwickeln können.

Es macht die Entwicklung von Apps Ja wirklich einfach, indem Sie das hintere Ende aus den Händen nehmen.

Also, wie geht das? Nehmen wir an, Sie sind Webentwickler. Sie können die Parse-JavaScript-Datei auf Ihrer Seite hinzufügen, einen API-Schlüssel abrufen und mit nur wenigen Codezeilen "Objekte" in der Cloud speichern. Parse befreit Sie vom Einrichten eines serverseitigen Stacks.

Denken Sie eine Minute darüber nach. Normalerweise richten Sie einen serverseitigen Stack ein (LAMP oder RoR, ASP.NET oder etwas anderes), richten eine Datenbank ein und interagieren mit Ajax auf dem Client. Parse hat die ganze Arbeit auf ein paar Zeilen Code reduziert.

In diesem Lernprogramm verwenden wir das JavaScript-SDK von Parse. Sie können jedoch nicht nur JavaScript verwenden. Es gibt Parse-Bibliotheken in vielen verschiedenen Sprachen, einschließlich PHP, NodeJS, Java, C # und mehr. Hier finden Sie alle verfügbaren Bibliotheken.

Verwenden von Parse für Ihre webbasierten Projekte

Bevor wir beginnen, nehmen wir uns eine Minute Zeit, um zu überlegen, wie eine traditionelle Aufgabenlisten-App mit einem LAMP-Stapel erstellt werden könnte.

Sie würden eine MySQL-Datenbank erstellen.
Möglicherweise verfügen Sie über eine PHP-Klasse, die für die Ausführung von CRUD-Operationen verantwortlich ist. Optional können Sie nur eine Reihe von PHP-Funktionen haben.
Sie können JavaScript und Ajax auf der Clientseite verwenden, um die entsprechenden PHP-Skripts aufzurufen und Abfragezeichenfolgen zu übergeben.
Sie müssen die Eingabe bereinigen, um sich vor XSS-Angriffen zu schützen, und sich um die Datenbanksicherheit im Allgemeinen sorgen.
Bei einer kollaborativen App müssen Sie verschiedene Benutzer verfolgen und ihre Listen verwalten. Mehr Code, mehr Tabellen und mehr Schemata.
Sie müssen sicherstellen, dass Ihre Datenbank leistungsfähig bleibt.

Du hast die Idee. Es gibt viel zu überlegen und viele Bereiche, in denen Fehler gemacht werden können. Parse behandelt diese Probleme für uns.

Erstellen Sie ein Parse-Konto

Bevor Sie etwas tun, erstellen Sie ein kostenloses Parse-Konto. Erstellen Sie dann eine neue App mit dem Namen EnvatoTodo.

Laden Sie das leere Projekt herunter

Parse bietet eine großartige Kurzanleitung für den Einstieg. Wählen Sie JavaScript aus und wählen Sie EnvatoTodo aus dem Dropdown-Menü in Schritt 2 aus (siehe Abbildung unten). Parse generiert eine ZIP-Datei, die das Parse-SDK und enthält index.html.

Die Client-Seite

Bevor wir mit der Interaktion mit Parse beginnen, müssen wir eine grundlegende clientseitige Struktur für unsere Anwendung einrichten. Da die Benutzeroberfläche nicht im Mittelpunkt dieser Anwendung steht, zeige ich Ihnen nur den von mir verwendeten Code. Es ist nichts Besonderes, aber ich verwende YUI3. Sie können optional jQuery verwenden. Alles ist in index.html.

   Todo App erstellt auf Parse          ToDo-Liste auf Parse aufgebaut
     
  Unvollständige Aufgaben
  Es gibt keine unvollständigen Aufgaben! Erwägen Sie, oben eine hinzuzufügen.

Das Wichtigste im obigen Code ist die Einbeziehung der Parse-JavaScript-Datei, . Diese Datei enthält das Parse-Objekt, mit dem wir interagieren werden.

Fügen Sie im Datenbrowser Klassen hinzu

Parse befreit Sie vom Einrichten eines serverseitigen Stacks.

Kommen wir zurück zu Parse. Zeigen Sie den Datenbrowser für EnvatoTodo an (zurzeit leer). Der Datenbrowser ähnelt einem MySQL-Datenbankserver, die Parse-Datenbank ist jedoch ohne Schema. Während Sie im Data Browser Spalten angeben können, können Sie tatsächlich jedes Objekt mit einfachem JSON speichern (im Gegensatz zu vielen NoSQL / Document-Datenbanken). Dies ist eine äußerst wichtige und nützliche Funktion von Parse.

Wir werden fortfahren und der Datenbank eine "Klasse" hinzufügen. Stellen Sie sich eine Klasse als Tisch vor. Die Klasse wird deshalb als Klasse bezeichnet, weil Sie im Allgemeinen Objekte aus einer bestimmten Klasse erstellen und dieses Objekt dann in der Datenbank speichern.

Haftungsausschluss: JavaScript hat offiziell noch keine Klassen, aber es hat das logische Äquivalent. Der Einfachheit halber verwende ich die Terminologie "Klasse" in diesem Tutorial.

Parse hat fünf Arten von Klassen.

Benutzerklassen benutzerspezifische Informationen speichern, und Parse stellt Zuckermethoden bereit, z Anmelden(), Anmeldung(), und mehr, um bei der Benutzerverwaltung zu helfen.
Installationsklassen werden normalerweise zum Senden von Push-Benachrichtigungen für mobile Apps verwendet. Ja, Parse unterstützt Push-Benachrichtigungen an alle Clients.
Rollenklassen Trennen Sie Benutzer in bestimmte Rollen, und steuern Sie den Zugriff auf Lesen / Schreiben für andere Klassen. Dies wird in Parse als ACL (Zugriffskontrollliste) bezeichnet.
Produktklassen In-App-Produktdaten speichern.
Benutzerdefinierte Klassen sind für alles andere.

Erstellen wir eine benutzerdefinierte Klasse namens Listenpunkt. Nach dem Erstellen werden Sie feststellen, dass es bereits vier Eigenschaften hat. Parse aktualisiert automatisch die Eigenschaften jeder von Ihnen erstellten Klasse. Einige Klassen, z. B. Benutzerklassen, haben möglicherweise ihre eigenen spezifischen Eigenschaften.

Unsere Listenpunkt Objekte enthalten eine Inhalt Eigenschaft, um zu zeigen, was der Todo enthält, und eine ist komplett Eigenschaft, um anzuzeigen, ob der Todo abgeschlossen wurde. Wir könnten Spalten für diese Eigenschaften hinzufügen, aber Parse wird dies aus unserem JSON herausfinden.

Parse initialisieren

Gehen wir zurück zu index.html um etwas Code hinzuzufügen. Als erstes wollen wir Parse mit unserer App-ID und unserem JavaScript-Schlüssel initialisieren. Diese finden Sie auf der Registerkarte Übersicht Ihrer Anwendung im Datenbrowser. Fügen Sie Ihrem JavaScript die folgende Zeile hinzu und ersetzen Sie diese APP_ID und JS_KEY mit den entsprechenden Werten:

Parse.initialize (APP_ID, JS_KEY);

Todos speichern

Beginnen wir mit dem Hinzufügen von Funktionen zu unserer Anwendung. Wir speichern zuerst ein Aufgabenlistenelement, wenn der Benutzer auf die Schaltfläche "Hinzufügen" klickt. Der folgende Code ist alles, was wir für diese Funktionalität benötigen:

submitBtn.on ('click', Funktion (e) // Erweitern Sie die native Parse.Object-Klasse. var ListItem = Parse.Object.extend ("ListItem"); // Instanziieren eines Objekts der ListItem-Klasse var listItem = new ListItem (); // listItem ist jetzt das Objekt, das wir speichern möchten, daher weisen wir die gewünschten Eigenschaften zu. ListItem.set ("content", text); listItem.set ("isComplete", false); // Wir rufen die save-Methode auf und übergeben die Callback-Funktionen für Erfolg und Fehler. ListItem.save (null, success: function (item) // Erfolgreicher Rückruf, error: function (gameScore, error) // Failure Callback ););

Die Interaktion mit der Datenbank ist äußerst schmerzlos! Jede benutzerdefinierte Klasse in Parse erbt von Parse.Object; deshalb, Listenpunkt ist eine Unterklasse. Das String-Argument "Listenpunkt" Parse sagt, dass diese Klasse mit der von uns erstellten ListItem-Tabelle korreliert. Dann erstellen wir ein neues Listenpunkt Objekt, legen Sie seine Eigenschaften fest und rufen Sie auf sparen().

Elemente anzeigen

Um eine Liste der Aufgabenelemente anzuzeigen, verwenden wir die Parse-JavaScript-API, um die zehn zuletzt gespeicherten Elemente abzufragen und die unter der App aufzulisten. Dadurch erhalten Sie eine Vorstellung davon, wie Abfragen in Parse funktionieren.

// Noch einmal erweitern wir die Parse.Object-Klasse, um die ListItem-Klasse zu erstellen. ListItem = Parse.Object.extend ("ListItem"); // Dieses Mal verwenden wir Parse.Query, um eine neue Abfrage zu generieren, die speziell die ListItem-Tabelle abfragt. query = new Parse.Query (ListItem); // Wir setzen Einschränkungen für die Abfrage. query.equalTo ('isComplete', false) query.limit = 10; query.descending ('createdAt'); // Wir übergeben die Abfrage und übergeben Callback-Funktionen. query.find (success: function (results) // Erfolgreicher Rückruf, Fehler: function (error) // Error Callback);

Wieder einmal ist es ziemlich einfach und leicht zu lesen. Das Parse.Query () Methode ist ziemlich mächtig. Hier führen wir eine ziemlich einfache Abfrage aus, Parse-Abfragen können jedoch auch komplex sein. Sie können nach bestimmten regulären Ausdrücken abfragen, relationale Abfragen ausführen und vieles mehr. Besuchen Sie die Abfragedokumentation für weitere Beispiele und Codeausschnitte.

Alles zusammenstellen

Als nächstes müssen wir hinzufügen, dass ein zu erledigendes Element markiert ist, wenn das Kontrollkästchen des Elements markiert ist. Jedes Kontrollkästchen hat ein eindeutiges Ich würde dem von ihm repräsentierten Parse-Objekt zugeordnet. Wenn Sie also ein Kontrollkästchen aktivieren, müssen Sie Folgendes tun:

Holen Sie sich die ID.
Abfrage für ein Parse-Objekt mit dieser ID.
Holen Sie sich das zurückgegebene Parse-Objekt und aktualisieren Sie es ist komplett Eigentum als wahr.
Speichern Sie das aktualisierte Objekt.
Entfernen Sie es aus der angezeigten Liste.

So sieht der Code aus:

incompleteItemList.delegate ('click', Funktion (e) // behält einen Verweis auf diese Variable selbst = this; // erstellt ein Abfrage-Abfrageobjekt. var query = new Parse.Query (ListItem); // Die query.get ( Die Methode benötigt die objectId als erstes Argument und gibt das Objekt mit dieser ID zurück: query.get (self.one ('input'). get ('id'), success: function (item) // Once the object wird zurückgegeben, wir aktualisieren seine Eigenschaft und speichern sie. item.set ('isComplete', true); item.save (); // Da das Element nicht mehr unvollständig ist, entfernen wir es aus der Liste. self.remove ( // Wenn keine Liste in der Liste ist, zeigen Sie eine Meldung an, die besagt, dass die Liste leer ist. If (incompleteItemList.all ('li'). Size ()> = 1) noTasksMessage.removeClass ('hidden'); , Fehler: Funktion (Objekt, Fehler) Warnung ("Fehler beim Aktualisieren des ToDo-Elements:" + error.code + "" + error.message););, 'li');

In diesem Snippet fragen wir nach einem einzelnen Element mit einem bestimmten Element Ich würde, Aktualisieren Sie es und speichern Sie es. Dann entfernen wir es mit aus der Liste self.remove ().

In Parse ist das Aktualisieren von Objekten dem Speichern von Objekten sehr ähnlich - wir nennen es sparen() in beiden Fällen. Parse stellt fest, ob es sich um ein vorhandenes (fehlerhaftes) Objekt oder um ein völlig neues Objekt handelt, und führt die entsprechende Aktion aus.

Kompletter Quellcode

Damit sind wir gut unterwegs! Ganz einfach, wie? Laden Sie die angehängte ZIP-Datei herunter und öffnen Sie sie index.html um den gesamten Quellcode anzuzeigen.

Andere Eigenschaften

In diesem Lernprogramm haben wir Parse vor allem aus der Sicht der Webentwicklung betrachtet. Der Dienst wurde jedoch ursprünglich für mobile Entwickler gestartet. Parse hat ein sehr gründliches SDK für Android und iOS und unterstützt Funktionen wie Push-Benachrichtigungen für alle Benutzer Ihrer mobilen App.

Einige andere wichtige Funktionen, die wir in diesem Lernprogramm nicht behandelt haben, umfassen Benutzer, Rollen und das Speichern relationaler Informationen.

Parse macht es relativ einfach, Benutzer zu erstellen und ihnen verschiedene Rollen zuzuweisen. In einem Learning-Management-System haben Sie beispielsweise "Lehrer", "Schüler" und "Administratoren". Durch das Zuweisen von Rollen können Sie festlegen, welcher Benutzertyp Zugriff auf bestimmte Parse-Objekte hat.

Was ist mit Sicherheit??

Viele neue Technologien nutzen die Cloud…

Als Entwickler gefällt mir, dass Parse sich um viele Sicherheitsbedenken kümmert, die ich habe. Wie auf der Website vermerkt, sind die Parse-SDKs so konzipiert, "dass Sie sich normalerweise keine Gedanken darüber machen müssen, wie Daten gespeichert werden." Es gibt immer noch das Problem, dass Benutzer Zugriff auf Informationen haben, zu denen sie nicht in der Lage sein sollten. Um dieses Problem zu beheben, bietet Parse Berechtigungen auf Objekt- und Klassenebene.

Berechtigungen auf Objektebene ermöglichen es einem Entwickler, ein Array von Objekt-IDs anzugeben, die Zugriff auf das Lesen und / oder Schreiben des Objekts haben. Berechtigungen auf Klassenebene ermöglichen es einem Entwickler, anzugeben, welche Aspekte einer Parse-Klasse von der API aus bearbeitet werden können. Die folgenden Vorgänge können auf Klassenbasis zugelassen oder abgelehnt werden: Abrufen, Suchen, Aktualisieren, Erstellen, Löschen und Felder hinzufügen.

Vor-und Nachteile

Ich möchte betonen, dass Parse nicht für jede Art von Projekt geeignet ist. Obwohl der kostenlose Plan sehr großzügig ist, ist Parse ein kostenpflichtiger Service. Es kann teuer werden, wenn Sie bestimmte Grenzen überschreiten. Glücklicherweise ist das Preismodell sehr transparent und Sie sollten in der Lage sein, herauszufinden, wie viel Ihre App kosten kann. Im Allgemeinen verwende ich es für kleinere Projekte, bei denen ich eine bestimmte Obergrenze erwarten kann, wenn es um die Anzahl der von mir gestellten API-Anforderungen geht. Ich habe Parse noch nicht für ein großes Projekt getestet.

Ein häufiges Problem bei einem Dienst wie Parse ist der Lock-In-Effekt.

Wenn Sie Parse für ein kleines Projekt verwenden, das plötzlich abhebt, kann es schwierig sein, zu einem Unterschiedsdienst oder einer Plattform zu wechseln. Wie Sie sich vorstellen können, würde das Ersetzen von Parse durch Ihr eigenes Backend eine erhebliche Menge an Refactoring nach sich ziehen. Dies bedeutet nicht, dass Sie Parse nicht verwenden sollten, aber es ist etwas, das Sie beachten sollten.

Abschließende Bemerkungen

In diesem Lernprogramm haben wir untersucht, wie wir mithilfe von Parse eine relativ einfache Webanwendung erstellen können. Ich habe diesen Service für eine Reihe von Projekten für verschiedene Kunden verwendet, und ich finde das Parse-Team bei Problemen sehr hilfreich. Ich empfehle Ihnen, den Dienst auszuprobieren und Ihre eigene Entscheidung zu treffen!

Offenlegung: Ich habe keine Beziehung zu Parse oder einem seiner Mitarbeiter. Ich bin nur ein Entwickler, der seinen Service nutzt, und finde es eine hilfreiche Ergänzung zu meinem Entwicklungsworkflow.

Code