Hallo! Heute möchte ich Ihnen die Früchte meiner monatelangen Arbeit in Nächten und Wochenenden vorstellen, die darauf abzielen, das Content-Management-Erlebnis zu verbessern und zusätzliche Funktionen in die Welt der Flutter-Anwendungsentwicklung einzuführen – eine neue Art von CMS.

Die Rede ist von Nanc – kein normaler CMS . Warum es „nicht normal“ ist und was man damit machen kann, erfahren Sie nach der Lektüre dieses Artikels.

Der Artikel enthält nicht nur Theorie, sondern auch „Praxis“ – Sie können in der Nanc-Sandbox spielen. Um der Öffentlichkeit die Fähigkeiten von Nanc zu zeigen, wurden zwei Demoanwendungen erstellt: eine Client-Anwendung, die jede Flutter-Anwendung imitiert, und eine weitere, die eine Vorstellung davon vermittelt, was eine Flutter-basierte Nanc-Anwendung leisten kann – vorgefertigtes Nanc CMS. Und die Nanc CMS-Anwendung, bei der es sich um ein vorkonfiguriertes CMS mit einer zusätzlichen Logikebene handelt, die zur Synchronisierung der Clientanwendung mit dem CMS implementiert ist.

Am Ende der meisten Logikblöcke im Text finden Sie ein YouTube-Video mit einem Beispiel für die Verwendung/Demonstration einiger Aspekte von Nanc.

Inhaltsverzeichnis

1. Einführung

2. Über CMS

   1. Arten von Modellen

      1. Sammlung
      2. Solo

   2. Editor

      1. Allgemeine Beschreibung
      2. Code zuerst
      3. Schnittstelle zuerst
      4. Hybridmodus

   3. Felder

      1. Bool
      2. Farbe
      3. Datum
      4. Dynamisch
      5. Aufzählung
      6. Header
      7. Symbol
      8. Ausweis
      9. MultiSelector
      10. Nummer
      11. Wähler
      12. Zeichenfolge
      13. Struktur
      14. Bildschirm

3. Dynamische Flutter-Apps

   1. Interaktive Dokumentation
   2. Erweiterbarkeit
   3. Einfachheit
   4. Die Macht
   5. Bequemlichkeit
   6. Leistung

4. Nanc-Demo-Apps

   1. Allgemein
   2. Klient
   3. Administrator
   4. Verbindungsmanager

5. Was kommt als nächstes / Nachworte

Über das Nanc CMS

Also. Nanc ist ein Backend-agnostisches CMS, das kein eigenes Backend nutzt. Wie funktioniert es? Nanc bietet die Implementierung von Netzwerkdienstschnittstellen an, die derzeit über sechs Methoden verfügen, zum Zeitpunkt der Veröffentlichung jedoch etwa zehn sein werden. Ist das viel oder wenig? Beispielsweise waren 170 Codezeilen erforderlich, um die API für die Demoanwendung zu implementieren. Diese Methoden sind für die gesamte Arbeit von Nanc mit Ihrem bestehenden Backend verantwortlich. Die Implementierung muss in Dart (auch die Entwicklungssprache für Flutter) geschrieben sein. In Zukunft wird Nanc fertige Implementierungen dieser Schnittstellen für bestimmte Backend-Optionen liefern – Firebase, Supabase, lokales/Netzwerk-SQLite und generische Implementierungen von REST und GraphQL (vielleicht etwas anderes?), und Sie müssen über diese Implementierung nicht nachdenken alle oder müssen, aber nur ein bisschen.

Arten von Modellen

Ein Modell in Nanc ist eine strukturelle Beschreibung einer Entität, die Sie mit Nanc steuern möchten. Ein Modell enthält einen Entitätsnamen, verschiedene visuelle Parameter und eine Beschreibung der Felder.

Sammlung

Eine Sammlung ist eine Entität, die viele Instanzen haben kann. Eine Liste von Benutzern, Büchern und Rezensionen sind gute Beispiele für Sammlungsmodelle in Nanc.

Wenn Sie mit relationalen Datenbanken vertraut sind, wäre ein Beispiel für eine Sammlung in Nanc fast jede Tabelle in Ihrer Datenbank.

Solo

