Firebase로 Flutter 모바일 앱을 빌드하는 방법을 알아보세요.

이 Codelab에서는 채팅 앱을 빌드하여 웹에서 Firebase 플랫폼을 사용하는 방법을 알아봅니다.

Firebase와 StackBlitz 온라인 편집기를 사용하여 처음부터 웹 앱을 빌드하세요. 기본 HTML 및 JavaScript를 사용하여 Firebase와 통신합니다. Firebase Console을 사용하고 Firebase를 앱에 통합하는 방법을 소개합니다. 폭넓은 사전 지식이나 소프트웨어 설치가 필요하지 않습니다.

차단 함수를 사용하여 다중 인증을 구현하고 맞춤 인증 요구사항을 만드는 방법을 알아봅니다.

이 Codelab에서는 웹 앱에서 Firebase Performance Monitoring을 설정하고 이를 사용하여 최종 사용자에게 앱이 잘 실행되도록 하는 방법을 알아봅니다.

이 Codelab에서는 기존 Firebase 웹 앱을 새로운 모듈식 Firebase JS SDK로 이전하여 사용하지 않는 코드를 트리 셰이크하고 앱을 빠르게 로드합니다.

이 Codelab에서는 Firebase용 Cloud Functions를 사용하여 채팅 앱 사용자에게 알림을 보내는 방법을 알아봅니다.

이 Codelab에서는 코드 몇 줄만으로 Flutter 앱에 Firebase 인증을 추가하는 방법을 알아봅니다.

이미지는 웹페이지를 로드하는 데 평균적으로 필요한 바이트의 60%이상 을 차지합니다. AVIF를 사용하면 이미지를 더 작게 만들고 웹사이트 로드 속도를 높일 수 있습니다. AVIF는 AV1 동영상 비트 스트림에서 파생된 이미지 형식입니다. AVIF는 압축 효율성을 위해 설계되었습니다. AVIF 이미지는 동일하거나 더 나은 품질의 JPEG, PNG, GIF 또는 WebP 이미지보다 훨씬 작습니다. Squoosh는 이미지 압축 웹 앱입니다.

이 Codelab을 실행하려면 몇 가지 기본 요건이 필요합니다. 각 요구사항은 '로컬 테스트' 또는 '집계 서비스'에 필요한지 여부에 따라 적절하게 표시됩니다. 로컬 테스트를 실행하려면 로컬 테스트 도구를 다운로드해야 합니다. 이 도구는 암호화되지 않은 디버그 보고서에서 요약 보고서를 생성합니다. 로컬 테스트 도구는 GitHub의 Lambda JAR 보관 파일 에서 다운로드할 수 있습니다. 이름은

예상 소요 시간: 1~2시간 이 Codelab을 실행하는 방법에는 로컬 테스트 와 집계 서비스 의 두 가지 모드가 있습니다. 로컬 테스트 모드에는 로컬 머신과 Chrome 브라우저가 필요합니다 (Google Cloud 리소스 생성/사용 불가). 집계 서비스 모드를 사용하려면 Google Cloud에 집계 서비스를 완전히 배포해야 합니다. 두 모드 중 하나에서 이 Codelab을 실행하려면 몇 가지 기본 요건이 필요합니다. 각 요구사항은 로컬

이 Codelab에서는 Dart 백엔드 서비스를 사용하여 확인 및 관리되는 Flutter 앱에 인앱 구매를 추가합니다.

이 Codelab에서는 Cloud Firestore를 사용하는 웹 앱을 빌드하는 방법을 알아봅니다.

이 Codelab에서는 Flutter에서 애니메이션을 사용하는 방법을 알아봅니다. 크기와 색상 모두 애니메이션 처리하고, 3D 카드 뒤집기 효과를 추가하고, 애니메이션 패키지의 효과를 활용하고, Android의 뒤로 탐색 예측 동작 지원을 추가하는 위젯을 빌드합니다.

이 Codelab에서는 자동 확장 빌더 에이전트를 포함하여 GKE에 Jenkins 인스턴스를 배포하는 단계를 안내합니다.

