Heim > Web-Frontend > js-Tutorial > NgSysV.Ein Leitfaden für junge Menschen zur Systementwicklung im Zeitalter der KI

NgSysV.Ein Leitfaden für junge Menschen zur Systementwicklung im Zeitalter der KI

Susan Sarandon
Freigeben: 2024-11-30 06:20:12
Original
425 Leute haben es durchsucht

NgSysV.A Young Person’s Guide to Systems Development in the Age of AI

Diese Beitragsserie ist auf NgateSystems.com indiziert. Dort finden Sie auch eine äußerst nützliche Stichwortsuchfunktion.

Letzte Bewertung: 24. November

1. Einführung

Hallo und herzlich willkommen! Ich hoffe, Sie finden hier, was Sie suchen.

Dieser Beitrag richtet sich an absolute Anfänger. Es deckt alles ab, was ich selbst gerne gewusst hätte, als ich anfing, an Websites und Datenbanken herumzubasteln. Vielleicht sind Sie noch in der Schule, oder älter und denken über einen Berufswechsel nach, oder vielleicht sind Sie im Ruhestand (aber noch jung im Herzen) und einfach nur neugierig. Wichtig ist, dass Sie einen jungen Geist haben, der offen für neue Ideen ist und Chancen schnell erkennt. Sie werden dies brauchen, weil die schiere Menge an neuen Ideen, die Sie aufnehmen müssen, fast überwältigend ist. Die Praxis moderner Informationssysteme ist ein perfekter Dschungel an Werkzeugen und Techniken. Schlimmer noch: Dieser Dschungel entwickelt sich in schwindelerregendem Tempo. Wo um alles in der Welt solltest du anfangen?

Diese Serie zielt darauf ab, Ihre Schwierigkeiten zu minimieren, indem sie einen bestimmten Weg durch diesen Dschungel vorschlägt – einen, der schnelle und nützliche Ergebnisse liefert, aber auch Fähigkeiten und Konzepte entwickelt, die es Ihnen ermöglichen, anschließend Ihren eigenen Weg zu gehen.

Erstaunlicherweise (und das hat mich immer wieder überrascht) sind die meisten Tools und Technologien, die ich hier beschreibe, kostenlos. Das Einzige, was Sie investieren müssen, ist Ihre persönliche Zeit. Leider wird dies kein unbedeutender Faktor sein, aber wie sie sagen: „Kein Schmerz, kein Gewinn!

Als weitere Ermutigung möchte ich jedoch auch sagen, dass Sie jetzt einen großartigen kostenlosen Verbündeten haben – den Allzweck-ChatBot. Diese Serie enthält einige absurd lange Beiträge voller langwieriger Anweisungen. Allerdings wären sie noch länger, wenn ich versucht hätte, die Schritte so detailliert zu beschreiben, wie Sie es verdienen. Ich kann jetzt sicher sein, dass Sie den Bot anrufen können, um Sie wieder auf den richtigen Weg zu bringen, wo auch immer Sie das Gefühl haben, ich hätte Sie zurückgelassen. Vor der Veröffentlichung von chatGPT und anderen Bots im Jahr 2022 hätte ich nicht gedacht, dass dies möglich wäre. Jetzt hat sich alles geändert. Eine Einführung zu Ihrem digitalen Nachhilfelehrer finden Sie in Beitrag 4.1. Derzeit empfehle ich Ihnen, chatGPT40 im kostenlosen Kontingent zu verwenden.

Nach alledem finden Sie hier eine Darstellung des Gesamtziels dieser Serie und einen Überblick über den Weg, den sie einschlagen möchte.

2. Ziele

Wir gehen davon aus, dass Sie eine Software entwickeln möchten, die bestimmte Informationen in einen Computer einliest, sie gezielt verarbeitet und die Ergebnisse dann auf einem Bildschirm anzeigt. Oh, und außerdem möchten Sie, dass jeder auf der Welt Ihr Werk nutzen kann. Das sollte sicherlich einfach genug sein ...

