<?xml version="1.0" encoding="UTF-8"?>
<rss xmlns:dc="http://purl.org/dc/elements/1.1/" xmlns:content="http://purl.org/rss/1.0/modules/content/"
    xmlns:atom="http://www.w3.org/2005/Atom" xmlns:media="http://search.yahoo.com/mrss/" version="2.0">
    <channel>
        
        <title>
            <![CDATA[ Design para a Web - freeCodeCamp.org ]]>
        </title>
        <description>
            <![CDATA[ Aprenda a codificar - de graça. Tutoriais de programação em Python, JavaScript, Linux e muito mais. ]]>
        </description>
        <link>https://www.freecodecamp.org/portuguese/news/</link>
        <image>
            <url>https://cdn.freecodecamp.org/universal/favicons/favicon.png</url>
            <title>
                <![CDATA[ Design para a Web - freeCodeCamp.org ]]>
            </title>
            <link>https://www.freecodecamp.org/portuguese/news/</link>
        </image>
        <generator>Eleventy</generator>
        <lastBuildDate>Sat, 23 May 2026 19:22:18 +0000</lastBuildDate>
        <atom:link href="https://www.freecodecamp.org/portuguese/news/tag/design-para-a-web/rss.xml" rel="self" type="application/rss+xml" />
        <ttl>60</ttl>
        
            <item>
                <title>
                    <![CDATA[ Uma breve introdução à arquitetura limpa ]]>
                </title>
                <description>
                    <![CDATA[ Escrito por: Daniel Deutsch Em um projeto de código aberto [https://github.com/Keep-Current] para o qual comecei a contribuir, o conceito de "arquitetura limpa" me foi apresentando. No começo, era demais para se entender. Após um pouco de leitura, no entanto, passou a fazer sentido. Acho que será de ajuda a outros ]]>
                </description>
                <link>https://www.freecodecamp.org/portuguese/news/uma-breve-introducao-a-arquitetura-limpa/</link>
                <guid isPermaLink="false">63ed06a758018c06027bf24f</guid>
                
                    <category>
                        <![CDATA[ Design para a Web ]]>
                    </category>
                
                <dc:creator>
                    <![CDATA[ Eduardo de Oliveira Machado ]]>
                </dc:creator>
                <pubDate>Tue, 18 Apr 2023 21:00:00 +0000</pubDate>
                <media:content url="https://www.freecodecamp.org/portuguese/news/content/images/2023/04/0_vIfjwJFIvgfyghgD.jpg" medium="image" />
                <content:encoded>
                    <![CDATA[ <p data-test-label="translation-intro">
        <strong>Artigo original:</strong> <a href="https://www.freecodecamp.org/news/a-quick-introduction-to-clean-architecture-990c014448d2/" target="_blank" rel="noopener noreferrer" data-test-label="original-article-link">A quick introduction to clean architecture</a>
      </p><p>Escrito por: Daniel Deutsch</p><p>Em um <a href="https://github.com/Keep-Current">projeto de código aberto</a> para o qual comecei a contribuir, o conceito de "arquitetura limpa" me foi apresentando.</p><p>No começo, era demais para se entender. Após um pouco de leitura, no entanto, passou a fazer sentido. Acho que será de ajuda a outros se eu escrever meus aprendizados.</p><h3 id="tabela-de-conte-dos"><strong>Tabela de conteúdos</strong></h3><ul><li><a href="https://github.com/Createdd/Writing/blob/master/2018/articles/CleanA.md#visual-representations" rel="noopener">Representações visuais</a></li><li><a href="https://github.com/Createdd/Writing/blob/master/2018/articles/CleanA.md#the-concept---presented-in-bullet-points" rel="noopener">O conceito – apresentado em tópicos</a></li><li><a href="https://github.com/Createdd/Writing/blob/master/2018/articles/CleanA.md#code-example" rel="noopener">Código de exemplo</a></li><li><a href="https://github.com/Createdd/Writing/blob/master/2018/articles/CleanA.md#resources" rel="noopener">Recursos</a></li></ul><h3 id="representa-es-visuais"><strong>Representações visuais</strong></h3><p>Eu acho que sempre é bom começar com um pouco de visualização.</p><p>Aqui estão as imagens mais comuns deste conceito.</p><figure class="kg-card kg-image-card"><img src="https://www.freecodecamp.org/portuguese/news/content/images/2023/04/oVVbTLR5gXHgP8Ehlz1qzRm5LLjX9kv2Zri6.jpg" class="kg-image" alt="oVVbTLR5gXHgP8Ehlz1qzRm5LLjX9kv2Zri6" srcset="https://www.freecodecamp.org/portuguese/news/content/images/size/w600/2023/04/oVVbTLR5gXHgP8Ehlz1qzRm5LLjX9kv2Zri6.jpg 600w, https://www.freecodecamp.org/portuguese/news/content/images/2023/04/oVVbTLR5gXHgP8Ehlz1qzRm5LLjX9kv2Zri6.jpg 772w" sizes="(min-width: 720px) 720px" width="772" height="567" loading="lazy"></figure><figure class="kg-card kg-image-card kg-card-hascaption"><img src="https://www.freecodecamp.org/portuguese/news/content/images/2023/04/YsN6twE3-4Q4OYpgxoModmx29I8zthQ3f0OR.jpg" class="kg-image" alt="YsN6twE3-4Q4OYpgxoModmx29I8zthQ3f0OR" srcset="https://www.freecodecamp.org/portuguese/news/content/images/size/w600/2023/04/YsN6twE3-4Q4OYpgxoModmx29I8zthQ3f0OR.jpg 600w, https://www.freecodecamp.org/portuguese/news/content/images/2023/04/YsN6twE3-4Q4OYpgxoModmx29I8zthQ3f0OR.jpg 772w" sizes="(min-width: 720px) 720px" width="772" height="567" loading="lazy"><figcaption>Fonte e créditos: <a href="https://8thlight.com/blog/uncle-bob/2012/08/13/the-clean-architecture.html" rel="noopener">https://8thlight.com/blog/uncle-bob/2012/08/13/the-clean-architecture.html</a> .<a href="https://www.codingblocks.net/podcast/clean-architecture-make-your-architecture-scream/" rel="noopener">https://www.codingblocks.net/podcast/clean-architecture-make-your-architecture-scream/</a></figcaption></figure><figure class="kg-card kg-image-card"><img src="https://www.freecodecamp.org/portuguese/news/content/images/2023/04/lbexLhWvRfpexSV0lSIWczkHd5KdszeDy9a3.png" class="kg-image" alt="lbexLhWvRfpexSV0lSIWczkHd5KdszeDy9a3" srcset="https://www.freecodecamp.org/portuguese/news/content/images/size/w600/2023/04/lbexLhWvRfpexSV0lSIWczkHd5KdszeDy9a3.png 600w, https://www.freecodecamp.org/portuguese/news/content/images/2023/04/lbexLhWvRfpexSV0lSIWczkHd5KdszeDy9a3.png 800w" sizes="(min-width: 720px) 720px" width="800" height="600" loading="lazy"></figure><figure class="kg-card kg-image-card kg-card-hascaption"><img src="https://www.freecodecamp.org/portuguese/news/content/images/2023/04/YIABVRTHRz58ZiT6W-emBkfNIQUHBelp8t6U.png" class="kg-image" alt="YIABVRTHRz58ZiT6W-emBkfNIQUHBelp8t6U" srcset="https://www.freecodecamp.org/portuguese/news/content/images/size/w600/2023/04/YIABVRTHRz58ZiT6W-emBkfNIQUHBelp8t6U.png 600w, https://www.freecodecamp.org/portuguese/news/content/images/2023/04/YIABVRTHRz58ZiT6W-emBkfNIQUHBelp8t6U.png 800w" sizes="(min-width: 720px) 720px" width="800" height="600" loading="lazy"><figcaption>Fonte e créditos: Mattia Battiston, sob a licença Creative Commons BY 4.0, <a href="https://github.com/mattia-battiston/clean-architecture-example" rel="noopener">https://github.com/mattia-battiston/clean-architecture-example</a></figcaption></figure><figure class="kg-card kg-image-card kg-width-wide kg-card-hascaption"><img src="https://www.freecodecamp.org/portuguese/news/content/images/2023/04/TmSQbZOg5bxn0cRXxIrRUd2zhqeDAXTe8ni5.jpg" class="kg-image" alt="TmSQbZOg5bxn0cRXxIrRUd2zhqeDAXTe8ni5" width="405" height="453" loading="lazy"><figcaption>Fonte e créditos: <a href="https://marconijr.com/posts/clean-architecture-practice/" rel="noopener">https://marconijr.com/posts/clean-architecture-practice/</a></figcaption></figure><h3 id="o-conceito-apresentado-em-t-picos"><strong>O conceito — apresentado em tópicos</strong></h3><p>Estendido da fonte e créditos: <a href="https://github.com/mattia-battiston/clean-architecture-example" rel="noopener">Mattia Battiston, sob a licença Creative Commons BY 4.0</a></p><h4 id="o-valor-que-pode-entregar"><strong>O valor que pode entregar</strong></h4><ul><li>Uma estratégia de teste eficaz que segue a pirâmide de testes</li><li>Frameworks são isolados em módulos individuais. Quando mudarmos de ideia, só precisamos mudar uma coisa em um lugar. A aplicação tem casos de uso em vez de estar vinculada a um sistema de CRUD</li><li>Arquitetura gritante, ou seja, ela grita seu uso pretendido. Ao olhar para a estrutura, você tem uma ideia do que a aplicação faz, em vez de ver detalhes técnicos</li><li>Toda a lógica de negócios está em um caso de uso. Por isso, é fácil de encontrar e não é duplicada em nenhum outro lugar</li><li>É difícil fazer a coisa errada, porque os módulos impõem dependências de compilação. Se você tentar usar algo que não deveria, o app não compilará</li><li>Sempre pronta para ser implantada, deixando as conexões do objeto para o final. Também é possível usar <em>flags</em> de recursos para obter todos os benefícios da integração contínua</li><li>Vários trabalhos em histórias para que pares diferentes possam trabalhar facilmente na mesma história ao mesmo tempo para concluí-la mais rapidamente</li><li>Um bom monolito com casos de uso claros que você pode dividir em microsserviços mais tarde, depois de aprender mais sobre eles</li></ul><h4 id="entidades"><strong>Entidades</strong></h4><ul><li>Representam os objetos do domínio</li><li>Aplicam somente lógica que é aplicável em geral à entidade inteira (exemplo: validar o formato do nome de um host)</li><li>Objetos simples: sem frameworks, sem anotações</li></ul><h4 id="casos-de-uso"><strong>Casos de uso</strong></h4><ul><li>Representam suas ações de negócio: é o que você pode fazer com a aplicação. Espere um caso de uso para cada ação de negócios</li><li>Lógica de negócios pura, código simples (exceto talvez algumas bibliotecas de utilitários)</li><li>O caso de uso não sabe quem o acionou e como os resultados serão apresentados (por exemplo, pode ser em uma página da web, retornado como JSON ou simplesmente registrado e assim por diante).</li><li>Lançam exceções de negócio</li></ul><h4 id="interfaces-adaptadores"><strong>Interfaces/adaptadores</strong></h4><ul><li>Recuperam e armazenam dados de e para várias fontes (banco de dados, dispositivos de rede, sistema de arquivos, terceiros e assim por diante).</li><li>Definem interfaces para os dados que eles precisam para aplicar alguma lógica. Um ou mais provedores de dados implementarão a interface, mas o caso de uso não sabe de onde vêm os dados</li><li>Implementam as interfaces definidas pelo caso de uso</li><li>Existem maneiras de interagir com a aplicação e, geralmente, envolvem um mecanismo de entrega (por exemplo, APIs REST, trabalhos agendados, GUI, outros sistemas)</li><li>Acionam um caso de uso e convertem o resultado em um formato adequado para o mecanismo de entrega</li><li>São o <em>controller</em> em um MVC</li></ul><h4 id="interfaces-externas"><strong>Interfaces externas</strong></h4><ul><li>Use qualquer estrutura que seja mais apropriada (elas serão isoladas aqui, de qualquer maneira)</li></ul><h3 id="c-digo-de-exemplo"><strong>Código de exemplo</strong></h3><p>Veja este exemplo no <a href="https://github.com/Createdd/web-miner/tree/master/webminer" rel="noopener">GitHub</a>.</p><p>Em primeiro lugar, é importante entender que a arquitetura limpa é um conjunto de princípios de organização. Portanto, tudo está aberto a ajustes pessoais, desde que as ideias centrais sejam mantidas intactas. O repositório vinculado é um <em>fork </em>do projeto original que trouxe essa ideia de design de arquitetura para mim. Sinta-se à vontade para conferir o projeto original também, pois ele reflete outras melhorias.</p><p>O diretório <em>webminer </em>é estruturado nas camadas básicas:</p><ol><li>entities</li><li>use_cases</li><li>interfaces_adapters</li><li>external_interfaces</li></ol><figure class="kg-card kg-image-card kg-card-hascaption"><img src="https://www.freecodecamp.org/portuguese/news/content/images/2023/04/FSvBm5GdWA0uMo6NJhyOoF2hgJt8s1Bv3n1v.png" class="kg-image" alt="FSvBm5GdWA0uMo6NJhyOoF2hgJt8s1Bv3n1v" width="464" height="726" loading="lazy"><figcaption>Estrutura do diretório <em>webminer</em></figcaption></figure><p>Deve refletir a abordagem básica para o padrão de projeto.</p><ul><li>Começando em <code>entities</code>, você pode ver que o modelo central deste projeto é o <code>arxiv_document</code></li><li>A próxima pasta, <code>use_cases</code>, mostra nosso caso de uso – especificamente, requisitar a página <code>arxiv</code></li><li>Depois disso, passamos pela pasta <code>interface_adapters</code> que providencia adaptadores para processos de requisição em uma aplicação REST ou para serialização</li><li>A última camada é a <code>external_interfaces</code>. Aqui é onde usamos o servidor <code>flask</code> para implementar a funcionalidade REST</li></ul><p>Todas essas camadas dependem das camadas centrais, mas não o contrário.</p><p><strong>Uma observação importante:<strong> </strong>isso não está<strong> implement</strong>a<strong>d</strong>o de modo totalmente correto no repositório.</strong></p><p>Por quê? Porque os casos de uso são realmente diferentes. Na realidade, o principal caso de uso é fornecer os dados estruturados. Outro caso de uso é obter os dados da página arxiv.</p><p>Você notou esse erro na arquitetura? Se notou, parabéns! Você não apenas veio a este artigo com bastante curiosidade, mas, provavelmente, entendeu os princípios bem o suficiente para construir seu próprio caso e aplicar os conceitos na realidade!</p><p>Você concorda? Se não, por quê? Obrigado pela leitura do meu artigo!</p><h3 id="recursos"><strong>Recursos</strong></h3><p>Aqui estão alguns artigos que considerei úteis para entender o conceito de "arquitetura limpa" (textos em inglês):</p><ul><li><a href="https://8thlight.com/blog/uncle-bob/2012/08/13/the-clean-architecture.html" rel="noopener">https://8thlight.com/blog/uncle-bob/2012/08/13/the-clean-architecture.html</a></li><li><a href="https://www.codingblocks.net/podcast/clean-architecture-make-your-architecture-scream/" rel="noopener">https://www.codingblocks.net/podcast/clean-architecture-make-your-architecture-scream/</a></li><li><a href="https://github.com/mattia-battiston/clean-architecture-example" rel="noopener">https://github.com/mattia-battiston/clean-architecture-example</a></li><li><a href="https://medium.com/@tiagoflores_23976/how-choose-the-appropriate-ios-architecture-mvc-mvp-mvvm-viper-or-clean-architecture-2d1e9b87d48" rel="noopener">https://medium.com/@tiagoflores_23976/how-choose-the-appropriate-ios-architecture-mvc-mvp-mvvm-viper-or-clean-architecture-2d1e9b87d48</a></li><li><a href="https://de.slideshare.net/HimanshuDudhat1/mvp-clean-architecture" rel="noopener">https://de.slideshare.net/HimanshuDudhat1/mvp-clean-architecture</a></li><li><a href="https://softwareengineering.stackexchange.com/questions/336677/what-is-the-difference-between-mvp-and-clean-architecture" rel="noopener">https://softwareengineering.stackexchange.com/questions/336677/what-is-the-difference-between-mvp-and-clean-architecture</a></li><li><a href="https://engineering.21buttons.com/clean-architecture-in-django-d326a4ab86a9" rel="noopener">https://engineering.21buttons.com/clean-architecture-in-django-d326a4ab86a9</a></li><li><a href="https://gist.github.com/ygrenzinger/14812a56b9221c9feca0b3621518635b" rel="noopener">https://gist.github.com/ygrenzinger/14812a56b9221c9feca0b3621518635b</a></li><li><a href="https://medium.freecodecamp.org/how-to-write-robust-apps-consistently-with-the-clean-architecture-9bdca93e17b" rel="noopener">https://medium.freecodecamp.org/how-to-write-robust-apps-consistently-with-the-clean-architecture-9bdca93e17b</a></li><li><a href="https://marconijr.com/posts/clean-architecture-practice/" rel="noopener">https://marconijr.com/posts/clean-architecture-practice/</a></li></ul><p>Daniel Deutsch é mestrando em direito comercial, trabalha como engenheiro de software e é organizador de eventos relacionados à tecnologia em Viena. Seus esforços atuais de aprendizado pessoal se concentram em aprendizagem de máquina.</p><p>Siga o autor em suas redes sociais:</p><ul><li><a href="https://www.linkedin.com/in/createdd" rel="noopener">LinkedIn</a></li><li><a href="https://github.com/Createdd" rel="noopener">Github</a></li><li><a href="https://medium.com/@ddcreationstudi" rel="noopener">Medium</a></li><li><a href="https://twitter.com/_createdd" rel="noopener">Twitter</a></li><li><a href="https://steemit.com/@createdd" rel="noopener">Steemit</a></li><li><a href="https://hashnode.com/@DDCreationStudio" rel="noopener">Hashnode</a></li></ul> ]]>
                </content:encoded>
            </item>
        
    </channel>
</rss>