입찰 서비스 (B&A) 는 구매자와 판매자가 Protected Audience 입찰을 진행하는 데 필요한 4가지 서비스로 구성됩니다. 구매자 스택: 판매자 스택: 이 Codelab에서는 로컬 환경에서 엔드 투 엔드 설정을 설정하고 테스트하는 방법을 안내합니다. 이 둘러보기는 초기 서비스 빌드 시간을 제외하고 약 1시간 정도 소요될 것으로 예상됩니다. 구매 측 코드 또는 판매 측 코드만 작업할 수도 있지만 로컬 환경에서 엔드 투 엔드

이 Codelab에서는 실시간 상담사 담당자와 봇 담당자 간의 대화 트랜스퍼를 관리하는 방법을 알아봅니다. 마지막에는 에이전트와의 진행 중인 모든 대화를 확인하고 실시간 에이전트로 참여하거나 대화에서 나갈 수 있는 기본 웹 인터페이스가 생성됩니다.

이 Codelab에서는 Places API를 요청하기 전에 Firebase AppCheck 및 reCAPTCHA로 웹 애플리케이션을 검증하는 방법을 알아봅니다.

이 Codelab은 웹용 Google Pay API 101: 기본사항 의 연장선으로, 해당 Codelab에서 작성된 코드를 사용합니다. 이 Codelab을 완료하려면 먼저 해당 Codelab을 완료해야 합니다. ButtonOptions 에 대한 간단한 개요입니다. 자세한 설명은 문서를 참고하세요. 옵션 필요성 값 onClick 필수 JavaScript 이벤트 핸들러의 이름 allowedPaymentMethods 선택사항

이 Codelab에서는 모델 gecko@003과 이 모델의 실제 사용 사례를 알아봅니다.

Procurement DocAI를 사용하여 인보이스를 지능적으로 파싱하는 방법을 알아봅니다.

이 Codelab을 완료하면 작동하는 Google Pay 통합이 포함된 최소한의 실행 가능한 웹사이트가 생성됩니다. 이 프로젝트는 결제 서비스 제공업체에 전송되어 처리될 수 있는 결제 토큰을 가져옵니다. Google Pay 결제 요청에는 요청 객체가 필요합니다. 여기에서 baseGooglePayRequest 로 정의된 객체에는 모든 요청에 대한 최소 공통 설정이 포함되어 있습니다. 요청에 따라 추가 설정이 추가되며 이 Codelab에서 검토할

Flutter로 게임에 음향 효과, 배경 음악, 동적 오디오를 추가하는 방법을 알아보세요.

Flutter로 개발하는 동안 Firebase 에뮬레이터 도구 모음을 사용하는 방법을 설명하는 Codelab입니다. 이 Codelab에서는 인증 및 Firestore 에뮬레이터를 사용하여 에뮬레이터 사용을 보여줍니다.

초보자 친화적인 이 Codelab에서는 Angular v14 독립형 구성요소를 사용하여 샘플 애플리케이션을 빌드하는 방법을 알아봅니다.

사전 빌드된 Material 구성요소를 웹 프레임워크용 구성요소로 확장하는 방법을 알아보세요.

다시 시작하지 않고 개별 머티리얼 구성요소를 기존 웹 코드베이스에 통합하는 방법을 알아봅니다.

Firebase 에뮬레이터 도구 모음으로 웹 앱을 개발하는 방법을 알아봅니다.

웹에서 구조와 레이아웃에 머티리얼을 사용하는 방법을 알아봅니다.

이 실습에서는 Keras 분류기를 빌드하는 방법을 알아봅니다. 꽃을 인식하기 위해 신경망 레이어의 완벽한 조합을 파악하는 대신, 먼저 전이 학습이라는 기법을 사용하여 강력한 선행 학습된 모델을 데이터 세트에 적용합니다. 이 실습에는 신경망에 관한 필요한 이론적 설명이 포함되어 있으며, 딥 러닝을 배우는 개발자가 이 실습을 시작하기에 좋은 출발점이 될 것입니다.

보안 규칙으로 Firestore 데이터를 보호하는 방법 알아보기

이 Codelab에서는 BBC micro:bit 보드와 상호작용하여 5x5 LED 디스플레이에 이미지를 표시하는 웹페이지를 빌드합니다. Web Serial API와 읽기 및 쓰기가 가능하고 스트림을 사용하여 브라우저를 통해 직렬 기기와 통신하는 방법에 대해 알아봅니다.