In der IT-Welt gibt es unzählige Möglichkeiten, diese einfache Aufgabe zu lösen. Meiner Erfahrung nach besteht die einfachste Möglichkeit jedoch darin, einen Internetbrowser wie Chrome oder Safari als „Launchpad“ für Ihre Anwendung zu verwenden. Das mag seltsam erscheinen, könnte man sagen. Benutzt nicht jeder freistehende „Apps“ auf seinen Mobiltelefonen?

Hier ist ein Grund: Sie möchten, dass Ihre Anwendung für Benutzer verfügbar ist, die auf jedem erdenklichen Gerät arbeiten – Laptop, Tablet, Desktop-Computer usw. Browser bieten eine hervorragende Möglichkeit, dies zu erreichen, indem sie Ihre Anwendung von Unterschieden isolieren in Hardware und Betriebssystemen. Sie bieten Ihnen außerdem eine ausgefeilte und praktische Umgebung zur Unterstützung der Logik Ihrer Anwendung. Apps hingegen sind an bestimmte Hardwareplattformen gebunden und stecken in hoher Komplexität.

Hier ist ein weiterer Grund: Sie möchten, dass die Informationen Ihrer Anwendung für Benutzer überall auf der Welt verfügbar sind. Im Internet gibt es bereits Browser, deren einziger Zweck darin besteht, den Informationsaustausch zu erleichtern. Aus diesem Grund nutzen große Unternehmen wie Amazon und Facebook sehr gerne Webbrowser als Plattformen für ihre Systeme.

Der von mir vorgeschlagene Weg führt also zu etwas, das heute allgemein als „Webapp“ bekannt ist, einer Software, die durch einfache Eingabe der „Adresse“ der Webapp in einen Webbrowser aktiviert wird. Diese Webanwendung wird in der Lage sein, dauerhafte Datenspeicher („Datenbanken“) zu verwalten und über eine „Anmelde“-Funktion Sicherheit für diese Daten bereitzustellen. Browserbasierte Chatbots sind ein hervorragendes Beispiel für den Einsatz der Webapp-Technologie.

Hier finden Sie einen Überblick über die Tools und Technologien, die Sie beherrschen müssen, um eine moderne Webanwendung zu erstellen:

  1. HTML – Hypertext Markup Language – dies ist die „Sprache“, mit der einem Browser mitgeteilt wird, wie die Ausgabe einer Webanwendung auf einem Computerbildschirm formatiert werden soll
  2. Eine IDE – eine interaktive Entwicklungsumgebung – das ist das Bearbeitungstool, mit dem Sie Ihren Code erstellen – Microsofts VSCode ist die IDE, die ich hier verwenden werde.
  3. Eine Programmiersprache- diese übersetzt das „Konzept“ Ihrer Anwendung in die digitale Umsetzung. Die Sprache, die ich in diesem Kurs verwenden werde, ist JavaScript
  4. Browser-Tools – diese ermöglichen es Ihnen, eine Webanwendung während der Ausführung zu überprüfen und zu debuggen. Ich verwende das Toolset im Chrome-Browser von Google.
  5. Ein Entwicklungsframework – darunter versteht man am besten ein Toolset, das es Ihnen ermöglicht, JavaScript effizient auf die besonderen Anforderungen der Webanwendungsentwicklung anzuwenden. Das Framework, das ich verwenden werde, heißt SvelteKit.
  6. Ein Server – dies ist der Remote-Host, der Ihren Webanwendungscode an Ihre Benutzer liefert. Es stellt außerdem Speicher für seine Daten bereit und kann ausgewählte Elemente seines Codes ausführen. Ich verwende Googles Firebase auf App Engine-Servern. Andere Plattformen sind verfügbar, aber Google Cloud bietet ein besonders großzügiges „kostenloses Kontingent“ an.

OK, anschnallen, los geht's ... Da Sie diesen Beitrag online lesen, gehe ich davon aus, dass Sie sich bereits einigermaßen an die Online-Welt gewöhnt haben. Für diesen Kurs benötigen Sie Zugang zu einem Desktop-Computer. Der Einfachheit halber habe ich angenommen, dass es sich dabei um einen Microsoft Windows-Laptop handelt. Ich bin sicher, dass Sie meine Anweisungen gegebenenfalls anpassen können, wenn dies nicht der Fall ist.

