Bilder machen mehr als 60% der Bytes aus, die zum Laden einer Webseite durchschnittlich benötigt werden. Mit AVIF können Sie Ihre Bilder verkleinern und die Ladezeit Ihrer Website verkürzen. AVIF ist ein Bildformat, das vom AV1-Videobitstream

Geschätzte Dauer: 1–2 Stunden Es gibt zwei Modi für die Ausführung dieses Codelabs: Lokale Tests oder Aggregationsdienst. Für den Modus „Lokale Tests“ ist ein lokaler Computer und der Chrome-Browser erforderlich. Es werden keine Google

Für dieses Codelab sind einige Voraussetzungen erforderlich. Jede Anforderung ist entsprechend gekennzeichnet, ob sie für „Lokale Tests“ oder „Aggregationsdienst“ erforderlich ist. Für lokale Tests muss das Tool zum lokalen Testen heruntergeladen

In diesem Codelab fügen Sie einer Flutter-App In-App-Käufe hinzu, die mithilfe eines Dart-Backend-Dienstes verifiziert und verwaltet werden.

In diesem Codelab erfahren Sie, wie Sie eine Webanwendung erstellen, die Cloud Firestore verwendet.

In diesem Codelab erfahren Sie, wie Sie die Firebase-Plattform im Web verwenden, indem Sie eine Chat-App erstellen.

In diesem Codelab erfahren Sie, wie Sie Animationen in Flutter verwenden. Sie erstellen ein Widget, das sowohl Größe als auch Farbe animiert, einen 3D-Karten-Flip-Effekt hinzufügt, Effekte aus dem Animationspaket nutzt und die Unterstützung der Android-Geste „Zurück“ hinzufügt.

In diesem Codelab erfährst du, wie du eine Flutter-App erstellst, die zufällige, cool klingende Namen generiert.

In diesem Codelab richten Sie das Firebase-Leistungsmonitoring in einer Webanwendung ein und erfahren, wie Sie damit dafür sorgen können, dass Ihre App für Endnutzer reibungslos funktioniert.

In diesem Codelab erfahren Sie, wie Sie mit Cloud Functions for Firebase Benachrichtigungen an Nutzer einer Chat-App senden.

In diesem Codelab werden die Nutzer durch die Schritte zum Bereitstellen einer Instanz von Jenkins in GKE geführt, einschließlich automatisch skalierter Builder-Agents.

In diesem Codelab erfahren Sie, wie Sie Firebase Authentication mit nur wenigen Codezeilen zu einer Flutter-App hinzufügen.

Gebots- und Auktionsdienste umfassen vier Dienste für Käufer und Verkäufer, die eine Protected Audience -Auktion ermöglichen: Käufer-Stack: Verkäufer-Stack: In diesem Codelab erfahren Sie, wie Sie die End-to-End-Einrichtung in Ihrer lokalen Umgebung

In diesem Codelab erfahren Sie, wie Sie Übertragungen innerhalb von Unterhaltungen zwischen Kundenservicemitarbeitern von Kundenservicemitarbeitern und Botmitarbeitern verwalten. Am Ende haben Sie eine einfache Weboberfläche, in der Sie alle laufenden Unterhaltungen mit Ihrem Agent sehen und eine Unterhaltung als Live-Agent beitreten oder sie verlassen können.

In diesem Codelab erfahren Sie, wie Sie eine Webanwendung mit Firebase App Check und reCAPTCHA validieren, bevor Sie Anfragen an die Places API senden.

Dieses Codelab ist eine Fortsetzung von Google Pay API for Web 101: Basics und basiert auf dem Code, der in diesem Codelab geschrieben wurde. Sie müssen dieses Codelab zuerst abschließen, um dieses Codelab abschließen zu können. Hier finden Sie einen

In diesem Codelab erfahren Sie, wie Sie mithilfe der Firebase-Infrastruktur ein ML-Modell bereitstellen, damit es mit TensorFlow.js auf Ihrer Website verwendet und genutzt werden kann.

In diesem Codelab erfahren Sie, was das Modell gecko@003 ist und was ein realer Anwendungsfall für seine Anwendung ist.

In diesem Codelab erfahren Sie mehr über variable Schriftarten und ihre Vorteile. Außerdem erfahren Sie, wie Sie damit Designs erstellen und sie mithilfe der Google Fonts API und in CSS implementieren.

Hier erfahren Sie, wie Sie eine mobile Flutter-App mit Firebase erstellen.

