圖片占據網頁載入所需位元組的平均值 超過 60% 。使用 AVIF 可縮小圖片大小，加快網站載入速度。 AVIF 是一種源自 AV1 影片位元串流的圖片格式。AVIF 的設計宗旨是提高壓縮效率。 AVIF 圖片的大小比 JPEG、PNG、GIF 或 WebP 圖片小得多，且品質相同或更佳。 Squoosh 是圖片壓縮網頁應用程式，可輕鬆將圖片壓縮為 AVIF 圖片。 接著，Squoosh 會將圖片壓縮為 AVIF 圖片。Squoosh 完成後，右下角會顯示下載按鈕，並顯示 AVIF

如要進行這個程式碼研究室，您必須符合以下幾項必要條件。每項規定都會標示是否適用於「本機測試」或「匯總服務」。 您必須下載本機測試工具才能進行本機測試。這項工具會根據未加密的偵錯報表產生摘要報表。 您可以在 GitHub 中的 Lambda JAR 封存檔 下載本機測試工具。其名稱應為 LocalTestingTool_{version}.jar 。 開啟「 Terminal 」，然後使用 java --version 檢查機器是否已安裝 Java 或 openJDK。 如果尚未安裝，您可以前往

預計完成時間：1 到 2 小時 您可以透過 2 種模式執行這個程式碼研究室： 本機測試 或 匯總服務 。本機測試模式需要本機電腦和 Chrome 瀏覽器 (不需建立/使用 Google Cloud 資源)。匯總服務模式需要在 Google Cloud 上完整部署匯總服務。 無論您在哪種模式下執行本程式碼研究室，都需要符合一些先決條件。每項規定都會標示是否適用於本機測試或匯總服務。 如要使用 Privacy Sandbox API，請務必為 Chrome 和 Android 完成 註冊和認證 。

在這個程式碼研究室中，您會將應用程式內購新增至透過 Dart 後端服務驗證及管理的 Flutter 應用程式。

在本程式碼研究室中，您將學習如何建構使用 Cloud Firestore 的網頁應用程式。

在本程式碼研究室中，我們會說明如何建構即時通訊應用程式，藉此在網路上使用 Firebase 平台。

在本程式碼研究室中，您將瞭解如何在 Flutter 中使用動畫。您將建立小工具，為大小和顏色製作動畫、加入 3D 卡片翻轉效果、使用動畫套件中的特效，以及新增 Android 的預測返回手勢支援功能。

在本程式碼研究室中，您將學習如何建構 Flutter 應用程式，這個應用程式可產生隨機、好聽的名稱。

本程式碼研究室會引導使用者逐步在 GKE 上部署 Jenkins 執行個體，包括自動調整建構代理程式。

在本程式碼研究室中，您將瞭解如何僅使用幾行程式碼，將 Firebase 驗證新增至 Flutter 應用程式。

出價和競價服務 (B&A) 包含 4 項服務，可協助買方和賣方進行 Protected Audience 競價： 買方堆疊： 賣方堆疊： 本程式碼研究室將引導您逐步完成在本機環境中設定及測試端對端設定。這項操作手冊預計需要 1 小時的時間，不含初始服務建構時間。 即使您只處理買方程式碼或賣方程式碼，在本機環境中設定完整工作流程也很有幫助，這樣您就能更瞭解買方和賣方堆疊如何相互運作。設定這兩個堆疊後，日後整合其他方的買方或賣方堆疊時，您就能更有信心。在本機測試服務也可以節省開發成本。

在本程式碼研究室中，您將瞭解如何管理即時服務專員代表與機器人代表之間的對話轉移。最後，系統會提供基本的網頁介面，方便您查看與服務專員的所有對話，以及加入或離開聊天室做為即時服務專員。

在本程式碼研究室中，您將瞭解如何在向 Places API 提出要求前，使用 Firebase App Check 和 reCAPTCHA 驗證網頁應用程式。