2.1 HTML (Hypertext Markup Language)

Sie entwickeln Software zur Anzeige von Text in einem Webbrowser. Sie möchten, dass dieser Text in verschiedenen eleganten Konfigurationen von Position, Farbe, Größe usw. angezeigt wird. Webbrowser ermöglichen es Ihnen, diese Konfigurationen festzulegen, indem Sie Textinhalte mit „Markup“-Codes umgeben, die bestimmen, wie der Inhalt angezeigt werden soll. Diese einfache Anordnung liefert überraschend starke Ergebnisse.

Sie können ein Beispiel erstellen, indem Sie die Anweisungen in eine Textdatei in einem einfachen Editor wie dem Notepad von Microsoft eingeben. Probieren Sie diese einfache Übung aus:

Geben Sie die folgende Zeile in Ihren bevorzugten Texteditor (z. B. das Windows-Dienstprogramm Notepad) ein und speichern Sie sie dann als Datei mit einer HTML-Erweiterung (z. B. „my-first-app.html“):

<h1>Hello there</h1>
Nach dem Login kopieren

Wenn Sie die Datei durch einen „Doppelklick“ auf ihren Eintrag im Windows Explorer „öffnen“, sollte Windows reagieren, indem es Ihren Standardbrowser öffnet und einen Bildschirm mit den Worten „Hallo“ anzeigt. Herzlichen Glückwunsch, Sie haben Ihre erste Webanwendung geschrieben (wenn auch eine, die niemand außer Ihnen sehen kann, aber wir werden das später beheben).

Wenn die Dinge hier nicht ganz wie erwartet funktionieren, ist dies ein guter Zeitpunkt, ChatGPT zu bitten, Ihnen bei der Behebung des Problems zu helfen. Das oben beschriebene Verfahren hängt von der Gerätekonfiguration ab. Sagen Sie ChatGPT, was Sie nicht verstehen oder was auf Ihrem speziellen Gerät nicht funktioniert, und Sie erfahren genau, was Sie tun müssen, um das Problem zu beheben.

Das

und

Markup-„Tags“ im obigen Beispiel sind HTML-Anweisungen, die dem Browser mitteilen, dass der von ihnen eingeschlossene Text als Überschrift angezeigt werden soll. Google für Informationen zu

und Sie werden eine Menge Tutorials und Ratschläge zum Erlernen von HTML finden. Ein ausgezeichneter Ausgangspunkt wäre „Getting Started with the Web“ von Mozilla.org. Eine weitere nützliche Seite ist das W3Schools HTML-Tutorial. W3schools-Websites sind interaktiv und ermöglichen Ihnen das Experimentieren mit der HTML-Syntax.

Wichtig ist, dass Sie in diesen Dokumenten erfahren, dass zahlreiche Qualifizierer zur Verfügung stehen, um die Aktion eines Tags zu ändern. Beispielsweise ist ein

Tag kann durch a> qualifiziert werden

2.2 Die IDE (Interaktive Entwicklungsumgebung)

Möglicherweise haben Sie gerade das Gefühl, dass Sie zum Schreiben Ihrer Webanwendung einige ziemlich große Dateien erstellen müssen. Webapp-Code ist ausführlich und Dateien mit Tausenden von Zeilen wären keine Seltenheit.

Sie könnten, wie im Beispiel oben gezeigt, diese Zeilen einfach in einen einfachen Texteditor eingeben, aber das wäre eine schlechte Idee. Browser sind gnadenlose Biester, und alle Rechtschreibfehler in Ihrem Code führen zum völligen Scheitern Ihrer Absichten. Idealerweise benötigen Sie einen spezialisierten Texteditor, der den Code überwacht, während Sie ihn eingeben, ihn formatiert und hervorhebt, sodass Sie seine Struktur besser kontrollieren können, und ihn vielleicht sogar für Sie schreibt.

Die IDE ist darauf ausgelegt, diese Bedürfnisse zu erfüllen – und noch viel mehr.