이 Codelab에서는 Flutter를 지원하는 6가지 플랫폼 모두에서 Material 3으로 유동적인 애니메이션을 적용한 적응형 디자인 애플리케이션을 빌드해 봅니다.

이 Codelab에서는 Angular 프레임워크와 독립적으로 작동하며, 모든 프레임워크에서 가져올 수 있고, 통합하기 매우 쉬운 image-slider를 빌드합니다.

이 Codelab에서는 멋진 이름을 무작위로 생성하는 Flutter 앱을 빌드하는 방법을 알아봅니다.

이 Codelab에서는 명령줄 인터페이스를 통해 사용자에게 DLP API를 소개합니다. 사용자는 프로젝트 코드를 다운로드하고 샘플 디렉터리에 있는 일부 도구와 기본 함수를 검토합니다.

이 Codelab에서는 완전히 새로 생성되었거나 플래그로만 사용할 수 있는 여러 웹 API를 살펴봅니다.

두 브라우저 간에 미디어와 데이터를 스트리밍하는 방법을 알아보세요. WebRTC의 핵심 API 및 기술을 익히세요. getUserMedia, CSS, 캔버스 요소를 사용하여 이미지를 캡처하고 조작할 수 있습니다. 피어 연결을 설정하고 데이터 채널을 사용하여 브라우저 간에 직접 데이터를 교환합니다. 마지막으로 Node.js를 사용하여 신호 서버를 설정합니다.

이 Codelab에서는 BBC micro:bit 보드와 상호작용하여 5x5 LED 디스플레이에 이미지를 표시하는 웹페이지를 빌드합니다. Web Serial API와 읽기 및 쓰기가 가능하고 스트림을 사용하여 브라우저를 통해 직렬 기기와 통신하는 방법에 대해 알아봅니다.

각 사용자에게 해당 시점의 선호도를 반영하는 맞춤형 인터페이스를 받는 적응형 웹 양식을 만드는 방법을 알아봅니다.

이 Codelab에서는 Dataproc Serverless를 시작하는 방법과 다양한 기능 세트에 액세스하는 방법을 비롯하여 Dataproc Serverless에 대한 모든 것을 알아봅니다.

이 Codelab에서는 Spark ML 작업을 Google의 Dataproc 서비스에 제출합니다.

이 Codelab에서는 iOS 또는 Android Flutter 앱용 홈 화면 위젯을 만듭니다. 기본적인 Flutter 뉴스 앱으로 시작해 보겠습니다. 그런 다음 네이티브 프레임워크를 사용하여 위젯 자체의 UI를 생성합니다. 마지막으로, 리소스를 공유하고 위젯과 기본 앱 간에 통신을 설정하는 방법을 알아봅니다.

이 Codelab에서는 Google Compute Engine (GCE)에서 Dataproc을 사용하는 방법을 알아봅니다.

Dialogflow는 웹, Google 어시스턴트, 소셜 미디어, 전화 게이트웨이 등 다양한 통합 기능을 기본적으로 제공합니다. 그러나 챗봇을 모바일 기기에서 사용하려면 맞춤 통합을 만들어야 합니다. 이 실습에서는 Dialogflow Essentials를 Flutter 앱에 통합하는 방법을 알아봅니다.

이 Codelab에서는 & 처음부터 웹 구성 요소를 빌드한 다음 점진적으로 Lit Element로 향상할 수 있습니다.

이 Codelab에서는 Google Cloud Functions를 사용하여 Google Cloud Composer에서 Apache Airflow 워크플로 (DAG)를 트리거하는 방법을 보여줍니다. 여기서 DAG는 BashOperator를 사용하여 간단한 bash 명령어를 실행합니다.

JavaScript만 사용하여 초기 Web Bluetooth API를 통해 LED 불꽃 없는 초를 제어하는 웹 앱을 만듭니다.

이 Codelab에서는 Go로 구현된 Common Expression Language로 표현식을 작성합니다. 변수를 만들고, 논리 연산자 및/또는 연산자를 사용하고, json을 빌드하고, proto를 빌드하고, 표현식을 조정합니다.

이 Codelab에서는 Dataflow를 사용하여 대량의 데이터를 로드하고 읽을 때 Bigtable 쓰기/읽기를 모니터링하는 방법을 알아봅니다.

