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.

Flutter 是 Google 的界面工具包，可用于通过单一代码库为移动设备、网络和桌面设备制作本机编译的精美应用程序。在此 Codelab 中，您将学习如何构建移动端的 Flutter 应用，此应用可使用能生成随机词对的软件包延迟加载无限列表。

Flutter 是 Google 的界面工具包，可用于通过单一代码库为移动设备、网络和桌面设备制作本机编译的精美应用程序。在本 Codelab 中，您将扩展简单的移动应用，以添加交互性和导航，并更改其主题颜色。

了解如何将用 Java 编写的简单示例转换为 Dart 代码，后者简洁、常用且易于学习。

了解 Material Components for Flutter 如何让您的产品与众不同并通过设计表达您的品牌。

利用核心组件构建一个简单的应用，学习使用 Material Components for Flutter 的基础知识。

在此 Codelab 中，您将构建一个独立于 Angular 框架运行、可以导入到任何框架中并且非常易于集成的图像滑块。

学习如何将 Material 用于 Flutter 上的结构和布局。

了解如何在 Material Design 中运用自适应设计原则，以便在不同屏幕尺寸间实现一致性。在此 Codelab 中，您将学习如何将移动设计转换为平板电脑格式，并了解自适应网格、自适应组合模式以及相关组件。

了解如何使用 Material 3 创建符合无障碍标准的个性化主题和品牌。

在此 Codelab 中，您将使用 Flutter 和 Flame 引擎创建一个名称为 Doodle Dash 的平台游戏。

在此 Codelab 中，我将创建一个以 Python 编写的 Document AI API 教程。

了解如何保护自己的在线信息、识别钓鱼式攻击、为 Google 帐号启用高级保护，以及如何在社交媒体上确保安全。

在此 Codelab 的新手入门 Codelab 中，您将学习如何使用 Angular 构建 Web 应用

了解如何使用 TensorFlow Lite Model Maker 训练垃圾评论检测模型。

了解如何构建一个 Flutter 应用，用于对文本进行分类并在界面中显示结果。

在此 Codelab 中，您将学习如何构建具有博文功能的简单评论功能的网页，并将其与预训练的机器学习模型集成，以检测垃圾评论，从而让您在垃圾评论出现之前将其滤除存储在任何后端数据库中，可缩短服务器处理时间和费用。

在此 Codelab 中，您将学习如何使用 Model Maker 重新训练垃圾评论模型，使之涵盖预训练模型无法处理的极端情况，然后将新模型重新部署到 Web 应用。

在此 Codelab 中，您将学习在 Web 平台上开始使用 Google Maps Platform 需知的内容。您将学习所有基础知识，从准备工作到加载 Maps JavaScript API、显示您的第一个地图、使用标记和标记聚类、在地图上绘图，以及处理用户互动等，面面俱到。 在此 Codelab 中，您将构建 Web 应用，用于执行以下操作： 您必须熟悉以下各项内容，才能完成此 Codelab。如果您已经能够熟练使用 Google Maps Platform，请直接跳到该 Codelab！

了解如何创建一个简单的网站，以使用 TensorFlow Serving 对图片进行分类。

此 Codelab 会教您如何使用由 WebGL 提供支持的 Maps JavaScript API 功能控制三维矢量地图并在地图上渲染对象。 此 Codelab 假定您熟悉 JavaScript 和 Maps JavaScript API 方面的知识。如需了解使用 Maps JS API 的基础知识，不妨试着学习 向网站添加地图 (JavaScript) Codelab 。 若要完成下面的启用步骤，您需要启用 Maps JavaScript API 。 如果您还没有已启用结算功能的

了解如何使用 TensorFlow Lite Model Maker 重新训练垃圾内容检测模型，以检测特定类型的垃圾内容。

了解如何构建一个使用指纹传感器实现简单的身份重新验证功能的网站。

在此 Codelab 中，您将了解颜色与无障碍功能、颜色对比度参考值之间的关系，以及 Material Theme Builder 如何创建易于访问的主题并用于轻松检查对比度。

您可以使用“Recorder”面板录制、重放和衡量用户流。 请观看下方视频，大致了解新的“Recorder”面板（预览版功能）。 按照以下步骤打开“Recorder”面板 我们将使用下方的咖啡订购演示页面。结账是购物网站中常见的用户流。 在接下来的部分中，我们将向您演示如何使用“Recorder”面板录制、重放和衡量以下结账流程： 录制完用户流后，您可以点击 Replay 按钮重放用户流。 您在页面上可以看到用户流的重放过程。重放进度也会显示在 Recorder 面板中。 您可以通过配置

对比度设置不当是 Web 无障碍功能方面的头号问题 。现在，就让我们了解一下开发者工具可以如何帮助您了解、发现和修复这些问题。 您将修复网页的低对比度问题。 点击以下链接打开文本对比度低的网页： 然后，在该网页上 打开 Chrome 开发者工具 。 大约每 20 人中就有 1 人 患有色觉缺陷（又称“色盲”，但这个词不太准确）。这种障碍会令人更难分辨不同的颜色，从而放大对比度问题。 例如，作为视力正常的开发者，您可能会觉得网页上的文本看起来没有问题。

在此 Codelab 中，我们将结合使用 Firebase 和 Angular 构建一个实时 Web 应用。

现在，开发者工具可以更好地支持 CSS 网格调试 ！ 如果网页上的某个 HTML 元素应用了 display: grid 或 display: inline-grid ， “元素”面板 会提供诸多选项来帮助您更好地检查网格。 在此 Codelab 中，您将学习如何使用 Chrome 开发者工具调试 CSS 网格。 您将借助 CSS 网格调试工具来解开此谜题。 点击下面的链接，打开谜题网页： 然后，在谜题网页上 打开 Chrome 开发者工具 。 在 元素 面板中 检查谜题

在此 Codelab 中，您将使用桌面版 Flutter 构建一个 GitHub 客户端。

假设您要在地图上展示多个地点，并且希望用户可以看到这些地点的位置并确定他们想要访问的地点。这种情况的常见示例包括： 在此 Codelab 中，您将创建一个定位工具，该定位工具会根据特殊位置的实时数据 Feed 进行绘制，帮助用户找到距离他们的出发地最近的位置。这种全栈定位工具能够处理的地点远远多于 简单的店铺定位工具 ，后者最多只能处理 25 个店铺位置。 此 Codelab 使用开放数据集模拟与大量店铺位置相关的预填充元数据，以便您可以集中精力学习关键的技术概念。 在下文的第 3 步中，为此