Eingabeaufforderung. Aufbauen. Shipp. :: KI für Web-Devs. Dreifach schneller erstellen.

1. Trailer: Sind Sie ein Webentwickler? Ja, dann lass mich dich etwas fragen. Fühlt sich Programmieren manchmal zu langsam an? Verbringst du Stunden bei Stack oder Flow? Möchten Sie schneller, viel schneller bauen? Ja. Dann habe ich etwas für dich. Wir stellen Prompt vor, Build Ship KI für Webentwickler, dreimal schneller gebaut Ein neuer Kurs, der Ihnen helfen soll, schneller zu programmieren. In diesem Kurs werde ich Ihnen solide KI-Grundlagen beibringen. Fünf Möglichkeiten, wie KI Ihnen helfen kann. Die Arten von KI-Codierungstools. Wir werden eine kleine Web-App erstellen, die dem Webentwicklungs-Workflow mit KI folgt . Außerdem stellst du dich zwei Herausforderungen, bei denen du selbst Web-Apps erstellst. Für wen ist das? Webentwickler aller Qualifikationsstufen. Jeder, der Code auch außerhalb von Webdv schreibt. Stellen Sie sich vor, Sie verbringen weniger Zeit Bugs und mehr Zeit mit dem eigentlichen Bauen Dieser Kurs hilft Ihnen dabei, Ihr Projekt dreimal schneller zu versenden . unterrichte seit 2023 KI für Webentwickler, und ich kann mit Sicherheit sagen, dass Sie hinterherhinken, wenn Sie KI nicht für Ihren täglichen Arbeitsablauf verwenden wenn Sie KI nicht für Ihren täglichen Arbeitsablauf Aber mach dir keine Sorgen. Ich zeige dir alles und bringe dir alles bei , was du brauchst, um weiterzukommen. Ich freue mich, dich in meinem Kurs zu sehen. 2. Modul 2: Einführung: Hallo und willkommen zum Modul Nummer zwei. In diesem Modul werden wir die folgenden Dinge untersuchen. Wir werden mit den Grundlagen der generativen KI und ihrer Funktionsweise beginnen. Dann werden wir zu den beliebten Allzweck-KIs übergehen. Wir werden jeden einzelnen von ihnen ausführlich besprechen. Als Nächstes werden wir zu den vier Arten der Interaktion mit KI übergehen den vier Arten der Interaktion mit KI und mit einer zeitnahen Architektur abschließen. Also lass uns loslegen. 3. Kurseinheit 1: Hallo und willkommen zur ersten Lektion. In dieser Lektion werden wir darüber sprechen, wie General VI. tatsächlich funktioniert. Und natürlich werden wir uns auf ein textbasiertes allgemeines vI konzentrieren , denn Code ist Text, okay? Nun, lassen Sie mich Ihnen ein paar Folien aus der offiziellen Google-Erklärung zeigen . Wie Google erklärt, also generative Sprachmodelle, Text. Diese Modelle lernen anhand der Trainingsdaten etwas über Muster in der Sprache. Das bedeutet also, dass der Techniker die Maschine mit den großen, riesigen Terabytes an Textdaten füttert den großen, riesigen Terabytes an Textdaten Und dann lernt die Maschine anhand dieser großen Textblöcke. Und die Antworten, die von dieser Maschine kommen, werden tatsächlich vorhergesagt, nicht nach einer Formel berechnet, sondern am ehesten vorhergesagt. Lassen Sie mich das noch einmal betonen. Es ist eine Vorhersage, aber keine exakte Berechnung. Also nochmal das Beispiel von Google. Sehen wir uns also diesen Satz an. Ich mache ein Sandwich mit Erdnussbutter, und wie Sie sehen können, gibt es verschiedene Optionen, Variationen wie Gelee, Marmelade , Banane usw. Das heißt, wenn Sie die Maschine nach dieser Aufforderung fragen, könnten Sie jede dieser Antworten erhalten Das ist wichtig. Das ist die Sache. Okay? Lassen Sie mich Ihnen noch ein Beispiel zeigen. Ich habe Chat GPT gebeten, alle Varianten aufzulisten , auf die diese Person antworten kann Hallo. Und wie Sie sehen können, haben wir zufällige Antworten, eins, zwei, drei, vier, fünf, sechs, sieben, acht. Wir haben freundliche Antworten, formell, lustig, energisch, sarkastisch, kurz Und wie Sie sehen können, mehrere Dutzend verschiedene Antworten. Wie Sie sehen, könnten Sie möglicherweise einige dieser Antworten erhalten , wenn Sie einen Text zur Generierung von A mit Hallo auffordern . Auch hier handelt es sich nicht um eine Berechnung, sondern um eine Vorhersage. Wir haben also verschiedene Varianten, die Sie bekommen können. Okay, also warum es wichtig ist, das Grundprinzip zu verstehen, wie sprachgenerative Sprachmodelle funktionieren Denn später, wenn Sie mehr Erfahrung haben, könnten Sie möglicherweise Ihre eigene sprachgenerative KI mit Ihrem benutzerdefinierten Datensatz erstellen Ihre eigene sprachgenerative KI mit Ihrem benutzerdefinierten Datensatz Warum würdest du so etwas tun wollen? Denn vielleicht könnten Sie ein Chatboard für ein Unternehmen erstellen , oder vielleicht möchten Sie selbst eine Webanwendung zur Codegenerierung erstellen, für die Sie Antworten wie Nx Js oder NextGS oder C plus plus erstellen möchten , und Sie möchten, dass die Antworten so präzise wie möglich sind In diesem Fall müssen Sie also Ihren Computer mit einem bestimmten Datensatz für diese Domain trainieren , würde ich sagen Es wäre also wie Dokumentationen für die Sprache, die Programmiersprache Es könnte wie Bücher sein, Bücher über diese Sprache und, Sie wissen schon, Beispiele Es ist also wichtig zu verstehen. 4. Kurseinheit 2: Hallo. Willkommen zu Lektion Nummer zwei. In dieser Lektion werden wir uns den beliebten Allzweck-KIs befassen. Mit „allgemein“ meine ich, dass diese KIs verschiedene Aufgaben lösen können und nicht nur die Codierungsaufgaben. Der erste und berühmteste ist der Chat GPT, und der Chat GPT war wahrscheinlich der erste auf dem Markt, und deshalb ist er so Also willkommen im Chat GPT. In der Mitte haben wir normalerweise das Eingabefeld, in das wir unsere Eingabeaufforderung und dann einige zusätzliche Dinge eingeben können unsere Eingabeaufforderung und dann einige zusätzliche Dinge eingeben , wie Dateien hochladen, im Internet suchen, Modelle für fortgeschrittenere Dinge bei der Verwendung des Sprachmodus für die Spracherkennung nachvollziehen Also lass uns etwas mit Chat GPT versuchen. Also werden wir HatGPT bitten, das grundlegende HTML-Boilerplate zu codieren . Und wie Sie sehen können, hat es erfolgreich funktioniert. Wir sehen also die grundlegende HTML-Standardvorlage, und wir können sie bei Bedarf kopieren Und normalerweise gibt es dort unten auch einige Kommentare. Cloud ist bekanntermaßen die beste Option für Webentwickler und andere Programmierprofis, und viele der Programmierassistenten und KI-Code-Editoren nutzen die Cloud unter der Haube. Wir befinden uns also in der Cloud, und wie Sie erneut sehen können, ähnelt die Benutzeroberfläche sehr stark der AGBT Wir haben das Eingabefeld in der Mitte. Dann können Sie zum Beispiel das Modell wählen. Hier sind die kostenlosen Modelle, die Pro Models. Sie könnten den Stil der Sprache wählen. Wie ich bereits erwähnt habe, ist es im Grunde die beste Wahl für Webentwickler, und deshalb haben sie den Github integriert. Sie könnten also Ihr Github-Konto hier verbinden, und es wird wahrscheinlich einige Dinge mit Ihrem Code von Ihrem Github tun . Auch hier könnten Sie einen Screenshot aufnehmen oder eine Datei hinzufügen. Lassen Sie uns also überprüfen, wie Cloud funktioniert. Wie Sie sehen können, haben wir Claude aufgefordert CSS-Texteigenschaften aufzulisten. Und Sie haben wahrscheinlich bemerkt , dass es sich ein bisschen von dem GBT unterscheidet Ja, das ist richtig, denn Claude gibt uns etwas, das man Artefakte nennt, und das sind quasi Dokumente Und wie Sie in diesem Dokument sehen können, haben wir eine sehr nette Antwort , weil es einige Gruppierungen für Spaß, Textformatierung, Schatten usw. enthält und ein kleines Beispiel, das Sie natürlich einfach so und ein kleines Beispiel, das kopieren können Das war also Claude. Gehen wir zum nächsten. Also Nummer drei ist Gemini. Google Gemini wurde von Google entwickelt und produziert. Also willkommen im Gemini und wie Sie wieder sehen können, haben wir das Eingabefeld und zusätzliche Dinge wie das Hinzufügen von Dateien Sie könnten dies von Google Drive, von einem lokalen Computer aus und einfach ein Bild hinzufügen von einem lokalen Computer aus und einfach ein Bild Und natürlich könnten Sie Ihr Mikrofon für die Spracherkennung verwenden Ihr Mikrofon für die . Also lass uns gleich loslegen. Also haben wir Gemini gebeten zu erklären, ob sonst die Konstruktion in JavaScript funktioniert. Lass uns sehen Wie Sie sehen können, ist es Argumentation, es ist Denken, und wir haben die grundlegende Erklärung genau hier. Wir haben den Basiscode , den wir kopieren können Und eines der Dinge , die Gemini tut, ist, dass es dir manchmal den Link zu dem eigentlichen Artikel gibt, aus dem es sein Wissen bezogen hat Also mehr Beispiele und noch mehr Beispiele. Gehen wir also zum nächsten. Und die letzten beiden, die wir uns ansehen werden, sind Deep Sik. Deep Sik wurde vor ein paar Monaten erfunden, es wurde in China erfunden, und es ist im Grunde dem GPT sehr ähnlich, aber es ist bekannt für seine kostenlosen APIs Wie Sie sehen können, sieht es ziemlich nach einem Chat-GPT aus, wo wir das Eingabefeld, das DepthKrasoning-Modell, haben, das Also lass uns jetzt schreiben. Deshalb haben wir Deepsk gebeten , beliebte Jazz-Frameworks aufzulisten. Lass uns sehen Es hat also funktioniert, aber wie Sie wahrscheinlich bemerkt haben, es einige Zeit gedauert, etwas länger als andere Tools um die Antwort tatsächlich zu geben, aber es ist immer noch ziemlich gut. Fazit. Die beste Lösung für die allgemeine KI, einschließlich der Codierung, ist also HAGPT Warum? Weil es eine unbegrenzte Anzahl von Nachrichten hat und die Qualität der Antworten und die Geschwindigkeit ziemlich gut sind. Und was das Codieren angeht, ist das Gerinnsel der richtige Weg Beachten Sie, dass es einige Einschränkungen in Bezug auf die Anzahl der Nachrichten gibt , die Sie verwenden können 5. Kurseinheit 3: Hallo und willkommen zu Lektion Nummer drei. In dieser Lektion werden wir über vier Arten der Interaktion mit KI sprechen . Mit Interaktion meine ich einfach, wie Sie Ihre Informationen, Ihren Abschlussball, an die KI weitergeben können . Die erste und wahrscheinlich naheliegendste, beliebteste Art , mit KI zu sprechen, mit KI zu interagieren , ist also naheliegendste, beliebteste Art , mit KI zu sprechen, mit KI Text. Wir haben bereits gesehen, dass, wenn du einfach etwas schreibst, etwas aufforderst und KI dir antwortet. Schauen wir uns das einfach kurz an. Wir sind also im Chat, GPT, UI und lassen Sie uns noch einmal eine einfache Aufforderung machen Wir haben also zu den folgenden Dingen aufgefordert. Erläutern Sie anhand von Beispielen, was CSS erwähnt. Wie Sie sehen können, hat das ha GPT angefangen zu reagieren. Also hier haben wir die Definition. Jetzt haben wir die grundlegende CSS-Animation, das Beispiel für einen Farbwechsel mit Code. Erklärung. Zweites Beispiel mit beweglichem Element und sogar ein drittes Beispiel. Und am Ende erhalten wir, wie Sie sehen können, immer noch die CSS-Animationseigenschaften wie eine Tabelle mit einer Beschreibung für jede Eigenschaft. Die zweite Möglichkeit, mit KI zu interagieren, ist also Audio. Um das tun zu können, müssen Sie ein Mikrofon an Ihrem Telefon oder Computer haben. Wir sind im Chat, GPT, und wie Sie sehen können, hat es dieses Symbol, das den Sprachmodus verwendet Also lass uns klicken. Und wie Sie sehen können, ist unser Mikrofonsymbol im Moment ausgeschaltet. Wir befinden uns also einfach im Audiomodus. Also lass es uns einschalten. Hallo, Chad GBT Hallo, wie geht's? Gut. Danke. Könnten Sie bitte den Unterschied zwischen React JS und Next Gs in einfachen Worten erklären React JS und Next Gs in einfachen Worten Natürlich ist ReactJS eine JavaScript-Bibliothek zum Erstellen von Benutzeroberflächen, hauptsächlich für Einzelseitenanwendungen Es hilft Ihnen, Komponenten zu erstellen , die ihren eigenen Status verwalten NextJS hingegen ist ein Framework, das auf React aufbaut Es bietet Funktionen wie serverseitiges Rendern, statische Seitengenerierung statische Seitengenerierung und einfaches Routing, wodurch es sich besser für die Erstellung produktionsreifer Webanwendungen eignet ReactJS ist also wie die Grundlage, und NextS ist wie ein erweitertes Toolkit, das darauf aufbaut Ich danke dir vielmals. Du bist willkommen. Wenn Sie weitere Fragen haben, können Sie diese gerne stellen. Wie Sie sehen können, haben wir gerade versucht, mit Chat und GPT zu sprechen, und wir haben sogar kurze Ergebnisse mit unserer Sprache und der Antwort Sie können zwar den Audiokanal verwenden, aber er ist nicht so gut zum Codieren geeignet Die nächste Art, wie wir mit EI interagieren können, ist das Bild. Das bedeutet, dass Sie ein Bild auf NAI hochladen und danach fragen oder auffordern können, etwas zu tun Diesmal werden wir also die Cloud verwenden. Ordnung. Also werden wir ein Bild hochladen, das so aussieht. Es ist, wie Sie sehen können, ein einfaches Kontaktformular. Also haben wir gerade die Bilddatei mit diesem Symbol hochgeladen . Schreiben Sie hier. Jetzt hat Cloud dieses Bild. Also müssen wir die Aufforderung schreiben. Die Aufforderung lautet also, das Formular auf dem Bild zu codieren , das ich hochgeladen habe. Also lass uns sehen. Wie Sie sehen können, wurde das Code-Artefakt mit den CSS-Klassen HDL und Tail Wing gestartet mit den CSS-Klassen HDL und Tail Wing Und Sie haben den Inhalt auch als Formularbild. Es sieht so aus. Also lass uns etwas anderes versuchen. Lassen Sie uns zu Cloud auffordern. Ich habe Cloud gebeten, eine Vorschau dieses Formulars zu erstellen. Wie Sie sehen können, hat Cloud diesen Vorschaumodus, Codemodus und Vorschaumodus. Und im Vorschaumodus können Sie manchmal die fertige Komponente tatsächlich in Aktion sehen . Auch hier ist es nicht so, dass es nicht jedes Mal funktioniert, aber manchmal könntest du Cloud fragen, etwa, kannst du eine Vorschau dieses Formulars machen? Manchmal macht es das fast automatisch, wie Sie sehen können, weil das der React-Code ist und wenn wir versuchen, das nur mit HTML- und CSS-Formular zu tun , hat es nicht wirklich funktioniert, aber mit einer React-Komponente könnten Sie manchmal eine Vorschau Ihres Endergebnisses haben. Und die letzte Möglichkeit, den EI zu starten, ist ein Videokanal. Vorher haben wir also das Bild hochgeladen, und natürlich können Sie das Video hochladen, aber die Sache ist, dass es momentan nicht so beliebt so beliebt ist, weil es natürlich, wie Sie wahrscheinlich verstehen, eine sehr teure Art ist, eine KI zu verwenden, aber es ist Du könntest zum Beispiel das Video hochladen und eine auf KI spezialisierte KI für Videooperationen bitten , weißt du, das Video mit einigen Änderungen neu zu erstellen oder den Haupthelden des Videos nehmen und etwas machen, du weißt schon, mit diesem Charakter. In der Welt des Programmierens ist das nicht so üblich. Also die Schlussfolgerung, mein Freund, was eignet sich am besten zum Codieren? Was ist der beste Weg? Natürlich sind es Text und manchmal Bilder. 6. Kurseinheit 4: Hallo und willkommen zu Lektion Nummer vier: Prompt Architecture. In dieser Lektion werde ich Ihnen die Grundlagen des Prompt-Designs und der Prompt-Architektur erläutern . Die grundlegende Eingabeaufforderung besteht aus drei Teilen. Der erste ist Aufgabe. Der zweite Teil ist der Kontext und der dritte Teil ist ein Beispiel. Die Aufgabe ist ein obligatorischer Teil der Aufforderung, da ohne die Aufgabe die gesamte Aufforderung nutzlos ist Und das Beispiel einer Aufforderung, die nur aus der Aufgabe besteht, könnte Früchte genannt werden. Und es wird dir alle Früchte wie Apfel, Birne, Banane nennen. Sie könnten zum Beispiel einige Früchte aus den nördlichen Ländern, südlichen Ländern, afrikanischen Ländern, europäischen Ländern, Früchte aus den nördlichen Ländern, südlichen Ländern, afrikanischen Ländern, europäischen Ländern, Australien und Neuseeland benötigen. Es werden also alle möglichen Früchte sein. Der zweite Teil ist ein Kontext, und wie Sie sehen können, halte ich ihn für gut zu haben. Warum? Weil es eine Richtung vorgibt. Hier sagen wir tropische. Nennen Sie also Früchte, tropische. Also, Ihre Eingabeaufforderung hat einige Einschränkungen in irgendeiner Richtung. Und in diesem Fall wird KI nur Früchte benennen , die als tropisch gelten, oder? Und der dritte Teil ist ein Beispiel. Und wie Sie sehen können, ist es ein optionaler Teil. Das heißt, ohne Exemplar ist es immer noch ein guter Abschlussball, aber Exemplar könnte es etwas fokussierter machen Und hier geben wir ihm ein Beispiel, ein konkretes Beispiel als Mango Kombiniert klingt das nach Namensfrüchten, tropischen Früchten. Ein Beispiel ist Mango. Also hier sind meine persönlichen Bewertungen. Also, die Aufgabe geht zu 50% von 100 für die Wichtigkeit. Kontext bezieht sich auf die 40 und das Beispiel auf 10% Schauen wir uns also noch ein Beispiel an. Die Aufgabe besteht also darin, eine Stadt zu bauen. Natürlich wird die KI dir jede Art von Stadt bauen, zum Beispiel etwas aus bestehenden Städten, etwas aus alten antiken Städten, etwas aus alten antiken Städten die nicht mehr präsentiert werden, oder eine imaginäre Stadt aus ihrer eigenen Fantasie oder aus einem Spiel oder Buch Und jetzt zum Beispiel im Kontext einer Stadt, könnten wir sagen, dass sie viele Bäume, ein bewölktes, regnerisches und kühles Klima haben sollte bewölktes, regnerisches und kühles Klima Und jetzt werden wir natürlich nicht einige Städte aus sehr warmen Ländern sehen , andere aus sehr kalten Ländern. Und hier könnten wir tatsächlich hinzufügen, dass die Stadt wie eine echte Stadt von unserem Planeten sein sollte . Ein Beispiel, Seattle, und jetzt hat es, du weißt schon, eine bestimmte Richtung, in die man gehen kann Nehmen wir also noch ein Beispiel aus der Welt des Programmierens. Die Aufgabe könnte also darin bestehen, ein Formular zu erstellen. Und jetzt verstehen wir , dass das Formular eine sehr lange Form oder eine sehr kurze Form sein kann . Es könnte auf verschiedene Arten gestaltet werden, in verschiedenen Schriftarten, Farben und Größen In unserem Kontext haben wir einige Einschränkungen festgelegt. Zum Beispiel sollten wir ein Rückenwind-CSS haben. Schriftart sollte Popins sein, Farben sollten aus dem Google-Logo und die Felder sollten Name, E-Mail und fo Und jetzt fügen wir auch ein Beispiel hinzu , bei dem wir Aish quasi dirigieren , damit er sich von dem Bild inspirieren lassen kann , das wir hochgeladen haben Ich denke also, meine Freunde, jetzt habt ihr ein gutes Verständnis dafür wie man eine Aufforderung gestaltet Und auch hier könnten Sie es nicht nur beim Programmieren verwenden, sondern auch in Ihrem wirklichen Leben und bei verschiedenen Aufgaben. 7. Übung: Dieser Übungsstil. Und für dieses Modul haben Sie eine sehr kleine Aufgabe, nämlich eine einfache Eingabeaufforderung mit der richtigen Architektur zu erstellen einfache Eingabeaufforderung mit der richtigen Architektur und diese Eingabeaufforderung dann in vier verschiedenen Geneightees zu testen , die wir behandelt haben Das Ziel dieser Aufgabe besteht also darin, dass Sie die Mechanik der Eingabeaufforderung verstehen Um es Ihnen ein bisschen einfacher zu machen, lassen Sie mich die Aufgabe in kleine Schritte zerlegen Der erste Schritt besteht also darin, eine einfache Aufforderung zu erstellen, und es muss kein Programmieren sein, auch wenn das Programmieren ein bisschen besser sein wird weil es immer noch der Kurs für Codierung ist Der zweite Schritt besteht darin, die Regel 504010 anzuwenden, die wir in den vorherigen Lektionen behandelt haben Denken Sie an Aufgabe, Kontext, Beispiel und Schritt Nummer drei, Sie wechseln zu den Nochmals Chad, ZEPT, Cloud Deep Seek und Gemini und versuchen Sie, diese Aufforderung zu verwenden und das Ergebnis selbst zu sehen Auch in diesem Modul ist es unser Ziel, die Mechanik zu verstehen, damit Sie sich im Umgang mit KI im Allgemeinen wohl fühlen . Also, viel Glück. 8. Modul 2: Zusammenfassung: Herzlichen Glückwunsch zum Abschluss von Modul Nummer zwei. In dieser Lektion haben Sie sehr wichtige Grundlagen wie GNAIFoundations und deren Funktionsweise sowie beliebte Allzweck-KIs wie Claude, HATGBT Außerdem haben Sie die vier Möglichkeiten kennengelernt , wie Sie mit KI interagieren können Es bedeutet Text, Audio, Bild und Video. Zu guter Letzt gibt es eine schnelle Architektur. Sie haben also gelernt , wie Sie Eingabeaufforderungen richtig entwerfen und erstellen, um die besten Ergebnisse zu erzielen, die zu Ihrem Projekt passen. Nochmals herzlichen Glückwunsch und wir sehen uns im nächsten Modul. 9. Modul 3: Einführung: Hallo und willkommen zum Modul Nummer drei, der generativen KI in einem Codierungsprozess. Also, meine Freunde, jetzt beginnt der Fonds , weil wir uns in die Codierungszone begeben. Willkommen. In Modul Nummer zwei haben Sie die wichtigen und sehr wichtigen Grundlagen des Einsatzes generativer KI behandelt . Aber jetzt gehen wir zum mittleren Teil über. In Modul Nummer drei werden wir zunächst erörtern, werden wir zunächst erörtern welche Rolle JNAI in einem Webentwicklungsprozess spielt Dann werden wir uns die besten und die schwachen Teile der KI ansehen die besten und die schwachen Teile der KI Und schließlich wird der große Teil des Moduls der Übersicht über die Tools und speziell der Codegenerierung gewidmet sein . Wir werden uns die Allzweck-Chats für Codierung, spezielle Chats für die Webentwicklung, Programmierassistenten und KI-Code-Editoren ansehen. Also lass uns gehen. 10. Kurseinheit 1: Willkommen zur ersten Lektion. In dieser Lektion werden wir also untersuchen, welche Rolle GNAI in einem Webentwicklungsprozess spielt Wir werden einige Fälle, Beispiele und Dinge sehen , die Sie verstehen müssen Die erste und sehr wichtige Tatsache , die Sie verstehen müssen, ist also , dass KI eine nette Ergänzung zu Ihrem Prozess ist Es ist keine obligatorische Sache , die Sie haben müssen. Warum? Weil du immer noch Code ohne KI schreiben kannst, so wie wir es all die Jahre gemacht haben? Das ist wichtig, denn wenn Sie das verstehen, Sie vor FOMO sehr sicher, der Angst, etwas zu verpassen , denn in den letzten Tagen und Monaten können wir fast jeden Tag sehen, dass neue KI auftaucht, und wir denken manchmal: Oh, ich muss sie wahrscheinlich benutzen, weil sie etwas bewirken wird Ja, wahrscheinlich, aber trotzdem ist es wichtig zu verstehen, dass es nur schön ist, etwas Neues zu haben. Jetzt haben wir die Frage. Also, welche Rolle spielt es in unserem Prozess, wie genau hilft es uns? Und die Antwort ist einfach. Es spart nur Energie und Zeit. Das ist es. Das spart. Es geht nicht darum, etwas Neues oder etwas Notwendiges hinzuzufügen . Es spart nur Energie und Zeit. Ja, es hilft uns beim Nachdenken. Es schreibt Code für uns. Ja, tut es. Aber wir können das trotzdem selbst machen. Ich werde das noch einmal betonen, weil es wichtig ist. Es hilft uns nur, unseren Code schneller zu schreiben. Nein ersetzt uns. Lassen Sie uns also einige Beobachtungen machen. Vor der KI-Ära haben wir als Entwickler und Programmierer also manuell nach Antworten gesucht Also googelten wir, gingen zum Stack oder Flow, lasen einige Artikel, schauten uns einige YouTube-Videos an, dann fassten wir diese Informationen zusammen und versuchten, unser Projekt umzusetzen Also würden wir im Grunde nachdenken und dann Code schreiben. Also, was hat sich geändert? In der KI-Ära bitten wir KI jetzt, eine Lösung zu finden. Nehmen wir an, wir haben diese App, wir hätten diese Funktion gerne. Wie sollen wir das machen. Und dann geben wir natürlich AIO-Dateien oder Dokumentationen einer Drittanbieter-Bibliothek und bitten uns, uns einen Code zu geben. Also im Grunde genommen, um es zusammenzufassen, also fragen wir jetzt nach dem Code und überprüfen ihn Vor KI haben wir also gedacht und geschrieben, und jetzt fragen wir nach und überprüfen Schauen wir uns hier also einige interessante Fakten an. Wie Sie sehen können, stammt es vom CEO von Google. Er sagt, dass über 25% des neuen Codes bei Google jetzt von KI generiert werden. Und meine Freunde, es ist sehr wichtig zu verstehen, denn das ist der Trend, es ist die Richtung, in die sich die Branche bewegt. Und um in einer modernen Zeit ein erfolgreicher Entwickler zu sein, müssen wir Teil dieser Richtung sein, Teil dieses Trends. Und was das für uns bedeutet. Das bedeutet also, dass das Tempo der Arbeit zugenommen hat. Auch hier ist es wichtig zu verstehen, dass die Geschwindigkeit zugenommen hat, nicht die grundlegenden Dinge Wie ich bereits sagte, könnten wir selbst Code schreiben, aber KI hilft uns, ihn schneller zu schreiben, oder? In diesen Zeiten ist es noch wichtiger, über grundlegende Programmierkenntnisse zu verfügen. Warum? Denn ja, auf den ersten Blick kann KI einige neue Funktionen entwickeln, etwas debuggen Aber wenn wir nicht verstehen, was KI genau getan hat, dann wird sie nutzlos Aber wenn Sie über solide Programmierkenntnisse verfügen, die Grundkenntnisse grundlegend. Sie sehen also die Verbindungen zwischen den Elementen, Sie wissen schon, die Best Practices selbst ohne KI, wenn KI Ihnen Code gibt, können Sie diesen Code überprüfen und einige nicht so perfekte Teile des Codes finden , einige bessere Lösungen, die Sie vorschlagen können Das ist die Sache. Also zuerst geht es um die soliden Grundkenntnisse im Programmieren. Also müssen wir zuerst die Programmierkenntnisse beherrschen. Und zweitens gehen wir danach zur Codierung mit KI über. Es ist wichtig, meine Freunde. Wenn du ein guter Entwickler, Programmierer sein willst, fasse ich diese Sie sind der Anführer und KI ist Ihr Copilot. Sie können immer noch ein sehr produktiver Entwickler sein, aber KI kann Ihre Reise ein bisschen angenehmer machen 11. Kurseinheit 2: Hallo und willkommen zu Lektion Nummer zwei. In dieser Lektion werden wir die Stärken von KI und die Schwächen von KI beim Programmieren untersuchen . Fangen wir also an. Also meine Freunde, KI macht ihren besten Job bei formalisierten Themen Was ist ein formalisiertes Subjekt? formalisiertes Subjekt ist also das Subjekt, die Aufgabe, das Problem, für das es eine bestimmte Lösung gibt, zum Beispiel ist eins plus eins immer zwei. Es ist formalisiert. In der Welt des Programmierens sind Algorithmen die am meisten formalisierten Aufgaben, da Sie bestimmte Eingabe eingeben und immer die spezifische Ausgabe erhalten Deshalb war es für Computer und Maschinen immer einfacher, diese Art von Aufgaben zu lösen Und weil Algorithmen auch schon seit vielen Jahren existieren und viele der Aufgaben viele verschiedene Arten gelöst wurden, und das sind bekannte Lösungen. Aus diesem Grund erhalten Sie bei Algorithmen die bestmögliche KI-Arbeit. Also lass mich dir bitte eine Prüfung zeigen. Also im Moment sind wir verkleidet, und ich werde erzählen, wie ich die Algorithmen normalerweise selbst übe Es gab also eine einfache Aufgabe zum Üben von Algorithmen, nämlich eine Funktion zu schreiben, die die Anzahl der Wörter in einer Zeichenfolge zurückgibt Und ich habe ein bisschen nachgedacht und ein bisschen selbst ohne KI geübt, ein bisschen selbst ohne KI geübt, und ich habe eine Funktion entwickelt, die, wie Sie sehen können, einen Zeichenkettenparameter empfängt und schließlich die Anzahl der Wörter in dieser Zeichenfolge zurückgibt . Und dann gehe ich normalerweise zu Cloud oder Chat GBT und sage die folgenden Dinge Überprüfe meine Lösung und gib Feedback und gib die Aufgabe in der Lösung an Und wie Sie sehen, hat es mir erfolgreich ein Feedback gegeben , also nur wenige Überlegungen, Ihre Funktion behandelt auch grundlegende Fälle, gibt mir aber auch mögliche Verbesserungen und Testvorschläge. Wie Sie sehen, gebe ich dann eine weitere Aufforderung, die mir andere mögliche Lösungen für dieses Problem gibt. Und wie Sie sehen können, gibt es eine, zwei, drei, vier, fünf Lösungen. Das ist die Sache, weil es ein Algorithmus ist und die Maschine sehr gut damit umgehen kann. Aus diesem Grund werden Sie mit KI die besten Ergebnisse erzielen, wenn Sie mit etwas Formalisiertem wie Algorithmen oder sehr spezifischen Problemen arbeiten etwas Formalisiertem wie Algorithmen mit etwas Formalisiertem wie Algorithmen oder sehr spezifischen Problemen KI die besten Ergebnisse erzielen, wenn Sie Die zweite Sache, mit der man mit KI ziemlich gut arbeiten kann, sind bekannte Bibliotheken und Frameworks In diesem speziellen Fall erzielen Sie gute Ergebnisse, erzielen Sie gute Ergebnisse denn da diese Bibliotheken und Frameworks sehr beliebt sind, bedeutet dies, dass es viele Beispiele in verschiedenen Artikeln, anderen Quellen und der zugehörigen Dokumentation gibt. Und das bedeutet, dass die KI einen ziemlich reichhaltigen Kontext hat, und deshalb wird sie Ihnen wahrscheinlich ziemlich gute Lösungen bieten. Wenn Sie zum Beispiel React oder Angular View verwenden, sind dies sehr bekannte Framework-Bibliotheken, und aus diesem Grund werden Sie ziemlich gute Lösungen erhalten. Als Nächstes. Lassen Sie uns jetzt über das Wort KI sprechen, das nicht so gut ist. KI macht also gute Arbeit mit weniger formalisierten Fächern. Und meiner besonderen Erfahrung ist das erste Thema CSS in der Webentwicklung, CSS-Stile und insbesondere Layout Lassen Sie uns einen Moment darüber nachdenken, warum es so ist. Zunächst einmal, weil CSS nicht so formalisiert ist, es ist keine Programmiersprache Deshalb ist es nicht so formalisiert. Also gibt es keine. Sagen wir in CSS, wenn Sie einen Fehler machen, irgendeinen Fehler , ich meine, nicht in Bezug auf den Grammatikfehler, sondern in Bezug auf einen logischen Fehler, wir an, Sie verwenden dieselbe Eigenschaft zweimal, nehmen wir an, Sie verwenden dieselbe Eigenschaft zweimal, und die zweite überschreibt die erste, sodass Sie keinen Fehler bekommen, das ist die Sache. CSS ist also nicht so streng. Und wenn wir über Layout sprechen, wenn Sie schon einige Zeit in der Webentwicklung tätig sind, wissen Sie wahrscheinlich, dass Sie Layout in machen können . Ich bin mir nicht sicher, aber es könnten acht, zehn, 12 verschiedene Arten für dieselbe Sache sein . Sie könnten Flexbox verwenden. Sie könnten Raster verwenden, Sie könnten sogar einige verwenden, wenn Sie zum Beispiel mehrere Spalten haben möchten, könnten Sie einfach den Inline-Block anzeigen verwenden, und es ist immer noch eine funktionierende Lösung Deshalb ist es für Stile okay. Sie sollten immer noch einen sehr soliden Hintergrund haben. Ich würde sagen, wenn du ihn speziell für das Styling verwenden möchtest , weil du ihn wahrscheinlich trotzdem gerne aufräumen möchtest. Aber es ist so. Und auch hier würde ich sagen, dass es mit der Besetzung und den visuellen Effekten ziemlich schlecht abschneidet . Wie komplexe CSS-Animationen, Effekte wie Hover-Effekte und Bibliotheken wie GSP oder Framer Nochmals, denn wenn Sie einen benutzerdefinierten visuellen Effekt im Web erstellen, ist es wahrscheinlich etwas, das Ihnen als Inspiration einfällt Es ist also nicht üblich. Deshalb hat KI auch nicht wirklich den reichhaltigen Kontext, um dieses Problem effektiv zu lösen , weil ich selbst, wissen Sie, ziemlich viel mit GSAP für Webdesign gearbeitet habe, einige komplexe Animationen und Interaktionen gemacht habe, und das hat mir Ergebnisse gebracht Und normalerweise besuche ich Foren, wissen Sie, um mit echten Leuten zu sprechen, die mir bei dem Problem helfen Also nochmal, nur um es noch einmal zusammenzufassen Es macht den besten Job bei etwas sehr Striktem, Formalisiertem wie Algorithmen oder bekannten Bibliotheken oder Frameworks und ist okay Styling und einige benutzerdefinierte visuelle Effekte 12. Kurseinheit 3: Willkommen zu Lektion Nummer drei, der Tool-Übersicht. Es ist eine sehr kurze Lektion von meinen Freunden. Wir werden uns nur kurz ansehen , was wir in den nächsten Lektionen behandeln werden. Also Tool-Übersicht für die Codegenerierung. Wir werden also mit Allzweck-Chats zum Codieren beginnen. Konkret werden dies JAGBT und Cloud sein. Dann werden wir uns spezialisiertem Schach für die Webentwicklung zuwenden , insbesondere der Benutzeroberfläche, und das ist V Null Von Versell aus werden wir dann die Programmierunterstützung konvertieren. Sie haben wahrscheinlich von Github Copilot oder vielleicht Codeon gehört. Und zu guter Letzt werden wir einen der AI-Code-Editoren sehen. Also lass uns gehen. 13. Kurseinheit 4: Willkommen zu Lektion Nummer vier. In dieser Lektion werden wir uns befassen und sie näher betrachten Perspektive der KI-Kodierung von Chats für allgemeine Zwecke befassen und sie näher betrachten. Wir werden über Cloud und Chat-GPT sprechen und mit Cloud beginnen Schauen wir uns also zunächst Devina-Buchstabentafeln im Internet Web Devina, wie Sie sehen können, KI-Programmierwettbewerb, bei dem die Webentwickler sozusagen die LLMs für die besten Ergebnisse beim Programmieren bewerten Und wie Sie sehen können, nehmen Cloud 3.7 und 3.5 beide den ersten und zweiten Platz Schauen wir uns also zunächst die Vorteile von Gerinnseln an Also zuerst ist es eine kostenlose Mahlzeit. Sie haben jeden Tag eine bestimmte Anzahl kostenloser Nachrichten, die Sie verwenden können. Zweitens, wie Sie bereits an der Brieftafel gesehen haben , wie ich es Ihnen in einer Vorschau des Clogs gezeigt habe , wird es als erstklassig für die Codierung angesehen, und es hat die Github-Integration, obwohl es sich gerade im besseren Modus befindet Drittens hat es einen Vorschaumodus, sodass Sie eine Vorschau des Codes anfordern können, was den Vorgang auch etwas komfortabler macht den Vorgang auch etwas komfortabler Und das letzte Feature, das wir noch nicht behandelt haben, ist ein Projekt-Feature. Es ist nur in der Pro-Version erlaubt, und später werde ich kurz darüber sprechen. Die Nachteile von Cloud sind wahrscheinlich einer der größten und einzigen Nachteile, die ich mir einfallen lassen konnte , dass es ein niedriges Nachrichtenlimit in einem kostenlosen Tarif gibt , denn auch hier könnten Sie nicht wirklich sicher sein, vielleicht sind es 810 Nachrichten, und dann müssen Sie warten bis die neuen Nachrichten kommen. Lassen Sie uns also schnell einen Blick auf die Funktion des Projekts werfen. Wie Sie sehen können, ist es nur für die Version verfügbar. Im Grunde ermöglicht es Ihnen also, Ihre eigene Wissensdatenbank hinzuzufügen, wie Sie hier auf einem Screenshot aus ihrem Artikel sehen können. Es handelt sich also beispielsweise um ein PDF-Dokument, ein weiteres PDF-Dokument und ein drittes PDF-Dokument mit anderen Informationen, die dann in einem Chat-Kontext verwendet werden. Und das ist eine sehr, sehr tolle Funktion, denn dann werden Ihre Antworten präziser, da sie die von Ihnen bereitgestellten Dokumente berücksichtigen . Die zweite Funktion in einem Projekt besteht darin, dass Sie benutzerdefinierte Anweisungen festlegen können. Auch hier ist es eine tolle Funktion, weil Sie die KI quasi in die Richtung lenken, die Sie benötigen. Hier sind wir also bei Claude, wie Sie sich wahrscheinlich aus früheren Lektionen erinnern , in denen ich Ihnen gezeigt habe , dass sie sehr gut mit Algorithmen umgehen kann, und wir haben darüber gesprochen und diskutiert, wie sie eine analysierte Lösung für unsere Algorithmusaufgaben darstellt. Wie Sie sehen können, habe ich in diesem Beispiel darum gebeten, ein Dashboard für Notizen in React zu entwerfen . Warum in React? Weil es uns ermöglicht, eine Vorschau zu sehen. Ja, und wie Sie sehen können, hat es einen ziemlich guten Job gemacht. Hier ist unser Code, und wir können ihn auch sehen. Wir haben eine Seitenleiste, die Notizenleiste und die eigentliche Notiz selbst Ich meine, auch hier ist es ziemlich praktisch, diese Funktionalität zu haben Der zweite Spieler unseres Spiels ist also unser geliebter Chat GBT. Und wie ihr in einer Web-Dev-Arena sehen könnt, teilt er sich den vierten Platz mit einem Grog, was immer noch ziemlich gut ist Ordnung. Und was die Vorteile von Chat GPT angeht, denke ich, die Nummer eins ist, dass es die unbegrenzte Anzahl kostenloser Nachrichten ist die unbegrenzte Anzahl kostenloser Nachrichten Ja, manchmal, wenn es sein Top-04-Modell verwendet, manchmal in einem Chat, könntest du eine Warnung bekommen dass du in diesem Modell keine kostenlosen Nachrichten mehr hast, aber es funktioniert immer noch in einem einfacheren Modell, was ziemlich gut ist, weil du manchmal vielleicht mehr Nachrichten benötigst Ja. Und der zweite Vorteil ist , dass es eine anständige Codequalität hat, Steel-Code, vielleicht nicht so gut wie Clade, aber trotzdem gut ist aber trotzdem gut ist Im Gegensatz zu Ha GPT diese Codequalität natürlich besser sein, könnte diese Codequalität natürlich besser sein, weil ich mich manchmal an einige meiner Arbeiten erinnere , besonders bei einigen komplexen Projekten, bei denen es um React Next geht Nun, es hat nicht wirklich den besten Job gemacht und die Kleidung Und natürlich gibt es keine Vorschau. Es ist also ein Nachteil, ja, aber es ist wichtig, noch einmal zu verstehen, dass wir uns jetzt Allzweck-Chats befassen und dass GPD kein Tool zum Codieren ist Aber es ist trotzdem etwas, das man in Betracht ziehen sollte. 14. Kurseinheit 5: Hallo, meine Freunde und willkommen zur Lektion Nummer fünf. In dieser Lektion werden wir uns dem speziellen Chat für Webentwicklung und KI-Webchat befassen, der Null ist. Also die Null, was ist das? Es ist ein sehr leistungsfähiges Tool zur Generierung von hochwertigen Benutzeroberflächen und Code. Es ist ein Premium-Tool, es ist kostenlos, aber es hat einige kostenlose Nachrichten, aber dann haben Sie auch ein Limit. Und wenn Sie das Limit erreicht haben, müssen Sie entweder einige Zeit warten oder eine Pro-Version kaufen. Natürlich wurde der V Zero von Versell produziert , einem Entwickler von Next Gs Aus diesem Grund sind NextGS und React ihre bevorzugte Technologie, aber es sind nicht nur React und Next Js, weil sie auch andere Technologien unterstützen Lassen Sie uns also schnell die Benutzeroberfläche erkunden. Wie in anderen einfachen Chats haben Sie also auch hier das UI-Eingabefeld mit einem Tool zum Hochladen von Dateien mit einigen KI-Verbesserungen Außerdem gibt es einen Klon-Screenshot, Figma importiert und sogar das Projekt hochlädt Das bedeutet, dass Sie das gesamte Projekt hochladen und darum bitten können , Fehler zu beheben oder Inkonsistenzen zu finden oder vielleicht neue Funktionen anzubieten Und es gibt ein paar Kennzeichenhalter, die Landingpage erstellen oder dich anmelden kannst Lassen Sie uns also schnell der Aufforderung bei Vzero nachgehen. Um also die besten Ergebnisse zu erzielen, müssen Sie die Eingabeaufforderungen gut gestalten Eigentlich ist es nicht speziell V Zero gewidmet Wie Sie sich wahrscheinlich erinnern, handelt es sich um spezifische Regeln, um in allen KI-Chats die besten Ergebnisse zu erzielen. Je besser Sie Vzero leiten, desto besser werden Sie also die besten, genaueren und relevanteren Ergebnisse erzielen Es gibt also einige Empfehlungen aus der V Zero-Dokumentation Sie sollten also die gewünschte Funktionalität bestimmter Komponenten einbeziehen . Nehmen wir an, Sie erstellen einen Farbwähler und wissen, dass der Farbwähler so Farbwähler und einfach sein kann wie die Eingabe eines Hex-Codes oder so fortgeschritten wie ein Photoshop-Farbwähler Daher ist es auch wichtig, Designpräferenzen festzulegen. Nun, es ist ein bisschen einfacher. Sie geben also die Größen, die Schrift , die Farben, den Randradius usw. an. Als Nächstes ist es gut, wenn Sie irgendwelche Bibliotheken erwähnen. Dies bedeutet Bibliotheken oder Frameworks von Drittanbietern , die Sie verwenden möchten. Es verwendet also den Kontext dieser Dokumentation. Und auch um den Kontext oder den Anwendungsfall zu beschreiben, bedeutet das, wie genau Sie die Komponente verwenden wollen, denn es ist eigentlich nichts Spezifisches für Vzero, sondern nur gutes und angemessenes Prompt-Engineering der starken Größe handelt es sich also, wie V Zero in ihrer Dokumentation sagt, wie V Zero in ihrer Dokumentation sagt, um eine Generierung der Benutzeroberfläche Sie machen das mit CnUI und den empfohlenen Bibliotheken von Drittanbietern sind React Three Fiber, Framer Motion Auch hier können Sie Ihre Bibliotheken weiterhin verwenden, dies ist jedoch vorzuziehen Das bedeutet, dass ihr neuronales Netzwerk mit diesen besser vertraut ist. Nun ein bisschen mehr über Technologieunterstützung. Wie ich Ihnen bereits gezeigt habe, ist es nicht nur die nächste GS, weil sie sagen, es ist aufgebläht, neu gemischt, wenn auch mit etwas weniger Selbstvertrauen im Vergleich zum Reagieren als Nächstes, denn auch hier gilt, dass die Null von denselben Leuten geleitet wird, die Und wie Sie sehen können, gibt es auch Python, Rust, SQL und so weiter und so weiter. Also meine Freunde, wenn ihr etwas anderes entwickelt , deckt ihr es immer noch ab. Also Null für Entwickler. Aus ihrer Dokumentation geht wiederum hervor, dass Sie sauberen React-Code von Grund auf neu schreiben, Probleme beheben, Ihre Funktionen implementieren können . Denken Sie daran, dass Sie das Projekt beispielsweise hochladen können Außerdem kann es Codevorschläge liefern, und auch hier heißt es, dass Nexs immer auf dem neuesten Stand ist Für Designer könnten Sie also auch hier Ihre Figma-Datei hinzufügen Es ist wie eine erweiterte Funktion, es ist eine kostenpflichtige Funktion, aber als kostenlose Funktion, die wir sehr bald untersuchen werden, können Sie Ihren Screenshot hinzufügen 15. Kurseinheit 5 (Übung): Meine Freunde, und es ist eine Übungszeit von V Null. Zuerst werden wir untersuchen, wie man den textbasierten Chat benutzt, und dann werden wir mit Bildern üben. Also lass uns gehen. Willkommen bei der Zero-Anwendung. Und wie Sie sehen können, haben wir in der Mitte das Eingabefeld, wie Sie es bereits in Cloud und Chat GBT gesehen haben Hier kannst du deine Eingabeaufforderung eingeben. Sie können Ihr Figma-Projekt oder Ihren Screenshot auch von Ihrem Computer hochladen Ihr Figma-Projekt oder Ihren Screenshot auch von Ihrem Computer Dort unten haben wir einige vorgefertigte Funktionen wie das Klonen von Screenshots Importieren der Figma-Datei Sie können sogar Ihr Projekt und einige vorgefertigte Eingabeaufforderungen als kreative Landingpage oder als Anmeldeformular hochladen einige vorgefertigte Eingabeaufforderungen als kreative Landingpage oder als Anmeldeformular Versuchen wir es also zunächst mit einer einfachen Aufforderung, z. B. dem Erstellen eines modernen Drop-down-Elements Also meine Freunde, wie ihr hier sehen könnt, können wir entweder das PMT erstellen , kurz bevor wir planen, es zu verwenden, und sagen wir, eure Garnele ist nicht so gut poliert, dann könnt ihr diese kleine erweiterte Eingabeaufforderung verwenden Also lass es uns ausprobieren. Wie Sie sehen können, wurde unser einfacher Abschlussball innerhalb weniger Sekunden komplett vorgefertigt, gut strukturiert und schnell durchdacht. Also lass es uns versuchen. Wie Sie sehen können, erleichtert dies den Denkprozess und erweitert auch unsere Aufforderung ein wenig weiter. Wie Sie hier sehen können, wurden Projektstrukturen, Gestaltungsregeln, Bilder und Medien, Formatierungs-Frameworks und Bibliotheken und einige weitere Vorbehalte eingeführt Und im Moment schreibt es seinen Code, und jetzt befinden wir uns im Vorschaumodus Tara, wir haben also unser kleines Formular in dem wir das Land auswählen können und wie Sie sehen können , denke ich sogar, dass wir einige Filterfunktionen haben sollten , was ziemlich gut ist. Mexiko. Also haben wir uns für Mexiko entschieden. Ich habe mich zum Beispiel für Brasilien entschieden und war Brasilien und das Gleiche gilt für die Sprache. Für die erste Version ist es ziemlich gut. Wie Sie sehen können, mein Freund, haben wir oben den Vorschau-Tab, auf dem wir die aktuellen Projekt-Aussichten in einem Browser sehen können die aktuellen Projekt-Aussichten , und auch den Code-Tab Hier haben wir einige Dateien. Das wichtigste ist wahrscheinlich das durchsuchbare Drop-down-Menü. Es ist also unsere Komponente, und wir haben die Seite TSX, auf der wir den Inhalt tatsächlich mit Ländern und Sprachen füllen mit Und wenn Sie den Code verstehen und wissen, was Sie tun möchten, können Sie beim Schreiben des Codes tatsächlich einige Änderungen vornehmen Lassen Sie uns also etwas ganz Einfaches tun , nur um die Funktionsweise zu verstehen. Lassen Sie uns also versuchen, ein weiteres Land hinzuzufügen. Okay? Also werden wir, wie Sie hier sehen können, Korea hinzufügen. Okay? Also, weil wir Korea hier haben, lassen wir die Ko und machen sie zu Korea. Also müssen wir jetzt speichern und zum Vorschau-Tab gehen. Also lass uns sehen. T wir haben Korea. Wie du sehen kannst. So können Sie also einfache Änderungen an einem Code vornehmen. Ich möchte dir auch einen anderen Weg zeigen , wie du Änderungen vornehmen kannst? Es ist über die Eingabeaufforderung. Wie Sie sehen können, habe ich die Aufforderung eingegeben, Fun auf Mono zu ändern. Und wieder wurde unsere Eingabeaufforderung erweitert, um sie etwas spezifischer zu machen, und sie hat ihren Zweck erfüllt, wie Sie hier in unserer Hauptkomponente sehen können, unser Telefon wurde auf Mono umgestellt. Ein kurzer Tipp, dass manchmal, wenn Sie einige Nachrichten in Ihrer Aufforderung verwenden, einige Änderungen vorzunehmen, Ihre Version, die Ausgabe möglicherweise nicht so ist, wie Sie es sich gewünscht haben Entweder müssen Sie sicherstellen, dass Ihre Eingabeaufforderung ziemlich spezifisch ist , oder Sie müssen mehr Eingabeaufforderungen verwenden , um etwas besser zu erklären Also noch einmal, wie Sie sich wahrscheinlich aus unseren Lektionen von den Stiftungen, die wir mit der Inspiration gemacht haben, noch einmal erinnert unseren Lektionen von den Stiftungen, die wir mit der Inspiration gemacht haben, noch Nun, ein weiteres sehr, sehr nützliches Feature von V Zero. Es ist sehr einfache und bequeme Möglichkeit , zwischen den Versionen zu navigieren Im Moment heißt es also, wie Sie sehen können, die neueste Version. Und hier oben steht Version eins, ansehen und wiederherstellen. Schauen wir uns also an, was passiert, wenn wir auf die Schaltfläche Wiederherstellen klicken. Erledigt. Wie Sie sehen können, wurde zur vorherigen San Serif-Schrift zurückgekehrt vorherigen San Serif-Schrift Und jetzt, wenn Sie Ihre Aufmerksamkeit darauf richten, ist es jetzt Version drei, aber es heißt, dass die drei durch die Wiederherstellung von Version eins erstellt wurden Also nochmal, das ist eine der Möglichkeiten, wie Sie zwischen den Versionen wechseln können , falls Ihnen etwas nicht gefallen hat oder dieser Zweig Ihrer Updates nicht sehr gut gelaufen ist. Gehen wir zum zweiten Teil dieses Übungsbeispiels über. Nehmen wir an, wir haben diesen Screenshot der Benutzeroberfläche. Sie erinnern sich, dass das Figma zum Importieren des Figma-Projekts eine kostenpflichtige Version ist Nehmen wir an, Sie haben Ihre Benutzeroberfläche Figma und Ihre Version ist kostenlos. Sie können einfach einen Screenshot herunterladen und dann einen Screenshot verwenden, Sie können einfach einen Screenshot herunterladen und dann einen Screenshot der in der kostenlosen Version verfügbar Also werden wir diesen Screenshot verwenden V zero zu bitten, ihn neu zu erstellen. Wir sind also in V Null und Sie können von hier aus zwei Dinge tun Also hier, wie Sie sehen können, gibt es einen Klon-Screenshot. Knopf. Nachdem Sie diese Taste gedrückt haben, werden Sie aufgefordert, Ihr Bild hinzuzufügen Gleich danach wird der Vorgang ausgeführt, sodass Sie Ihre Eingabeaufforderung nicht hinzufügen müssen. Nehmen wir an, Sie haben Ihre eigenen Anweisungen. In diesem Fall wäre es wahrscheinlich besser, ein Diagramm vom Computer aus zu verwenden, und dann könnten Sie Ihre Eingabeaufforderung hinzufügen. Also machen wir uns jetzt gleich an die Schaltfläche zum Klonen von Screenshots. Wie Sie sehen können, haben wir einen Screenshot hochgeladen. Es macht sein Denken. Und wie ich Ihnen bereits gesagt habe, macht es einfach Ihren Screenshot und fängt sofort an zu arbeiten. Wie Sie sehen können, ist es ziemlich einfach. Aufforderung, bitte erstellen Sie die auf dem beigefügten Screenshot gezeigte Benutzeroberfläche neu auf dem beigefügten Screenshot gezeigte Es funktioniert also. Also meine Freunde, der Zero hat seinen Job erledigt und wie Sie sehen können, hat er unser Bild ziemlich gut wiedergegeben Sie hat alle Komponenten. Symbole, Suchfelder, die Seitenleiste und der Hauptteil mit den Benutzernamen Und ich denke, für die erste Iteration hat es ziemlich gute Arbeit geleistet Und wie Sie sehen können, lassen Sie uns sehen, es reagiert sogar vollständig Okay. Nicht besser. Also nochmal, du kannst den Code sehen. Also hat es das CSS erstellt und TO WIN hat die eigentliche Hauptdatei mit der Seite konfiguriert , die wir sehen, und sogar innerhalb Komponenten wie Seitenleiste und Benutzerkarte, die es genau dort verwendet Und ich denke nochmal, bei der ersten Iteration hat es einen ziemlich guten Job gemacht Nochmals, eine sehr wichtige Sache, die es zu beachten gilt, wie ich bereits zu Beginn unseres Kurses erwähnt habe , ist nicht das Rechnen, das Generieren, wie Version für Version Aus diesem Grund wird sich jede Iteration von der vorherigen unterscheiden Warum das wichtig ist , denn wenn Sie fünfmal mit demselben Benutzerbild fragen, erhalten Sie wahrscheinlich fünf verschiedene Varianten Ihres Codes Und es ist nicht unbedingt das Beste, was die Code-Nutzung angeht. Wie wir sehen können, hat die Benutzerkarte derzeit beispielsweise einen Namen, einen Benutzernamen und eine Bildquelle, und ich denke, das ist ziemlich gut. Aber lassen Sie mich teilen, wie ich das zum ersten Mal gemacht habe. Wie Sie sehen können, ist es ein bisschen anders. Es hat also einen Namen, einen Benutzernamen, okay, das Avatar-UO, aber jetzt hat es die Avatar-Position und jede Benutzerkarte hat eine andere Avatar-Position. Und meiner Meinung nach, weil ich eine ziemlich gute CSS-Erfahrung habe, ist es eine sehr, sehr schlechte Praxis, wissen Sie ich eine ziemlich gute CSS-Erfahrung habe, ist es eine sehr, , solche, Sie wissen schon, strenge Werte in einem Grid zu haben, denn wenn Sie Grid verwenden, müssen Sie, Sie wissen schon, das durch Spalten kontrollieren und nicht durch solche spezifischen Werte, weil es sehr verwirrend ist, wissen Sie? Und was ist, wenn Sie, Sie wissen schon, eine gewisse Anzahl untergeordneter Elemente in einem Raster haben ? Also noch einmal, es ist eine Sache, der Sie sich bewusst sein müssen. Und das ist auch der Grund, warum die zweite Sache ich dir erzählt habe , die soliden Grundlagen oder Instrumente, die du benutzt, beherrschen musst. Denn wenn Sie CSS kennen, wissen Sie wahrscheinlich, dass dies wiederum die Position ist, Sie wissen schon, fest codierte Positionswerte nicht so gut für dynamische Gitter geeignet Deshalb wirst du entweder darum bitten, diesen Job noch einmal zu wiederholen oder einen anderen Weg zu finden, zum Beispiel die Dinge im Code manuell zu ändern Und meine Freunde, das Letzte, was wir uns in dieser Sitzung kurz ansehen werden, sind die Projekte Wie Sie sehen können, haben wir hier die Registerkarte Projekte, und ich habe nur eine Vorlage für dieses Projekt erstellt. Und wie Sie hier sehen können, haben wir dieselbe Benutzeroberfläche. Aber was hier wichtig ist ist dieses kleine Ding genau da, das Projekt-Setting. Schauen wir uns also das Innere an. Wie Sie sehen können, besteht es aus mehreren Abschnitten. handelt sich also zunächst um ein Ver-CL-Projekt. Das bedeutet, Es handelt sich also zunächst um ein Ver-CL-Projekt. Das bedeutet, dass Sie ein VersL-Projekt verbinden und dann alles, was Sie erstellt haben, sofort bereitstellen Gut, denn Sie können Ihren Prototyp schnell Ihrem Kunden oder Ihren Kollegen zeigen Ihren Prototyp schnell Ihrem Kunden oder Ihren Kollegen Also die zweite Sache, wir haben Umweltvariablen. Das heißt, wenn Sie einige Datenbankverbindungen oder API-Schlüssel haben , auf die Sie hier abzielen können. Aber der Hauptcharakter dieses Spiels ist das. Es ist eine Quelle. Das bedeutet, dass Sie hier alle Quellen hinzufügen können, die Sie im Kontext des Projekts möchten. Es könnte also Dokumentation sein. Es könnten einige Bilddateien sein, es könnten einige Inspirationen sein, was dann ein Projekt ist, das wir als Kontext verwenden Das bedeutet, dass Ihre Antworten genauer sind und dem Endergebnis näher kommen Es ist also Gold, meine Freunde. Ich mag es wirklich, wann und wenn du dich daran erinnerst, als wir über Claude gesprochen haben, Claude wie in der kostenpflichtigen Version von Claude, in den Projekten kannst du auch deine Quellen hinzufügen. Es ist dasselbe. Es ist also eine sehr gute Sache, meine Freunde. Das letzte ist auch, was sehr gut ist , es ist eine Anleitung. Auch hier könnten Sie einige bestimmte Dinge festlegen , die Sie gerne hätten, was auch sehr gut ist. Also meine Freunde, das ist das Ende dieser Lektion. Ich hoffe es hat euch gefallen. Wir sehen uns im nächsten. 16. Kurseinheit 6: Hallo und willkommen zur Lektion Nummer sechs: Coding Assistance. Was ist also ein Programmierassistent? Es ist also im Grunde Ihr Copilot, Ihr Helfer, Ihr Assistent in Ihrem ID- oder Code-Editor Also, womit genau kann es dir helfen? Die erste, wahrscheinlich beliebteste Funktion ist also die automatische Vervollständigung, bei der der Assistent Ihnen Vorschläge für Ihre Codierung gibt Wie genau das funktioniert, lernt es etwas über deinen Programmierkontext und versucht dann wie es jede andere KI tut, Vorschläge zu machen Zweitens können Sie Ihren Teil Ihres Codes auswählen und darum bitten, ihn umzugestalten oder zu verbessern Außerdem helfen dir die Bugs bei den Bugs, und du kannst auch einige Fragen oder Erklärungen zu deinem Code und einigen anderen Funktionen stellen, wie du siehst Dieser Codierungsassistent ist normalerweise als Erweiterung in Ihrer ID enthalten. Wie Sie sehen können, ist hier ein kleiner Screenshot aus dem VS-Code. Sie sehen also die Erweiterungen, die Registerkarte und wir sehen, dass die Codierung installiert ist. Wir werden über die beliebtesten sprechen. Der erste ist also Github Copilot, Github Copilot war der erste, wahrscheinlich zumindest der bekannteste, die beliebteste Erweiterung, und früher war es kostenpflichtig, aber jetzt ist aber jetzt Obwohl es Premium ist, hat es immer noch ein sehr Ich denke, es sind ungefähr 2000 Autovervollständigungen pro Monat und 50 Nachrichten , die Sie stellen können Und das zweite ist ein Codium, eine kostenlose Erweiterung, die Sie in Ihrer Programmierumgebung installieren und verwenden können Im nächsten Teil werden wir also untersuchen, wie sie funktionieren 17. Kurseinheit 6 (Übung): Hallo und willkommen zur Übungssitzung mit der Programmierunterstützung. In dieser Lektion werden wir das Codem verwenden. Sie können aber auch den Github-Copiloten verwenden , da sie so ziemlich identisch sind Wir werden einige der beliebtesten Funktionen untersuchen und können mit der automatischen Vervollständigung beginnen Wie Sie sehen können, haben wir also zunächst umgekehrte Wörter in einer Zeichenfolge. Schreiben Sie also eine Funktion, die alle Wörter innerhalb der übergebenen Zeichenfolge umkehrt , wobei die Wörter durch genau ein Leerzeichen getrennt sind, und dass es keine führenden Leerzeichen gibt Zum Beispiel dieser Stress, diese Uo, wie Sie sehen können, hat es sofort angefangen, eine Lösung vorzuschlagen, und alles, was Sie tun müssen, ist auf die Tabulatortaste zu klicken, dann auf eine weitere Registerkarte , und Sie könnten sogar zur nächsten Zeichenfolge gehen, und wie Sie sehen können, wurde sie als Konsolenprotokoll vorgeschlagen Der nächste Schritt, den Sie tun können, besteht also darin, Ihre Lösung im Terminal auszuprobieren und Ihre Lösung im Terminal auszuprobieren die anderen Dinge zu erledigen. Gehen wir also zur nächsten Sache über, die es tun kann. Nehmen wir an, Sie haben jetzt bereits einen Code, mit dem Sie zufrieden sind. Jetzt können Sie den Code markieren und auf die rechte Schaltfläche klicken. Wie Sie sehen können, haben wir hier ein paar Dinge. Der erste ist CodeMrFactor, ausgewählter Codeblock. Wenn wir also darauf klicken, erhalten wir einige Vorschläge. Beginnen wir also mit etwas Einfachem Fügen Sie dem Code Kommentare und Docstring hinzu Wie Sie sehen können, funktioniert es und es hat etwas bewirkt Ich habe wie einen Stift als Zeichenkettenformat erstellt, die Zeichenfolge umgekehrt und das Rückgabeformat, ebenfalls eine Zeichenfolge, umgekehrte Und jetzt können Sie entweder akzeptieren oder ablehnen. Wenn Sie, wie Sie sehen können, auf Akzeptieren klicken, haben Sie jetzt den Code mit dem, was die Codierung Ihnen angetan hat. Lassen Sie uns das für einen Moment entfernen. Also gut, speichern Sie und versuchen Sie es noch einmal. Also nochmal, refaktorieren und los geht's. Machen Sie das schneller und effizienter. Lass uns das versuchen. Wie Sie sehen können, hat Ed einige Vorschläge für eine andere Lösung gemacht . Ich bin mir nicht sicher, ob es schneller ist oder nicht, weil es ein so kleiner Code ist, aber im Allgemeinen hat es etwas getan und vielleicht einem größeren Algorithmus oder einer Art von Code wird es definitiv etwas vorschlagen, das schneller ist. Also auch hier kannst du entweder akzeptieren oder ablehnen. Also lasst uns in diesem Fall einfach ablehnen. Als Nächstes, was Sie noch einmal tun können, lassen Sie uns den Text markieren und Cdim bitten , den ausgewählten Codeblock zu erklären Wie Sie sehen können, hat es jetzt einen Chat geöffnet, in dem es eine Erklärung gibt Es heißt also, dass es sich um eine JavaScript-Funktion , die eine Zeichenfolge als Eingabe verwendet und in ein Array aufteilt Wörter, die Leerzeichen als Trennzeichen verwenden, kehren die Reihenfolge um und fügen sich wieder mit den Leerzeichen Wie Sie sehen können, ist das eine ziemlich korrekte Definition dessen, was passiert Wie Sie sich erinnern, handelt es sich also wieder um einen Chat, der KI verwendet, ein KI-Modell unter der Haube. Wahrscheinlich ist es gerinnselig, weil es für diese Art von Tools am beliebtesten Und jetzt können wir etwas fragen, zum Beispiel eine andere Lösung vorschlagen Lassen Sie uns Und wie Sie hier im Chat sehen können, wurden drei Lösungen vorgestellt, eine, zwei und drei, und es liegt an Ihnen, was Sie mit diesen Informationen tun möchten. Versuchen wir es also noch einmal. Also bitte ich unser Tool , den Code in Typoskript umzuwandeln. Also lass uns sehen. Und wie Sie sehen können, hat es uns einige Variationen gegeben. Also, mein Freund, es war eine Übungssitzung mit CM, und das Gleiche gilt für den Github-Copiloten Und wenn Sie den VS-Code verwenden, können Sie ihn hier oben sehen Sie können ihn von hier aus verwenden 18. Kurseinheit 7: Hallo und willkommen zur Lektion Nummer sieben. In dieser Lektion werden wir uns mit den KI-Code-Editoren befassen. Dies wird die letzte Kategorie von Tools sein , die wir in diesem Modul behandeln werden. Was ist also der KI-Code-Editor? Wie Sie wahrscheinlich bereits festgestellt haben, handelt es sich einen Code-Editor mit integrierten KI-Funktionen. Eingebaute KI-Engine. Stellen Sie sich vor, Sie haben einen VS-Code, aber darin ist KI-Maschine eingebaut , die Ihnen beim Programmieren hilft. Und wir werden den einzigen in diesem Kurs untersuchen. Der beliebteste ist heutzutage der Cursor. Lassen Sie uns also schnell einen Blick darauf werfen. Also mein Freund, wenn wir uns die Funktionen ansehen, wirst du bestimmt alles wiedererkennen, all die Funktionalitäten wir bisher behandelt haben, aber im Code-Editor wieder kombinieren. Der erste ist also Agent, und wie Sie sehen können, kann der Agentenmodus Aufgaben von Anfang bis Ende erledigen. Das bedeutet, von Anfang bis Ende quasi unabhängig voneinander. Und erinnerst du dich an V Null? Es ist genau das, was V Null getan hat, aber jetzt können Sie so etwas innerhalb des Code-Editors tun , ohne ihn zu verlassen. Zweitens ein Tab, und wie Sie sehen können, handelt es sich um eine Funktion zur automatischen Vervollständigung. Hier gibt es sogar einen Screenshot, und das ist dasselbe wie das Codium, das wir in der vorherigen Lektion gesehen haben Chatten Sie als Nächstes, und das ist ein Chat-GPT oder eine Cloud. Und der letzte, wie Sie sehen können, Befehl K, lassen Sie uns Ihren Code mit KI bearbeiten und schreiben, wieder dasselbe, was wir in der Codim-Lektion getan haben. Aber was ist wichtig, um das zu verstehen, schauen wir uns die Preisgestaltung an Es gibt ein kostenloses Kontingent, und wie Sie sehen, es eine zweiwöchige Testversion Während dieser Testphase können Sie 2000 Abschlüsse und 50 Premium-Anfragen nutzen Danach haben Sie entweder ein kleines kostenloses Kontingent oder Sie müssen zur Pro-Stufe wechseln, die, wie Sie sehen können, kostenpflichtig ist, um alle Vorteile von Cursor nutzen zu Und es liegt an dir, zu entscheiden. Sie können entweder einige kostenlose Tools verwenden oder, wenn Sie Ihren Prozess etwas schneller und komfortabler gestalten möchten etwas schneller und komfortabler gestalten möchten , können Sie den Cursor kaufen. In der nächsten Lektion werden wir uns also einige Funktionen dieses interessanten Programms ansehen 19. Kurseinheit 7 (Übung): Meine Freunde, bevor wir in die Lektion eintauchen, möchte ich nur kurz eine Kleinigkeit erwähnen Die Sache ist, dass sich die Technologie heutzutage sehr schnell ändert und die Benutzeroberfläche des Cursor-Editors , den wir uns ansehen werden, hat sich direkt nach der Aufzeichnung der Lektion geändert. Deshalb möchte ich nur die Dinge für Sie klären, damit Sie sich während des Unterrichts keine Sorgen machen müssen. Also meine Freunde, wenn ihr euch die Lektion anschaut, werdet ihr in der Lektion den Chat-Tab und einen Komponisten-Tab sehen . Aber wenn Sie Ihren Cursor oder Editor heruntergeladen oder aktualisiert haben, wird Ihre Benutzeroberfläche höchstwahrscheinlich Ihren Cursor oder Editor heruntergeladen oder aktualisiert haben so aussehen. Sie werden also einen Agenten beauftragen und nach Drop-down-Artikeln fragen. Also sind es dieselben Dinge. Der Chat in der alten Version entspricht also dem Frag nach einer neuen Version und der Komponist in der alten Version ist dasselbe wie ein Agent in einer neuen Version. Also, meine Freunde, es sind wieder dieselben Dinge, nur dass sie ein bisschen anders benannt haben. Also lasst uns in die Lektion reingehen. Hallo und willkommen zur nächsten Lektion. In dieser Lektion werden wir die Cursor-KI und ihre Funktionen in der Aktion untersuchen . Als Erstes möchte ich sagen, dass es sich um einen VS-Code-Fork handelt, was bedeutet, dass Sie ziemlich nahtlosen Übergang vom VS-Code zur Cursor-KI erleben werden. Als ich das installiert habe, wurden zum Beispiel auch alle Erweiterungen installiert , die ich in meinem VS-Code-Editor hatte, was sehr praktisch ist. Das erste, was wir uns ansehen werden, sind die Einstellungen. Sie klicken also auf Cursoreinstellungen und gehen zu den Cursoreinstellungen. Und speziell interessieren uns diese Regeln für KI. Wie Sie hier als Platzhalter sehen können, können Sie einige Prüfungsregeln sehen. Verwenden Sie immer funktionale React-Komponenten, so weiter und so fort Hier möchten Sie Ihre globalen Regeln hinzufügen, da diese Regeln für alle Projekte gelten , an denen Sie innerhalb dieses Cursors arbeiten werden. Du musst es dir also etwas genauer überlegen. Also das nächste, worüber wir sprechen werden, ist die Fortsetzung der Cursorregeln. Und speziell möchten Sie die Punkt-Cursor-Regeldateien erstellen. Diese Datei ist sehr wichtig, wenn Sie genaue Antworten, Antworten und Lösungen für Ihr Codierungsprojekt erhalten möchten . Es gibt tatsächlich eine spezielle Ressource im Internet. Lassen Sie uns einen kurzen Blick darauf werfen. Wie Sie sehen können, ist der Name dieses Projekts ein Cursorverzeichnis. Und hier können Sie verschiedene Arten von Regeln sehen. Nehmen wir also die erste, wie Sie hier sehen können, es ist ein Acument mit den Regeln Als Ihr erfahrener Experte für Entwickler in React Next, JavaScript, TypeScript und so weiter Dann heißt es zum Beispiel, die Benutzeranforderungen Scalf buchstabengetreu zu befolgen , und jetzt legt es die , und jetzt legt es Jetzt die Codierungsumgebung, die Codierungsimplementierung. Was Sie hier also tun können, wie Sie sehen können, gibt es verschiedene Kategorien, TypeScript, Python reagieren Und Sie können weitermachen und sich einfach ansehen, was Sie mehr interessiert Ordnung, Sie können also einfach auf Reagieren klicken und verschiedene Variationen sehen. Dann kannst du das einfach kopieren, so wie es in deinen Cursorregeln steht. Und wenn Sie dann den Cursor verwenden, werden diese Regeln als Kontext für Ihre Aufgaben angewendet. Schauen wir uns die Funktionen an. Wenn Sie also auf Befehl I klicken, erhalten Sie, wie Sie sehen können, einen Komponisten. Und wieder ist ein Komponist ein Agent. Es bedeutet also, dass es einige Aufgaben erledigen wird. Wir werden darum bitten, etwas zu tun. Wie Sie sehen können, bitten wir Sie, einen Rechenrechner mit vier grundlegenden mathematischen Operationen zu bauen mit vier grundlegenden mathematischen Verwenden Sie HTML, CSS und Vanila JS. Also klicken wir jetzt auf Senden und lassen Sie uns sehen. Wie Sie hier sehen können, heißt es Index-HTML-Generierung. Das ist der Grund, warum der Agent das tut. Also tut es tatsächlich etwas in Ihrem Namen. Jetzt generiert es ein Style-CSS. Und jetzt ist es Zeit für ein Drehbuch Jazz. Also, wie Sie sehen können, hat es seinen Job gemacht und auch eine kurze Zusammenfassung dessen, was es getan hat, vorgelegt . Lassen Sie uns also vorerst akzeptieren, lassen Sie uns das Ergebnis sehen. Wie Sie sehen können, haben wir einen Taschenrechner und er sieht ziemlich gut aus. Nette Hover-Effekte. Es ist ziemlich modern Und lassen Sie uns die Funktionalität ausprobieren, sieben plus sechs, 13. Fantastisch. Lass uns löschen. Machen wir es auf Null. Wie Sie sehen können, hat es von der ersten Iteration an einen ziemlich guten Job gemacht. Nacht. Versuchen wir also, einige Funktionen mit Composer hinzuzufügen. Jetzt werden wir darum bitten, neue Operationen wie Queer Root, Second Powers, Sinas und Kunden hinzuzufügen neue Operationen wie Queer Root, Second Powers, Sinas und Lass uns sehen. Wie Sie sehen können, hat es angefangen zu funktionieren und arbeitet gerade an einem Index-HTML. Wie Sie sehen können, sehen wir das Update. Jetzt hat es einige Arbeit in den Stilen und in der Skriptzeit erledigt. Wie Sie sehen können, haben wir einige neue Dinge im Drehbuch, und am Ende erhalten wir die Schlussfolgerung „Wenn“. Jetzt können wir die Änderungen überprüfen, aber im Moment möchten wir sie akzeptieren und das Ergebnis selbst sehen. Wie Sie hier sehen können, wurden sie sogar nach Farben gruppiert , weil es quasi eine neue Kategorie von Operationen ist. Also lass es uns versuchen. Es funktioniert. Lass es uns nochmal versuchen. Es funktioniert wieder. Wie Sie sehen können, hat es einen ziemlich guten Job gemacht . In Ordnung. Also schauen wir uns die nächste Art von Funktionalität an, nämlich den Chat. Lassen Sie uns also diese Funktion hervorheben, Nummer anhängen, und wie Sie sehen können, hat sie uns diesen Chat angeboten und uns auch eine Abkürzung gegeben Klicken wir also hier rein, Sie sehen, dass es als Kontext die Skriptdatei und auch die spezifischen Zeilen hat , sodass wir es sogar ausschließen können Die ganze Datei und versuche, sie zu bitten, etwas zu tun. Das heißt, könnten Sie sich eine einfachere Lösung einfallen lassen? Also lass es uns versuchen. Und wie Sie sehen können, hat es uns zumindest einen anderen Code zur Verfügung gestellt. Und wie Sie sehen können, könnten wir hier auf Anwenden klicken. Und dann zeigt es uns auf Git-Art den angewendeten und den gelöschten Code, und hier können wir ihn entweder ablehnen oder akzeptieren. Lassen Sie uns das für eine Sekunde akzeptieren, und der neue Code wurde mit einer Chat-Funktion hinzugefügt. Es gibt also auch eine vertraute Funktion zur automatischen Vervollständigung. Lass uns klicken. Die neue Linie, wie Sie sehen können, uns ein paar Vorschläge gemacht. Und mit dem Tab können wir das bearbeiten oder einfach überspringen. Shri inst hier zum Beispiel, ja, zum Beispiel hier, es schlägt vor, einen Kommentar und dann einen Code hinzuzufügen einen Kommentar und dann einen Code hinzuzufügen Das Letzte, was wir uns ansehen werden, ist ein Befehl Wenn wir also einen Code markieren und auf Befehl klicken, erhalten wir diese Inline-Eingabe-Chat-Funktionalität. Und hier könnten wir zum Beispiel sagen, erklären Sie das Und wie Sie sehen können, erhalten wir eine Erklärung in C, was ziemlich gut ist. Also meine Freunde, ich hoffe, dass ich Ihnen in einer sehr kurzen und kurzen Lektion die wichtigsten Tools gegeben habe die wichtigsten Tools , die Sie in der Cursor-KI verwenden können. 20. Übung: Endlich sind wir am Ende des Moduls angelangt, und es ist Zeit für Sie, die Übung zu machen. Die Übung wird also ziemlich einfach sein. Sie müssen einmal spielen und alle zwei Tests durchführen, die wir in diesem Modul behandelt haben. Ziel dieser Übung ist es, dass Sie sich ein grundlegendes Verständnis und ein gewisses Gefühl für jedes Tool aneignen. Hier ist ein einfacher Einstieg in NAP. Zunächst planen Sie also Ihre Aktionen für jedes Tool. Ich mache zum Beispiel A in Cloud und chatte GBT, B in V Null, C, Kodierung und D in Cursor Navigieren Sie zu diesem Tool oder laden Sie das Tool oder Erweiterungen herunter und versuchen Sie, die Aufgaben auszuführen 21. Zusammenfassung: Lassen Sie uns also Modul Nummer drei zusammenfassen. Sie haben in diesem Modul viel gelernt. Insbesondere haben Sie in Ihren Programmierprozessen jedes Tool angesprochen, das Sie in Ihrer Programmierkarriere möglicherweise benötigen könnten in Ihrer Programmierkarriere möglicherweise benötigen . Aber ich gebe dir ein paar wichtige Tipps. Konzentrieren Sie sich zunächst erneut zuerst und immer darauf, solide Programmierkenntnisse zu entwickeln, egal auf welchem Niveau Sie sich befinden. Denn solide Programmierkenntnisse bedeuten, die Architektur zu verstehen, die Muster zu verstehen, bewährte Methoden, einige Arten, Code zu organisieren, einige Arten, bestimmte Dinge zu lösen, diese zu verstehen, machen Sie zu einem sehr guten Entwickler. Und KI, auch wenn KI Ihnen keine gute Lösung bietet, könnten Sie entweder darum bitten, sie zu wiederholen oder sie irgendwie nach dem guten Wort zu bearbeiten Danach geh und lerne die Grundlagen. Nochmals die Grundlagen der KI-Kodierung. Das ist genau das, was Sie in diesem Kurs tun. Was meine ich mit Grundlagen? Die Grundlagen, ich meine die Grundprinzipien. Es ist wie das Alphabet beim Lesen, denn wenn man Buchstaben kennt, kann man Wörter erfinden, dann Sätze, dann Kapitel und dann das ganze Buch Und Sie können das Buch in immer kleinere Elemente zerlegen , weil Sie wissen, wie es strukturiert ist und Sie die Zusammenhänge der Systemelemente kennen die Zusammenhänge der Systemelemente Das Gleiche. Wenn Sie wissen, wie man die einfache Aufgabe nur in Cloud oder Chat-GPT erledigt, dann könnten Sie diese eine Stufe höher gehen und sie in Cdium verwenden und dann sagen wir Und wenn Sie dann diese grundlegenden Operationen ausführen, können Sie Ihren eigenen Stil für den Einsatz von KI in Ihrem Prozess entwickeln Ihren eigenen Stil für den Einsatz von KI in Ihrem Und der nächste Schritt besteht darin, solide Programmierkenntnisse und die Grundlagen der KI-Kodierung zu kombinieren , und dann können Sie sich mit fortgeschrittenen Dingen befassen. Es bedeutet, verrückte Kombinationen zu kreieren oder wie man das machen kann. Weil ich einige Leute auf YouTube gesehen habe, weißt du, wie sie verschiedene Tools verwenden, und einige von ihnen, weißt du, ihr Arbeitsablauf ist für mich einfach nicht wirklich verständlich. Und dann dachte ich an solche Weißen, weil sie endlich wieder zu dieser persönlichen Präferenz gekommen sind, sie endlich wieder zu dieser persönlichen Präferenz gekommen wie sie die Elemente der KI in ihrer Programmierung kombinieren können , weil es einigen Leuten gut geht, wissen Sie, einfach nur Codium zu verwenden, manchmal, wissen Sie, einige Dinge in die Cloud auszulagern. Und manche Leute brauchen einen Cursor mit all diesen Cursor-Dateiregeln, wissen Sie, immer Kontext, um die gesamte Datenbank im Kontext zu haben, tut mir leid, Codebasis und Dokumentation und alles Manche Leute ziehen es vor, zum Beispiel ich selbst, ich plane lieber zuerst meinen Code und gebe dann die kleinen Aufgaben der KI, du weißt schon, um sie zu erledigen. Und andere Leute, weißt du, sogar die guten, professionellen, sagen, sie beginnen mit KI und lassen den Komponisten am Mauszeiger die Arbeit machen. Also, nochmal, es ist eine fortgeschrittene Sache. Es sind persönliche Vorlieben. Aber um an diesen Punkt zu gelangen, müssen Sie die Grundlagen der Programmierung und die Grundlagen der KI beherrschen. Und das Letzte, was ich erwähnen möchte, ist, vorsichtig mit der Todesgrube umzugehen. Wie Sie sehen können, ist Pit of Death etwas Metaphorisches Was das ist, ich habe einige Leute gesehen, weißt du, wieder, die versucht haben, die gesamte App zu erstellen manchmal ohne Planung, manchmal, vielleicht sogar mit Planung, aber sie verlassen sich ausschließlich auf KI Und dann machen sie die erste Iteration. Es sieht gut aus. Dann addieren sie etwas. Es geht gut, gut, gut, gut, bis zu dem Punkt, an dem verschiedene Fehler, unterschiedliche Diskrepanzen in der Dateiorganisation, Struktur, vielleicht auch Bibliotheken von Drittanbietern Die Anzahl der Konflikte und Fehler wird also so groß , dass KI nicht in der Lage ist, sie alle zu lösen Das ist die Sache. So ist es, wenn Sie keine guten Programmierkenntnisse haben. Auch hier würde ich meinen Ansatz teilen, also planen Sie Ihr Projekt. Und dann gehen Sie Stück für Stück, Stück für Stück und bitten Sie KI, Ihnen zu helfen, mich zu verkaufen. Also hoffe ich, dass es nützlich war. 22. Modul 4: Einführung: Hallo und willkommen zum Modul Nummer vier. In diesem Modul lernen Sie die fünf Möglichkeiten kennen, wie KI Ihnen helfen kann , ein besserer Webentwickler zu werden und schneller zu programmieren. Erinnern wir uns also schnell daran was wir in den vorherigen Modulen gelernt haben. Im zweiten Modul haben Sie also die Grundlagen der KI gelernt. Also im Grunde genommen, wie man die KI-Chats richtig benutzt, wie man eine Aufforderung richtig erstellt, steht in der Modulnummer. Drittens haben Sie die KI-Codierungstools wie Chats, V Zero, Codium, den Dekodierungsassistenten und den KI-Code-Editor behandelt die KI-Codierungstools wie Chats, V Zero, Codium, den Dekodierungsassistenten und den KI-Code-Editor Das bedeutet, dass Sie über alle notwendigen Tools und Fähigkeiten verfügen , um sie zu verwenden In diesem Modul, Modul Nummer vier, werden wir uns dem Anwendungsteil zuwenden. Deshalb werden wir fünf Möglichkeiten behandeln, wie KI Ihnen helfen kann Ihren Arbeitsablauf zu verbessern und ein stärkerer Webentwickler zu werden. Und es ist wichtig, dass ich das auf fünf Arten sage , weil ich viel nachgedacht habe. Und das sind fünf Hauptmethoden, wie Sie KI einsetzen können. Es bedeutet, dass nicht mehr darüber nachgedacht wird, ob es noch etwas anderes gibt? Kann ich noch etwas tun? Also es gibt fünf Möglichkeiten und alles andere, es geht einfach unter eine dieser fünf Möglichkeiten. Also werden wir sie behandeln und du wirst hoffentlich lernen, wie man sie benutzt. 23. Kurseinheit 1: Willkommen zur Lektion Nummer eins. In dieser Lektion werden wir uns einen kurzen Überblick verschaffen, wir in diesem Modul lernen werden. In Modul Nummer vier werden wir also die fünf Möglichkeiten plus behandeln. Ich habe auch einen Bonus für dich vorbereitet. Das erste, was KI Ihnen helfen kann, ist die Entwicklung neuer Funktionen. Und wenn Sie sich vielleicht daran erinnern, was wir in einem Cursor, einem KI-Editor, behandelt haben, als wir den Cursor gebeten haben , einige Funktionen für den Taschenrechner zu erstellen. Zweitens ist es das Refaktorieren von vorhandenem Code, weil wir manchmal wieder im Cursor darauf hingewiesen haben, dass wir eine Funktion genommen haben und darum bitten, diese zu vereinfachen Weil es sehr oft vorkommt, dass Sie Ihren Code einfacher machen müssen oder manchmal, sagen wir, es hat etwas codiert, das Ihnen nicht so vertraut ist, wie eine Struktur, zum Beispiel wieder, in einem Taschenrechner, es hat ein JavaScript nach Klassenart codiert und nicht jeder kennt sich mit Klassen aus, und vielleicht möchten Sie einfach ein paar separate Funktionen haben. Drittens, was sehr häufig vorkommt, ist das Beheben von Fehlern, verschiedene Arten von Fehlern. Weißt du, hier gibt es keine Kommentare. Nummer vier ist das Vorschlagen von Lösungen. Zum Beispiel möchten Sie wieder etwas implementieren, sagen wir, Sie haben ein Feature im Kopf und sagen: Oh, ich würde es gerne bauen. Aber ich bin mir nicht sicher, was der beste Ansatz ist, oder ich verstehe nicht wirklich, wie das geht. Sie könnten also KI fragen, es könnte sowohl eine konzeptionelle Lösung sein, zum Beispiel in Bezug auf die Erklärung, eine grundlegende Erklärung dessen, was Sie tun müssen, als auch eine Codierungslösung. Und Nummer fünf, plus ein Bonus, es ist eine Kategorie des Lernens, Lernens als Webentwickler. Nummer fünf erklärt also den Code. Nehmen wir noch einmal an, KI hat Code generiert, oder Sie haben Code von einer Website wie Github oder vielleicht Code Pen genommen Github oder vielleicht Code Pen und Sie sind sich nicht wirklich sicher, was er tut, also könnten Sie darum bitten, ihn zu erklären. Und als Bonus, der persönliche Mentor, wir werden dieses Kapitel speziell behandeln. Mir gefällt es wirklich. Hier werden Sie KI bitten, Ihr persönlicher Mentor bei der Erstellung eines Schulungsprogramms zu sein . Und wenn Sie dann eine Lösung implementiert haben, bitten Sie darum, diese Lösung zu überprüfen. Falls Sie sich vielleicht erinnern, als wir über Modul Nummer zwei gesprochen haben, habe ich Ihnen die Aufgabe gezeigt Anzahl der Wörter in einer Zeichenfolge zu zählen, JS-Aufgabe und tatsächlich diese spezielle Sache. Es war wie ein persönliches Mentoring durch KI. Es wird also ein ziemlich interessantes Modul sein. 24. Kurseinheit 2: Hallo und willkommen zu Lektion Nummer zwei. In dieser Lektion werden wir untersuchen, wie AAA uns zunächst bei der Entwicklung neuer Funktionen helfen kann. Für dieses gesamte Modul nehmen wir als Beispiel ein Projekt, eine einfache E-Commerce-Seite. Also lass uns nachsehen. Also, meine Freunde, wir befinden uns innerhalb des Cursors, und wie Sie sehen können, das Interessante an der Neuzeit ist das Interessante an der Neuzeit, dass sich alles superschnell ändert. Im vorherigen Modul, das ich vor Kurzem aufgenommen habe , war die Benutzeroberfläche, wie Sie sich erinnern, hier ganz oben, wir hatten Chat, Composer und Bug-Finder, und jetzt wurde das neue Update veröffentlicht, und jetzt haben wir Chat. Chatten Sie nur hier, wie Sie sehen können, und der Agent, der zuvor Komponist war , ist hier und fragt und bearbeitet auch darunter. Oh, meine Freunde, zu Beginn der Lektion werden wir kurz untersuchen und zusammenfassen, werden wir kurz untersuchen und wie der Agent in Cursor Works funktioniert, was auch für Sie sehr hilfreich ist Deshalb habe ich eine sehr einfache Aufforderung vorbereitet darin besteht, einen Handel aufzubauen Produktseite der Bücher, Seite sollte aus zwei Teilen bestehen. Produktliste und Filter, Produktliste ist nur ein Kartenraster, einige Bedingungen für Karten zu Bild, Name, Kategorie und Preis, die Kategorien hier und einige Bedingungen für Filter. Es handelt sich also um einen Kategoriefilter für drei Artikel, Preisklasse und Verfügbarkeit. Es gibt also auch ein einfaches Text-Tag, das wir in diesem Kurs verwenden : HTML CSS und Manila JS. Also lass uns nachsehen. Styles werden gerade generiert. Wie Sie jetzt die Datei mit den Daten sehen können, werden die Daten GS generiert, und das Letzte ist ein JS-Skript. Also meine Freunde, es hat seine Generierung abgeschlossen. Klicken wir also auf Accept A und sehen das Projekt in der Live-Browser-Umgebung an. Also, meine Freunde, wir befinden uns im Browser und können sehen, dass er seine erste Iteration durchgeführt hat , bei der wir die Karten mit einem Bild, einem Namen, einer Kategorie und einem Preis sowie Filtern auf dieser Seite sehen Namen, einer Kategorie und einem Preis sowie Filtern auf dieser Seite Also lasst uns den Filter ausprobieren. Wir klicken auf Fiktion und wir sehen die Fiktion. Jetzt sehen wir alles. Lass uns Kinder holen. Wir sehen Kinder. Lass uns ausverkauft sein. Wir sehen, dass es ausverkauft ist. Wie Sie sehen können, haben wir hier einen Bug. Weißt du, wir haben schon darüber gesprochen, dass es völlig okay ist, Bugs zu haben. Gehen wir jetzt zum Preis. Gehen wir für, ich weiß nicht, etwa 16, 16 bis 30 Dollar und wir können sehen, dass wir Bücher in dieser Größenordnung haben Lassen Sie uns also anfangen, mit dem Teil zu arbeiten , in dem wir einige Funktionen hinzufügen oder einige Änderungen vornehmen können einige Funktionen hinzufügen oder einige Änderungen vornehmen Da wir also nur sechs Elemente hinzufügen, fügen wir zunächst einige weitere Elemente hinzu. Lassen Sie uns sechs weitere Artikel hinzufügen. Und wie Sie sich wahrscheinlich erinnern, gibt es Kontaktmaterial, und wir können Data JS wählen, weil die Daten aus dieser Datei stammen. Gehen wir also los, meine Freunde, schauen wir uns die Datei an. Und wie Sie sehen können, haben wir die Nummern sieben, acht, neun und alles bis zwölf. Also sechs und mehr Artikel. Also, wie Sie hier sehen können, haben wir 12 Bücher. Also per Aufforderung haben wir einige gemacht, in diesem Fall, einige Inhalte hinzugefügt Also, meine Freunde, wir befinden uns in einer Lektion, in der wir KI bitten, einige Funktionen zu entwickeln Also habe ich mir eine Aufforderung ausgedacht. Lass uns sehen. Fügen Sie also oben auf der Seite einen Eingabefilter für die Suche nach Titel hinzu. Die Filterung muss bei jedem Tastendruck erfolgen. Und wie Sie sehen können, hat es einige Arbeit geleistet, es hat HTML, CSS und natürlich JavaScript gemacht es hat HTML, CSS . Schauen wir uns also das Endergebnis an. Wie Sie sehen können, haben wir oben auf der Seite das Eingabefeld Suche nach Titel. Lass uns sehen. P auch, die Macht der Gewohnheit. Okay, lass uns gehen. Also einfach P, und es zeigt uns jedes Buch, das einen P-Buchstaben enthält. Also versuchen wir, 1984 zu sehen, und das sehen wir gerade. Also meine Freunde, ich glaube, Sie haben die Grundidee, dass Sie Ihr KI-Tool in diesem Fall aufrufen können , es ist ein Cursor, um etwas hinzuzufügen. Und noch einmal, was wichtig ist, um zu verstehen , dass KI ihren Job nicht perfekt macht, sondern nur als erster Entwurf. Als Nächstes können Sie Ihre Programmierkenntnisse nutzen , um einige Änderungen vorzunehmen. Wenn Sie zum Beispiel die Breite dieses Suchfeldes ändern möchten oder es vielleicht nur als Symbol verwenden möchten und es dann, wenn Sie darauf klicken, erweitert wird usw., können Sie es selbst tun oder KI fragen. Ich hoffe, du hast die Grundidee, wie das geht. 25. Kurseinheit 3: Willkommen zu Lektion Nummer drei. In dieser Lektion werden wir den zweiten Weg untersuchen, nämlich das Refactoring von vorhandenem Code. Also lass uns gehen. Wenn wir uns jetzt unsere Produktkarten ansehen, stellen wir fest, dass es nicht mehr auf Lager ist . Wir sehen also, dass die Karte nicht vorrätig ist wenn die Farben der Karte etwas gedämpft Aber was ist, wenn wir die Produkte an derselben Stelle ausverkauft haben möchten , an der wir auch andere Dinge wie Name, Kategorie und Preis haben Schauen wir uns also an, wie wir das erreichen können. Wir befinden uns jetzt also im Cursor und lassen Sie uns einen kurzen Blick auf den Code werfen. Und weißt du, wenn ich mir unseren Code nur ein bisschen ansah, konnte ich sehen, dass der Status „Auf Lager“ und „ Nicht vorrätig“ genau hier generiert wird und andere Dinge wie Name, Kategorie und Preis genau dort. Also habe ich gerade diese Zeile ausgewählt, Sie können 25 bis 43 durchschauen. Also genau da, Drehbuch 25 43, und ich habe nach einem einfachen Abschlussball gefragt. Also würde ich gerne den Status „Auf Lager nicht vorrätig“ in der Produktinformation der Klasse haben . Also ist es genau da. Also lass uns nachschauen , was es bewirken wird. Der Cursor hat also seine Gedanken erledigt, und jetzt können wir einen Unterschied erkennen . Also hat er das, was auf Lager ist, nicht vorrätig von hier oben entfernt und gleich da hingestellt. also für diesen Moment Lassen Sie uns also für diesen Moment die Änderungen hier und da akzeptieren. Drücken Sie hier und sehen Sie sich das Ergebnis im Browser an. Voilà. Und wie Sie sehen können, haben wir auf Lager und genau dort ausverkauft, was ziemlich gut aussieht ohne zu stören, und im Moment ist alles ziemlich klar Lassen Sie uns also den Filter überprüfen. Also auf Lager, wir sehen den Istock und jetzt vergriffen. Also nochmal, wichtig zu beachten ist, dass es trotzdem gut ist , wenn Sie den Code verstehen, denn zuerst habe ich mir den Code angesehen und um eine bestimmte Änderung an einer bestimmten Stelle gebeten Und bei KI gilt: Je spezifischer Sie sind, desto qualitativ bessere Antworten und Antworten erhalten Sie , was Ihnen wiederum viel Zeit und Mühe erspart. Und das ist eines der Dinge, mit denen Sie zweimal oder sogar dreimal schneller bauen können . 26. Kurseinheit 4: Willkommen zu Lektion Nummer vier. In dieser Lektion werden wir den dritten Weg untersuchen , wie KI uns helfen kann. Ist Bug-Fixing. Also lass uns gehen. Wir befinden uns also in unserer Buchhandlungs-App, und wie Sie sehen können, erhalten wir diese Meldung, wenn wir den Mauszeiger über die Bücher bewegen, die nicht vorrätig sind erhalten wir diese Aus irgendeinem Grund haben wir ein sehr hungriges Raupenbuch. Aus irgendeinem Grund sehen wir hier den Arista, und wie Sie hier sehen können, Maus drüber bekommen wir ein sehr seltsames Verhalten, wenn ich mit der Unser Ziel ist es, etwas damit zu tun, also behebe diesen Fehler. Es ist wichtig zu sagen , dass, wie Sie zu Beginn dieses Moduls gesehen haben, KI den Code mit diesem Fehler von Anfang an erstellt hat , und jetzt sehen wir uns die Live-Action an. Wie kannst du damit arbeiten? Also meine Freunde, wir sind am Cursor. Und wieder kommen wir zu dem zurück, was ich mit Ihnen über den ganzen Kurs gesagt habe , dass das Erste, was zuerst kommt, solide Programmierkenntnisse sind. Es geht darum, zu verstehen, wie das Projekt aufgebaut ist , die Zusammenhänge zu verstehen. Und die Verhaltensmuster der einzelnen Teile Ihrer Anwendung. Und so verstehe ich natürlich, dass die Hover-Aktion von CSS stammt Also werde ich zunächst versuchen, nach den Hover-Dingern zu suchen. Und wie Sie sehen können, müssen wir unser Verhalten im Schwebemodus Der erste sind Filter, und wir wissen, dass das nicht der Fall ist Und die zweite, die Produktkarte, und wir können hier sehen, dass sie einfach übersetzt Das heißt, es geht hoch oder runter. Das ist es also nicht. Also als Nächstes. Also, wo bekommen wir das dann her? Da wir das also wahrscheinlich nicht in unserem programmgesteuert generierten HDML haben , sollte es hier in CSS sein. Und das ist wahrscheinlich entweder davor, was wir nicht haben, oder nach unserem Und Ovala, wir kriegen unser Nachher. Und genau danach haben wir gesucht , weil es aussagt, auf Lager zu sein, und es hat die rötliche Farbe Lassen Sie uns also das Gewöhnliche tun, also diesen Code aus der Kompilierung in den Browser entfernen und das Ergebnis sehen Und wie wir sehen können, hat es seinen Job gemacht. Wir sehen nicht, dass das ausverkauft ist. Also nochmal, es geht darum, dein Handwerk zu kennen, und jetzt kommen wir zum KI-Teil. Wir sind also wieder in unserem Editor, und wie Sie sehen können, habe ich das Pseuda-Element nach dem Kommentieren Also haben wir diesen Bug wieder. Also lasst uns KI um Hilfe bitten. Und wie Sie sehen können, setze ich keinen Kontext, keine Datei, nichts, denn nehmen wir an, wir wissen nicht, woher dieser Fehler kommt. Und ich habe die Eingabeaufforderung in einer natürlichen Sprache eingestellt. Ich sage, wenn ich mit der Maus über die Karte mit dem Status „Nicht vorrätig“ fahre, sehe ich den Block, der diesen Status anzeigt Entferne es. Ich darf nichts auf Hoved sehen. Also meine Freunde, ziemlich einfache natürliche Sprache. Also lasst uns sehen , was es bewirken wird. Meine Freunde, es hat seinen Zweck erfüllt, und wie Sie sehen können, hat es, bevor wir die Änderung akzeptieren, bevor wir die Änderung akzeptieren, genau diese Blockade beseitigt , die wir selbst gemacht haben. Also lasst uns das akzeptieren. Es ist weg und sehen wir uns das Ergebnis an. Wir sind in unserer Buchhandlung und es gibt keinen Status als ausverkauft Nochmals, meine Freunde, wie Sie sehen können, ist es viel einfacher, die Aktionen Ihrer KI zu steuern, wenn Sie den Code kennen ist es viel einfacher, die Aktionen Ihrer KI zu steuern 27. Kurseinheit 5: Komm zu Lektion Nummer fünf. In dieser Lektion werden wir den vierten Weg untersuchen , wie KI uns helfen kann. Es handelt sich also um einen Vorschlag für Lösungen und bewährte Verfahren. Schauen wir uns also an , wie es funktioniert. Wir befinden uns also auf unserer eCom-Seite, und die gängigste Funktion, die moderne Geschäfte haben, ist eine Schaltfläche oder eine Schaltfläche zum Hinzufügen zur Wunschliste irgendwo auf einer Karte Nehmen wir an, wir möchten so etwas hinzufügen, wir sind uns nicht sicher, was der beste Weg ist , oder wir sind uns im Allgemeinen nicht sicher Und wir würden gerne einen Lösungsvorschlag von KI erhalten . Lass uns gehen. Wir befinden uns also innerhalb des Cursors in SAI, und was wichtig zu wissen ist. Vorher haben wir also einen Agentenmodus zum Generieren von Dateien im Code verwendet . Und in diesem speziellen Fall würden wir gerne eine Art Beratung erhalten. Also müssen wir in den Fragenmodus wechseln. Okay? Und bevor wir loslegen, empfiehlt es sich, der Codebasis einen Kontext zuzuweisen. Und wenn Ihr Projekt ziemlich umfangreich ist, sind Sie sich manchmal nicht ganz sicher, wie Sie etwas genau machen werden. Deshalb ist es besser, KI zu verwenden, um das ganze Bild zu bekommen, nämlich Ihre Codebasis. Es ist also eine ziemlich einfache Aufforderung, die besagt, dass ich den Wunschlisten-Button auf der Karte als SVG-Hardicon hinzufügen möchte der Karte als SVG-Hardicon Was wäre der richtige Ansatz? Geben Sie mir die Roadmap für die Implementierung dieser Funktion. Auch hier handelt es sich nicht um eine Implementierung der Code-Funktionalität Es ist eine Art Beratung. Lass uns gehen. Die KI hat also ihre Arbeit beendet, und jetzt haben wir eine Erklärung. Und es erklärt, dass Sie ein neues Set hinzufügen können. Es gibt Ihnen einige Markups, Stile, Event-Handling und einige, Sie wissen schon, Schritte, um das zu implementieren Auch hier war es, wie ich bereits sagte, eine Beratungspraxis Es liegt also an Ihnen, was Sie von diesem Schritt aus tun möchten. Wenn es dir gefällt und du es selbst machen möchtest, kannst du gehen. Aber wenn du dich zum Beispiel faul fühlst oder du dir nicht sicher bist du das alleine machen kannst, dann kannst du in den Agentenmodus zurückkehren und das machen. Also meine Freunde, nehmen wir an, mir hat der Vorschlag gefallen, und dann bin ich einfach in den Agentenmodus gegangen und habe so etwas Ähnliches gesagt. Ich mag Vorschläge, machen Sie weiter und setzen Sie sie um. Also hat es den Code implementiert , wie wir es zuvor gesehen haben. Ich habe das akzeptiert und lassen Sie uns das Endergebnis sehen. Wir sind in unserer Buchhandlung und sie hat tolle Funktionen, wie Sie es sich gewünscht haben Und es ist wichtig zu verstehen, dass nach Lösungsvorschlägen oder Best Practices fragen, Sie nach Lösungsvorschlägen oder Best Practices fragen, manchmal einfach GPT verwenden, clade oder chatten können , vor allem, wenn es etwas Alltägliches ist Nehmen wir an, Sie möchten in Ihrer Anwendung nach der Authentifizierung fragen , dann könnten Sie einfach nach einem bestimmten Fall fragen Im Allgemeinen verwende ich also Next Jazz, was die beste Authentifizierung für SAS wäre, etwa 100 bis 1.000 Benutzer. Und Sie könnten zum Beispiel auch Ihr Budget angeben. Also noch einmal, sogar die Cloud oder Cha GPT werden Ihnen, Sie wissen schon, einige Vorschläge zur Auswahl der richtigen Technologie Das Gleiche gilt für die bewährten Methoden. Sie planen beispielsweise, Ihrer Website einige Bilder hinzuzufügen Sie könnten nach den Best Practices fragen . Nehmen wir an, Sie haben eine Landingpage erstellt, welche Art von Grafik ist die beste Methode, um Web-PP und GJPG-SVG-Kombination daraus zu verwenden, oder Renderstrategien und Netze Es ist also ungefähr so, mein Freund. Also musst du dich je nach Aufgabe für die Echo AI-Technologie entscheiden . 28. Kurseinheit 6: Hallo und willkommen zur Lektion Nummer sechs. In dieser Lektion werden wir die fünfte Möglichkeit untersuchen, wie KI uns helfen kann, darin besteht, unseren Code zu erklären. Lassen Sie uns also anfangen. Wir befinden uns also in unserem Projekt , das wir in diesem Modul durchgeführt haben, am Cursor . Und nehmen wir an, wir hätten gerne eine Erklärung für unser Skript. Es ist ziemlich einfach, wie du siehst, du fragst einfach den Befehl, ich und du bekommst deinen Chat. Es ist wichtig, sich für die Frage-Option zu entscheiden , weil wir nur einige Informationen zur Erklärung erhalten möchten . Und als Kontext, ja, wir haben speziell das Skript z ausgewählt , weil wir eine Erklärung für diese bestimmte Datei erhalten möchten eine Erklärung für diese bestimmte Datei und wir einfach eingeben lassen, ist einfach. Fordere ganz einfach auf, erkläre den Code und lass uns die Eingabetaste drücken. Wie Sie sehen können, habe ich begonnen, uns eine Erklärung zu geben. Und natürlich können Sie diese Erklärungen nacheinander durchgehen und beginnen, sie zu verstehen und Ihre Erkenntnisse zu gewinnen. Wir können KI also auch auf folgende Weise bitten , uns bei der Erklärung des Codes zu helfen. Nehmen wir an, wir bekommen die Funktion, wir markieren sie und klicken einfach auf Befehl, und wir erhalten dieses kleine Eingabefeld. Es ist also eine Art lokale Methode etwas KI für Sie erledigen zu lassen. Also hier fragen wir wieder nach der Erklärung des Codes und klicken dann einfach auf Enter. Und wie Sie sehen können, gibt es uns quasi Inline-Kommentare, die wir uns durchlesen können. Ehrlich gesagt funktionieren beide Arten und das Gleiche, was Sie mit einer Codium-Erweiterung machen können , was wir bereits besprochen haben Aber ich persönlich bevorzuge es, wenn ich normalerweise darum bitte, den Code zu erklären, wenn es etwas sehr schnelles ist, dann könnte ich diese Inline-Funktionalität verwenden Aber meistens, wenn ich versuche, den Code zu verstehen möchte ich ihm mehr Aufmerksamkeit schenken, und ich bevorzuge Chat-GPT Oh, meine Freunde, wir sind im Chat GPT. Und auch hier, wenn Sie die Aufforderung ausführen, können Sie Ihre Eingabeaufforderung explizit formulieren oder Sie könnten sehr kurze Eingabeaufforderungen verwenden, denen ich normalerweise den Code erkläre Im unteren Teil habe ich zum Beispiel darum gebeten, den folgenden Code für einen Anfänger zu erklären Manchmal könnte ich sagen, erkläre den Code unten explizit, etwa so. In der Regel reicht es aus denn wie wir bereits besprochen haben, versteht man manchmal, wenn man eine Erfahrung hat, das ganze Bild und vielleicht braucht man die Details. Lassen Sie uns also sehen , was es bewirken wird. Wie ich bereits erwähnt habe, mag ich an Chad GPT für diese spezielle Aufgabe wirklich , denn wie Sie sehen können, teilt es unseren Code in Sie sehen die sehr praktischen Codehervorhebungen die Sie durchgehen können, und dann können Sie, wissen Sie, einfach ein paar zusätzliche Fragen zu bestimmten Dingen stellen , die Sie nicht gut verstanden haben Also nochmal, es ist nur eine persönliche Präferenz. Ich möchte es nur mit dir teilen. 29. Kurseinheit 7: Hallo, meine Freunde, und willkommen zur Lektion Nummer sieben. Und in dieser Lektion möchte ich Sie darüber informieren, wie Sie KI als Bonus nutzen können , um ein besserer und effektiverer Entwickler zu werden. Deshalb werde ich Ihnen zeigen, wie Sie KI als Ihren persönlichen KI-Mentor einsetzen können . Also nur eine kurze Notiz: Wenn Sie sich an die Zeiten vor der KI erinnern, manchmal, wenn Sie ein Projekt durchführen oder neues Material lernen, Sie wahrscheinlich oft haben Sie wahrscheinlich oft spezifische Fragen einigen Details, weil Sie etwas verstehen möchten oder vielleicht einige Implementierungsdetails. Und für einen Anfänger in einem neuen Thema ist es nicht sehr klar , sich ein Gesamtbild zu machen, um diese Details zu verstehen. Und, äh, wie früher, nutzte ich einige Foren, einige private Programmiergruppen, in denen ich Fragen stellte und Antworten von echten Leuten bekam. Und wieder könnte es sehr kleine Sache oder sogar eine Präferenz sein. Also nicht etwas Spezifisches, auf das Sie eine eigensinnige Antwort erhalten, nicht etwa etwas Bestimmtes Und jetzt, in der Zeit der KI, hat das für uns alles verändert , denn jetzt könnten Sie erfahrene Webentwickler mit langjähriger Erfahrung mit einer riesigen Codebasis haben erfahrene Webentwickler mit langjähriger Erfahrung mit , die quasi ein Gehirn ist Das könnte viele, viele Ihrer Fragen beantworten Schauen wir uns das mal an. Deshalb bevorzuge ich den Chat GPT, weil es auch hier kostenlos ist Es hat unbegrenzt viele Nachrichten und normalerweise reicht es aus, wenn ich eine Mentoring-Möglichkeit nutzen möchte eine Mentoring-Möglichkeit nutzen möchte Wie du hier sehen kannst, würde ich es dir gerne zeigen. Die Startaufforderung ist ziemlich einfach. Bitte listen Sie ein Anfängerprojekt auf, um die CSS-Positionierung und das Box-Modell zu üben. Nehmen wir an, es ist ein neues Thema, bei dem Sie gerade einen Abschnitt gelesen haben , Sie wissen schon, ein Kapitel bei MDN Docs und ein paar Artikel, und dann möchten Sie üben, um es ein bisschen tiefer zu verstehen Und deshalb bitte ich, Sie wissen schon, ein Projekt für Anfänger aufzulisten , um dieses Ding zu üben Und jetzt könnten wir sogar, wissen Sie, einen Schritt zurückgehen und bitten, diese Aufforderung für uns zu verbessern, indem wir die Eingabeaufforderungsformel verwenden , die wir zuvor gelernt haben, das Beispiel für den Aufgabenkontext, und ich frage Der erste Schritt der Aufforderung besteht also darin, eine Formel für die Aufforderung zu verwenden, Kontexte und ein Beispiel zu testen, die folgende Eingabeaufforderung entsprechend dieser Formel umzuschreiben, und ich Und wie Sie sehen können, wurden einige Erweiterungen für Aufgabenkontakte und Muster vorgenommen, und jetzt erhalten wir die endgültige und jetzt erhalten wir Es sieht jetzt also ziemlich erweitert aus. Können Sie also ein anfängerfreundliches Projekt vorschlagen die CSS-Positionierung und das Box-Modell üben können? Beispiele könnten sein. Also lass es uns zusammen versuchen, benutze diese Aufforderung. Also lass uns das kopieren. Das und wir werden sehen , was es bewirken wird. Fantastisch. Es hat seine Arbeit erledigt, und wie Sie sehen können, haben wir einige Projektideen wie Kartenlayout, einfache Navigationsleiste, Sticky Footer usw. Also keine schlechten, wirklich keine schlechten Ideen zum Üben. Nehmen wir zum Beispiel an, wir haben einige davon ausgewählt, und auch hier sind wir uns nicht sicher, wie wir von diesem Punkt aus weitermachen sollen. Also kommt das nächste Ding ins Spiel. Jetzt zeige ich dir den zweiten Abschlussball, den ich sehr oft benutze, und die Basisversion sieht so aus. Erstellen Sie ein schrittweises Tutorial mit expliziten Anweisungen und Erklärungen für den Namen des Projekts für die List-App in Jazz. Ich gebe auch sehr oft an, dass ich ein Anfänger bin. Ordnung. Und wieder wurde das neu geschrieben, und jetzt bekommen wir die ziemlich gebündelte Aufforderung zur KI Jetzt können wir diese sehr gut strukturierte Aufforderung verwenden diese sehr gut strukturierte Aufforderung und sie für eine Kombination von Projekten verwenden, die wir gerne üben würden Schauen wir uns also die endgültige Version an. Die Vorderseite sieht also so Erstellen Sie ein anfängerfreundliches schrittweises Tutorial mit expliziten Anweisungen und Erklärungen zum Erstellen eines reinen CSS-Tooltips Das ist also ein Projekt , das sie vorgeschlagen hat. Und der zweite Teil, das Tutorial, sollte der Einrichtung der HTML-Struktur, dem Styling mit CSS und allem anderen befassen, was Sie für wichtig halten. Bitte stellen Sie sicher, dass jeder Schritt klar erklärt wird. Lassen Sie uns also sehen , was es bewirken wird. Chat GBT hat also seinen Job gemacht, und wie Sie sehen können, haben wir ein schrittweises Tutorial bekommen, das wir sofort üben können Also bekommen wir den ersten Schritt, den HTML-Code, und die Erklärungen, Schritt zwei mit CSS. Nochmals mit Kommentaren. Schritt drei, erklärend, CSS und Schritt vier, wie man das testet Und es hat dir auch die nächsten Schritte gegeben. Ich denke, insgesamt ist es ein ziemlich gutes System , um etwas zu üben. Und das Letzte, was ich Ihnen in dieser Lektion mitteilen möchte , ist die folgende Sache. Nehmen wir an, Sie haben ein Thema gelernt und das neue Konzept wurde behandelt, und Sie haben ein gewisses Verständnis dafür bekommen. In letzter Zeit habe ich zum Beispiel in den nächsten Has etwas über Rendering-Strategien gelernt . Nachdem ich also, wissen Sie, die Dokumentation gelesen , mir einige Tutorials einige Erklärvideos angesehen habe, versuche ich zu verstehen , wie richtig ich diese Konzepte verstanden habe. Und das mache ich normalerweise. Also hier, wie ich mein Verständnis des Themas überprüfe. Also zum Beispiel, wie ich bereits über die Rendering-Strategien von Next Es gesagt habe. Es gibt also vier Haupttypen. Also nehmen wir an, ich schreibe meine Zusammenfassung. SSR ist ein Standard, CSR NAS Climb, da da, da, da, und dann, was ich normalerweise frage Am Ende ist die Frage, ob ich richtig bin oder einfach, Sie wissen schon, in Kurzform, Und dann sehe ich die Reaktion der KI. Wie Sie sehen können, haben Sie größtenteils Recht, aber es gibt nur eine kleine Klarstellung in Bezug auf SSR. Und es fängt an, dir seine Kommentare zu geben, und dann kannst du mit ihm chatten, weißt du ein paar zusätzliche Fragen stellen bis du das Material richtig verstanden Ich hoffe also, das war hilfreich. 30. Übung: Meine Freunde, es ist Trainingszeit. Es ist an der Zeit, dass Sie das, was wir in diesem Modul behandelt haben, in die Praxis umsetzen . Du hast viel gelernt. Die Aufgabe ist ziemlich einfach. Ihr Ziel ist es also, jede der Methoden, die wir gelernt haben, mindestens einmal zu testen , meine Freunde, damit Sie ein grundlegendes Verständnis und ein gewisses Gefühl dafür entwickeln. Machen Sie also zuerst weiter und überlegen Sie sich ein Projekt. Auch hier schlage ich vor, dass Sie zum Beispiel den Chat GPT verwenden und Sie bitten, Ihnen einige Projektideen zu geben Idealerweise, wenn es etwas Kleines ist, denn auch hier Ihre Hauptaufgabe darin, die Mechanik zu üben, die Prinzipien und Grundlagen zu verstehen, und dann können Sie das auf etwas Größeres anwenden Danach ist es Ihr Ziel, die Interaktionen zu planen , die Sie verwenden werden. Lassen Sie mich Ihnen ein Beispiel geben. Der erste Schritt könnte also sein, nachdem Sie sich eine App ausgedacht haben, die Sie erstellen möchten Beispielsweise verwenden wir erneut die E-Commerce-Seite. Sie könnten KI also als Webentwickler für Anfänger bitten, eine App zu erstellen , und dafür könnten Sie den Cursor verwenden. Dann könnten Sie bei einigen Funktionen danach fragen, je nachdem, was für Sie bequemer ist. Dann könnten Sie als leitender Webentwickler darum bitten , den Code umzugestalten, da es sich auch hier zuvor um Anfänger handelte Dann könntest du ein paar Bugs machen und darum bitten, diesen Bug zu beheben, oder wenn du ein Kästchen entdeckst, versuche, weißt du, vielleicht ein paar kreative Wege auszudenken , wie du damit umgehen kannst Dann könnten Sie es bitten, Ihnen einige Funktionen zu empfehlen , die Sie zu diesem Projekt hinzufügen können, und am Ende könnten Sie üben, den Code zu erklären. Und meine Freunde, ich schlage Ihnen wirklich vor, andere Tools zu verwenden . Also nochmal, denn die Hauptidee ist, dass Sie Ihren eigenen Stil finden, etwas, das zu Ihnen passt. Also geh rein und fang mit der Übung an. 31. Modul 4: Zusammenfassung: Herzlichen Glückwunsch zum Abschluss eines Moduls Nummer vier. Und zu diesem Zeitpunkt sind Sie mit allem ausgestattet, was Sie benötigen, um erfolgreich Projekte mit KI zu erstellen, denn zunächst haben Sie KI-Tools gelernt, die Sie bei Ihrer Arbeit verwenden können, wie Chats, Programmierassistenten und KI-Code-Editoren. Außerdem haben Sie gelernt, wie Sie diese Tools in Ihren Projekten einsetzen können, und jetzt ist es an der Zeit, sie tatsächlich zu üben. 32. Modul 5: Einführung: Hallo und willkommen zum Modul Nummer fünf. In diesem Modul werden wir zwei Geschwindigkeiten der Codegenerierung exportieren . Meine Freunde, in den vorherigen Lektionen habt ihr erfolgreich die Grundlagen der KI erlernt. Als Nächstes lernen Sie die KI-Codierungstools wie Chats, Code-Editoren, spezialisierte Chats und Codierungsassistenten kennen. Und im vorherigen Modul haben Sie die fünf Möglichkeiten behandelt, KI für die Codierung zu verwenden. Das bedeutet, dass Sie jetzt Instrumente haben und genau wissen, wie man sie benutzt. Nun, es ist an der Zeit, herauszufinden wie schnell Sie sie einsetzen können. In Modul fünf werden wir uns also mit der ersten und zweiten Geschwindigkeit, der sogenannten Nutzung von KI, befassen und herausfinden, für welche Methode wir uns entscheiden sollten. 33. Kurseinheit 1: Willkommen zur Lektion Nummer eins. In dieser Lektion werden wir uns einen kurzen Überblick darüber verschaffen was wir im Modul behandeln werden. Die erste Geschwindigkeit, die ich nenne, ist also , wenn Sie den Kopier- und Einfügevorgang haben Das heißt, nehmen wir an, Sie generieren Code in der Cloud oder im Chat GBT und fügen ihn dann in Ihren Code-Editor Dann hast du einen Fehler. Auch hier fügst du diesen Code in den Chat ein oder vielleicht etwas anderes mit vZeroExplore und fügst dann wieder ein Und die zweite Geschwindigkeit, die ich nenne, ist kein Kopieren und Einfügen. Das ist der Fall, wenn Sie etwas in Ihrem Code-Editor verwenden , zum Beispiel etwas wie den Codierungsassistenten oder sogar den KI-Code-Editor In diesem Modul werden wir verschiedenen Aspekte der ersten Geschwindigkeit und der zweiten Geschwindigkeit sowie die Vor- und Nachteile besprechen, denn was auch immer Sie wählen, ist Ihre persönliche Präferenz abhängig von Ihren bestimmten Bedingungen. 34. Kurseinheit 2: Willkommen zur Lektion Nummer zwei. In dieser Lektion werden wir uns mit der ersten Geschwindigkeit befassen. Wie bereits erwähnt, die erste Geschwindigkeit im Grunde darin, Code hin und her zu kopieren und einzufügen, in den Chat zu gehen, etwas Code zu generieren, zu analysieren und dann zu Ihrem Code-Editor zu gehen und ihn dort einzufügen und zu überprüfen, und dann zu Ihrem Code-Editor zu gehen und ihn dort einzufügen und ob alles Lassen Sie uns also zunächst einige gute und starke Seiten behandeln. Natürlich ist das Verständnis besser kontrollierbar , da Sie jede spezifische Aufgabe nacheinander erledigen. das ist hervorragend zum Lernen Auch das ist hervorragend zum Lernen geeignet, weil es einen detaillierten Ansatz gibt und Sie bei jedem Schritt innehalten, nachdenken, testen und dann weitermachen können , testen und dann weitermachen nächste gute Seite ist , dass Sie so ziemlich jeden Chat verwenden können, den Sie möchten, Chat GPT, Claude oder sogar Gemini oder Sie sind also quasi unabhängig von der Wahl Ihres Tools. Da es sich um einen detaillierten Ansatz handelt, ist das Risiko geringer, dass etwas Unerwartetes passiert, wenn Sie jeden Schritt, jede Änderung Ihres Codes überprüfen jede Änderung Ihres Codes Nun die schwache Seite, die Nachteile. Der Workflow wird also natürlich etwas langsam sein, weil Sie in den Chat gehen, einfügen, den Code generieren, kopieren und zurückgehen müssen. Außerdem erfordert es wiederum mehr Aufmerksamkeit von Ihrer Seite, denn Sie müssen jeden Code überprüfen, einfügen und sicherstellen, dass jedes noch so kleine Zeichen, einschließlich eckiger Klammern und eckiger Klammern, enthalten ist und nichts übersehen wird. Und noch einmal, weil es mehr Aufmerksamkeit von Ihnen und viele Bewegungen erfordert , ist die Wahrscheinlichkeit größer, Fehler zu machen. Zusammenfassend lässt sich sagen, dass diese erste Geschwindigkeit am besten für Anfänger im Programmieren und insbesondere für Anfänger in der KI geeignet ist am besten für Anfänger im Programmieren und insbesondere für Anfänger in der KI geeignet . Also nochmal: Auch wenn Sie ein erfahrener Entwickler sind, aber nicht so viel Erfahrung mit KI haben, sollten Sie mit Geschwindigkeit eins beginnen. Und zweitens, ob Sie ein Budget haben oder kein Budget, das ist ein sehr guter Anfang, da sie so gut das ist ein sehr guter Anfang, wie kostenlos sind. 35. Kurseinheit 3: Lektion, wir werden die zweite Geschwindigkeit erkunden. bereits erwähnt, gibt es bei der zweiten Geschwindigkeit also im Grunde bei der zweiten Geschwindigkeit keinen Kopier-/Einfügevorgang Alles passiert in Ihrem Code-Editor. Erinnern Sie sich an Cdium oder Cursor, dann verstehen Sie wahrscheinlich, wovon ich spreche Lassen Sie uns zunächst wieder mit der starken Größe beginnen. Die Hauptsache ist ein schnellerer Arbeitsablauf , da alles in Ihrem Code-Editor passiert. Sie könnten den Code sofort umgestalten und den Agenten verwenden, wenn Sie den Cursor Natürlich haben Sie eine gute Funktion zur automatischen Vervollständigung, denn auch hier kennen das Codium oder der Cursor den Kontext Ihres Projekts und können sofort etwas in Ihren Stilen oder Ihrem Skript vorschlagen noch einmal über den Prozess zur Fehlerbehebung sprechen, es ist einfacher, weil es Ihre Codebasis kennt und aus diesem Grund möglicherweise viel schneller eine passende Lösung vorschlägt diesem Grund möglicherweise viel schneller eine passende Lösung Und Sie machen weniger Fehler , weil viele Dinge auf der KI-Seite passiert sind. Jetzt die schwachen Seiten. Also nochmal, wenn Sie die Kontrolle über jeden Teil Ihres Codes haben möchten, dann werden Sie sich ein wenig unwohl fühlen , weil KI Ihren Code ziemlich gut abdeckt, wie Sie sich wahrscheinlich aus unserem Essens-Kurs erinnern Als Nächstes können Sie, wenn Sie in Ihrem Prozess generell zu viel KI-Codierung verwenden, Ihr Qualifikationsniveau da KI alles für Sie selbst erledigt Als Nächstes können Sie natürlich einige unerwartete Codeänderungen vornehmen, da wiederum, insbesondere wenn Sie Agent verwenden , viele Teile Ihres Codes neu schreiben könnten Und das Letzte, also fangen Sie an, von einem bestimmten Tool wie dem Cursor abhängig zu sein, was vielleicht gut und vielleicht nicht so gut ist Es liegt an dir, zu entscheiden, aber es ist die Realität. Um es noch einmal zusammenzufassen: Die zweite Stufe ist eher etwas für erfahrene Programmierer und für Personen, Erfahrung im Umgang mit KI haben und auch ein Budget haben, weil diese bezahlt werden, vor allem, wenn Sie viel Code schreiben 36. Kurseinheit 4: Willkommen zu Lektion Nummer vier. In dieser Lektion werden wir ein wenig darüber sprechen, welche Geschwindigkeit wir wählen sollen , weil manchmal immer noch nicht wirklich klar ist , was und wie. Um es kurz zusammenzufassen: Wie bereits erwähnt, bereits erwähnt, ist es eher eine kanonische Aussage, dass die erste Geschwindigkeit besser für Anfänger und das Codieren in KI geeignet ist und wenn Sie einige Budgetbeschränkungen haben, und die zweite Geschwindigkeit am besten für erfahrene Programmierer und KI-Benutzer geeignet ist, die über ein gewisses Budget für diese Tools verfügen Am Ende möchte ich das noch einmal unterstreichen. Selbst wenn Sie ein erfahrener Entwickler und erfahrener KI-Anwender beim Programmieren werden , ist es immer noch eine Frage der persönlichen Vorlieben, die auf Ihrer Erkundung dieser Tools, Ihren Ansätzen beim Programmieren im Allgemeinen und Ihrer Erfahrung basieren Ihren Ansätzen beim Programmieren im Allgemeinen und Ihrer Erfahrung Denn wie ich bereits gesagt habe, gibt es erfahrene Entwickler, die sich völlig auf einen Cursor verlassen , um fast das gesamte Projekt für sie zu erstellen , wie sie sagen, 90% des Codes werden von KI geschrieben und dann überprüfen und erledigen sie einfach einige und andere erfahrene Entwickler, sie verwenden vielleicht nur zum Beispiel Cdium und sie haben das Gefühl, dass es für sie genug ist, vielleicht nur mit ein bisschen Also nochmal, beide sind erfahrene, erfolgreiche, reife Entwickler, aber die Herangehensweise an die Tools und die Verwendung von erfahrene, erfolgreiche, reife Entwickler, aber die Herangehensweise an die Tools und KI könnten sehr unterschiedlich sein, denn auch hier ist es sehr wichtig zu verstehen dass KI manchmal, vielleicht auf den ersten Blick , wenn Sie nicht so viel Erfahrung mit KI , auf den ersten Blick haben, auf den ersten Blick sehr schnell einige Codefunktionen erstellen kann, und Sie sagen, Wow, ich bin so schnell unterwegs. Aber dann könnten Sie auf ein Problem im Code oder auf eine Verbindung zwischen Ihren Modulen, Subsystemen, die nicht wirklich verstehen, warum es aufgetreten ist, und auf einige potenzielle Codierungsprobleme stoßen ein Problem im Code oder auf eine Verbindung zwischen Ihren Modulen, Subsystemen, die nicht wirklich verstehen, warum es aufgetreten ist , und Sie werden viele Stunden damit verbringen und Sie werden viele Stunden damit verbringen, dieses Problem zu verstehen und zu lösen, wodurch die Zeit vernachlässigt wird, die Teil der Codegenerierung gewonnen wurde. Auch hier müssen Sie vorsichtig sein und mich meinen persönlichen Ansatz teilen lassen, wie ich es zumindest heutzutage mache. Also, wie Sie sehen können, dieses Quadrat mit einem dicken Rand, sagen wir, es ist ein Projekt. Es ist ein kleiner Überschuss oder eine Webanwendung, die ich gerade erstelle. Und die kleinen Quadrate darin einige Teile dieser Anwendung, zum Beispiel ein Teil der Authentifizierung, Routen, API und so weiter und so weiter. Also plane ich mein Projekt normalerweise in einigen Teilen. Und natürlich können Sie nicht das gesamte Projekt von Anfang an planen das gesamte Projekt von , weil es unmöglich ist. Ich meine, deshalb ist es eine Art flexible Planung. Ich bin irgendwie nicht wie am Anfang, ich brauche eine Authentifizierung, ich brauche ein Frontend für ein paar Seiten und ein paar APIs, um die Daten abzurufen Und dann fange ich an, weißt du, dann hat mein Projekt schon eine gewisse Struktur, es gibt eine gewisse Aufteilung der Anliegen Und Funktionalität. Und dann kann ich zum Beispiel sagen, ich KI verwenden werde, und dieser Teil dass ich KI verwenden werde, und dieser Teil, ich werde es selbst machen, weil , ich zum Beispiel aus dem letzten meiner letzten Projekte einen schönen Qualitätscode und eine Lösung haben könnte die bereits implementiert wurde, was zum Beispiel bei Authentifizierung oder Stripe für Zahlungssysteme der Fall ist bei Authentifizierung oder . Ja. Und für einige neue Dinge, weißt du, könnte man sagen, das sage ich normalerweise. Okay, versuchen wir es mit KI. Und auch hier bevorzuge ich einen detaillierteren Ansatz. Das heißt, ich könnte sogar diesen Teil des Projekts in Unterteile aufteilen und versuchen, Teil des Projekts in sie Stück für Stück zu lösen In diesem Fall habe ich immer diese Kontrolle über meinen Code und mein Projekt. Und auch eine der guten Empfehlungen, wie Sie wahrscheinlich wissen, selbst wenn Sie die kleine Änderung vornehmen, ist es gut, sie im Browser zu überprüfen. Wie funktioniert es angemessen? Denn wenn Sie, sagen wir, zehn Änderungen vornehmen, dann funktioniert es nicht, Sie müssen alle zehn Änderungen debuggen, was nicht sehr effizient ist Wie Sie also sagen können, handelt es sich um eine Kombination von Ansätzen Ich hoffe, du findest selbst etwas. Und auch hier ist es manchmal gut, einfach mit Ihren Kollegen zu sprechen, vor allem, die erfahrener sind als Sie, und zu sehen, wie sie, an die Verwendung dieser Tools herangehen . Und dann können Sie, Sie wissen schon, einige Teile kopieren, einige Teile testen und sehen, ob sie zu Ihnen passen. 37. Modul 5: Zusammenfassung: Herzlichen Glückwunsch zum Abschluss eines Moduls Nummer fünf. Und ich hoffe, dass Sie bereits entschieden haben , mit welcher Geschwindigkeit Sie Programmierpraktiken anwenden möchten. Und seit dem nächsten Modul beginnen wir mit den Übungssitzungen. Wir sehen uns dort. 38. Modul 6: Einführung: Willkommen zum Modul Nummer sechs. In diesem Modul werden wir all das Wissen, das Sie im Laufe des Kurses erworben haben, konsolidieren , indem wir eine einfache Web-App mithilfe von KI erstellt haben, und wir werden diesen Workflow Schritt für Schritt durchgehen. 39. Kurseinheit 1: Willkommen zur ersten Lektion. In dieser Lektion geben wir einen kurzen Überblick darüber, was wir tun werden. Also, meine Freunde, wir werden etwas sehr Einfaches entwickeln , weil unser Hauptziel darin besteht , die Mechanik der Verwendung von KI in Ihrem Workflow zur Erstellung von Webanwendungen zu üben . Wir werden eine einfache Counter-App mit ein wenig Funktionalität entwickeln . Denn in diesem Fall ist es Ihnen vertraut, und dann könnten Sie sich auf Dinge konzentrieren, und dann könnten Sie sich auf Dinge konzentrieren die speziell dem Arbeitsablauf bei der Verwendung von KI in Ihrem Code gewidmet sind, und nicht darauf, wie Sie eine bestimmte Sache in Bezug auf die Anwendung selbst implementieren . Wie ich bereits sagte, bevorzuge ich die schrittweise Verbesserung bei allem, was ich baue, denn wenn Sie von etwas sehr Einfachem und zwei Fortgeschritteneren Schritt für Schritt übergehen , dann verstehen Sie die gesamte Kette Ihrer Operationen und können jederzeit debuggen oder zu etwas Einfacherem als zuvor übergehen . Also, wann werden wir das üben? Grundlagen der Integration von KI in Ihren Arbeitsablauf Später könnten Sie ein-, zwei-, dreimal üben, und dann werden Sie einige Dinge sehen , die speziell für Sie funktionieren, und später könnten Sie in etwas Komplexerem weitermachen . 40. Kurseinheit 2: Willkommen zu Lektion Nummer zwei. Und hier ist unser erster Schritt in unserem KI-Workflow. Der erste Schritt ist die Planung einer Funktionalität Ihrer Webanwendung Mein Tipp Nummer eins für Sie ist, Ihre Planung immer auf einem Papier mit einem Bleistift oder Stift durchzuführen. Warum? Weil es der einfachste und schnellste Weg ist, das Projekt zu starten Denn in diesem Fall konzentrieren Sie sich nicht wirklich auf den technologischen Teil, um Dinge schön zu machen Sie schreiben einfach Ihre Skizzen, um die Basisversion dessen zu erstellen , was Sie in Ihrem Projekt haben möchten In unserem speziellen Beispiel bauen wir also eine Counter-App und planen unsere Funktionalität Wir werden also einige übliche Dinge haben. Wir haben also eine Funktion wie eine Taste zwei plus eins, minus eins, dann plus zehn minus zehn und dann auch plus und minus zufällig. Das ist also hübsch. Und in diesem Schritt haben wir bereits einige Dinge, die wir mit unserer App erledigen möchten. Und die gleichen Dinge würden für all Ihre anderen Projekte gelten . Du nimmst einfach wieder Stift und Papier und fängst an, du weißt schon, dir vorzustellen, was deine App tun soll, und schreibst es einfach in einfachen Worten 41. Kurseinheit 3: Willkommen zu Lektion Nummer drei. Der zweite Schritt unseres Workflows besteht also darin, unsere Benutzeroberfläche und das Layout unserer Komponenten und einiger Elemente zu planen . also wieder, wie im vorherigen Schritt, Machen Sie also wieder, wie im vorherigen Schritt, Ihre ersten Skizzen auf einem Papier, denn auch hier werden Sie sich darauf konzentrieren, wie Sie schnell das Wesentliche erledigen können, und Sie werden nicht über Farben nachdenken, Sie wissen schon , Typografie und, Sie wissen schon, schöne Elemente Sie werden nur die Grundlagen erledigen, die Sie für Ihr Projekt tatsächlich benötigen In unserem Fall verwenden wir also wieder Stift und Papier. Wie in den meisten Counter-Apps haben wir also den Wert. Dann haben wir wie üblich Plus - und Minus-Tasten in der Nähe und dann einige Tasten direkt da unten, plus zehn minus zehn plus zufällig und minus zufällig. Also das ist so ziemlich alles. Also haben wir im Grunde unsere Funktionalität genommen, was wir im ersten Teil getan haben , und dann haben wir einfach über unsere Benutzeroberfläche nachgedacht und dies auf einem Papier implementiert. Das Gleiche würde für jedes andere Projekt gelten , das Sie durchführen werden. Tun Sie dies bei Ihrem ersten Schritt einfach auf die einfachste Weise. 42. Kurseinheit 4: Willkommen zur vierten Lektion. Der dritte Schritt unseres Workflows besteht also darin , unsere Textag- und Drittanbieter-Pakete auszuwählen Also meine Freunde, wie Sie sehen können, steht dieser Teil nicht ganz am Anfang, sondern erst ein bisschen später, denn der Implementierungsteil ist sehr spezifisch darauf ausgerichtet, was Sie bevorzugen mit welchen Technologien Sie arbeiten können Aber auch hier ist der wichtigste Teil die Funktionalität Ihrer App und natürlich das Layout, das steht an erster Stelle. In diesem Schritt können Sie also Ihr Textag auswählen Es könnten einige Ramm-Sprachen, Styling-Technologien, Frameworks sein Styling-Technologien , ja, dann auch Bibliotheken von Drittanbietern, und sogar einige Leute könnten über die Apps nachdenken Also der Ort, an dem sie ihre App hosten möchten, vielleicht einige CICD-Prozesse, aber auch hier liegt es an Ihnen zu diesem Zeitpunkt In unserem Fall werden wir also, wie ich bereits erwähnt habe, wie ich bereits erwähnt habe, der Einfachheit halber nur HTML, CSS und J-Skript verwenden Einfachheit halber nur HTML, CSS und J-Skript Und was wichtig ist, zum Beispiel noch einmal zu erwähnen, wenn wir das progressive Enhancement Framework berücksichtigen , sagen wir, GainUR verwenden möchte Ich würde gerne die Gegenanwendung erstellen und dann, sagen wir, es gibt eine Bibliothek , es gibt eine Bibliothek der die App die Zahlen ändern könnte, nicht nur die Änderung des Textinhalts der Texteingabe, tut mir leid, aber auf eine effektive Weise Dann könnten Sie diese Bibliothek zu Ihrem Projekt hinzufügen, sie aber später implementieren. Also zuerst implementieren Sie immer noch die Basisversion, und dann könnten Sie sie weiterentwickeln zu einer schicken Version erweitern. Es wird ein bisschen einfacher sein, denn auch die Funktionalität an erster Stelle und die Effekte kommen später. 43. Kurseinheit 5: Oh, willkommen zu Lektion Nummer fünf. Der vierte Schritt in unserem Arbeitsablauf ist also ein Teil der Aufforderung Zuvor haben wir die Funktionalität, die Benutzeroberfläche und das Layout sowie den Textstapel definiert , und jetzt ist es an der Zeit, KI-Tools auszuwählen Nochmals, jetzt sind Sie bereits an diesem Punkt angelangt, sodass Sie wissen, welche Art von Tools wir haben und in welcher Situation Sie welche verwenden möchten? Für dieses spezielle Projekt könnten wir also wieder Cloud als Chat verwenden und dann Code kopieren und in unser DE einfügen, und wir könnten die V-Null oder den Cursor verwenden. In diesem speziellen Fall würden wir bei Null bleiben. Aber auch hier könnten Sie wählen, was Sie möchten. Und es ist wichtig zu erwähnen, dass Sie in dieser Phase zum Beispiel denken könnten, Sie könnten entweder eine Textaufforderung verwenden, Ihr Bild Ihrer Benutzeroberfläche zur KI hinzufügen oder eine Kombination dieser beiden Ansätze wählen Wie Sie sich aus Schritt Nummer zwei erinnern, in dem wir unsere Benutzeroberfläche und unser Layout erstellt haben, sieht es ungefähr so Ich habe es nur als Bild gespeichert , damit es wie ein Screenshot aussieht. Und diesen Screenshot werden wir zu V Null hinzufügen und darum bitten, ihn neu zu erstellen Also, meine Freunde, wir sind innerhalb von Null. Wie Sie sehen können, habe ich einen Screenshot aus unserer Anwendung hochgeladen und dann zu einer einfachen Sache aufgefordert, eine Counter-App zu erstellen, ein hochgeladenes Bild als Referenz zu verwenden, Textag-HTML, CSS Schauen wir uns also an, was es bewirken wird. Die V Zero haben also ihre Überlegungen abgeschlossen und unser Modellbild für Benutzeroberfläche ist so gut wie neu erstellt, wie wir Lassen Sie uns also die Funktionalität überprüfen. Wie Sie sehen können, meine Freunde, funktioniert es ziemlich gut, besonders wenn man bedenkt , dass es unsere erste Iteration Und nur um noch einmal hinzuzufügen, du könntest dafür Gerinnsel verwenden Und zum Beispiel ist Clot manchmal nicht in der Lage, eine Vorschau zu liefern, also könnten Sie einfach gehen und den Code kopieren und in Ihre ID einfügen und ihn dort überprüfen, oder Sie könnten Ihren Cursor verwenden, wenn Sie den Cursor verwenden um so ziemlich das gleiche Ergebnis zu erhalten 44. Kurseinheit 6: Willkommen zu Lektion Nummer sechs. Der letzte Schritt, der Teil der Iteration ist , besteht darin, die Ergebnisse, die Sie von Ihrer KI erhalten haben, zu bearbeiten und zu optimieren Nehmen wir an, wir möchten unserer eine Reset-Taste hinzufügen Mal sehen, wie es gemacht wird. Wir sind also wieder bei Null. Auch hier habe ich, wie in der vorherigen Lektion, gerade den Screenshot mit einer Reset-Taste heruntergeladen und ich fordere einfach eine einfache Sache auf, und ich fordere z. B. über eine Reset-Taste am Ende der Anzeige, und verwende einen Screenshot als Referenz. Schauen wir uns also an , was es bewirken wird. Der VZO hat also seinen Job gemacht, und wie Sie sehen können, heißt es, dass der Zähler jetzt die Reset-Taste am unteren Rand der App enthält Reset-Taste am unteren Rand der App Aber die Sache ist zum Beispiel, wie Sie sehen können, dass VZ diese Datei nicht in der Vorschau anzeigen kann Also wieder passiert es, und das ist der Prozess des Optimierens und Bearbeitens. Und auch hier habe ich bereits erklärt, dass Sie durch die Verwendung dieser verschiedenen Instrumente, verschiedener KIs endlich etwas bekommen, das zu Ihnen passt Und solche Situationen, wie Straßensperren, denen Sie auf Ihrem Weg begegnen werden , werden Sie erfahrener machen. Und noch einmal, die Lösungen Sie werden sie besser auf Ihre spezifischen Situationen und Ihren Arbeitsstil zuschneiden. Schauen wir uns also an, was wir hier tun können. Wie Sie sehen können, habe ich ein paar Mal mit der Null gespielt und sie hin und her gefragt , wie Sie sehen können Das V Two wurde durch das Wiederherstellen von V eins erstellt und dasselbe Zeug mit Version drei, aber die Vorschau ist immer noch geschlossen Dann versuche ich auch zu sagen , dass ich eine Vorschau sehen kann, aber damit habe ich immer noch kein Glück Lassen Sie mich also über eine andere Lösung nachdenken. Also habe ich beschlossen, einen neuen Chat zu erstellen, aber meine zweite Version hochzuladen, in der wir eine Reset-Taste haben und dieselbe Sonde wie am Anfang haben. Also lass es uns versuchen. Ich meine Freunde, dieser Ansatz hat tatsächlich funktioniert, weil ich eine Vorschau habe mit all meinen Funktionen aus einer früheren Version funktioniert, aber wie Sie sehen können, mit einer funktionierenden Reset-Taste. Und ich denke, es ist ein sehr gutes Beispiel dafür, wie KI tatsächlich funktioniert, weißt du, und all diese Hürden, denen man dabei begegnen kann Und du solltest mit, du weißt schon, diesen Situationen vertraut sein, denn ähm, du weißt schon, was auf dem Weg steht, wird zum Weg Und wenn Sie diese verschiedenen Situationen durchmachen, werden Sie erfahrener werden. Und auch, was du hättest tun können. Nehmen wir zum Beispiel an, Sie verwenden eine kostenlose Version von V Zero und nehmen wir an, dass Ihre Nachrichten bis zum Ende gegangen sind eine kostenlose Version von V Zero und nehmen wir an, , sodass Sie den Code, wissen Sie, tatsächlich zu Ihrer ID nehmen und dann, sagen wir, den letzten Teil der Funktionalität, der eine Reset-Taste war , Sie wissen schon, zu einem Gerinnsel oder Chat-GPT gehen und, Sie wissen schon, fragen, ob er bearbeitet werden soll, falls nicht wurde mit Vz so etwas bearbeitet, meine Freunde, man muss flexibel sein. 45. Zusammenfassung: Willkommen zur Zusammenfassung von Modul sechs. Meine Freunde, ich hoffe wirklich, dass Sie in diesem praktischen Modul, in dem wir den Arbeitsablauf und die Arbeit mit KI lernen, etwas erlebt und gelernt haben diesem praktischen Modul, in dem wir den Arbeitsablauf und die Arbeit mit KI lernen, etwas dem wir den Arbeitsablauf und die Arbeit mit KI lernen, und sich an meine Freunde erinnern. Es beginnt also mit der Planung, Planung Ihrer Funktionalität, der Planung Ihrer Benutzeroberfläche und TextC Dann der zweite Teil, Sie gehen zu Ihrer KI und geben ein, was auch immer Sie geplant haben, und dann optimieren Sie es einfach, bis Sie die funktionierende Version erhalten Eins würde ich sagen, dass es gut ist, wenn Sie an einem kleinen Teil Ihrer App arbeiten einem kleinen Teil Ihrer App denn wie Sie wahrscheinlich in diesem Kurs gesehen haben, früher manchmal den Code geben, konnte KI früher manchmal den Code geben, was nicht wirklich die beste Methode für die Erstellung einiger Funktionen oder Stile ist wirklich die beste Methode für die Erstellung einiger Funktionen oder Und wenn Sie dann diesen kleinen Teil des funktionierenden Codes haben, könnten Sie Ihre Erfahrung nutzen und dann den Code bereinigen und strukturieren , bevor Sie zum nächsten Teil übergehen Die nächste Frage, die auftaucht, also was wir tun können, wenn unsere Anwendung mehr als nur ein Zähler ist und aus mehreren Teilen besteht Die Antwort hier ist ziemlich einfach. Wenn Sie sich also wahrscheinlich an dieses Diagramm aus einer früheren Lektion erinnern , müssen Sie Ihr Projekt in kleine Unterteile aufteilen und dann Teil für Teil bearbeiten Es ist eine bewährte Methode, jedes System zu erstellen, nicht nur die Webanwendung, und es wird Ihre Arbeit viel, viel einfacher machen Auch in diesem Fall könnten Sie, wenn Sie sich an die Todesgrube erinnern, leicht nicht in diese Richtung gehen und sich stundenlanges Refactoring und Debuggen einiger Fehler ersparen , die durch den reinen KI-Ansatz verursacht werden könnten 46. Modul 7: Einführung: Also herzlichen Glückwunsch. Sie sind tatsächlich beim letzten Modul des Kurses angekommen . Und dieses Modul ist ganz darauf ausgerichtet, dass Sie das gesamte Wissen, das Sie im Kurs erworben haben, üben und festigen können. Also schnell eine Zusammenfassung des KI-Workflows. Schritt Nummer eins ist also die Planung der Funktionalität. Denken Sie daran, wir müssen es auf dem Papier machen. Der zweite Schritt besteht darin, UI und LL erneut auf dem Papier zu planen. Der dritte Schritt besteht aus einem Textstapel und Bibliotheken. Schritt Nummer vier ist die Aufforderung, und der letzte Schritt ist das Optimieren und Bearbeiten. Dieses Modul wird aus zwei Herausforderungen bestehen. Nacheinander erhalten Sie nach jeder Herausforderung ein Lösungsvideo mit meinen Erklärungen. Also viel Glück. 47. M7 c1(ENDGUST): Willkommen zur Herausforderung Nummer eins. In dieser Herausforderung ist es dein Ziel, eine einfache Stoppuhr-App zu erstellen, und so könnte die Benutzeroberfläche aussehen Oben haben Sie also die tatsächliche Zeit, also Minuten, Sekunden und Millisekunden, und dort unten haben Sie drei Tasten: Start, Pause und Reset Die Starttaste startet also tatsächlich die Stoppuhr, sodass die Zahlen steigen, die Pause, die Zeit wird angehalten und die ganze Zeit zurückgesetzt, geht auf Null Aber das ist nur ein Beispiel, du kannst selbst etwas bauen 48. Lösung 1: Willkommen zum Lösungsteil der ersten Herausforderung. Lassen Sie uns also kurz die Schritte zusammenfassen. Nummer eins ist die Funktionalität des Plans. Nummer zwei sind Benutzeroberfläche und Layout, Texteingabe sowie Optimierung und Bearbeitung. Fangen wir also mit Schritt Nummer eins an. Also Funktion, die wir gerne hätten. Also starten, pausieren, zurücksetzen, dann hätten wir gerne Minuten, Sekunden und Millisekunden Die Benutzeroberfläche ist also ziemlich einfach. Wir haben eine Minute, Sekunden, Millisekunden und drei Tasten, die wir Wieder beim Textstapel, HDL CSS und JS, und für diese spezielle Aufgabe entscheiden wir uns dafür, Cloud zu verwenden, um es auch zu Wie Sie sehen, ist die Aufforderung wiederum ziemlich einfach. Erstellen Sie eine grundlegende Stoppuhr, Webapp-Funktionen Start, Pause, Zurücksetzen, Minuten, Sekunden, Millisekunden und den Wie Sie sehen, wird alles, was Sie in der Planungsphase getan haben, endlich in Ihre Eingabeaufforderung übernommen. Und für diesen speziellen Fall sollten wir den Screenshot nicht verwenden. Lassen Sie uns versuchen, einfach Text zu verwenden. Wir sind also in der Cloud. Wir haben unsere Eingabeaufforderung eingefügt und lassen uns sehen, was sie bewirken wird Wie Sie sehen können, hat Claude seine Arbeit erledigt, und wir haben mit unserer Garnele ein gutes Ergebnis erzielt. Also lass es uns testen. Sieht aus, als ob es so funktioniert, wie wir es wollen. Und lass uns versuchen, ein bisschen zu optimieren. Zum Beispiel hätten wir gerne, sagen wir, zwei Nullen in Millisekunden Also entschied ich mich für den folgenden Abschlussball. Könnten Sie jetzt bitte das Format von Asi erstellen? Also verwende ich die 70 bis sechs Nullen. Also lass uns sehen, was es bewirken wird. Walla, wie Sie sehen können, hat sie getan, worum wir gebeten haben Also lass es uns nochmal versuchen. Sieht aus, als ob es sehr gut funktioniert. Schauen wir uns also den Code an. Und wieder, da wir zu Beginn und während des gesamten Kurses darüber gesprochen haben , dass Sie sich zunächst die guten Programmierkenntnisse aneignen sollten. Und wie Sie sehen, befindet sich im Moment alles in einer Datei. Es bedeutet HTML, CSS und JS, alles in einer Datei, keine Trennung von Anliegen. Und wenn Sie dann zum Beispiel auch nur die Grundlagen von JavaScript kennen , können Sie Ihr Wissen nutzen , um diese in drei verschiedene Dateien aufzuteilen und sie als Abschlussprojekt zu verwenden , das Sie gerne hätten. Ich denke also, dieses Video war ziemlich gut, und wir hatten in diesem Fall dieses Endergebnis, auch ohne den Screenshot. 49. M7 c2(ENDGUST): Willkommen zur zweiten Herausforderung. In dieser Herausforderung ist es Ihr Ziel, einen Zufallsgenerator für Zitate zu erstellen. Also so könnte die Benutzeroberfläche aussehen. Ganz oben haben wir die Abstimmung selbst, dann den Namen des Autors und dann diese Schaltfläche mit dem neuen Zitatlabel. Wenn Sie auf diese Schaltfläche klicken, sollten die neuen Informationen abgerufen werden Dann zitieren Sie also im Namen des neuen Autors. Und ich gebe dir einen kleinen Hinweis, wenn du diese Herausforderung etwas einfacher machen möchtest , du solltest die lokalen Daten verwenden und nicht die Daten aus dem Internet. Also ohne die FIC-Anfrage an die externe API. Viel Glück. 50. Lösung 2: Kommen Sie zur zweiten Lösung für die Zufallscode-Generator-App. Also noch einmal, kurze Zusammenfassung der Schritte für den Workflow, die Arbeit mit KI Also nochmal, Funktionalität, Benutzeroberfläche und Layout, Textstapel, Eingabeaufforderungen und dann Optimierung und Bearbeitung Die Funktionalität, die wir gerne hätten, besteht darin, den Zufallscode auf ButtomClick anzuzeigen Wir würden den Code gerne sehen, und Autor und Daten sollten lokal gehostet werden Das bedeutet, dass wir für diesen speziellen Fall keine API verwenden werden. Der nächste Schritt ist die Benutzeroberfläche Wie Sie sehen können, haben wir das Angebot. Wir haben den Namen des Autors und wir haben die Schaltfläche für das neue Zitat. In Bezug auf Stack, HTML, CSS und JS sowie in Bezug auf die KI-Auswahl werden wir den Cursor zum Üben verwenden, und die Eingabeaufforderung sieht so aus. Erstellen Sie eine App mit Funktionen zur Generierung zufälliger Anführungszeichen. Zeigen Sie ein neues Zitat auf einer Schaltfläche an, klicken Sie, zeigen Sie Zitat und Autor an. Daten sollten lokal gespeichert werden, Textag HTML CSS und Vanilla JS Also noch einmal: Wenn Sie die richtige Vorbereitungsphase durchgeführt haben, wird Ihre endgültige Aufforderung ausreichend kontextuell und qualitativ hochwertig sein , um sie der KI mit der Erstellung Ihres ersten Entwurfs zu übergeben Lassen Sie uns das also in Aktion sehen. Also meine Freunde, wir sind im Cursor und ich habe die Aufforderung in den Chat eingefügt Denken Sie daran, wenn wir den Cursor verwenden, möchten wir den Alterungsmodus weil wir möchten, dass unsere Dateien erstellt werden, und lassen Sie uns versuchen, was dabei herauskommt Und auch hier werden wir für diesen speziellen Fall kein Bild verwenden, weil unser Design ziemlich einfach ist, nur eine Skizze, und wir würden gerne sehen sich daraus etwas Interessanteres einfallen lässt. Schauen wir uns also an, es generiert Index-HTML. Die Arbeit ist im Gange. Jetzt ist es an der Zeit der Styles, der laufenden Arbeit und der Daten, und jetzt wird an einer App-JS-Datei für JS-Funktionalität gearbeitet . Wie Sie sehen können, wurde beschlossen, sogar einige CSS-Übergänge hinzuzufügen, um eine reibungslose Interaktion zu gewährleisten. Der Agent macht es also von selbst, das ist die Idee des Agenten. Also hat er seine Arbeit erledigt und er gibt uns eine kurze, kurze Erklärung, was er getan hat. Lesen wir es also ein bisschen. Wie Sie sehen können, heißt es, saubere moderne Benutzeroberfläche mit einem Hintergrund mit Farbverlauf, weichen Übergängen, ansprechendem Design, Her-Effekten und lokalem Speicher dM. Siehst du, es ist ziemlich cool. Also Verhinderung von betrügerischen Animationen. Also gut. Also lass uns sehen, wie es in einem echten Browser aussehen wird. Lassen Sie uns also zuerst alles akzeptieren. Wir sind also im Browser und wie Sie sehen können, haben wir diese nette Benutzeroberfläche, so nett. Farbe: Filz. Und lass es uns versuchen. Wow. Wie Sie sehen können, sieht es ziemlich gut aus und funktioniert wie erwartet. Sie können sehen, meine Freunde, wir haben einen sehr einfachen KI-Workflow verfolgt, und wenn Sie eine bestimmte Aufgabe festlegen, funktioniert das ziemlich gut. Meine Freunde, was den letzten Schritt in Bezug auf das Optimieren und Bearbeiten angeht, habe ich KI, die flüchtige KI, gebeten , speziell eine Sera-Schrift für ein Zitat zu verwenden, und wie Sie sehen können, hat sie ihren Job gemacht Lassen Sie uns die Änderung akzeptieren und das Endergebnis sehen Und nun, wie ihr sehen könnt, hat es das Telefon verändert, und meiner Meinung nach sieht es Ich hoffe also, dass Sie aus dieser Lektion etwas Neues lernen. 51. Aktionen: Herzlichen Glückwunsch, mein Freund. Bis zu diesem Zeitpunkt haben Sie also einen großen Job gemacht. Sie haben einen ganzen Kurs durchlaufen, einige Übungen gemacht und in diesem Modul haben Sie tatsächlich einige spezifische Herausforderungen selbst gemeistert . Tolle Arbeit. Ich bin wirklich stolz auf dich, mein Freund, und ich wünsche dir viel Glück dabei, dieses Wissen auf die nächste Stufe zu bringen. Ich möchte Sie also bitten, Ihr Projekt mit uns zu teilen. Eine kleine Fallstudie, kleine Erklärungen enthält einige Details darüber Ihr Projekt mit uns zu teilen. Eine kleine Fallstudie, kleine Erklärungen enthält einige Details wie Sie diese Web-Apps erstellen. Vielleicht hast du experimentiert und etwas Außerschulisches gemacht Du könntest das also auch mit mir teilen. Und wenn Sie Fragen haben, ist das völlig in Ordnung Bitte stellen Sie diese Fragen, und ich werde mein Bestes tun, um sie zu beantworten. Nochmals viel Glück. 52. Zusammenfassung: Willkommen am Ende von Modul Nummer sieben. Mein Freund, in diesem Modul hast du zwei sehr interessante Herausforderungen gemeistert, bei denen du selbst zwei einfache Webanwendungen erstellt hast. Das bedeutet, dass Sie jetzt aus erster Hand Erfahrung mit der Erstellung von Web-Apps mithilfe von KI haben. So gute Arbeit. 53. Vielen Dank!: Freund, ich möchte dir nur ein großes, großes Dankeschön sagen. Ich weiß es wirklich zu schätzen, dass Sie sich die Zeit genommen haben, die Ergebnisse zu nehmen und bis zum Ende durchzugehen. Und ich hoffe wirklich, dass dieses Wissen Ihren Programmierprozess auf die nächste Stufe bringt . Sie werden die Apps in der Tat viel, viel schneller erstellen und die mühsame Arbeit, die langweilige Arbeit an Ihre Copilot-KI auslagern langweilige Arbeit an Ihre Copilot-KI Also viel Glück, mein Freund, und vielen Dank . Wir sehen uns.