CINXE.COM
Google Codelabs
<!doctype html> <html lang="en" dir="ltr"> <head> <meta name="google-signin-client-id" content="721724668570-nbkv1cfusk7kk4eni4pjvepaus73b13t.apps.googleusercontent.com"> <meta name="google-signin-scope" content="profile email https://www.googleapis.com/auth/developerprofiles https://www.googleapis.com/auth/developerprofiles.award"> <meta property="og:site_name" content="Google Codelabs"> <meta property="og:type" content="website"><meta name="theme-color" content="#1a73e8"><meta charset="utf-8"> <meta content="IE=Edge" http-equiv="X-UA-Compatible"> <meta name="viewport" content="width=device-width, initial-scale=1"> <link rel="manifest" href="/_pwa/codelabs/manifest.json" crossorigin="use-credentials"> <link rel="preconnect" href="//www.gstatic.com" crossorigin> <link rel="preconnect" href="//fonts.gstatic.com" crossorigin> <link rel="preconnect" href="//fonts.googleapis.com" crossorigin> <link rel="preconnect" href="//apis.google.com" crossorigin> <link rel="preconnect" href="//www.google-analytics.com" crossorigin><link rel="stylesheet" href="//fonts.googleapis.com/css?family=Google+Sans:400,500|Roboto:400,400italic,500,500italic,700,700italic|Roboto+Mono:400,500,700&display=swap"> <link rel="stylesheet" href="//fonts.googleapis.com/css2?family=Material+Icons&family=Material+Symbols+Outlined&display=block"><link rel="stylesheet" href="https://www.gstatic.com/devrel-devsite/prod/v870e399c64f7c43c99a3043db4b3a74327bb93d0914e84a0c3dba90bbfd67625/codelabs/css/app.css"> <link rel="shortcut icon" href="https://www.gstatic.com/devrel-devsite/prod/v870e399c64f7c43c99a3043db4b3a74327bb93d0914e84a0c3dba90bbfd67625/codelabs/images/favicon.png"> <link rel="apple-touch-icon" href="https://www.gstatic.com/devrel-devsite/prod/v870e399c64f7c43c99a3043db4b3a74327bb93d0914e84a0c3dba90bbfd67625/codelabs/images/touchicon-180.png"><link rel="canonical" href="https://codelabs.developers.google.com/"><link rel="search" type="application/opensearchdescription+xml" title="Google Codelabs" href="https://codelabs.developers.google.com/s/opensearch.xml"> <link rel="alternate" hreflang="en" href="https://codelabs.developers.google.com/" /><link rel="alternate" hreflang="x-default" href="https://codelabs.developers.google.com/" /><link rel="alternate" hreflang="bn" href="https://codelabs.developers.google.com/?hl=bn" /><link rel="alternate" hreflang="zh-Hans" href="https://codelabs.developers.google.com/?hl=zh-cn" /><link rel="alternate" hreflang="fa" href="https://codelabs.developers.google.com/?hl=fa" /><link rel="alternate" hreflang="ru" href="https://codelabs.developers.google.com/?hl=ru" /><title>Google Codelabs</title> <meta property="og:title" content="Google Codelabs"><meta name="description" content="Google for Developers Codelabs provide a guided, tutorial, hands-on coding experience. Most codelabs will step you through the process of building a small application, or adding a new feature to an existing application. They cover a wide range of topics such as Android Wear, Google Compute Engine, ARCore, and Google APIs on iOS."> <meta property="og:description" content="Google for Developers Codelabs provide a guided, tutorial, hands-on coding experience. Most codelabs will step you through the process of building a small application, or adding a new feature to an existing application. They cover a wide range of topics such as Android Wear, Google Compute Engine, ARCore, and Google APIs on iOS."><meta property="og:url" content="https://codelabs.developers.google.com/"><meta property="og:locale" content="en"><script type="application/ld+json"> { "@context": "http://schema.org/", "@type": "Organization", "name": "Google Codelabs", "url": "https://codelabs.developers.google.com/" } </script> <script type="application/ld+json"> { "@context": "http://schema.org", "@type": "WebSite", "name": "Google Codelabs", "url": "https://codelabs.developers.google.com/", "potentialAction": { "@type": "SearchAction", "target": "https://codelabs.developers.google.com/s/results?q={search_term_string}", "query-input": "required name=search_term_string" } } </script> <link rel="stylesheet" href="/extras.css"></head> <body class="" template="landing" theme="codelabs-theme" type="codelab-index" layout="full" pending> <devsite-progress type="indeterminate" id="app-progress"></devsite-progress> <section class="devsite-wrapper"> <devsite-cookie-notification-bar></devsite-cookie-notification-bar><devsite-header role="banner"> <div class="devsite-header--inner nocontent"> <div class="devsite-top-logo-row-wrapper-wrapper"> <div class="devsite-top-logo-row-wrapper"> <div class="devsite-top-logo-row"> <button type="button" id="devsite-hamburger-menu" class="devsite-header-icon-button button-flat material-icons gc-analytics-event" data-category="Site-Wide Custom Events" data-label="Navigation menu button" visually-hidden aria-label="Open menu"> </button> <div class="devsite-product-name-wrapper"> <a href="/" class="devsite-site-logo-link gc-analytics-event" data-category="Site-Wide Custom Events" data-label="Site logo" track-type="globalNav" track-name="googleCodelabs" track-metadata-position="nav" track-metadata-eventDetail="nav"> <picture> <img src="https://www.gstatic.com/devrel-devsite/prod/v870e399c64f7c43c99a3043db4b3a74327bb93d0914e84a0c3dba90bbfd67625/codelabs/images/lockup.svg" class="devsite-site-logo" alt="Google Codelabs"> </picture> </a> <span class="devsite-product-name"> <ul class="devsite-breadcrumb-list" > <li class="devsite-breadcrumb-item "> </li> </ul> </span> </div> <div class="devsite-top-logo-row-middle"> <div class="devsite-header-upper-tabs"> </div> <devsite-search enable-signin enable-search enable-suggestions enable-query-completion project-name="Codelabs" tenant-name="Google Codelabs" > <form class="devsite-search-form" action="https://codelabs.developers.google.com/s/results" method="GET"> <div class="devsite-search-container"> <button type="button" search-open class="devsite-search-button devsite-header-icon-button button-flat material-icons" aria-label="Open search"></button> <div class="devsite-searchbox"> <input aria-activedescendant="" aria-autocomplete="list" aria-label="Search" aria-expanded="false" aria-haspopup="listbox" autocomplete="off" class="devsite-search-field devsite-search-query" name="q" placeholder="Search" role="combobox" type="text" value="" > <div class="devsite-search-image material-icons" aria-hidden="true"> </div> <div class="devsite-search-shortcut-icon-container" aria-hidden="true"> <kbd class="devsite-search-shortcut-icon">/</kbd> </div> </div> </div> </form> <button type="button" search-close class="devsite-search-button devsite-header-icon-button button-flat material-icons" aria-label="Close search"></button> </devsite-search> </div> <devsite-language-selector> <ul role="presentation"> <li role="presentation"> <a role="menuitem" lang="en" >English</a> </li> <li role="presentation"> <a role="menuitem" lang="de" >Deutsch</a> </li> <li role="presentation"> <a role="menuitem" lang="es" >Español</a> </li> <li role="presentation"> <a role="menuitem" lang="fr" >Français</a> </li> <li role="presentation"> <a role="menuitem" lang="id" >Indonesia</a> </li> <li role="presentation"> <a role="menuitem" lang="pt_br" >Português – Brasil</a> </li> <li role="presentation"> <a role="menuitem" lang="ru" >Русский</a> </li> <li role="presentation"> <a role="menuitem" lang="fa" >فارسی</a> </li> <li role="presentation"> <a role="menuitem" lang="bn" >বাংলা</a> </li> <li role="presentation"> <a role="menuitem" lang="zh_cn" >中文 – 简体</a> </li> <li role="presentation"> <a role="menuitem" lang="ja" >日本語</a> </li> <li role="presentation"> <a role="menuitem" lang="ko" >한국어</a> </li> </ul> </devsite-language-selector> <devsite-user enable-profiles fp-auth id="devsite-user"> <span class="button devsite-top-button" aria-hidden="true" visually-hidden>Sign in</span> </devsite-user> </div> </div> </div> <div class="devsite-collapsible-section devsite-header-no-lower-tabs "> <div class="devsite-header-background"> </div> </div> </div> </devsite-header> <devsite-book-nav scrollbars hidden> <div class="devsite-book-nav-filter" hidden> <span class="filter-list-icon material-icons" aria-hidden="true"></span> <input type="text" placeholder="Filter" aria-label="Type to filter" role="searchbox"> <span class="filter-clear-button hidden" data-title="Clear filter" aria-label="Clear filter" role="button" tabindex="0"></span> </div> <nav class="devsite-book-nav devsite-nav nocontent" aria-label="Side menu"> <div class="devsite-mobile-header"> <button type="button" id="devsite-close-nav" class="devsite-header-icon-button button-flat material-icons gc-analytics-event" data-category="Site-Wide Custom Events" data-label="Close navigation" aria-label="Close navigation"> </button> <div class="devsite-product-name-wrapper"> <a href="/" class="devsite-site-logo-link gc-analytics-event" data-category="Site-Wide Custom Events" data-label="Site logo" track-type="globalNav" track-name="googleCodelabs" track-metadata-position="nav" track-metadata-eventDetail="nav"> <picture> <img src="https://www.gstatic.com/devrel-devsite/prod/v870e399c64f7c43c99a3043db4b3a74327bb93d0914e84a0c3dba90bbfd67625/codelabs/images/lockup.svg" class="devsite-site-logo" alt="Google Codelabs"> </picture> </a> <span class="devsite-product-name"> <ul class="devsite-breadcrumb-list" > <li class="devsite-breadcrumb-item "> </li> </ul> </span> </div> </div> <div class="devsite-book-nav-wrapper"> <div class="devsite-mobile-nav-top"> <ul class="devsite-nav-list"> </ul> </div> </div> </nav> </devsite-book-nav> <section id="gc-wrapper"> <main role="main" class="devsite-main-content" > <div class="devsite-sidebar"> <div class="devsite-sidebar-content"> <devsite-toc class="devsite-nav" role="navigation" aria-label="On this page" depth="2" scrollbars disabled></devsite-toc> <devsite-recommendations-sidebar class="nocontent devsite-nav"> </devsite-recommendations-sidebar> </div> </div> <devsite-content> <article class="devsite-article"> <div class="devsite-article-meta nocontent" role="navigation"> <ul class="devsite-breadcrumb-list" > <li class="devsite-breadcrumb-item "> <a href="https://codelabs.developers.google.com/" class="devsite-breadcrumb-link gc-analytics-event" data-category="Site-Wide Custom Events" data-label="Breadcrumbs" data-value="1" track-type="globalNav" track-name="breadcrumb" track-metadata-position="1" track-metadata-eventdetail="Codelabs" > Codelabs </a> </li> </ul> </div> <devsite-toc class="devsite-nav" depth="2" devsite-toc-embedded disabled> </devsite-toc> <div class="devsite-article-body clearfix "> <section class="devsite-landing-row devsite-landing-row-1-up devsite-landing-row-header-centered devsite-landing-row-100" header-position="top" > <div class="devsite-landing-row-inner"> <header class="devsite-landing-row-header" > <div class="devsite-landing-row-header-text"> <div class="devsite-landing-row-description"> <svg width="306" height="56" viewBox="0 0 410 64"> <g fill="none"> <path d="M30.327 31.165l20.311-11.687c4.452-3.06 5.565-9.46 2.504-13.913C50.36 1.67 45.073 0 40.622 2.226L5.286 22.54l25.041 8.626z" fill="#EA4335"/> <path d="M45.63 61.496a9.975 9.975 0 0 0 10.016-10.018c0-3.617-1.947-6.956-5.008-8.626L15.303 22.54c-5.008-2.782-10.851-.835-13.634 3.896C-.835 31.165.556 37.009 5.286 39.79l35.336 20.313c1.39 1.113 3.06 1.392 5.008 1.392z" fill="#4285F4"/> <path d="M80.687 61.496c1.67 0 3.617-.557 5.008-1.392l35.336-20.313-24.763-8.904-20.867 11.965c-4.73 2.783-6.4 8.905-3.617 13.635 1.947 3.34 5.286 5.009 8.903 5.009z" fill="#FBBC04"/> <path d="M115.744 41.183a9.975 9.975 0 0 0 10.017-10.018c0-3.617-1.948-6.956-5.009-8.626L85.695 2.226C81.244-.834 74.845.278 71.784 4.73c-3.06 4.453-1.948 10.853 2.504 13.913.556.279.834.557 1.39.835l35.336 20.313c1.391.835 3.06 1.392 4.73 1.392z" fill="#0F9D58"/> <path d="M165.548 51.478c-3.617-1.948-6.4-4.73-8.347-8.348-1.948-3.617-3.06-7.513-3.06-11.687 0-4.173 1.112-8.347 3.06-11.686 1.947-3.618 4.73-6.4 8.347-8.348 3.617-1.948 7.512-3.061 11.685-3.061 3.34 0 6.4.556 9.182 1.948 2.782 1.113 5.008 3.06 7.234 5.287l-3.895 3.617c-1.67-1.948-3.617-3.617-5.565-4.452-1.948-.835-4.173-1.391-6.956-1.391-3.338 0-6.12.834-8.903 2.226-2.782 1.39-4.73 3.617-6.4 6.4-1.669 2.782-2.503 5.843-2.503 9.46 0 3.618.834 6.679 2.504 9.461 1.669 2.783 3.617 5.009 6.399 6.4 2.782 1.392 5.565 2.226 8.903 2.226 5.287 0 10.017-2.226 13.634-6.678l3.895 3.618c-1.948 2.504-4.452 4.452-7.512 5.843-3.06 1.391-6.4 2.226-10.017 2.226-4.173-.278-8.068-1.113-11.685-3.06zm39.508.557c-2.504-1.392-4.451-3.618-5.842-6.122-1.392-2.504-1.948-5.287-1.948-8.348 0-3.06.556-5.843 1.948-8.348 1.39-2.504 3.338-4.452 5.842-6.121 2.505-1.67 5.287-2.226 8.347-2.226 3.06 0 5.843.834 8.347 2.226 2.504 1.391 4.452 3.617 5.843 6.121 1.391 2.505 1.948 5.287 1.948 8.348 0 3.061-.557 5.844-1.948 8.348-1.391 2.504-3.339 4.452-5.843 6.122-2.504 1.391-5.286 2.226-8.347 2.226-3.06 0-5.842-.557-8.347-2.226zm13.634-3.896c1.67-.835 3.06-2.226 3.895-4.174.835-1.948 1.391-3.895 1.391-6.4 0-2.504-.556-4.452-1.391-6.4-1.113-1.948-2.226-3.339-3.895-4.174-1.67-.834-3.339-1.391-5.287-1.391-1.947 0-3.617.557-5.564 1.391-1.67.835-3.06 2.226-4.174 4.174-1.113 1.948-1.39 3.896-1.39 6.4 0 2.505.556 4.452 1.39 6.4 1.113 1.948 2.226 3.34 4.174 4.174 1.947.835 3.617 1.391 5.564 1.391 1.948 0 3.617-.278 5.287-1.39zm21.424 4.174c-2.226-1.391-4.174-3.34-5.287-5.843-1.39-2.505-1.947-5.287-1.947-8.627 0-3.06.556-6.121 1.947-8.626 1.391-2.504 3.06-4.452 5.287-6.121 2.225-1.392 4.73-2.226 7.79-2.226 2.504 0 4.452.556 6.4 1.67 1.947 1.112 3.338 2.503 4.451 3.895h.278l-.278-4.174V9.183h5.286v44.243h-5.008v-4.73h-.278c-1.113 1.67-2.504 2.782-4.452 3.895-1.947 1.113-4.173 1.67-6.399 1.67-2.782 0-5.286-.557-7.79-1.948zm13.633-4.174c1.67-1.113 2.782-2.504 3.895-4.174.835-1.948 1.391-3.895 1.391-6.4 0-2.504-.556-4.452-1.39-6.4-.836-1.948-2.227-3.339-3.896-4.174-1.67-1.113-3.339-1.391-5.286-1.391a9.607 9.607 0 0 0-5.009 1.391c-1.669 1.113-2.782 2.505-3.895 4.174-.835 1.948-1.391 3.896-1.391 6.4 0 2.226.556 4.452 1.391 6.4.835 1.948 2.226 3.34 3.895 4.174 1.67 1.113 3.34 1.391 5.009 1.391 1.947 0 3.617-.278 5.286-1.39zm22.537 4.174c-2.504-1.391-4.174-3.34-5.565-5.843-1.391-2.505-1.948-5.287-1.948-8.627 0-3.06.557-5.843 1.948-8.347 1.391-2.505 3.06-4.73 5.286-6.122 2.226-1.391 5.009-2.226 8.07-2.226 3.06 0 5.842.556 8.068 1.948 2.226 1.391 3.895 3.339 5.286 5.843 1.113 2.504 1.948 5.287 1.948 8.348v1.67h-25.04c0 2.504.834 4.452 1.668 6.121 1.113 1.67 2.226 2.783 3.896 3.618 1.67.834 3.338 1.113 5.008 1.113 4.173 0 7.234-1.948 9.46-5.566l4.451 2.227c-1.39 2.504-3.06 4.452-5.564 6.121-2.504 1.67-5.287 2.226-8.347 2.226-3.617-.556-6.4-1.113-8.625-2.504zm16.972-18.087c0-1.391-.557-2.504-1.113-3.896-.557-1.39-1.67-2.504-3.06-3.339-1.392-.834-3.061-1.391-5.287-1.391-2.504 0-4.452.835-6.4 2.504-1.669 1.67-2.782 3.618-3.338 6.4h19.198v-.278zm10.573-25.043h5.286v44.243h-5.286zm15.302 43.965a9.026 9.026 0 0 1-4.173-3.618c-1.113-1.67-1.391-3.339-1.391-5.287 0-3.339 1.39-5.843 3.895-7.79 2.504-1.949 5.565-2.783 9.46-2.783 1.947 0 3.617.278 5.286.556 1.67.278 2.782.835 3.617 1.391v-2.226c0-2.226-.835-4.174-2.504-5.565-1.67-1.391-3.617-2.226-6.121-2.226-1.67 0-3.339.278-4.73 1.113-1.391.835-2.782 1.948-3.617 3.06l-3.895-3.06c1.113-1.948 3.06-3.34 5.008-4.452 1.948-1.113 4.73-1.67 7.234-1.67 4.173 0 7.79 1.113 10.016 3.34 2.504 2.226 3.617 5.286 3.617 9.182v20.035h-5.008v-4.452h-.278c-.835 1.391-2.226 2.782-4.174 3.895-1.947 1.113-3.895 1.67-6.12 1.67-2.226 0-4.174-.278-6.122-1.113zm11.686-4.73c1.391-.835 2.782-2.227 3.617-3.618a9.61 9.61 0 0 0 1.391-5.009c-1.113-.556-2.226-1.113-3.617-1.67-1.391-.278-3.06-.556-4.452-.556-2.782 0-5.008.557-6.399 1.67s-2.226 2.782-2.226 4.73c0 1.67.557 3.061 1.948 4.174 1.391 1.113 3.06 1.67 5.008 1.67 1.67 0 3.339-.557 4.73-1.392zm25.597 4.452c-1.947-1.113-3.338-2.505-4.173-3.896h-.278v4.73h-5.009V9.183h5.287V22.26l-.278 4.452h.278c.835-1.67 2.504-3.06 4.173-4.174 1.948-1.113 4.174-1.67 6.4-1.67 2.782 0 5.286.835 7.79 2.227 2.226 1.391 4.174 3.339 5.286 6.121 1.113 2.783 1.948 5.566 1.948 8.626 0 3.34-.556 6.122-1.948 8.627-1.39 2.504-3.06 4.452-5.286 5.843-2.226 1.391-4.73 2.226-7.79 2.226-2.226-.278-4.452-.835-6.4-1.67zm11.13-4.73c1.669-1.114 2.782-2.505 3.895-4.175.834-1.948 1.39-3.895 1.39-6.4 0-2.504-.556-4.452-1.39-6.4-.835-1.948-2.226-3.339-3.895-4.174-1.67-1.113-3.34-1.391-5.009-1.391-1.947 0-3.617.557-5.286 1.391-1.67 1.113-2.782 2.505-3.895 4.174-.835 1.948-1.391 3.896-1.391 6.4 0 2.505.556 4.452 1.39 6.4.835 1.948 2.227 3.34 3.896 4.174 1.67 1.113 3.339 1.391 5.286 1.391 1.67 0 3.34-.278 5.009-1.39zm17.806 3.895c-2.226-1.67-3.895-3.618-4.73-6.122l4.73-2.226c.835 1.948 1.948 3.34 3.617 4.452 1.67 1.113 3.34 1.67 5.009 1.67 1.947 0 3.617-.279 5.008-1.113 1.39-.835 2.226-1.948 2.226-3.34 0-1.39-.557-2.504-1.67-3.06-1.113-.835-2.782-1.392-5.286-1.948l-3.895-1.113c-2.505-.557-4.452-1.67-6.122-3.061-1.669-1.391-2.504-3.34-2.504-5.844 0-1.947.557-3.339 1.67-4.73 1.113-1.391 2.504-2.504 4.451-3.06 1.948-.836 3.896-1.114 5.843-1.114 2.783 0 5.287.557 7.513 1.67 2.225 1.113 3.617 2.782 4.73 5.008l-4.452 2.226c-1.391-2.782-3.895-4.173-7.512-4.173-1.67 0-3.34.278-4.452 1.113-1.391.834-1.948 1.947-1.948 3.06s.557 2.227 1.391 2.783c.835.557 2.226 1.391 4.174 1.67l4.452 1.113c3.06.834 5.564 1.947 6.955 3.617 1.67 1.67 2.226 3.34 2.226 5.565 0 1.948-.556 3.618-1.67 5.009-1.112 1.391-2.503 2.504-4.45 3.34-1.949.834-3.896 1.112-6.4 1.112-3.895-.278-6.678-.835-8.904-2.504z" fill="#676C72"/> </g> </svg> <p> Google Developers Codelabs provide a guided, tutorial, hands-on coding experience. Most codelabs will step you through the process of building a small application, or adding a new feature to an existing application. They cover a wide range of topics such as Android Wear, Google Compute Engine, ARCore, and Google APIs on iOS. </p> <a href="https://github.com/googlecodelabs/tools" class="button button-with-icon button-white" href="#buttons"> Codelab tools on GitHub<span class="material-icons icon-after" aria-hidden="true" translate="no">north_east</span> </a> </div> </div> </header> </div> </section> <section class="devsite-landing-row devsite-landing-row-1-up devsite-landing-row-100" header-position="top" > <div class="devsite-landing-row-inner"> <div class="devsite-landing-row-group"> <div class="devsite-landing-row-item devsite-landing-row-item-no-media" description-position="bottom" > <div class="devsite-landing-row-item-description" > <div class="devsite-landing-row-item-body"> <div class="devsite-landing-row-item-description-content"> <devsite-catalog query="type:codelab" maxresults="1000" sortorder="recency" items-per-page="10" pagination-type="numeric" button-label="Start" all-tenants link-type="both" template="activity"> <input type="text" placeholder="Search our codelabs"> <select name="category" label="Choose a topic" multiple> <option value="Ads">Ads</option> <option value="AiAndMachineLearning">AI & Machine Learning</option> <option value="Analytics">Analytics</option> <option value="AR">Augmented Reality (AR)</option> <option value="Cloud">Cloud</option> <option value="Data">Data</option> <option value="Design">Design</option> <option value="Gaming">Gaming</option> <option value="LocationOrMaps">Location</option> <option value="OpenSource">OpenSource</option> <option value="Search">Search</option> <option value="SmartHomeEcosystem">Smart Home Ecosystem</option> <option value="VR">Virtual Reality (VR)</option> <option value="Web">Web</option> </select> <select name="product" label="Choose a product" multiple> <option value="AdMob">AdMob</option> <option value="GoogleAnalytics">Analytics</option> <option value="Android">Android</option> <option value="AndroidTV">Android TV</option> <option value="Assistant">Assistant</option> <option value="Cast">Cast</option> <option value="CloudKeyManagementService">Cloud Key Management Service (KMS)</option> <option value="CloudRun">Cloud Run</option> <option value="CloudSql">Cloud SQL</option> <option value="Firebase">Firebase</option> <option value="Flutter">Flutter</option> <option value="GkeEnterprise">GKE Enterprise</option> <option value="GoogleCloud">Google Cloud</option> <option value="GoogleMapsPlatform">Google Maps Platform</option> <option value="GoogleMlKit">ML Kit</option> <option value="GoogleWorkspace">Google Workspace</option> <option value="Tensorflow">Tensorflow</option> <option value="WearOS">Wear OS</option> </select> <select name="event" label="Choose an event" multiple> <option value="EuroPython">EuroPython</option> <option value="IO2018">Google I/O 2018</option> <option value="IO2019">Google I/O 2019</option> <option value="IO2021">Google I/O 2021</option> <option value="IO2023">Google I/O 2023</option> <option value="Ndc">NDC Conferences</option> <option value="Serverless-workshop">Pic-a-Daily Serverless Workshop</option> <option value="Pyconfr">PyCon FR</option> <option value="Spring">Spring Boot on Google Cloud</option> <option value="Windows">Windows and .NET on Google Cloud</option> </select> </devsite-catalog> </div> </div> </div> </div> </div> </div> </section> </div> <div class="devsite-floating-action-buttons"> </div> </article> <devsite-notification > </devsite-notification> <div class="devsite-content-data"> <template class="devsite-content-data-template"> [[["Easy to understand","easyToUnderstand","thumb-up"],["Solved my problem","solvedMyProblem","thumb-up"],["Other","otherUp","thumb-up"]],[["Missing the information I need","missingTheInformationINeed","thumb-down"],["Too complicated / too many steps","tooComplicatedTooManySteps","thumb-down"],["Out of date","outOfDate","thumb-down"],["Samples / code issue","samplesCodeIssue","thumb-down"],["Other","otherDown","thumb-down"]],[],[],[]] </template> </div> </devsite-content> </main> <devsite-footer-promos class="devsite-footer"> </devsite-footer-promos> <devsite-footer-linkboxes class="devsite-footer"> <nav class="devsite-footer-linkboxes nocontent" aria-label="Footer links"> <ul class="devsite-footer-linkboxes-list"> <li class="devsite-footer-linkbox "> <h3 class="devsite-footer-linkbox-heading no-link">Connect</h3> <ul class="devsite-footer-linkbox-list"> <li class="devsite-footer-linkbox-item"> <a href="//googledevelopers.blogspot.com" class="devsite-footer-linkbox-link gc-analytics-event" data-category="Site-Wide Custom Events" data-label="Footer Link (index 1)" > Blog </a> </li> <li class="devsite-footer-linkbox-item"> <a href="//www.facebook.com/Google-Developers-967415219957038" class="devsite-footer-linkbox-link gc-analytics-event" data-category="Site-Wide Custom Events" data-label="Footer Link (index 2)" > Facebook </a> </li> <li class="devsite-footer-linkbox-item"> <a href="//medium.com/google-developers" class="devsite-footer-linkbox-link gc-analytics-event" data-category="Site-Wide Custom Events" data-label="Footer Link (index 3)" > Medium </a> </li> <li class="devsite-footer-linkbox-item"> <a href="//twitter.com/googledevs" class="devsite-footer-linkbox-link gc-analytics-event" data-category="Site-Wide Custom Events" data-label="Footer Link (index 4)" > Twitter </a> </li> <li class="devsite-footer-linkbox-item"> <a href="//www.youtube.com/user/GoogleDevelopers" class="devsite-footer-linkbox-link gc-analytics-event" data-category="Site-Wide Custom Events" data-label="Footer Link (index 5)" > YouTube </a> </li> </ul> </li> <li class="devsite-footer-linkbox "> <h3 class="devsite-footer-linkbox-heading no-link">Programs</h3> <ul class="devsite-footer-linkbox-list"> <li class="devsite-footer-linkbox-item"> <a href="//www.womentechmakers.com" class="devsite-footer-linkbox-link gc-analytics-event" data-category="Site-Wide Custom Events" data-label="Footer Link (index 1)" > Women Techmakers </a> </li> <li class="devsite-footer-linkbox-item"> <a href="//developers.google.com/community/gdg" class="devsite-footer-linkbox-link gc-analytics-event" data-category="Site-Wide Custom Events" data-label="Footer Link (index 2)" > Google Developer Groups </a> </li> <li class="devsite-footer-linkbox-item"> <a href="//developers.google.com/community/experts" class="devsite-footer-linkbox-link gc-analytics-event" data-category="Site-Wide Custom Events" data-label="Footer Link (index 3)" > Google Developer Experts </a> </li> <li class="devsite-footer-linkbox-item"> <a href="//developers.google.com/community/accelerators" class="devsite-footer-linkbox-link gc-analytics-event" data-category="Site-Wide Custom Events" data-label="Footer Link (index 4)" > Accelerators </a> </li> <li class="devsite-footer-linkbox-item"> <a href="//developers.google.com/community/gdsc" class="devsite-footer-linkbox-link gc-analytics-event" data-category="Site-Wide Custom Events" data-label="Footer Link (index 5)" > Google Developer Student Clubs </a> </li> </ul> </li> <li class="devsite-footer-linkbox "> <h3 class="devsite-footer-linkbox-heading no-link">Developer consoles</h3> <ul class="devsite-footer-linkbox-list"> <li class="devsite-footer-linkbox-item"> <a href="//console.developers.google.com" class="devsite-footer-linkbox-link gc-analytics-event" data-category="Site-Wide Custom Events" data-label="Footer Link (index 1)" > Google API Console </a> </li> <li class="devsite-footer-linkbox-item"> <a href="//console.cloud.google.com" class="devsite-footer-linkbox-link gc-analytics-event" data-category="Site-Wide Custom Events" data-label="Footer Link (index 2)" > Google Cloud Platform Console </a> </li> <li class="devsite-footer-linkbox-item"> <a href="//play.google.com/apps/publish" class="devsite-footer-linkbox-link gc-analytics-event" data-category="Site-Wide Custom Events" data-label="Footer Link (index 3)" > Google Play Console </a> </li> <li class="devsite-footer-linkbox-item"> <a href="//console.firebase.google.com" class="devsite-footer-linkbox-link gc-analytics-event" data-category="Site-Wide Custom Events" data-label="Footer Link (index 4)" > Firebase Console </a> </li> <li class="devsite-footer-linkbox-item"> <a href="//console.actions.google.com" class="devsite-footer-linkbox-link gc-analytics-event" data-category="Site-Wide Custom Events" data-label="Footer Link (index 5)" > Actions on Google Console </a> </li> <li class="devsite-footer-linkbox-item"> <a href="//cast.google.com/publish" class="devsite-footer-linkbox-link gc-analytics-event" data-category="Site-Wide Custom Events" data-label="Footer Link (index 6)" > Cast SDK Developer Console </a> </li> <li class="devsite-footer-linkbox-item"> <a href="//chrome.google.com/webstore/developer/dashboard" class="devsite-footer-linkbox-link gc-analytics-event" data-category="Site-Wide Custom Events" data-label="Footer Link (index 7)" > Chrome Web Store Dashboard </a> </li> </ul> </li> </ul> </nav> </devsite-footer-linkboxes> <devsite-footer-utility class="devsite-footer"> <div class="devsite-footer-utility nocontent"> <nav class="devsite-footer-sites" aria-label="Other Google Developers websites"> <a href="https://developers.google.com/" class="devsite-footer-sites-logo-link gc-analytics-event" data-category="Site-Wide Custom Events" data-label="Footer Google Developers Link"> <picture> <img class="devsite-footer-sites-logo" src="https://www.gstatic.com/devrel-devsite/prod/v870e399c64f7c43c99a3043db4b3a74327bb93d0914e84a0c3dba90bbfd67625/codelabs/images/lockup-google-for-developers.svg" loading="lazy" alt="Google Developers"> </picture> </a> <ul class="devsite-footer-sites-list"> <li class="devsite-footer-sites-item"> <a href="//developer.android.com" class="devsite-footer-sites-link gc-analytics-event" data-category="Site-Wide Custom Events" data-label="Footer Android Link" > Android </a> </li> <li class="devsite-footer-sites-item"> <a href="//developer.chrome.com/home" class="devsite-footer-sites-link gc-analytics-event" data-category="Site-Wide Custom Events" data-label="Footer Chrome Link" > Chrome </a> </li> <li class="devsite-footer-sites-item"> <a href="//firebase.google.com" class="devsite-footer-sites-link gc-analytics-event" data-category="Site-Wide Custom Events" data-label="Footer Firebase Link" > Firebase </a> </li> <li class="devsite-footer-sites-item"> <a href="//cloud.google.com" class="devsite-footer-sites-link gc-analytics-event" data-category="Site-Wide Custom Events" data-label="Footer Google Cloud Platform Link" > Google Cloud Platform </a> </li> <li class="devsite-footer-sites-item"> <a href="//developers.google.com/products" class="devsite-footer-sites-link gc-analytics-event" data-category="Site-Wide Custom Events" data-label="Footer All products Link" > All products </a> </li> </ul> </nav> <nav class="devsite-footer-utility-links" aria-label="Utility links"> <ul class="devsite-footer-utility-list"> <li class="devsite-footer-utility-item "> <a class="devsite-footer-utility-link gc-analytics-event" href="//developers.google.com/terms/site-terms" data-category="Site-Wide Custom Events" data-label="Footer Terms link" > Terms </a> </li> <li class="devsite-footer-utility-item "> <a class="devsite-footer-utility-link gc-analytics-event" href="//policies.google.com/privacy" data-category="Site-Wide Custom Events" data-label="Footer Privacy link" > Privacy </a> </li> <li class="devsite-footer-utility-item glue-cookie-notification-bar-control"> <a class="devsite-footer-utility-link gc-analytics-event" href="#" data-category="Site-Wide Custom Events" data-label="Footer Manage cookies link" aria-hidden="true" > Manage cookies </a> </li> <li class="devsite-footer-utility-item devsite-footer-utility-button"> <span class="devsite-footer-utility-description">Sign up for the Google Developers newsletter</span> <a class="devsite-footer-utility-link gc-analytics-event" href="//services.google.com/fb/forms/googledevelopersnewsletter/?utm_medium=referral&utm_source=google-products&utm_team=googledevs&utm_campaign=201611-newsletter-launch" data-category="Site-Wide Custom Events" data-label="Footer Subscribe link" > Subscribe </a> </li> </ul> <devsite-language-selector> <ul role="presentation"> <li role="presentation"> <a role="menuitem" lang="en" >English</a> </li> <li role="presentation"> <a role="menuitem" lang="de" >Deutsch</a> </li> <li role="presentation"> <a role="menuitem" lang="es" >Español</a> </li> <li role="presentation"> <a role="menuitem" lang="fr" >Français</a> </li> <li role="presentation"> <a role="menuitem" lang="id" >Indonesia</a> </li> <li role="presentation"> <a role="menuitem" lang="pt_br" >Português – Brasil</a> </li> <li role="presentation"> <a role="menuitem" lang="ru" >Русский</a> </li> <li role="presentation"> <a role="menuitem" lang="fa" >فارسی</a> </li> <li role="presentation"> <a role="menuitem" lang="bn" >বাংলা</a> </li> <li role="presentation"> <a role="menuitem" lang="zh_cn" >中文 – 简体</a> </li> <li role="presentation"> <a role="menuitem" lang="ja" >日本語</a> </li> <li role="presentation"> <a role="menuitem" lang="ko" >한국어</a> </li> </ul> </devsite-language-selector> </nav> </div> </devsite-footer-utility> <devsite-panel></devsite-panel> </section></section> <devsite-sitemask></devsite-sitemask> <devsite-snackbar></devsite-snackbar> <devsite-tooltip ></devsite-tooltip> <devsite-heading-link></devsite-heading-link> <devsite-analytics> <script type="application/json" analytics>[]</script> <script type="application/json" tag-management>{"at": "True", "ga4": [], "ga4p": [], "gtm": [], "parameters": {"internalUser": "False", "language": {"machineTranslated": "False", "requested": "en", "served": "en"}, "pageType": "codelab-index", "projectName": "Codelabs", "signedIn": "False", "tenant": "codelabs", "recommendations": {"sourcePage": "", "sourceType": 0, "sourceRank": 0, "sourceIdenticalDescriptions": 0, "sourceTitleWords": 0, "sourceDescriptionWords": 0, "experiment": ""}, "experiment": {"ids": ""}}}</script> </devsite-analytics> <devsite-badger></devsite-badger> <script nonce="qU2iRp7qM2upM+5d2P2TAKM4bsTjpO"> (function(d,e,v,s,i,t,E){d['GoogleDevelopersObject']=i; t=e.createElement(v);t.async=1;t.src=s;E=e.getElementsByTagName(v)[0]; E.parentNode.insertBefore(t,E);})(window, document, 'script', 'https://www.gstatic.com/devrel-devsite/prod/v870e399c64f7c43c99a3043db4b3a74327bb93d0914e84a0c3dba90bbfd67625/codelabs/js/app_loader.js', '[17,"en",null,"/js/devsite_app_module.js","https://www.gstatic.com/devrel-devsite/prod/v870e399c64f7c43c99a3043db4b3a74327bb93d0914e84a0c3dba90bbfd67625","https://www.gstatic.com/devrel-devsite/prod/v870e399c64f7c43c99a3043db4b3a74327bb93d0914e84a0c3dba90bbfd67625/codelabs","https://codelabs-dot-devsite-v2-prod.appspot.com",1,null,["/_pwa/codelabs/manifest.json","https://www.gstatic.com/devrel-devsite/prod/v870e399c64f7c43c99a3043db4b3a74327bb93d0914e84a0c3dba90bbfd67625/images/video-placeholder.svg","https://www.gstatic.com/devrel-devsite/prod/v870e399c64f7c43c99a3043db4b3a74327bb93d0914e84a0c3dba90bbfd67625/codelabs/images/favicon.png","https://www.gstatic.com/devrel-devsite/prod/v870e399c64f7c43c99a3043db4b3a74327bb93d0914e84a0c3dba90bbfd67625/codelabs/images/lockup.svg","https://fonts.googleapis.com/css?family=Google+Sans:400,500|Roboto:400,400italic,500,500italic,700,700italic|Roboto+Mono:400,500,700&display=swap"],1,null,[1,6,8,12,14,17,21,25,50,52,63,70,75,76,80,87,91,92,93,97,98,100,101,102,103,104,105,107,108,109,110,112,113,116,117,118,120,122,124,125,126,127,129,130,131,132,133,134,135,136,138,140,141,147,148,149,151,152,156,157,158,159,161,163,164,168,169,170,179,180,182,183,186,191,193,196],"AIzaSyAP-jjEJBzmIyKR4F-3XITp8yM9T1gEEI8","AIzaSyB6xiKGDR5O3Ak2okS4rLkauxGUG7XP0hg","codelabs.developers.google.com","AIzaSyAQk0fBONSGUqCNznf6Krs82Ap1-NV6J4o","AIzaSyCCxcqdrZ_7QMeLCRY20bh_SXdAYqy70KY",null,null,null,["Profiles__enable_recognition_badges","Cloud__enable_llm_concierge_chat","MiscFeatureFlags__emergency_css","MiscFeatureFlags__developers_footer_image","Cloud__enable_cloudx_experiment_ids","Cloud__enable_cloudx_ping","Search__enable_ai_eligibility_checks","Profiles__enable_profile_collections","DevPro__enable_cloud_innovators_plus","Search__enable_suggestions_from_borg","Search__enable_dynamic_content_confidential_banner","MiscFeatureFlags__enable_variable_operator","MiscFeatureFlags__developers_footer_dark_image","EngEduTelemetry__enable_engedu_telemetry","MiscFeatureFlags__enable_view_transitions","BookNav__enable_tenant_cache_key","Cloud__enable_cloud_facet_chat","Cloud__enable_cloud_shell_fte_user_flow","TpcFeatures__enable_required_headers","Profiles__require_profile_eligibility_for_signin","Analytics__enable_clearcut_logging","CloudShell__cloud_code_overflow_menu","Search__enable_page_map","TpcFeatures__enable_mirror_tenant_redirects","Profiles__enable_awarding_url","CloudShell__cloud_shell_button","Experiments__reqs_query_experiments","Cloud__enable_cloud_shell","Cloud__enable_legacy_calculator_redirect","MiscFeatureFlags__enable_firebase_utm","Profiles__enable_page_saving","Profiles__enable_dashboard_curated_recommendations","Profiles__enable_developer_profiles_callout","Cloud__enable_free_trial_server_call","MiscFeatureFlags__enable_explain_this_code","Cloud__enable_cloud_dlp_service","MiscFeatureFlags__enable_project_variables","Profiles__enable_completecodelab_endpoint","Profiles__enable_public_developer_profiles","DevPro__enable_developer_subscriptions","Profiles__enable_release_notes_notifications","Profiles__enable_complete_playlist_endpoint","Concierge__enable_pushui"],null,null,"AIzaSyBLEMok-5suZ67qRPzx0qUtbnLmyT_kCVE","https://developerscontentserving-pa.clients6.google.com","AIzaSyCM4QpTRSqP5qI4Dvjt4OAScIN8sOUlO-k","https://developerscontentsearch-pa.clients6.google.com",1,4,null,"https://developerprofiles-pa.clients6.google.com",[17,"codelabs","Google Codelabs","codelabs.developers.google.com",null,"codelabs-dot-devsite-v2-prod.appspot.com",null,null,[null,1,null,null,null,null,null,null,null,null,null,[1],null,null,null,null,null,null,[1],null,null,null,null,[1]],null,[33,null,null,null,null,null,"/images/lockup.svg",null,null,null,null,1,1,null,null,null,null,null,null,null,null,1,null,null,null,null,[]],[],null,null,null,null,null,null,null,null,null,null,null,null,null,null,null,null,null,null,null,null,null,null,null,null,[6,1,14,15,20,22,23,29,32,36],null,[[],[1,1]],[[null,null,null,null,null,null,null,null,null,null,null,null,1]],null,4],null,"pk_live_5170syrHvgGVmSx9sBrnWtA5luvk9BwnVcvIi7HizpwauFG96WedXsuXh790rtij9AmGllqPtMLfhe2RSwD6Pn38V00uBCydV4m"]') </script> <devsite-a11y-announce></devsite-a11y-announce> </body> </html>