Mit Firebase und dem StackBlitz-Online-Editor eine Webanwendung von Grund auf neu erstellen Für die Kommunikation mit Firebase verwenden Sie einfachen HTML- und JavaScript-Code. Dies ist eine gute Einführung in die Verwendung der Firebase Console und die Einbindung von Firebase in eine App. Es sind keine umfangreichen Vorkenntnisse oder Softwareinstallationen erforderlich.

Informationen zum Implementieren der Multi-Faktor-Authentifizierung und zum Erstellen benutzerdefinierter Authentifizierungsanforderungen mit Blockierfunktionen

Sie erfahren, wie Sie Procurement DocAI verwenden, um eine Rechnung intelligent zu parsen.

In diesem Codelab migrieren Sie eine vorhandene Firebase-Web-App zum neuen modularen Firebase JS SDK, um nicht verwendeten Code zu entfernen und die App schneller zu laden.

Am Ende dieses Codelabs haben Sie eine funktionsfähige Website mit einer funktionierenden Google Pay-Integration. In diesem Projekt wird ein Zahlungstoken abgerufen, das zur Verarbeitung an einen Zahlungsdienstleister gesendet werden kann. Für eine

Hier erfährst du, wie du deinen Spielen mit Flutter Soundeffekte, Hintergrundmusik und dynamisches Audio hinzufügen kannst.

Codelab zur Verwendung der Firebase Emulator Suite während der Entwicklung mit Flutter Im Codelab werden die Auth- und Firestore-Emulatoren verwendet, um die Verwendung des Emulators zu demonstrieren.

In diesem anfängerfreundlichen Codelab erfahren Sie, wie Sie eine Beispielanwendung mit eigenständigen Angular-Komponenten der Version 14 erstellen

Hier erfahren Sie, wie Sie Augmented-Reality-Funktionen mit der WebXR Device API verwenden und mithilfe der Szenenerkennung ein 3D-Objekt in der realen Welt positionieren können.

Hier erfahren Sie, wie Sie die Best Practices für Bedienungshilfen in Ihren Angular-Apps mit dem in das Framework integrierten Toolset umsetzen.

Jetzt neu: Signale, ein neues Reaktivitätsmodell in Angular. Mit Signalen erhalten Sie Zugriff auf Tools von hoher Qualität für eine präzise Reaktion.

Hier erfahren Sie, wie Sie vorgefertigte Material-Komponenten auf Komponenten für beliebige Web-Frameworks erweitern.

In diesem Codelab erfährst du, wie du React-Konzepte in Lit überträgst

Baue das Bewegungssystem von Material mithilfe von Übergängen aus dem Animationspaket in die Antwort-App ein.

Hier erfahren Sie, wie Sie einzelne Material-Komponenten in eine vorhandene Webcode-Basis integrieren, ohne noch einmal von vorne zu beginnen.

Optimieren Sie das Design Ihrer Flutter-App und implementieren Sie eine erweiterte Komponente für das Hintergrundmenü in Flutter.

Hier erfahren Sie, wie Sie mit Material eine Struktur und ein Layout für eine Flutter-App erstellen.

Hier erfahren Sie, wie Sie eine Web-App mit der Firebase Emulator Suite entwickeln.

Hier erfahren Sie, wie Sie Material für Struktur und Layout im Web verwenden.

In diesem Lab lernen Sie, wie Sie einen Keras-Klassifikator erstellen. Anstatt zu versuchen, die perfekte Kombination neuronaler Netzwerkebenen zum Erkennen von Blumen zu finden, verwenden wir zuerst eine Technik namens Lerntransfer, um ein leistungsstarkes vortrainiertes Modell an unser Dataset anzupassen. Dieses Lab enthält die notwendigen theoretischen Erläuterungen zu neuronalen Netzwerken und ist ein guter Ausgangspunkt für Entwickler, die sich mit Deep Learning vertraut machen.

Informationen zum Schutz Ihrer Firestore-Daten mit Sicherheitsregeln

In diesem Codelab erstellen Sie eine Webseite, die mit einer Micro:Bit-Tafel von BBC interagiert, um Bilder auf dem 5-x-5-LED-Display anzuzeigen. Sie lernen die Web Serial API kennen und erfahren, wie Sie lesbare, beschreibbare und transformierte Streams verwenden können, um über den Browser mit seriellen Geräten zu kommunizieren.