이 Codelab에서는 선행 학습 모델에서 처리할 수 없는 극단적인 경우를 고려하기 위해 Model Maker를 사용하여 댓글 스팸 모델을 다시 학습시킨 다음 웹 애플리케이션에 새 모델을 다시 배포하는 방법을 알아봅니다.

이 Codelab에서는 TensorFlow.js 선행 학습된 모델 (COCO-SSD) 중 하나를 로드하여 사용하고 이를 사용하여 학습된 일반 객체를 인식하는 방법을 알아봅니다.

2D 물리 엔진인 Forge2D를 사용하여 Flutter 및 Flame 게임에서 게임 메커니즘을 제작하는 방법을 알아보세요.

이 Codelab에서는 Flutter를 기반으로 빌드된 게임 엔진인 Flame을 사용하는 방법을 알아봅니다. Flame의 구성요소 및 효과에 관해 알아보고 Flame을 Flutter의 상태 관리와 통합하는 방법도 알아봅니다.

컴퓨팅 집약적인 Flutter 앱을 빌드하고 Flutter의 유동적인 상호작용을 유지하는 방법을 알아보세요.

핵심 구성요소로 간단한 앱을 빌드하여 웹용 머티리얼 구성요소 사용에 관한 기본사항을 알아봅니다.

웹용 머티리얼 구성요소를 사용해 디자인으로 얼마나 쉽게 제품을 차별화하고 브랜드를 표현할 수 있는지 알아보세요.

이 Codelab에서는 SavedModel 형식의 기존 Python ML 모델을 TensorFlow.js 형식으로 변환하여 웹브라우저에서 실행할 수 있도록 하는 동시에 전환에서 발생할 수 있는 일반적인 문제를 해결하는 방법을 알아봅니다.

이 Codelab에서는 웹 앱에 푸시 알림을 추가하는 방법을 알아봅니다.

Material 3를 사용하여 접근성 높고 개인화된 테마와 브랜드를 만드는 방법을 알아봅니다.

Material Design의 적응형 디자인을 사용하여 여러 화면 크기에서 일관성을 달성하는 방법을 알아봅니다. 이 Codelab에서는 모바일 디자인을 태블릿 형식에 맞게 만들고 반응형 그리드, 적응형 구성 패턴, 올바른 구성요소에 대해 알아봅니다.

이 Codelab에서는 Flutter와 Flame 엔진을 사용하여 플랫폼 게임 Doodle Dash를 만듭니다.

이 Codelab에서는 FFI를 사용하여 모바일 및 데스크톱 플랫폼용 Flutter 플러그인을 빌드하여 기존 네이티브 C 라이브러리를 활용합니다.

간단한 Flutter 앱의 로그인 페이지를 만들어 Material 구성요소 사용에 관한 기본사항을 알아봅니다.

Material을 사용하여 Flutter 앱의 구조와 레이아웃을 만드는 방법을 알아봅니다.

Angular의 새로운 반응 모델인 신호 소개 신호는 보다 세밀한 반응을 위한 고품질 도구를 제공합니다.

이 Codelab에서는 간단한 Flutter 앱을 빌드하고 테스트합니다.

이 Codelab에서는 Flutter가 지원하는 6가지 플랫폼, Android, iOS, 웹, Windows, macOS, Linux에 맞게 조정되는 Flutter 앱을 구성합니다.

디자인을 개선하고 Flutter의 고급 구성요소 배경화면 메뉴를 사용하는 방법을 알아보세요.

Flutter의 머티리얼 구성요소를 사용해 디자인으로 얼마나 쉽게 제품을 차별화하고 브랜드를 표현할 수 있는지 알아보세요.

이 Codelab에서는 Flutter 앱에 배너 광고, 전면 광고, 보상형 광고를 추가하는 방법을 알아봅니다.

애니메이션 패키지의 전환을 사용하여 머티리얼 모션 시스템을 Reply 앱에 빌드하세요.

이 Codelab에서는 Firebase 인프라를 사용해 ML 모델을 배포하여 이를 웹사이트에서 TensorFlow.js를 통해 사용 및 소비하는 방법을 알아봅니다.