Es stehen zahlreiche IDEs zur Verfügung, ich empfehle jedoch den VSCode von Microsoft. Die Installation ist kostenlos und die Anwendung ist weit verbreitet. Auch hier ist es eine steile Lernkurve, aber Microsoft bietet eine hervorragende Online-Dokumentation.

Im kostenlosen VSCode-Paket finden Sie auch zahlreiche automatisierte Unterstützung – Tools zum Formatieren Ihres Codes und zum Bereitstellen einfacher Mechanismen zur automatischen Vervollständigung (z. B. für JavaScript-Anweisungen und Variablennamen). Prüfmechanismen erkennen Syntaxfehler und markieren undefinierte Variablen usw.

Die IDE bietet viele weitere nützliche Dienste. Bisher wird Ihre Anwendung durch eine einzelne .html-Datei dargestellt. In der Realität wird ein modernes Computersystem wahrscheinlich Hunderte von Dateien enthalten – wir bezeichnen die gesamte Baugruppe als „Projekt“. Die Verwaltung eines großen Projekts bringt viele herausfordernde Aufgaben mit sich, die nun alle in die Verantwortung der IDE fallen.

Angenommen, Sie möchten etwas ändern>

Angenommen, Sie möchten die letzten Änderungen an einer Datei verwerfen und sie auf einen früheren Status im Bearbeitungsverlauf zurücksetzen. VSCode verwaltet einen lokalen Dateiverlauf, den Sie verwenden können, um das Chaos zu beseitigen. Darüber hinaus lässt sich VSCode nahtlos mit einem Versionsverwaltungssystem namens Github verknüpfen, um sichere externe webbasierte „Checkpoint“-Kopien Ihres Projekts zu erstellen. Auf diese Weise sind Ihre Quelle und ihr Verlauf auch dann sicher, wenn Sie Ihren Laptop im Bus lassen.

Schließlich bietet VSCode die Plattform zum Ausführen Ihres Projekts mithilfe von Terminalsitzungen, die direkt mit dem Betriebssystem Ihres Geräts verknüpft sind. Sie werden wahrscheinlich viel Zeit in VSCode verbringen!

Dies könnte ein guter Zeitpunkt sein, VSCode auf Ihrem Gerät zu installieren und das Tutorial von Microsoft unter „Erste Schritte mit Visual Studio Code“ auszuprobieren

2.3 JavaScript

JavaScript ist eine großartige Sprache für Anfänger. Es ist leicht zu erlernen und funktioniert in vielen Situationen gut. Seine natürliche Heimat ist der Browser, wo er die durch die HTML-Abschnitte Ihrer Webanwendung definierten Datenstrukturen lesen und schreiben kann. Im Klartext: Es kann direkt auf dem Bildschirm lesen und schreiben. Es verfügt jedoch auch über die Fähigkeit, Datenspeicher auf Remote-Serverbasis zu lesen und in diese zu schreiben, sowohl aus dem Browser heraus als auch bei der Remote-Ausführung auf dem Server. Kurz gesagt, es ist so nützlich geworden, dass es möglicherweise die einzige Sprache ist, die Sie lernen müssen.

Lasst uns einen Anfang machen. JavaScript ist eine „interpretierte“ Sprache. Dies bedeutet, dass keine spezielle Vorverarbeitung erforderlich ist, um den Code für die Ausführung vorzubereiten. Sie können es direkt in Ihrer „Laufzeit-Engine“ starten und die Ergebnisse sofort sehen. Ihr einfacher Webbrowser ist ein Beispiel für eine JavaScript-Laufzeit-Engine. Sehen wir uns an, wie Sie dafür sorgen können, dass sich die Datei „my-first-app.html“, die Sie zuvor erstellt haben, „intelligent“ verhält, indem Sie etwas Javascript hinzufügen.

JavaScript erhält seine Fähigkeit, direkt auf dem Bildschirm zu lesen und zu schreiben, durch die strenge Natur der HTML-Syntax. Dadurch kann der Browser ein „Modell“ des Bildschirmlayouts erstellen – eine Baumstruktur namens „Domain Object Model“ (oder kurz „DOM“). Innerhalb des DOM sind die verschiedenen Zweige und Blätter des Baums alle einzeln durch JavaScript ansprechbar.