In diesem Codelab wird dem Nutzer über eine Befehlszeile die DLP API vorgestellt. Der Nutzer lädt den Projektcode herunter und überprüft einige der Tools im Beispielverzeichnis sowie die zugrunde liegenden Funktionen.

In diesem Codelab lernen Sie verschiedene Web-APIs kennen, die ganz neu oder nur hinter einer Kennzeichnung verfügbar sind.

In diesem Codelab erstellen Sie eine Webanwendung, beschränken den Zugriff auf bestimmte Nutzergruppen und verwenden die Identität des authentifizierten Nutzers im Programm

In diesem Codelab erstellen Sie eine Webseite, die mit einer Micro:Bit-Tafel von BBC interagiert, um Bilder auf dem 5-x-5-LED-Display anzuzeigen. Sie lernen die Web Serial API kennen und erfahren, wie Sie lesbare, beschreibbare und transformierte Streams verwenden können, um über den Browser mit seriellen Geräten zu kommunizieren.

Erfahren Sie, wie Sie einer Web-App mit den neuesten APIs von Google Chrome eine sofortige Navigation und nahtlose Seitenübergänge hinzufügen können.

Hier erfahren Sie, wie Sie ein adaptives Webformular erstellen, bei dem jeder Nutzer eine maßgeschneiderte Oberfläche erhält, die seine Vorlieben zu diesem Zeitpunkt widerspiegelt.

In diesem Codelab erfahren Sie, wie Sie einer Flutter-App AdMob-Inline-Anzeigen (Banner und nativ) hinzufügen.

In diesem Codelab werden die wichtigsten Konzepte von Accelerated Mobile Pages und die Unterschiede zu herkömmlichen HTML-Dokumenten vorgestellt. Aus diesem Grund erstellen und validieren wir AMP-Dokumente.

In diesem Codelab werden die wichtigsten Konzepte von Accelerated Mobile Pages und die Unterschiede zu herkömmlichen HTML-Dokumenten vorgestellt. Aus diesem Grund erstellen und validieren wir AMP-Dokumente.

In diesem Codelab erfahren Sie, wie Sie mithilfe des Measurement Protocol(WEB) externe Ereignisse an GA4 senden.

In diesem Codelab erfahren Sie, wie Sie einer Flutter-App ein Banner, Interstitial-Anzeigen und Anzeigen mit Prämie hinzufügen.

In diesem Codelab senden Sie Spark ML-Jobs an den Dataproc-Dienst von Google.

In diesem Codelab erstellen Sie ein Startbildschirm-Widget für Ihre iOS- oder Android-Flutter-App. Sie beginnen mit einer einfachen Nachrichten-App von Flutter. Anschließend verwenden Sie native Frameworks, um die Benutzeroberfläche für die Widgets selbst zu erstellen. Schließlich erfahren Sie, wie Sie Ressourcen teilen und die Kommunikation zwischen Ihren Widgets und der Haupt-App herstellen.

In diesem Codelab erfahren Sie alles über Dataproc Serverless, den Einstieg und den Zugriff auf die umfangreichen Features.

In diesem Codelab lernen Sie die Verwendung von Dataproc in Google Compute Engine (GCE) kennen.

Dialogflow bietet zahlreiche Integrationen für das Web, Google Assistant, soziale Medien und Telefonie-Gateways. Wenn Sie Ihre Chatbots jedoch auf Mobilgeräten verwenden möchten, müssen Sie eine benutzerdefinierte Integration erstellen. In diesem Lab erfahren Sie, wie Sie Dialogflow Essentials in eine Flutter-Anwendung einbinden.

Mit Mustern, Datensätzen und anderen neuen Funktionen von Dart 3 kannst du deinen UI-Designstil in Flutter neu gestalten.

In diesem Codelab erfahren Sie alles über & eine Webkomponente von Grund auf neu zu erstellen und sie anschließend schrittweise zu einem Lit Element zu verbessern.

In diesem Codelab erfahren Sie, wie Sie mit Google Cloud Functions einen Apache Airflow-Workflow (DAG) in Google Cloud Composer auslösen. Der DAG führt hier einen einfachen Bash-Befehl mit dem BashOperator aus.

Erstellen Sie mit JavaScript eine Web-App, die eine flammenlose LED-Kerze steuert – dank der neu entwickelten Web Bluetooth API.

In diesem Codelab schreiben Sie Ausdrücke in der Common Expression Language, die in Go implementiert ist. Sie erstellen Variablen, verwenden logische bzw. Operatoren, erstellen JSON-Dateien, erstellen Protos und optimieren Ihre Ausdrücke.