本程式碼研究室是「 Google Pay API for Web 101：基本概念 」的延伸課程，因此會使用該程式碼研究室中編寫的程式碼。如要完成本程式碼研究室，請務必先完成該程式碼研究室。 以下簡要介紹 ButtonOptions 。詳情請參閱說明文件 選項 必要性 值 onClick 必填 JavaScript 事件處理常式名稱 allowedPaymentMethods 選用 PaymentMethod[] buttonColor 選用 預設、黑色、白色 buttonLocale 選用

在本程式碼研究室中，您將瞭解如何使用 Firebase 基礎架構部署機器學習模型，以便透過 TensorFlow.js 在網站上使用和使用模型

在本程式碼研究室中，您將瞭解 gecko@003 模型及應用程式的實際用途。

在本程式碼研究室中，您將瞭解可變字型及其優點、如何設計字型，以及如何使用 Google Fonts API 和 CSS 導入這些字型。

在本程式碼研究室中，您將在網頁應用程式中設定 Firebase Performance Monitoring，並瞭解如何使用這項工具確保應用程式為使用者提供良好的運作體驗。

瞭解如何使用 Firebase 建構 Flutter 行動應用程式。

使用 Firebase 和 StackBlitz 線上編輯器，從頭開始建構網頁應用程式。您將使用基本的 HTML 和 JavaScript 與 Firebase 通訊。這篇簡介完整說明瞭如何使用 Firebase 控制台，將 Firebase 整合至應用程式。無需事先瞭解或安裝軟體。

在本程式碼研究室中，您將瞭解如何使用 Cloud Functions for Firebase 傳送通知給即時通訊應用程式的使用者。

您將瞭解如何使用 Procurement DocAI，以智慧方式剖析月結單。

瞭解如何實作多重驗證，並使用封鎖函式建立自訂驗證要求

在本程式碼研究室中，您會將現有的 Firebase 網頁應用程式遷移至新的模組化 Firebase JS SDK，找出未使用的樹狀結構程式碼，讓應用程式快速載入。

完成本程式碼研究室後，您將擁有可運作且整合 Google Pay 的最低可行網站。這個專案會擷取付款權杖，並傳送給付款服務供應商進行處理。 Google Pay 付款要求需要要求物件。此處定義為 baseGooglePayRequest 的物件包含所有要求的最低共同設定。我們會在這個程式碼研究室中，根據提出的要求加入其他設定。 將 Google Pay 設定常數新增至空白的 main.js 檔案： 付款用戶端用於提出付款要求和註冊回呼。在本程式碼研究室中，我們只會提出付款要求。此外，您可以設定

瞭解如何使用 Flutter 在遊戲中加入音效、背景音樂和動態音效。

本程式碼研究室將介紹如何透過 Flutter 在開發期間使用 Firebase 模擬器套件。本程式碼研究室會使用驗證和 Firestore 模擬器來示範模擬器的用法。

在這個適合初學者的程式碼研究室中，您將瞭解如何使用 Angular v14 獨立元件建構範例應用程式

瞭解如何將擴增實境功能與 WebXR Device API 搭配使用，以及運用場景理解技術，將 3D 物體放置在現實世界中。

隆重推出信號，這是 Angular 的全新反應模型。信號可提供更多高品質工具，方便你進行精細的回饋

瞭解如何透過架構內建的工具組，在 Angular 應用程式中遵循無障礙功能的最佳做法。

瞭解如何將預先建立的 Material Design 元件擴充為適合任何網路架構的元件。

在這個程式碼研究室中，您將瞭解如何將 React 概念轉譯為 Lit

瞭解如何將個別 Material 元件整合至現有的網頁程式碼集中，而不必從頭開始。

使用動畫套件中的轉場效果，將 Material 的動態系統加入 Reply 應用程式。

改善 Flutter 應用程式的設計，並在 Flutter 中實作進階背景背景選單元件。

瞭解如何使用 Material Design 建立 Flutter 應用程式結構和版面配置。

瞭解如何使用 Firebase Emulator 套件開發網頁應用程式。

瞭解如何使用 Material You 在網路上設計結構和版面配置。