Ein Solo (Modell) ist eine Entität, die in einer einzelnen Instanz existiert. Zum Beispiel – Funktionsumschaltungen oder eine Konfiguration von etwas, oder... „Der Hauptbildschirm einer mobilen Anwendung“. Im Allgemeinen sind Solo-Modelle darauf ausgelegt, die Benutzerfreundlichkeit zu erhöhen, da sie lediglich eine Projektion Ihrer Datenbank sind. Und ein Solo-Modell könnte problemlos eine beliebige Tabelle in Ihrer Datenbank mit nur einem Datensatz sein. Derzeit erfordert die Implementierung dieser Modellklasse jedoch, dass der Datensatz dieses Modells (Zeile in der Datenbank) eine id hat, die der id des Modells selbst entspricht.

 final Model landingPage = Model( name: 'Landing page', /// ? id in format [toSnakeCase(name)] will be set automatically, if omitted // id: 'landing_page', isCollection: false, icon: IconPackNames.flu_document_page_break_regular, fields: [ ...

Editor

Allgemeine Beschreibung

Nanc kann auf verschiedene Arten konfiguriert werden: per Code, über die Nanc-Schnittstelle selbst und eine Kombination dieser Optionen.

Code-First-Konfiguration

Wenn ich „Konfiguration“ sage, meine ich zunächst einmal die Beschreibung der Struktur Ihrer Modelle. Nehmen wir ein einfaches Beispiel, das Feature-Modell, bei dem es sich um eine Entität handelt, die die Features eines Produkts beschreibt. Diese Entität enthält die folgenden Felder:

• Ausweis
• Titel
• Bild
• Beschreibung

Und die Implementierung als Code-First-Konfiguration sieht wie folgt aus:

 import 'package:fields/fields.dart'; import 'package:icons/icons.dart'; import 'package:model/model.dart'; final Model feature = Model( name: 'Feature', icon: IconPackNames.flu_ribbon_star_filled, fields: [ [ IdField(width: 200), StringField(name: 'Title', maxLines: 1, isRequired: true, width: 400), ], [ IconField(name: 'Image', isRequired: true), ], [ StringField(name: 'Description', isRequired: true, showInList: true), ], ], );

Durch die Beschreibung eines solchen Modells und dessen Verwendung in Nanc CMS stehen Ihnen alle CRUD-Operationen dieses Modells zur Verfügung.

Interface-First-Konfiguration

Wir könnten genau das gleiche Feature-Modell (nennen wir es Feature-Variante) über die Nanc-Schnittstelle erstellen. Und (wenn man bedenkt, dass alle Vorbereitungsarbeiten für die Verwendung von Nanc erledigt sind) – wenn Sie ein Modell in Nanc erstellen, erstellen Sie sofort eine Tabelle in der Datenbank, und das gesamte CRUD steht Ihnen auch sofort zur Verfügung.

Außerdem können Sie den sichereren Weg wählen, bei der Erstellung eines Modells über die Nanc-Schnittstelle nichts in der Datenbank zu erstellen. Und erstellen Sie unabhängig eine Tabelle in Ihrer Datenbank und erstellen Sie dann darunter ein Modell in Nanc. Das müssen Sie übrigens tun, wenn Sie die Konfiguration im Code beschreiben – daraus werden keine neuen Tabellen in Ihrer Datenbank angezeigt.

Hybridkonfiguration

Diese Option steht Ihnen zur Verfügung, wenn Sie über eine Code-First-Konfiguration verfügen und sich entscheiden, diese über die Nanc-Schnittstelle zu ändern. In diesem Fall sind alle weiteren Änderungen an diesem Modell nur über die Schnittstelle möglich und Änderungen am ursprünglichen Codemodell werden ignoriert. Die einzige Möglichkeit, zu Code-First zurückzukehren, besteht darin, das Modell „zurückzusetzen“. In diesem Fall werden alle über die Schnittstelle vorgenommenen Änderungen an der Modellstruktur gelöscht und die Code-First-Konfiguration wird erneut verwendet. Von diesem Zurücksetzen sind keine Daten betroffen. Es wirkt sich nur auf die Modellstruktur aus.

Felder

Schauen wir uns nun an, welche Arten von Feldern Nanc derzeit unterstützt.

Boolescher Wert

Mit BoolField können Sie den bool Datentyp steuern und den Standardwert anpassen.

Farbe

ColorField bietet Ihnen einen praktischen Farbwähler, mit dem Sie in Nanc sofort eine Farbe auswählen können. Außerdem haben Sie die Möglichkeit, Änderungen manuell vorzunehmen, indem Sie den AHEX-Code bearbeiten. AHEX ist eine klassische HEX-Farbe (zum Beispiel #10A0CF ), jedoch mit einem zusätzlichen Transparenzwert, der zuerst angegeben wird. In diesem Fall würde diese Farbe der Farbe #FF10A0CF ähneln ( FF steht für 100 % Deckkraft – die Farbe ist völlig deckend). Und so würde die gleiche Farbe mit 50 % Deckkraft aussehen: #7F10A0CF .

Datum

DateField ist für die Steuerung von Datum und Uhrzeit verantwortlich (beide Werte gleichzeitig, separate für Datum und Uhrzeit werden später implementiert). DateField enthält zwei boolesche Parameter, mit denen Sie das Verhalten dieses Felds ändern können, indem Sie es zu einem Zeitstempel für die Entitätserstellung und zu einem Zeitstempel für die Änderung machen.

Dynamisch

DynamicField ist einerseits ein sehr einfaches Feld, andererseits beinhaltet es jedoch die volle Komplexität der anderen Felder. Zunächst können Sie nur das Erscheinungsbild dieses Felds konfigurieren (wie es in der Nanc-Oberfläche aussehen wird – die Farbe und das zugehörige Symbol). Danach kann dieses Feld alle in Nanc verfügbaren Werte enthalten, einschließlich sich selbst. Was bedeutet das? Im Wesentlichen ist DynamicField ein typisiertes JSON mit der Fähigkeit, Felder in sich selbst in der richtigen Reihenfolge zu positionieren.

Aufzählung

EnumField ist ein Feld zum Auswählen eines Werts aus mehreren Werten. Die Regel, die Sie bei der Auswahl eines EnumField befolgen müssen, lautet: Wählen Sie „Enum“, wenn Sie eine endgültige Liste von Werten zur Auswahl haben, die nicht in einer separaten Datenbanktabelle gespeichert ist. Andernfalls wählen Sie SelectorField, was weiter unten ausführlicher erläutert wird. TODO: Im Moment kann dieses Feld nur über CodeConfig konfiguriert werden, eine Konfiguration über die Schnittstelle ist nicht möglich.

Header

HeaderField ist nicht wirklich ein Feld, sondern eine visuelle Erweiterung für Ihr Modell in Nanc. Sie können dieses Nicht- Feld verwenden, um einen gemeinsamen Header für eine Gruppe verwandter Felder festzulegen oder um Modellfelder voneinander zu unterscheiden, indem Sie HeaderField als Trennzeichen verwenden.

Symbol

IconField bietet Ihnen die Möglichkeit, ein Symbol ( IconData Klasse) aus einem vordefinierten Satz von Symbolen auszuwählen. Derzeit gibt es etwa 25.000 davon, und dieses Set enthält die folgenden Symbole:

• Materialdesign-Ikonen
• Fluent UI-Systemsymbole
• Remix-Symbole

Bei Bedarf können weitere Icons zum Grundlieferumfang hinzugefügt werden, und in nicht allzu ferner Zukunft wird es auch die Möglichkeit geben, eigene Icons zu verwenden.

Man könnte sich fragen: „Icons sind da, Farben sind da, aber Schriftarten?“ Wenn ja, finden Sie die Antwort in der Dokumentation zum Text- Widget. Die kurze Antwort lautet: Ihnen stehen alle Schriftarten von Google Fonts zur Verfügung.

Ausweis

IdField ist ein so einfaches, aber so wichtiges Feld. Jedes von Nanc verwaltete Modell muss mindestens ein Feld vom Typ Id haben. Derzeit wird nur der String-ID-Typ unterstützt (es kann sich um einen beliebigen eindeutigen String innerhalb einer Entität handeln). Es gibt Pläne, auch Unterstützung für numerische Typen hinzuzufügen, was jedoch bereits jetzt implementiert werden kann, indem einfach die Felddaten in der API-Implementierung in den numerischen Typ umgewandelt werden.

Multiselektor

MultiSelectorField ist ein ziemlich komplexes Feld, das für die Implementierung einer relationalen Viele-zu-Viele- oder Viele-zu-Eins-Beziehung verantwortlich ist. Es gibt drei Arten, dieses Feld zu verwenden. Lassen Sie uns jeden einzelnen davon genauer durchgehen. TODO: Im Moment kann dieses Feld nur über CodeConfig konfiguriert werden, die Konfiguration über die Schnittstelle ist noch nicht möglich.

Array von IDs

Dieser Modus gibt Ihnen die Möglichkeit, die id verwandter Entitäten direkt in der übergeordneten Entität zu speichern. Zum Beispiel haben wir zwei Modelle – Reader und Book. In diesem Modus werden die vom Leser entnommenen Bücher als IDs verbucht, die im Feld „Lesermodell“ gespeichert sind. Zum Beispiel so:

 /// user table { id: 'UUID', name: 'String', books: [ 'UUID', 'UUID' // ... ] }

Oben sehen Sie eine Beispieltabellenstruktur, die mithilfe der JSON5-Syntax ausgedrückt wird.

Der Nachteil dieses Modus ist die eingeschränkte Datenintegrität. Wenn Sie die automatische Entfernung veralteter (gelöschter) Buch-IDs aus dem Feld books “ nicht implementieren, erhalten Sie Fehlermeldungen.

Dritter Tisch

Die klassische Art der Bereitstellung von Beziehungen aus der SQL-Welt. In diesem Modus speichern Sie Entitätsbeziehungen in einer separaten Tabelle und stellen eine 100-prozentige Datenintegrität sicher. Die folgende Struktur ist ein Beispiel für diesen Modus:

 [ /// user table { id: 'UUID', name: 'String' }, /// book table { id: 'UUID', title: 'String' }, /// user_books_relations table { user_id: 'UUID', book_id: 'UUID' } ]

In der 7. Sekunde sieht man ein leichtes Zucken und wenn man genau hinschaut, erkennt man, dass sich die Seiten-URL geändert hat – so habe ich versucht, den Fehler zu verbergen: Im dritten Tabellenmodus werden die Daten nur dann auf der übergeordneten Seite gespeichert, wenn dies der Fall ist wurde bereits gespeichert 🤷🏼

Array von Objekten

Im Allgemeinen ähnlich wie ein Array von IDs, mit der Ausnahme, dass der übergeordnete Datensatz keine Bezeichner speichert, sondern das gesamte Objekt (als flache Struktur, ohne mögliche zugeordnete Entitäten des verschachtelten Datensatzes). Es hat den gleichen Nachteil wie „Array of ids“, hat aber noch einen zusätzlichen: die erhöhte Speichernutzung. Allerdings gibt es (zumindest im Moment) einen Anwendungsbereich für diesen Modus, und dieser ist sehr wichtig. Aber darüber werden wir etwas später sprechen.

Ich übertreibe es in dem Video, in dem ich ScreenField zeige, wir kommen darauf zurück

Im Allgemeinen besteht die Idee, „nicht-kanonische“ Modi virtuell zu machen – damit sie irgendwie über die dritte Tabelle funktionieren und die erforderlichen Daten beim Bearbeiten der Seite geladen werden (falls erforderlich).

Nummer

NumberField speichert Zahlen – ganz einfach.

Wähler

SelectorField ähnelt MultiSelectorField (wie Sie anhand der Namen erraten können), ist jedoch etwas einfacher – die Beziehung ist hier eins-zu-eins oder eins-zu-viele, und es gibt zwei Modi. TODO: Im Moment kann dieses Feld nur über CodeConfig konfiguriert werden, eine Konfiguration über die Schnittstelle ist nicht möglich.

Ausweis

Eine gängige Form der SQL-Link-Bereitstellung, bei der das Feld des übergeordneten Datensatzes die ID des verknüpften Datensatzes speichert. Nehmen wir den Reader als Beispiel. Wer ist es? Zunächst einmal ist es ein Mensch, und was hat ein Mensch? Das ist richtig! Der Geburtsort (den unsere Bibliothek aus irgendeinem Grund auch wissen wollte).

 /// user table { id: 'UUID', name: 'String', birth_place_id: 'UUID' }

Objekt

Sehr ähnlich dem Array von Objekten aus MultiSelectorField, aber wir speichern einen einzelnen zugehörigen Wert im Feld des übergeordneten Datensatzes. Die Nachteile sind die gleichen, auch die Pluspunkte werden im Folgenden kurz beschrieben.

Zeichenfolge

StringField speichert Zeichenfolgen. Dieses Feld verfügt über eine persönliche Einstellung, die für die Bequemlichkeit der Bearbeitung in Nanc verantwortlich ist – den Parameter, der die maximale Höhe des bearbeitbaren Feldes begrenzt. Wenn Ihr Text groß sein soll, ist es sinnvoll, ihn gar nicht anzugeben, dann passt sich das Feld an die Höhe des Textes an. Wenn Sie auf „Groß“ beschränkt sind, können Sie die Feldhöhe explizit (in Zeilen) angeben, dann ist dies immer der Fall. Und schließlich können Sie es für kurze Zeichenfolgen auf eine Zeile festlegen, dann wird das Feld nicht erweitert, egal wie viel Sie danach hineinschreiben.

Struktur

Mit StructureField können Sie eine Reihe typisierter Strukturen in Modelldatensätzen speichern. Sie bestimmen die Art der zu speichernden Daten und können diese einfach und unkompliziert verwalten. Die verfügbaren Typen für Strukturfelder sind absolut alles. So können Sie ganz einfach eine „Dynamic Structure Field Repeat“ erstellen. TODO: Innerhalb der Demo können nur „flache“ Felder zu StructureField hinzugefügt werden.

Bildschirm

ScreenField ist ein Feld, mit dem Sie eine komplette Anwendung in Flutter schreiben können, direkt in Nanc! Mit ScreenField können Sie die Benutzeroberfläche eines einzelnen ... Bildschirms beschreiben, ihn nach Belieben aktualisieren und dies jederzeit in wenigen Minuten tun – ohne das mühsame und nervenaufreibende Warten auf Bewertungen von Apple und Google.

Lassen Sie uns diese Art von Feld (und eigentlich einen ganz separaten funktionalen Ableger von Nanc) etwas detaillierter aufschlüsseln.

Dynamische Flutter-Apps

Mit ScreenField können Sie direkt in Ihrem Browser (und Ihrer IDE) eine Schnittstelle nahezu beliebiger Komplexität erstellen und dann – ohne eine Standardveröffentlichung vorzunehmen – den entsprechenden Bildschirm in Ihrer Anwendung aktualisieren. Wenn Sie Hypothesen schnell überprüfen müssen, ist dies eine großartige Funktion. Diese Funktionalität eignet sich hervorragend für relativ einfache (in Bezug auf die Logik) Seiten in Ihrer App, die jedoch häufig geändert werden müssen. In Zukunft wird diese Funktionalität so weit ausgebaut, dass Sie wirklich alles erstellen können, was Sie möchten, ohne Einschränkungen.

Lassen Sie uns nun alle Aspekte der Erstellung dynamischer Bildschirme mit Nanc durchgehen.

Interaktive Dokumentation

Es gibt viele Widgets in Flutter. Viele von ihnen. Was ist ein Widget? Es handelt sich um einen Funktionsbaustein, aus dem Sie Ihre Anwendung zusammenstellen. Es kann rein visueller Natur sein, oder es kann logisch sein – mit einem gewissen Verhalten im Inneren. Nanc bietet eine umfangreiche Liste implementierter Widgets, die Sie zum Erstellen Ihrer Benutzeroberfläche verwenden können. Aber je mehr Möglichkeiten es gibt, desto schwieriger ist es, mehr über sie zu erfahren ... Der Bildschirmeditor in Nanc bietet Ihnen Zugriff auf eine interaktive Dokumentation, in der Sie herausfinden können, welche Widgets derzeit implementiert sind, welche Parameter und konfigurierbaren Eigenschaften sie haben und, Sehen Sie direkt in der Dokumentation, wie sie sich auf das Erscheinungsbild der von Ihnen erstellten Benutzeroberfläche auswirken.

Einfachheit

Mit Nanc können Sie eine Schnittstelle in Echtzeit erstellen, aber am wichtigsten ist, dass Sie dies sehr einfach und schnell tun können (die Schnittstelle einer Demoanwendung dauerte etwas mehr als 2 Stunden). Es stellt sich jedoch die Frage: Wie erstellt man die Benutzeroberfläche selbst? Es gibt keine exotische Syntax zur Beschreibung der Benutzeroberfläche in Nanc und auch keine „zu“ einfachen Lösungen wie langes JSON, die dazu führen, dass Sie das Erstellen von Schnittstellen in Nanc hassen.

Das Ergebnis der Suche nach der besten Lösung ist eine einfache und unkomplizierte XML-Syntax. Alle Standard-Flutter-Widgets haben genau die gleichen Namen, jedoch in XML-Form. Das SizedBox Widget in Nanc wäre beispielsweise <sizedBox>...</sizedBox> und diese Regel gilt ausnahmslos für alle Widgets. Wenn das Widget über eine komplexe Eigenschaft verfügt, hat es denselben (oder einfacheren) Namen wie XML mit dem Präfix prop . Beispielsweise verfügt das Widget Container über eine komplexe Eigenschaft boxDecoration , die über eigene interne Eigenschaften verfügt. Diese Eigenschaft in Nanc sieht also wie folgt aus: <prop:decoration>...</prop:decoration> . Diese Regel gilt für alle komplexen Eigenschaften. Und der letzte Aspekt ist, dass relativ einfache Argumente XML-Tag-Parameter sind. Nehmen wir als Beispiel die gleiche SizedBox :

 <sizedBox width="50" height="50"> ... </sizedBox>

Für einige Widgets sind zusätzliche Argumente implementiert, um das Schreiben von Code zu vereinfachen, und für SizedBox ist es das Argument ize , das sowohl width als auch height festlegt.

Alles, was hier geschrieben steht, steht in der Online-Dokumentation. Wenn Sie also etwas vergessen oder etwas wissen möchten, schlagen Sie dort nach und finden dort Antworten auf alle Ihre Fragen.

Erweiterbarkeit

Implementieren Sie die Unterstützung für das neue Widget – eine Angelegenheit von 10 Minuten bis ein paar Stunden. Zu diesem Zeitpunkt sind fast alle grundlegenden Widgets implementiert, aus denen Sie eine komplexe Schnittstelle mit Logik erstellen können. Mit der Zeit werden alle in Flutter verfügbaren Widgets in Nanc implementiert, und Sie können wirklich alles tun. Aber das ist nicht alles. Sie können Ihre eigenen Widgets einfach und unkompliziert implementieren und in Nanc mit ein oder zwei Zeilen XML-Code verwenden. Beispielsweise gibt es in der Standard-Flutter-Bibliothek kein Widget, mit dem Sie den Karussell-Schieberegler einfach mit Bildern anzeigen können. Sie müssen selbst eine Implementierung schreiben oder eine solche Open-Source-Lösung verwenden. Und nachdem Sie alles implementiert haben, was Sie brauchen, können Sie Ihr Widget ganz einfach in Nanc integrieren und verwenden.

Die Macht

Nanc bietet mehr als nur die Möglichkeit, XML-Code in eine Schnittstelle in Flutter umzuwandeln. Nanc bietet Vorlagen- und Logikschreibfunktionen. Bedingtes Element-Rendering, Schleifenzeichnen, Tap-Handling – das ist bereits in der aktuellen 0.0.1 Version von Nanc enthalten.

Bisher ist der Logikteil ziemlich einfach – er unterstützt die Interaktion über Taps und die Ereignisbehandlung in Ihrem vorab geschriebenen „.dart“-Code – aber irgendwann wird dieser Teil von Nanc erheblich erweitert, sodass Sie Logik in Dart direkt im Browser schreiben können und sorgen Sie dafür, dass es auch in Ihrer Anwendung funktioniert.

Der Ansatz zur Handhabung von Benutzerklicks ist wie folgt: Sie können eine Liste von „Aktionen“ definieren, die der Benutzer in Ihrer App ausführen kann. Öffnen Sie beispielsweise den internen Anwendungsbildschirm, klicken Sie auf einen externen Link, zeigen Sie die SnackBar an, öffnen Sie ein modales Fenster und vieles mehr und erstellen Sie im Voraus einen Handler für solche Aktionen. Und dann nutzen Sie diese Aktion in Nanc auf jede gewünschte Weise. Weitere Informationen zur Ereignisbehandlung finden Sie in der Dokumentation zum InkWell Widget in Nanc.

Bequemlichkeit

Nanc verfügt über einen integrierten XML-Editor, der jedoch nicht sehr praktisch ist. Es ist (noch) nicht durchsuchbar, mit viel Code nicht sehr schnell und verfügt über keine automatische Vervollständigung. Wie kann man damit leben? Lassen Sie den Benutzer beispielsweise seine Lieblings-IDE verwenden und die Änderungen in Nanc in Echtzeit beobachten. Lassen Sie mich Ihnen zeigen, wie.

Und das ist das Web (mit dem Sie spielen müssen):

In der Zukunft wird die Unterstützung für die automatische Vervollständigung hinzugefügt, vielleicht in ferner Zukunft ... Ich habe mehrere Tage lang versucht, mich tief in das XML-Schema einzuarbeiten, konnte es aber bisher nicht 🤷🏼

Leistung

Separat möchte ich die Leistung erwähnen (Zeichnungsschnittstelle aus XML auf mobilen Geräten). Kurz gesagt, es ist identisch mit der Leistung von Flutter selbst, ohne jeglichen Mehraufwand. Im Moment ist der „Bildschirm“ eine träge gerenderte Liste von Widgets (SliverList), die asynchron erstellt wird. Später wird diese Implementierung verfeinert, um mit dem asynchronen Rendern von Widgets zu beginnen, sodass die zum Anzeigen des Inhalts erforderliche Zeit wiederum der Zeit entspricht, die zum Rendern des allerersten im XML beschriebenen Widgets benötigt wird.

Nanc-Demo-Apps

Allgemein

Um die Funktionen zu demonstrieren, wurde eine öffentliche Reihe von Demo-Apps erstellt, um zu zeigen, was mit Nanc derzeit erreicht werden kann. Dabei handelt es sich um eine Client-Anwendung auf Android und im Web (Letzteres spielt vorübergehend auch die Rolle einer iOS-Anwendung). Sowie die Nanc CMS-App. Lesen Sie weiter unten mehr darüber.

Links

• Web-Client
• Android-Client
• Nanc CMS

Klient

Client ist eine Client-Demoanwendung, die eine einzelne Bibliothek aus dem Nanc-Ökosystem verwendet. Mit dieser Bibliothek können Sie XML in eine Anwendungsschnittstelle in Flutter konvertieren. Diese Anwendung verfügt über nur einen Bildschirm, ist vollständig in Nanc erstellt und kann jederzeit und nach Bedarf ohne Lagerräume aktualisiert werden. Unten rechts befindet sich eine Schaltfläche mit einem Verbindungssymbol – diese ist für die Verbindung zum Demo-CMS zuständig. Mehr darüber, was diese „Verbindung“ sein wird, weiter unten.

Administrator

Admin ist eine Nanc-CMS-Demoanwendung mit einer zusätzlich implementierten Logikebene, die die Möglichkeit zur Synchronisierung mit Clients bietet (mehr zur Verbindung weiter unten). In der Nanc-CMS-Demoanwendung fungiert der Browser des Benutzers selbst und sein localStorage als „Backend“. Alles, was Sie hinzufügen oder ändern, wird nur in Ihrem Browser gespeichert. In Nanc-CMS können Sie Daten zu den vorhandenen Modellen ändern/erstellen/löschen (Sie werden sie sehen), und Sie können über die Schnittstelle Ihre eigenen Modelle erstellen und dasselbe mit ihnen tun.

Als SQL-Darstellung der bei der Erstellung dieser Demo verwendeten Datenmodelle können Sie sich an dem folgenden Screenshot orientieren:

Verbindungsmanager / „Verbindung“

Dieser Abschnitt bezieht sich ausschließlich auf die Logik der „Demo“ in den Client- und CMS-Anwendungen. Und es wurde implementiert, um die Erfahrung der Interaktion mit Nanc und den Prozess der Aktualisierung des Clients zu simulieren. Aber das Wichtigste zuerst.

In einem echten Produktionsprojekt könnten Sie Nanc folgendermaßen verwenden: Stellen Sie irgendwo eine statische Nanc-CMS-Anwendung mit implementierten API-Diensten bereit. Es würde mit Ihrem Backend kommunizieren und Sie würden Nanc nach Ihren Wünschen verwenden. Ihre Anwendung enthält eine Bibliothek aus dem Nanc-Ökosystem, mit der Sie die Schnittstelle rendern können. Sie haben ein Update durchgeführt – die App hat neuen Code aus Ihrem Backend geladen, aktualisiert – alle sind glücklich und zufrieden.

Um dieses Modell in Aktion zu zeigen, wird dasselbe implementiert, jedoch auf vereinfachte Weise:

Nanc CMS existiert statisch, liegt auf den Github-Seiten und Sie können es wie „im echten Leben“ verwenden, aber Ihr Browser fungiert als Backend. Das heißt, die APIs wurden so implementiert, dass sie „ins Netzwerk gehen“ – im Browser localStorage. Mit diesem Teil sind wir fertig, aber es gibt immer noch eine mobile Anwendung, die Ihnen irgendwie den Vorgang des „Aktualisierens“ zeigen muss.

Nun, hier kommt die „Verbindung“ ins Spiel. Kurz gesagt: Sie können eine direkte Verbindung zwischen jeder Nanc-Client-Demo-App und jeder Nanc-CMS-Demo-App herstellen. Dazu müssen Sie im CMS auf die Schaltfläche unten rechts mit dem QR-Code-Symbol klicken. Im erscheinenden Modalfenster sehen Sie den QR-Code. Als nächstes haben Sie zwei Stühle – Sie können diesen Code mit der mobilen (oder Browser-)Client-Anwendung scannen, indem Sie unten rechts auf die entsprechende Schaltfläche klicken, dann wird die Verbindung automatisch hergestellt. Oder Sie klicken auf den QR-Code und die für die Verbindung benötigten Daten werden in die Zwischenablage kopiert. Anschließend müssen Sie diese Daten in das Eingabefeld der mobilen Anwendung einfügen und durch Drücken der Schaltfläche eine Verbindung herstellen. Wenn die Verbindung hergestellt ist, werden Sie sich selbst verstehen. Danach können Sie mit der vorhandenen Landing Page machen, was Sie wollen, und die Änderungen in Echtzeit (nach dem Speichern) sehen – in der mobilen App.

Aber Sie sind nicht auf die Landing Page beschränkt. Sie können beliebige neue Modelle direkt im Browser erstellen, diese mit Inhalten füllen, und wenn Ihre Modelle über ein Feld zur Schnittstellenbeschreibung (Typ Bildschirm) verfügen, dann sehen Sie beim Speichern solcher Entitäten auch das Ergebnis in der Anwendung – das Der Bildschirm des neuen Modells ersetzt den vorhandenen Anwendungsbildschirm. Der einzige Punkt besteht darin, dass die Clientanwendung nicht weiß, um welche Art von Feld es sich bei Ihrem neu erstellten Datensatz handelt, und daher mögliche Bezeichner vorgeschrieben sind, bei denen es sich voraussichtlich um ScreenFields handelt.

Wenn Sie also einen Bildschirm völlig neu erstellen und in der Anwendung anzeigen möchten, verwenden Sie einen Wert aus der folgenden Liste als IdField-Wert:

• Bildschirm
• ui
• Seite
• Schnittstelle
• Markup
• Sicht

Wenn Sie etwas kaputt machen, setzen Sie einfach die admin.nanc.io- Daten zurück (Chrome: F12 -> Anwendung -> Anwendung -> Speicher -> Site-Daten löschen). Wenn Sie die Client-Anwendung erneut öffnen, wird immer der tatsächlich erstellte Bildschirmcode geladen für diese Demo. (Der Code Ihres Browsers wird nur geladen, wenn Sie eine Verbindung herstellen.)

Und zum Schluss noch ein kleines Beispiel für das Erstellen einer neuen Seite eines neuen Modells, das ein ScreenField enthält, und das Rendern in der Anwendung:

Was kommt als nächstes?

Die öffentliche Demo ist fertig. Der Einführungsartikel ist geschrieben. Zukünftige Pläne für Nanc bestehen darin, die funktionale Integrität des Schnittstellenansatzes zur Modellerstellung zu vervollständigen und die Konfiguration aller Felder – Enum, Selector und MultiSelector – zu ermöglichen. Beheben Sie bekannte Fehler, z. B. das Ändern der Position von Elementen in StructureField. Dann „bla bla bla“ und dann „so und so“. Der Rückstand wird mindestens für das nächste halbe Jahr ausreichen, aber das weitere Modell der Funktionserweiterung wird sich an den Kundenbedürfnissen orientieren. Wenn Sie also Ideen/Kritiken/gefundene Fehler (und davon gibt es viele) /irgendetwas anderes haben – Bitte füllen Sie das Formular aus. Der Link dazu finden Sie in der Kunden-Demo-Anwendung.

Wenn Sie an den Funktionen von Nanc interessiert sind und an einer Zusammenarbeit interessiert sind, füllen Sie auch das Formular aus und wir werden uns auf jeden Fall unterhalten.