Hier ist ein Beispiel. Nehmen Sie die oben vorgestellte Datei my-first-app.html und bearbeiten Sie sie wie folgt:

<h1>



<p>Dieser Code macht die Ausgabe des Codes von der Tageszeit abhängig. Wenn Sie die Datei vor der Mittagszeit (insbesondere vor 12 Uhr mittags an einem bestimmten Tag) erneut ausführen, wird die Ausgabe blau angezeigt. Nach dem Mittagessen erscheint die Ausgabe rot. Herzlichen Glückwunsch, Sie haben Ihre erste „intelligente“ Webanwendung programmiert. </p><p>Die Zeilen zwischen dem HTML <script> und </script> Tags enthalten Ihr erstes Stück JavaScript-Code. Die Zeile, die mit „hourOfDay =“ beginnt, erstellt eine „Variable“, die ein „Datum“-„Objekt“ für die Laufzeit enthält. Ein „Objekt“ ist in Javascript ein komplexes Konzept, mit dem Sie sich irgendwann in der Zukunft gerne auseinandersetzen werden. Im Moment müssen Sie jedoch nur wissen, dass die Instanz des „Date“-Objekts, das bei der Ausführung Ihres Codes erstellt wird, irgendwo darin eine millisekundengenaue Darstellung der Tageszeit enthält. Darüber hinaus enthält das Objekt auch eine .getHours-„Methode“, die aus den Millisekundendaten eine Ganzzahl zwischen 0 und 23 extrahiert, die „Tageszeit“ darstellt. Die Javascript-Schlüsselwörter „if“ und „else“ in den folgenden Codezeilen stellen Logik bereit, um angemessen auf die Werte zu reagieren, auf die sie verweisen.

<p>Wenn Sie es als unbequem empfinden, bis zur Mittagszeit warten zu müssen, um die Farbwechsellogik zu testen, versuchen Sie, den Code zu ändern, um die Farbe zu wechseln, wenn die Minute eine gerade Zahl ist. Die „Methode“ zum Abrufen der Tagesminute ist getMinutes(). Das Javascript zum Testen, ob eine Zahl num gerade oder ungerade ist, ist if (num % 2 === 0). Sehen Sie nach, ob Sie den Code in my-first-app.html ändern können, um die Textfarbe zu ändern, wenn Sie die Seite nach Ablauf einer Minute aktualisieren.</p>

<p>Sie werden wahrscheinlich bemerkt haben, dass das <h1> -Tag in der ersten Zeile der Originalversion der Datei hat eine „id=“-Klausel erhalten. Dadurch wurde das Tag mit einer eindeutigen Zeichenfolge „beschriftet“ (in diesem Fall „test“). Der clevere Teil ist die document.getElementById('test')-Anweisung, die es JavaScript ermöglicht, den „Stil“ des „test“ <h1> zu ändern. Etikett. </p>

<p><em>Bevor Sie Angst davor haben, ein Leben lang mit den Anweisungen von document.getElementById('test') herumzuspielen, möchte ich Ihnen versichern, dass dies nicht notwendig sein wird. Der gesamte Verlauf der jüngsten Entwicklungen in der Softwareentwicklung ist darauf ausgelegt, Ihnen die Steuerung von Bildschirmlayouts durch <b>bedeutungsvolle</b> Sprachmuster zu ermöglichen. Diese vereinfachen die Aufgabe enorm. In dieser Beitragsreihe verwenden Sie, wie bereits erwähnt, ein „Code-Framework“ namens SvelteKit, um Ihre Systeme zu erstellen. Ein Beispiel hierfür finden Sie in Beitrag 2.1.</em></p>

<p>Wie erlangt man nun fließende JavaScript-Kenntnisse? Was Sie hier brauchen, ist ein gutes Buch und das, das ich empfehle, ist „Eloquent JavaScript“ von Marijn Haverbeke. </p>

