{"id":118202,"date":"2023-01-25T08:00:00","date_gmt":"2023-01-25T11:00:00","guid":{"rendered":"https:\/\/fluency.io\/br\/blog\/?p=14811"},"modified":"2023-08-01T15:07:18","modified_gmt":"2023-08-01T18:07:18","slug":"jetpack-compose","status":"publish","type":"post","link":"https:\/\/homolog.fluency.io\/br\/blog\/jetpack-compose\/","title":{"rendered":"Entendendo Jetpack Compose: uma introdu\u00e7\u00e3o ao framework de UI da Google"},"content":{"rendered":"\n<p>No mundo do desenvolvimento de aplicativos Android, o Jetpack Compose \u00e9 uma ferramenta cada vez mais popular que permite aos desenvolvedores <a href=\"https:\/\/fluency.io\/br\/blog\/guia-ui-designer\/?utm_source=blog\" target=\"_blank\" rel=\"noreferrer noopener\">criar interfaces de usu\u00e1rio<\/a> de forma declarativa e altamente personaliz\u00e1vel. Com suporte a programa\u00e7\u00e3o reativa, o Jetpack Compose garante que suas interfaces do usu\u00e1rio estejam sincronizadas com os dados em tempo real.<\/p>\n\n\n\n<p>Este post de blog tem como objetivo mostrar como os desenvolvedores podem criar componentes de interface personalizados e reutiliz\u00e1veis com o Jetpack Compose. Vamos explorar algumas t\u00e9cnicas e conceitos-chave, incluindo como criar componentes personalizados, como compor v\u00e1rios componentes juntos e como reutilizar componentes em diferentes partes do aplicativo.&nbsp;<\/p>\n\n\n\n<p>Ao final desse post, os leitores dever\u00e3o ter uma compreens\u00e3o s\u00f3lida de como otimizar sua produtividade e manter a consist\u00eancia de suas interfaces de usu\u00e1rio com o Jetpack Compose.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\"><strong>O que \u00e9 Jetpack Compose?<\/strong><\/h2>\n\n\n\n<p><a href=\"https:\/\/github.com\/android\/compose-samples\" target=\"_blank\" rel=\"noreferrer noopener\">Jetpack Compose<\/a> \u00e9 um <a href=\"https:\/\/fluency.io\/br\/blog\/frameworks-python\/?utm_source=blog\" target=\"_blank\" rel=\"noreferrer noopener\">framework<\/a> de desenvolvimento de interface do usu\u00e1rio para aplicativos Android desenvolvido pela Google. Ele permite que os desenvolvedores criem interfaces do usu\u00e1rio de forma declarativa, usando uma linguagem de programa\u00e7\u00e3o Kotlin. Isso significa que, em vez de escrever c\u00f3digo para criar elementos de interface, os desenvolvedores descrevem como eles devem ser exibidos.<\/p>\n\n\n\n<p>\u00c9 constru\u00eddo com base no modelo de programa\u00e7\u00e3o reativa, o que significa que as interfaces s\u00e3o atualizadas automaticamente quando os dados subjacentes mudam. Isso pode ajudar a garantir que a interface do usu\u00e1rio esteja sempre sincronizada com os dados em tempo real.<\/p>\n\n\n\n<p>Al\u00e9m disso, o Jetpack Compose \u00e9 projetado para ser altamente personaliz\u00e1vel, permitindo que os desenvolvedores criem componentes de interface personalizados e os reutilizem em v\u00e1rias partes do aplicativo. Ele tamb\u00e9m oferece suporte ao desenvolvimento de aplicativos para dispositivos com diferentes tamanhos e orienta\u00e7\u00f5es de tela, al\u00e9m de fornecer ferramentas para ajudar a otimizar o desempenho do aplicativo.<\/p>\n\n\n\n<p>Em resumo, o Jetpack Compose \u00e9 uma ferramenta de desenvolvimento de interface do usu\u00e1rio para aplicativos Android que permite criar interfaces de forma declarativa, baseadas em programa\u00e7\u00e3o reativa, altamente personaliz\u00e1veis e otimizadas para desempenho.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\"><strong>Quais os recursos mais importantes do Jetpack Compose?<\/strong><\/h3>\n\n\n\n<p>O Jetpack Compose oferece uma variedade de recursos para ajudar os <a href=\"https:\/\/fluency.io\/br\/blog\/desenvolvedor-de-aplicativos\/?utm_source=blog\" target=\"_blank\" rel=\"noreferrer noopener\">desenvolvedores<\/a> a criar interfaces de usu\u00e1rio para aplicativos Android de forma eficiente e altamente personaliz\u00e1vel. Alguns dos recursos mais importantes incluem:<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li><strong>Programa\u00e7\u00e3o reativa:<\/strong> permite que os desenvolvedores criem interfaces do usu\u00e1rio baseadas em programa\u00e7\u00e3o reativa, o que significa que as interfaces s\u00e3o atualizadas automaticamente quando os dados subjacentes mudam. Isso ajuda a garantir que a interface do usu\u00e1rio esteja sempre sincronizada com os dados em tempo real.<\/li>\n<\/ul>\n\n\n\n<ul class=\"wp-block-list\">\n<li><strong>Cria\u00e7\u00e3o de componentes personalizados: <\/strong>permite que os desenvolvedores criem componentes de interface personalizados e os reutilizem em v\u00e1rias partes do aplicativo. Isso pode ajudar a garantir a consist\u00eancia visual e aumentar a efici\u00eancia do desenvolvimento.<\/li>\n<\/ul>\n\n\n\n<ul class=\"wp-block-list\">\n<li><strong>Suporte ao desenvolvimento de aplicativos para dispositivos com diferentes tamanhos e orienta\u00e7\u00f5es de tela:<\/strong> fornece ferramentas para ajudar a desenvolver aplicativos que se adaptam automaticamente \u00e0s diferentes configura\u00e7\u00f5es de tela.<\/li>\n<\/ul>\n\n\n\n<ul class=\"wp-block-list\">\n<li><strong>Otimiza\u00e7\u00e3o de desempenho: <\/strong>o Jetpack Compose fornece ferramentas para ajudar a otimizar o desempenho do aplicativo, incluindo o uso eficiente de recursos do dispositivo e a detec\u00e7\u00e3o de problemas de desempenho.<\/li>\n<\/ul>\n\n\n\n<ul class=\"wp-block-list\">\n<li><strong>Anima\u00e7\u00e3o: <\/strong>proporciona recursos para anima\u00e7\u00e3o, incluindo anima\u00e7\u00f5es baseadas em estado, anima\u00e7\u00f5es personalizadas e anima\u00e7\u00f5es como transi\u00e7\u00f5es de navega\u00e7\u00e3o, permitindo que os desenvolvedores criem interfaces mais atraentes e intuitivas para os usu\u00e1rios.<\/li>\n<\/ul>\n\n\n\n<h3 class=\"wp-block-heading\"><strong>Como os recursos o Jetpack Compose podem tornar interfaces mais atraentes&nbsp;<\/strong><\/h3>\n\n\n\n<p>O recurso de anima\u00e7\u00e3o no Jetpack Compose \u00e9 uma maneira poderosa de tornar suas interfaces mais atraentes e interativas para os usu\u00e1rios. Ele permite que os desenvolvedores criem anima\u00e7\u00f5es suaves e naturais que ajudam a guiar a aten\u00e7\u00e3o do usu\u00e1rio para elementos importantes na tela, e tamb\u00e9m fornecem feedback visuais para a\u00e7\u00f5es do usu\u00e1rio.<\/p>\n\n\n\n<p>O Jetpack Compose fornece uma variedade de ferramentas para ajudar a criar anima\u00e7\u00f5es, incluindo o &#8220;AnimatedVisibility&#8221;, que permite que os desenvolvedores especifiquem uma anima\u00e7\u00e3o ao mostrar ou ocultar um elemento, e o &#8220;AnimatedValue&#8221;, que permite animar valores num\u00e9ricos, como a posi\u00e7\u00e3o ou tamanho de um elemento.&nbsp;<\/p>\n\n\n\n<p>Al\u00e9m disso, o Jetpack Compose tamb\u00e9m suporta a cria\u00e7\u00e3o de anima\u00e7\u00f5es personalizadas, permitindo que os desenvolvedores usem a biblioteca de anima\u00e7\u00e3o do Android para criar anima\u00e7\u00f5es mais complexas.<\/p>\n\n\n\n<p>Outra vantagem \u00e9 que com o Jetpack Compose \u00e9 poss\u00edvel criar anima\u00e7\u00f5es baseadas em estado, o que significa que as anima\u00e7\u00f5es podem ser automaticamente atualizadas quando o estado do aplicativo muda. Isso \u00e9 poss\u00edvel gra\u00e7as ao recurso de programa\u00e7\u00e3o reativa do Jetpack Compose, onde as interfaces s\u00e3o atualizadas automaticamente quando os dados subjacentes mudam. Isso pode ajudar a garantir que a anima\u00e7\u00e3o esteja sempre sincronizada com a l\u00f3gica do aplicativo e evitar erros.<\/p>\n\n\n\n<p>Al\u00e9m disso, o Jetpack Compose tamb\u00e9m permite que os desenvolvedores usem anima\u00e7\u00f5es como transi\u00e7\u00f5es entre telas ou estados de navega\u00e7\u00e3o, permitindo que os usu\u00e1rios tenham uma experi\u00eancia de fluxo de trabalho mais suave e consistente.<\/p>\n\n\n\n<p>Em resumo, o recurso de anima\u00e7\u00e3o no Jetpack Compose \u00e9 uma ferramenta poderosa para tornar suas interfaces mais atraentes e interativas para os usu\u00e1rios. Ele fornece uma variedade de ferramentas para ajudar a criar anima\u00e7\u00f5es, incluindo anima\u00e7\u00f5es baseadas em estado, anima\u00e7\u00f5es personalizadas e anima\u00e7\u00f5es como transi\u00e7\u00f5es de navega\u00e7\u00e3o, permitindo que os desenvolvedores criem interfaces mais atraentes e intuitivas para os usu\u00e1rios.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\"><strong>Como criar um projeto com o Jetpack Compose<\/strong><\/h2>\n\n\n\n<p>Abaixo, criamos um passo a passo sobre como criar um projeto do zero com o Jetpack Compose. Confira!<\/p>\n\n\n\n<p>1. Inicie o Android Studio e crie um novo projeto. Selecione &#8220;Empty Activity&#8221; como o modelo de in\u00edcio.<\/p>\n\n\n\n<p>2. Adicione as seguintes depend\u00eancias ao arquivo build.gradle do seu m\u00f3dulo:<\/p>\n\n\n\n<figure class=\"wp-block-image size-full\"><img decoding=\"async\" width=\"795\" height=\"117\" src=\"https:\/\/fluency.io\/br\/blog\/wp-content\/uploads\/2023\/01\/Como-criar-um-projeto-com-o-Jetpack-Compose-build-gradle.png\" alt=\"Como criar um projeto com o Jetpack Compose\" class=\"wp-image-14812\" srcset=\"https:\/\/homolog.fluency.io\/br\/wp-content\/uploads\/sites\/3\/2023\/01\/Como-criar-um-projeto-com-o-Jetpack-Compose-build-gradle.png 795w, https:\/\/homolog.fluency.io\/br\/wp-content\/uploads\/sites\/3\/2023\/01\/Como-criar-um-projeto-com-o-Jetpack-Compose-build-gradle-768x113.png 768w, https:\/\/homolog.fluency.io\/br\/wp-content\/uploads\/sites\/3\/2023\/01\/Como-criar-um-projeto-com-o-Jetpack-Compose-build-gradle-515x76.png 515w, https:\/\/homolog.fluency.io\/br\/wp-content\/uploads\/sites\/3\/2023\/01\/Como-criar-um-projeto-com-o-Jetpack-Compose-build-gradle-150x22.png 150w\" sizes=\"(max-width: 795px) 100vw, 795px\" \/><\/figure>\n\n\n\n<p>3. No arquivo MainActivity.kt, adicione o seguinte c\u00f3digo para definir a interface do usu\u00e1rio usando o Jetpack Compose:<\/p>\n\n\n\n<figure class=\"wp-block-image size-full\"><img decoding=\"async\" width=\"810\" height=\"502\" src=\"https:\/\/fluency.io\/br\/blog\/wp-content\/uploads\/2023\/01\/Como-criar-um-projeto-com-o-Jetpack-Compose-mainactivity.png\" alt=\"Como criar um projeto com o Jetpack Compose mainactivity\" class=\"wp-image-14813\" srcset=\"https:\/\/homolog.fluency.io\/br\/wp-content\/uploads\/sites\/3\/2023\/01\/Como-criar-um-projeto-com-o-Jetpack-Compose-mainactivity.png 810w, https:\/\/homolog.fluency.io\/br\/wp-content\/uploads\/sites\/3\/2023\/01\/Como-criar-um-projeto-com-o-Jetpack-Compose-mainactivity-768x476.png 768w, https:\/\/homolog.fluency.io\/br\/wp-content\/uploads\/sites\/3\/2023\/01\/Como-criar-um-projeto-com-o-Jetpack-Compose-mainactivity-678x420.png 678w, https:\/\/homolog.fluency.io\/br\/wp-content\/uploads\/sites\/3\/2023\/01\/Como-criar-um-projeto-com-o-Jetpack-Compose-mainactivity-515x319.png 515w, https:\/\/homolog.fluency.io\/br\/wp-content\/uploads\/sites\/3\/2023\/01\/Como-criar-um-projeto-com-o-Jetpack-Compose-mainactivity-150x93.png 150w\" sizes=\"(max-width: 810px) 100vw, 810px\" \/><\/figure>\n\n\n\n<p>4. Execute o aplicativo e voc\u00ea ver\u00e1 uma tela com um texto &#8220;Hello, Jetpack Compose!&#8221; e um bot\u00e3o &#8220;Clique aqui&#8221;.<\/p>\n\n\n\n<p>Este \u00e9 um exemplo simples de como criar uma interface do usu\u00e1rio com o Jetpack Compose. O c\u00f3digo acima cria um tema Material, um elemento Column com dois elementos filhos: um Text e um Button. O column \u00e9 configurado para ocupar toda a tela, e o bot\u00e3o tem uma l\u00f3gica de click configurada.<\/p>\n\n\n\n<p>\u00c9 importante mencionar que \u00e9 necess\u00e1rio configurar as configura\u00e7\u00f5es de compila\u00e7\u00e3o do Kotlin, adicionar as depend\u00eancias no gradle e ter uma vers\u00e3o compat\u00edvel do Android Studio para usar o Jetpack Compose.<\/p>\n\n\n\n<p><strong>O que \u00e9 preciso saber para aprender Jetpack Compose<\/strong><\/p>\n\n\n\n<p>Para aprender o Jetpack Compose, \u00e9 importante ter conhecimentos b\u00e1sicos em desenvolvimento de aplicativos Android e na linguagem de programa\u00e7\u00e3o Kotlin. Alguns dos conceitos-chave que voc\u00ea deve estar familiarizado incluem:<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li><strong>Programa\u00e7\u00e3o reativa:<\/strong> o Jetpack Compose \u00e9 baseado no modelo de programa\u00e7\u00e3o reativa, ent\u00e3o \u00e9 importante ter uma compreens\u00e3o b\u00e1sica dos conceitos e das vantagens desse modelo.<\/li>\n<\/ul>\n\n\n\n<ul class=\"wp-block-list\">\n<li><strong>Kotlin: <\/strong>o Jetpack Compose \u00e9 escrito em Kotlin, ent\u00e3o \u00e9 importante ter uma compreens\u00e3o b\u00e1sica da sintaxe e das caracter\u00edsticas desse idioma.<\/li>\n<\/ul>\n\n\n\n<ul class=\"wp-block-list\">\n<li><strong>Desenvolvimento de aplicativos Android:<\/strong> \u00e9 importante ter conhecimentos b\u00e1sicos sobre como os <a href=\"https:\/\/fluency.io\/br\/blog\/design-responsivo\/?utm_source=blog\" target=\"_blank\" rel=\"noreferrer noopener\">aplicativos Android<\/a> funcionam, incluindo como eles se comunicam com o sistema operacional e como eles lidam com dispositivos com diferentes tamanhos e orienta\u00e7\u00f5es de tela.<\/li>\n<\/ul>\n\n\n\n<ul class=\"wp-block-list\">\n<li><strong>Conhecimento de biblioteca de interface do usu\u00e1rio Android:<\/strong> \u00e9 importante ter uma compreens\u00e3o de como as bibliotecas de interface do usu\u00e1rio Android, como o AndroidX e o Material Design, funcionam e como elas s\u00e3o usadas para criar interfaces do usu\u00e1rio.<\/li>\n<\/ul>\n\n\n\n<ul class=\"wp-block-list\">\n<li><strong>Familiaridade com o Android Studio<\/strong>: \u00e9 importante saber como usar o Android Studio, incluindo a configura\u00e7\u00e3o do ambiente de desenvolvimento, cria\u00e7\u00e3o de projetos, adi\u00e7\u00e3o de depend\u00eancias e depura\u00e7\u00e3o de aplicativos.<\/li>\n<\/ul>\n\n\n\n<h2 class=\"wp-block-heading\"><strong>Aprenda a criar aplicativos com a Awari<\/strong><\/h2>\n\n\n\n<p>Em resumo, o Jetpack Compose \u00e9 uma ferramenta poderosa para desenvolver aplicativos Android de forma eficiente e altamente personaliz\u00e1vel. Ele permite que os desenvolvedores criem interfaces do usu\u00e1rio baseadas em programa\u00e7\u00e3o reativa, criem componentes personalizados e reutiliz\u00e1veis e otimizem o desempenho do aplicativo.&nbsp;<\/p>\n\n\n\n<p>Al\u00e9m disso, o Jetpack Compose oferece suporte ao desenvolvimento de aplicativos para dispositivos com diferentes tamanhos e orienta\u00e7\u00f5es de tela e permite anima\u00e7\u00f5es para tornar as interfaces mais atraentes e interativas.<\/p>\n\n\n\n<p>Se voc\u00ea est\u00e1 interessado em aprender mais sobre o Jetpack Compose, conhe\u00e7a a <strong>plataforma da Awari<\/strong>! Nossos cursos de <a href=\"https:\/\/fluency.io\/br\/blog\/curso\/front-end\/?utm_source=blog&amp;utm_medium=link&amp;utm_campaign=curso-front-end\" target=\"_blank\" rel=\"noreferrer noopener\">Programa\u00e7\u00e3o<\/a> e <a href=\"https:\/\/fluency.io\/br\/blog\/curso\/ui-design\/?utm_source=blog&amp;utm_medium=link&amp;utm_campaign=curso-ui-design\" target=\"_blank\" rel=\"noreferrer noopener\">UI Design<\/a> s\u00e3o projetados para ajudar os alunos a desenvolver habilidades pr\u00e1ticas e criar aplicativos de alta qualidade.\u00a0<br>Se voc\u00ea est\u00e1 procurando uma forma de desenvolver suas habilidades de programa\u00e7\u00e3o e criar aplicativos incr\u00edveis, a Awari \u00e9 o lugar certo para voc\u00ea! <a href=\"https:\/\/fluency.io\/br\/blog\/?utm_source=blog&amp;utm_medium=link&amp;utm_campaign=home-awari\" target=\"_blank\" rel=\"noreferrer noopener\">Clique aqui!<\/a><\/p>\n","protected":false},"excerpt":{"rendered":"<p>No mundo do desenvolvimento de aplicativos Android, o Jetpack Compose \u00e9 uma ferramenta cada vez mais popular que permite aos desenvolvedores criar interfaces de usu\u00e1rio de forma declarativa e altamente personaliz\u00e1vel. Com suporte a programa\u00e7\u00e3o reativa, o Jetpack Compose garante que suas interfaces do usu\u00e1rio estejam sincronizadas com os dados em tempo real. Este post [&hellip;]<\/p>\n","protected":false},"author":9,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":[186],"meta":{"inline_featured_image":false,"footnotes":""},"categories":[229],"tags":[],"trilha":[],"class_list":["post-118202","post","type-post","status-publish","format-standard","hentry","category-skills","format-artigos"],"acf":[],"yoast_head":"<!-- This site is optimized with the Yoast SEO plugin v26.6 - https:\/\/yoast.com\/wordpress\/plugins\/seo\/ -->\n<title>Entendendo Jetpack Compose: uma introdu\u00e7\u00e3o ao framework de UI da Google - Fluency.io Brasil<\/title>\n<meta name=\"description\" content=\"No mundo do desenvolvimento de aplicativos Android, o Jetpack Compose \u00e9 uma ferramenta cada vez mais popular que permite aos desenvolvedores criar interfac...\" \/>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/homolog.fluency.io\/br\/blog\/jetpack-compose\/\" \/>\n<meta property=\"og:locale\" content=\"pt_BR\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"Entendendo Jetpack Compose: uma introdu\u00e7\u00e3o ao framework de UI da Google - Fluency.io Brasil\" \/>\n<meta property=\"og:description\" content=\"No mundo do desenvolvimento de aplicativos Android, o Jetpack Compose \u00e9 uma ferramenta cada vez mais popular que permite aos desenvolvedores criar interfac...\" \/>\n<meta property=\"og:url\" content=\"https:\/\/homolog.fluency.io\/br\/blog\/jetpack-compose\/\" \/>\n<meta property=\"og:site_name\" content=\"Fluency.io Brasil\" \/>\n<meta property=\"article:published_time\" content=\"2023-01-25T11:00:00+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2023-08-01T18:07:18+00:00\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:label1\" content=\"Escrito por\" \/>\n\t<meta name=\"twitter:data1\" content=\"kaue\" \/>\n\t<meta name=\"twitter:label2\" content=\"Est. tempo de leitura\" \/>\n\t<meta name=\"twitter:data2\" content=\"7 minutos\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\/\/schema.org\",\"@graph\":[{\"@type\":\"WebPage\",\"@id\":\"https:\/\/homolog.fluency.io\/br\/blog\/jetpack-compose\/\",\"url\":\"https:\/\/homolog.fluency.io\/br\/blog\/jetpack-compose\/\",\"name\":\"Entendendo Jetpack Compose: uma introdu\u00e7\u00e3o ao framework de UI da Google - Fluency.io Brasil\",\"isPartOf\":{\"@id\":\"https:\/\/fluency.io\/br\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\/\/homolog.fluency.io\/br\/blog\/jetpack-compose\/#primaryimage\"},\"image\":{\"@id\":\"https:\/\/homolog.fluency.io\/br\/blog\/jetpack-compose\/#primaryimage\"},\"thumbnailUrl\":\"https:\/\/fluency.io\/br\/blog\/wp-content\/uploads\/2023\/01\/Como-criar-um-projeto-com-o-Jetpack-Compose-build-gradle.png\",\"datePublished\":\"2023-01-25T11:00:00+00:00\",\"dateModified\":\"2023-08-01T18:07:18+00:00\",\"author\":{\"@id\":\"https:\/\/fluency.io\/br\/#\/schema\/person\/7b3b2b50ba17b7f2ad0cce0a40bfa00a\"},\"description\":\"No mundo do desenvolvimento de aplicativos Android, o Jetpack Compose \u00e9 uma ferramenta cada vez mais popular que permite aos desenvolvedores criar interfac...\",\"breadcrumb\":{\"@id\":\"https:\/\/homolog.fluency.io\/br\/blog\/jetpack-compose\/#breadcrumb\"},\"inLanguage\":\"pt-BR\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/homolog.fluency.io\/br\/blog\/jetpack-compose\/\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"pt-BR\",\"@id\":\"https:\/\/homolog.fluency.io\/br\/blog\/jetpack-compose\/#primaryimage\",\"url\":\"https:\/\/fluency.io\/br\/blog\/wp-content\/uploads\/2023\/01\/Como-criar-um-projeto-com-o-Jetpack-Compose-build-gradle.png\",\"contentUrl\":\"https:\/\/fluency.io\/br\/blog\/wp-content\/uploads\/2023\/01\/Como-criar-um-projeto-com-o-Jetpack-Compose-build-gradle.png\"},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\/\/homolog.fluency.io\/br\/blog\/jetpack-compose\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"In\u00edcio\",\"item\":\"https:\/\/homolog.fluency.io\/br\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"Entendendo Jetpack Compose: uma introdu\u00e7\u00e3o ao framework de UI da Google\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\/\/fluency.io\/br\/#website\",\"url\":\"https:\/\/fluency.io\/br\/\",\"name\":\"Fluency.io Brasil\",\"description\":\"\",\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\/\/fluency.io\/br\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"pt-BR\"},{\"@type\":\"Person\",\"@id\":\"https:\/\/fluency.io\/br\/#\/schema\/person\/7b3b2b50ba17b7f2ad0cce0a40bfa00a\",\"name\":\"kaue\",\"image\":{\"@type\":\"ImageObject\",\"inLanguage\":\"pt-BR\",\"@id\":\"https:\/\/fluency.io\/br\/#\/schema\/person\/image\/\",\"url\":\"https:\/\/secure.gravatar.com\/avatar\/bdd3958fa53019cfd8f789c0a49a730e7ba40a1d20cb42c9ced7646285842479?s=96&d=mm&r=g\",\"contentUrl\":\"https:\/\/secure.gravatar.com\/avatar\/bdd3958fa53019cfd8f789c0a49a730e7ba40a1d20cb42c9ced7646285842479?s=96&d=mm&r=g\",\"caption\":\"kaue\"},\"url\":\"https:\/\/homolog.fluency.io\/br\/author\/kaue\/\"}]}<\/script>\n<!-- \/ Yoast SEO plugin. -->","yoast_head_json":{"title":"Entendendo Jetpack Compose: uma introdu\u00e7\u00e3o ao framework de UI da Google - Fluency.io Brasil","description":"No mundo do desenvolvimento de aplicativos Android, o Jetpack Compose \u00e9 uma ferramenta cada vez mais popular que permite aos desenvolvedores criar interfac...","robots":{"index":"index","follow":"follow","max-snippet":"max-snippet:-1","max-image-preview":"max-image-preview:large","max-video-preview":"max-video-preview:-1"},"canonical":"https:\/\/homolog.fluency.io\/br\/blog\/jetpack-compose\/","og_locale":"pt_BR","og_type":"article","og_title":"Entendendo Jetpack Compose: uma introdu\u00e7\u00e3o ao framework de UI da Google - Fluency.io Brasil","og_description":"No mundo do desenvolvimento de aplicativos Android, o Jetpack Compose \u00e9 uma ferramenta cada vez mais popular que permite aos desenvolvedores criar interfac...","og_url":"https:\/\/homolog.fluency.io\/br\/blog\/jetpack-compose\/","og_site_name":"Fluency.io Brasil","article_published_time":"2023-01-25T11:00:00+00:00","article_modified_time":"2023-08-01T18:07:18+00:00","twitter_card":"summary_large_image","twitter_misc":{"Escrito por":"kaue","Est. tempo de leitura":"7 minutos"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"WebPage","@id":"https:\/\/homolog.fluency.io\/br\/blog\/jetpack-compose\/","url":"https:\/\/homolog.fluency.io\/br\/blog\/jetpack-compose\/","name":"Entendendo Jetpack Compose: uma introdu\u00e7\u00e3o ao framework de UI da Google - Fluency.io Brasil","isPartOf":{"@id":"https:\/\/fluency.io\/br\/#website"},"primaryImageOfPage":{"@id":"https:\/\/homolog.fluency.io\/br\/blog\/jetpack-compose\/#primaryimage"},"image":{"@id":"https:\/\/homolog.fluency.io\/br\/blog\/jetpack-compose\/#primaryimage"},"thumbnailUrl":"https:\/\/fluency.io\/br\/blog\/wp-content\/uploads\/2023\/01\/Como-criar-um-projeto-com-o-Jetpack-Compose-build-gradle.png","datePublished":"2023-01-25T11:00:00+00:00","dateModified":"2023-08-01T18:07:18+00:00","author":{"@id":"https:\/\/fluency.io\/br\/#\/schema\/person\/7b3b2b50ba17b7f2ad0cce0a40bfa00a"},"description":"No mundo do desenvolvimento de aplicativos Android, o Jetpack Compose \u00e9 uma ferramenta cada vez mais popular que permite aos desenvolvedores criar interfac...","breadcrumb":{"@id":"https:\/\/homolog.fluency.io\/br\/blog\/jetpack-compose\/#breadcrumb"},"inLanguage":"pt-BR","potentialAction":[{"@type":"ReadAction","target":["https:\/\/homolog.fluency.io\/br\/blog\/jetpack-compose\/"]}]},{"@type":"ImageObject","inLanguage":"pt-BR","@id":"https:\/\/homolog.fluency.io\/br\/blog\/jetpack-compose\/#primaryimage","url":"https:\/\/fluency.io\/br\/blog\/wp-content\/uploads\/2023\/01\/Como-criar-um-projeto-com-o-Jetpack-Compose-build-gradle.png","contentUrl":"https:\/\/fluency.io\/br\/blog\/wp-content\/uploads\/2023\/01\/Como-criar-um-projeto-com-o-Jetpack-Compose-build-gradle.png"},{"@type":"BreadcrumbList","@id":"https:\/\/homolog.fluency.io\/br\/blog\/jetpack-compose\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"In\u00edcio","item":"https:\/\/homolog.fluency.io\/br\/"},{"@type":"ListItem","position":2,"name":"Entendendo Jetpack Compose: uma introdu\u00e7\u00e3o ao framework de UI da Google"}]},{"@type":"WebSite","@id":"https:\/\/fluency.io\/br\/#website","url":"https:\/\/fluency.io\/br\/","name":"Fluency.io Brasil","description":"","potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/fluency.io\/br\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"pt-BR"},{"@type":"Person","@id":"https:\/\/fluency.io\/br\/#\/schema\/person\/7b3b2b50ba17b7f2ad0cce0a40bfa00a","name":"kaue","image":{"@type":"ImageObject","inLanguage":"pt-BR","@id":"https:\/\/fluency.io\/br\/#\/schema\/person\/image\/","url":"https:\/\/secure.gravatar.com\/avatar\/bdd3958fa53019cfd8f789c0a49a730e7ba40a1d20cb42c9ced7646285842479?s=96&d=mm&r=g","contentUrl":"https:\/\/secure.gravatar.com\/avatar\/bdd3958fa53019cfd8f789c0a49a730e7ba40a1d20cb42c9ced7646285842479?s=96&d=mm&r=g","caption":"kaue"},"url":"https:\/\/homolog.fluency.io\/br\/author\/kaue\/"}]}},"_links":{"self":[{"href":"https:\/\/homolog.fluency.io\/br\/wp-json\/wp\/v2\/posts\/118202","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/homolog.fluency.io\/br\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/homolog.fluency.io\/br\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/homolog.fluency.io\/br\/wp-json\/wp\/v2\/users\/9"}],"replies":[{"embeddable":true,"href":"https:\/\/homolog.fluency.io\/br\/wp-json\/wp\/v2\/comments?post=118202"}],"version-history":[{"count":0,"href":"https:\/\/homolog.fluency.io\/br\/wp-json\/wp\/v2\/posts\/118202\/revisions"}],"wp:attachment":[{"href":"https:\/\/homolog.fluency.io\/br\/wp-json\/wp\/v2\/media?parent=118202"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/homolog.fluency.io\/br\/wp-json\/wp\/v2\/categories?post=118202"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/homolog.fluency.io\/br\/wp-json\/wp\/v2\/tags?post=118202"},{"taxonomy":"format","embeddable":true,"href":"https:\/\/homolog.fluency.io\/br\/wp-json\/wp\/v2\/format?post=118202"},{"taxonomy":"trilha","embeddable":true,"href":"https:\/\/homolog.fluency.io\/br\/wp-json\/wp\/v2\/trilha?post=118202"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}