在本研究室中，您將瞭解如何建構 Keras 分類器。我們不會嘗試找出最佳的類神經網路層組合來識別花朵，而是先使用稱為遷移學習的技術，將強大的預先訓練模型調整至我們的資料集。本研究室包含有關類神經網路的必要理論解釋，也是開發人員學習深度學習的好起點。

瞭解如何使用安全性規則保護 Firestore 資料

在本程式碼研究室中，您將建構一個與 BBC micro:bit 遊戲板互動的網頁，以便在 5x5 LED 顯示螢幕上顯示圖片。您將瞭解 Web Serial API，以及如何使用可讀取、可寫入和轉換串流，透過瀏覽器與序列裝置通訊。

在這個程式碼研究室中，系統會透過指令列介面向使用者介紹 DLP API。使用者必須下載專案程式碼，並檢查範例目錄中的一些工具及其基礎函式。

在本程式碼研究室中，您將使用幾種全新或只有在旗標才能使用的網頁 API。

在本程式碼研究室中，您將建立網頁應用程式，僅開放指定使用者群組存取，並在程式中使用已驗證使用者的身分

瞭解如何在兩個瀏覽器之間串流媒體和資料。熟悉 WebRTC 的核心 API 和技術。使用 getUserMedia、CSS 和 Canvas 元素擷取及操控圖片。使用資料管道設定對等互連連線，並在瀏覽器之間直接交換資料。最後，使用 Node.js 設定信號伺服器。

在本程式碼研究室中，您將建構一個與 BBC micro:bit 遊戲板互動的網頁，以便在 5x5 LED 顯示螢幕上顯示圖片。您將瞭解 Web Serial API，以及如何使用可讀取、可寫入和轉換串流，透過瀏覽器與序列裝置通訊。

瞭解如何使用 Google Chrome 的最新 API，在網頁應用程式中加入即時導覽和流暢的頁面轉場功能。

瞭解如何建立自我調適網頁表單，讓每位使用者都會收到可反映特定時間偏好設定的專屬介面。

在本程式碼研究室中，您將瞭解如何使用(WEB) Measurement Protocol 將外部事件傳送至 GA4。

在這個程式碼研究室中，您將瞭解如何在 Flutter 應用程式中加入橫幅廣告、插頁式廣告和獎勵廣告。

在本程式碼研究室中，您將瞭解如何在較複雜的應用程式中加入 AdMob 內嵌廣告 (橫幅和原生廣告)。

本程式碼研究室將介紹 Accelerated Mobile Pages 的主要概念，以及這些模組與傳統 HTML 文件之間的差異。要達成這個目標，我們必須建立並驗證 AMP 文件。

本程式碼研究室將介紹 Accelerated Mobile Pages 的主要概念，以及這些模組與傳統 HTML 文件之間的差異。要達成這個目標，我們必須建立並驗證 AMP 文件。

在本程式碼研究室中，您將為 iOS 或 Android Flutter 應用程式建立主畫面小工具。我們會從基本的 Flutter 新聞應用程式開始說明。然後，您將使用原生架構為小工具本身建立 UI。最後，您將學到如何分享資源，以及建立小工具與主應用程式之間的通訊。

在這個程式碼研究室中，您將全面瞭解 Dataproc Serverless 的所有資訊，包括如何開始使用及存取豐富的功能集。

在這個程式碼研究室中，您將瞭解如何在 Google Compute Engine (GCE) 中使用 Dataproc。

在本程式碼研究室中，您會將 Spark 機器學習工作提交至 Google 的 Dataproc 服務。

可直接使用的 Dialogflow 整合了許多功能，包括網頁、Google 助理、社群媒體和電話閘道。不過，如果你想在行動裝置上使用聊天機器人，就必須建立自訂整合項目。本研究室將說明如何將 Dialogflow Essentials 整合至 Flutter 應用程式。

使用 Dart 3 的模式、記錄和其他新功能，在 Flutter 中重新建構 UI 設計樣式。

在本程式碼研究室中，您將瞭解 &amp；從頭開始建構 Web 元件，然後逐步強化為 Lit Element。