<p>Lesen Sie dies online, wenn Sie müssen (die neueste Ausgabe finden Sie unter https://JavaScript .net/), aber es gibt nichts Besseres als den Komfort eines richtigen, gut geschriebenen Buches mit physischen Seiten, auf die Sie kritzeln können. Gebrauchte (und frühe) Ausgaben sind zum jetzigen Zeitpunkt in Ordnung und werden wahrscheinlich die beste (und einzige) Anfangsinvestition sein, die Sie für eine Weile tätigen müssen. Haverbeke wird die oben vorgestellten Konzepte „Objekt“, „Methode“, „Funktion“ und „Stil“ weitaus besser erklären können als alles, was ich mir erhoffen kann. </p><p>Wenn Sie jedoch immer noch entschlossen sind, online zu lernen, finde ich Mozillas Tutorial zu JavaScript-Grundlagen hervorragend.</p>

<p>Es wäre auch eine gute Idee, über ein Testprojekt für Ihre Arbeit nachzudenken. Spätere Beiträge in dieser Reihe werden einige künstliche Beispiele liefern, aber die Dinge ergeben nur dann einen Sinn, wenn Sie sie im Hinblick auf etwas Persönliches neu interpretieren können. Denken Sie jetzt darüber nach, welche Art von Daten dieses Projekt benötigen würde. Wie würde das dargestellt werden? Wie würden Benutzer damit interagieren?</p>

<h4>
  
  
  2.4 Browser-Tools
</h4>

<p>Es ist sehr unwahrscheinlich, dass Ihre Codierungsversuche beim ersten Mal richtig funktionieren.  Vielleicht entsprechen die Bildschirmlayouts nicht ganz Ihren Vorstellungen oder vielleicht stimmt etwas mit der Logik der Webanwendung nicht. Manchmal zeigt der Browser eine Fehlermeldung an, aber manchmal sitzt er nur da und schmollt. Wie regeln Sie das?</p>

<p>Die gute Nachricht ist, dass alle gängigen Browser über ein integriertes „Inspektionstool“ verfügen, mit dem Sie diese Probleme untersuchen können. Der „Inspektor“ liefert Ihnen Insiderinformationen über die Interpretation der Bildschirmlayoutdefinitionen durch den Browser und ermöglicht Ihnen die Überwachung der Ausführung clientseitiger JavaScript-Anweisungen. Im Fall von Google Chrome können Sie auf dieses Inspektionstool zugreifen, indem Sie einfach mit der rechten Maustaste auf den Browserbildschirm klicken und im daraufhin angezeigten Popup „Inspizieren“ auswählen. </p>

<p>Die schlechte Nachricht ist, dass sich das Inspektionstool beim ersten Kennenlernen als alarmierender Komplex aus Menüleisten und veränderbaren Fenstern entpuppt. Aber seien Sie versichert, dass Sie, wenn Sie erst einmal den Dreh raus haben, feststellen werden, dass die Arbeit mit diesem Tool eine Freude macht und dass es eine unschätzbare Ressource beim Aufspüren und Beheben von Problemen darstellt. Die vollständige Dokumentation finden Sie bei Google devtools.</p>

<p>Was das Layout betrifft, zeigt Ihnen der Inspektor anschaulich, wie die verschiedenen Parameter „Rand“, „Padding“ und „Breite“, die die Position eines Anzeigeelements bestimmen, vom Browser angewendet werden. Darüber hinaus bietet es ein Tool zum Experimentieren mit geeigneten Anpassungen.</p>

<p>Was logische Probleme betrifft, ermöglicht Ihnen der Inspektor das Setzen von „Haltepunkten“ in Ihrem JavaScript-Quellcode. Wenn diese vorhanden sind, wird durch die Aktualisierung der Webanwendung die Ausführung am ersten Haltepunkt angehalten und Sie können die Werte der Programmvariablen an diesem Punkt anzeigen. Sie haben dann die Möglichkeit, entweder Zeile für Zeile durch den nachfolgenden Code zu gehen oder zum nächsten Haltepunkt zu springen</p>

<p>Wenn Ihr Programm „abstürzt“, wird Ihnen der Inspektor sagen, was schief gelaufen ist.</p><p>In früheren Zeiten bestand die übliche Methode, um herauszufinden, was zu einem Logikproblem geführt hat, darin, „Protokollierungsanweisungen“ hinzuzufügen. Diese hätten den „Kontrollfluss“ durch das Programm verfolgt und Programmvariablenwerte an den Inspektionspunkten angezeigt. Wie Sie sich vorstellen können, war dies ein umständlicher Vorgang. Wenn ich jetzt eine Webanwendung im Browser „inspiziere“, ist es, als hätte ich die Rückseite einer Schweizer Uhr geöffnet und alle ihre Feinheiten zur Prüfung bereitgehalten. Das Debuggen macht jetzt so viel Spaß, dass ich mich fast darauf freue, Fehler in meinem Code zu bekommen!</p>

<h4>
  
  
  2,5 Sveltekit
</h4>

<p>Das in Abschnitt 2.3 oben vorgestellte Javascript-Beispiel verwendete eine hässliche document.getElementById("idName")-Methode, um in das DOM einer Webanwendung zu gelangen und die Eigenschaften des Elements "idName" zu ändern. Frameworks wie Sveltekit bieten eine viel benutzerfreundlichere und effizientere DOM-Schnittstelle. Sie ermöglichen es Ihnen, „aussagekräftigen“ Code für häufige Aufgaben zu schreiben, z. B. das Ein- und Ausblenden von Popups, das Anzeigen von Listen und das Erstellen des Browser-Tab-Verlaufs. Beispielsweise macht eine Svelte-Anweisung mit der Aufschrift „if popUpVisible displayPopup()“ (wenn auch mit etwas strengerer Syntax) das Popup sichtbar, wenn sich die Variable displayPopup auf true ändert.</p>

<p>Während der anfänglichen Entwicklung wird das Framework über einen „lokalen Server“ betrieben, den Sie in einer IDE-Terminalsitzung starten. Dies hat den magischen Effekt, dass ein Browserfenster beibehalten wird, das sich jedes Mal automatisch aktualisiert, wenn Sie den zugrunde liegenden Webanwendungscode ändern. </p>

<p>Mit dem Framework können Sie auch angeben, wo Webanwendungscode ausgeführt wird. Beispielsweise könnten Anweisungen, die in den Remotespeicher lesen und schreiben, je nach den Umständen am besten entweder lokal im Browser des Benutzers oder remote auf dem Server ausgeführt werden. Das interessiert Sie derzeit vielleicht nicht, wird aber wichtig, wenn Sie seriösen Code schreiben. Code, der im Browser ausgeführt wird, lässt sich leicht debuggen. Wenn Sie jedoch mit Effizienz- und Sicherheitsproblemen zu kämpfen haben, sind Sie möglicherweise froh über die Möglichkeit, ihn „serverseitig“ auszuführen. Mit Sveltekit können Sie solche Arrangements auf besonders elegante Weise liefern.</p>

<p>Wenn Sie bereit sind, Ihren Code zu implementieren, besteht der letzte Schritt des Frameworks darin, eine „gepackte“ Version Ihrer Anwendung zu „erstellen“. Dabei werden eine Reihe von Schritten zum Kompilieren, Bündeln und Optimieren Ihrer Anwendung zu einem „Paket“ ausgeführt, das für die Bereitstellung bereit ist. Dadurch wird sichergestellt, dass die bereitgestellte Webanwendung so klein, schnell und effizient wie möglich ist.</p>

<p>Das derzeit beliebteste Framework ist wahrscheinlich das React-System von Meta. Dies wurde etwa im Jahr 2010 ins Leben gerufen, um die Entwicklung von Facebook zu unterstützen. Die Idee funktionierte so gut, dass schnell Konkurrenten wie Vue, Angular und Next.js auftauchten. Sveltekit ist einer der Neuzugänge und ich verwende es hier, weil es besonders einfach zu bedienen ist. Es könnte für Sie von Interesse sein, die guten Zustimmungswerte in der Entwicklerumfrage 2024 von Stack Overflow zu beachten.</p><p><em>Nebenbei bemerken Sie vielleicht, dass ich manchmal über Svelteki spreche und dann den Eindruck erwecke, pervers zu etwas anderem namens Svelte zu wechseln. Svelte ist die „Sprache“, die von den Ingenieuren von svelte.dev entwickelt wurde, um Javascript zu „erweitern“ und das Schreiben effizienter Webanwendungen zu erleichtern. Sveltekit ist das Framework, das die Umgebung erstellt, in der Svelte-Webanwendungen ausgeführt werden.</em></p>

<h4>
  
  
  2.6 Firebase und App Engine
</h4>

<p>Alles, was Sie zum Abschluss der Entwicklungsphase eines Webanwendungsprojekts benötigen, kann auf einem bescheiden ausgestatteten Desktop-Computer bereitgestellt werden. Aber wenn Sie an dem Punkt angelangt sind, an dem Sie Ihr Projekt der erwartungsvollen Welt vorstellen möchten, benötigen Sie die Dienste eines speziellen „Back-End“-Webservers. Dies wird:</p>

Nach dem Login kopieren
  • Geben Sie einen „Endpunkt“ (d. h. eine URL im Web) an, von dem aus die ausführbaren Dateien Ihres Projekts für die lokale Ausführung in einem Browser bereitgestellt werden können.
  • Stellen Sie einen zentralen webbasierten Speicher für die Daten Ihres Projekts bereit. Höchstwahrscheinlich wird dies in einer strukturierten Datenbank gespeichert.
  • Stellen Sie eine schnelle und sichere Umgebung zum Ausführen sensibler Anwendungselemente bereit.

In diesem Kurs verwenden Sie:

  • Googles Anwendungsentwicklungsumgebung „Firebase“, um Zugriff auf „Firestore“-Tools zu erhalten, die Ihnen die Nutzung einer einfachen, strukturierten Datenbank ermöglichen
  • Googles „App Engine“-Umgebung zum Bereitstellen von Webanwendungscode und Hosten der Ausführung „serverseitiger“ Elemente Ihres SvelteKit-Projekts.

Da Sie Firestore von Anfang an verwenden, müssen Sie zunächst ein Firebase-Konto erstellen.

In der Vergangenheit haben Sie sich möglicherweise an einen „Internetdienstanbieter“ wie GoDaddy oder HostPapa gewandt, um Ihre Cloud-Dienste bereitzustellen. Während diese Dienste immer noch eine Rolle spielen und Ihnen über ihre Helpdesks sicherlich einen hervorragenden persönlichen Support bieten, bieten die Cloud-Plattformen ein besseres Rundum-Paket für Ihre aktuellen Zwecke.

3. Jetzt lesen Sie weiter

Dieser Kurs verläuft nun in zwei Hauptphasen. Der erste soll Sie mit den Grundlagen von HTML, Javascript, Firebase und Firestore vertraut machen. Wenn Sie dieses Spiel noch nicht kennen, gibt es hier viel zu lernen und viel Potenzial, um verwirrt zu werden. Rechnen Sie damit, dass Sie eine Weile damit verbringen werden. Nehmen Sie sich Zeit und nutzen Sie Ihren ChatBot-Lehrer intensiv.

Sobald Sie damit fertig sind, führt Sie die zweite Stufe in einige der fortgeschritteneren Elemente des Sveltekit-Webapp-Designs ein. Wenn Sie dies erfolgreich abschließen, wissen Sie das meiste, was Sie zum Entwickeln einer nützlichen Webanwendung benötigen.

Jetzt geht es also weiter. Der erste Schritt besteht darin, SvelteKit auf Ihrem lokalen Computer zu installieren und sich mit den Techniken zur Webanwendungsentwicklung vertraut zu machen. Anweisungen finden Sie in Beitrag 2.1.

Das obige ist der detaillierte Inhalt vonNgSysV.Ein Leitfaden für junge Menschen zur Systementwicklung im Zeitalter der KI. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!

Quelle:dev.to
Erklärung dieser Website
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn
Neueste Artikel des Autors
Beliebte Tutorials
Mehr>
Neueste Downloads
Mehr>
Web-Effekte
Quellcode der Website
Website-Materialien
Frontend-Vorlage