이 Codelab에서는 Python으로 Document AI API를 사용하는 가이드를 만드는 데 중점을 두겠습니다.

초보자에게 적합한 Codelab에서는 Angular로 웹 앱을 빌드하는 방법을 알아봅니다.

Flutter는 하나의 코드베이스를 사용해 모바일, 웹, 데스크톱을 대상으로 아름다운 네이티브 컴파일 애플리케이션을 개발하기 위한 Google의 UI 도구 모음입니다. Flutter는 기존 코드와 호환되며 전 세계의 개발자와 조직에서 사용하고 있고, 무료 및 오픈소스로 제공됩니다. 이 Codelab에서는 Flutter 음악 애플리케이션을 지루하지 않고 멋지게 개선합니다. 이를 위해 Codelab에서는 머티리얼 3 에 도입된 도구와 API를

이 Codelab에서는 Firebase 및 Angular를 사용하여 실시간 웹 애플리케이션을 함께 빌드해 보겠습니다.

텍스트를 분류하고 UI에 결과를 표시하는 Flutter 앱을 빌드하는 방법을 알아봅니다.

이 Codelab에서는 선행 학습 모델에서 처리할 수 없는 극단적인 경우를 고려하여 댓글 스팸 모델을 다시 학습시킨 후 웹 애플리케이션에 새 모델을 다시 배포하는 방법을 알아봅니다.

이 Codelab에서는 블로그 게시물 기사와 유사한 댓글 기능이 있는 간단한 웹페이지를 빌드하고 이 방법을 선행 학습된 머신러닝 모델과 통합하여 댓글 스팸 게시물을 감지하기 전에 필터링할 수 있는 방법을 알아봅니다. 백엔드 데이터베이스에 저장하므로 서버 처리 시간과 비용이 절감됩니다.

이 Codelab에서는 웹용 Google Maps Platform을 사용하는 데 필요한 모든 사항을 알아봅니다. 설정하기부터 Maps JavaScript API 로드하기, 첫 지도 표시하기, 마커 및 마커 클러스터링 사용하기, 지도에 그리기, 사용자 상호작용 처리하기에 이르기까지 모든 기본 사항을 학습합니다. 이 Codelab에서는 다음을 수행하는 간단한 웹 앱을 빌드합니다. 이 Codelab을 완료하려면 아래 항목을 숙지해야 합니다. 이미

TensorFlow Serving으로 이미지를 분류하는 간단한 웹사이트를 만드는 방법을 알아보세요.

이 Codelab에서는 색상이 접근성, 색상 대비 가이드라인과 어떤 관련이 있는지와 머티리얼 테마 빌더에서 접근성이 좋은 테마를 만들고 대비를 쉽게 확인하기 위해 사용할 수 있는 방법을 배웁니다.

이 Codelab에서는 데스크톱용 Flutter에서 GitHub 클라이언트를 빌드합니다.

이 Codelab에서는 Flutter 앱에 webview_flutter 플러그인을 추가하는 방법을 알아봅니다.

이 Codelab에서는 가변 글꼴과 그 이점, 가변 글꼴을 사용하여 디자인하는 방법, Google Fonts API 및 CSS를 사용하여 구현하는 방법에 대해 알아봅니다.

Chrome에서 제공하는 최신 API를 사용하여 웹 앱에 즉각적인 탐색 및 원활한 페이지 전환을 추가하는 방법을 알아보세요.

TensorFlow Lite Model Maker를 사용하여 댓글 스팸 감지 모델을 학습시키는 방법을 알아봅니다.

TensorFlow Lite Model Maker를 사용하여 특정 유형의 스팸을 감지하도록 스팸 감지 모델을 다시 학습시키는 방법을 알아봅니다.

Recorder 패널을 사용하여 사용자 플로우를 녹화, 재생, 측정합니다. 아래 동영상에서 새로운 Recorder 패널(기능 미리보기)을 살펴보세요. 다음 단계에 따라 Recorder 패널을 엽니다. 커피 주문을 위한 데모 페이지를 사용하겠습니다. 결제는 쇼핑 웹사이트에서 공통적인 사용자 플로우입니다. 다음 섹션에서 Recorder 패널을 사용해 아래의 결제 흐름을 녹화, 재생, 측정하는 방법을 안내합니다. 사용자 플로우를 녹화한 후