In diesem Codelab lernen Sie, wie Sie mit Dataflow Schreibvorgänge/Lesevorgänge in Bigtable beim Laden und Lesen großer Datenmengen überwachen.

In diesem Codelab lernen Sie, wie Sie mithilfe von Model Maker ein Kommentar-Spam-Modell neu trainieren, um Grenzfälle zu berücksichtigen, für die das vortrainierte Modell nicht in der Lage war, und anschließend das neue Modell in der Webanwendung bereitstellen.

In diesem Codelab entwickeln Sie mithilfe des Flutter Mobile App SDK ein Google Maps-Erlebnis für die Entwicklung hochwertiger nativer Apps für iOS, Android und das Web.

In diesem Codelab erfahren Sie, wie Sie eines der vortrainierten TensorFlow.js-Modelle (COCO-SSD) laden und verwenden, um gängige Objekte zu erkennen, mit denen es trainiert wurde.

Flutter ist das UI-Toolkit von Google, mit dem Sie mit einer einzigen Codebasis ansprechende, nativ kompilierte Apps für Mobilgeräte, Web und Desktop erstellen können. In diesem Codelab beginnen Sie mit einer einfachen Musik-App und gestalten sie mithilfe von Material 3 ansprechender und reaktionsschneller für alle Plattformen.

In diesem Codelab entwickeln Sie eine Flutter-App, die sich an alle sechs von Flutter unterstützten Plattformen anpasst: Android, iOS, das Web, Windows, macOS und Linux.

In diesem Codelab erstellen und testen Sie eine einfache Flutter-App.

In diesem Codelab lernen Sie, wie Sie eine Anwendung mit adaptivem Design entwickeln, die mit Material 3 auf allen sechs von Flutter unterstützten Plattformen flüssig animiert wird.

In diesem Codelab erstellen Sie mithilfe von FFI ein Flutter-Plug-in für mobile und Desktop-Plattformen, um eine vorhandene native C-Bibliothek zu nutzen.

Hier erfahren Sie, wie Sie Medien und Daten zwischen zwei Browsern streamen. Machen Sie sich mit den wichtigsten APIs und Technologien von WebRTC vertraut. Erfassen und bearbeiten Sie Bilder mit getUserMedia, CSS und dem Canvas-Element. Richten Sie eine Peer-Verbindung ein und tauschen Sie Daten über Datenkanäle direkt zwischen Browsern aus. Abschließend richten Sie mit Node.js einen Signalisierungsserver ein.

In diesem Codelab erfahren Sie, wie Sie einer Flutter-Anwendung das Plug-in „webview_flutter“ hinzufügen.

Mit Forge2D, einer 2D-Physik-Engine, lernst du in Flutter- und Flame-Spielen die Spielmechanik.

In diesem Codelab erfährst du, wie du Flame verwendest, eine auf Flutter basierende Spiel-Engine. Sie lernen die Komponenten und Effekte von Flame kennen und erfahren, wie Sie Flame in das State Management von Flutter einbinden.

Hier erfahren Sie, wie Sie Flutter-Benutzeroberflächen mit Animationen, Shadern und Partikeleffekten erstellen, die auf allen sechs Plattformen von Flutter funktionieren.

Hier erfahren Sie, wie Sie eine rechenintensive Flutter-App entwickeln und dabei die fließende Interaktivität von Flutter aufrechterhalten.

Machen Sie sich mit den Grundlagen der Verwendung von Material Components vertraut, indem Sie eine Anmeldeseite für eine einfache Flutter-App erstellen.

Eine einfache Anwendung mit Kernkomponenten erstellen, um die Grundlagen der Verwendung von Materialkomponenten im Web zu erlernen.

Mit den Materialkomponenten für das Web können Sie Ihr Produkt leicht von anderen abheben und Ihre Marke im Design präsentieren.

Mit der Material Flutter-Bibliothek kannst du dein Produkt ganz einfach von anderen abheben und deine Marke durch ein Design zum Ausdruck bringen.

In diesem Codelab erfahren Sie, wie Sie ein vorhandenes Python ML-Modell im SavedModel-Format in das TensorFlow.js-Format konvertieren, damit es in einem Webbrowser ausgeführt werden kann. Außerdem lernen Sie, wie Sie häufige Probleme beheben, die bei Konvertierungen auftreten können.

In diesem Codelab erfahren Sie, wie Sie Ihrer Webanwendung Push-Benachrichtigungen hinzufügen.

