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>

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>

• 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!