Prisma-CMS als Engine zur schnellen Erstellung von MVP

Sicherlich haben viele das Konzept von MVP ( Wiki Minimum Viable Product) gehört. Es gibt viele Artikel über MVP auf MVP, aber im Grunde ist es entweder nur eine Beschreibung dessen, was MVP ist und wofür es ist, oder verschiedene Erfolge und nicht sehr Geschichten. Aber ich habe keinen einzigen Artikel gefunden, der beschreibt, was MVP tut. Es wird jedoch angenommen, dass persönliche Blogs auf einer Engine einfacher zu erstellen sind, Online-Shops auf einer anderen usw. (Jeder ersetzt für diese Zwecke seinen Namen für die bevorzugte Engine). Aber warum ist dann keine bequemere Engine für MVP definiert? Ich werde diese Frage nicht klar beantworten, aber ich werde meine Gedanken darüber teilen, was genau für die Erstellung von MVP mein Prisma CMS gut ist, worüber ich hier vor ein paar Monaten geschrieben habe. Wen kümmert es bitte unter der Katze.

Interessanterweise kann MVP im Großen und Ganzen mit dem fortgeschritteneren Prototyping- Wiki verglichen werden. Gleichzeitig gibt es eine spezielle Software für das Prototyping, und ich habe einmal sogar dieselbe Axure verwendet. Aber was fehlte Axure und warum habe ich es sofort aufgegeben? (Ich weiß nicht, vielleicht ist er jetzt weiter fortgeschritten und diese Probleme wurden gelöst, aber zu diesem Zeitpunkt gab es keine).

1. Es gibt keine Arbeit mit realen Daten. Das heißt, ich habe einen Benutzerabschnitt im Prototyp, aber ich kann die Benutzerdaten nicht über die API abrufen und sie in einer Schleife in meiner Vorlage anzeigen. Und im Prinzip gibt es keine Möglichkeit, mit realen Daten zu arbeiten (Datensätze erstellen, lesen).
2. Wenn Sie die Prototyping-Phase durchlaufen und direkt zur Entwicklung übergehen, können Sie die im Prototyp erstellten Vorlagen nicht verwenden. Das heißt, nachdem der Prototyp erstellt und mit dem Kunden vereinbart wurde und wir zur Programmierung übergegangen sind, konnten wir den Prototyp nur mit unseren Augen betrachten, nichts konnte damit gemacht werden. Also wollte ich einen Prototyp werfen und ihn dann in der Entwicklung verwenden.

Es gab noch Momente, aber diese beiden sind die wichtigsten. Es stellte sich heraus, dass die Phasen des Prototyping und der Programmierung ein eigenständiges Leben führten und sich in keiner Weise gegenseitig beeinflussten. Ich möchte jedoch, dass die Prototyping-Phase reibungslos direkt zur Programmierung übergeht. Im Rahmen des aktuellen Artikels kann man sogar vorschlagen, dass das Prototyping in die Erstellung von MVP einfließt. Wenn dies erfolgreich ist, kann MVP zum endgültigen vollwertigen Produkt entwickelt werden. Wenn Sie so denken, garantiert die Erstellung von MVP nicht immer, dass es in Zukunft ein vollständigeres Produkt geben wird. Was bringt es schließlich, MVP zu erstellen? Erstens, um die Idee mit minimalen Kosten zu verwirklichen, damit Sie sie in der Arbeit ausprobieren können, und zweitens, um die Nachfrage zu untersuchen und selbst zu entscheiden, ob es sich lohnt, sie zu investieren und zu einem vollwertigen Produkt zu entwickeln. Es stellt sich also heraus, dass wir ein Tool benötigen, mit dem wir schnell Prototypen / MVP erstellen können. Wenn MVP hingegen erfolgreich ist, können wir das Projekt ohne besondere Einschränkungen weiterentwickeln.

Wenn ich mir Prisma CMS anschaue, sehe ich tatsächlich einen solchen Motor. Es gibt viel, um den Entwurf des Projekts schnell auf den Kopf zu stellen:

• Fast die gesamte Arbeit wird vorne über unseren eigenen WYSIWYG-Frontend-Editor erledigt.
• URLs werden auf dem React-Router implementiert, sodass die Adressierung auch direkt im Editor und nicht auf dem Server geschrieben werden kann.
• Die API ist in GraphQL implementiert, sodass Sie Abfragen vorne und nicht auf dem Server schreiben können. Gleichzeitig ist Graph i QL integriert, was das Schreiben von Abfragen vereinfacht.
• Außerdem werden Filter Seite für Seite und andere nützliche Brötchen generiert.

Und das alles ist openSource, das heißt, es ist kein SaaS, für das Sie ständig bezahlen müssen (ohne alles zur Verfügung zu haben). Dies kann auf Ihrem Server bereitgestellt und für sich selbst angepasst werden.

Bevor ich den Installationsprozess auf meinem Server und die Anpassungsprozesse beschreibe, empfehle ich Ihnen, sich die Aufzeichnung des Prozesses zum Erstellen eines separaten Abschnitts auf der Site anzusehen. Es sind fast 15 Minuten, aber schauen Sie sich nur die ersten 4 Minuten an. Dies ist mehr als genug, um sich ein Bild von Prisma CMS zu machen. Wenn Interesse besteht, lesen Sie das Thema weiter oder versuchen Sie vielleicht, die Engine zu Hause einzusetzen.


Also, Prisma CMS auf dem Server installieren (ich verwende Ubuntu, vorzugsweise mindestens 4 GB RAM und eine SSD).

Es wird davon ausgegangen, dass Sie bereits mit Node-js, npm / yarn, react und graphql vertraut sind.

1. Installieren Sie die erforderliche Software

Wenn alles auf einmal in das Terminal eingefügt wird, kann die Ausführung unterbrochen werden. Daher ist es besser, Zeile für Zeile auszuführen.

Dies ist eine minimale Installation ohne Einstellungen für die Zugriffsebene usw., nur zu Informationszwecken. Wenn Sie also einen neuen sauberen Server ausprobieren, wird alles vom Stamm aus ausgeführt (einschließlich des Startens der Site). Für unser Experiment ist dies überhaupt nicht wichtig.

sudo apt update sudo apt install mc sudo apt install git curl -sL https://deb.nodesource.com/setup_10.x | sudo -E bash - sudo apt-get install -y nodejs sudo npm i -g yarn sudo apt-get install software-properties-common python-software-properties sudo apt-key adv --keyserver hkp://p80.pool.sks-keyservers.net:80 --recv-keys 58118E89F3A912897C070ADBF76221572C52609D sudo apt-add-repository 'deb https://apt.dockerproject.org/repo ubuntu-xenial main' sudo apt-get update sudo apt-get install -y docker-engine sudo curl -L https://github.com/docker/compose/releases/download/1.18.0/docker-compose-`uname -s`-`uname -m` -o /usr/local/bin/docker-compose sudo chmod +x /usr/local/bin/docker-compose 

2. Klonen Sie das Repository

 mkdir /var/www cd /var/www git clone https://github.com/prisma-cms/boilerplate cd boilerplate yarn --ignore-engines 

3. Starten Sie Docker-Container mit MySQL und Prisma (Prisma ist ein separates Produkt, nicht meins, mit dem die Serverseite stark verbunden ist, siehe github.com/prisma/prisma ).

 sudo docker-compose -f src/server/scripts/docker/prisma/docker-compose.yml up -d 

Wenn Sie über phpMyAdmin in die Datenbank schauen möchten, installieren Sie sie ebenfalls.

 sudo docker run -d --link prisma_mysql_1:db --network prisma_default -p 8090:80 phpmyadmin/phpmyadmin 

Hängt an Port 8090. Standardmäßig lautet der Benutzername / das Kennwort root / prisma

4. Schema bereitstellen

 endpoint=http://localhost:4466/my-project/dev yarn deploy 