This codelab is intended to help you understand how to create your first 3D Map using Photorealistic 3D Maps in Maps JavaScript. You will learn the basics about loading the right components of the Maps Javascript API, displaying your first 3D Map and

This tutorial explores how to add and style 3D markers in your application. You'll also learn how to animate your application by flying to and around specific locations. This tutorial builds on the concepts covered in the first codelab. If you

In this codelab, you learn everything that you need to get started with the vis.gl/react-google-map library for the Google Maps JavaScript API, which lets you add a Google map to a React app. You learn how to get set up, load the Maps JavaScript API,

In this codelab we’ll build together a real-time web application with Firebase and Angular.

Progressive Web Applications (PWAs) are a type of application software delivered through the web, built using common web technologies including HTML, CSS, and JavaScript. They are intended to work on any platform that uses a standards-compliant

Maps can be a very powerful tool when visualizing the patterns in a dataset that are related to location in some way. This relation could be the name of a place, a specific latitude and longitude value, or the name of an area that has a specific

Imagine you have many places to put on a map and you want users to be able to see where these places are and identify which place they want to visit. Common examples of this include: In this codelab, you will create a locator that draws from a live

Learn how to create a simple website that classifies images with TensorFlow Serving.

Learn how to build Perspective API.

Learn to build a location-based web app using the Maps JavaScript API and PLaces Library to perform a Nearby Search.

Learn how to train a comment-spam detection model with TensorFlow Lite Model Maker.

Learn how to retrain the spam-detection model to detect specific types of spam with TensorFlow Lite Model Maker.

In this codelab, you’ll build an image-slider,, which works independently of Angular framework, can be imported in any framework, and is very easy to integrate.

In this lab, you'll take an existing web application and make it work offline. This is the first in a series of companion codelabs for the Progressive Web App workshop. There are seven more codelabs in this series. Start by either cloning or

Whether you are embarking on a road trip, planning your daily commute, or navigating a bustling city, getting from point A to point B is more than just knowing where you want to go. A reliable route generation tool is essential. With Google Maps

In this codelab, you learn everything you need to get started using Google Maps Platform for the web. You learn all the basics, from getting set up to loading the Maps JavaScript API, displaying your first map, working with markers and marker

Learn how to build an app to get video and take snapshots with your webcam, and share them peer-to-peer with WebRTC.

In this codelab, you’ll add second-factor authentication to your site or web app with a security key.

In this lab, you'll take website with an existing service worker and convert it to using Workbox. This is the second in a series of companion codelabs for the Progressive Web App workshop. The previous codelab was Going Offline. There are six more

In this lab, you'll take an existing Progressive Web App that you have deployed and wrap it in an app for distribution in Google's Play store. Bubblewrap is a tool to make wrapping your Progressive Web App into an Android App Bundle as easy as

Learn how to build a Flutter app that classifies texts and displays the results in its UI.

In this codelab, you’ll learn how to build a simple web page that has commenting ability akin to a blog post article and integrate it with a pre trained machine learning model to detect comment spam posts, enabling you to filter these out before they even get stored in any backend database, reducing server processing time and cost.

This codelab teaches you how to use the WebGL-powered features of the Maps JavaScript API to control and render on the vector map in three dimensions. This codelab assumes you have intermediate knowledge of JavaScript and the Maps JavaScript API. To

One of the most common features of a website is displaying a Google map that highlights one or more locations for a business, establishment, or some other entity with a physical presence. How these maps are implemented can vary greatly depending on

This codelab teaches you how to create a high-volume geospatial data visualization using the Maps JavaScript API and deck.gl, an open-source, WebGL-accelerated, data-visualization framework. If you haven't used Google Maps Platform before, follow

Learn how to build a website with a simple reauthentication functionality that uses a fingerprint sensor.

In this codelab you’ll learn how to use Model Maker to retrain a comment spam model to account for edge cases the pre-trained model could not handle, and then re-deploy the new model to the web application.

Learn how to secure your online information, identify phishing attacks, enable Advanced Protections for Google Accounts, and stay safe on social media.

In this codelab, you’ll build a GitHub client in Flutter for desktop.

Learn how to create a theme and brand that’s accessible and personalized with Material 3.

Learn how to use adaptive design principles in Material Design to achieve consistency across screen sizes. In this codelab, you take a mobile design to tablet format, and learn about the responsive grid, adaptive composition patterns, and the correct components.