Web-Technologien
TypeScript im Web
Heutzutage werden zahlreiche Frameworks und Bibliotheken eingesetzt, um die Entwicklungsphase einer Website zu beschleunigen. Das Express-Framework vereinfacht den Umgang mit APIs, React erleichtert die Frontend-Entwicklung und NodeJs ist aus dem Backend-Bereich nicht mehr wegzudenken. In diesem Kurs lernen Sie, wie benannte Frameworks und Bibliotheken in TypeScript integriert werden können. Dazu beginnen Sie mit den Grundlagen des Projektmanagements, lernen wie Third-Party-Plugins in TypeScript integriert werden können und kombinieren schließlich React bzw. NodeJs und Express mit TypeScript.Wenn Sie bereits Erfahrung in der Entwicklung mit TypeScript, React oder NodeJs haben, diese aber noch nie miteinander kombiniert haben, dann ist dieser Kurs genau das Richtige für Sie. Mit den erlernten Fähigkeiten können Sie Ihre Webentwicklungskenntnisse auf die nächste Stufe bringen.Länge: 01:55 Stunden Alle Video-Lektionen im Überblick: Herzlich willkommen zu diesem Kurs Projektorganisation in TypeScript Kapitelüberblick Installation und Einrichtung der IDE Die ersten Organisationsschritte Namespaces Schwächen von Namespaces Webpack Workflow mit Webpack Third-Party-Plugins in TypeScript Quiz: Projektorganisation in TypeScript Express und NodeJs mit TypeScript Kapitelüberblick Einrichtung eines NodeJs-Projekts mit TypeScript NodeJs: Einstieg in das FAQ-Projekt FAQ-Projekt: Hinzufügen von Frage-Antwort-Paaren FAQ-Projekt: Löschen von Frage-Antwort-Paaren Quiz: Express und NodeJs mit TypeScript React in TypeScript Kapitelüberblick Einrichtung eines React-Projekts mit TypeScript React-Komponenten mit TypeScript React-Properties mit TypeScript Event-Typen Quiz: React mit TypeScript Abschluss Fazit und Kursabschluss Über den Trainer:Erik Schönwälder studiert Informatik (Master) an der Technischen Universität Dresden und unterrichtet bereits seit über 2 Jahren an der Universität und auch online. Als Dozent lehrt er hauptsächlich Themen wie Datenbank-Engineering, SQL und NoSQL. Außerhalb der Universität beschäftigt er sich jedoch auch tiefergehend mit dem Backend-Development und konnte schon an einigen Software-Projekten mitwirken.So lernen Sie mit diesem Videokurs:In den Videokursen von heise Academy lernen Sie IT-Themen anschaulich und verständlich. In den Videos schauen Sie den Experten bei der praktischen Arbeit zu und lassen sich dabei alles genau erklären. Das Wissen ist in kleine Lernschritte und Aufgaben unterteilt, sodass Sie den Kurs Lektion für Lektion durcharbeiten oder gezielt zu Themen springen können, die Sie interessieren. Die persönliche Lernumgebung der heise Academy hält viele Funktionen für Sie bereit, die Ihnen beim Lernen helfen können:Flexibler Videoplayer mit vielen SteuerungsmöglichkeitenWissensquiz zur LernkontrolleLernhistorie und LernfortschrittLesezeichen und Notizen Volltextsuche in den VideosFrage-den-Experten-ModulÜbungsmaterial zum MitmachenResponsive Web-App und Videostreaming für alle EndgeräteTechnische Voraussetzungen:Für diesen Videokurs werden lediglich ein Browser (mit eingeschalteter JavaScript-Funktionalität) und eine Internetverbindung benötigt.
Fortgeschrittene Features von TypeScript
Falls Sie bereits mit den Grundlagen von TypeScript vertraut sind, aber noch keinen komplexeren Problemen gegenüber standen, so ist dieser Kurs genau das Richtige für Sie. Mit den erlernten Fähigkeiten sind Sie in der Lage Ihre Web-Anwendungen fehlerfreier, lesbarer und wartungsfreundlicher zu gestalten. Die Webentwicklung wird schon lange nicht mehr von JavaScript allein getragen. Heutzutage gewinnt eine Alternative, TypeScript, immer mehr an Aufmerksamkeit. TypeScript unterstützt Entwickler beim Programmieren und hilft Fehlerquellen zu reduzieren oder den Code lesbarer zu gestalten. In diesem Kurs lernen Sie tiefergehende Features und Konzepte von TypeScript kennen. So entdecken Sie zu Beginn eine Sammlung von verschiedensten TypeScript-Features, gehen auf das Generics-Konzept ein und erhalten schlussendlich einen Einblick in das Decorator-System..Länge: 02:24 Stunden Alle Video-Lektionen im Überblick: Herzlich willkommen zu diesem Kurs Fortgeschritte Features von TypeScript Kapitelüberblick Installation und Einrichtung von Visual Studio Code Function Overload Nullish Coalescing Optional Chaining Index Signatures Intersection Types Type Guards Discriminated Unions Quiz: Fortgeschritte Features von TypeScript Generics Kapitelüberblick Generics-Konzept in TypeScript Generic Constraints Generische Klassen Einführung in die Utility Types Weitere Utility Types Quiz: Generics Decorator Kapitelüberblick Decorator-Konzept in TypeScript Weitere Vorbereitungen für das Kapitel Klassen-Decorator Decorator-Factories Methoden-, Accessor- und Parameter-Decorator Property-Decorator Ausführungsreihenfolge von Decoratoren Quiz: Decorator Abschluss Fazit und Kursabschluss Über den Trainer:Erik Schönwälder studiert Informatik (Master) an der Technischen Universität Dresden und unterrichtet bereits seit über 2 Jahren an der Universität und auch online. Als Dozent lehrt er hauptsächlich Themen wie Datenbank-Engineering, SQL und NoSQL. Außerhalb der Universität beschäftigt er sich jedoch auch tiefergehend mit dem Backend-Development und konnte schon an einigen Software-Projekten mitwirken.So lernen Sie mit diesem Videokurs:In den Videokursen von heise Academy lernen Sie IT-Themen anschaulich und verständlich. In den Videos schauen Sie den Experten bei der praktischen Arbeit zu und lassen sich dabei alles genau erklären. Das Wissen ist in kleine Lernschritte und Aufgaben unterteilt, sodass Sie den Kurs Lektion für Lektion durcharbeiten oder gezielt zu Themen springen können, die Sie interessieren. Die persönliche Lernumgebung der heise Academy hält viele Funktionen für Sie bereit, die Ihnen beim Lernen helfen können:Flexibler Videoplayer mit vielen SteuerungsmöglichkeitenWissensquiz zur LernkontrolleLernhistorie und LernfortschrittLesezeichen und Notizen Volltextsuche in den VideosFrage-den-Experten-ModulÜbungsmaterial zum MitmachenResponsive Web-App und Videostreaming für alle EndgeräteTechnische Voraussetzungen:Für diesen Videokurs werden lediglich ein Browser (mit eingeschalteter JavaScript-Funktionalität) und eine Internetverbindung benötigt.
Einstieg in TypeScript
Wer sich mit Webprogrammierung beschäftigt, stößt unweigerlich auf TypeScript. Diese Programmiersprache basiert auf JavaScript und bietet Ihnen als Entwickler eine Reihe von Vorteilen. In diesem Kurs lernen Sie Schritt für Schritt, wie TypeScript funktioniert und welche Konzepte dahinter stecken. Erik Schönfelder stellt die verschiedenen Typen der Sprache vor. Sie lernen das Klassenkonzept kennen und erhalten schließlich einen Einblick in das Interfacesystem.Wenn Sie sich bereits mit Webentwicklung auskennen und bisher nur mit JavaScript gearbeitet haben, ist dieser Kurs genau das Richtige für Sie. Mit den erlernten Fähigkeiten sind Sie in der Lage, Ihre Webanwendungen fehlerfreier, lesbarer und wartungsfreundlicher zu gestalten.Länge: 03:55 Stunden Alle Video-Lektionen im Überblick: Herzlich willkommen zu diesem Kurs Einleitung und Setup Kapitelüberblick TypeScript Überblick Installation und Einrichtung von Visual Studio Code Installation von TypeScript Typen in TypeScript Kapitelüberblick Typen-Konzept in TypeScript Typen in TypeScript vs. Typen in JavaScript Basis-Typen: String, Number und Boolean Zuordnung von Typen - good practice Return-Typen von Funktionen Typ: Function + Callbacks Typ: Array Typ: Tuple Typ: Object Typ: Enum Typ: Union Typ: Literal Typ: Any + Unknown Clean Code Type Aliases Exkurs: Erweiterte Konfiguration des Compile-Prozesses Exkurs: Erweiterte Konfiguration des TypeScript Compilers Quiz: Typen in TypeScript Klassen in TypeScript Kapitelüberblick Klassen-Konzept in TypeScript Das Klassen-Konzept in der Praxis Vorteile vom Klassen-Konzept Klassen und Methoden Vererbung Access Modifiers Getter und Setter Exkurs: Besonderheiten bei der Konfiguration des TypeScript-Compilers Abstrakte Klassen Readonly Keyword Static Keyword Shorthand Initialization Privater Konstruktor Quiz: Klassen in TypeScript Interfaces in TypeScript Kapitelüberblick Interface-Konzept in TypeScript Interfaces und Klassen Warum Interfaces? Optionale Parameter Quiz: Interfaces in TypeScript Abschluss Fazit und Kursabschluss Über den Trainer:Erik Schönwälder studiert Informatik (Master) an der Technischen Universität Dresden und unterrichtet bereits seit über 2 Jahren an der Universität und auch online. Als Dozent lehrt er hauptsächlich Themen wie Datenbank-Engineering, SQL und NoSQL. Außerhalb der Universität beschäftigt er sich jedoch auch tiefergehend mit dem Backend-Development und konnte schon an einigen Software-Projekten mitwirken.So lernen Sie mit diesem Videokurs:In den Videokursen von heise Academy lernen Sie IT-Themen anschaulich und verständlich. In den Videos schauen Sie den Experten bei der praktischen Arbeit zu und lassen sich dabei alles genau erklären. Das Wissen ist in kleine Lernschritte und Aufgaben unterteilt, sodass Sie den Kurs Lektion für Lektion durcharbeiten oder gezielt zu Themen springen können, die Sie interessieren. Die persönliche Lernumgebung der heise Academy hält viele Funktionen für Sie bereit, die Ihnen beim Lernen helfen können:Flexibler Videoplayer mit vielen SteuerungsmöglichkeitenWissensquiz zur LernkontrolleLernhistorie und LernfortschrittLesezeichen und Notizen Volltextsuche in den VideosFrage-den-Experten-ModulÜbungsmaterial zum MitmachenResponsive Web-App und Videostreaming für alle EndgeräteTechnische Voraussetzungen:Für diesen Videokurs werden lediglich ein Browser (mit eingeschalteter JavaScript-Funktionalität) und eine Internetverbindung benötigt.
Responsives Webdesign mit CSS Flexbox
Bei der Gestaltung mit CSS ist das Flexbox-Layout nicht mehr wegzudenken. Mit Flexbox steht ein umfassender und vielseitiger Ansatz zur Verfügung, um mit CSS ein responsives Layout zu erreichen. Flexbox ist ein eigenständiger Teil von CSS, der auf bestimmten Konzepten und einer Reihe von CSS-Eigenschaften basiert. Diese stellt Erik Behrends in seinem Kurs Schritt für Schritt vor und erklärt sie im Detail.Der Kurs behandelt ausschließlich das Thema Flexbox in CSS. Daher sollten Sie sich bereits mit den Grundlagen der Webentwicklung in HTML und CSS auskennen. Ansonsten sind keine weiteren Vorkenntnisse erforderlich, um das Flexbox-Layout in diesem Kurs zu erlernen und in Ihren Projekten einzusetzen.Länge: 01:38 Stunden Alle Video-Lektionen im Überblick: Herzlich willkommen zu diesem Kurs Einleitung Kapitelüberblick Flexible Web-Layouts mit Flexbox gestalten Beispiel-Code herunterladen Entwicklungsumgebung einrichten Grundlagen des Flexbox-Layouts Kapitelüberblick Der Flex-Container mit seinen Flex-Items Die Achsen im Flex-Container Vorgehen zur Erstellung eines Flexbox-Layouts Überblick der relevanten Flexbox-Eigenschaften Quiz: Grundlagen des Flexbox-Layouts Der Flex-Container und seine Achsen Kapitelüberblick Das erste Beispiel öffnen und starten Flex-Container mit display:flex aktivieren Ausrichtung der Hauptachse mit flex-direction festlegen justify-content legt die Darstellung an der Hauptachse fest align-items bestimmt die Anordnung entlang der Querachse Bedeutung von stretch und baseline bei align-items Quiz: Der Flex-Container und seine Achsen Weitere Eigenschaften des Flex-Containers Kapitelüberblick Umbrüche im Container mit flex-wrap kontrollieren Die kombinierte Eigenschaft flex-flow align-content für den Zeilenabstand in mehrzeiligen Containern Abstände innerhalb des Containers mit gap bestimmen Quiz: Weitere Eigenschaften des Flex-Containers Inhalte im Flex-Container beeinflussen Intro – Vorschau des Kapitels Individuelle Reihenfolge von Items mit order festlegen Die Querachsen-Anordnung mittels align-self überschreiben Größenzuwachs mit flex-grow ermöglichen flex-shrink lässt einzelne Einträge schrumpfen Ausgangsgröße für Items durch flex-basis angeben Die kombinierte Eigenschaft flex Quiz: Inhalte im Flex-Container beeinflussen Abschluss Fazit und Kursabschluss Über den Trainer:Erik Behrends ist Professor für Informatik und unterrichtet an der DHBW Lörrach verschiedene Themen der Programmierung und App-Entwicklung. Vor seiner Zeit an der Hochschule war er viele Jahre in IT-Unternehmen als Softwareentwickler tätig. Auch heute noch programmiert er neben seiner Haupttätigkeit regelmäßig an einigen App-Projekten.So lernen Sie mit diesem Videokurs:In den Videokursen der heise Academy lernen Sie IT-Themen anschaulich und verständlich. In den Videos schauen Sie Experten bei der praktischen Arbeit zu und lassen sich alles genau erklären. Das Wissen ist in kleine Lernschritte und Aufgaben unterteilt, so dass Sie den Kurs Lektion für Lektion durcharbeiten oder gezielt zu Themen springen können, die Sie interessieren. Die persönliche Lernumgebung der heise Academy bietet Ihnen viele Funktionen, die Sie beim Lernen unterstützen:Flexibler Videoplayer mit vielen SteuerungsmöglichkeitenWissensquiz zur LernkontrolleLernhistorie und LernfortschrittLesezeichen und Notizen Volltextsuche in den VideosFrage-den-Experten-ModulÜbungsmaterial zum MitmachenResponsive Web-App und Videostreaming für alle EndgeräteTechnische Voraussetzungen:Für diesen Videokurs werden lediglich ein Browser (mit eingeschalteter JavaScript-Funktionalität) und eine Internetverbindung benötigt.
Essenzielles JavaScript für React
JavaScript hat in den letzten Jahren einige nützliche Neuerungen erhalten. Dabei gibt es mehrere spezielle Aspekte in modernem JavaScript, die oftmals in der Programmierung mit React vorkommen. Mit diesem Kurs stellt unser Experte Erik Behrends gezielt die wichtigsten modernen Konzepte aus JavaScript vor und zeigt, wie Sie diese in der Programmierung mit React einsetzen. Dazu gibt es auch Beispiele, die zeigen, wie diese Konzepte in React zum Einsatz kommen.Dieser Kurs enthält keine Einführung in JavaScript, sodass Sie bereits Erfahrung mit JavaScript oder einer anderen Programmiersprache haben sollten. Kenntnisse in React sind nicht nötig, denn dieser Kurs schließt die Lücke zwischen JavaScript und React.Länge: 02:39 Stunden Alle Video-Lektionen im Überblick: Herzlich willkommen zu diesem Kurs Einleitung Kapitelüberblick Ziel: Wichtige Konzepte in JavaScript für React-Code verstehen Inhalte, Aufbau und Verwendung des Kurses Entwicklungsumgebung für diesen Kurs Den Beispiel-Code verwenden Variablen und Konstanten Kapitelüberblick Nachteile der Variablendeklaration mit var Variablen mit let deklarieren Konstanten durch const initialisieren In React Werte von Props an Konstanten zuweisen Quiz: Variablen und Konstanten Template-Strings Kapitelüberblick Stringkonkatenationen sind unübersichtlich Mehrzeilige Template-Strings erstellen Template-Strings durch Interpolation erzeugen Dynamische Textanzeige in React Quiz: Template-Strings Pfeilfunktionen Kapitelüberblick Deklaration von Inline-Funktionen Pfeilfunktionen deklarieren Einzeilige Pfeilfunktionen kompakt definieren Pfeilfunktionen in React Quiz: Pfeilfunktionen Destrukturierung Kapitelüberblick Zugriff auf Objekteigenschaften ergibt sich wiederholenden Code Auf Objekteigenschaften durch Destrukturierung zugreifen Destrukturierung in Funktionsparametern verwenden Props in React destrukturieren Arrays destrukturieren Array-Destrukturierung in React beim useState-Hook Object Shorthand zur Erstellung von Objekten Quiz: Destrukturierung Spread-Operator Kapitelüberblick Daten aus Objekten zusammenführen Objekte durch Spread-Operator kombinieren Spread-Operator bei Arrays verwenden Props mit Spread an React-Komponenten übergeben Spread in Destrukturierung und in Funktionsparametern Quiz: Spread-Operator async und await Kapitelüberblick Umgang mit Promises ist umständlich und unleserlich async und await vereinfachen den Umgang mit Promises Fehlerbehandlung mit try/catch async und await mit Pfeilfunktionen Quiz: async/await Klassen Kapitelüberblick React-Komponenten können als Klassen geschrieben werden Klassen mit Methoden deklarieren Objekte durch Konstruktoren aus Klassen erzeugen Klassen-Komponenten in React verstehen Klassen-Komponenten als Funktionen umschreiben Quiz: Klassen Abschluss Fazit und Kursabschluss Über den Trainer:Erik Behrends ist Professor für Informatik und unterrichtet an der DHBW Lörrach verschiedene Themen der Programmierung und der App-Entwicklung. Vor seiner Zeit an der Hochschule hat er viele Jahre in IT-Unternehmen als Softwareentwickler gearbeitet. Und auch heute programmiert er noch regelmäßig neben seiner Haupttätigkeit in einigen App-Projekten. So lernen Sie mit diesem Videokurs:In den Videokursen von heise Academy lernen Sie IT-Themen anschaulich und verständlich. In den Videos schauen Sie den Experten bei der praktischen Arbeit zu und lassen sich dabei alles genau erklären. Das Wissen ist in kleine Lernschritte und Aufgaben unterteilt, sodass Sie den Kurs Lektion für Lektion durcharbeiten oder gezielt zu Themen springen können, die Sie interessieren. Die persönliche Lernumgebung der heise Academy hält viele Funktionen für Sie bereit, die Ihnen beim Lernen helfen können:Flexibler Videoplayer mit vielen SteuerungsmöglichkeitenWissensquiz zur LernkontrolleLernhistorie und LernfortschrittLesezeichen und Notizen Volltextsuche in den VideosFrage-den-Experten-ModulÜbungsmaterial zum MitmachenResponsive Web-App und Videostreaming für alle EndgeräteTechnische Voraussetzungen:Für diesen Videokurs wird lediglich ein Browser (mit eingeschalteter JavaScript-Funktionalität) und eine Internetverbindung benötigt.
Asynchrone Programmierung mit Kotlin Coroutines
Asynchrone oder Non-Blocking Programmierung ist ein wichtiger Bestandteil der serverseitigen Entwicklung, um skalierbare Anwendungen zu erstellen. In diesem Kurs lernen Sie Schritt für Schritt Kotlin Coroutines kennen. Sie erfahren, wie asynchrone Programmierung mit Coroutinen funktioniert, wie man Coroutinen startet und beendet, damit Anwendungen nicht durch langsame API-Aufrufe oder Datenbanken blockiert werden. Der IT-Experte Hauke Brammer zeigt Ihnen, wie Sie Kompositionen aus verschiedenen Coroutinen erstellen und wie Sie steuern, auf welchem Thread Ihre Coroutinen laufen. Außerdem lernen Sie Channels und Flows kennen, Datenstrukturen, mit denen Sie mehrere Elemente als Streams asynchron verarbeiten können. Wenn Sie schon etwas Erfahrung mit Kotlin haben und nun lernen möchten, wie Sie Ihren Code durch asynchrone Programmierung optimieren können, dann ist dieser Kurs genau das Richtige für Sie.Länge: 1:30 Stunden Alle Video-Lektionen im Überblick: Einführung und Setup Herzlich willkommen zu diesem Kurs Warum Kotlin Coroutines? Setup Einstieg in Coroutines Intro Meine erste Coroutine Scopes, Contexts und Dispatchers Cancellation und Timeouts Das Zusammenspiel mehrerer Coroutines Quiz: Einführung Coroutines Exceptions und Testing Intro Exceptions werfen und fangen Testen von Kotlin Coroutines Quiz: Exceptions und Testing mit Coroutines Flows und Channels Intro Flows: Mehrere Werte aus einer Funktion zurückgeben Flow Lifecycle: Auf Ereignisse reagieren Intermediate Operators: Mit Werten in Flows arbeiten Terminal Operators: Werte aus Flows einsammeln Channels: Mehrere Coroutines miteinander verbinden Quiz: Flows und Channels Fazit und Kursabschluss Über den Trainer:Hauke Brammer arbeitet als Senior Software Engineer bei der DeepUp GmbH. Seit 2017 ist Kotlin seine primäre Programmiersprache. Hauke entwickelt Microservices und seine Leidenschaft ist es, das Beste aus der Softwareentwicklung in die Welt des maschinellen Lernens zu bringen. In den letzten Jahren hat er regelmäßig Vorträge auf Entwicklerkonferenzen gehalten und viel über MLOps und Data Augmentation gesprochen.So lernen Sie mit diesem Videokurs:In den Videokursen der heise Academy lernen Sie IT-Themen anschaulich und verständlich. In den Videos schauen Sie Experten bei der praktischen Arbeit zu und lassen sich alles genau erklären. Das Wissen ist in kleine Lernschritte und Aufgaben unterteilt. So können Sie den Kurs Lektion für Lektion durcharbeiten oder gezielt zu Themen springen, die Sie interessieren. Die persönliche Lernumgebung der heise Academy bietet Ihnen viele Funktionen, die Sie beim Lernen unterstützen:Flexibler Videoplayer mit vielen SteuerungsmöglichkeitenWissensquiz zur LernkontrolleLernhistorie und LernfortschrittLesezeichen und Notizen Volltextsuche in den VideosFrage-den-Experten-ModulÜbungsmaterial zum MitmachenResponsive Web-App und Videostreaming für alle EndgeräteTechnische Voraussetzungen:Für diesen Videokurs werden lediglich ein Browser (mit eingeschalteter JavaScript-Funktionalität) und eine Internetverbindung benötigt.
GraphQL – APIs mit Spring Boot entwickeln
GraphQL ist eine spannende Technologie, um Anwendungen APIs zur Verfügung zu stellen. Denn GraphQL-APIs ermöglichen es, mit einer eigenen Abfragesprache die benötigten Daten für jeden Anwendungsfall selbst auszuwählen. Unterstützt werden die Clients dabei durch das GraphQL Typsystem, das bei der Formulierung von Abfragen hilft und verhindert, dass ungültige Abfragen ausgeführt werden.Um auf dieser Basis eigene GraphQL-APIs zu implementieren und zu betreiben, bietet Spring Boot ein eigenes Projekt namens Spring GraphQL an. Spring Boot ist als weit verbreitete Plattform besonders geeignet, da es die Entwicklung von Backend-Anwendungen und -Services mit all ihren typischen Anforderungen an Stabilität, Sicherheit und Performance unterstützt.In diesem Kurs lernen Sie anhand einer Beispielanwendung, wie Sie mit Java und Spring GraphQL eigene GraphQL-APIs entwickeln können. IT-Experte Nils Hartmann führt in die Grundlagen ein und zeigt, wie man das Schema der eigenen API beschreibt und Queries, Mutations und Subscriptions implementiert. Außerdem erfahren Sie, wie Sie bei der Arbeit mit Spring GraphQL von der Integration in den Spring Technologie-Stack profitieren, wenn Sie typische Anforderungen wie Datenbankzugriffe, die Integration von Microservices oder die Absicherung Ihrer API umsetzen möchten.Um dem Kurs folgen zu können, sollten Sie mit GraphQL vertraut sein. Java-Kenntnisse und gute Spring- bzw. Spring-Boot-Kenntnisse sind von Vorteil. Für die Übungen benötigen Sie ein JDK mit Java Version 17, Git und Docker.Länge: 05:02 Stunden Alle Video-Lektionen im Überblick: GraphQL APIs mit Java Herzlich Willkommen zu diesem Kurs Intro Die Beispiel-Anwendung „Publy“ GraphQL Frameworks für Java Architektur von graphql-java Hello World, graphql-java! DataFetcher mit graphql-java Architektur von spring-graphql Hello World, spring-graphql! Architektur der Beispiel-Anwendung „Publy“ Quiz: GraphQL APIs mit Java GraphQL APIs mit spring-graphql Intro Schema Definition und Query Mapping Felder mit Argumenten 1 Handler-Funktionen für Felder Übung: Handler-Funktionen Validierung von Argument und Projected Payloads Mutations implementieren Übung: Mutations Lösung: Die addComment-Mutation mit einem eigenen Rückgabe-Typ Union Types Type Resolver Interfaces Eigene skalare Datentypen Subscriptions Übung: Subscriptions Quiz: GraphQL APIs mit Spring GraphQL Performance-Optimierungen Intro Query Performance analysieren Asynchrone Handler-Funktionen REST APIs aufrufen REST Aufrufe mit einem DataLoader zusammenfassen Batch Mapping Übung: DataLoader Query-Verarbeitung mit dem DataFetchingFieldSelectionSet optimieren Quiz: Performance Optimierungen Die GraphQL API vervollständigen Intro Sicherheit von GraphQL APIs Sicherheit in Handler-Funktionen Fehlerbehandlung am Beispiel Security im Domain Layer Fehlerbehandlung am Beispiel Bean Validation Einen Request Error mit eigenem GraphQLError-Objekt zurückliefern Mehrere GraphQLError-Objekte aus einer Exception erzeugen Beispiel: Paginierung von Listen Beispiel: Filtern von Listen Erlaubte Komplexität von Queries beschränken Testen des GraphQL Controllers Testen der GraphQL API über HTTP Quiz: Die GraphQL API vervollständigen Fazit und KursabschlussÜber den Trainer:Nils Hartmann ist freiberuflicher Softwareentwickler und -architekt aus Hamburg. Er beschäftigt sich seit mehr als 20 Jahren mit der Entwicklung von Software, wobei sein Schwerpunkt auf Java-basierten Backend-Services mit Spring und der Entwicklung von Frontends mit React und TypeScript liegt. In seinen Projekten verwendet er gerne GraphQL sowohl im Frontend als auch im Backend. Nils unterstützt Teams beim Erlernen und Anwenden dieser Technologien durch Beratung und Seminare und ist Co-Autor des Buches „React - Die praktische Einführung“ (dpunkt-Verlag).So lernen Sie mit diesem Videokurs:In den Videokursen der heise Academy lernen Sie IT-Themen anschaulich und verständlich. In den Videos schauen Sie Experten bei der praktischen Arbeit zu und lassen sich alles genau erklären. Das Wissen ist in viele kleine Lernschritte und Aufgaben unterteilt - Sie können den Kurs Lektion für Lektion durcharbeiten oder gezielt zu Themen springen, die Sie interessieren. Die persönliche Lernumgebung der heise Academy bietet Ihnen viele Funktionen, die Sie beim Lernen unterstützen:Flexibler Videoplayer mit vielen SteuerungsmöglichkeitenWissensquizzes zur LernkontrolleLernhistorie und LernfortschrittLesezeichen und Notizen Volltextsuche in den VideosFrage-den-Experten-ModulÜbungsmaterial zum MitmachenResponsive Web-App und Videostreaming für alle EndgeräteTechnische Voraussetzungen:Für diesen Videokurs wird lediglich ein Browser (mit eingeschalteter JavaScript-Funktionalität) und eine Internetverbindung benötigt.
GraphQL – Die praktische Einführung
GraphQL APIs bieten Clients ein hohes Maß an Flexibilität, da sie mit der zugehörigen Abfragesprache genau die Daten abfragen können, die sie für einen Use Case benötigen: Daten auf den Server schreiben und sich über neue Daten auf dem Server informieren lassen. Darüber hinaus sind GraphQL-APIs typsicher, was dem Client die korrekte Beschreibung seiner Abfragen garantiert.In diesem Kurs lernen Sie, was GraphQL ist und welche Motivation und Ideen dahinter stecken. Der IT-Experte Nils Hartmann zeigt Ihnen, wie Sie GraphQL-APIs mit einem Schema beschreiben, so dass Clients die gewünschten Informationen von Ihrer Schnittstelle abfragen können. Eine wichtige Rolle spielen dabei die Schema Definition Language und das umfangreiche GraphQL-Typensystem, das spannende Möglichkeiten für Entwicklungstools in der täglichen Arbeit bietet.Sie werden auch die Möglichkeiten und die Syntax der GraphQL-eigenen Abfragesprache kennenlernen, mit der ein Client die gewünschten Daten aus Ihrer GraphQL-API auswählen kann.Länge: 02:45 Stunden Alle Video-Lektionen im Überblick: Einführung in GraphQL Herzlich willkommen zu diesem Kurs Intro Was ist GraphQL? Die Beispielanwendung „Publy“ Eine GraphQL-Abfrage Daten aus Objektgraphen abfragen Toolunterstützung für GraphQL Die Beispielanwendung installieren und starten Übung: Mach dich mit GraphiQL vertraut Quiz: Einführung in GraphQL Die GraphQL-Abfragesprache Intro GraphQL Queries im Detail Variablen in Queries verwenden Fragmente Übung: GraphQL Queries Mit Mutations Daten anlegen und verändern Union-Typen abfragen Interfaces abfragen Mit Subscriptions auf Ereignisse reagieren Zusammenfassung: Die GraphQL-Abfragesprache Übung: GraphQL Mutations und Subscriptions Quiz: Die GraphQL-Abfragesprache Eine GraphQL API beschreiben Intro Die API mit einem Schema beschreiben Mit der Introspection API das GraphQL-Schema untersuchen Offset- und seitenbasierte Paginierung Cursor-basierte Paginierung Übung: Paginierung verwenden Quiz: Das Schema einer API GraphQL APIs verwenden Intro Schema Evolution: die API weiterentwickeln GraphQL-Operationen über HTTP ausführen Ausblick: Anwendungen mit GraphQL bauen Gemeinsamkeiten und Unterschiede von GraphQL und REST Quiz: GraphQL APIs verwenden Fazit und Kursabschluss Über den Trainer:Nils Hartmann ist freiberuflicher Softwareentwickler und -architekt aus Hamburg. Er beschäftigt sich seit mehr als 20 Jahren mit der Entwicklung von Software, wobei sein Schwerpunkt auf Java-basierten Backend-Services mit Spring und der Entwicklung von Frontends mit React und TypeScript liegt. In seinen Projekten verwendet er gerne GraphQL sowohl im Frontend als auch im Backend. Nils unterstützt Teams beim Erlernen und Anwenden dieser Technologien durch Beratung und Seminare und ist Co-Autor des Buches „React - Die praktische Einführung“ (dpunkt-Verlag).So lernen Sie mit diesem Videokurs:In den Videokursen der heise Academy lernen Sie IT-Themen anschaulich und verständlich. In den Videos schauen Sie Experten bei der praktischen Arbeit zu und lassen sich alles genau erklären. Das Wissen ist in viele kleine Lernschritte und Aufgaben unterteilt - Sie können den Kurs Lektion für Lektion durcharbeiten oder gezielt zu Themen springen, die Sie interessieren. Die persönliche Lernumgebung der heise Academy bietet Ihnen viele Funktionen, die Sie beim Lernen unterstützen:Flexibler Videoplayer mit vielen SteuerungsmöglichkeitenWissensquizzes zur LernkontrolleLernhistorie und LernfortschrittLesezeichen und Notizen Volltextsuche in den VideosFrage-den-Experten-ModulÜbungsmaterial zum MitmachenResponsive Web-App und Videostreaming für alle EndgeräteTechnische Voraussetzungen:Für diesen Videokurs wird lediglich ein Browser (mit eingeschalteter JavaScript-Funktionalität) und eine Internetverbindung benötigt.
Einstieg in AWS API Gateway REST
Das API Gateway ist ein Service in AWS, mit dem Sie Anfragen an einer zentralen Stelle bündeln können. Sobald Sie Ihre Cloud-Architektur damit modelliert haben, können Sie zahlreiche Optimierungen vornehmen. Dieser Kurs zeigt anhand von einfachen Beispielen den vollen Funktionsumfang des API Gateways.Zu Beginn stellt der IT-Experte Christian Oette verschiedene Architekturbeispiele vor, um Ihnen einen Überblick zu geben. Anschließend lernen Sie, wie Sie Ihre erste API konfigurieren und bereitstellen. In den folgenden Kapiteln lernen Sie weitere Funktionen wie Zugriffskontrolle, Benutzerauthentifizierung, Drosselung, Validierung etc. kennen.Am Ende des Kurses werden Sie in der Lage sein, eine vollständige Anwendung bereitzustellen. Als besonderen Bonus erhalten Sie alle Beispiele zusätzlich im Infrastructure-as-Code-Format, so dass Sie Ihr eigenes Projekt direkt auf den gezeigten Inhalten aufbauen können.06:25 Stunden Alle Video-Lektionen im Überblick: Die Vorteile des API Gateway Service Herzlich willkommen zu diesem Kurs Was ist das API Gateway und wofür verwendet man es? Baustein einer Microservice-Architektur Baustein einer Serverless-Anwendung Optimierungen im Produktivbetrieb Quiz: Die Vorteile des API Gateway Service Vorbemerkungen und Einrichtung der Hilfsprogramme Intro Setup der Projektdateien und Hilfsprogramme Vorbemerkungen zu Region, Kosten und Verwendung von Tags Einrichten eines Administrator-Benutzers Quiz: Vorbemerkungen und Einrichtung der Hilfsprogramme Eine erste API konfigurieren und bereitstellen Intro Eine erste Hallo-Welt-API erstellen API bereitstellen und testen Eine Einführung in das REST-Protokoll Eine einfache Lambda Integration erstellen Eine Proxy Integration erstellen Die Proxy Integration im Detail erklärt Stufen im Detail erklärt Der Vorteil von Stufenvariablen Die Canary- (Kanarienvogel)-Bereitstellung Quiz: Eine erste API konfigurieren und bereitstellen Infrastruktur als Code Intro Einführung in Cloudformation Eine API per Template erstellen Wie man Stacks aktualisiert Cloudformation Templates erklärt Alternativen zu Cloudformation Wie man SAM Templates prozessiert Lokale SAM-Entwicklung Quiz: Infrastruktur als Code APIs unter einer eigenen Domain bereitstellen Intro Einleitung mit Beispiel-Domain für diesen Kurs Domains mit Route 53 einrichten Wie man SSL-Zertifikate erstellt Eine API mit einer Domain verbinden Mehrere APIs unter einer Domain verknüpfen Ergebnis des Kapitels als Template Quiz: APIs unter einer eigenen Domain bereitstellen Social Media Like-API als Anwendungsbeispiel Intro Vorstellung des Anwendungsbeispiels Das Anwendungsbeispiel per Template einspielen Die erste Integration und Übungsaufgabe Lösung der Aufgabe mit weiteren Integrationen Inhalte manipulieren mit Velocity Templates Logging konfigurieren Das Zwischenergebnis als Template Quiz: Social Media Like-API als Anwendungsbeispiel Cross-Origin Resource Sharing (CORS) Intro Einführung in das Thema CORS CORS Demo mit lokalem Webserver CORS in Postman testen Web-UI Stack in Cloudformation einspielen Web-UI Stack vorgestellt CORS durch API Mapping lösen Unterschiedliche Einstellungen je nach Stufe CORS Header über Integrationen durchreichen Das Ergebnis des Kapitels als Template Quiz: Cross-Origin Resource Sharing (CORS) Identity und Access Management für die API konfigurieren Intro Einführung in IAM Richtlinien im Überblick Wie man Rollen verwendet Von einer Rolle zur anderen wechseln Ausführungsrolle mit Aufgabe Lösungsvorschlag zur Aufgabe Eine Webseite in S3 bereitstellen Webseite über die API ausliefern Erweiterte Sicherheit mit Ressourcen-Richtlinien Quiz: Identity und Access Management für die API konfigurieren Zugangskontrolle mit Hilfe von AWS Cognito steuern Intro Wie man API-Anfragen mit Cognito authentifziert Einen Benutzerpool in Cognito einrichten Den ersten Benutzer registrieren Überblick über die Cognito-Endpunkte Wie man den Anmelde-Code gegen Tokens tauscht Den Genehmiger in der API konfigurieren Bereiche konfigurieren, um mit dem Access Token zu arbeiten JWT Tokens von Cognito erklärt Vorteile einer Proxy-Integration bei der Authorisierung Das Ergebnis des Kapitels als Template Quiz: Zugangskontrolle mit Hilfe von AWS Cognito steuern Wie man Modelle verwendet und Anfragen validiert Intro Die Vorteile einer Validierung im API Gateway vorgestellt Eine Beispiel-API mit Bestellfunktion einspielen Einführung in das Thema JSON Schema Wie man die Validierung in der API konfiguriert Antwortmodelle für API-Beschreibungen nutzen Vordefinierte Standardantworten von AWS anpassen Das Ergebnis des Kapitels als Template Quiz: Wie man Modelle verwendet und Anfragen validiert Bonusinhalte Intro Wie man API-Anfragen drosseln kann Mit Hilfe von API-Keys Nutzungskontingente einstellen Die Vorteile von Client-Zertifikaten Quiz: Bonusinhalte Fazit und Kursabschluss Über den Trainer:Christian Oette ist Diplom-Informatiker und leidenschaftlicher Programmierer mit über 15 Jahren Entwicklungserfahrung. Nach einem kurzen Abstecher in die Automobilindustrie spezialisierte er sich auf den Bereich Webtechnologien, in dem er bis heute tätig ist. Seit 2021 arbeitet er als Freelancer in verschiedenen Projekten.So lernen Sie mit diesem Videokurs:In den Videokursen der heise Academy lernen Sie IT-Themen anschaulich und verständlich. In den Videos schauen Sie Experten bei der praktischen Arbeit zu und lassen sich alles genau erklären. Das Wissen ist in viele kleine Lernschritte und Aufgaben unterteilt - Sie können den Kurs Lektion für Lektion durcharbeiten oder gezielt zu Themen springen, die Sie interessieren. Die persönliche Lernumgebung der heise Academy bietet Ihnen viele Funktionen, die Sie beim Lernen unterstützen:Flexibler Videoplayer mit vielen SteuerungsmöglichkeitenWissensquizzes zur LernkontrolleLernhistorie und LernfortschrittLesezeichen und Notizen Volltextsuche in den VideosFrage-den-Experten-ModulÜbungsmaterial zum MitmachenResponsive Web-App und Videostreaming für alle EndgeräteTechnische Voraussetzungen:Für diesen Videokurs wird lediglich ein Browser (mit eingeschalteter JavaScript-Funktionalität) und eine Internetverbindung benötigt.
Angular 12 für Frontend-Entwickler
Angular ist ein erfolgreiches clientseitiges JavaScript-Webframework zur Erstellung von Single-Page-Webanwendungen. Es wird gerne für die Programmierung von kommerziellen und industriellen Anwendungen verwendet, da es viele vorgefertigte Lösungen wie Datenbindung, Formularunterstützung, Routing und Testautomatisierung mitbringt.In diesem Kurs entwickeln Sie gemeinsam mit Ihrem Trainer Jannick Leismann eine Anwendung mit einer Struktur, wie sie auch bei großen Websites wie Facebook, Twitter und Google zum Einsatz kommt. Damit Sie schnell produktiv arbeiten können, lernen Sie zunächst die Grundlagen. Sie machen sich mit TypeScript vertraut, denn damit entwickeln Sie mit Angular. Außerdem beschäftigen Sie sich mit Komponenten und Modulen und lernen die Template-Syntax kennen. Für Ihr Projekt verwenden Sie Atomic Design Patterns und Component Service Design Patterns. Es folgen fortgeschrittene Themen wie Services, Routing und HTTP-Requests. Sie lernen, wie Sie mit dem Router durch die Anwendung navigieren, wie Sie ein Server-Backend über http Rest anbinden und wie Sie Ihre Anwendung deployen. Am Ende des Kurses sind Sie in der Lage, eine vollständige, interaktive Anwendung mit Angular zu erstellen.Länge: 04:53 Stunden Alle Video-Lektionen im Überblick: Einführung und Einrichtung Herzlich willkommen in diesem Kurs Node, NPM und Visual Studio Code installieren Angular CLI installieren Projekt Hotel-App erstellen Eine Eigenschaft aus der Component lesen CSS Styling mit Bootstrap Quiz: Einführung und Einrichtung Buchungen implementieren Intro Deine erste eigene Component Booking anzeigen Webserver-Funktionalität Mock-Daten erstellen und implementieren Quiz: Buchungen implementieren Routing Intro Router-Modul hinzufügen und einrichten Startseite definieren mit Redirect Navigationsbar hinzufügen Quiz: Routing Booking erstellen, bearbeiten und löschen Intro CreateBooking Component und Form hinzufügen Formular verbinden Booking mit Click-Handler erstellen Booking bearbeiten Datepicker: Manuelles Binding einrichten Booking bearbeiten Booking löschen Quiz: Booking erstellen, bearbeiten und löschen Services Intro Was sind Services? Booking Service erstellen Bookings im Service holen und löschen Bookings im Service hinzufügen und bearbeiten Quiz: Services InMemory Web-API Intro Node Packages installieren InMemoryWebAPI konfigurieren Get Bookings mit HttpClient implementieren Delete Booking mit HttpClient implementieren GetById, Update und Create mit HttpClient implementieren HttpClient abschließen Styling Intro Styling anpassen: Dark Mode Form-Validierung Intro Einleitung Template Form erstellen Fehler abfragen Das FormsModule importieren Form mit Component verbinden Validators verwenden Quiz: Form-Validierung Fazit und Kursabschluss Über den Trainer:Jannick Leismann arbeitet als freiberuflicher Softwareentwickler und Online-Trainer und bietet Dienstleistungen im Bereich der Programmierung an. Er ist spezialisiert auf C# ASP.NET, Schnittstellenprogrammierung und die Entwicklung interaktiver Software. Als Microsoft Certified Developer erstellt er Programmierkurse für Anfänger und Fortgeschrittene rund um Web-, Game- und App-Entwicklung.So lernen Sie mit diesem Videokurs:In den Videokursen der heise Academy lernen Sie IT-Themen anschaulich und verständlich. In den Videos schauen Sie Experten bei der praktischen Arbeit zu und lassen sich alles genau erklären. Das Wissen ist in kleine Lernschritte und Aufgaben unterteilt. So können Sie den Kurs Lektion für Lektion durcharbeiten oder gezielt zu Themen springen, die Sie interessieren. Die persönliche Lernumgebung der heise Academy bietet viele Funktionen, die Sie beim Lernen unterstützen:Flexibler Videoplayer mit vielen SteuerungsmöglichkeitenWissensquiz zur LernkontrolleLernhistorie und LernfortschrittLesezeichen und Notizen Volltextsuche in den VideosFrage-den-Experten-ModulÜbungsmaterial zum MitmachenResponsive Web-App und Videostreaming für alle EndgeräteTechnische Voraussetzungen:Für diesen Videokurs werden lediglich ein Browser (mit eingeschalteter JavaScript-Funktionalität) und eine Internetverbindung benötigt.
ASP.NET Core – Der Intensivkurs
Mit dem von Microsoft entwickelten plattformübergreifenden Web-Framework ASP.NET Core können Sie dynamische Webseiten, Webanwendungen und Webdienste programmieren. Der Fokus auf Cross-Plattform-Entwicklung ermöglicht es Ihnen, moderne Anwendungen schnell und effizient zu erstellen und Probleme schneller zu lösen.In diesem Kurs lernen Sie, eigene Webanwendungen und Cloud-Software mit ASP.NET Core zu programmieren. Gemeinsam mit Ihrem Trainer Jannick Leismann entwickeln Sie eine ausgereifte Software mit einer Struktur, wie sie auch bei großen Websites wie Facebook, Twitter und Google zum Einsatz kommt. Dabei lernen Sie die Programmiersprache anhand eines praktischen Beispiels von Grund auf kennen, angefangen bei den Grundlagen, die Ihnen den Einstieg erleichtern, über Kernthemen wie Dependency Injection, MVC Pattern, Entity Framework, SQL sowie asynchrone Abfragen und Methoden bis hin zu fortgeschrittenen Themen wie RESTful API-Entwicklung, Front- und Backend-Entwicklung mit C#, Benutzerkonten und Autorisierung. In diesem Kurs entwickeln Sie mit dem MVC-Pattern. Das erlernte Wissen können Sie später auch nutzen, um Ihre ASP.NET Core Programme mit Angular, Blazor, Vue.js oder React zu verbinden.Dieser Kurs ist daher nicht nur für Einsteiger interessant, sondern auch für Programmierer, die sich weiterbilden möchten.Länge: 05:14 Stunden Alle Video-Lektionen im Überblick: Einführung und Einrichtung IntroHerzlich willkommen in diesem Kurs Projekt aufsetzen Model View Controller (MVC-Muster) und Template Program, Startup und AppSettings Deine erste Datenbankmigration Registrieren und Shared-Layout-Anpassungen MVC, Data Binding und Entity Framework Intro JobPosting Model erstellen und patchen Deine erste eigene View Views und Routing vorbereiten Data Binding des JobPosting Files hochladen JobPosting erstellen und überschreiben Bestehende JobPostings anzeigen Fehlerkorrekturen und Debugging Ein JobPosting löschen Quiz: MVC, Data Binding und Entity Framework Plugins, Benutzer und Authorisierung Intro JavaScript Plugins und DataTable Ajax anhand von Bestätigungsdialogen Sicherheitslücken schließen Die Nutzer-Startseite erstellen Liste mit allen JobPostings anzeigen JobPosting Modal Popup Suchfilter einbauen mit Partial Views Eine neue Rolle anlegen Nutzer seeden und Rollen automatisch verteilen Quiz: Plugins, Benutzer und Authorisierung RESTful-API-Entwicklung Intro Einleitung Dein erster Endpunkt Postman GetAll Endpunkt (GET) GetById Endpunkt (GET) Create Endpunkt (POST) Delete Endpunkt (DELETE) Update Endpunkt (PUT) Quiz: RESTful-API-Entwicklung Ergänzungen Intro API-Key-Autorisierung Login-Seite modifizieren (Identity Pages verwenden) Fazit und KursabschlussÜber den Trainer:Jannick Leismann arbeitet als freiberuflicher Softwareentwickler und Online-Trainer und bietet Dienstleistungen im Bereich der Programmierung an. Er ist spezialisiert auf C# ASP.NET, Schnittstellenprogrammierung und die Entwicklung interaktiver Software. Als Microsoft Certified Developer erstellt er Programmierkurse für Anfänger und Fortgeschrittene rund um Web-, Game- und App-Entwicklung.So lernen Sie mit diesem Videokurs:In den Videokursen der heise Academy lernen Sie IT-Themen anschaulich und verständlich. In den Videos schauen Sie Experten bei der praktischen Arbeit zu und lassen sich alles genau erklären. Das Wissen ist in kleine Lernschritte und Aufgaben unterteilt. So können Sie den Kurs Lektion für Lektion durcharbeiten oder gezielt zu Themen springen, die Sie interessieren. Die persönliche Lernumgebung der heise Academy bietet Ihnen viele Funktionen, die Sie beim Lernen unterstützen:Flexibler Videoplayer mit vielen SteuerungsmöglichkeitenWissensquiz zur LernkontrolleLernhistorie und LernfortschrittLesezeichen und Notizen Volltextsuche in den VideosFrage-den-Experten-ModulÜbungsmaterial zum MitmachenResponsive Web-App und Videostreaming für alle EndgeräteTechnische Voraussetzungen:Für diesen Videokurs werden lediglich ein Browser (mit eingeschalteter JavaScript-Funktionalität) und eine Internetverbindung benötigt.
Moderne Webentwicklung mit React
React hat sich seit Jahren als eine der drei großen Single-Page-Lösungen im Frontend etabliert. Die Bibliothek setzt auf einen leichtgewichtigen, komponentenbasierten Ansatz und konzentriert sich auf die Generierung von Benutzeroberflächen. Sie bietet eine hohe Entwicklungsgeschwindigkeit und garantiert eine gute Performance für Anwendungen - nicht anders als von einem Facebook-Projekt zu erwarten.Dieser Kurs erleichtert Ihnen den Einstieg in die Entwicklung mit React und hilft Ihnen, die Konzepte und Architekturmuster einer React-Applikation kennenzulernen. Sie lernen React von Grund auf kennen und können alle wichtigen Aspekte der Bibliothek praktisch anwenden. Angefangen bei Komponenten über Hooks, Styling und Formularen entwickeln Sie eine voll funktionsfähige Kochbuch-Applikation, die Sie natürlich auch testen und debuggen werden.Am Ende des Kurses haben Sie eine lauffähige Single-Page-Applikation und wissen genau, wie sie funktioniert und wie Sie sie anpassen und erweitern können. Sie werden in der Lage sein, eigene Anwendungen zu entwickeln, die auch den Anforderungen komplexer Unternehmensanwendungen standhalten können.Länge: 08:14 Stunden Alle Video-Lektionen im Überblick: Einführung und Einrichtung Herzlich willkommen zu diesem Kurs Intro Die Grundlagen von React Werkzeuge für den Umgang mit React Applikationen mit Create React App initialisieren Weitere Optionen von Create React App kennenlernen Struktur der Applikation Start der Applikation Quiz: Erste Schritte Komponenten-Lifecycle Intro Aufbau des Effect Hooks Einhängen von Komponenten Aktualisierung von Komponenten Entfernen von Komponenten Mit einem Webserver kommunizieren Lesend auf APIs zugreifen Schreibend auf APIs zugreifen Quiz: Komponenten-Lifecycle Komponenten Intro Die Komponentenarchitektur von React Funktionskomponenten als Bausteine einer Applikation Thinking in React React-Komponenten erstellen Mehr Dynamik in Komponenten dank JSX Den State einer Komponente richtig typisieren Die State-Definition einer Komponente Informationen mit Props an Komponenten übergeben Umgang mit User-Events Kommunikation zwischen Kind- und Elternkomponente Quiz: Komponenten Styling Intro Styling mit dem Style-Attribut und Klassen Mehrere CSS-Klassen in einem Element Mehr Flexiblität beim Stylen von Komponenten mit der Classnames Bibliothek Styling mit SCSS und CSS Modules Styled Components verwenden Material UI einbinden Quiz: Styling Context Intro Zentrale Informationen im Context vorhalten Zugriff auf den Context Quiz: Context Custom Hooks Intro Funktionalität in Custom Hooks auslagern Quiz: Custom Hooks Formulare Intro Grundlegender Aufbau eines Formulars Formularelemente mit dem State synchronisieren Ein umfangreicheres Formular aufbauen Das Formular absenden Formulardaten zum Server senden Grundlagen der Formularvalidierung Formularbehandlung mit Formik Formularvalidierung mit Formik und Yup Validierungsschema definieren Quiz: Formulare Refs Intro Refs Dateien in React hochladen Die übrigen Hooks Quiz: Refs Routing Intro Einführung in den React Router Routen mit Variablen umsetzen Direkte Steuerung des Routers UI-Elemente mit dem Router steuern Quiz: Routing Testing Intro Unittests mit Jest Tests organisieren Weiterführende Test-Themen React-Komponenten testen Events testen Abhängigkeiten mocken Snapshot-Tests mit Jest Quiz: Testing Debugging und Tools Intro Die Applikation mit den Browser-Dev-Tools analysieren Ein Blick in den Komponentenbaum mit den React-Dev-Tools React-Applikationen profilen Quiz: Debugging und Tools Build Intro Build und Deployment einer React-Applikation Die Konfiguration mit Umgebungsvariablen beeinflussen Quiz: Build Klassenkomponenten Intro Einführung in die Klassenkomponenten von React Zustand und Props bei Klassenkomponenten Der Lifecycle einer Klassenkomponente Refactoring der Klassenkomponenten Unterschiede zwischen Klassen- und Funktionskomponenten Quiz: Klassenkomponenten Fazit und Kursabschluss Über den Trainer:Sebastian Springer arbeitet bei MaibornWolff in München und beschäftigt sich hauptsächlich mit den verschiedenen Aspekten von client- und serverseitigem JavaScript. Sein Fokus liegt auf der Frage, wie man die Welt mit Webtechnologien verbessern kann. Von JavaScript in Autos und anderen Alltagsgegenständen bis hin zur Implementierung großer Unternehmensplattformen ist die Skriptsprache mittlerweile in allen Lebensbereichen zu finden. Dabei stellt sich die Frage, wie sich Architekturen, Codequalität und auch Entwicklungswerkzeuge weiterentwickeln, um diesen Anforderungen gerecht zu werden. Sebastian geht diesen Fragen auf den Grund und gibt sein Wissen als Berater, Trainer und Autor an Webentwickler weiter.So lernen Sie mit diesem Videokurs:In den Videokursen der heise Academy lernen Sie IT-Themen anschaulich und verständlich. In den Videos schauen Sie Experten bei der praktischen Arbeit zu und lassen sich alles genau erklären. Das Wissen ist in viele kleine Lernschritte und Aufgaben unterteilt - Sie können den Kurs Lektion für Lektion durcharbeiten oder gezielt zu Themen springen, die Sie interessieren. Die persönliche Lernumgebung der heise Academy bietet Ihnen viele Funktionen, die Sie beim Lernen unterstützen:Flexibler Videoplayer mit vielen SteuerungsmöglichkeitenWissensquizzes zur LernkontrolleLernhistorie und LernfortschrittLesezeichen und Notizen Volltextsuche in den VideosFrage-den-Experten-ModulÜbungsmaterial zum MitmachenResponsive Web-App und Videostreaming für alle EndgeräteTechnische Voraussetzungen:Für diesen Videokurs wird lediglich ein Browser (mit eingeschalteter JavaScript-Funktionalität) und eine Internetverbindung benötigt.
Responsive Webdesign mit HTML, CSS, Bootstrap und Tailwind
Responsive Webdesign ist längst kein Feature mehr, sondern fester Bestandteil einer modernen Website. In diesem Kurs lernen Sie Schritt für Schritt die grundlegenden Technologien HTML und CSS kennen. Außerdem werfen Sie einen Blick auf das Webdesign und erhalten einen Einblick in die Arbeitsweise professioneller Teams.Der Kurs beinhaltet drei umfangreiche Projekte, anhand derer Sie die Vorgehensweise bei der Entwicklung einer Website kennenlernen und wichtige Erfahrungen sammeln. Außerdem lernen Sie das Frontend-Framework Bootstrap kennen, mit dem Sie einen Blog erstellen, sowie das CSS-Framework Tailwind, das in den letzten Jahren immer beliebter geworden ist.Wenn Sie neu in der Welt der Webentwicklung sind oder bisher nur sporadisch mit HTML und CSS gearbeitet haben, ist dieser Kurs genau das Richtige für Sie.Länge: 09:09 Stunden Alle Video-Lektionen im Überblick: Einführung in den Kurs Herzlich Willkommen zu diesem Kurs Einführung in Visual Studio Code Einführung in die Browser-Entwicklungstools Vorbereitung der Arbeitsumgebung HTML-Grundlagen Intro Was ist HTML? Aufbau von HTML-Elementen und Tags Das HTML-Grundgerüst hinzufügen Überschriften und Absätze darstellen Externe und interne Inhalte verlinken Grafiken und Bilder einbinden Sortierte und unsortierte Listen erstellen Mit Tabellen arbeiten Formulare anlegen Websites richtig strukturieren Quiz: HTML Grundlagen CSS-Grundlagen Intro Was ist CSS? Deine erste Zeilen in CSS CSS-Selektoren kennenlernen CSS-Selektoren verbinden, kombinieren und gruppieren Schriften darstellen und Texte formatieren Mit dem CSS-Box-Modell Höhe, Breite und Abstände festlegen Hintergrund mit Farben, Bilder oder Schatten gestalten Mit der Display-Eigenschaft definieren, wie der Browser Elemente rendert Elemente positionieren und ausrichten Überlaufverhalten, Sichtbarkeit und Deckkraft Mit CSS-Flexbox layouten CSS-Grid kennenlernen CSS-Grid in der Praxis Elemente animieren und Übergänge definieren Website mit Media Queries für unterschiedliche Geräte optimieren CSS-Kaskade verstehen Quiz: CSS-Grundlagen Design-Grundlagen Intro Design and Prototyping Tools kennenlernen Mit Design-Systemen gestalten Die richtigen Farben finden und festlegen Typografie richtig anwenden Icons einbinden Mit Komponenten arbeiten Typische Layoutelemente im Webdesign Workflow für die Konzeption deiner Website Quiz: Design-Grundlagen Portfolio-Website mit HTML und CSS Intro Projektvorstellung HTML-Code für den Kopfbereich erstellen CSS-Code für den Kopfbereich definieren Mit CSS das Logo positionieren und Bürger-Icon erstellen Burger-Icon zu einem X animieren Texteingabefeld für die Suche gestalten Hauptnavigation gestalten HTML-Elemente dem Hauptinhalt hinzufügen CSS-Regeln und Typografie für Hauptinhalt festlegen Projektliste mit CSS gestalten HTML und CSS für den Fußbereich hinzufügen Kopfbereich für größere Endgeräte optimieren Hauptinhalt für größere Endgeräte optimieren Fußbereich für größere Endgeräte optimieren Quiz: Portfolio-Website mit HTML und CSS Blog-Website mit Bootstrap Intro Was ist Bootstrap? Projektvorstellung HTML-Code für den Kopfbereich erstellen Kopfbereich mit Klassen von Bootstrap definieren Willkommenbereich anlegen HTML-Code für die Beitragsliste erstellen Beitragsliste mit Bootstrap-Klassen gestalten Beitragsliste für größere Endgeräte optimieren Fußbereich anlegen HTML-Code für Beitragsseite erstellen Beitragsseite mit Klassen von Bootstrap definieren Quiz: Blog Website mit Bootstrap Online-Shop-Website mit Tailwind CSS Intro Was ist Tailwind? Projektvorstellung HTML-Code für den Kopfbereich erstellen Kopfbereich mit Klassen von Tailwind definieren HTML-Code für Hauptinhalt erstellen Banner mit den Klassen von Tailwind gestalten Grafik im Banner gestalten und Anpassungen für größere Endgeräte vorehmen Produktliste für die mobile Version gestalten Produktliste für größere Endgeräte optimieren Buttons mit Hover-Effekt versehen und Produktliste fertigstellen HTML-Code für den Fußbereich erstellen Fußbereich mit Tailwind-Klassen definieren Quiz: Online-Shop-Website mit Tailwind CSS Aussicht Intro Rückblick Ein Blick in die Zukunft Fazit und KursabschlussÜber den Trainer:Fabian gründete bereits mit 18 Jahren sein erstes Unternehmen und unterstützte Unternehmen, Restaurants und Vereine in seiner Umgebung mit Grafikdesign und Webentwicklung. 2018 folgte mit Adstock das zweite Unternehmen. Neben seinem YouTube-Kanal, auf dem er sein Wissen und seine Erfahrungen rund um UI- und UX-Design sowie App- und Webentwicklung teilt, ist er an vielen weiteren Softwareprojekten beteiligt.So lernen Sie mit diesem Videokurs:In den Videokursen der heise Academy lernen Sie IT-Themen anschaulich und verständlich. In den Videos schauen Sie Experten bei der praktischen Arbeit zu und lassen sich alles genau erklären. Das Wissen ist in viele kleine Lernschritte und Aufgaben unterteilt - Sie können den Kurs Lektion für Lektion durcharbeiten oder gezielt zu Themen springen, die Sie interessieren. Die persönliche Lernumgebung der heise Academy bietet Ihnen viele Funktionen, die Sie beim Lernen unterstützen:Flexibler Videoplayer mit vielen SteuerungsmöglichkeitenWissensquizzes zur LernkontrolleLernhistorie und LernfortschrittLesezeichen und Notizen Volltextsuche in den VideosFrage-den-Experten-ModulÜbungsmaterial zum MitmachenResponsive Web-App und Videostreaming für alle EndgeräteTechnische Voraussetzungen:Für diesen Videokurs wird lediglich ein Browser (mit eingeschalteter JavaScript-Funktionalität) und eine Internetverbindung benötigt.
JavaScript für Softwareentwickler
Als Entwickler kommt man heute kaum noch ohne JavaScript-Kenntnisse aus, denn JavaScript ist eine der beliebtesten Programmiersprachen der Welt. Neben HTML und CSS bildet sie die Grundlage für die Frontend-Entwicklung im Web.Immer mehr Projekte im Web werden mit der Skriptsprache umgesetzt und dank Projekten wie Node.js oder Deno wird JavaScript auch serverseitig immer häufiger eingesetzt.In diesem Kurs lernen Sie JavaScript im Detail kennen und sind am Ende in der Lage, die Sprache sicher und mit gutem Gewissen in eigenen Projekten einzusetzen.Länge: 07:57 Stunden Alle Video-Lektionen im Überblick: Einführung Willkommen zu JavaScript Hallo Welt! JavaScript ist nicht C-basiert Lego versus Playmobil Editor, IDE und Co. Die REPL von Node.js Section-1611569762 Open Source, Historie und Versionierung Intro: Open Source, Historie und Versionierung "Sharing is Caring" Der Open-Source-Ansatz Die Historie der Sprache Die Versionierung von JavaScript Die Engines: V8, Chakra und Co. Quiz Das Typsystem in JavaScript Intro: Das Typsystem von JavaScript Ganze Zahlen und Dezimalzahlen Zeichenketten und Zeichen Logische Werte undefined und null Kurzer Ausblick: function, object und Array Variablen und Konstanten Statisch versus dynamisch Template Strings Falsy Values Die Vergleichs-Operatoren Gleichheit versus Identität Quiz Anweisungen Intro: Anweisungen Der Strict-Mode Anweisungen versus Ausdrücke Die for-Schleife Die while-Schleife Die do-while-Schleife Die if-Anweisung Die else-Anweisung Die else-if-Anweisung break und continue Die switch-Anweisung Der ternäre Operator Quiz Funktionale Programmierung Intro: Funktionale Programmierung Funktionsanweisungen und -ausdrücke Parameter und Rückgabewerte Funktionen aufrufen Optionale Parameter und Standardwerte Der Rest-Operator Rekursion Closures Funktionen höherer Ordnung Arrays im Detail Map und Reduce filter, foreach und Co. Quiz Objektorientierte Programmierung Intro: Objektorientierte Programmierung Objekte in JavaScript Objekte und Eigenschaften this für Methoden und Funktionen this mit apply und call this für Konstruktorfunktionen class und extends Kurzschreibweise für Funktionen Veränderliche und unveränderliche Datentypen Die for-in- und die for-of-Schleife Array- und Object-Destructuring Quiz Asynchroner Code Intro: Asynchroner Code JavaScript ist Single-Threaded Callbacks und Lambda-Ausdrücke Synchrone und asynchrone Callbacks "Don't release Zalgo" Promises async und await Generatoren und yield Quiz Fehlerbehandlung Intro: Fehlerbehandlung Ausnahmen werfen und behandeln Fehlersituationen aufräumen Fehler in Callbacks behandeln Fehler in Promises und mit async und await behandeln Quiz Module verwenden Intro: Module verwenden Ein Modulsystem für JavaScript npm verwenden Das leftPad-Fiasko Bundling und Co. Quiz Über den Trainer:Golo Roden ist Gründer und CTO von the native web GmbH. Er berät Unternehmen zu Technologien und Architekturen im Web- und Cloud-Umfeld, unter anderem zu TypeScript, Node.js, React, CQRS, Event Sourcing und Domain-driven Design (DDD).So lernen Sie mit diesem Videokurs:In den Videokursen der heise Academy lernen Sie IT-Themen anschaulich und verständlich. In den Videos schauen Sie Experten bei der praktischen Arbeit zu und lassen sich alles genau erklären. Das Wissen ist in viele kleine Lernschritte und Aufgaben unterteilt - Sie können den Kurs Lektion für Lektion durcharbeiten oder gezielt zu Themen springen, die Sie interessieren. Die persönliche Lernumgebung der heise Academy bietet Ihnen viele Funktionen, die Ihnen das Lernen erleichtern:Flexibler Videoplayer mit vielen SteuerungsmöglichkeitenWissensquizzes zur LernkontrolleLernhistorie und LernfortschrittLesezeichen und Notizen Volltextsuche in den VideosFrage-den-Experten-ModulÜbungsmaterial zum Mitmachen Responsive Web-App und Videostreaming für alle EndgeräteTechnische Voraussetzungen:Für diesen Videokurs wird lediglich ein Browser (mit eingeschalteter JavaScript-Funktionalität) und eine Internetverbindung benötigt.