本程式碼研究室說明如何在 Google Cloud Composer 中使用 Google Cloud Functions，以觸發 Apache Airflow 工作流程 (DAG)。這裡的 DAG 會使用 BashOperator 執行簡單的 bash 指令

憑藉新穎的 Web Bluetooth API，不必像 JavaScript 一樣能建立可控制 LED 無燃蠟燭的網頁應用程式。

在本程式碼研究室中，您將使用以 Go 實作的一般運算語言編寫運算式。您將建立變數、使用邏輯和/或運算子、建構 JSON、建構 proto，以及調整運算式。

在這個程式碼研究室中，您將瞭解如何使用 Dataflow 監控 Bigtable 載入/讀取作業時，如何監控 Bigtable 寫入及讀取大量資料。

在這個程式碼研究室中，您將瞭解如何使用模型製作工具重新訓練垃圾留言模型，以處理預先訓練模型無法處理的邊緣情況，然後將新的模型重新部署到網頁應用程式。

在本程式碼研究室中，您將運用 Flutter 行動應用程式 SDK 打造 Google 地圖，在 iOS、Android 和網路上打造優質的原生體驗。

在本程式碼研究室中，您將瞭解如何載入及使用其中一種 TensorFlow.js 預先訓練模型 (COCO-SSD)，並使用該模型來辨識訓練過的常見物件。

Flutter 是 Google 的 UI 工具包，可讓您透過單一程式碼集，建構美觀且以原生方式編譯的應用程式，適用於行動、網頁和電腦。在本程式碼研究室中，您將從純音樂應用程式開始著手，運用 Material 3 讓所有平台更美觀且回應速度更快。

在這個程式碼研究室中，您將瞭解如何建構採用自動調整式設計的應用程式，在 Flutter 支援的全部六個平台上，透過 Material 3 流暢地以動畫呈現效果。

在本程式碼研究室中，您將建構 Flutter 應用程式，以適應 Flutter 支援的全部六個平台：Android、iOS、網頁、Windows、macOS 和 Linux。

在本程式碼研究室中，您將建構及測試簡單的 Flutter 應用程式。

在本程式碼研究室中，您將使用 FFI 為行動裝置和電腦平台建構 Flutter 外掛程式，藉此利用現有的原生 C 程式庫。

在本程式碼研究室中，您將瞭解如何在 Flutter 應用程式中加入 webview_flutter 外掛程式。

瞭解如何使用 2D 物理引擎 Forge2D，在 Flutter 和 Flame 遊戲中製作遊戲機制。

在本程式碼研究室中，您將瞭解如何使用以 Flutter 為基礎建構的遊戲引擎 Flame。您將瞭解 Flame 的元件和效果，以及如何將 Flame 與 Flutter 的狀態管理整合。

瞭解如何使用動畫、著色器和粒子效果，建構可在 Flutter 六個平台上都能使用的動畫、著色器和粒子效果，建構 Flutter 使用者介面。

瞭解如何建構會耗用大量運算資源的 Flutter 應用程式，並維持 Flutter 流暢的互動。

為簡易 Flutter 應用程式建立登入頁面，瞭解使用 Material 元件的基本概念。

透過使用核心元件建構簡單的應用程式，瞭解使用 Material Components 網頁版的基本概念。

瞭解如何透過 Material Flutter 程式庫輕鬆區分產品，並透過設計來呈現品牌形象。

探索 Material You 元件如何讓你輕鬆區分產品，並透過設計來突顯品牌。

在本程式碼研究室中，您將學習如何使用 mod 格式的現有 Python 機器學習模型並將其轉換為 TensorFlow.js 格式，以便在網路瀏覽器中執行，同時瞭解如何解決轉換期間的常見問題。

在本程式碼研究室中，您將瞭解如何在網頁應用程式中加入推播通知。

瞭解如何運用 Material 3 建立兼顧無障礙設計與個人化的主題和品牌

瞭解如何使用 Material Design 的自訂調整式設計原則，為各種螢幕大小提供一致的使用體驗。在本程式碼研究室中，您會將行動裝置的設計擴展到平板電腦格式，並瞭解回應式格線、自動調整式組合模式以及正確的元件。

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.