<\/p>\r\n
Unsere Anwendung<\/h2>\r\n
Ich m\u00f6chte kein neues Hello World oder Bookstore Beispiel erstellen, um Graphql, .net und React zu zeigen. Ich m\u00f6chte real existierende Benutzeranforderungen l\u00f6sen, die wir in unserem Team haben, um einen echten Anwendungsfall zu haben. Mit allen Vor- und Nachteilen.<\/p>\r\n
Das Home-Office von 2020 bis 2021 hat unseren Lebensstil und unsere Gewohnheiten ver\u00e4ndert. Vielleicht waren die IT-Leute die einzigen, die das nicht bemerkt haben. Aber manchmal m\u00fcssen auch wir noch ein paar Worte miteinander wechseln, ein paar News austauschen, neue Tools, Frameworks und coole Funktionen diskutieren. Seit langem nutzt unser Team einen speziellen Chat in MS Teams, um Informationen \u00fcber Wissenswertes, Artikel und andere n\u00fctzliche Informationen auszutauschen. Aber ein solcher Chat ist nicht der richtige Ort f\u00fcr eine „Wissensdatenbank“.<\/p>\r\n
Eine Recherche nach vorgefertigten L\u00f6sungen zeigte, dass fertige „Wissensdatenbanken“ eine Vielzahl von Tools mit einem gemeinsamen Nachteil boten – alle diese Anwendungen wurden nicht von uns entwickelt. Lassen Sie uns diesen Nachteil beseitigen und unsere eigene Wissensdatenbank mit blackjack und Hotchocolate erstellen. Und sie „VedaVersum“ nennen! Veda = Wissen | Versum = Universum.<\/p>\r\n
Unsere Anwendung wird haben:<\/p>\r\n
- \r\n
- Authentifizierungsmechanismus jeden Nutzerlogin.<\/li>\r\n
- Anzeige von Kartenlisten. Jede Karte soll einen Text und einige Metadaten mit Erstellungszeitpunkt, erstelltem Benutzer, zugewiesenem Benutzer (optional) und zugeh\u00f6riger Karte (optional) enthalten<\/li>\r\n
- Panel mit Avatar und Namen und „Glockensymbol“, das anzeigt, ob Sie eine zugewiesene Karte haben<\/li>\r\n
- \u00a0„Wer ist online“-Panel. Sie k\u00f6nnen sehen, wie andere Nutzer in Echtzeit kommen und gehen.<\/li>\r\n<\/ul>\r\n
Warum .Net 6.0?<\/h2>\r\n
Da wir eine dezentrale Anwendung erstellen wollen, die die gleichzeitige Arbeit mehrerer Benutzer unterst\u00fctzen soll, ben\u00f6tigen wir einen „Backend-Dienst“. Wenn wir von Backend sprechen, meinen wir Stabilit\u00e4t, Zuverl\u00e4ssigkeit und Leistung. Es gibt nur wenige Plattformen, die solche Optionen bieten k\u00f6nnen. .Net von Microsoft ist einer der ausgereiften Player auf diesem Gebiet. Und trotz seiner Reife, ist es mit seiner leichtgewichtigen, plattform\u00fcbergreifenden Version 6.0 so aktuell wie nie zuvor. Microsoft hat viel getan, um die Einstiegsschwelle in die Technologie zu vereinfachen. Es wurden zahlreiche Tutorials erstellt und die Einrichtung von Werkzeugen und Entwicklungsumgebungen vereinfacht. Microsoft hat bis heute die besten IDEs f\u00fcr Entwickler gebaut. Sie k\u00f6nnen das klassische Visual Studio und Visual Studio Code oder sogar jede beliebige IDE und Befehlszeilenschnittstelle verwenden. Und die gerade ver\u00f6ffentlichte neue .net Version 6.0 hat offiziellen Langzeitsupport von Microsoft.\u00a0 Viele Entwickler fangen daher an, .Net in ihren neuen Projekten zu verwenden. Aber es bleibt immer noch das gute alte .Net mit seiner Leistung, der riesigen Codebasis und der gro\u00dfen Anzahl von Drittanbieter-Bibliotheken. Und es gibt immer noch-das-gleiche-C# mit jahrzehntelanger klassischer Programmierung, OOP-Implementierung, Patterns und all den Features, die „b\u00e4rtige Programmierer“ lieben. Also, ich habe mich hinrei\u00dfen lassen. F\u00fcr unsere Anwendung brauchen wir einen klassischen Webserver. Das Asp.Net-Projekt passt hier zu unseren Anforderungen.<\/p>\r\n
Warum GraphQL?<\/h2>\r\n
GrapQL<\/a> ist eine Opensource Abfragesprache f\u00fcr die Web API von Facebook. Sie gew\u00e4hrleistet mehr Flexibilit\u00e4t und Effizienz f\u00fcr die App-Entwickler als die traditionelle REST-API. Sie k\u00f6nnen Abfragen erstellen und alle Daten oder bestimmte Teilmengen von Daten, die Sie ben\u00f6tigen, mit einer Anfrage abrufen. Der GraphQL-Server liefert Ihnen genau die Daten, die Sie angefordert haben. Dadurch wird das Problem des \u00dcberabrufs beseitigt. Subscriptions geh\u00f6ren zu den weiteren GraphQL Killing Features. Die App-Entwickler sind durch den Vorteil einer ganzen Abfragesprache viel flexibler, ohne dass sie auf API-Anpassungen oder -\u00c4nderungen warten m\u00fcssen.\u00a0 Wir werden sie in unserer L\u00f6sung verwenden, um alle Nutzer \u00fcber Karten\u00e4nderungen, Neuzug\u00e4nge und wenn jemand Ihnen eine Karte zugewiesen hat zu informieren. Auch mit GraphQL haben wir eine Menge anderer angenehmer Out-of-the-Box-Funktionen. Wie z.B. Typ\u00fcberpr\u00fcfung, Spielplatz-IDE und eine automatisch generierte API-Dokumentation.<\/p>\r\n
Warum React?<\/h2>\r\n
Single Page Applications auf Basis von JavaScript-Frameworks sind fest in unser Leben getreten und haben altmodische UI-Konzepte hinter sich gelassen. Auch hier gibt es ein paar Giganten, die unter den Front-End-Entwicklern sehr beliebt sind. Angular von Google und React von Facebook. Dies sind hervorragende UI-Technologien f\u00fcr die Erstellung interaktiver Anwendungen f\u00fcr das Web, mobile und andere Plattformen. Heutzutage steigt die Bekanntheit von React von Tag zu Tag an. Es wird von Facebook unterst\u00fctzt und hat eine wachsende Community. Beim Vergleich von React und Angular habe ich festgestellt, dass React leichtgewichtiger, einfacher und deklarativer ist, weil es eine UI-Bibliothek und kein UI-Framework wie Angular ist. Und im Falle unserer einfachen Anwendung k\u00f6nnen wir mit React eine leistungsstarke UI mit weniger Aufwand erstellen.<\/p>\r\n
<\/p>\r\n
Der Aufbau der Anwendung<\/h2>\r\n
Hier sieht man die grundlegende Architektur der Anwendung:<\/p>\r\n
![\"Application](\"https:\/\/www.centigrade.de\/wordpress\/wp-content\/uploads\/Bild1.png\")
<\/p>\r\nUnsere Anwendung wird ein Backend mit GraphQL API haben, das Entit\u00e4ten in einer Datenbank speichert. Und Single Page Application (SPA)<\/a> Client, der mit der API kommunizieren wird. In diesem Artikel werden wir uns auf das Backend konzentrieren. Unser Backend wird zwei Entit\u00e4ten haben – Benutzer<\/em> und VedaVersumCard<\/em>. GraphQL wird einige Abfragen haben, um Benutzer- und Kartenlisten zu erhalten. Und Mutation zum Erstellen oder Aktualisieren der Karte. Und zwei Subscriptions – UserAction<\/em> (wer kam oder ging), und CardChanged<\/em>. Alle Details k\u00f6nnen Sie unten sehen.<\/p>\r\n
Los gehts!<\/h2>\r\n
Nachfolgend ist eine Beschreibung von allen Schritten, um ein Projekt von Grund auf selbst zu erstellen. Den fertigen Quellcode f\u00fcr diese L\u00f6sung gibt es auf GitHub unter diesem Link<\/a><\/p>\r\n
Im Artikel werden wir ein Backend mit GraphQL API von Grund auf erstellen, los gehts!<\/p>\r\n
Zuallererst sollten Sie .Net 6.0 SDK<\/a> installiert haben. Sie k\u00f6nnen Visual Studio 22<\/a> oder VS Code<\/a> (oder jede andere IDE, die Sie m\u00f6gen) mit Dotnet CLI<\/a> verwenden.<\/p>\r\n
Wir erstellen das Projekt „ASP.NET Core Empty“ mit dem Framework „ASP.NET Core 6.0“ und nennen es VedaVersum<\/em><\/p>\r\n
In Visual Studio k\u00f6nnen wir ein paar einfachen Schritten folgen – starten Sie „Neues Projekt“, w\u00e4hlen Sie „ASP.Net Core Web Application“, dann „ASP.NET Core Empty“, w\u00e4hlen Sie das Zielnetzwerk und geben Sie dem Projekt einen Namen.\u00a0<\/p>\r\n
Wenn Sie VS Code verwenden, \u00f6ffnen Sie die Befehlszeile und f\u00fchren Sie diese Befehle aus:<\/p>\r\n
md VedaVersum\r\ncd VedaVersum\r\ndotnet new web\r\ncode .<\/pre>\r\n
Damit wird eine einfache ASP.NET-Anwendung mit 2 Klassen erstellt – Program<\/em> With Main<\/em> -Methode, die den Webhost erstellt und ausf\u00fchrt. Und Startup, die 2 Methoden hat. Eine f\u00fcr die Einrichtung aller ben\u00f6tigten Dienste im Dependency Injection<\/em> Container<\/em> und die Zweite ist f\u00fcr die Einrichtung der HTTP Request Pipeline. So sieht die anf\u00e4ngliche Configure-Methode aus:<\/p>\r\n
<\/p>\r\n
\r\n\/\/ This method gets called by the runtime. Use this method to configure the HTTP request pipeline.\r\npublic void Configure(IApplicationBuilder app, IWebHostEnvironment env)\r\n{\r\n app.UseRouting();\r\n\r\n app.UseEndpoints(endpoints =>\r\n {\r\n endpoints.MapGet("\/", async context =>\r\n {\r\n await context.Response.WriteAsync("Hello World!");\r\n });\r\n });\r\n}\r\n\r\n<\/pre><\/div>\r\nASP.Net ist so aufgebaut, dass jede HTTP-Anfrage eine pipeline von Handlern namens Middleware.Configure<\/em> durchl\u00e4uft. Die Configure-Methode beschreibt, welche middleware an der pipeline beteiligt sein wird. Im Moment gibt es nur eine Routing-Middleware und einen einfachen Endpunkt-Handler, der die Anfrage an die Root-Adresse abf\u00e4ngt und als HTTP-Antwort den Klartext „Hello World“ zur\u00fcckgibt. Wir k\u00f6nnen die soeben erstellte Anwendung ausf\u00fchren (in VS Code mit dem Befehl dotnet run) und uns das „Hello World“ im Browser ansehen ?.<\/p>\r\n
So weit, so gut. Das Ger\u00fcst unserer API ist fertig, es ist an der Zeit, ihr etwas vern\u00fcnftiges hinzuzuf\u00fcgen. Beginnen wir mit unserem Datenmodell. Wir erstellen den Ordner Model in unserer L\u00f6sung und f\u00fcgen die Entit\u00e4ten User, VedaVersumCard, enum VedaVersumCardAction und CardActionMessage <\/em>hinzu.<\/em><\/p>\r\n
<\/p>\r\n
Eine GraphQL API erstellen<\/h2>\r\n
Nachdem wir die wichtigsten Entit\u00e4ten erstellt haben, ist es an der Zeit, unseren Benutzern die M\u00f6glichkeit zu geben, sie zu bedienen. Unser Backend sollte in der Lage sein, Standard-CRUD-Operationen durchzuf\u00fchren. Dazu geh\u00f6ren das Erstellen neuer Wissensdatenbankkarten, das Lesen vorhandener Karten, das Bearbeiten von Karten, das L\u00f6schen von Karten und die Benachrichtigung von Benutzern, wenn ihnen Karten zugewiesen wurden. In Bezug auf GraphQL sollten wir ein Schema und die Methoden definieren, die Daten \u00e4ndern (Mutations), Methoden, die Daten abfragen (Queries) und Push-Benachrichtigungen vom Server zum Client (Subscriptions). Um das Schema mit Queries, Mutations und Subscriptions mit allen bekannten Plattformen wie .Net zu implementieren, sollten wir Methoden implementieren, die Resolver genannt werden. Und es sollten auch Mapper von nativen Dotnet-Objekten in GraphQL object<\/em> und input<\/em> Typen vorhanden sein.<\/p>\r\n
Es gibt mehrere Drittanbieter-Bibliotheken f\u00fcr die Erstellung von GraphQL API mit .Net. Hier eine Liste<\/a>.<\/p>\r\n