my-project / dev können Sie jeweils eigene Projekte schreiben und viele Projekte auf demselben Server erstellen.

Wichtig! In der Produktion sollte Port 4466 durch eine Firewall geschlossen sein und von außen nicht direkt zugänglich sein.

5. Starten Sie den API-Server

 APP_SECRET=MyStrongSecret endpoint=http://localhost:4466/my-project/dev yarn start-server 

Nach dem Start können Sie die Server-IP : 4000-API öffnen.

Wie ich in einem früheren Artikel geschrieben habe, ist dies ein Zwischenserver, der Ihre eigene Logik zusätzlich zu der generierten implementiert (die auf Port 4466 ausgeführt wird).

6. Starten Sie die Front

Wir öffnen ein weiteres Terminal und in demselben Ordner, den wir ausführen

 yarn start 

Die Front startet an Port 3000. Jetzt können Sie direkt zur "Programmierung" der Front gehen. Öffnen Sie die Server-IP : 3000. Bei der Eingabe wird eine Autorisierungsschaltfläche für Sie angezeigt, obwohl für die Vorderseite keine einzige gespeicherte Vorlage vorhanden ist. Die Logik besteht darin, sich zu registrieren und mit dem Entwerfen der Site zu beginnen. Wer ist der Erste - das und Sneaker- Site. So sieht es aus:

7. Erstellen Sie Skripte und führen Sie SSR (Servcer-Side Rendering) aus.

Das Starten durch Garnstart ist ein Entwicklungsmodus, der für den ersten Start (Überprüfen, ob alles funktioniert) und zum direkten Programmieren des JS-Teils geeignet ist. Und für den Kampf wird natürlich eine gesammelte Front benötigt. Unterbrechen Sie den laufenden Garnstart über Strg + C und erstellen Sie Skripte.

 yarn build 

Sie können rauchen gehen und Kaffee einschenken, dieser Vorgang ist nicht schnell. In seltenen Fällen fällt das Gebäude beim ersten Mal auseinander. Führen Sie es einfach erneut aus. In diesem Fall wird es in der Regel erfolgreich und viel schneller fertiggestellt.

Wenn das Gebäude vorbei ist, führen Sie die zusammengebaute Front.

 yarn start-ssr 

Jetzt ist der Start viel schneller und die Skripte sind kleiner.

Fazit

Das Video zeigt, dass es stellenweise sehr große Probleme mit der Benutzerfreundlichkeit gibt, das Projekt sich jedoch noch weiterentwickelt. Allmählich werden diese Probleme beseitigt. Aber ganz vorne kann viel getan werden. Eine ernsthafte Bereinigung des Quellcodes muss noch durchgeführt werden, da sich dort viel angesammelt hat, was bereits nicht wirklich benötigt wird, sondern sich einfach als Vermächtnis erstreckt. Infolgedessen sollte die Front viel einfacher sein. Und es wird schneller zusammengestellt und die Seite wird schneller geladen.

Auf jeden Fall wiederhole ich meiner Meinung nach, wie gut die Engine für MVP passen kann - schnell etwas werfen und dem Kunden zeigen. Wenn wir mit der Entwicklung des Endprodukts fortfahren, können wir es, auch wenn die Front nicht zufrieden ist, vollständig wegwerfen und auf unsere eigene Weise neu schreiben, während die Datenbank- und Serverlogik nirgendwo hingehen wird. Immerhin ist dies kopflos-cms. Aber ich hoffe, dass die Front im Laufe der Zeit auf ein völlig akzeptables Niveau gebracht wird.

Wenn die Community Interesse hat, schreibe ich separat Themen zum Anpassen der Front (Hinzufügen eigener Blöcke für den Front-Editor) und zum Anpassen des Servers (Erweitern des Schemas, Hinzufügen eigener Entitäten, Hinzufügen von Resolvern usw.). Es wurden bereits viele Tools entwickelt, um solche Aufgaben schnell zu erledigen.

Projektquellen

Vielen Dank für Ihre Aufmerksamkeit!