지도에 표시할 장소가 여러 곳 있고 사용자가 이러한 장소를 확인하고 방문할 곳을 식별할 수 있도록 하려 한다고 상상해 보세요. 대표적인 예는 다음과 같습니다. 이 Codelab에서는 특수한 위치의 실시간 데이터 피드에서 가져오는 위치 검색 기능을 만듭니다. 사용자는 이 기능을 통해 출발지에서 가장 가까운 위치를 찾을 수 있습니다. 이 풀 스택 위치 검색 기능은 매장 위치가 25개 이하로 제한되는 단순한 매장 검색 기능 보다 훨씬 많은 수의

이 Codelab에서는 Maps JavaScript API의 WebGL 기반 기능을 사용하여 3차원에서 벡터 지도를 제어하고 렌더링하는 방법을 배울 수 있습니다. 이 Codelab에서는 자바스크립트 및 Maps JavaScript API를 어느 정도 알고 있다고 가정합니다. Maps JS API 사용의 기본 사항을 알아보려면 웹사이트에 지도 추가하기 (자바스크립트) Codelab 을 참고하세요. 아래의 사용 설정 단계에서 Maps

잘못된 대비는 웹에서 가장 큰 접근성 문제 입니다. 이제 DevTools를 사용하여 이러한 문제를 이해하고 발견하며 수정하는 방법을 알아보겠습니다. 웹페이지의 저대비 문제를 수정합니다. 다음 링크를 클릭하여 저대비 텍스트가 있는 페이지를 엽니다. 그런 다음 페이지에서 Chrome DevTools를 엽니다. 20명 중 약 1명 은 색각이상(일반적으로 '색맹'이라고 함)을 앓고 있습니다. 이러한 장애는 색상의 차이를 구별하기 어렵게 만들고 이로

지문 센서를 사용하는 간단한 재인증 기능이 지원되는 웹사이트를 빌드하는 방법을 알아보세요.

이 Codelab에서는 iOS 및 Android에서 고품질 네이티브 환경을 제작하기 위해 Flutter 모바일 앱 SDK를 사용하여 Google 지도 환경을 빌드합니다.

프레임워크에 내장된 도구 세트를 사용해 Angular 앱의 접근성 권장사항을 따르는 방법을 알아봅니다.

이 Codelab에서는 Maps JavaScript API와 오픈소스 WebGL 가속 데이터 시각화 프레임워크인 deck.gl을 사용하여 대용량 지리공간 데이터 시각화를 만드는 방법을 배울 수 있습니다. Google Maps Platform을 처음 사용한다면 다음 단계를 따르세요. 아직 설치하지 않았다면 https://nodejs.org/ 로 이동하여 컴퓨터에 Node.js 런타임을 다운로드하고 설치합니다. Node.js는 이 Codelab의

이제 DevTools를 사용하여 더욱 효과적인 CSS 그리드 디버깅 이 가능합니다. 페이지의 HTML 요소에 display: grid 또는 display: inline-grid 가 적용된 경우 그리드를 더 효과적으로 검사할 수 있도록 요소 패널 에서 다양한 옵션을 제공합니다. 이 Codelab에서는 Chrome DevTools로 CSS 그리드를 디버그하는 방법을 알아봅니다. CSS 그리드 디버깅 도구를 사용하여 다음 퍼즐을 풉니다. 다음 링크를

웹사이트에서 일반적으로 흔하게 볼 수 있는 기능 중 하나는 비즈니스, 시설 등 실제 장소를 보유한 법인의 위치 하나 이상을 강조하는 Google 지도 입니다. 이러한 지도의 구현 방식은 위치의 수, 변경 빈도 등의 요건에 따라 크게 달라질 수 있습니다. 이 Codelab에서는 가장 간단한 사용 사례, 즉 거의 변경되지 않으며 위치 개수가 적은 경우(예: 체인점을 보유하고 있는 비즈니스용 매장 검색 기능)를 살펴봅니다. 이 경우, 어떠한 서버 측

WebXR Device API로 증강 현실 기능을 사용하고 장면 이해를 사용하여 실제 위치에 3D 객체를 배치하는 방법을 알아보세요.

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

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

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

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

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

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

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