<?xml version="1.0" encoding="UTF-8"?>		<rss version="2.0"
			xmlns:content="http://purl.org/rss/1.0/modules/content/"
			xmlns:wfw="http://wellformedweb.org/CommentAPI/"
			xmlns:dc="http://purl.org/dc/elements/1.1/"
			xmlns:atom="http://www.w3.org/2005/Atom"
			xmlns:sy="http://purl.org/rss/1.0/modules/syndication/"
			xmlns:slash="http://purl.org/rss/1.0/modules/slash/"
					>

		<channel>
			<title>UFSM - Feed Customizado RSS</title>
			<atom:link href="https://www.ufsm.br/busca?rss=true&#038;tags=frameworks" rel="self" type="application/rss+xml" />
			<link>https://www.ufsm.br</link>
			<description>Universidade Federal de Santa Maria</description>
			<lastBuildDate>Fri, 24 Jul 2026 21:45:19 +0000</lastBuildDate>
			<language>pt-BR</language>
			<sy:updatePeriod>hourly</sy:updatePeriod>
			<sy:updateFrequency>1</sy:updateFrequency>
			<generator>https://wordpress.org/?v=7.0.2</generator>

<image>
	<url>/app/themes/ufsm/images/icons/favicon.ico</url>
	<title>UFSM</title>
	<link>https://www.ufsm.br</link>
	<width>32</width>
	<height>32</height>
</image> 
						<item>
				<title>Angular: Transformando o Desenvolvimento Web</title>
				<link>https://www.ufsm.br/pet/sistemas-de-informacao/2024/02/22/angular-transformando-o-desenvolvimento-web</link>
				<pubDate>Thu, 22 Feb 2024 15:00:00 +0000</pubDate>
						<category><![CDATA[Destaques]]></category>
		<category><![CDATA[Redações]]></category>
		<category><![CDATA[Frameworks]]></category>
		<category><![CDATA[Web e Front-End]]></category>

				<guid isPermaLink="false">https://www.ufsm.br/pet/sistemas-de-informacao/?p=3514</guid>
						<description><![CDATA[Olá, entusiastas da tecnologia! Nesta edição do PET Redação, vamos explorar o Angular e aprender como instalá-lo. Desvendaremos desde a instalação inicial até a utilização de ambientes de desenvolvimento. Vamos começar essa empolgante jornada de descobertas no mundo do Angular! Introdução: O que é o Angular e suas principais características O Angular é um framework [&hellip;]]]></description>
							<content:encoded><![CDATA[  <!-- wp:paragraph -->
<p>Olá, entusiastas da tecnologia! Nesta edição do PET Redação, vamos explorar o Angular e aprender como instalá-lo. Desvendaremos desde a instalação inicial até a utilização de ambientes de desenvolvimento. Vamos começar essa empolgante jornada de descobertas no mundo do Angular!</p>
<!-- /wp:paragraph -->

<!-- wp:heading {"level":3} -->
<h3 class="wp-block-heading"><br><strong>Introdução: O que é o Angular e suas principais características</strong></h3>
<!-- /wp:heading -->

<!-- wp:paragraph -->
<p><span style="font-weight: 400">O Angular é um framework de código aberto desenvolvido pelo Google, amplamente utilizado por desenvolvedores na construção de sites dinâmicos e aplicativos web interativos. Surgiu em 2012 como AngularJS, criado por Misko Hevery e Adam Abrons, engenheiros da Google. Desde então, tem evoluído, e a versão mais recente, Angular 2.0 ou Angular 2+, foi lançada em 2016, marcando uma significativa reescrita e transformação.</span></p>
<!-- /wp:paragraph -->

<!-- wp:paragraph -->
<p><span style="font-weight: 400">O AngularJS introduziu o conceito de Model-View-Controller (MVC) no desenvolvimento web, dividindo a estrutura em Model (Modelo), View (Visão), e Controller (Controle). No contexto do AngularJS, o Modelo é representado pelo próprio framework, a Visão é o HTML, e o Controle é o JavaScript. Essa arquitetura simplifica a sincronização entre JavaScript e HTML, reduzindo a quantidade de código necessário para criar páginas dinâmicas.</span></p>
<!-- /wp:paragraph -->

<!-- wp:heading {"level":4} -->
<h4 class="wp-block-heading"><strong>As vantagens do AngularJS são notáveis. Destacam-se:</strong></h4>
<!-- /wp:heading -->

<!-- wp:group {"layout":{"type":"flex","orientation":"vertical"}} -->
<div class="wp-block-group"><!-- wp:paragraph -->
<p>1. <strong>Combinação de Dados Bidirecional</strong>: A arquitetura do AngularJS sincroniza automaticamente JavaScript e HTML, poupando tempo na criação de aplicações.</p>
<!-- /wp:paragraph -->

<!-- wp:paragraph -->
<p>2. <strong>Diretivas</strong>: O framework estende as funcionalidades do HTML por meio de diretivas, identificadas pelo prefixo 'ng-'. Essas diretivas simplificam a manipulação do DOM.</p>
<!-- /wp:paragraph -->

<!-- wp:paragraph -->
<p>3. <strong>Estrutura do Código</strong>: O AngularJS oferece templates de códigos, promovendo a produção de apps com códigos limpos, facilitando a manutenção e modificações.</p>
<!-- /wp:paragraph -->

<!-- wp:paragraph -->
<p>4. <strong>Ambiente de Testes</strong>: O suporte a testes unitários e integrados contribui para a robustez e qualidade das aplicações.</p>
<!-- /wp:paragraph -->

<!-- wp:paragraph -->
<p>5. <strong>Compatibilidade</strong>: O AngularJS pode ser executado em vários navegadores, incluindo dispositivos móveis, garantindo flexibilidade e versatilidade.</p>
<!-- /wp:paragraph -->

<!-- wp:paragraph -->
<p>6. <strong>Futuro Promissor</strong>: A popularidade contínua do AngularJS e a crescente base de usuários indicam um futuro brilhante, com documentação extensa e tutoriais atualizados.</p>
<!-- /wp:paragraph --></div>
<!-- /wp:group -->

<!-- wp:paragraph -->
<p>Antes de mergulhar no AngularJS, é essencial ter conhecimentos básicos de JavaScript, HTML, CSS e Ajax. Essa base permite aos desenvolvedores adaptarem-se ao rápido padrão de desenvolvimento do AngularJS, compreender quando utilizá-lo e tornar-se desenvolvedores mais flexíveis e inovadores.</p>
<!-- /wp:paragraph -->

<!-- wp:image {"id":3515,"sizeSlug":"full","linkDestination":"none"} -->
<figure class="wp-block-image size-full"><img src="https://www.ufsm.br/app/uploads/sites/791/2024/02/image2.jpg" alt="" class="wp-image-3515" /><figcaption class="wp-element-caption"><em>Imagem 1 - Principais tecnologias usadas para desenvolvimento com Angular</em></figcaption></figure>
<!-- /wp:image -->

<!-- wp:heading {"level":3} -->
<h3 class="wp-block-heading"><br><strong>Instalando o Angular - Primeiros Passo</strong></h3>
<!-- /wp:heading -->

<!-- wp:paragraph -->
<p>Se você está pronto para entrar no mundo do desenvolvimento web com Angular, você veio ao lugar certo. Neste seção, vamos explorar os passos essenciais para instalar o Angular em seu sistema. Agora, vamos mergulhar nos passos necessários para instalar o Angular e criar seu primeiro projeto.</p>
<!-- /wp:paragraph -->

<!-- wp:heading {"level":4} -->
<h4 class="wp-block-heading"><strong>Passo 1: Instalação do Node.js</strong></h4>
<!-- /wp:heading -->

<!-- wp:paragraph -->
<p>O Angular requer o Node.js para ser executado. Certifique-se de ter o Node.js instalado em seu sistema. Você pode baixar a versão mais recente no site oficial: <a href="https://nodejs.org/">https://nodejs.org/</a></p>
<!-- /wp:paragraph -->

<!-- wp:heading {"level":4} -->
<h4 class="wp-block-heading"><strong>Passo 2: Instalação do Angular CLI (Command Line Interface)</strong></h4>
<!-- /wp:heading -->

<!-- wp:paragraph -->
<p>O Angular CLI facilita a criação e gestão de projetos Angular. Abra o terminal ou prompt de comando e execute o seguinte comando para instalar o Angular CLI globalmente:</p>
<!-- /wp:paragraph -->

<!-- wp:code -->
<pre class="wp-block-code"><code><mark class="has-inline-color has-vivid-red-color">npm install -g @angular/cli</mark></code></pre>
<!-- /wp:code -->

<!-- wp:paragraph -->
<p>Este comando utiliza o npm (Node Package Manager) para instalar o Angular CLI de forma global em seu sistema.</p>
<!-- /wp:paragraph -->

<!-- wp:heading {"level":4} -->
<h4 class="wp-block-heading"><strong>Passo 3: Verificação da Instalação do Angular CLI</strong></h4>
<!-- /wp:heading -->

<!-- wp:paragraph -->
<p>Após a instalação, você pode verificar se o Angular CLI foi instalado corretamente executando o seguinte comando:</p>
<!-- /wp:paragraph -->

<!-- wp:code -->
<pre class="wp-block-code"><code><mark class="has-inline-color has-vivid-red-color">ng --version</mark></code></pre>
<!-- /wp:code -->

<!-- wp:paragraph -->
<p>Isso exibirá a versão do Angular CLI instalada, confirmando que o processo foi bem-sucedido.</p>
<!-- /wp:paragraph -->

<!-- wp:heading {"level":4} -->
<h4 class="wp-block-heading"><strong>Passo 4: Criação de um Novo Projeto Angular</strong></h4>
<!-- /wp:heading -->

<!-- wp:paragraph -->
<p>Com o Angular CLI instalado, você pode criar um novo projeto Angular facilmente. Execute o seguinte comando:</p>
<!-- /wp:paragraph -->

<!-- wp:code -->
<pre class="wp-block-code"><code><code><mark class="has-inline-color has-vivid-red-color">ng new nome-do-projeto</mark></code></code></pre>
<!-- /wp:code -->

<!-- wp:paragraph -->
<p>Substitua "nome-do-projeto" pelo nome desejado para o seu projeto. Este comando criará uma estrutura básica para o seu projeto Angular.</p>
<!-- /wp:paragraph -->

<!-- wp:heading {"level":4} -->
<h4 class="wp-block-heading"><strong>Passo 6: Inicialização do Servidor de Desenvolvimento</strong></h4>
<!-- /wp:heading -->

<!-- wp:paragraph -->
<p>Inicie o servidor de desenvolvimento para visualizar seu projeto. Execute o seguinte comando:</p>
<!-- /wp:paragraph -->

<!-- wp:code -->
<pre class="wp-block-code"><code><mark class="has-inline-color has-vivid-red-color">ng serve</mark></code></pre>
<!-- /wp:code -->

<!-- wp:paragraph -->
<p>Isso iniciará o servidor e disponibilizará seu aplicativo Angular localmente. Abra o navegador e acesse http://localhost:4200/ para visualizar o aplicativo.</p>
<!-- /wp:paragraph -->

<!-- wp:heading {"level":4} -->
<h4 class="wp-block-heading"><strong>Passo 7: Utilizar um ambiente de desenvolvimento</strong></h4>
<!-- /wp:heading -->

<!-- wp:paragraph -->
<p>Agora que seu projeto está em andamento, recomendamos abrir o código em um ambiente de desenvolvimento integrado (IDE) como Visual Studio Code, Sublime Text, ou qualquer outro de sua preferência. Isso facilitará a edição e o desenvolvimento contínuo do seu projeto.</p>
<!-- /wp:paragraph -->

<!-- wp:image {"id":3516,"sizeSlug":"large","linkDestination":"none","className":"is-style-default"} -->
<figure class="wp-block-image size-large is-style-default"><img src="https://www.ufsm.br/app/uploads/sites/791/2024/02/image1-1024x488.png" alt="" class="wp-image-3516" /><figcaption class="wp-element-caption"><em>Imagem 2 - Projeto em Angular no vscode</em></figcaption></figure>
<!-- /wp:image -->

<!-- wp:paragraph -->
<p>Caso deseje alguma sugestão de ambiente de desenvolvimento, o VS Code oferece um guia sobre o uso do Angular, siga o link para maiores informações <a href="https://code.visualstudio.com/docs/nodejs/angular-tutorial">https://code.visualstudio.com/docs/nodejs/angular-tutorial</a> </p>
<!-- /wp:paragraph -->

<!-- wp:heading {"level":3} -->
<h3 class="wp-block-heading"><br><strong>Conclusão: O mundo do desenvolvimento com o Angular</strong></h3>
<!-- /wp:heading -->

<!-- wp:paragraph -->
<p>Com estes passos simples, você instalou o Angular e criou seu primeiro projeto. Explore a documentação oficial do Angular <a href="https://angular.io/">https://angular.io/</a>&nbsp; para aprender mais sobre os recursos e aprofundar seus conhecimentos no desenvolvimento com Angular.</p>
<!-- /wp:paragraph -->

<!-- wp:paragraph -->
<p>Em resumo, o Angular é uma ferramenta poderosa para desenvolvedores web, oferecendo uma estrutura sólida, suporte a testes, ampla compatibilidade e uma comunidade ativa. Seu papel vai além de um simples framework, sendo considerado uma verdadeira plataforma de desenvolvimento. A adoção do Angular traz benefícios significativos, como organização do código, modularidade, reusabilidade e facilidade de manutenção. Portanto, explorar e dominar o Angular é uma jornada valiosa para qualquer desenvolvedor web moderno.</p>
<!-- /wp:paragraph -->

<!-- wp:heading {"level":3} -->
<h3 class="wp-block-heading"><br><strong>Referências</strong></h3>
<!-- /wp:heading -->

<!-- wp:paragraph -->
<p>Documentação Angular. Disponível em: https://angular.io/docs. Acesso em: 18/02/2024.<br>O Que É Angular: O Framework Que Transformará Seu Código. Disponível em: https://www.hostinger.com.br/tutoriais/o-que-e-angular. Acesso em: 18/02/2024.<br>Angular: o que é, para que serve e um Guia para iniciar no framework JavaScript. Disponível em: https://www.alura.com.br/artigos/angular-js. Acesso em: 18/02/2024.<br>Using Angular in Visual Studio Code. Disponível em: https://code.visualstudio.com/docs/nodejs/angular-tutorial. Acesso em: 18/02/2024.<br>Angular: como funciona esse framework e principais bibliotecas! Disponível em: https://blog.betrybe.com/framework-de-programacao/angular/. Acesso em: 18/02/2024.<br>Como começar com Angular. Disponível em: https://www.alura.com.br/artigos/como-comecar-com-angular. Acesso em: 18/02/2024.<br>Guia Completo de Angular - Primeiros Passos. Disponível em: https://www.devmedia.com.br/guia/angular/38245. Acesso em: 18/02/2024.<br>Github Angular. Disponível em: https://github.com/angular/angular. Acesso em: 18/02/2024.<br>Blog Angular. Disponível em: https://blog.angular.io/. Acesso em: 18/02/2024.</p>
<!-- /wp:paragraph -->

<!-- wp:paragraph {"align":"right"} -->
<p class="has-text-align-right"><strong>Autora: </strong>Virgínia Moreira Marques Colares</p>
<!-- /wp:paragraph -->]]></content:encoded>
													</item>
						<item>
				<title>Vue.js: Uma introdução ao framework</title>
				<link>https://www.ufsm.br/pet/sistemas-de-informacao/2023/09/10/vue-js-uma-introducao-ao-framework</link>
				<pubDate>Mon, 11 Sep 2023 01:00:59 +0000</pubDate>
						<category><![CDATA[Destaques]]></category>
		<category><![CDATA[Redações]]></category>
		<category><![CDATA[Frameworks]]></category>
		<category><![CDATA[Web e Front-End]]></category>

				<guid isPermaLink="false">https://www.ufsm.br/pet/sistemas-de-informacao/?p=3441</guid>
						<description><![CDATA[Olá Pessoal! Nesta edição do PET Redação, vamos entender mais sobre um framework muito utilizado no mercado de desenvolvimento web, o Vue.js.   O que é e como funciona Atualmente em sua terceira versão, o Vue.js é um framework JavaScript para construir interfaces de usuário. Ele utiliza HTML, CSS e JavaScript padrão e oferece um [&hellip;]]]></description>
							<content:encoded><![CDATA[  <!-- wp:tadv/classic-paragraph -->
<p><span style="font-weight: 400">Olá Pessoal! Nesta edição do PET Redação, vamos entender mais sobre um framework muito utilizado no mercado de desenvolvimento web, o Vue.js.</span></p>
<p> </p>
<h2><strong>O que é e como funciona<br /></strong></h2>
<p><span style="font-weight: 400">Atualmente em sua terceira versão, o Vue.js é um framework JavaScript para construir interfaces de usuário. Ele utiliza HTML, CSS e JavaScript padrão e oferece um modelo de programação declarativo e baseado em componentes que auxilia no desenvolvimento eficiente de interfaces, independentemente de sua complexidade.</span></p>
<p> </p>
<h2><strong>Comparação com outros frameworks</strong></h2>
<p><span style="font-weight: 400">Ao comparar o Vue.js com outros frameworks populares, como React e Angular, é possível observar algumas semelhanças e diferenças importantes. Essas comparações podem ajudar a entender melhor o Vue.js e como ele se destaca em relação a outros frameworks. Vamos dar uma olhada em algumas dessas comparações a seguir.</span></p>
<ul>
<li style="font-weight: 400"><b>React</b><span style="font-weight: 400">: Vue.js e React compartilham muitas semelhanças, como o uso de um DOM virtual e a oferta de componentes de visualização reativos e compostos. No entanto, eles diferem em sua implementação interna e abordagem para otimização de desempenho, por exemplo, o Vue.js usa um sistema de reatividade baseado em observadores para rastrear alterações nos dados e atualizar automaticamente a interface do usuário quando necessário. Já o React oferece a possibilidade de usar o método <i>shouldComponentUpdate</i> para controlar quando um componente deve ser atualizado, evitando renderizações desnecessárias.</span></li>
<li><b>Angular</b><span style="font-weight: 400">: Vue.js é considerado mais simples do que o Angular em termos de API e design, o que permite aos desenvolvedores aprenderem rapidamente e se tornarem produtivos. Além disso, o Vue.js é mais flexível e menos opinativo do que o Angular, permitindo que os desenvolvedores estruturem seus aplicativos da maneira que desejarem.</span></li>
</ul>
<p> </p>
<h2><strong>Exemplos de uso do Vue.js</strong></h2>
<p><span style="font-weight: 400">Como comentado anteriormente, o Vue.js é um framework JavaScript progressivo que pode ser usado de várias maneiras para criar aplicativos da web. Vejamos algumas abordagens.</span></p>
<ul>
<li><b>Script autônomo</b><span style="font-weight: 400">: O Vue.js pode ser usado como um arquivo de script autônomo, sem a necessidade de uma etapa de construção. Isso geralmente é útil se você já tiver um framework de backend renderizando a maior parte do HTML ou se a lógica do frontend não for complexa o suficiente para que seja necessária uma etapa de construção.</span></li>
<li><b>Web Components incorporados</b><span style="font-weight: 400"><span style="font-weight: 400">: </span></span>É possível usar o Vue.js para criar Web Components padrão que podem ser incorporados em qualquer página HTML, independentemente de como eles são renderizados. Os Web Components resultantes podem ser incorporados em aplicativos legados, HTML estático ou até mesmo aplicativos construídos com outros frameworks. Isso oferece flexibilidade e permite que você aproveite os recursos em qualquer contexto.</li>
<li><b>Aplicação de página única (SPA)</b><span style="font-weight: 400">: Algumas aplicações requerem interatividade rica e profundidade no frontend. A melhor maneira de construir essas aplicações é usar uma arquitetura onde o Vue.js não apenas controla toda a página, mas também lida com atualizações de dados e navegação sem ter que recarregar a página. Esse tipo de aplicação é geralmente chamado de Aplicação de Página Única (SPA). O Vue.js fornece bibliotecas principais e suporte abrangente a ferramentas com uma experiência incrível para desenvolvedores para construir SPAs.</span></li>
</ul>
<p> </p>
<h2><strong>Como começar a usar o Vue.js</strong></h2>
<p><span style="font-weight: 400">Para começar a usar o Vue.js, você pode seguir os seguintes passos:</span></p>
<ol>
<li><b>Instale o Node.js:</b><span style="font-weight: 400"> Certifique-se de ter uma versão atualizada do Node.js instalada em seu computador.</span></li>
<li><b>Instale o Vue CLI:</b><span style="font-weight: 400"> O Vue CLI é uma ferramenta de linha de comando que ajuda a criar e gerenciar projetos Vue.js. Para instalá-lo, abra um terminal e execute o comando <code>npm install -g @vue/cli2</code>.</span></li>
<li><b>Crie um novo projeto:</b><span style="font-weight: 400"> Com o Vue CLI instalado, você pode criar um novo projeto Vue.js executando o comando <code>vue create nome-do-projeto</code>, onde nome-do-projeto é o nome do seu projeto.</span></li>
<li><b>Execute o projeto:</b><span style="font-weight: 400"> Depois de criar o projeto, navegue até a pasta do projeto e execute o comando <code>npm run serve</code> para iniciar o servidor de desenvolvimento local.</span></li>
</ol>
<p> </p>
<p><span style="font-weight: 400">Além disso, existem muitos recursos disponíveis para ajudá-lo a começar a usar o Vue.js na própria documentação do framework, podendo ser acessada em “https://vuejs.org/guide/introduction.html”</span></p>
<p> </p>
<p><span style="font-weight: 400">Veja um exemplo de ‘Hello World’ utilizando vue:</span></p>
<p><code><span style="font-weight: 400">&lt;template&gt;</span></code></p>
<p><code><span style="font-weight: 400">  &lt;h1&gt;{{ message }}&lt;/h1&gt;</span></code></p>
<p><code><span style="font-weight: 400">&lt;/template&gt;</span></code></p>
<p><code><span style="font-weight: 400">&lt;script setup&gt;</span></code></p>
<p><code><span style="font-weight: 400">import { ref } from 'vue'</span></code></p>
<p><code><span style="font-weight: 400">const message = ref('Hello World!')</span></code></p>
<p><code><span style="font-weight: 400">&lt;/script&gt;</span></code></p>
<p> </p>
<h2><strong>Dados reativos:</strong></h2>
<p><span style="font-weight: 400">O Vue.js possui um sistema de dados reativos. Isso significa que quando você muda o estado do seu aplicativo (por exemplo, atualizando uma variável), o Vue automaticamente atualiza a interface do usuário para refletir essa mudança. Aqui está um exemplo:</span></p>
<p><code>var app = new Vue({<br />   el: '#app',<br />   data: {<br />      mensagem: 'Olá Vue!'<br />   }<br />})</code></p>
<p><span style="font-weight: 400">Neste exemplo, mensagem é uma propriedade reativa. Se você alterar o valor de mensagem, qualquer parte da interface do usuário que esteja exibindo mensagem será automaticamente atualizada.</span></p>
<p> </p>
<h2><strong>Diretivas</strong></h2>
<p><span style="font-weight: 400">As diretivas são instruções especiais que você pode usar em seu HTML para controlar o comportamento do DOM. No Vue.js, as diretivas são prefixadas com v- para indicar que são atributos especiais fornecidos pelo Vue. Por exemplo, a diretiva v-if é usada para renderizar condicionalmente um bloco:</span></p>
<p><code>&lt;div id="app"&gt;<br />   &lt;p v-if="visivel"&gt;Agora você me vê&lt;/p&gt;<br />&lt;/div&gt;</code></p>
<p><span style="font-weight: 400">Neste exemplo, o parágrafo será renderizado apenas se a propriedade visível for verdadeira.</span></p>
<p> </p>
<h2><strong>Manipulação de eventos</strong></h2>
<p><span style="font-weight: 400">O Vue.js facilita a resposta aos eventos do usuário, como cliques ou pressionamentos de teclas. Você pode usar a diretiva v-on para ouvir eventos DOM e executar algum código JavaScript quando eles ocorrem. Aqui está um exemplo:</span></p>
<p><code>&lt;div id="app"&gt;<br />   &lt;button v-on:click="contador++"&gt;Clique em mim&lt;/button&gt;<br />   &lt;p&gt;Você clicou {{ contador }} vezes.&lt;/p&gt;<br />&lt;/div&gt;</code></p>
<p><span style="font-weight: 400">Neste exemplo, estamos ouvindo o evento de clique no botão e incrementando o valor do contador cada vez que o botão é clicado.</span></p>
<p> </p>
<h2><strong>Conclusão</strong></h2>
<p><span style="font-weight: 400">Em resumo, o Vue.js é um framework JavaScript progressivo para construir interfaces de usuário. Ele oferece uma abordagem flexível, permitindo que os desenvolvedores usem o framework de várias maneiras, dependendo do caso de uso. Com uma API intuitiva e documentação robusta, o Vue.js é fácil de aprender e usar. Além disso, ele oferece desempenho otimizado e recursos avançados, como renderização declarativa e reatividade, tornando-o uma excelente escolha para construir aplicações complexas.</span></p>
<p> </p>
<p style="text-align: right"><strong>Autor: </strong>Guilherme Rodrigues Garcia</p>
<p> </p>
<p> </p>
<!-- /wp:tadv/classic-paragraph -->]]></content:encoded>
													</item>
						<item>
				<title>Introdução a NestJS</title>
				<link>https://www.ufsm.br/pet/sistemas-de-informacao/2023/08/07/introducao-a-nestjs</link>
				<pubDate>Mon, 07 Aug 2023 19:15:59 +0000</pubDate>
						<category><![CDATA[Destaques]]></category>
		<category><![CDATA[Redações]]></category>
		<category><![CDATA[Frameworks]]></category>
		<category><![CDATA[Web e Front-End]]></category>

				<guid isPermaLink="false">https://www.ufsm.br/pet/sistemas-de-informacao/?p=3408</guid>
						<description><![CDATA[Olá Pessoal! Nesta edição do PET Redação, vamos entender mais sobre um framework que vem fazendo muito sucesso no desenvolvimento server-side em Node.js, o NestJS. Introdução O Nest é um framework Node.js para implementar aplicações backend eficientes, confiáveis e escaláveis utilizando Typescript (padrão) ou Javascript. Construído em Typescript, ele utiliza diversos princípios, como Programação Orientada [&hellip;]]]></description>
							<content:encoded><![CDATA[  <!-- wp:paragraph {"align":"left"} -->
<p class="has-text-align-left">Olá Pessoal! Nesta edição do PET Redação, vamos entender mais sobre um framework que vem fazendo muito sucesso no desenvolvimento server-side em Node.js, o NestJS.</p>
<!-- /wp:paragraph -->

<!-- wp:heading -->
<h2 class="wp-block-heading"><strong>Introdução</strong></h2>
<!-- /wp:heading -->

<!-- wp:paragraph -->
<p>O Nest é um framework Node.js para implementar aplicações backend eficientes, confiáveis e escaláveis utilizando Typescript (padrão) ou Javascript. Construído em Typescript, ele utiliza diversos princípios, como Programação Orientada a Objetos, Programação Funcional e Programação Funcional Reativa.</p>
<!-- /wp:paragraph -->

<!-- wp:paragraph -->
<p>Ao optar pelo Nest, você tem a opção de escolher entre dois dos mais famosos frameworks para servidores HTTP: o Express (padrão) e o Fastify. Essa escolha não apenas proporciona uma camada de abstração em algumas partes do desenvolvimento, mas também garante liberdade para os desenvolvedores adaptarem a estrutura às necessidades específicas de seus projetos.</p>
<!-- /wp:paragraph -->

<!-- wp:paragraph -->
<p>O maior problema que o NestJS propõe-se a resolver é a <i>arquitetura</i> em aplicações server-side Javascript, sendo bastante similar e, até mesmo, inspirado no Angular, um framework para client-side. A arquitetura do NestJS é, principalmente, dividida em: Controllers, Providers (Services, Repositories, Helpers, etc) e Modules. Há outras divisões também importantes, mas vamos entrar em detalhes em cada uma delas mais tarde.</p>
<!-- /wp:paragraph -->

<!-- wp:paragraph -->
<p>No tópico a seguir veremos como instalar e criar o primeiro projeto com o NestJS e, logo mais, entenderemos mais sobre a arquitetura e os principais fundamentos que o NestJS utiliza, Aproveite!</p>
<!-- /wp:paragraph -->

<!-- wp:heading -->
<h2 class="wp-block-heading"><strong>Instalação e primeiro projeto</strong></h2>
<!-- /wp:heading -->

<!-- wp:paragraph -->
<p>Para ter acesso a todos os recursos que o NestJS oferece é necessário instalar a CLI deles. Isso pode ser feito a partir do gerenciador de pacotes do Node.js, o npm, a partir do seguinte comando:</p>
<!-- /wp:paragraph -->

<!-- wp:paragraph -->
<p><i>&nbsp; &nbsp; npm install -g @nestjs/cli</i></p>
<!-- /wp:paragraph -->

<!-- wp:paragraph -->
<p>Esse comando instala globalmente (por isso o <i>-g</i>) o Nest CLI na sua máquina. Agora, vamos entrar em detalhes sobre os comandos do Nest, começando pela criação de um novo projeto com NestJS:</p>
<!-- /wp:paragraph -->

<!-- wp:paragraph -->
<p><i>&nbsp; &nbsp; nest new nome_novo_projeto</i></p>
<!-- /wp:paragraph -->

<!-- wp:paragraph -->
<p><i>&nbsp; &nbsp; nest n nome_novo_projeto</i></p>
<!-- /wp:paragraph -->

<!-- wp:paragraph -->
<p>Após rodar o comando, vai ser perguntado qual a preferência do gerenciador de pacotes, possuindo 3 opções: npm, yarn e pnpm. Qualquer uma das opções vai satisfazer os nossos requisitos, na dúvida selecione o npm mesmo (Caso opte pelo yarn ou pnpm, será necessário instalá-los globalmente). Abrindo a pasta do projeto criado você vai ver algo assim:</p>
<!-- /wp:paragraph -->

<!-- wp:image {"align":"center"} -->
<figure class="wp-block-image aligncenter"><img src="https://www.ufsm.br/app/uploads/sites/791/2023/08/1.jpg" alt="Estrutura do diretório do projeto criado" /><figcaption class="wp-element-caption">Estrutura do diretório do projeto criado</figcaption></figure>
<!-- /wp:image -->

<!-- wp:paragraph -->
<p>O Nest CLI possui diversos outros comandos úteis para agilizar o processo de desenvolvimento e auxiliar na produtividade, porém vamos entender mais sobre alguns deles depois, pois explicar a arquitetura e os fundamentos do NestJS é o tema principal dessa redação</p>
<!-- /wp:paragraph -->

<!-- wp:heading -->
<h2 class="wp-block-heading"><strong>Arquitetura</strong></h2>
<!-- /wp:heading -->

<!-- wp:paragraph -->
<p>Os controllers são responsáveis pelo processamento das requisições (requests) e retorno de uma resposta (response) para o client. Normalmente, um possui mais de uma rota, por exemplo, temos um controller que gerencia as requisições relacionadas ao usuário, dessa forma podemos ter uma rota que retorna todos os usuários, outra que cria um usuário novo, outra para deletar um usuário, etc. Até aí nada de novo das aplicações server-side comuns, porém o NestJS utiliza classes e decorators para criar os controllers.&nbsp;</p>
<!-- /wp:paragraph -->

<!-- wp:paragraph -->
<p>Os Decorators&nbsp; são uma funcionalidade poderosa e útil da linguagem TypeScript utilizada para anotar classes, métodos, propriedades ou parâmetros de métodos. Eles são uma parte fundamental da arquitetura do Nest.js e são amplamente utilizados para definir comportamentos adicionais ou metadados para várias partes de uma aplicação. Existem vários decorators integrados fornecidos pelo Nest.js, e você também pode criar seus próprios decorators personalizados quando necessário.&nbsp;</p>
<!-- /wp:paragraph -->

<!-- wp:paragraph -->
<p>Para definir um controller, utiliza-se o decorator @Controller, que pode receber um nome como parâmetro. Além disso, as rotas desse controller também podem ter diversos decorators, como @Get, @Post, @Patch, etc. Isso é necessário para definir o que essa rota deve fazer Um exemplo de um controller de usuários pode ser visto abaixo:</p>
<!-- /wp:paragraph -->

<!-- wp:paragraph -->
<p>Os providers são uma parte muito importante para a arquitetura do Nest, mas diferente dos controllers, os providers podem ser vários tipos de classes, os mais comuns são services, repositories, helpers, etc. Como visto anteriormente, os controllers são responsáveis por lidar com requisições HTTP, mas além disso, eles também encarregam tarefas mais complexas para os providers resolverem. Por exemplo, podemos criar um serviço para realizar as tarefas de cada função do nosso controller definido anteriormente. Esse serviço deve ter uma função para adicionar novos usuários e retornar todos que já existem. Uma forma simples de realizar isso pode ser vista no exemplo abaixo:</p>
<!-- /wp:paragraph -->

<!-- wp:paragraph -->
<p>O decorator @Injectable é comumente utilizado para o container de Inversão de Controle do Nest consiga gerenciar o nosso provider. Esse conceito de Inversão de Controle é acompanhado por outro conceito chamado Injecção de Dependências, que é extremamente importante para entender o funcionamento de aplicações em NestJS. Um exemplo de Injeção de dependência pode ser feito adaptando o usersController para injetar o usersService nele. Como no exemplo abaixo:</p>
<!-- /wp:paragraph -->

<!-- wp:code -->
<pre class="wp-block-code"><code><strong>import { Controller, Get, Post } from '@nestjs/common';

@Controller('users')
export class UsersController {
  @Post()
  create() {
    return 'Adiciona novo usuário';
  }

  @Get()
  findAll() {
    return 'Retorna todos usuários';
  }
}
</strong></code></pre>
<!-- /wp:code -->

<!-- wp:paragraph -->
<p>Os providers são uma parte muito importante para a arquitetura do Nest, mas diferente dos controllers, os providers podem ser vários tipos de classes, os mais comuns são services, repositories, helpers, etc. Como visto anteriormente, os controllers são responsáveis por lidar com requisições HTTP, mas além disso, eles também encarregam tarefas mais complexas para os providers resolverem. Por exemplo, podemos criar um serviço para realizar as tarefas de cada função do nosso controller definido anteriormente. Esse serviço deve ter uma função para adicionar novos usuários e retornar todos que já existem. Uma forma simples de realizar isso pode ser vista no exemplo abaixo:</p>
<!-- /wp:paragraph -->

<!-- wp:code -->
<pre class="wp-block-code"><code><strong>import { Injectable } from '@nestjs/common';
import { User } from './interfaces/user.interface';

@Injectable()
export class UsersService {
  private readonly users: User&#091;] = &#091;];

  create(user: User) {
    this.users.push(user);
  }

  findAll(): User&#091;] {
    return this.users;
  }
}
</strong></code></pre>
<!-- /wp:code -->

<!-- wp:paragraph -->
<p>O decorator @Injectable é comumente utilizado para o container de Inversão de Controle do Nest consiga gerenciar o nosso provider. Esse conceito de Inversão de Controle é acompanhado por outro conceito chamado Injecção de Dependências, que é extremamente importante para entender o funcionamento de aplicações em NestJS. Um exemplo de Injeção de dependência pode ser feito adaptando o usersController para injetar o usersService nele. Como no exemplo abaixo:</p>
<!-- /wp:paragraph -->

<!-- wp:code -->
<pre class="wp-block-code"><code><strong>import { Body, Controller, Get, Post } from '@nestjs/common';
import { UsersService } from './users.service';
import { User } from './interfaces/user.interface';


@Controller('users')
export class UsersController {
  constructor(private usersService: UsersService) {}
  @Post()
  async create(@Body() user: User) {
    return this.usersService.create(user);
  }


  @Get()
  async findAll(): Promise&lt;User&#091;]&gt; {
    return this.usersService.findAll();
  }
}
</strong></code></pre>
<!-- /wp:code -->

<!-- wp:paragraph -->
<p>Com essa adaptação, o usersService é injetado no constructor da classe do usersController e utiliza-se dos métodos que create e findAll que esse provider possui. No Nest, esse controle de dependências é feito a partir da tipagem do Typescript, por isso só é ncessário colocar o tipo do nosso provider, que o Nest vai criar uma instância do usersService para ser utilizada dentro do controller.</p>
<!-- /wp:paragraph -->

<!-- wp:paragraph -->
<p>Outro ponto extremamente importante, o Nest precisa ser informado sobre quais classes são providers, assim como controllers, entre outros. Dessa forma, ele consegue realizar todo o gerenciamento para Inversão de Controle, Injeção de Dependências, etc. Para isso, vamos entrar na última etapa da arquitetura do Nest, os modules.&nbsp;</p>
<!-- /wp:paragraph -->

<!-- wp:paragraph -->
<p>Os modules são utilizados para registrar as classes da aplicação nas suas respectivas funções e, dessa forma, o NestJS gera um grafo da aplicação, que é a estrutura de dados usada para resolver as relações e dependências de modules e providers. Para nosso exemplo podemos ter o seguinte usersModule:</p>
<!-- /wp:paragraph -->

<!-- wp:code -->
<pre class="wp-block-code"><code><strong>import { Module } from '@nestjs/common';
import { UsersService } from './users.service';
import { UsersController } from './users.controller';


@Module({
controllers: &#091;UsersController],
providers: &#091;UsersService]
})
export class UsersModule {}
</strong></code></pre>
<!-- /wp:code -->

<!-- wp:paragraph -->
<p>Como podemos ver, os modules são reconhecidos pelo decorator @Module, onde pode-se também definir toda sua estrutura. Essa estrutura pode variar bastante dependendo da configuração e complexidade do seu projeto, mas os modules são constituídos por 4 propriedades básicas: controllers, providers, imports e exports.</p>
<!-- /wp:paragraph -->

<!-- wp:list -->
<ul><!-- wp:list-item -->
<li>Controllers: um array de controllers para todas as instâncias de controllers do module criado;</li>
<!-- /wp:list-item -->

<!-- wp:list-item -->
<li>Providers: Um array de providers que serão instanciados pelo injetor do Nest;</li>
<!-- /wp:list-item -->

<!-- wp:list-item -->
<li>Imports: Um array de modules que são importados para uso nesse module, por exemplo, poderíamos ter um módulo com uma conexão com o banco de dados, logo eu poderia importar esse módulo;</li>
<!-- /wp:list-item -->

<!-- wp:list-item -->
<li>Exports: Um array de providers que serão disponibilizados para outros módulos utilizarem, por exemplo, poderíamos disponibilizar o usersService para outros módulos terem acesso aos seus métodos.</li>
<!-- /wp:list-item --></ul>
<!-- /wp:list -->

<!-- wp:heading -->
<h2 class="wp-block-heading"><strong>Conclusão</strong></h2>
<!-- /wp:heading -->

<!-- wp:paragraph -->
<p>Com isso, vimos que com o NestJS é possível criar aplicações com uma arquitetura modular, bem organizada e escalável. No entanto, esse texto é somente uma introdução aos conceitos do Nest, então você deve estudar e aplicar em projetos para conseguir ter total entendimento dessa ferramenta poderosa. Para isso, vou colocar uma lista dos comandos do NestJS que ajudarão na produtividade do desenvolvimento e um artigo do Angular extremamente útil para melhor entendimento sobre Inversão de Controle e Injeção de Dependências, que são conceitos fundamentais para utilizar o NestJS na melhor forma. Obrigado, até a próxima.</p>
<!-- /wp:paragraph -->

<!-- wp:heading -->
<h2 class="wp-block-heading"><strong>Referências</strong></h2>
<!-- /wp:heading -->

<!-- wp:list -->
<ul><!-- wp:list-item -->
<li><a href="https://docs.nestjs.com/">Documentação do NestJS</a></li>
<!-- /wp:list-item -->

<!-- wp:list-item -->
<li><a href="https://docs.nestjs.com/cli/usages">Nest CLI Commands</a></li>
<!-- /wp:list-item -->

<!-- wp:list-item -->
<li><a href="https://angular.io/guide/dependency-injection">Understanding Dependency Injection</a></li>
<!-- /wp:list-item --></ul>
<!-- /wp:list -->]]></content:encoded>
													</item>
						<item>
				<title>ASTRO.JS, o ultimo framework web?</title>
				<link>https://www.ufsm.br/pet/sistemas-de-informacao/2022/10/13/astro-js-o-ultimo-framework-web</link>
				<pubDate>Fri, 14 Oct 2022 00:26:56 +0000</pubDate>
						<category><![CDATA[Destaques]]></category>
		<category><![CDATA[Redações]]></category>
		<category><![CDATA[Frameworks]]></category>
		<category><![CDATA[Web e Front-End]]></category>

				<guid isPermaLink="false">https://www.ufsm.br/pet/sistemas-de-informacao/?p=3329</guid>
						<description><![CDATA[Todo mundo já enfrentou duvidas em qual framework web se usar para um projeto. Hoje no mercado temos disponíveis dos mais diversos, que abrangem quase todas as linguagens de programação. O que antes se limitava a apenas Javascript e php, as linguagens web evoluíram tanto, que trouxeram diversas outras consigo como c#, java e até [&hellip;]]]></description>
							<content:encoded><![CDATA[  <!-- wp:tadv/classic-paragraph -->
<p>Todo mundo já enfrentou duvidas em qual framework web se usar para um projeto. Hoje no mercado temos disponíveis dos mais diversos, que abrangem quase todas as linguagens de programação. O que antes se limitava a apenas Javascript e php, as linguagens web evoluíram tanto, que trouxeram diversas outras consigo como c#, java e até mesmo python com o surgimento do Pyscript. E com tantas linguagens disponíveis é notório que muitas pessoas tornem uma linguagem sendo a melhor para si e acabe fazendo parte dos programadores que só programam nessa linguagem, mas e se fosse possível juntar todos esses grupos?</p>
<p>Então essa é apenas uma das coisas que Astro pode fazer, o qual é uma ferramenta capaz de criar “multi page application” que acabou de chegar a apenas alguns meses atrás.</p>
<p><img class=" wp-image-3330 aligncenter" src="https://www.ufsm.br/app/uploads/sites/791/2022/10/image-1-astro-300x143.jpeg" alt="" width="487" height="232" /></p>
<h6 style="text-align: center">Tela com um fundo roxo e logo em cima desse fundo vem um outro rosa um pouco translucido com um título em inglês escrito “rebuilt my blog with out of curiosity... holy !@#$”. Logo abaixo um gráfico mostrando um consumo de Javascript do next.js (138kb) e outro abaixo mostrando o do astro (7.6Kb)</h6>
<p> </p>
<p>Astro surge com várias ideias bastante interessantes, partindo de um ponto de vista no “high-level”, é como um gerador de site estático que permite escrever suas páginas utilizando seu próprio sistema de arquivos. Então ao rodar ele renderiza tudo para gerar static multi-page application.</p>
<p>Para os templates ele tem a sua própria linguagem chamada astro components, o que é bem familiar ao que já conhecemos com frameworks de desenvolvimento. Mas o que realmente é bem interessante é que podemos trazer o seu framework preferido de desenvolvimento para dentro do astro. Então isso quer dizer que podemos criar aplicações astro, utilizando, react, vue, spelt e por ai mais! E ele então vai renderizar a UI no servidor, enquanto carrega muito pouco Javascript no navegador.</p>
<p> </p>
<p><span style="color: #993366">import UmComponenteAstro from '../components/UmComponenteAstro.astro';</span><br /><span style="color: #993366">import UmComponenteReact from '../components/UmComponenteReact.jsx';</span><br /><span style="color: #993366">import algunsDados from '../dados/pokemon.json';</span></p>
<p><span style="color: #993366">// Acesse props passadas ao componente, como `&lt;X titulo="Olá, Mundo!" /&gt;`</span><br /><span style="color: #993366">const { titulo } = Astro.props;</span></p>
<p> </p>
<p>Javascript pelo que conhecemos é o verdadeiro gargalo para performance em aplicações web devido a sua característica de utilizar somente uma thread. Isso significa que com astro você não será capaz de criar thread para Javascript mas sim diminuir o seu uso na sua aplicação. Mas você pode perguntar como um componente vai funcionar se a página só possui HTML puro sem Javascript? É aí que nesse momento astro brilha, se você deseja utilizar responsividade, reatividade e estados nas suas páginas, você pode adicionar “islands” de interatividade para o seu website, na perspectiva do desenvolvedor, astro providencia uma variedade de diretivas para a “hydration” do seu site.</p>
<p><span style="color: #993366">// Exemplo: Utilize um componente React dinâmico na página.</span><br /><span style="color: #993366">import MeuComponenteReact from '../components/MeuComponenteReact.jsx';</span><br /><span style="color: #993366">---</span><br /><span style="color: #993366">&lt;!-- Este componente agora é interativo na página! </span><br /><span style="color: #993366">O resto do seu website continua estático e com zero JS. --&gt;</span><br /><span style="color: #993366">&lt;MeuComponenteReact client:load /&gt;</span></p>
<p><span style="color: #993366">&lt;MeuComponenteReact client:idle /&gt;</span></p>
<p><span style="color: #993366">&lt;MeuComponenteReact client:visible /&gt;</span></p>
<p>Se você quer carregar de uma vez a sua hydration utilize Load. Mas se preferir que o componente não seja interativo naquele momento utilize Idle ou visible se deseja mostrar o component assim que ele aparece na tela. Tudo isso que astro proporciona é chamado de parcial hydration e todas essas características são um grande diferencial quando se fala de performance. Menos Javascript para rodar significa páginas mais velozes e melhor tempo para pontuações de interatividade.</p>
<p><img class=" wp-image-3332 aligncenter" src="https://www.ufsm.br/app/uploads/sites/791/2022/10/image-2-astro-300x240.jpeg" alt="" width="478" height="382" /></p>
<h6 style="text-align: center">Tela com um fundo cinza mostrando no seu topo esquerdo o número 100 circulado de verde e logo em baixo escrito performance, mais abaixo temos 6 métricas escritas em inglês com o seu tempo abaixo escrito em verde.</h6>
<p>Tomado isso como conclusão, se Astro conseguir se tornar uma single-page application seria o ultimato para todos os web frameworks existentes, pois iria abranger todo tipo de uso do Astro nessa tabela, não se limitando somente a isso você pode utilizar qualquer UI que preferir, nesse ponto se todo o desenvolvimento da linguagem conseguir engatar, vai finalmente por um fim a guerra das pessoas fãs de framework Javascript.</p>
<p>Referências: <br />Para saber mais sobre astro.js acesse sua documentação: https://docs.astro.build/en/getting-started/<br />Se deseja por em prática o que viu, saca só esse aqui: https://prismic.io/blog/astro-js-tutorial</p>
<p> </p>
<!-- /wp:tadv/classic-paragraph -->]]></content:encoded>
													</item>
						<item>
				<title>Material UI - Framework React UI</title>
				<link>https://www.ufsm.br/pet/sistemas-de-informacao/2022/08/14/material-ui-framework-react-ui</link>
				<pubDate>Sun, 14 Aug 2022 20:31:03 +0000</pubDate>
						<category><![CDATA[Destaques]]></category>
		<category><![CDATA[Redações]]></category>
		<category><![CDATA[Frameworks]]></category>
		<category><![CDATA[Web e Front-End]]></category>

				<guid isPermaLink="false">https://www.ufsm.br/pet/sistemas-de-informacao/?p=3307</guid>
						<description><![CDATA[Material UI &#8211; Framework React UIUma breve introdução   Imagem: Logo Material UI   Olá pessoal, como estão? O PET-SI preparou mais uma redação para você, desta vez abordando um tema sobre uma biblioteca gráfica voltada para o framework React. Portanto, o objetivo desta redação é mostrar exemplos de interfaces e o porquê de se [&hellip;]]]></description>
							<content:encoded><![CDATA[  <h1 style="line-height: 1.3800000000000001;text-align: center;margin-top: 0pt;margin-bottom: 0pt"><strong>Material UI - Framework React UI</strong><br />Uma breve introdução</h1><p><b style="font-weight: normal"> </b></p><p dir="ltr" style="line-height: 1.3800000000000001;text-align: center;margin-top: 0pt;margin-bottom: 0pt"><img style="margin-left: 0px;margin-top: 0px" src="https://lh5.googleusercontent.com/pYaYsRU0rOzKhHHot84CvoU4LW-GcEOPQVYvSzxfvTu8Juw8MAMHV9kaOH4rTSdXTIvPDmYTDYqlAiolRSwhrJ2DZK1omH_WkNCztPekTvRgCC8eWPkaOonRxLksyPwBIigxi2Zjl-OhUGY-wQqYeg" width="171" height="136" /></p><p dir="ltr" style="line-height: 1.3800000000000001;text-align: center;margin-top: 0pt;margin-bottom: 0pt">Imagem: Logo Material UI</p><p><b style="font-weight: normal"> </b></p><p dir="ltr" style="line-height: 1.3800000000000001;text-align: justify;margin-top: 0pt;margin-bottom: 0pt">Olá pessoal, como estão? O PET-SI preparou mais uma redação para você, desta vez abordando um tema sobre uma biblioteca gráfica voltada para o framework React. Portanto, o objetivo desta redação é mostrar exemplos de interfaces e o porquê de se utilizar a Material UI.</p><p><b style="font-weight: normal"> </b></p><p dir="ltr" style="line-height: 1.3800000000000001;text-align: justify;margin-top: 0pt;margin-bottom: 0pt">O React é amplamente utilizado em todos os domínios. Bibliotecas e frameworks React UI são introduzidos, para que novos recursos possam ser fornecidos aos desenvolvedores. Devido a essas bibliotecas e estruturas, o desenvolvimento se tornou mais flexível e mais criativo</p><p><b style="font-weight: normal"> </b></p><p dir="ltr" style="line-height: 1.3800000000000001;text-align: justify;margin-top: 0pt;margin-bottom: 0pt">A Material UI é uma biblioteca de componentes React de código aberto que implementa o <a href="https://material.io/">design</a> do Google.</p><p><b style="font-weight: normal"> </b></p><p dir="ltr" style="line-height: 1.3800000000000001;text-align: justify;margin-top: 0pt;margin-bottom: 0pt">Ele inclui uma coleção abrangente de componentes pré-construídos que estão prontos para uso na produção imediata.</p><p><b style="font-weight: normal"> </b></p><p dir="ltr" style="line-height: 1.3800000000000001;text-align: justify;margin-top: 0pt;margin-bottom: 0pt">Basicamente a sua forma de uso baseia-se em utilização de componentes autossuficientes, não dependendo assim de uma folha de estilo global como o normalize.css. Portanto, ela é fácil de aprendizado e possui uma ótima colaboração entre equipes, trazendo uma experiência intuitiva para o desenvolvedor, rompendo a barreira de entrada para desenvolvedores back-end e designers menos técnicos. A priori, seu kit de design simples facilita o fluxo de trabalho e aumenta a consistência entre designers e desenvolvedores.</p><p><b style="font-weight: normal"> </b></p><p dir="ltr" style="line-height: 1.3800000000000001;text-align: justify;margin-top: 0pt;margin-bottom: 0pt">Para criarmos um projeto e instalar a Material UI é muito simples, basta seguir esses passos:</p><p><b style="font-weight: normal"> </b></p><p dir="ltr" style="line-height: 1.3800000000000001;text-align: justify;margin-top: 0pt;margin-bottom: 0pt">Começaremos criando um App React com a CLI do create-react-app, onde é feito a configuração do webpack entre outras.</p><p><b style="font-weight: normal"> </b></p><p dir="ltr" style="line-height: 1.3800000000000001;text-align: justify;margin-top: 0pt;margin-bottom: 0pt">create-react-app material-app</p><p><b style="font-weight: normal"> </b></p><p dir="ltr" style="line-height: 1.3800000000000001;text-align: justify;margin-top: 0pt;margin-bottom: 0pt">Após isso, no diretório, abra o terminal e instale a Material UI em seu projeto:</p><p dir="ltr" style="line-height: 1.3800000000000001;text-align: justify;margin-top: 0pt;margin-bottom: 0pt"><br />NPM:</p><p dir="ltr" style="line-height: 1.3800000000000001;text-align: justify;margin-top: 0pt;margin-bottom: 0pt">npm install @material-ui/core</p><p><b style="font-weight: normal"> </b></p><p dir="ltr" style="line-height: 1.3800000000000001;text-align: justify;margin-top: 0pt;margin-bottom: 0pt">YARN:</p><p dir="ltr" style="line-height: 1.3800000000000001;text-align: justify;margin-top: 0pt;margin-bottom: 0pt">yarn add @material-ui/core</p><p><b style="font-weight: normal"> </b></p><p dir="ltr" style="line-height: 1.3800000000000001;text-align: justify;margin-top: 0pt;margin-bottom: 0pt">E pronto, seu projeto já está preparado para utilizar a Material UI. A partir daí, utilize seus conhecimentos em React, busque temas, inspirações e componentes disponíveis dentro da documentação. Outrossim, ela é completamente personalizável, podendo modificar todos os aspectos do design do seu projeto, atendendo assim às necessidades específicas do seu negócio ou marca. A Material UI é muito rápida, por isso nunca se torna um problema a ser resolvido ao otimizar o desempenho de seu aplicativo ou site. Trabalhe com todos os objetos de tema: a biblioteca Material UI é compatível, o que gera menos erros, e também funciona com as soluções CSS-in-JS.</p><p><b style="font-weight: normal"> </b></p><p dir="ltr" style="line-height: 1.3800000000000001;text-align: justify;margin-top: 0pt;margin-bottom: 0pt">A melhores equipes de produtos do mundo confiam na MUI, segue exemplos:</p><p><b style="font-weight: normal"> </b></p><p dir="ltr" style="line-height: 1.3800000000000001;text-align: center;margin-top: 0pt;margin-bottom: 0pt"><img style="margin-left: 0px;margin-top: 0px" src="https://lh6.googleusercontent.com/1eo736dZHOSQJXvS2VnBoLSkQkfeEAZ-cfGMyp1B6BrZBDoUA98prOqmICEh4oRDeElASNQWZbdcY-AWjWvwslG6AlcXO_YS569EdiX_5R81Cpq7gSXJknhiT11-cD8frpRva4ov_amO9iXchQ_2MQ" width="116" height="60" />     <img style="margin-left: 0px;margin-top: 0px" src="https://lh3.googleusercontent.com/np7wttnNq5CNQSctOl9D2iZBEEQSiyfzVqsLl3jLIvhzkZZRx5Uu8pauwIS5Eipl20GHZTUn5s526ymcy6fnGU-ZyIFi0D2cffTni0OwEbzJy0LRZolwiSGLL7UF632ZdyCVmBeRNq0nQwhY-1_TOA" width="89" height="58" />     <img style="margin-left: 0px;margin-top: 0px" src="https://lh6.googleusercontent.com/8NeIkpDzYcWldMeSfaC7tE2_nVdN1XyxAI-t_sc1_0JXvQiyecIZ8tCOLA_kiugx-v6tf-sEf4xNNxog_8S2rNNTEabPEscVz-9v3slDVd2CTmr3QT0GpgICOwgMQymf86UV9DrjLaVZu-xIqr8ArA" width="61" height="50" /></p><p><b style="font-weight: normal"> </b></p><p dir="ltr" style="line-height: 1.3800000000000001;text-align: justify;margin-top: 0pt;margin-bottom: 0pt">Segue um exemplo de um projeto com a Material UI:</p><p><b style="font-weight: normal"> </b></p><p dir="ltr" style="line-height: 1.3800000000000001;text-align: center;margin-top: 0pt;margin-bottom: 0pt"><img style="margin-left: 0px;margin-top: 0px" src="https://lh3.googleusercontent.com/UpMZiG75549nQicWI-o1GC-JIvGDC43CvPnwsURyJHBbCtZAdbyCxtdeOtmkoCdvH41QHvPZ0lN7EtwW5fnj8bsSyiqM5o3eXwgyz8lF2r_AQbb_jylBaJbvfXX5lWyTdqXqGyE4bQhk30JB7iwZCA" width="527" height="394" /></p><p dir="ltr" style="line-height: 1.3800000000000001;text-align: justify;margin-top: 0pt;margin-bottom: 0pt">Referências: </p><p><b style="font-weight: normal"> </b></p><p dir="ltr" style="line-height: 1.3800000000000001;text-align: justify;margin-top: 0pt;margin-bottom: 0pt"><a style="text-decoration: none" href="https://mui.com/">https://mui.com/</a></p><p dir="ltr" style="line-height: 1.3800000000000001;text-align: justify;margin-top: 0pt;margin-bottom: 0pt"><a style="text-decoration: none" href="https://blog.rocketseat.com.br/react-material-ui/">https://blog.rocketseat.com.br/react-material-ui/</a></p><p dir="ltr" style="line-height: 1.3800000000000001;text-align: justify;margin-top: 0pt;margin-bottom: 0pt"><a style="text-decoration: none" href="https://acervolima.com/as-5-principais-bibliotecas-de-iu-do-react-que-voce-deve-explorar-em-2021/">https://acervolima.com/as-5-principais-bibliotecas-de-iu-do-react-que-voce-deve-explorar-em-2021/</a></p>]]></content:encoded>
													</item>
						<item>
				<title>ORM</title>
				<link>https://www.ufsm.br/pet/sistemas-de-informacao/2022/05/23/orm</link>
				<pubDate>Mon, 23 May 2022 15:34:31 +0000</pubDate>
						<category><![CDATA[Destaques]]></category>
		<category><![CDATA[Redações]]></category>
		<category><![CDATA[Back-End e BD]]></category>
		<category><![CDATA[Frameworks]]></category>

				<guid isPermaLink="false">https://www.ufsm.br/pet/sistemas-de-informacao/?p=3299</guid>
						<description><![CDATA[O que é e para que serve um ORM? &nbsp; &nbsp;&nbsp;&nbsp;&nbsp;Object-Relational Mapping (ORM), em português, mapeamento objeto-relacional, é uma técnica para aproximar o paradigma de desenvolvimento de aplicações orientadas a objetos ao paradigma do banco de dados relacional. O uso da técnica de mapeamento objeto-relacional é realizado através de um mapeador objeto-relacional que geralmente é [&hellip;]]]></description>
							<content:encoded><![CDATA[  <h2 style="line-height: 1.38;margin-top: 18pt;margin-bottom: 6pt;text-align: left"><b>O que é e para que serve um ORM?</b></h2>
<p style="text-align: left"><b style="font-weight: normal">&nbsp;</b></p>
<p dir="ltr" style="line-height: 1.38;margin-top: 0pt;margin-bottom: 0pt;text-align: left">&nbsp;&nbsp;&nbsp;&nbsp;Object-Relational Mapping (ORM), em português, mapeamento objeto-relacional, é uma técnica para aproximar o paradigma de desenvolvimento de aplicações orientadas a objetos ao paradigma do banco de dados relacional. O uso da técnica de mapeamento objeto-relacional é realizado através de um mapeador objeto-relacional que geralmente é a biblioteca ou framework que ajuda no mapeamento e uso do banco de dados.</p>
<h3 style="line-height: 1.38;margin-top: 16pt;margin-bottom: 4pt;text-align: left"><strong>Por que usar um ORM?</strong></h3>
<p dir="ltr" style="line-height: 1.38;margin-top: 0pt;margin-bottom: 0pt;text-align: left">&nbsp;&nbsp;&nbsp;&nbsp;Quando usamos o paradigma orientado a objetos trabalhamos principalmente com classes e é claro objetos, que por sua vez representam algo do mundo real, seja algo concreto ou abstrato, como por exemplo:</p>
<p style="text-align: left"><b style="font-weight: normal">&nbsp;</b></p>
<p dir="ltr" style="line-height: 1.38;margin-top: 0pt;margin-bottom: 0pt;text-align: left">const produto = {</p>
<p dir="ltr" style="line-height: 1.38;margin-top: 0pt;margin-bottom: 0pt;text-align: left">&nbsp;&nbsp;&nbsp;&nbsp;id: 1,</p>
<p dir="ltr" style="line-height: 1.38;margin-top: 0pt;margin-bottom: 0pt;text-align: left">&nbsp;&nbsp;&nbsp;&nbsp;nome: 'bicicleta',</p>
<p dir="ltr" style="line-height: 1.38;margin-top: 0pt;margin-bottom: 0pt;text-align: left">&nbsp;&nbsp;&nbsp;&nbsp;preco: 800,</p>
<p dir="ltr" style="line-height: 1.38;margin-top: 0pt;margin-bottom: 0pt;text-align: left">&nbsp;&nbsp;&nbsp;&nbsp;descricao: 'engrenagem fixa, azul, rápida',</p>
<p dir="ltr" style="line-height: 1.38;margin-top: 0pt;margin-bottom: 0pt;text-align: left">}</p>
<p style="text-align: left"><b style="font-weight: normal">&nbsp;</b></p>
<p dir="ltr" style="line-height: 1.38;margin-top: 0pt;margin-bottom: 0pt;text-align: left">&nbsp;&nbsp;&nbsp;&nbsp;O banco de dados relacional trabalha com tabelas e relações entre elas para representar modelos da vida real. Dentro das tabelas temos várias colunas e a unidade que temos para representação no modelo relacional é uma linha:</p>
<p dir="ltr" style="line-height: 1.38;margin-top: 0pt;margin-bottom: 0pt;text-align: left">&nbsp;&nbsp;</p>
<table style="border: none;border-collapse: collapse;width: 451.27559055118115pt">
<colgroup>
<col>
<col>
<col>
<col></colgroup>
<tbody>
<tr style="height: 0pt">
<td style="vertical-align: top;padding: 5pt 5pt 5pt 5pt;overflow: hidden;border: solid #000000 1pt">
<p dir="ltr" style="line-height: 1.2;text-align: center;margin-top: 0pt;margin-bottom: 0pt">id</p>
</td>
<td style="vertical-align: top;padding: 5pt 5pt 5pt 5pt;overflow: hidden;border: solid #000000 1pt">
<p dir="ltr" style="line-height: 1.2;text-align: center;margin-top: 0pt;margin-bottom: 0pt">nome</p>
</td>
<td style="vertical-align: top;padding: 5pt 5pt 5pt 5pt;overflow: hidden;border: solid #000000 1pt">
<p dir="ltr" style="line-height: 1.2;text-align: center;margin-top: 0pt;margin-bottom: 0pt">preco</p>
</td>
<td style="vertical-align: top;padding: 5pt 5pt 5pt 5pt;overflow: hidden;border: solid #000000 1pt">
<p dir="ltr" style="line-height: 1.2;text-align: center;margin-top: 0pt;margin-bottom: 0pt">descricao</p>
</td>
</tr>
<tr style="height: 0pt">
<td style="vertical-align: top;padding: 5pt 5pt 5pt 5pt;overflow: hidden;border: solid #000000 1pt">
<p dir="ltr" style="line-height: 1.2;text-align: center;margin-top: 0pt;margin-bottom: 0pt">1</p>
</td>
<td style="vertical-align: top;padding: 5pt 5pt 5pt 5pt;overflow: hidden;border: solid #000000 1pt">
<p dir="ltr" style="line-height: 1.2;text-align: center;margin-top: 0pt;margin-bottom: 0pt">bicicleta</p>
</td>
<td style="vertical-align: top;padding: 5pt 5pt 5pt 5pt;overflow: hidden;border: solid #000000 1pt">
<p dir="ltr" style="line-height: 1.2;text-align: center;margin-top: 0pt;margin-bottom: 0pt">800</p>
</td>
<td style="vertical-align: top;padding: 5pt 5pt 5pt 5pt;overflow: hidden;border: solid #000000 1pt">
<p dir="ltr" style="line-height: 1.2;text-align: center;margin-top: 0pt;margin-bottom: 0pt">engrenagem fixa, azul, rápida</p>
</td>
</tr>
<tr style="height: 0pt">
<td style="vertical-align: top;padding: 5pt 5pt 5pt 5pt;overflow: hidden;border: solid #000000 1pt">
<p dir="ltr" style="line-height: 1.2;text-align: center;margin-top: 0pt;margin-bottom: 0pt">2</p>
</td>
<td style="vertical-align: top;padding: 5pt 5pt 5pt 5pt;overflow: hidden;border: solid #000000 1pt">
<p dir="ltr" style="line-height: 1.2;text-align: center;margin-top: 0pt;margin-bottom: 0pt">capacete</p>
</td>
<td style="vertical-align: top;padding: 5pt 5pt 5pt 5pt;overflow: hidden;border: solid #000000 1pt">
<p dir="ltr" style="line-height: 1.2;text-align: center;margin-top: 0pt;margin-bottom: 0pt">20.5</p>
</td>
<td style="vertical-align: top;padding: 5pt 5pt 5pt 5pt;overflow: hidden;border: solid #000000 1pt">
<p dir="ltr" style="line-height: 1.2;text-align: center;margin-top: 0pt;margin-bottom: 0pt">preto, ajustável</p>
</td>
</tr>
<tr style="height: 0pt">
<td style="vertical-align: top;padding: 5pt 5pt 5pt 5pt;overflow: hidden;border: solid #000000 1pt">
<p dir="ltr" style="line-height: 1.2;text-align: center;margin-top: 0pt;margin-bottom: 0pt">3</p>
</td>
<td style="vertical-align: top;padding: 5pt 5pt 5pt 5pt;overflow: hidden;border: solid #000000 1pt">
<p dir="ltr" style="line-height: 1.2;text-align: center;margin-top: 0pt;margin-bottom: 0pt">uniforme</p>
</td>
<td style="vertical-align: top;padding: 5pt 5pt 5pt 5pt;overflow: hidden;border: solid #000000 1pt">
<p dir="ltr" style="line-height: 1.2;text-align: center;margin-top: 0pt;margin-bottom: 0pt">35</p>
</td>
<td style="vertical-align: top;padding: 5pt 5pt 5pt 5pt;overflow: hidden;border: solid #000000 1pt">
<p dir="ltr" style="line-height: 1.2;text-align: center;margin-top: 0pt;margin-bottom: 0pt">pequeno, verde e branco</p>
</td>
</tr>
</tbody>
</table>
<p style="text-align: left">
</p><p dir="ltr" style="line-height: 2.016;background-color: #ffffff;margin-top: 0pt;margin-bottom: 15pt;text-align: left"> As principais dificuldades que essas diferenças entre paradigmas causa:</p>
<ul style="margin-top: 0px;margin-bottom: 0px;text-align: left">
<li style="list-style-type: disc;font-size: 12pt;font-family: Arial;color: #000000;background-color: transparent;font-weight: 400;font-style: normal;font-variant: normal;text-decoration: none;vertical-align: baseline;margin-left: 23pt">
<p dir="ltr" style="line-height: 1.38;text-align: justify;background-color: #ffffff;margin-top: 42pt;margin-bottom: 0pt" role="presentation">Representação dos dados e do modelo, já que as estruturas são distintas;</p>
</li>
<li style="list-style-type: disc;font-size: 12pt;font-family: Arial;color: #000000;background-color: transparent;font-weight: 400;font-style: normal;font-variant: normal;text-decoration: none;vertical-align: baseline;margin-left: 23pt">
<p dir="ltr" style="line-height: 1.38;text-align: justify;background-color: #ffffff;margin-top: 0pt;margin-bottom: 0pt" role="presentation">Mapeamento entre os tipos de dados da linguagem de programação e do banco de dados;</p>
</li>
<li style="list-style-type: disc;font-size: 12pt;font-family: Arial;color: #000000;background-color: transparent;font-weight: 400;font-style: normal;font-variant: normal;text-decoration: none;vertical-align: baseline;margin-left: 23pt">
<p dir="ltr" style="line-height: 1.38;text-align: justify;background-color: #ffffff;margin-top: 0pt;margin-bottom: 52pt" role="presentation">Modelo de integridade relacional do banco relacional;</p>
</li>
</ul>
<p dir="ltr" style="line-height: 1.38;background-color: #ffffff;margin-top: 42pt;margin-bottom: 0pt;padding: 0pt 0pt 52pt;text-align: left"> Outra grande vantagem em utilizar um ORM para representar esta relação entre banco de dados e objetos é que bons ORMs implementam várias questões de segurança buscando evitar ataques comuns, como SQL Injection, CSRF, Session Hijacking, Replay Attack, entre outros. Na prática o que o ORM faz é uma "sanitização" dos dados enviados ao banco de dados, o que consequentemente resulta em um ganho de tempo pelos programadores.</p>
<p dir="ltr" style="line-height: 1.38;background-color: #ffffff;margin-top: 42pt;margin-bottom: 0pt;padding: 0pt 0pt 52pt;text-align: left"><b>Padrões usados no mercado</b></p>
<p dir="ltr" style="line-height: 1.38;margin-top: 0pt;margin-bottom: 0pt;text-align: left">&nbsp;&nbsp;&nbsp;&nbsp;Martin Fowler em seu livro "Padrões de Arquitetura de Aplicações Corporativas" relata dois principais padrões utilizados pela indústrias, sendo eles:</p>
<p style="text-align: left"><b style="font-weight: normal">&nbsp;</b></p>
<ul style="margin-top: 0px;margin-bottom: 0px;text-align: left">
<li style="list-style-type: disc;font-size: 12pt;font-family: Arial;color: #000000;background-color: transparent;font-weight: 400;font-style: normal;font-variant: normal;text-decoration: none;vertical-align: baseline">
<p dir="ltr" style="line-height: 1.38;text-align: justify;margin-top: 0pt;margin-bottom: 0pt" role="presentation">Data Mapper: Neste padrão a classe que representa a entidade (tabela) no banco de dados não deve conhecer os métodos de inserção, busca, atualização e exclusão, estas operações são feitas através de uma classe própria do ORM, deste modo garantindo que as classes que representam as tabelas tenham uma única responsabilidade, este é o padrão mais usado e será demonstrado em um exemplo logo mais.</p>
</li>
<li style="list-style-type: disc;font-size: 12pt;font-family: Arial;color: #000000;background-color: transparent;font-weight: 400;font-style: normal;font-variant: normal;text-decoration: none;vertical-align: baseline">
<p dir="ltr" style="line-height: 1.38;text-align: justify;margin-top: 0pt;margin-bottom: 0pt" role="presentation">Active Record: Neste caso a classe conhece os métodos básicos para se relacionar com o banco de dados, estes métodos são herdados de uma classe do ORM, na prática é feito apenas uma nova instância do objeto desejado e eles já possuem todos os métodos por herança.&nbsp;</p>
</li>
</ul>
<p style="text-align: left">
</p><p style="text-align: left">
</p><h3 style="line-height: 1.38;margin-top: 16pt;margin-bottom: 4pt;text-align: left"><strong>Exemplo usando Prisma ORM</strong></h3>
<p style="text-align: left"><b style="font-weight: normal">&nbsp;</b></p>
<p dir="ltr" style="line-height: 1.38;margin-top: 0pt;margin-bottom: 0pt;text-align: left">&nbsp;&nbsp;&nbsp;&nbsp;O Prisma é um ORM NodeJS que consiste em três ferramentas principais:</p>
<p style="text-align: left"><b style="font-weight: normal">&nbsp;</b></p>
<ul style="margin-top: 0px;margin-bottom: 0px;text-align: left">
<li style="list-style-type: disc;font-size: 11pt;font-family: Arial;color: #000000;background-color: transparent;font-weight: 400;font-style: normal;font-variant: normal;text-decoration: none;vertical-align: baseline">
<p dir="ltr" style="line-height: 1.38;text-align: justify;margin-top: 0pt;margin-bottom: 0pt" role="presentation">Prisma Client: um construtor de consultas gerado automaticamente e fortemente tipado para o Node.js e o TypeScript.</p>
</li>
<li style="list-style-type: disc;font-size: 11pt;font-family: Arial;color: #000000;background-color: transparent;font-weight: 400;font-style: normal;font-variant: normal;text-decoration: none;vertical-align: baseline">
<p dir="ltr" style="line-height: 1.38;text-align: justify;margin-top: 0pt;margin-bottom: 0pt" role="presentation">Prisma Migrate: um sistema declarativo de modelagem e migração de dados.</p>
</li>
<li style="list-style-type: disc;font-size: 11pt;font-family: Arial;color: #000000;background-color: transparent;font-weight: 400;font-style: normal;font-variant: normal;text-decoration: none;vertical-align: baseline">
<p dir="ltr" style="line-height: 1.38;text-align: justify;margin-top: 0pt;margin-bottom: 0pt" role="presentation">Prisma Studio: uma GUI para visualizar e editar dados em seu banco de dados.</p>
</li>
</ul>
<p dir="ltr" style="line-height: 1.38;margin-top: 0pt;margin-bottom: 0pt;text-align: left">&nbsp;&nbsp;&nbsp;&nbsp;Embora o Prisma tenha muitas funcionalidades legais, como uma integração com Typescript automática, geração de migrations automática e um SGBD próprio, o objetivo principal desta redação é usá-lo para exemplificar alguns conceitos comuns que muitos ORMs possuem e não ser um tutorial de Prisma em si.</p>
<h3 style="line-height: 1.38;margin-top: 16pt;margin-bottom: 4pt;text-align: left"><strong>Mapeamento de dados</strong></h3>
<p dir="ltr" style="line-height: 1.38;margin-top: 0pt;margin-bottom: 0pt;text-align: left">&nbsp;&nbsp;&nbsp;&nbsp;</p>
<p dir="ltr" style="line-height: 1.38;margin-top: 0pt;margin-bottom: 0pt;text-align: left">&nbsp;&nbsp;&nbsp;&nbsp;No exemplo abaixo, datasource e generator são entidades de configuração, além disso criamos dois models, Post e User que representam entidades do nosso banco de dados, note que as relações entre tabelas são criadas no próprio model, como no campo posts do model User, campos obrigatórios ou não são definidos pelo marcados "?", este é só um exemplo de como os ORMs mapeam as entidades do banco de dados em objetos na aplicação.</p>
<h3 style="line-height: 1.38;background-color: #f6f8fa;margin-top: 0pt;margin-bottom: 0pt;padding: 16pt 0pt 4pt;text-align: left">datasource db {</h3>
<h3 style="line-height: 1.38;background-color: #f6f8fa;margin-top: 0pt;margin-bottom: 0pt;padding: 12pt 0pt 4pt;text-align: left">&nbsp; provider = "postgresql"</h3>
<h3 style="line-height: 1.38;background-color: #f6f8fa;margin-top: 0pt;margin-bottom: 0pt;padding: 12pt 0pt 4pt;text-align: left">&nbsp; url&nbsp; &nbsp; &nbsp; = env("DATABASE_URL")</h3>
<h3 style="line-height: 1.38;background-color: #f6f8fa;margin-top: 0pt;margin-bottom: 0pt;padding: 12pt 0pt 4pt;text-align: left">}</h3>
<h3 style="line-height: 1.38;background-color: #f6f8fa;margin-top: 0pt;margin-bottom: 0pt;padding: 12pt 0pt 4pt;text-align: left">generator client {</h3>
<h3 style="line-height: 1.38;background-color: #f6f8fa;margin-top: 0pt;margin-bottom: 0pt;padding: 12pt 0pt 4pt;text-align: left">&nbsp; provider = "prisma-client-js"</h3>
<h3 style="line-height: 1.38;background-color: #f6f8fa;margin-top: 0pt;margin-bottom: 0pt;padding: 12pt 0pt 4pt;text-align: left">}</h3>
<h3 style="line-height: 1.38;background-color: #f6f8fa;margin-top: 0pt;margin-bottom: 0pt;padding: 12pt 0pt 4pt;text-align: left">model Post {</h3>
<h3 style="line-height: 1.38;background-color: #f6f8fa;margin-top: 0pt;margin-bottom: 0pt;padding: 12pt 0pt 4pt;text-align: left">&nbsp; id&nbsp; &nbsp; &nbsp; &nbsp; Int &nbsp; &nbsp; @id @default(autoincrement())</h3>
<h3 style="line-height: 1.38;background-color: #f6f8fa;margin-top: 0pt;margin-bottom: 0pt;padding: 12pt 0pt 4pt;text-align: left">&nbsp; title &nbsp; &nbsp; String</h3>
<h3 style="line-height: 1.38;background-color: #f6f8fa;margin-top: 0pt;margin-bottom: 0pt;padding: 12pt 0pt 4pt;text-align: left">&nbsp; content &nbsp; String?</h3>
<h3 style="line-height: 1.38;background-color: #f6f8fa;margin-top: 0pt;margin-bottom: 0pt;padding: 12pt 0pt 4pt;text-align: left">&nbsp; published Boolean @default(false)</h3>
<h3 style="line-height: 1.38;background-color: #f6f8fa;margin-top: 0pt;margin-bottom: 0pt;padding: 12pt 0pt 4pt;text-align: left">&nbsp; author&nbsp; &nbsp; User? &nbsp; @relation(fields: [authorId], references: [id])</h3>
<h3 style="line-height: 1.38;background-color: #f6f8fa;margin-top: 0pt;margin-bottom: 0pt;padding: 12pt 0pt 4pt;text-align: left">&nbsp; authorId&nbsp; Int?</h3>
<h3 style="line-height: 1.38;background-color: #f6f8fa;margin-top: 0pt;margin-bottom: 0pt;padding: 12pt 0pt 4pt;text-align: left">}</h3>
<h3 style="line-height: 1.38;background-color: #f6f8fa;margin-top: 0pt;margin-bottom: 0pt;padding: 12pt 0pt 4pt;text-align: left">model User {</h3>
<h3 style="line-height: 1.38;background-color: #f6f8fa;margin-top: 0pt;margin-bottom: 0pt;padding: 12pt 0pt 4pt;text-align: left">&nbsp; id&nbsp; &nbsp; Int &nbsp; &nbsp; @id @default(autoincrement())</h3>
<h3 style="line-height: 1.38;background-color: #f6f8fa;margin-top: 0pt;margin-bottom: 0pt;padding: 12pt 0pt 4pt;text-align: left">&nbsp; email String&nbsp; @unique</h3>
<h3 style="line-height: 1.38;background-color: #f6f8fa;margin-top: 0pt;margin-bottom: 0pt;padding: 12pt 0pt 4pt;text-align: left">&nbsp; name&nbsp; String?</h3>
<h3 style="line-height: 1.38;background-color: #f6f8fa;margin-top: 0pt;margin-bottom: 0pt;padding: 12pt 0pt 4pt;text-align: left">&nbsp; posts Post[]</h3>
<h3 style="line-height: 1.38;background-color: #f6f8fa;margin-top: 0pt;margin-bottom: 0pt;padding: 12pt 0pt 4pt;text-align: left">}</h3>
<h3 style="line-height: 1.38;margin-top: 16pt;margin-bottom: 4pt;text-align: left">&nbsp;</h3>
<p dir="ltr" style="line-height: 1.38;margin-top: 0pt;margin-bottom: 0pt;text-align: left">&nbsp;&nbsp;&nbsp;&nbsp;Para manipular os dados, normalmente usamos algo como:&nbsp;</p>
<p dir="ltr" style="line-height: 1.38;background-color: #f6f8fa;margin-top: 0pt;margin-bottom: 0pt;text-align: left"><br></p>
<p dir="ltr" style="line-height: 1.38;background-color: #f6f8fa;margin-top: 0pt;margin-bottom: 0pt;text-align: left">import { PrismaClient } from '@prisma/client'</p>
<p dir="ltr" style="line-height: 1.38;background-color: #f6f8fa;margin-top: 0pt;margin-bottom: 0pt;text-align: left">const prisma = new PrismaClient()</p>
<p dir="ltr" style="line-height: 1.38;background-color: #f6f8fa;margin-top: 0pt;margin-bottom: 0pt;text-align: left">// busca todos os usuários com posts</p>
<p dir="ltr" style="line-height: 1.38;background-color: #f6f8fa;margin-top: 0pt;margin-bottom: 0pt;text-align: left">const allUsers = await prisma.user.findMany({</p>
<p dir="ltr" style="line-height: 1.38;background-color: #f6f8fa;margin-top: 0pt;margin-bottom: 0pt;text-align: left">&nbsp; include: { posts: true },</p>
<p dir="ltr" style="line-height: 1.38;background-color: #f6f8fa;margin-top: 0pt;margin-bottom: 0pt;text-align: left">})</p>
<p dir="ltr" style="line-height: 1.38;background-color: #f6f8fa;margin-top: 0pt;margin-bottom: 0pt;text-align: left">// cria um usuário e um post juntos</p>
<p dir="ltr" style="line-height: 1.38;background-color: #f6f8fa;margin-top: 0pt;margin-bottom: 0pt;text-align: left">const user = await prisma.user.create({</p>
<p dir="ltr" style="line-height: 1.38;background-color: #f6f8fa;margin-top: 0pt;margin-bottom: 0pt;text-align: left">&nbsp;data: {</p>
<p dir="ltr" style="line-height: 1.38;background-color: #f6f8fa;margin-top: 0pt;margin-bottom: 0pt;text-align: left">&nbsp;&nbsp;&nbsp;name: 'Alice',</p>
<p dir="ltr" style="line-height: 1.38;background-color: #f6f8fa;margin-top: 0pt;margin-bottom: 0pt;text-align: left">&nbsp;&nbsp;&nbsp;email: 'alice@prisma.io',</p>
<p dir="ltr" style="line-height: 1.38;background-color: #f6f8fa;margin-top: 0pt;margin-bottom: 0pt;text-align: left">&nbsp;&nbsp;&nbsp;posts: {</p>
<p dir="ltr" style="line-height: 1.38;background-color: #f6f8fa;margin-top: 0pt;margin-bottom: 0pt;text-align: left">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;create: { title: 'Join us for Prisma Day 2020' },</p>
<p dir="ltr" style="line-height: 1.38;background-color: #f6f8fa;margin-top: 0pt;margin-bottom: 0pt;text-align: left">&nbsp;&nbsp;&nbsp;},</p>
<p dir="ltr" style="line-height: 1.38;background-color: #f6f8fa;margin-top: 0pt;margin-bottom: 0pt;text-align: left">&nbsp;},</p>
<p dir="ltr" style="line-height: 1.38;background-color: #f6f8fa;margin-top: 0pt;margin-bottom: 0pt;text-align: left">})</p>
<p style="text-align: left"><b style="font-weight: normal">&nbsp;</b></p>
<h3 style="line-height: 1.38;margin-top: 16pt;margin-bottom: 4pt;text-align: left"><b>Migrations</b></h3>
<p dir="ltr" style="line-height: 1.38;margin-top: 0pt;margin-bottom: 0pt;text-align: left">&nbsp;</p>
<p dir="ltr" style="line-height: 1.38;margin-top: 0pt;margin-bottom: 0pt;text-align: left">&nbsp;&nbsp;&nbsp;&nbsp;No Prisma os models estão contidos no arquivo prisma.schema, as migrations fazem a sincronização de tudo contigo neste arquivo, o processo normalmente ocorre da seguinte forma:</p>
<p style="text-align: left"><b style="font-weight: normal">&nbsp;</b></p>
<ol style="margin-top: 0px;margin-bottom: 0px;text-align: left">
<li style="list-style-type: decimal;font-size: 11pt;font-family: Arial;color: #000000;background-color: transparent;font-weight: 400;font-style: normal;font-variant: normal;text-decoration: none;vertical-align: baseline">
<p dir="ltr" style="line-height: 1.38;margin-top: 0pt;margin-bottom: 0pt" role="presentation">O comando prisma migrate dev --name init cria uma nova migrate, que nada mais é que um arquivo .sql com os comandos realizados pelo ORM, neste primeiro caso alguns create table, a estrutura de pastas é bem simples.</p>
</li>
</ol>
<p dir="ltr" style="line-height: 1.38;margin-left: 36pt;background-color: #f6f8fa;margin-top: 0pt;margin-bottom: 0pt;text-align: left">migrations/</p>
<p dir="ltr" style="line-height: 1.38;margin-left: 36pt;background-color: #f6f8fa;margin-top: 0pt;margin-bottom: 0pt;text-align: left">&nbsp;└─ 20210313140442_init/</p>
<p dir="ltr" style="line-height: 1.38;margin-left: 36pt;background-color: #f6f8fa;margin-top: 0pt;margin-bottom: 0pt;text-align: left">&nbsp;&nbsp;&nbsp;└─ migration.sql</p>
<p style="text-align: left"><b style="font-weight: normal">&nbsp;</b></p>
<ol style="margin-top: 0px;margin-bottom: 0px;text-align: left" start="2">
<li style="list-style-type: decimal;font-size: 12pt;font-family: Arial;color: #000000;background-color: transparent;font-weight: 400;font-style: normal;font-variant: normal;text-decoration: none;vertical-align: baseline">
<p dir="ltr" style="line-height: 1.38;margin-top: 0pt;margin-bottom: 0pt" role="presentation">Agora vamos supor que o model de User foi alterado e a coluna "jobTitle String" foi adicionada.</p>
</li>
<li style="list-style-type: decimal;font-size: 12pt;font-family: Arial;color: #000000;background-color: transparent;font-weight: 400;font-style: normal;font-variant: normal;text-decoration: none;vertical-align: baseline">
<p dir="ltr" style="line-height: 1.38;margin-top: 0pt;margin-bottom: 0pt" role="presentation">Deste modo é necessário criar uma nova migrate usando o mesmo comando, que neste caso gera um arquivo .sql que é um alter table.</p>
</li>
</ol>
<p dir="ltr" style="line-height: 1.38;margin-left: 36pt;margin-top: 0pt;margin-bottom: 0pt;text-align: left">prisma migrate dev --name added_job_title.</p>
<ol style="margin-top: 0px;margin-bottom: 0px;text-align: left" start="4">
<li style="list-style-type: decimal;font-size: 12pt;font-family: Arial;color: #000000;background-color: transparent;font-weight: 400;font-style: normal;font-variant: normal;text-decoration: none;vertical-align: baseline">
<p dir="ltr" style="line-height: 1.38;margin-top: 0pt;margin-bottom: 0pt" role="presentation">Por fim, a estrutura de pastas, que também serve com um histórico de alterações do banco de dados, fica da seguinte forma.</p>
</li>
</ol>
<p dir="ltr" style="line-height: 1.38;margin-left: 36pt;background-color: #f6f8fa;margin-top: 0pt;margin-bottom: 0pt;text-align: left">migrations/</p>
<p dir="ltr" style="line-height: 1.38;margin-left: 36pt;background-color: #f6f8fa;margin-top: 0pt;margin-bottom: 0pt;text-align: left">&nbsp;└─ 20210313140442_init/</p>
<p dir="ltr" style="line-height: 1.38;margin-left: 36pt;background-color: #f6f8fa;margin-top: 0pt;margin-bottom: 0pt;text-align: left">&nbsp;&nbsp;&nbsp;└─ migration.sql</p>
<p dir="ltr" style="line-height: 1.38;margin-left: 36pt;background-color: #f6f8fa;margin-top: 0pt;margin-bottom: 0pt;text-align: left">&nbsp;└─ 20210313140442_added_job_title/</p>
<p dir="ltr" style="line-height: 1.38;margin-left: 36pt;background-color: #f6f8fa;margin-top: 0pt;margin-bottom: 0pt;text-align: left">&nbsp;&nbsp;&nbsp;└─ migration.sql</p>
<p dir="ltr" style="line-height: 1.38;margin-top: 0pt;margin-bottom: 0pt;text-align: left">&nbsp;&nbsp;&nbsp;&nbsp;Esta ferramenta além de manter seu banco sincronizado de forma simples, facilita muito o processo de compartilhamento de dados entre um time com mais pessoas, toda e qualquer alteração no banco de dados é bem documentada no código e facilita o entendimento do mesmo.</p>
<p style="text-align: left"><b style="font-weight: normal">&nbsp;</b></p>
<h3 style="line-height: 1.38;margin-top: 16pt;margin-bottom: 4pt;text-align: left">Referências</h3>
<p dir="ltr" style="line-height: 1.38;margin-top: 0pt;margin-bottom: 0pt;text-align: left">Para saber mais sobre o Prisma ORM, acesse: <a style="text-decoration: none" href="https://www.prisma.io/docs/getting-started">https://www.prisma.io/docs/getting-started</a></p>
<p dir="ltr" style="line-height: 1.8;background-color: #ffffff;margin-top: 0pt;margin-bottom: 0pt;text-align: left">Martin Fowler. Patterns of Enterprise Application Architecture, Addison-Wesley, 2002.</p>]]></content:encoded>
													</item>
						<item>
				<title>Python:Django</title>
				<link>https://www.ufsm.br/pet/sistemas-de-informacao/2020/09/30/pythondjango</link>
				<pubDate>Wed, 30 Sep 2020 14:59:23 +0000</pubDate>
						<category><![CDATA[Destaques]]></category>
		<category><![CDATA[Redações]]></category>
		<category><![CDATA[Frameworks]]></category>
		<category><![CDATA[Linguagem de Programação]]></category>

				<guid isPermaLink="false">https://www.ufsm.br/pet/sistemas-de-informacao/?p=2999</guid>
						<description><![CDATA[A linguagem de programação Python foi criada no ano de 1991 com o objetivo de ser de fácil aprendizado e alta produtividade. Apresenta uma sintaxe simples, suportando paradigmas de programação como a programação orientada à objetos e a programação funcional, é multiplataforma, possui um gerenciador de pacotes que contém milhares de pacotes que podem ser [&hellip;]]]></description>
							<content:encoded><![CDATA[  <!-- wp:tadv/classic-paragraph -->
<p><span style="font-weight: 400">A linguagem de programação Python foi criada no ano de 1991 com o objetivo de ser de fácil aprendizado e alta produtividade. Apresenta uma sintaxe simples, suportando paradigmas de programação como a programação orientada à objetos e a programação funcional, é multiplataforma, possui um gerenciador de pacotes que contém milhares de pacotes que podem ser utilizados, trazendo uma versatilidade enorme para a linguagem. Hoje em dia é muito utilizada em diversas áreas como DataScience, Machine Learning e WebDev. </span></p>
<p><span style="font-weight: 400">No PET-Redação de hoje será abordado sobre Django, um framework para desenvolvimento web utilizando o Python, antes disso precisamos entender sobre o Model Template View(MTV). O MVT é a arquitetura utilizada pelo Django, é dividida em três:</span></p>
<p><span style="font-weight: 400">-Model: é responsável pelo mapeamento do banco de dados, sendo formado por modelos, onde cada modelo representa uma tabela e seus atributos representam os campos da tabela.</span></p>
<p><span style="font-weight: 400">-View: é responsável por recepcionar, processar e responder requisições, tratando do acesso ao banco de dados.</span></p>
<p><span style="font-weight: 400">-Template: é responsável pela interface do usuário, contém o HTML, CSS e JavaScript da aplicação.</span></p>
<p><img class="aligncenter wp-image-3001 " src="https://www.ufsm.br/app/uploads/sites/791/2020/09/fb5190cc-2445-450b-a46f-278aa735fd5b.jpg" alt="" width="308" height="363" /></p>
<p style="text-align: center"><span style="font-weight: 400">Fonte: Python Academy</span></p>
<p> </p>
<p><span style="font-weight: 400">Agora que sabemos o básico sobre MVT podemos partir para o Django. Mas afinal, o que é isso?</span></p>
<p><span style="font-weight: 400">O Django é um framework para desenvolvimento web que surgiu em um sistema de um site jornalístico nos Estados Unidos. No ano de 2005 foi disponibilizado para que todos pudessem utilizar e desde então sofreu diversas atualizações. Foi desenvolvido de forma que o desenvolvedor não tenha que se preocupar com tratamento de requisições, mapeamento objeto-relacional e preparações de respostas HTTP. Além disso, a segurança que o framework traz é muito boa já que ataques comuns são tratados como por exemplo SQL injection, CSFR e XSS. Segundo a pesquisa de 2020 de desenvolvedores realizada pela Stack Overflow, o Django é o sétimo framework mais amado pelos desenvolvedores e o quarto mais desejado. </span></p>
<p><span style="font-weight: 400">Como instalar o Django e construir aplicações web? Vamos aprender utilizando o PyCharm e via terminal também.</span></p>
<p><span style="font-weight: 400">Para instalarmos pelo PyCharm é muito simples, abrimos e clicamos em Novo Projeto:</span></p>
<p><img class=" wp-image-3012 aligncenter" src="https://www.ufsm.br/app/uploads/sites/791/2020/09/b9bc5463-f28e-4502-a7e1-32f166aeb3dd-300x181.jpg" alt="" width="555" height="335" /></p>
<p><span style="font-weight: 400">Após, vamos clicar em Django, escolhemos um nome para o projeto e já automaticamente será instalado o virtualenv (é utilizado para isolar o ambiente de desenvolvimento).</span></p>
<p><img class="wp-image-3011 aligncenter" src="https://www.ufsm.br/app/uploads/sites/791/2020/09/8773119d-d5d6-4a8e-9fc6-a0f4905b1791-300x181.jpg" alt="" width="554" height="335" /></p>
<p><span style="font-weight: 400">O projeto será criado e já está configurado para rodarmos o servidor.</span></p>
<p><span style="font-weight: 400">Instalando via terminal:</span></p>
<p><span style="font-weight: 400">Para instalar o Django via terminal primeiramente devemos instalar o venv(virtual environment) para que os módulos sejam instalados apenas nessa aplicação. Para isso utilizamos o comando pip3 install virtualenv :</span></p>
<p><img class="wp-image-3005 aligncenter" src="https://www.ufsm.br/app/uploads/sites/791/2020/09/66592e88-b8d8-4895-a670-a2b743f0b0bd-300x192.jpg" alt="" width="539" height="345" /></p>
<p> </p>
<p><span style="font-weight: 400">Agora precisamos criar um venv, para isso vamos utilizar o comando virtualenv nome_da_venv :</span></p>
<p><img class="wp-image-3004 aligncenter" src="https://www.ufsm.br/app/uploads/sites/791/2020/09/345dc224-3a7d-4f61-8619-abfc093e3a0a-300x191.jpg" alt="" width="539" height="343" /></p>
<p> </p>
<p><span style="font-weight: 400">Antes de instalar o Django devemos ativar o venv, utilizamos o comando source nome_da_venv</span></p>
<p><span style="font-weight: 400">Vamos então instalar o Django. Para isso devemos executar o comando pip3 install django</span></p>
<p><img class="wp-image-3003 aligncenter" src="https://www.ufsm.br/app/uploads/sites/791/2020/09/81af3e3a-144d-4743-8772-2df3b6338da8-300x192.jpg" alt="" width="541" height="346" /></p>
<p><span style="font-weight: 400">Agora o Django está instalado. Vamos criar um projeto utilizando o comando django-admin.py startproject nome_projeto </span></p>
<p><span style="font-weight: 400">O projeto foi criado e está com todos os arquivos necessários para a primeira execução!</span></p>
<p><img class="wp-image-3002 aligncenter" src="https://www.ufsm.br/app/uploads/sites/791/2020/09/03092dbf-5680-46f1-810d-66cf51e16c38-300x193.jpg" alt="" width="541" height="348" /></p>
<p> </p>
<p><span style="font-weight: 400">Execução:</span></p>
<p><span style="font-weight: 400">Vamos utilizar o comando python3 manage.py runserver para executar o servidor e o mesmo será iniciado:</span></p>
<p><img class="wp-image-3007 aligncenter" src="https://www.ufsm.br/app/uploads/sites/791/2020/09/40a3c035-b630-424f-96a0-e0c0d5f85f08-300x113.jpg" alt="" width="566" height="213" /></p>
<p><span style="font-weight: 400">Abrimos o endereço do servidor (</span><a href="http://127.0.0.1:8000/"><span style="font-weight: 400">http://127.0.0.1:8000/</span></a><span style="font-weight: 400">) em um navegador e obteremos a tela inicial do Django:</span></p>
<p><img class="wp-image-3010 aligncenter" src="https://www.ufsm.br/app/uploads/sites/791/2020/09/74dd1361-2e1f-422b-ab09-d289784ac739-300x172.jpg" alt="" width="567" height="325" /></p>
<p><span style="font-weight: 400">Vamos configurar agora um novo usuário para acessar a administração do Django. Para isso, apertamos ctrl + z para finalizar a execução do servidor. Digitamos no terminal python 3 manage.py createsuperuser . Deve-se digitar um nome de usuário, um email e a senha desejada. Após isso o usuário estará criado e já podemos entrar no Django admin. Iniciamos o servidor novamente utilizando o comando python3 manage.py runserver e acessamos o seguinte endereço: </span><a href="http://127.0.0.1:8000/"><span style="font-weight: 400">http://127.0.0.1:8000/</span></a><span style="font-weight: 400">admin</span><span style="font-weight: 400"> . Será aberta a página de login:</span></p>
<p><img class="wp-image-3009 aligncenter" src="https://www.ufsm.br/app/uploads/sites/791/2020/09/948c8e30-4b54-44f8-b331-cff854e6ad60-300x171.jpg" alt="" width="561" height="319" /></p>
<p><span style="font-weight: 400">Digite seu usuário e senha que foram criados anteriormente e clique em Log in. Será aberta a página da administração:</span></p>
<p><img class="wp-image-3008 aligncenter" src="https://www.ufsm.br/app/uploads/sites/791/2020/09/e5ae8bf3-4870-4c6e-9bdd-df97588aac30-300x171.jpg" alt="" width="565" height="322" /></p>
<p><span style="font-weight: 400">Já logado ao Django administration é possível gerenciar usuários e grupos, sendo possível mudar essas configurações de acordo com o que se está desenvolvendo.</span></p>
<p><img class="wp-image-3006 aligncenter" src="https://www.ufsm.br/app/uploads/sites/791/2020/09/1056a45d-e198-4274-80a6-40e028baeb5e-300x172.jpg" alt="" width="567" height="325" /></p>
<p><span style="font-weight: 400">Essa é uma grande vantagem de se utilizar o Django, já que possui esta incrível interface de administração, economizando tempo de desenvolvimento dos programadores.  Agora que criamos um projeto em Django podemos nos aventurar e desenvolver muitas aplicações com fácil aprendizado. Muitas grandes empresas utilizam este framework como o Instagram, NASA, Youtube, dentre muitos outros! Boas criações!</span></p>
<p> </p>
<p><span style="font-weight: 400">Referências: </span></p>
<p><a href="https://pythonacademy.com.br"><span style="font-weight: 400">PythonAcademy</span></a></p>
<p><a href="https://www.treinaweb.com.br/blog/entendendo-o-mtv-do-django/"><span style="font-weight: 400">TreinaWeb</span></a></p>
<p><a href="https://blog.vulpi.com.br/python-como-surgiu/"><span style="font-weight: 400">Vulpi</span></a></p>
<p><a href="https://www.djangoproject.com"><span style="font-weight: 400">DjangoProject</span></a></p>
<p><a href="https://tutorial.djangogirls.org/pt/django/"><span style="font-weight: 400">DjangoGirls</span></a></p>
<!-- /wp:tadv/classic-paragraph -->]]></content:encoded>
													</item>
						<item>
				<title>API Laravel</title>
				<link>https://www.ufsm.br/pet/sistemas-de-informacao/2020/08/25/api-laravel</link>
				<pubDate>Tue, 25 Aug 2020 18:38:00 +0000</pubDate>
						<category><![CDATA[Destaques]]></category>
		<category><![CDATA[Redações]]></category>
		<category><![CDATA[Back-End e BD]]></category>
		<category><![CDATA[Frameworks]]></category>

				<guid isPermaLink="false">https://www.ufsm.br/pet/sistemas-de-informacao/?p=2707</guid>
						<description><![CDATA[Na edição desta semana do PET-Redação, o tema da vez é Laravel, um dos frameworks PhP mais famosos e utilizado. Para descobrirmos um pouco mais sobre este poderoso framework, vamos criar uma API Rest simples. O que é e por que Laravel? O Laravel utiliza a arquitetura MVC por padrão, embora seja possível criar projetos sem ele, [&hellip;]]]></description>
							<content:encoded><![CDATA[  <!-- wp:tadv/classic-paragraph -->
<section id="h.40727b8077023b12_23" class="yaqOZd">
<div class="mYVXT">
<div class="LS81yb VICjCf">
<div class="hJDwNd-AhqUyc-uQSCkd purZT-AhqUyc-II5mzb pSzOP-AhqUyc-qWD73c JNdkSc">
<div class="JNdkSc-SmKAyb">
<div class="">
<div class="oKdM2c Kzv0Me">
<div id="h.40727b8077023b12_20" class="hJDwNd-AhqUyc-uQSCkd jXK9ad D2fZ2 OjCsFc wHaque GNzUNc">
<div class="jXK9ad-SmKAyb">
<div class="tyJCtd mGzaTb baZpAe">
<p class="zfr3Q" dir="ltr">Na edição desta semana do PET-Redação, o tema da vez é Laravel, um dos frameworks PhP mais famosos e utilizado. Para descobrirmos um pouco mais sobre este poderoso framework, vamos criar uma API Rest simples.</p>
<p class="zfr3Q" dir="ltr"><strong>O que é e por que Laravel?</strong></p>
<p class="zfr3Q" dir="ltr">O Laravel<a class="XqQF9c" href="https://www.google.com/url?q=https%3A%2F%2Fwww.devmedia.com.br%2Fa-arquitetura-mvc-no-desenvolvimento-em-php%2F23121&amp;sa=D&amp;sntz=1&amp;usg=AFQjCNEnOw07WjzaLlN2u3I6fqvJdaE42w" target="_blank" rel="noopener noreferrer"> utiliza a arquitetura MVC</a> por padrão, embora seja possível criar projetos sem ele, tem como principal característica ajudar a desenvolver aplicações seguras e performáticas de forma rápida, com código limpo e simples, já que ele incentiva o uso de boas práticas de programação e utiliza o padrão PSR-2 como guia para estilo de escrita do código.</p>
<p class="zfr3Q" dir="ltr">Para interface de linha de comando o Laravel utiliza do Artisan, Esta interface fornece um bom número de comandos auxiliares para que você use durante o desenvolvimento de sua aplicação. O artisan é impulsionado pelo poderoso componente de Console do Symfony framework.</p>
<p class="zfr3Q" dir="ltr">Para a criação de interface gráfica, o Laravel utiliza uma Engine de template chamada Blade, que traz uma gama de ferramentas que ajudam a criar interfaces bonitas e funcionais de forma rápida e evitar a duplicação de código.</p>
<p class="zfr3Q" dir="ltr"><a class="XqQF9c" href="https://www.google.com/url?q=https%3A%2F%2Fwww.devmedia.com.br%2Ftrabalhando-com-diversos-tipos-de-banco-de-dados-no-php%2F33165&amp;sa=D&amp;sntz=1&amp;usg=AFQjCNGrr_mtZyAwpmdY9fi52PTkvzGiSg" target="_blank" rel="noopener noreferrer">Para se comunicar com um Banco de Dados</a> o Laravel utiliza uma implementação simples do ActiveRecord chamada de Eloquent ORM, que é uma ferramenta que traz várias funcionalidades para facilitar a inserção, atualização, busca e exclusão de registros. Com configuração simples e pequena e com pouco código podemos configurar a conexão com Banco de Dados e trabalhar com ele.</p>
<p class="zfr3Q" dir="ltr">Além disso, o Laravel é gratuito, possui uma ótima documentação, uma comunidade muito ativa, uma curva de aprendizado bem menor do que outros frameworks e é amplamente utilizado em projetos reais.</p>
<p class="zfr3Q" dir="ltr"><strong>API</strong></p>
<p class="zfr3Q" dir="ltr">Antes de tudo, deve-se esclarecer alguns pontos, foi escolhido o MySQL como banco de dados, para testar nossas rotas usaremos o Insomnia, para rodar o servidor usaremos o próprio Laravel e para iniciarmos o projeto com Laravel usaremos o Composer, o link para o download do mesmo está nas referências e sua instalação é super simples!</p>
<p class="zfr3Q" dir="ltr">Agora sem mais delongas, vamos começar nosso projeto em Laravel e dar início a nossa API, para isso usamos o comando:</p>
<p class="zfr3Q" dir="ltr"><code><strong>composer create-project --prefer-dist laravel/laravel api</strong></code></p>
<p class="zfr3Q" dir="ltr">A última palavra “api” é o nome do nosso projeto, este processo inicial pode demorar alguns minutos.</p>
<p class="zfr3Q" dir="ltr">Como nosso próximo passo, criaremos uma database no MySQL, dando um simples comando: <strong>create database Contact</strong>, sendo <strong>Contact</strong> o seu nome. Após isso vamos até o arquivo <strong>.env </strong>na pasta raiz do nosso projeto, nele definimos várias configurações de nossa aplicação, como os dados de configuração da conexão do banco de dados, vale lembrar que este arquivo futuramente não deve ser exposto em um projeto, nosso arquivo deve ter mais ou menos essa cara:</p>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</section>
<section id="h.40727b8077023b12_27" class="yaqOZd">
<div class="yaqOZd IFuOkc"> </div>
<div class="mYVXT">
<div class="LS81yb VICjCf">
<div class="hJDwNd-AhqUyc-ibL1re JNdkSc L6cTce-purZT L6cTce-pSzOP">
<div class="JNdkSc-SmKAyb">
<div class=""> </div>
</div>
</div>
<div class="hJDwNd-AhqUyc-OiUrBf purZT-AhqUyc-II5mzb pSzOP-AhqUyc-qWD73c JNdkSc">
<div class="JNdkSc-SmKAyb">
<div class="">
<div class="oKdM2c Kzv0Me">
<div id="h.40727b8077023b12_24" class="hJDwNd-AhqUyc-OiUrBf jXK9ad D2fZ2 OjCsFc wHaque">
<div class="jXK9ad-SmKAyb">
<div class="tyJCtd baZpAe">
<div class="t3iYD"><img class="alignnone  wp-image-2828 aligncenter" src="https://www.ufsm.br/app/uploads/sites/791/2020/09/laravel1-300x111.png" alt="" width="481" height="178" /></div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="hJDwNd-AhqUyc-ibL1re JNdkSc L6cTce-purZT L6cTce-pSzOP">
<div class="JNdkSc-SmKAyb">
<div class=""> </div>
</div>
</div>
</div>
</div>
</section>
<section id="h.40727b8077023b12_32" class="yaqOZd">
<div class="yaqOZd IFuOkc"> </div>
<div class="mYVXT">
<div class="LS81yb VICjCf">
<div class="hJDwNd-AhqUyc-uQSCkd purZT-AhqUyc-II5mzb pSzOP-AhqUyc-qWD73c JNdkSc">
<div class="JNdkSc-SmKAyb">
<div class="">
<div class="oKdM2c Kzv0Me">
<div id="h.40727b8077023b12_29" class="hJDwNd-AhqUyc-uQSCkd jXK9ad D2fZ2 OjCsFc wHaque GNzUNc">
<div class="jXK9ad-SmKAyb">
<div class="tyJCtd mGzaTb baZpAe">
<p class="zfr3Q" dir="ltr">Para rodar o servidor do Laravel, basta usarmos o comando:</p>
<p class="zfr3Q" dir="ltr"><code><strong>php artisan serve</strong></code></p>
<p class="zfr3Q" dir="ltr">Agora basta acessar o endereço gerado pelo Laravel no navegador, este comando deve permanecer rodando para que as execuções das rotas funcionem futuramente.</p>
<p class="zfr3Q" dir="ltr">O próximo passo é criarmos a nossa Model, junto a isso vamos criar uma Migration, que funciona como um controle de versão do nosso banco de dados em arquivos PhP, usando o Eloquent não é necessário criar scripts SQL, para isso basta:</p>
<p class="zfr3Q" dir="ltr"><code><strong>php artisan make:model Contact -m</strong></code></p>
<p class="zfr3Q" dir="ltr">Onde <strong>Contact </strong>é o nome do model e a flag -m diz ao Laravel para já criar uma migrate para esta ação.</p>
<p class="zfr3Q" dir="ltr">Navegando até a pasta <strong>app/database/migrations</strong> temos alguns arquivos, os primeiros são criados automaticamente pelo Laravel e não há necessidade de alterarmos eles, já a última migration que deve ter o nome com o final create_contacts_table é onde definimos nossos campos da tabela contacts, as migrations por padrão possuem dois métodos, <strong>up </strong>e <strong>down</strong>, o up é executado quando executamos a migration e o down quando revertemos ela, caso seja necessário, nosso arquivo deve ser semelhante a isto:</p>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</section>
<section id="h.40727b8077023b12_36" class="yaqOZd">
<div class="yaqOZd IFuOkc"> </div>
<div class="mYVXT">
<div class="LS81yb VICjCf">
<div class="hJDwNd-AhqUyc-ibL1re JNdkSc L6cTce-purZT L6cTce-pSzOP">
<div class="JNdkSc-SmKAyb">
<div class=""> </div>
</div>
</div>
<div class="hJDwNd-AhqUyc-OiUrBf purZT-AhqUyc-II5mzb pSzOP-AhqUyc-qWD73c JNdkSc">
<div class="JNdkSc-SmKAyb">
<div class="">
<div class="oKdM2c Kzv0Me">
<div id="h.40727b8077023b12_33" class="hJDwNd-AhqUyc-OiUrBf jXK9ad D2fZ2 OjCsFc wHaque">
<div class="jXK9ad-SmKAyb">
<div class="tyJCtd baZpAe">
<div class="t3iYD"><img class="wp-image-2829 aligncenter" src="https://www.ufsm.br/app/uploads/sites/791/2020/09/laravel2-300x160.png" alt="" width="452" height="241" /></div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="hJDwNd-AhqUyc-ibL1re JNdkSc L6cTce-purZT L6cTce-pSzOP">
<div class="JNdkSc-SmKAyb">
<div class=""> </div>
</div>
</div>
</div>
</div>
</section>
<section id="h.40727b8077023b12_40" class="yaqOZd">
<div class="yaqOZd IFuOkc"> </div>
<div class="mYVXT">
<div class="LS81yb VICjCf">
<div class="hJDwNd-AhqUyc-uQSCkd purZT-AhqUyc-II5mzb pSzOP-AhqUyc-qWD73c JNdkSc">
<div class="JNdkSc-SmKAyb">
<div class="">
<div class="oKdM2c Kzv0Me">
<div id="h.40727b8077023b12_37" class="hJDwNd-AhqUyc-uQSCkd jXK9ad D2fZ2 OjCsFc wHaque GNzUNc">
<div class="jXK9ad-SmKAyb">
<div class="tyJCtd mGzaTb baZpAe">
<p class="zfr3Q" dir="ltr">Agora devemos executar nossa migrate, para isso usa-se o comando:</p>
<p class="zfr3Q" dir="ltr"><code><strong>php artisan migrate</strong></code></p>
<p class="zfr3Q" dir="ltr">No nosso banco de dados, na database <strong>Contact</strong>, será criado algumas tabelas do Laravel feitas nas migrates padrão e a nossa tabela contacts, que por padrão é criada no plural, ela deve ter a seguinte cara:</p>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</section>
<section id="h.40727b8077023b12_44" class="yaqOZd">
<div class="yaqOZd IFuOkc"> </div>
<div class="mYVXT">
<div class="LS81yb VICjCf">
<div class="hJDwNd-AhqUyc-uQSCkd purZT-AhqUyc-II5mzb pSzOP-AhqUyc-qWD73c JNdkSc">
<div class="JNdkSc-SmKAyb">
<div class="">
<div class="oKdM2c Kzv0Me">
<div id="h.40727b8077023b12_41" class="hJDwNd-AhqUyc-uQSCkd jXK9ad D2fZ2 OjCsFc wHaque">
<div class="jXK9ad-SmKAyb">
<div class="tyJCtd baZpAe">
<div class="t3iYD"><img class="wp-image-2830 aligncenter" src="https://www.ufsm.br/app/uploads/sites/791/2020/09/laravel3-300x46.png" alt="" width="893" height="137" /></div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</section>
<section id="h.40727b8077023b12_48" class="yaqOZd">
<div class="yaqOZd IFuOkc"> </div>
<div class="mYVXT">
<div class="LS81yb VICjCf">
<div class="hJDwNd-AhqUyc-uQSCkd purZT-AhqUyc-II5mzb pSzOP-AhqUyc-qWD73c JNdkSc">
<div class="JNdkSc-SmKAyb">
<div class="">
<div class="oKdM2c Kzv0Me">
<div id="h.40727b8077023b12_45" class="hJDwNd-AhqUyc-uQSCkd jXK9ad D2fZ2 OjCsFc wHaque GNzUNc">
<div class="jXK9ad-SmKAyb">
<div class="tyJCtd mGzaTb baZpAe">
<p class="zfr3Q" dir="ltr">Agora vamos seguir para a criação do nosso controller, para isso usa-se o comando:</p>
<p class="zfr3Q" dir="ltr"><code><strong>php make:controller ContactController</strong></code></p>
<p class="zfr3Q" dir="ltr">Nosso primeiro método será o store, ele será responsável por salvar um novo contato, uma possível forma de implementar isto é dessa forma:</p>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</section>
<section id="h.40727b8077023b12_52" class="yaqOZd">
<div class="yaqOZd IFuOkc"> </div>
<div class="mYVXT">
<div class="LS81yb VICjCf">
<div class="hJDwNd-AhqUyc-R6PoUb JNdkSc L6cTce-purZT L6cTce-pSzOP">
<div class="JNdkSc-SmKAyb">
<div class=""> </div>
</div>
</div>
<div class="hJDwNd-AhqUyc-EehZO purZT-AhqUyc-II5mzb pSzOP-AhqUyc-qWD73c JNdkSc">
<div class="JNdkSc-SmKAyb">
<div class="">
<div class="oKdM2c Kzv0Me">
<div id="h.40727b8077023b12_49" class="hJDwNd-AhqUyc-EehZO jXK9ad D2fZ2 OjCsFc wHaque">
<div class="jXK9ad-SmKAyb">
<div class="tyJCtd baZpAe">
<div class="t3iYD"><img class="wp-image-2831 aligncenter" src="https://www.ufsm.br/app/uploads/sites/791/2020/09/laravel4-300x142.png" alt="" width="471" height="223" /></div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="hJDwNd-AhqUyc-R6PoUb JNdkSc L6cTce-purZT L6cTce-pSzOP">
<div class="JNdkSc-SmKAyb">
<div class=""> </div>
</div>
</div>
</div>
</div>
</section>
<section id="h.40727b8077023b12_56" class="yaqOZd">
<div class="yaqOZd IFuOkc"> </div>
<div class="mYVXT">
<div class="LS81yb VICjCf">
<div class="hJDwNd-AhqUyc-uQSCkd purZT-AhqUyc-II5mzb pSzOP-AhqUyc-qWD73c JNdkSc">
<div class="JNdkSc-SmKAyb">
<div class="">
<div class="oKdM2c Kzv0Me">
<div id="h.40727b8077023b12_53" class="hJDwNd-AhqUyc-uQSCkd jXK9ad D2fZ2 OjCsFc wHaque GNzUNc">
<div class="jXK9ad-SmKAyb">
<div class="tyJCtd mGzaTb baZpAe">
<p class="zfr3Q" dir="ltr">Acima usamos um bloco try/catch, no try criamos um novo <strong>Contact</strong>, atribuímos a ele o valor que deve vir na requisição($request), após o método save é chamado, este que já é implementado pelo Laravel, depois é retornado uma mensagem em formato de JSON para informar que tudo ocorreu bem, caso contrário o bloco catch irá capturar e exibir o erro. Vale lembrar que o formato JSON é muito utilizado mas não é o único suportado.</p>
<p class="zfr3Q" dir="ltr">O próximo passo é criarmos a rota para este método, para isso basta acessar o arquivo <strong>routes/api.php</strong> e no fim dele escrever:</p>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</section>
<section id="h.40727b8077023b12_60" class="yaqOZd">
<div class="yaqOZd IFuOkc"> </div>
<div class="mYVXT">
<div class="LS81yb VICjCf">
<div class="hJDwNd-AhqUyc-uQSCkd purZT-AhqUyc-II5mzb pSzOP-AhqUyc-qWD73c JNdkSc">
<div class="JNdkSc-SmKAyb">
<div class="">
<div class="oKdM2c Kzv0Me">
<div id="h.40727b8077023b12_57" class="hJDwNd-AhqUyc-uQSCkd jXK9ad D2fZ2 OjCsFc wHaque">
<div class="jXK9ad-SmKAyb">
<div class="tyJCtd baZpAe">
<div class="t3iYD"><img class="wp-image-2832 aligncenter" src="https://www.ufsm.br/app/uploads/sites/791/2020/09/laravel5-300x17.png" alt="" width="865" height="49" /></div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</section>
<section id="h.40727b8077023b12_64" class="yaqOZd">
<div class="yaqOZd IFuOkc"> </div>
<div class="mYVXT">
<div class="LS81yb VICjCf">
<div class="hJDwNd-AhqUyc-uQSCkd purZT-AhqUyc-II5mzb pSzOP-AhqUyc-qWD73c JNdkSc">
<div class="JNdkSc-SmKAyb">
<div class="">
<div class="oKdM2c Kzv0Me">
<div id="h.40727b8077023b12_61" class="hJDwNd-AhqUyc-uQSCkd jXK9ad D2fZ2 OjCsFc wHaque GNzUNc">
<div class="jXK9ad-SmKAyb">
<div class="tyJCtd mGzaTb baZpAe">
<p class="zfr3Q" dir="ltr">O primeiro parâmetro é a <strong>rota</strong> que será acessada e o segundo é a <strong>classe@método</strong> responsável por executar a rota. Se nada der errado, após executar a rota no Insomnia os dados já devem estar contidos no banco de dados:</p>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</section>
<section id="h.40727b8077023b12_68" class="yaqOZd">
<div class="yaqOZd IFuOkc"> </div>
<div class="mYVXT">
<div class="LS81yb VICjCf">
<div class="hJDwNd-AhqUyc-ibL1re JNdkSc L6cTce-purZT L6cTce-pSzOP">
<div class="JNdkSc-SmKAyb">
<div class=""> </div>
</div>
</div>
<div class="hJDwNd-AhqUyc-OiUrBf purZT-AhqUyc-II5mzb pSzOP-AhqUyc-qWD73c JNdkSc">
<div class="JNdkSc-SmKAyb">
<div class="">
<div class="oKdM2c Kzv0Me">
<div id="h.40727b8077023b12_65" class="hJDwNd-AhqUyc-OiUrBf jXK9ad D2fZ2 OjCsFc wHaque">
<div class="jXK9ad-SmKAyb">
<div class="tyJCtd baZpAe">
<div class="t3iYD"><img class="wp-image-2833 aligncenter" src="https://www.ufsm.br/app/uploads/sites/791/2020/09/laravel6-300x65.png" alt="" width="720" height="156" /></div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="hJDwNd-AhqUyc-ibL1re JNdkSc L6cTce-purZT L6cTce-pSzOP">
<div class="JNdkSc-SmKAyb">
<div class=""> </div>
</div>
</div>
</div>
</div>
</section>
<section id="h.40727b8077023b12_72" class="yaqOZd">
<div class="yaqOZd IFuOkc"> </div>
<div class="mYVXT">
<div class="LS81yb VICjCf">
<div class="hJDwNd-AhqUyc-uQSCkd purZT-AhqUyc-II5mzb pSzOP-AhqUyc-qWD73c JNdkSc">
<div class="JNdkSc-SmKAyb">
<div class="">
<div class="oKdM2c Kzv0Me">
<div id="h.40727b8077023b12_69" class="hJDwNd-AhqUyc-uQSCkd jXK9ad D2fZ2 OjCsFc wHaque GNzUNc">
<div class="jXK9ad-SmKAyb">
<div class="tyJCtd mGzaTb baZpAe">
<p class="zfr3Q" dir="ltr">Nossos próximos métodos serão o index, responsável por listar todos os <strong>Contacts </strong>e <strong>show</strong>, responsável por mostrar um Contact com base no id dele recebido por parâmetro, uma implementação viável para estes métodos é:</p>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</section>
<section id="h.40727b8077023b12_76" class="yaqOZd">
<div class="yaqOZd IFuOkc"> </div>
<div class="mYVXT">
<div class="LS81yb VICjCf">
<div class="hJDwNd-AhqUyc-ibL1re JNdkSc L6cTce-purZT L6cTce-pSzOP">
<div class="JNdkSc-SmKAyb">
<div class=""> </div>
</div>
</div>
<div class="hJDwNd-AhqUyc-OiUrBf purZT-AhqUyc-II5mzb pSzOP-AhqUyc-qWD73c JNdkSc">
<div class="JNdkSc-SmKAyb">
<div class="">
<div class="oKdM2c Kzv0Me">
<div id="h.40727b8077023b12_73" class="hJDwNd-AhqUyc-OiUrBf jXK9ad D2fZ2 OjCsFc wHaque">
<div class="jXK9ad-SmKAyb">
<div class="tyJCtd baZpAe">
<div class="t3iYD"><img class="wp-image-2834 aligncenter" src="https://www.ufsm.br/app/uploads/sites/791/2020/09/laravel7-300x117.png" alt="" width="536" height="209" /></div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="hJDwNd-AhqUyc-ibL1re JNdkSc L6cTce-purZT L6cTce-pSzOP">
<div class="JNdkSc-SmKAyb">
<div class=""> </div>
</div>
</div>
</div>
</div>
</section>
<section id="h.40727b8077023b12_80" class="yaqOZd">
<div class="yaqOZd IFuOkc"> </div>
<div class="mYVXT">
<div class="LS81yb VICjCf">
<div class="hJDwNd-AhqUyc-uQSCkd purZT-AhqUyc-II5mzb pSzOP-AhqUyc-qWD73c JNdkSc">
<div class="JNdkSc-SmKAyb">
<div class="">
<div class="oKdM2c Kzv0Me">
<div id="h.40727b8077023b12_77" class="hJDwNd-AhqUyc-uQSCkd jXK9ad D2fZ2 OjCsFc wHaque GNzUNc">
<div class="jXK9ad-SmKAyb">
<div class="tyJCtd mGzaTb baZpAe">
<p class="zfr3Q" dir="ltr">Note que no método <strong>index</strong>, a função <strong>all </strong>pode ou não receber parâmetros, estes serão os campos exibidos quando for feita uma requisição à API, caso a função não receba parâmetros, todos os campos da tabela correspondente serão retornados.</p>
<p class="zfr3Q" dir="ltr">A rota para estes métodos é:</p>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</section>
<section id="h.40727b8077023b12_84" class="yaqOZd">
<div class="yaqOZd IFuOkc"> </div>
<div class="mYVXT">
<div class="LS81yb VICjCf">
<div class="hJDwNd-AhqUyc-ibL1re JNdkSc L6cTce-purZT L6cTce-pSzOP">
<div class="JNdkSc-SmKAyb">
<div class=""> </div>
</div>
</div>
<div class="hJDwNd-AhqUyc-OiUrBf purZT-AhqUyc-II5mzb pSzOP-AhqUyc-qWD73c JNdkSc">
<div class="JNdkSc-SmKAyb">
<div class="">
<div class="oKdM2c Kzv0Me">
<div id="h.40727b8077023b12_81" class="hJDwNd-AhqUyc-OiUrBf jXK9ad D2fZ2 OjCsFc wHaque">
<div class="jXK9ad-SmKAyb">
<div class="tyJCtd baZpAe">
<div class="t3iYD"><img class="wp-image-2835 aligncenter" src="https://www.ufsm.br/app/uploads/sites/791/2020/09/laravel8-300x47.png" alt="" width="702" height="110" /></div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="hJDwNd-AhqUyc-ibL1re JNdkSc L6cTce-purZT L6cTce-pSzOP">
<div class="JNdkSc-SmKAyb">
<div class=""> </div>
</div>
</div>
</div>
</div>
</section>
<section id="h.40727b8077023b12_96" class="yaqOZd">
<div class="yaqOZd IFuOkc"> </div>
<div class="mYVXT">
<div class="LS81yb VICjCf">
<div class="hJDwNd-AhqUyc-uQSCkd purZT-AhqUyc-II5mzb pSzOP-AhqUyc-qWD73c JNdkSc">
<div class="JNdkSc-SmKAyb">
<div class="">
<div class="oKdM2c Kzv0Me">
<div id="h.40727b8077023b12_93" class="hJDwNd-AhqUyc-uQSCkd jXK9ad D2fZ2 OjCsFc wHaque GNzUNc">
<div class="jXK9ad-SmKAyb">
<div class="tyJCtd mGzaTb baZpAe">
<p class="zfr3Q" dir="ltr">No Insomnia os testes para a rota do método index podem ser feitos deste modo, note que apenas os campos passados como parâmetro para a função all foram retornados.</p>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</section>
<section id="h.40727b8077023b12_100" class="yaqOZd">
<div class="yaqOZd IFuOkc"> </div>
<div class="mYVXT">
<div class="LS81yb VICjCf">
<div class="hJDwNd-AhqUyc-R6PoUb JNdkSc L6cTce-purZT L6cTce-pSzOP">
<div class="JNdkSc-SmKAyb">
<div class=""> </div>
</div>
</div>
<div class="hJDwNd-AhqUyc-EehZO purZT-AhqUyc-II5mzb pSzOP-AhqUyc-qWD73c JNdkSc">
<div class="JNdkSc-SmKAyb">
<div class="">
<div class="oKdM2c Kzv0Me">
<div id="h.40727b8077023b12_97" class="hJDwNd-AhqUyc-EehZO jXK9ad D2fZ2 OjCsFc wHaque">
<div class="jXK9ad-SmKAyb">
<div class="tyJCtd baZpAe">
<div class="t3iYD"><img class="wp-image-2836 aligncenter" src="https://www.ufsm.br/app/uploads/sites/791/2020/09/laravel9-300x109.png" alt="" width="636" height="231" /></div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="hJDwNd-AhqUyc-R6PoUb JNdkSc L6cTce-purZT L6cTce-pSzOP">
<div class="JNdkSc-SmKAyb">
<div class=""> </div>
</div>
</div>
</div>
</div>
</section>
<section id="h.40727b8077023b12_104" class="yaqOZd">
<div class="yaqOZd IFuOkc"> </div>
<div class="mYVXT">
<div class="LS81yb VICjCf">
<div class="hJDwNd-AhqUyc-uQSCkd purZT-AhqUyc-II5mzb pSzOP-AhqUyc-qWD73c JNdkSc">
<div class="JNdkSc-SmKAyb">
<div class="">
<div class="oKdM2c Kzv0Me">
<div id="h.40727b8077023b12_101" class="hJDwNd-AhqUyc-uQSCkd jXK9ad D2fZ2 OjCsFc wHaque GNzUNc">
<div class="jXK9ad-SmKAyb">
<div class="tyJCtd mGzaTb baZpAe">
<p class="zfr3Q" dir="ltr">Já para os testes da rota do método show podem ser feitos assim:</p>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</section>
<section id="h.40727b8077023b12_108" class="yaqOZd">
<div class="yaqOZd IFuOkc"> </div>
<div class="mYVXT">
<div class="LS81yb VICjCf">
<div class="hJDwNd-AhqUyc-R6PoUb JNdkSc L6cTce-purZT L6cTce-pSzOP">
<div class="JNdkSc-SmKAyb">
<div class=""> </div>
</div>
</div>
<div class="hJDwNd-AhqUyc-EehZO purZT-AhqUyc-II5mzb pSzOP-AhqUyc-qWD73c JNdkSc">
<div class="JNdkSc-SmKAyb">
<div class="">
<div class="oKdM2c Kzv0Me">
<div id="h.40727b8077023b12_105" class="hJDwNd-AhqUyc-EehZO jXK9ad D2fZ2 OjCsFc wHaque">
<div class="jXK9ad-SmKAyb">
<div class="tyJCtd baZpAe">
<div class="t3iYD"><img class="wp-image-2837 aligncenter" src="https://www.ufsm.br/app/uploads/sites/791/2020/09/laravel10-300x70.png" alt="" width="673" height="157" /></div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="hJDwNd-AhqUyc-R6PoUb JNdkSc L6cTce-purZT L6cTce-pSzOP">
<div class="JNdkSc-SmKAyb">
<div class=""> </div>
</div>
</div>
</div>
</div>
</section>
<section id="h.40727b8077023b12_112" class="yaqOZd">
<div class="yaqOZd IFuOkc"> </div>
<div class="mYVXT">
<div class="LS81yb VICjCf">
<div class="hJDwNd-AhqUyc-uQSCkd purZT-AhqUyc-II5mzb pSzOP-AhqUyc-qWD73c JNdkSc">
<div class="JNdkSc-SmKAyb">
<div class="">
<div class="oKdM2c Kzv0Me">
<div id="h.40727b8077023b12_109" class="hJDwNd-AhqUyc-uQSCkd jXK9ad D2fZ2 OjCsFc wHaque GNzUNc">
<div class="jXK9ad-SmKAyb">
<div class="tyJCtd mGzaTb baZpAe">
<p class="zfr3Q" dir="ltr">A próxima funcionalidade é a possibilidade de atualizar dados já existentes no banco de dados, faremos isso através do método <strong>update</strong>, ele assim como o método show recebe o id do dado que será atualizado, podemos implementá lo desta forma:</p>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</section>
<section id="h.40727b8077023b12_116" class="yaqOZd">
<div class="yaqOZd IFuOkc"> </div>
<div class="mYVXT">
<div class="LS81yb VICjCf">
<div class="hJDwNd-AhqUyc-c5RTEf JNdkSc L6cTce-purZT L6cTce-pSzOP">
<div class="JNdkSc-SmKAyb">
<div class=""> </div>
</div>
</div>
<div class="hJDwNd-AhqUyc-qWD73c purZT-AhqUyc-II5mzb pSzOP-AhqUyc-qWD73c JNdkSc">
<div class="JNdkSc-SmKAyb">
<div class="">
<div class="oKdM2c Kzv0Me">
<div id="h.40727b8077023b12_113" class="hJDwNd-AhqUyc-qWD73c jXK9ad D2fZ2 OjCsFc wHaque">
<div class="jXK9ad-SmKAyb">
<div class="tyJCtd baZpAe">
<div class="t3iYD"><img class="wp-image-2838 aligncenter" src="https://www.ufsm.br/app/uploads/sites/791/2020/09/laravel11-300x180.png" alt="" width="477" height="286" /></div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="hJDwNd-AhqUyc-c5RTEf JNdkSc L6cTce-purZT L6cTce-pSzOP">
<div class="JNdkSc-SmKAyb">
<div class=""> </div>
</div>
</div>
</div>
</div>
</section>
<section id="h.40727b8077023b12_120" class="yaqOZd">
<div class="yaqOZd IFuOkc"> </div>
<div class="mYVXT">
<div class="LS81yb VICjCf">
<div class="hJDwNd-AhqUyc-uQSCkd purZT-AhqUyc-II5mzb pSzOP-AhqUyc-qWD73c JNdkSc">
<div class="JNdkSc-SmKAyb">
<div class="">
<div class="oKdM2c Kzv0Me">
<div id="h.40727b8077023b12_117" class="hJDwNd-AhqUyc-uQSCkd jXK9ad D2fZ2 OjCsFc wHaque GNzUNc">
<div class="jXK9ad-SmKAyb">
<div class="tyJCtd mGzaTb baZpAe">
<p class="zfr3Q" dir="ltr">Primeiro busca-se o dado correspondente ao id recebido por parâmetro, após isso atualizamos seus valores com os que vem do $request e aplica-se o método update.</p>
<p class="zfr3Q" dir="ltr">A execução deste código usa a seguinte rota:</p>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</section>
<section id="h.40727b8077023b12_124" class="yaqOZd">
<div class="yaqOZd IFuOkc"> </div>
<div class="mYVXT">
<div class="LS81yb VICjCf">
<div class="hJDwNd-AhqUyc-zQtlcf purZT-AhqUyc-II5mzb pSzOP-AhqUyc-qWD73c JNdkSc">
<div class="JNdkSc-SmKAyb">
<div class="">
<div class="oKdM2c Kzv0Me">
<div id="h.40727b8077023b12_121" class="hJDwNd-AhqUyc-zQtlcf jXK9ad D2fZ2 OjCsFc wHaque">
<div class="jXK9ad-SmKAyb">
<div class="tyJCtd baZpAe">
<div class="t3iYD"><img class="wp-image-2839 aligncenter" src="https://www.ufsm.br/app/uploads/sites/791/2020/09/laravel12-300x13.png" alt="" width="669" height="29" /></div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="hJDwNd-AhqUyc-R6PoUb JNdkSc L6cTce-purZT L6cTce-pSzOP">
<div class="JNdkSc-SmKAyb">
<div class=""> </div>
</div>
</div>
</div>
</div>
</section>
<section id="h.40727b8077023b12_128" class="yaqOZd">
<div class="yaqOZd IFuOkc"> </div>
<div class="mYVXT">
<div class="LS81yb VICjCf">
<div class="hJDwNd-AhqUyc-uQSCkd purZT-AhqUyc-II5mzb pSzOP-AhqUyc-qWD73c JNdkSc">
<div class="JNdkSc-SmKAyb">
<div class="">
<div class="oKdM2c Kzv0Me">
<div id="h.40727b8077023b12_125" class="hJDwNd-AhqUyc-uQSCkd jXK9ad D2fZ2 OjCsFc wHaque GNzUNc">
<div class="jXK9ad-SmKAyb">
<div class="tyJCtd mGzaTb baZpAe">
<p class="zfr3Q" dir="ltr">Testando no Insomnia obtemos:</p>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</section>
<section id="h.40727b8077023b12_132" class="yaqOZd">
<div class="yaqOZd IFuOkc"> </div>
<div class="mYVXT">
<div class="LS81yb VICjCf">
<div class="hJDwNd-AhqUyc-ibL1re JNdkSc L6cTce-purZT L6cTce-pSzOP">
<div class="JNdkSc-SmKAyb">
<div class=""> </div>
</div>
</div>
<div class="hJDwNd-AhqUyc-OiUrBf purZT-AhqUyc-II5mzb pSzOP-AhqUyc-qWD73c JNdkSc">
<div class="JNdkSc-SmKAyb">
<div class="">
<div class="oKdM2c Kzv0Me">
<div id="h.40727b8077023b12_129" class="hJDwNd-AhqUyc-OiUrBf jXK9ad D2fZ2 OjCsFc wHaque">
<div class="jXK9ad-SmKAyb">
<div class="tyJCtd baZpAe">
<div class="t3iYD"><img class="wp-image-2840 aligncenter" src="https://www.ufsm.br/app/uploads/sites/791/2020/09/laravel13-300x67.png" alt="" width="528" height="118" /></div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="hJDwNd-AhqUyc-ibL1re JNdkSc L6cTce-purZT L6cTce-pSzOP">
<div class="JNdkSc-SmKAyb">
<div class=""> </div>
</div>
</div>
</div>
</div>
</section>
<section id="h.40727b8077023b12_136" class="yaqOZd">
<div class="yaqOZd IFuOkc"> </div>
<div class="mYVXT">
<div class="LS81yb VICjCf">
<div class="hJDwNd-AhqUyc-uQSCkd purZT-AhqUyc-II5mzb pSzOP-AhqUyc-qWD73c JNdkSc">
<div class="JNdkSc-SmKAyb">
<div class="">
<div class="oKdM2c Kzv0Me">
<div id="h.40727b8077023b12_133" class="hJDwNd-AhqUyc-uQSCkd jXK9ad D2fZ2 OjCsFc wHaque GNzUNc">
<div class="jXK9ad-SmKAyb">
<div class="tyJCtd mGzaTb baZpAe">
<p class="zfr3Q" dir="ltr">Por fim, implementamos o método <strong>destroy</strong>, capaz de excluir um dado do banco de dados, para isso é bem simples:</p>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</section>
<section id="h.40727b8077023b12_140" class="yaqOZd">
<div class="yaqOZd IFuOkc"> </div>
<div class="mYVXT">
<div class="LS81yb VICjCf">
<div class="hJDwNd-AhqUyc-c5RTEf JNdkSc L6cTce-purZT L6cTce-pSzOP">
<div class="JNdkSc-SmKAyb">
<div class=""> </div>
</div>
</div>
<div class="hJDwNd-AhqUyc-qWD73c purZT-AhqUyc-II5mzb pSzOP-AhqUyc-qWD73c JNdkSc">
<div class="JNdkSc-SmKAyb">
<div class="">
<div class="oKdM2c Kzv0Me">
<div id="h.40727b8077023b12_137" class="hJDwNd-AhqUyc-qWD73c jXK9ad D2fZ2 OjCsFc wHaque">
<div class="jXK9ad-SmKAyb">
<div class="tyJCtd baZpAe">
<div class="t3iYD"><img class="wp-image-2841 aligncenter" src="https://www.ufsm.br/app/uploads/sites/791/2020/09/laravel14-300x155.png" alt="" width="517" height="267" /></div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="hJDwNd-AhqUyc-c5RTEf JNdkSc L6cTce-purZT L6cTce-pSzOP">
<div class="JNdkSc-SmKAyb">
<div class=""> </div>
</div>
</div>
</div>
</div>
</section>
<section id="h.40727b8077023b12_144" class="yaqOZd">
<div class="yaqOZd IFuOkc"> </div>
<div class="mYVXT">
<div class="LS81yb VICjCf">
<div class="hJDwNd-AhqUyc-uQSCkd purZT-AhqUyc-II5mzb pSzOP-AhqUyc-qWD73c JNdkSc">
<div class="JNdkSc-SmKAyb">
<div class="">
<div class="oKdM2c Kzv0Me">
<div id="h.40727b8077023b12_141" class="hJDwNd-AhqUyc-uQSCkd jXK9ad D2fZ2 OjCsFc wHaque GNzUNc">
<div class="jXK9ad-SmKAyb">
<div class="tyJCtd mGzaTb baZpAe">
<p class="zfr3Q" dir="ltr">Executando nossa rota do método destroy no Insomnia temos:</p>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</section>
<section id="h.40727b8077023b12_148" class="yaqOZd">
<div class="yaqOZd IFuOkc"> </div>
<div class="mYVXT">
<div class="LS81yb VICjCf">
<div class="hJDwNd-AhqUyc-R6PoUb JNdkSc L6cTce-purZT L6cTce-pSzOP">
<div class="JNdkSc-SmKAyb">
<div class=""> </div>
</div>
</div>
<div class="hJDwNd-AhqUyc-EehZO purZT-AhqUyc-II5mzb pSzOP-AhqUyc-qWD73c JNdkSc">
<div class="JNdkSc-SmKAyb">
<div class="">
<div class="oKdM2c Kzv0Me">
<div id="h.40727b8077023b12_145" class="hJDwNd-AhqUyc-EehZO jXK9ad D2fZ2 OjCsFc wHaque">
<div class="jXK9ad-SmKAyb">
<div class="tyJCtd baZpAe">
<div class="t3iYD"><img class="wp-image-2842 aligncenter" src="https://www.ufsm.br/app/uploads/sites/791/2020/09/laravel15-300x59.png" alt="" width="585" height="115" /></div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="hJDwNd-AhqUyc-R6PoUb JNdkSc L6cTce-purZT L6cTce-pSzOP">
<div class="JNdkSc-SmKAyb">
<div class=""> </div>
</div>
</div>
</div>
</div>
</section>
<section id="h.40727b8077023b12_152" class="yaqOZd">
<div class="yaqOZd IFuOkc"> </div>
<div class="mYVXT">
<div class="LS81yb VICjCf">
<div class="hJDwNd-AhqUyc-uQSCkd purZT-AhqUyc-II5mzb pSzOP-AhqUyc-qWD73c JNdkSc">
<div class="JNdkSc-SmKAyb">
<div class="">
<div class="oKdM2c Kzv0Me">
<div id="h.40727b8077023b12_149" class="hJDwNd-AhqUyc-uQSCkd jXK9ad D2fZ2 OjCsFc wHaque GNzUNc">
<div class="jXK9ad-SmKAyb">
<div class="tyJCtd mGzaTb baZpAe">
<p class="zfr3Q" dir="ltr">E finalmente chegamos ao fim da nossa simples API, ressalto apenas que ela foi feita para fins didáticos e não possui alguns conceitos fundamentais de uma API Rest.</p>
<p class="zfr3Q" dir="ltr"><strong>Referências:</strong></p>
<p class="zfr3Q" dir="ltr">Link para download do Composer: <a class="XqQF9c" href="https://www.google.com/url?q=https%3A%2F%2Fgetcomposer.org%2Fdownload%2F&amp;sa=D&amp;sntz=1&amp;usg=AFQjCNHDNcDuo9ZM0UoL92jQXoTwxbrwTg" target="_blank" rel="noopener noreferrer">https://getcomposer.org/download/</a></p>
<p class="zfr3Q" dir="ltr">Link para download do Insomnia (usei a versão Core):<a class="XqQF9c" href="https://www.google.com/url?q=https%3A%2F%2Finsomnia.rest%2Fdownload%2F&amp;sa=D&amp;sntz=1&amp;usg=AFQjCNGoqdcGuEB7IqEUsVdwBY1JpNoEBQ" target="_blank" rel="noopener noreferrer"> </a><a class="XqQF9c" href="https://www.google.com/url?q=https%3A%2F%2Finsomnia.rest%2Fdownload%2F&amp;sa=D&amp;sntz=1&amp;usg=AFQjCNGoqdcGuEB7IqEUsVdwBY1JpNoEBQ" target="_blank" rel="noopener noreferrer">https://insomnia.rest/download/</a></p>
<p class="zfr3Q" dir="ltr">Documentação do Laravel: <a class="XqQF9c" href="https://www.google.com/url?q=https%3A%2F%2Flaravel.com%2Fdocs%2F7.x&amp;sa=D&amp;sntz=1&amp;usg=AFQjCNFX876xx-wrxaY-KM1ofVqz1Ny0jA" target="_blank" rel="noopener noreferrer">https://laravel.com/docs/7.x</a></p>
<p dir="ltr"> </p>
<p class="zfr3Q" dir="ltr" style="text-align: right">Bruno Rossi - 25/08/2020</p>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</section>
<!-- /wp:tadv/classic-paragraph -->]]></content:encoded>
													</item>
						<item>
				<title>Entity Framework</title>
				<link>https://www.ufsm.br/pet/sistemas-de-informacao/2020/07/22/entity-framework</link>
				<pubDate>Wed, 22 Jul 2020 18:30:00 +0000</pubDate>
						<category><![CDATA[Destaques]]></category>
		<category><![CDATA[Redações]]></category>
		<category><![CDATA[Back-End e BD]]></category>
		<category><![CDATA[Frameworks]]></category>

				<guid isPermaLink="false">https://www.ufsm.br/pet/sistemas-de-informacao/?p=2701</guid>
						<description><![CDATA[Olá Pessoal, nessa edição do PET Redação iremos aprender um pouco sobre uma das principais ferramentas de mapeamento objeto-relacional para C#, o Entity Framework. Mas enfim, o que é Mapeamento objeto-relacional e o que é Entity Framework? Continue lendo para conhecer mais sobre este assunto.     O que é mapeamento objeto-relacional? O ORM (object-relational mapping) é [&hellip;]]]></description>
							<content:encoded><![CDATA[  <!-- wp:tadv/classic-paragraph -->
<section id="h.296a328d7a585a92_228" class="yaqOZd">
<div class="mYVXT">
<div class="LS81yb VICjCf">
<div class="hJDwNd-AhqUyc-uQSCkd purZT-AhqUyc-II5mzb pSzOP-AhqUyc-qWD73c JNdkSc yYI8W ">
<div class="JNdkSc-SmKAyb">
<div class="">
<div class="oKdM2c">
<div id="h.296a328d7a585a92_34" class="hJDwNd-AhqUyc-uQSCkd jXK9ad D2fZ2 wHaque GNzUNc">
<div class="jXK9ad-SmKAyb">
<div class="tyJCtd mGzaTb baZpAe">
<p class="zfr3Q" dir="ltr">Olá Pessoal, nessa edição do PET Redação iremos aprender um pouco sobre uma das principais ferramentas de mapeamento objeto-relacional para C#, o <strong>Entity Framework</strong>. Mas enfim, o que é Mapeamento objeto-relacional e o que é Entity Framework? Continue lendo para conhecer mais sobre este assunto.</p>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</section>
<section id="h.296a328d7a585a92_46" class="yaqOZd">
<div class="mYVXT">
<div class="LS81yb VICjCf">
<div class="hJDwNd-AhqUyc-uQSCkd purZT-AhqUyc-II5mzb pSzOP-AhqUyc-qWD73c JNdkSc yYI8W ">
<div class="JNdkSc-SmKAyb">
<div class="">
<div class="oKdM2c Kzv0Me">
<div id="h.296a328d7a585a92_43" class="hJDwNd-AhqUyc-uQSCkd jXK9ad D2fZ2 OjCsFc GNzUNc">
<div class="jXK9ad-SmKAyb">
<div class="tyJCtd mGzaTb baZpAe">
<div id="h.k2z1f7syf0a0" class="GV3q8e aP9Z7e"> </div>
<div class="CjVfdc">
<div class="PPhIP rviiZ">
<div class="U26fgb mUbCce fKz7Od LRAOtb rm120e" role="presentation" aria-describedby="h.k2z1f7syf0a0" aria-label="Copiar link do título" data-tooltip="Copiar link do título" aria-hidden="true" data-tooltip-position="top" data-tooltip-vertical-offset="12" data-tooltip-horizontal-offset="0">
<div class="VTBa7b MbhUzd"> </div>
</div>
</div>
<strong><span class=" OGiC0d">O que é mapeamento objeto-relacional? </span></strong></div>
</div>
</div>
</div>
</div>
<div class="oKdM2c">
<div id="h.296a328d7a585a92_47" class="hJDwNd-AhqUyc-uQSCkd jXK9ad D2fZ2 wHaque GNzUNc">
<div class="jXK9ad-SmKAyb">
<div class="tyJCtd mGzaTb baZpAe">
<p class="zfr3Q" dir="ltr">O <strong>ORM</strong> (object-relational mapping) é uma técnica que visa aproximar a ideia do desenvolvimento orientado a objetos, normalmente utilizada em aplicações, ao modelo relacional do banco de dados, mapeando os dados a partir de classes e vice-versa. Dessa forma, pode-se economizar tempo desenvolvendo sua base de dados na mesma linguagem usada na aplicação, sem necessidade de escrever instruções SQL.</p>
<p class="zfr3Q" dir="ltr">Existem ORMs para as mais diversas linguagens de programação, porém hoje vamos conhecer um em específico, o Entity Framework.</p>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</section>
<section id="h.296a328d7a585a92_56" class="yaqOZd">
<div class="mYVXT">
<div class="LS81yb VICjCf">
<div class="hJDwNd-AhqUyc-uQSCkd purZT-AhqUyc-II5mzb pSzOP-AhqUyc-qWD73c JNdkSc yYI8W ">
<div class="JNdkSc-SmKAyb">
<div class="">
<div class="oKdM2c Kzv0Me">
<div id="h.296a328d7a585a92_53" class="hJDwNd-AhqUyc-uQSCkd jXK9ad D2fZ2 OjCsFc GNzUNc">
<div class="jXK9ad-SmKAyb">
<div class="tyJCtd mGzaTb baZpAe">
<div id="h.du05h97x54kj" class="GV3q8e aP9Z7e"> </div>
<div class="CjVfdc">
<div class="PPhIP rviiZ">
<div class="U26fgb mUbCce fKz7Od LRAOtb rm120e" role="presentation" aria-describedby="h.du05h97x54kj" aria-label="Copiar link do título" data-tooltip="Copiar link do título" aria-hidden="true" data-tooltip-position="top" data-tooltip-vertical-offset="12" data-tooltip-horizontal-offset="0">
<div class="VTBa7b MbhUzd"> </div>
</div>
</div>
<strong><span class=" OGiC0d">O que é Entity Framework? </span></strong></div>
</div>
</div>
</div>
</div>
<div class="oKdM2c">
<div id="h.296a328d7a585a92_57" class="hJDwNd-AhqUyc-uQSCkd jXK9ad D2fZ2 GNzUNc">
<div class="jXK9ad-SmKAyb">
<div class="tyJCtd mGzaTb baZpAe">
<p class="zfr3Q" dir="ltr">O <strong>Entity Framework</strong> é um exemplo de ORM. Desenvolvido para aplicações C#, ele possui três estratégias para relacionar-se com o banco de dados: Database First, Model First e Code First.</p>
</div>
</div>
</div>
</div>
<div class="oKdM2c">
<div id="h.296a328d7a585a92_59" class="hJDwNd-AhqUyc-uQSCkd jXK9ad D2fZ2 wHaque GNzUNc">
<div class="jXK9ad-SmKAyb">
<div class="tyJCtd mGzaTb baZpAe">
<ol class="n8H08c BKnRcf">
<li class="TYR86d zfr3Q">
<p class="zfr3Q" dir="ltr"><strong>Database First: </strong>Tem a função de auxiliar projetos que já possuem um banco de dados estabelecido, realizando uma engenharia-reversa, criando um modelo de dados, chamado <strong>EDM</strong> (Entity Data Model), que é uma representação visual da base de dados, baseado em XML. Por fim, resultando nas classes necessárias, de acordo com as tabelas no banco de dados.</p>
</li>
<li class="TYR86d zfr3Q">
<p class="zfr3Q" dir="ltr"><strong>Model First: </strong>Muito semelhante ao Database First, pois também é focado no desenvolvimento gráfico com <strong>EDM</strong>, mas, diferentemente, o Model First é utilizado quando a base de dados ainda não está criada. Dessa forma, todas as tabelas e relacionamentos são feitos visualmente.</p>
</li>
<li class="TYR86d zfr3Q">
<p class="zfr3Q" dir="ltr"><strong>Code First: </strong>É o mais distante dos últimos vistos, pois o foco é totalmente no desenvolvimento. Ao contrário do Database First, primeiramente, cria-se as classes, então o EntityFramework cria sua base de dados e suas tabelas, baseado nas classes desenvolvidas.</p>
</li>
</ol>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</section>
<section id="h.296a328d7a585a92_64" class="yaqOZd">
<div class="mYVXT">
<div class="LS81yb VICjCf">
<div class="hJDwNd-AhqUyc-uQSCkd purZT-AhqUyc-II5mzb pSzOP-AhqUyc-qWD73c JNdkSc yYI8W ">
<div class="JNdkSc-SmKAyb">
<div class="">
<div class="oKdM2c Kzv0Me">
<div id="h.296a328d7a585a92_61" class="hJDwNd-AhqUyc-uQSCkd jXK9ad D2fZ2 OjCsFc GNzUNc">
<div class="jXK9ad-SmKAyb">
<div class="tyJCtd mGzaTb baZpAe">
<div id="h.d1itz2a7wj2q" class="GV3q8e aP9Z7e"> </div>
<div class="CjVfdc">
<div class="PPhIP rviiZ">
<div class="U26fgb mUbCce fKz7Od LRAOtb rm120e" role="presentation" aria-describedby="h.d1itz2a7wj2q" aria-label="Copiar link do título" data-tooltip="Copiar link do título" aria-hidden="true" data-tooltip-position="top" data-tooltip-vertical-offset="12" data-tooltip-horizontal-offset="0">
<div class="VTBa7b MbhUzd"> </div>
</div>
</div>
<strong><span class=" OGiC0d">Implementação </span></strong></div>
</div>
</div>
</div>
</div>
<div class="oKdM2c">
<div id="h.296a328d7a585a92_65" class="hJDwNd-AhqUyc-uQSCkd jXK9ad D2fZ2 GNzUNc">
<div class="jXK9ad-SmKAyb">
<div class="tyJCtd mGzaTb baZpAe">
<p class="zfr3Q" dir="ltr">Passada a ideia geral de cada estratégia, agora iremos focar e implementar uma delas: o <strong>Code First</strong>. Para isso, será necessário a instalação do<a class="XqQF9c" href="https://www.google.com/url?q=https%3A%2F%2Fvisualstudio.microsoft.com%2Fpt-br%2Fdownloads%2F&amp;sa=D&amp;sntz=1&amp;usg=AFQjCNFIyV2YEs9VT_F5R3fpSwog9DE8NA" target="_blank" rel="noopener noreferrer"> </a><a class="XqQF9c" href="https://www.google.com/url?q=https%3A%2F%2Fvisualstudio.microsoft.com%2Fpt-br%2Fdownloads%2F&amp;sa=D&amp;sntz=1&amp;usg=AFQjCNFIyV2YEs9VT_F5R3fpSwog9DE8NA" target="_blank" rel="noopener noreferrer">Visual Studio Community</a> (não é o Code) e, para controlar o nosso banco de dados, o<a class="XqQF9c" href="https://www.google.com/url?q=https%3A%2F%2Fwww.microsoft.com%2Fpt-br%2Fsql-server%2Fsql-server-downloads&amp;sa=D&amp;sntz=1&amp;usg=AFQjCNFfFXCsNkv5GwEilm42OK2gi8tavQ" target="_blank" rel="noopener noreferrer"> </a><a class="XqQF9c" href="https://www.google.com/url?q=https%3A%2F%2Fwww.microsoft.com%2Fpt-br%2Fsql-server%2Fsql-server-downloads&amp;sa=D&amp;sntz=1&amp;usg=AFQjCNFfFXCsNkv5GwEilm42OK2gi8tavQ" target="_blank" rel="noopener noreferrer">SQL Server Express</a> (somente para ter as instâncias) e o<a class="XqQF9c" href="https://www.google.com/url?q=https%3A%2F%2Fdocs.microsoft.com%2Fpt-br%2Fsql%2Fssms%2Fdownload-sql-server-management-studio-ssms%3Fview%3Dsql-server-ver15&amp;sa=D&amp;sntz=1&amp;usg=AFQjCNFXAYIjfN0A3iqes5-giqJi1qR_JA" target="_blank" rel="noopener noreferrer"> </a><a class="XqQF9c" href="https://www.google.com/url?q=https%3A%2F%2Fdocs.microsoft.com%2Fpt-br%2Fsql%2Fssms%2Fdownload-sql-server-management-studio-ssms%3Fview%3Dsql-server-ver15&amp;sa=D&amp;sntz=1&amp;usg=AFQjCNFXAYIjfN0A3iqes5-giqJi1qR_JA" target="_blank" rel="noopener noreferrer">SQL Server Management Studio</a> (para visualizar e conectar com o servidor), conhecido como SSMS. Não se assuste, o SQL Server Express é só baixar, para conseguirmos conectar ao servidor pelo SSMS, que abriremos somente para conectar e para visualizar o resultado final.</p>
</div>
</div>
</div>
</div>
<div class="oKdM2c">
<div id="h.296a328d7a585a92_71" class="hJDwNd-AhqUyc-uQSCkd jXK9ad D2fZ2 wHaque GNzUNc">
<div class="jXK9ad-SmKAyb">
<div class="tyJCtd mGzaTb baZpAe">
<p class="zfr3Q" dir="ltr">Realizadas as instalações, o primeiro passo é conectar-se com o servidor local da sua máquina, a partir do SQL Server. Para descobrir o nome da sua máquina é necessário entrar nas propriedades do seu computador, clicando com o botão do mouse em <em>Este Computador</em>. Segue a imagem abaixo:</p>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</section>
<section id="h.296a328d7a585a92_88" class="yaqOZd">
<div class="yaqOZd IFuOkc"> </div>
<div class="mYVXT">
<div class="LS81yb VICjCf">
<div class="hJDwNd-AhqUyc-II5mzb JNdkSc L6cTce-purZT L6cTce-pSzOP">
<div class="JNdkSc-SmKAyb">
<div class=""> </div>
</div>
</div>
<div class="hJDwNd-AhqUyc-II5mzb purZT-AhqUyc-II5mzb pSzOP-AhqUyc-II5mzb JNdkSc">
<div class="JNdkSc-SmKAyb">
<div class="">
<div class="oKdM2c Kzv0Me">
<div id="h.296a328d7a585a92_85" class="hJDwNd-AhqUyc-II5mzb pSzOP-AhqUyc-II5mzb jXK9ad D2fZ2 OjCsFc wHaque">
<div class="jXK9ad-SmKAyb">
<div class="tyJCtd baZpAe">
<div class="t3iYD"><img class="aligncenter wp-image-2779 size-full" src="https://www.ufsm.br/app/uploads/sites/791/2020/09/entity1.png" alt="" width="374" height="330" /></div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="hJDwNd-AhqUyc-II5mzb JNdkSc L6cTce-purZT L6cTce-pSzOP">
<div class="JNdkSc-SmKAyb">
<div class=""> </div>
</div>
</div>
</div>
</div>
</section>
<section id="h.296a328d7a585a92_92" class="yaqOZd">
<div class="yaqOZd IFuOkc"> </div>
<div class="mYVXT">
<div class="LS81yb VICjCf">
<div class="hJDwNd-AhqUyc-uQSCkd purZT-AhqUyc-II5mzb pSzOP-AhqUyc-qWD73c JNdkSc">
<div class="JNdkSc-SmKAyb">
<div class="">
<div class="oKdM2c Kzv0Me">
<div id="h.296a328d7a585a92_89" class="hJDwNd-AhqUyc-uQSCkd jXK9ad D2fZ2 OjCsFc wHaque GNzUNc">
<div class="jXK9ad-SmKAyb">
<div class="tyJCtd mGzaTb baZpAe">
<p class="zfr3Q" dir="ltr">Ao clicar em propriedades aparecerá uma tela, no qual terá uma campo chamado Nome do Computador e é só copiá-lo. Feito isso, podemos abrir o SQL Server Management Studio e irá aparecer uma janela (imagem abaixo). No campo <em>Nome do Servidor</em>, cole o Nome do Computador, que foi copiado anteriormente, seguido por <em>\SQLEXPRESS</em>.</p>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</section>
<section id="h.296a328d7a585a92_112" class="yaqOZd">
<div class="yaqOZd IFuOkc"> </div>
<div class="mYVXT">
<div class="LS81yb VICjCf">
<div class="hJDwNd-AhqUyc-c5RTEf JNdkSc L6cTce-purZT L6cTce-pSzOP">
<div class="JNdkSc-SmKAyb">
<div class=""> </div>
</div>
</div>
<div class="hJDwNd-AhqUyc-qWD73c purZT-AhqUyc-II5mzb pSzOP-AhqUyc-qWD73c JNdkSc">
<div class="JNdkSc-SmKAyb">
<div class="">
<div class="oKdM2c Kzv0Me">
<div id="h.296a328d7a585a92_109" class="hJDwNd-AhqUyc-qWD73c jXK9ad D2fZ2 OjCsFc wHaque">
<div class="jXK9ad-SmKAyb">
<div class="tyJCtd baZpAe">
<div class="t3iYD"><img class="aligncenter wp-image-2780 size-full" src="https://www.ufsm.br/app/uploads/sites/791/2020/09/entity2.png" alt="" width="475" height="312" /></div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="hJDwNd-AhqUyc-c5RTEf JNdkSc L6cTce-purZT L6cTce-pSzOP">
<div class="JNdkSc-SmKAyb">
<div class=""> </div>
</div>
</div>
</div>
</div>
</section>
<section id="h.296a328d7a585a92_116" class="yaqOZd">
<div class="yaqOZd IFuOkc"> </div>
<div class="mYVXT">
<div class="LS81yb VICjCf">
<div class="hJDwNd-AhqUyc-uQSCkd purZT-AhqUyc-II5mzb pSzOP-AhqUyc-qWD73c JNdkSc">
<div class="JNdkSc-SmKAyb">
<div class="">
<div class="oKdM2c Kzv0Me">
<div id="h.296a328d7a585a92_113" class="hJDwNd-AhqUyc-uQSCkd jXK9ad D2fZ2 OjCsFc wHaque GNzUNc">
<div class="jXK9ad-SmKAyb">
<div class="tyJCtd mGzaTb baZpAe">
<p class="zfr3Q" dir="ltr">Realizada a conexão com o servidor local, agora podemos começar o desenvolvimento. Abrindo o Visual Studio aparecerá uma tela, clique em <em>Criar um Projeto</em>. Passado isso, iremos escolher o tipo e o nome do projeto. O tipo do projeto, neste caso, vai ser <strong>Aplicativo de Console (.NET Framework)</strong>, como está representado na imagem abaixo. Clicando em próximo, preencha o nome como <strong>MeuProjetoPET </strong>(mas pode ser qualquer um).</p>
<p class="zfr3Q" dir="ltr"><img class="aligncenter wp-image-2781 size-full" src="https://www.ufsm.br/app/uploads/sites/791/2020/09/entity3.png" alt="" width="551" height="190" /></p>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</section>
<section id="h.296a328d7a585a92_128" class="yaqOZd">
<div class="mYVXT">
<div class="LS81yb VICjCf">
<div class="hJDwNd-AhqUyc-uQSCkd purZT-AhqUyc-II5mzb pSzOP-AhqUyc-qWD73c JNdkSc">
<div class="JNdkSc-SmKAyb">
<div class="">
<div class="oKdM2c Kzv0Me">
<div id="h.296a328d7a585a92_125" class="hJDwNd-AhqUyc-uQSCkd jXK9ad D2fZ2 OjCsFc wHaque GNzUNc">
<div class="jXK9ad-SmKAyb">
<div class="tyJCtd mGzaTb baZpAe">
<p class="zfr3Q" dir="ltr">Criado nosso projeto, agora podemos abrir a classe padrão <em>Program.cs </em>no Gerenciador de Soluções. Caso ela não esteja visível, segue o caminho:</p>
<p class="zfr3Q" dir="ltr"><em>Exibir → Gerenciador de Soluções </em></p>
<p class="zfr3Q" dir="ltr">Dentro da classe <em>Program.cs,</em> criaremos uma outra classe, que futuramente será uma tabela do nosso banco de dados, chamada <em>Pessoa. </em>Essa classe terá como atributos: um id (identificador inteiro), um nome (string) e um telefone (string). Ficando assim:</p>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</section>
<section id="h.296a328d7a585a92_144" class="yaqOZd">
<div class="yaqOZd IFuOkc"> </div>
<div class="mYVXT">
<div class="LS81yb VICjCf">
<div class="hJDwNd-AhqUyc-c5RTEf JNdkSc L6cTce-purZT L6cTce-pSzOP">
<div class="JNdkSc-SmKAyb">
<div class=""> </div>
</div>
</div>
<div class="hJDwNd-AhqUyc-qWD73c purZT-AhqUyc-II5mzb pSzOP-AhqUyc-qWD73c JNdkSc">
<div class="JNdkSc-SmKAyb">
<div class="">
<div class="oKdM2c Kzv0Me">
<div id="h.296a328d7a585a92_141" class="hJDwNd-AhqUyc-qWD73c jXK9ad D2fZ2 OjCsFc wHaque">
<div class="jXK9ad-SmKAyb">
<div class="tyJCtd baZpAe">
<div class="t3iYD"><img class="aligncenter wp-image-2782 size-full" src="https://www.ufsm.br/app/uploads/sites/791/2020/09/entity4.jpg" alt="" width="1280" height="962" /></div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="hJDwNd-AhqUyc-c5RTEf JNdkSc L6cTce-purZT L6cTce-pSzOP">
<div class="JNdkSc-SmKAyb">
<div class=""> </div>
</div>
</div>
</div>
</div>
</section>
<section id="h.296a328d7a585a92_148" class="yaqOZd">
<div class="yaqOZd IFuOkc"> </div>
<div class="mYVXT">
<div class="LS81yb VICjCf">
<div class="hJDwNd-AhqUyc-uQSCkd purZT-AhqUyc-II5mzb pSzOP-AhqUyc-qWD73c JNdkSc">
<div class="JNdkSc-SmKAyb">
<div class="">
<div class="oKdM2c Kzv0Me">
<div id="h.296a328d7a585a92_145" class="hJDwNd-AhqUyc-uQSCkd jXK9ad D2fZ2 OjCsFc wHaque GNzUNc">
<div class="jXK9ad-SmKAyb">
<div class="tyJCtd mGzaTb baZpAe">
<p class="zfr3Q" dir="ltr">Antes de continuar programando devemos instalar o Entity Framework, para usar todos recursos da ferramenta. Para isso, utiliza-se o Console do Gerenciador de Pacotes (NuGet). Ele pode ser acessado pela seguinte sequência:</p>
<p class="zfr3Q" dir="ltr"><em>Ferramentas → Gerenciador de Pacotes do Nuget → Console do Gerenciador de Pacotes</em></p>
<p class="zfr3Q" dir="ltr">Seguindo a sequência, abrirá um console (parecido com o cmd) na parte inferior do Visual Studio. Então, escreva o seguinte comando:</p>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</section>
<section id="h.296a328d7a585a92_152" class="yaqOZd">
<div class="yaqOZd IFuOkc"> </div>
<div class="mYVXT">
<div class="LS81yb VICjCf">
<div class="hJDwNd-AhqUyc-uQSCkd purZT-AhqUyc-II5mzb pSzOP-AhqUyc-qWD73c JNdkSc">
<div class="JNdkSc-SmKAyb">
<div class="">
<div class="oKdM2c Kzv0Me">
<div id="h.296a328d7a585a92_149" class="hJDwNd-AhqUyc-uQSCkd jXK9ad D2fZ2 OjCsFc wHaque">
<div class="jXK9ad-SmKAyb">
<div class="tyJCtd baZpAe">
<div class="t3iYD"><img class="aligncenter wp-image-2783 size-full" src="https://www.ufsm.br/app/uploads/sites/791/2020/09/entity5.png" alt="" width="728" height="24" /></div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</section>
<section id="h.296a328d7a585a92_156" class="yaqOZd">
<div class="yaqOZd IFuOkc"> </div>
<div class="mYVXT">
<div class="LS81yb VICjCf">
<div class="hJDwNd-AhqUyc-uQSCkd purZT-AhqUyc-II5mzb pSzOP-AhqUyc-qWD73c JNdkSc">
<div class="JNdkSc-SmKAyb">
<div class="">
<div class="oKdM2c Kzv0Me">
<div id="h.296a328d7a585a92_153" class="hJDwNd-AhqUyc-uQSCkd jXK9ad D2fZ2 OjCsFc wHaque GNzUNc">
<div class="jXK9ad-SmKAyb">
<div class="tyJCtd mGzaTb baZpAe">
<p class="zfr3Q" dir="ltr">Instalado o Entity, criaremos a conexão da nossa aplicação com o servidor local, a partir de uma <em>connectionString</em>. Essa conexão deve ser criada no arquivo <em>App.config </em>(dentro da <em>&lt;configuration&gt;</em>), também localizado no Gerenciador de Soluções. Na imagem abaixo, como parâmetro temos: o <em>name </em>(pode ser qualquer nome, porém usaremos ele mais tarde), a <em>connectionString</em> e o <em>providerName </em>(padrão). Na <em>connectionString</em>, o <strong>Data Source</strong> deve ser igual ao usado no SQL Server anteriormente, o <strong>Initial Catalog</strong> será o nome do seu banco quando executarmos o programa (pode ser qualquer nome) e o <strong>Integrated Security</strong> é padrão.</p>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</section>
<section id="h.296a328d7a585a92_164" class="yaqOZd">
<div class="yaqOZd IFuOkc"> </div>
<div class="mYVXT">
<div class="LS81yb VICjCf">
<div class="hJDwNd-AhqUyc-uQSCkd purZT-AhqUyc-II5mzb pSzOP-AhqUyc-qWD73c JNdkSc">
<div class="JNdkSc-SmKAyb">
<div class="">
<div class="oKdM2c Kzv0Me">
<div id="h.296a328d7a585a92_161" class="hJDwNd-AhqUyc-uQSCkd jXK9ad D2fZ2 OjCsFc wHaque">
<div class="jXK9ad-SmKAyb">
<div class="tyJCtd baZpAe">
<div class="t3iYD"><img class="aligncenter wp-image-2784 size-full" src="https://www.ufsm.br/app/uploads/sites/791/2020/09/entity6.png" alt="" width="1126" height="111" /></div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</section>
<section id="h.296a328d7a585a92_168" class="yaqOZd">
<div class="yaqOZd IFuOkc"> </div>
<div class="mYVXT">
<div class="LS81yb VICjCf">
<div class="hJDwNd-AhqUyc-uQSCkd purZT-AhqUyc-II5mzb pSzOP-AhqUyc-qWD73c JNdkSc">
<div class="JNdkSc-SmKAyb">
<div class="">
<div class="oKdM2c Kzv0Me">
<div id="h.296a328d7a585a92_165" class="hJDwNd-AhqUyc-uQSCkd jXK9ad D2fZ2 OjCsFc wHaque GNzUNc">
<div class="jXK9ad-SmKAyb">
<div class="tyJCtd mGzaTb baZpAe">
<p class="zfr3Q" dir="ltr">Continuando a programação no <em>Program.cs</em>, incluiremos a seguinte linha de código, para acessar os recurso do Entity:</p>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</section>
<section id="h.296a328d7a585a92_176" class="yaqOZd">
<div class="yaqOZd IFuOkc"> </div>
<div class="mYVXT">
<div class="LS81yb VICjCf">
<div class="hJDwNd-AhqUyc-ibL1re JNdkSc L6cTce-purZT L6cTce-pSzOP">
<div class="JNdkSc-SmKAyb">
<div class=""> </div>
</div>
</div>
<div class="hJDwNd-AhqUyc-OiUrBf purZT-AhqUyc-II5mzb pSzOP-AhqUyc-qWD73c JNdkSc">
<div class="JNdkSc-SmKAyb">
<div class="">
<div class="oKdM2c Kzv0Me">
<div id="h.296a328d7a585a92_173" class="hJDwNd-AhqUyc-OiUrBf jXK9ad D2fZ2 OjCsFc wHaque">
<div class="jXK9ad-SmKAyb">
<div class="tyJCtd baZpAe">
<div class="t3iYD"><img class="aligncenter wp-image-2785 size-full" src="https://www.ufsm.br/app/uploads/sites/791/2020/09/entity7.png" alt="" width="592" height="39" /></div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="hJDwNd-AhqUyc-ibL1re JNdkSc L6cTce-purZT L6cTce-pSzOP">
<div class="JNdkSc-SmKAyb">
<div class=""> </div>
</div>
</div>
</div>
</div>
</section>
<section id="h.296a328d7a585a92_180" class="yaqOZd">
<div class="yaqOZd IFuOkc"> </div>
<div class="mYVXT">
<div class="LS81yb VICjCf">
<div class="hJDwNd-AhqUyc-uQSCkd purZT-AhqUyc-II5mzb pSzOP-AhqUyc-qWD73c JNdkSc">
<div class="JNdkSc-SmKAyb">
<div class="">
<div class="oKdM2c Kzv0Me">
<div id="h.296a328d7a585a92_177" class="hJDwNd-AhqUyc-uQSCkd jXK9ad D2fZ2 OjCsFc wHaque GNzUNc">
<div class="jXK9ad-SmKAyb">
<div class="tyJCtd mGzaTb baZpAe">
<p class="zfr3Q" dir="ltr">Com o Entity disponível, ainda dentro do arquivo Program.cs, agora podemos criar nossa próxima classe, chamada Contexto. O Contexto é responsável por manter e gerenciar as classes que fazem parte da camada de dados. Utilizando a função <em>DbSet&lt;&gt;,</em> definimos que a classe <em>Pessoa </em>pertence ao contexto de dados.</p>
<div id="h.2lkbdck7t6fq" class="GV3q8e aP9Z7e"> </div>
<div class="CjVfdc">
<div class="PPhIP rviiZ">
<div class="U26fgb mUbCce fKz7Od LRAOtb rm120e" role="presentation" aria-describedby="h.2lkbdck7t6fq" aria-label="Copiar link do título" data-tooltip="Copiar link do título" aria-hidden="true" data-tooltip-position="top" data-tooltip-vertical-offset="12" data-tooltip-horizontal-offset="0">
<div class="VTBa7b MbhUzd"> </div>
</div>
</div>
<span class=" qnVSj">- </span><span class=" OGiC0d">Lembra que iríamos utilizar o </span><span class=" OGiC0d"><em>name </em></span><span class=" OGiC0d">da </span><span class=" OGiC0d"><em>connectionString</em></span><span class=" OGiC0d">? </span></div>
<p class="zfr3Q" dir="ltr">Vamos utilizar agora. Dentro da função <em>base</em><em>() </em>informaremos qual a <em>connectionString </em>que queremos usar, então lembre-se de colocar de acordo com o escrito na sua <em>connectionString.</em></p>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</section>
<section id="h.296a328d7a585a92_184" class="yaqOZd">
<div class="yaqOZd IFuOkc"> </div>
<div class="mYVXT">
<div class="LS81yb VICjCf">
<div class="hJDwNd-AhqUyc-ibL1re JNdkSc L6cTce-purZT L6cTce-pSzOP">
<div class="JNdkSc-SmKAyb">
<div class=""> </div>
</div>
</div>
<div class="hJDwNd-AhqUyc-OiUrBf purZT-AhqUyc-II5mzb pSzOP-AhqUyc-qWD73c JNdkSc">
<div class="JNdkSc-SmKAyb">
<div class="">
<div class="oKdM2c Kzv0Me">
<div id="h.296a328d7a585a92_181" class="hJDwNd-AhqUyc-OiUrBf jXK9ad D2fZ2 OjCsFc wHaque">
<div class="jXK9ad-SmKAyb">
<div class="tyJCtd baZpAe">
<div class="t3iYD"><img class="aligncenter wp-image-2786 size-full" src="https://www.ufsm.br/app/uploads/sites/791/2020/09/entity8.jpg" alt="" width="1280" height="384" /></div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="hJDwNd-AhqUyc-ibL1re JNdkSc L6cTce-purZT L6cTce-pSzOP">
<div class="JNdkSc-SmKAyb">
<div class=""> </div>
</div>
</div>
</div>
</div>
</section>
<section id="h.296a328d7a585a92_188" class="yaqOZd">
<div class="yaqOZd IFuOkc"> </div>
<div class="mYVXT">
<div class="LS81yb VICjCf">
<div class="hJDwNd-AhqUyc-uQSCkd purZT-AhqUyc-II5mzb pSzOP-AhqUyc-qWD73c JNdkSc">
<div class="JNdkSc-SmKAyb">
<div class="">
<div class="oKdM2c Kzv0Me">
<div id="h.296a328d7a585a92_185" class="hJDwNd-AhqUyc-uQSCkd jXK9ad D2fZ2 OjCsFc wHaque GNzUNc">
<div class="jXK9ad-SmKAyb">
<div class="tyJCtd mGzaTb baZpAe">
<p class="zfr3Q" dir="ltr">Para finalizar o desenvolvimento, ainda não mexemos na função <em>Main </em>do <em>Program.cs</em>. Não se assuste com o tamanho dela, comparado com as outras, não é difícil de entender. Basicamente, ela chama o nosso Contexto, utilizando a variável <em>banco</em>, para acessar a nossa classe/entidade. Após isso, há uma entrada de dados com o nome e telefone da pessoa. Depois receber os dados da pessoa, iremos inseri-los na tabela <em>Pessoas</em>, a partir da função <em>Add()</em> e salvar as alterações com a função <em>SaveChanges()</em>. Somente essa parte de código já realizaria o Code First, criando a base de dados e a tabela , o resto do código é uma demonstração de consulta para listar as pessoas cadastradas no banco (no nosso caso vai ser só uma). A variável <em>query </em>utiliza um componente de consulta, semelhante com uma instrução SQL, chamado Linq. Por padrão, o Linq já é incluído em todos os códigos C#.</p>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</section>
<section id="h.296a328d7a585a92_192" class="yaqOZd">
<div class="yaqOZd IFuOkc"> </div>
<div class="mYVXT">
<div class="LS81yb VICjCf">
<div class="hJDwNd-AhqUyc-ibL1re JNdkSc L6cTce-purZT L6cTce-pSzOP">
<div class="JNdkSc-SmKAyb">
<div class=""> </div>
</div>
</div>
<div class="hJDwNd-AhqUyc-OiUrBf purZT-AhqUyc-II5mzb pSzOP-AhqUyc-qWD73c JNdkSc">
<div class="JNdkSc-SmKAyb">
<div class="">
<div class="oKdM2c Kzv0Me">
<div id="h.296a328d7a585a92_189" class="hJDwNd-AhqUyc-OiUrBf jXK9ad D2fZ2 OjCsFc wHaque">
<div class="jXK9ad-SmKAyb">
<div class="tyJCtd baZpAe">
<div class="t3iYD"><img class="aligncenter wp-image-2787 size-full" src="https://www.ufsm.br/app/uploads/sites/791/2020/09/entity9.png" alt="" width="1280" height="1053" /></div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="hJDwNd-AhqUyc-ibL1re JNdkSc L6cTce-purZT L6cTce-pSzOP">
<div class="JNdkSc-SmKAyb">
<div class=""> </div>
</div>
</div>
</div>
</div>
</section>
<section id="h.296a328d7a585a92_196" class="yaqOZd">
<div class="yaqOZd IFuOkc"> </div>
<div class="mYVXT">
<div class="LS81yb VICjCf">
<div class="hJDwNd-AhqUyc-uQSCkd purZT-AhqUyc-II5mzb pSzOP-AhqUyc-qWD73c JNdkSc">
<div class="JNdkSc-SmKAyb">
<div class="">
<div class="oKdM2c Kzv0Me">
<div id="h.296a328d7a585a92_193" class="hJDwNd-AhqUyc-uQSCkd jXK9ad D2fZ2 OjCsFc wHaque GNzUNc">
<div class="jXK9ad-SmKAyb">
<div class="tyJCtd mGzaTb baZpAe">
<p class="zfr3Q" dir="ltr">Para executar é só clicar em iniciar, na parte superior do Visual Studio. Feito isso, abrirá um console que vai pedir os dados de uma pessoa qualquer. Após o preenchimento, ele começará a criação do banco de dados e da tabela <em>Pessoas</em> (esse processo normalmente é demorado). Para verificar se está correto, ele tenta buscar os dados no banco e retornar o nome e o telefone das pessoas cadastradas na tabela <em>Pessoas</em>.</p>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</section>
<section id="h.296a328d7a585a92_204" class="yaqOZd">
<div class="yaqOZd IFuOkc"> </div>
<div class="mYVXT">
<div class="LS81yb VICjCf">
<div class="hJDwNd-AhqUyc-II5mzb JNdkSc L6cTce-purZT L6cTce-pSzOP">
<div class="JNdkSc-SmKAyb">
<div class=""> </div>
</div>
</div>
<div class="hJDwNd-AhqUyc-II5mzb purZT-AhqUyc-II5mzb pSzOP-AhqUyc-II5mzb JNdkSc">
<div class="JNdkSc-SmKAyb">
<div class="">
<div class="oKdM2c Kzv0Me">
<div id="h.296a328d7a585a92_201" class="hJDwNd-AhqUyc-II5mzb pSzOP-AhqUyc-II5mzb jXK9ad D2fZ2 OjCsFc wHaque">
<div class="jXK9ad-SmKAyb">
<div class="tyJCtd baZpAe">
<div class="t3iYD"><img class="aligncenter wp-image-2788 size-full" src="https://www.ufsm.br/app/uploads/sites/791/2020/09/entity10.png" alt="" width="282" height="108" /></div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="hJDwNd-AhqUyc-II5mzb JNdkSc L6cTce-purZT L6cTce-pSzOP">
<div class="JNdkSc-SmKAyb">
<div class=""> </div>
</div>
</div>
</div>
</div>
</section>
<section id="h.296a328d7a585a92_208" class="yaqOZd">
<div class="yaqOZd IFuOkc"> </div>
<div class="mYVXT">
<div class="LS81yb VICjCf">
<div class="hJDwNd-AhqUyc-uQSCkd purZT-AhqUyc-II5mzb pSzOP-AhqUyc-qWD73c JNdkSc">
<div class="JNdkSc-SmKAyb">
<div class="">
<div class="oKdM2c Kzv0Me">
<div id="h.296a328d7a585a92_205" class="hJDwNd-AhqUyc-uQSCkd jXK9ad D2fZ2 OjCsFc wHaque GNzUNc">
<div class="jXK9ad-SmKAyb">
<div class="tyJCtd mGzaTb baZpAe">
<p class="zfr3Q" dir="ltr">No SQL Server Management Studio, podemos visualizar o banco criado, juntamente com a tabela <em>Pessoas.</em></p>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</section>
<section id="h.296a328d7a585a92_212" class="yaqOZd">
<div class="mYVXT">
<div class="LS81yb VICjCf">
<div class="hJDwNd-AhqUyc-II5mzb JNdkSc L6cTce-purZT L6cTce-pSzOP">
<div class="JNdkSc-SmKAyb">
<div class=""> </div>
</div>
</div>
<div class="hJDwNd-AhqUyc-II5mzb purZT-AhqUyc-II5mzb pSzOP-AhqUyc-II5mzb JNdkSc">
<div class="JNdkSc-SmKAyb">
<div class="">
<div class="oKdM2c Kzv0Me">
<div id="h.296a328d7a585a92_209" class="hJDwNd-AhqUyc-II5mzb pSzOP-AhqUyc-II5mzb jXK9ad D2fZ2 OjCsFc wHaque">
<div class="jXK9ad-SmKAyb">
<div class="tyJCtd baZpAe">
<div class="t3iYD"><img class="aligncenter wp-image-2789 size-full" src="https://www.ufsm.br/app/uploads/sites/791/2020/09/entity11.png" alt="" width="277" height="237" /></div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="hJDwNd-AhqUyc-II5mzb JNdkSc L6cTce-purZT L6cTce-pSzOP">
<div class="JNdkSc-SmKAyb">
<div class=""> </div>
</div>
</div>
</div>
</div>
</section>
<section id="h.296a328d7a585a92_216" class="yaqOZd">
<div class="yaqOZd IFuOkc"> </div>
<div class="mYVXT">
<div class="LS81yb VICjCf">
<div class="hJDwNd-AhqUyc-uQSCkd purZT-AhqUyc-II5mzb pSzOP-AhqUyc-qWD73c JNdkSc">
<div class="JNdkSc-SmKAyb">
<div class="">
<div class="oKdM2c Kzv0Me">
<div id="h.296a328d7a585a92_213" class="hJDwNd-AhqUyc-uQSCkd jXK9ad D2fZ2 OjCsFc wHaque GNzUNc">
<div class="jXK9ad-SmKAyb">
<div class="tyJCtd mGzaTb baZpAe">
<p class="zfr3Q" dir="ltr">Para ter acesso ao <em>Program.cs</em> e o <em>App.config</em>, desenvolvidos ao longo da redação, é só acessar este<a class="XqQF9c" href="https://www.google.com/url?q=https%3A%2F%2Fgithub.com%2Fchico123456%2FEntity-Framework&amp;sa=D&amp;sntz=1&amp;usg=AFQjCNHV52XYL45V9oCVNzWAjqvssADKGQ" target="_blank" rel="noopener noreferrer"> </a><a class="XqQF9c" href="https://www.google.com/url?q=https%3A%2F%2Fgithub.com%2Fchico123456%2FEntity-Framework&amp;sa=D&amp;sntz=1&amp;usg=AFQjCNHV52XYL45V9oCVNzWAjqvssADKGQ" target="_blank" rel="noopener noreferrer">repositório</a>.</p>
<p class="zfr3Q" dir="ltr">Caso queria aprender mais e implementar um Database First ou Model First em uma aplicação C#, segue este<a class="XqQF9c" href="https://www.google.com/url?q=https%3A%2F%2Fwww.devmedia.com.br%2Fentity-framework-tutorial%2F27764&amp;sa=D&amp;sntz=1&amp;usg=AFQjCNEpc5bVJ70SnN2eWAQa7S4CEELT9Q" target="_blank" rel="noopener noreferrer"> </a><a class="XqQF9c" href="https://www.google.com/url?q=https%3A%2F%2Fwww.devmedia.com.br%2Fentity-framework-tutorial%2F27764&amp;sa=D&amp;sntz=1&amp;usg=AFQjCNEpc5bVJ70SnN2eWAQa7S4CEELT9Q" target="_blank" rel="noopener noreferrer">link</a>.</p>
<p class="zfr3Q" dir="ltr">Para quem programa em outra linguagem, este<a class="XqQF9c" href="https://www.google.com/url?q=https%3A%2F%2Fwww.treinaweb.com.br%2Fblog%2Fo-que-e-orm%2F&amp;sa=D&amp;sntz=1&amp;usg=AFQjCNG60TnG4pV4XNMDyzCdFwG8OAqLFw" target="_blank" rel="noopener noreferrer"> </a><a class="XqQF9c" href="https://www.google.com/url?q=https%3A%2F%2Fwww.treinaweb.com.br%2Fblog%2Fo-que-e-orm%2F&amp;sa=D&amp;sntz=1&amp;usg=AFQjCNG60TnG4pV4XNMDyzCdFwG8OAqLFw" target="_blank" rel="noopener noreferrer">link</a> possui mais conteúdo sobre ORMs e os principais para cada linguagem no mercado.</p>
<p class="zfr3Q" dir="ltr">Com isso, compreendemos um pouco mais sobre ORMs e Entity Framework, implementando um Code First simples, podendo ser alimentado com outras classes e métodos, auxiliando e facilitando o desenvolvimento de projetos.</p>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</section>
<section id="h.296a328d7a585a92_220" class="yaqOZd">
<div class="yaqOZd IFuOkc"> </div>
<div class="mYVXT">
<div class="LS81yb VICjCf">
<div class="hJDwNd-AhqUyc-uQSCkd purZT-AhqUyc-II5mzb pSzOP-AhqUyc-qWD73c JNdkSc yYI8W ">
<div class="JNdkSc-SmKAyb">
<div class="">
<div class="oKdM2c Kzv0Me">
<div id="h.296a328d7a585a92_217" class="hJDwNd-AhqUyc-uQSCkd jXK9ad D2fZ2 OjCsFc GNzUNc">
<div class="jXK9ad-SmKAyb">
<div class="tyJCtd mGzaTb baZpAe">
<div id="h.481a3pa4tqi6" class="GV3q8e aP9Z7e"> </div>
<div class="CjVfdc">
<div class="PPhIP rviiZ">
<div class="U26fgb mUbCce fKz7Od LRAOtb rm120e" role="presentation" aria-describedby="h.481a3pa4tqi6" aria-label="Copiar link do título" data-tooltip="Copiar link do título" aria-hidden="true" data-tooltip-position="top" data-tooltip-vertical-offset="12" data-tooltip-horizontal-offset="0">
<div class="VTBa7b MbhUzd"> </div>
</div>
</div>
<span class=" OGiC0d"><strong>Referências</strong></span></div>
</div>
</div>
</div>
</div>
<div class="oKdM2c">
<div id="h.296a328d7a585a92_221" class="hJDwNd-AhqUyc-uQSCkd jXK9ad D2fZ2 wHaque GNzUNc">
<div class="jXK9ad-SmKAyb">
<div class="tyJCtd mGzaTb baZpAe">
<ul class="n8H08c UVNKR">
<li class="TYR86d zfr3Q">
<p class="zfr3Q" dir="ltr"><a class="XqQF9c" href="https://www.google.com/url?q=https%3A%2F%2Fdocs.microsoft.com%2Fpt-br%2Fef%2F&amp;sa=D&amp;sntz=1&amp;usg=AFQjCNHnEqG2_foDe2V2x4V3d_zREdvn7A" target="_blank" rel="noopener noreferrer">Documentação Entity Framework</a></p>
</li>
<li class="TYR86d zfr3Q">
<p class="zfr3Q" dir="ltr"><a class="XqQF9c" href="https://www.google.com/url?q=https%3A%2F%2Fwww.devmedia.com.br%2Fentity-framework-tutorial%2F27764&amp;sa=D&amp;sntz=1&amp;usg=AFQjCNEpc5bVJ70SnN2eWAQa7S4CEELT9Q" target="_blank" rel="noopener noreferrer">Tutorial Entity Framework</a></p>
</li>
<li class="TYR86d zfr3Q">
<p class="zfr3Q" dir="ltr"><a class="XqQF9c" href="https://www.google.com/url?q=https%3A%2F%2Fdocs.microsoft.com%2Fpt-br%2Fef%2Fef6%2Fmodeling%2Fcode-first%2Fworkflows%2Fnew-database&amp;sa=D&amp;sntz=1&amp;usg=AFQjCNEYX9pfC_mC-ctf-S8fLWVkpfup5Q" target="_blank" rel="noopener noreferrer">Code First</a></p>
</li>
</ul>
<p dir="ltr"> </p>
<p class="zfr3Q" dir="ltr" style="text-align: right">Francisco Palermo - 22/07/2020</p>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</section>
<!-- /wp:tadv/classic-paragraph -->]]></content:encoded>
													</item>
						<item>
				<title>Introdução à Unity</title>
				<link>https://www.ufsm.br/pet/sistemas-de-informacao/2020/07/07/introducao-a-unity</link>
				<pubDate>Tue, 07 Jul 2020 18:21:00 +0000</pubDate>
						<category><![CDATA[Destaques]]></category>
		<category><![CDATA[Redações]]></category>
		<category><![CDATA[Computação Gráfica]]></category>
		<category><![CDATA[Frameworks]]></category>

				<guid isPermaLink="false">https://www.ufsm.br/pet/sistemas-de-informacao/?p=2700</guid>
						<description><![CDATA[E aí pessoal, nesta edição do PET Redação falaremos sobre Unity, conhecida também por Unity3D, é uma game engine (também conhecido como motor de jogos) publicada em 2005, com um sistema bastante versátil e fácil, além do mais, gratuita, que permite o acesso para todos os públicos. Esta plataforma foi criada pela Unity Technologies, uma [&hellip;]]]></description>
							<content:encoded><![CDATA[  <!-- wp:tadv/classic-paragraph -->
<div class="UtePc RCETm" dir="ltr" role="main" aria-hidden="false">
<section id="h.573355ac9e24fdd4_19" class="yaqOZd">
<div class="mYVXT">
<div class="LS81yb VICjCf">
<div class="hJDwNd-AhqUyc-uQSCkd purZT-AhqUyc-II5mzb pSzOP-AhqUyc-qWD73c JNdkSc">
<div class="JNdkSc-SmKAyb">
<div class="">
<div class="oKdM2c Kzv0Me">
<div id="h.573355ac9e24fdd4_16" class="hJDwNd-AhqUyc-uQSCkd jXK9ad D2fZ2 OjCsFc wHaque GNzUNc">
<div class="jXK9ad-SmKAyb">
<div class="tyJCtd mGzaTb baZpAe">
<p class="zfr3Q" dir="ltr">E aí pessoal, nesta edição do PET Redação falaremos sobre Unity, conhecida também por Unity3D, é uma game engine (também conhecido como motor de jogos) publicada em 2005, com um sistema bastante versátil e fácil, além do mais, gratuita, que permite o acesso para todos os públicos.</p>
<p class="zfr3Q" dir="ltr">Esta plataforma foi criada pela Unity Technologies, uma desenvolvedora software de jogos eletrônicos, com o objetivo de facilitar a programação de games, e consequentemente, permitir que o programador use sua criatividade com desenvoltura e praticidade. O fato de ser uma das primeiras engines gratuita permitiu o seu crescimento e reconhecimento acelerado desde o seu lançamento, e com isso, tornou-se bastante popular no mundo inteiro evoluindo gradualmente desde então.</p>
<p class="zfr3Q" dir="ltr">Com a Unity é possível criar diversos tipos de jogos, como por exemplo: Jogos 3D, 2D(plataforma), VR(realidade virtual) e AR(realidade aumentada). Mesmo sendo utilizado para uma infinidade de projetos de maneira satisfatória, ele sugere ser um modelo para criação de jogos de aventura.</p>
<p class="zfr3Q" dir="ltr">Aqui estão dois jogos famosos que foram criados utilizando a Unity:</p>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</section>
<section id="h.573355ac9e24fdd4_42" class="yaqOZd">
<div class="yaqOZd IFuOkc"><br />
<table style="border-collapse: collapse;width: 100%">
<tbody>
<tr>
<td style="width: 33.3333%">
<div class="oKdM2c" style="text-align: center">
<div id="h.573355ac9e24fdd4_47" class="hJDwNd-AhqUyc-II5mzb pSzOP-AhqUyc-II5mzb jXK9ad D2fZ2 GNzUNc">
<div class="jXK9ad-SmKAyb">
<div class="tyJCtd mGzaTb baZpAe">
<div class="CjVfdc"><strong><img class="alignnone size-medium wp-image-2932" src="https://www.ufsm.br/app/uploads/sites/791/2020/09/unity1-300x300.jpg" alt="" width="300" height="300" />Pokémon GO</strong></div>
</div>
</div>
</div>
</div>
<div class="oKdM2c">
<div id="h.573355ac9e24fdd4_49" class="hJDwNd-AhqUyc-II5mzb pSzOP-AhqUyc-II5mzb jXK9ad D2fZ2 wHaque GNzUNc">
<div class="jXK9ad-SmKAyb">
<div class="tyJCtd mGzaTb baZpAe">
<p class="zfr3Q" dir="ltr" style="text-align: center">Niantic</p>
</div>
</div>
</div>
</div>
</td>
<td style="width: 33.3333%"><img class="alignnone size-medium wp-image-2933" src="https://www.ufsm.br/app/uploads/sites/791/2020/09/unity2-300x300.jpg" alt="" width="300" height="300" /><br />
<div class="oKdM2c">
<div id="h.573355ac9e24fdd4_54" class="hJDwNd-AhqUyc-II5mzb pSzOP-AhqUyc-II5mzb jXK9ad D2fZ2 GNzUNc">
<div class="jXK9ad-SmKAyb">
<div class="tyJCtd mGzaTb baZpAe">
<div class="CjVfdc" style="text-align: center"><strong>Angry Birds FPS</strong></div>
</div>
</div>
</div>
</div>
<div class="oKdM2c">
<div id="h.573355ac9e24fdd4_56" class="hJDwNd-AhqUyc-II5mzb pSzOP-AhqUyc-II5mzb jXK9ad D2fZ2 wHaque GNzUNc">
<div class="jXK9ad-SmKAyb">
<div class="tyJCtd mGzaTb baZpAe">
<p class="zfr3Q" dir="ltr" style="text-align: center">Magic Leap</p>
</div>
</div>
</div>
</div>
</td>
<td style="width: 33.3333%"><img class="alignnone size-medium wp-image-2934" src="https://www.ufsm.br/app/uploads/sites/791/2020/09/unity3-300x300.jpg" alt="" width="300" height="300" /><br />
<div class="oKdM2c">
<div id="h.573355ac9e24fdd4_61" class="hJDwNd-AhqUyc-II5mzb pSzOP-AhqUyc-II5mzb jXK9ad D2fZ2 GNzUNc">
<div class="jXK9ad-SmKAyb">
<div class="tyJCtd mGzaTb baZpAe">
<div class="CjVfdc" style="text-align: center"><strong>Cuphead</strong></div>
</div>
</div>
</div>
</div>
<div class="oKdM2c">
<div id="h.573355ac9e24fdd4_63" class="hJDwNd-AhqUyc-II5mzb pSzOP-AhqUyc-II5mzb jXK9ad D2fZ2 wHaque GNzUNc">
<div class="jXK9ad-SmKAyb">
<div class="tyJCtd mGzaTb baZpAe">
<p class="zfr3Q" dir="ltr" style="text-align: center">StudioMDHR</p>
</div>
</div>
</div>
</div>
</td>
</tr>
</tbody>
</table>
</div>
</section>
<section id="h.573355ac9e24fdd4_71" class="yaqOZd">
<div class="yaqOZd IFuOkc"> </div>
<div class="mYVXT">
<div class="LS81yb VICjCf">
<div class="hJDwNd-AhqUyc-uQSCkd purZT-AhqUyc-II5mzb pSzOP-AhqUyc-qWD73c JNdkSc">
<div class="JNdkSc-SmKAyb">
<div class="">
<div class="oKdM2c Kzv0Me">
<div id="h.573355ac9e24fdd4_68" class="hJDwNd-AhqUyc-uQSCkd jXK9ad D2fZ2 OjCsFc wHaque GNzUNc">
<div class="jXK9ad-SmKAyb">
<div class="tyJCtd mGzaTb baZpAe">
<p class="zfr3Q" dir="ltr">No programa Unity são utilizados diversos tipos de linguagem de programação, principalmente as linguagens C++ e C#, nos scripts dos objetos do jogo. Estas mesmas também são aplicadas em outros jogos, mesmo fora da Unity, por serem versáteis e terem um bom desempenho.</p>
<p class="zfr3Q" dir="ltr">Mas para um melhor entendimento do o mecanismo da plataforma, será apresentado um pequeno projeto que mostrará o processo da criação do jogo. Mas antes disso, deve-se ter em mente que os games são baseados em cenas e “Games Objects”, que são todos os objetos dentro da cena. E todos os elementos são posicionados através de um sistema de coordenadas, sejam eles em 2d e 3d.</p>
<p class="zfr3Q" dir="ltr">Vamos lá:</p>
<ul class="n8H08c UVNKR">
<li class="TYR86d zfr3Q">
<p class="zfr3Q" dir="ltr">Primeiro será necessário baixar o “Unity Hub”, que permite o acesso à todos os projetos já criados e também outras versões da Unity;</p>
</li>
<li class="TYR86d zfr3Q">
<p class="zfr3Q" dir="ltr">Após baixar será preciso instalar o “UnityHubSetup.exe”;</p>
</li>
<li class="TYR86d zfr3Q">
<p class="zfr3Q" dir="ltr">Ao iniciar, entrar em “Learn” e baixar o projeto “Platformer Microgame”;</p>
</li>
</ul>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</section>
<section id="h.573355ac9e24fdd4_79" class="yaqOZd">
<div class="yaqOZd IFuOkc"> </div>
<div class="mYVXT">
<div class="LS81yb VICjCf">
<div class="hJDwNd-AhqUyc-II5mzb JNdkSc L6cTce-purZT L6cTce-pSzOP">
<div class="JNdkSc-SmKAyb">
<div class=""> </div>
</div>
</div>
<div class="hJDwNd-AhqUyc-II5mzb purZT-AhqUyc-II5mzb pSzOP-AhqUyc-II5mzb JNdkSc">
<div class="JNdkSc-SmKAyb">
<div class="">
<div class="oKdM2c Kzv0Me">
<div id="h.573355ac9e24fdd4_76" class="hJDwNd-AhqUyc-II5mzb pSzOP-AhqUyc-II5mzb jXK9ad D2fZ2 OjCsFc wHaque">
<div class="jXK9ad-SmKAyb">
<div class="tyJCtd baZpAe">
<div class="t3iYD"><img class="aligncenter wp-image-2935 size-full" src="https://www.ufsm.br/app/uploads/sites/791/2020/09/unity4.jpg" alt="" width="1211" height="751" /></div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="hJDwNd-AhqUyc-II5mzb JNdkSc L6cTce-purZT L6cTce-pSzOP">
<div class="JNdkSc-SmKAyb">
<div class=""> </div>
</div>
</div>
</div>
</div>
</section>
<section id="h.573355ac9e24fdd4_83" class="yaqOZd">
<div class="yaqOZd IFuOkc"> </div>
<div class="mYVXT">
<div class="LS81yb VICjCf">
<div class="hJDwNd-AhqUyc-uQSCkd purZT-AhqUyc-II5mzb pSzOP-AhqUyc-qWD73c JNdkSc">
<div class="JNdkSc-SmKAyb">
<div class="">
<div class="oKdM2c Kzv0Me">
<div id="h.573355ac9e24fdd4_80" class="hJDwNd-AhqUyc-uQSCkd jXK9ad D2fZ2 OjCsFc wHaque GNzUNc">
<div class="jXK9ad-SmKAyb">
<div class="tyJCtd mGzaTb baZpAe">
<ul class="n8H08c UVNKR">
<li class="TYR86d zfr3Q">
<p class="zfr3Q" dir="ltr">Com o download concluído, clicar em “Open project”;</p>
</li>
</ul>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</section>
<section id="h.573355ac9e24fdd4_87" class="yaqOZd">
<div class="yaqOZd IFuOkc"> </div>
<div class="mYVXT">
<div class="LS81yb VICjCf">
<div class="hJDwNd-AhqUyc-II5mzb JNdkSc L6cTce-purZT L6cTce-pSzOP">
<div class="JNdkSc-SmKAyb">
<div class=""> </div>
</div>
</div>
<div class="hJDwNd-AhqUyc-II5mzb purZT-AhqUyc-II5mzb pSzOP-AhqUyc-II5mzb JNdkSc">
<div class="JNdkSc-SmKAyb">
<div class="">
<div class="oKdM2c Kzv0Me">
<div id="h.573355ac9e24fdd4_84" class="hJDwNd-AhqUyc-II5mzb pSzOP-AhqUyc-II5mzb jXK9ad D2fZ2 OjCsFc wHaque">
<div class="jXK9ad-SmKAyb">
<div class="tyJCtd baZpAe">
<div class="t3iYD"><img class="aligncenter wp-image-2936 size-full" src="https://www.ufsm.br/app/uploads/sites/791/2020/09/unity5.jpg" alt="" width="1280" height="687" /></div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="hJDwNd-AhqUyc-II5mzb JNdkSc L6cTce-purZT L6cTce-pSzOP">
<div class="JNdkSc-SmKAyb">
<div class=""> </div>
</div>
</div>
</div>
</div>
</section>
<section id="h.573355ac9e24fdd4_91" class="yaqOZd">
<div class="yaqOZd IFuOkc"> </div>
<div class="mYVXT">
<div class="LS81yb VICjCf">
<div class="hJDwNd-AhqUyc-uQSCkd purZT-AhqUyc-II5mzb pSzOP-AhqUyc-qWD73c JNdkSc">
<div class="JNdkSc-SmKAyb">
<div class="">
<div class="oKdM2c Kzv0Me">
<div id="h.573355ac9e24fdd4_88" class="hJDwNd-AhqUyc-uQSCkd jXK9ad D2fZ2 OjCsFc wHaque GNzUNc">
<div class="jXK9ad-SmKAyb">
<div class="tyJCtd mGzaTb baZpAe">
<ul class="n8H08c UVNKR">
<li class="TYR86d zfr3Q">
<p class="zfr3Q" dir="ltr">Caso queira, clique em “Get started”, para ver um tutorial de como acionar o “play” no jogo e mudar a velocidade do personagem.</p>
</li>
</ul>
<p class="zfr3Q" dir="ltr">É perceptível ver que o Unity é dividido em várias janelas, aqui serão apresentadas algumas informações sobre as mais importantes:</p>
<ul class="n8H08c UVNKR">
<li class="TYR86d zfr3Q">
<p class="zfr3Q" dir="ltr">A janela “Hierarchy” mostra todos os objetos que tem na cena, ao clicar em algum deles, vemos que a aba chamada “Inspector” muda, pois ela mostra todas as propriedades desse objeto que foi selecionado;</p>
</li>
</ul>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</section>
<section id="h.573355ac9e24fdd4_99" class="yaqOZd">
<div class="yaqOZd IFuOkc"> </div>
<div class="mYVXT">
<div class="LS81yb VICjCf">
<div class="hJDwNd-AhqUyc-II5mzb JNdkSc L6cTce-purZT L6cTce-pSzOP">
<div class="JNdkSc-SmKAyb">
<div class=""> </div>
</div>
</div>
<div class="hJDwNd-AhqUyc-II5mzb purZT-AhqUyc-II5mzb pSzOP-AhqUyc-II5mzb JNdkSc">
<div class="JNdkSc-SmKAyb">
<div class="">
<div class="oKdM2c Kzv0Me">
<div id="h.573355ac9e24fdd4_96" class="hJDwNd-AhqUyc-II5mzb pSzOP-AhqUyc-II5mzb jXK9ad D2fZ2 OjCsFc wHaque">
<div class="jXK9ad-SmKAyb">
<div class="tyJCtd baZpAe">
<div class="t3iYD"><img class="aligncenter wp-image-2937 size-full" src="https://www.ufsm.br/app/uploads/sites/791/2020/09/unity6.png" alt="" width="255" height="367" /></div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="hJDwNd-AhqUyc-II5mzb JNdkSc L6cTce-purZT L6cTce-pSzOP">
<div class="JNdkSc-SmKAyb">
<div class=""> </div>
</div>
</div>
</div>
</div>
</section>
<section id="h.573355ac9e24fdd4_103" class="yaqOZd">
<div class="yaqOZd IFuOkc"> </div>
<div class="mYVXT">
<div class="LS81yb VICjCf">
<div class="hJDwNd-AhqUyc-uQSCkd purZT-AhqUyc-II5mzb pSzOP-AhqUyc-qWD73c JNdkSc">
<div class="JNdkSc-SmKAyb">
<div class="">
<div class="oKdM2c Kzv0Me">
<div id="h.573355ac9e24fdd4_100" class="hJDwNd-AhqUyc-uQSCkd jXK9ad D2fZ2 OjCsFc wHaque GNzUNc">
<div class="jXK9ad-SmKAyb">
<div class="tyJCtd mGzaTb baZpAe">
<ul class="n8H08c UVNKR">
<li class="TYR86d zfr3Q">
<p class="zfr3Q" dir="ltr">Ainda em “Inspector”, encontra-se um script chamado de “Player Controller”, no qual mostra todas as propriedades que foram escritas em C# atribuídas ao “Player”. Nesse exemplo podemos facilmente aumentar ou diminuir o “Max Speed”, quando iniciado o jogo podemos ver a mudança em sua velocidade;</p>
</li>
</ul>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</section>
<section id="h.573355ac9e24fdd4_107" class="yaqOZd">
<div class="yaqOZd IFuOkc"> </div>
<div class="mYVXT">
<div class="LS81yb VICjCf">
<div class="hJDwNd-AhqUyc-II5mzb JNdkSc L6cTce-purZT L6cTce-pSzOP">
<div class="JNdkSc-SmKAyb">
<div class=""> </div>
</div>
</div>
<div class="hJDwNd-AhqUyc-II5mzb purZT-AhqUyc-II5mzb pSzOP-AhqUyc-II5mzb JNdkSc">
<div class="JNdkSc-SmKAyb">
<div class="">
<div class="oKdM2c Kzv0Me">
<div id="h.573355ac9e24fdd4_104" class="hJDwNd-AhqUyc-II5mzb pSzOP-AhqUyc-II5mzb jXK9ad D2fZ2 OjCsFc wHaque">
<div class="jXK9ad-SmKAyb">
<div class="tyJCtd baZpAe">
<div class="t3iYD"><img class="aligncenter wp-image-2938 size-full" src="https://www.ufsm.br/app/uploads/sites/791/2020/09/unity7.png" alt="" width="348" height="912" /></div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="hJDwNd-AhqUyc-II5mzb JNdkSc L6cTce-purZT L6cTce-pSzOP">
<div class="JNdkSc-SmKAyb">
<div class=""> </div>
</div>
</div>
</div>
</div>
</section>
<section id="h.573355ac9e24fdd4_111" class="yaqOZd">
<div class="yaqOZd IFuOkc"> </div>
<div class="mYVXT">
<div class="LS81yb VICjCf">
<div class="hJDwNd-AhqUyc-uQSCkd purZT-AhqUyc-II5mzb pSzOP-AhqUyc-qWD73c JNdkSc">
<div class="JNdkSc-SmKAyb">
<div class="">
<div class="oKdM2c Kzv0Me">
<div id="h.573355ac9e24fdd4_108" class="hJDwNd-AhqUyc-uQSCkd jXK9ad D2fZ2 OjCsFc wHaque GNzUNc">
<div class="jXK9ad-SmKAyb">
<div class="tyJCtd mGzaTb baZpAe">
<ul class="n8H08c UVNKR">
<li class="TYR86d zfr3Q">
<p class="zfr3Q" dir="ltr">Em “Project” ficam os arquivos do projeto, conhecido como assets. Neste exemplo já existem assets, pois foi baixado um projeto pronto, mas para um novo, é preciso importar seus próprios, para isto, basta selecionar arquivos de fora do Unity e arrastar para dentro desta janela;</p>
</li>
</ul>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</section>
<section id="h.573355ac9e24fdd4_115" class="yaqOZd">
<div class="yaqOZd IFuOkc"> </div>
<div class="mYVXT">
<div class="LS81yb VICjCf">
<div class="hJDwNd-AhqUyc-II5mzb JNdkSc L6cTce-purZT L6cTce-pSzOP">
<div class="JNdkSc-SmKAyb">
<div class=""> </div>
</div>
</div>
<div class="hJDwNd-AhqUyc-II5mzb purZT-AhqUyc-II5mzb pSzOP-AhqUyc-II5mzb JNdkSc">
<div class="JNdkSc-SmKAyb">
<div class="">
<div class="oKdM2c Kzv0Me">
<div id="h.573355ac9e24fdd4_112" class="hJDwNd-AhqUyc-II5mzb pSzOP-AhqUyc-II5mzb jXK9ad D2fZ2 OjCsFc wHaque">
<div class="jXK9ad-SmKAyb">
<div class="tyJCtd baZpAe">
<div class="t3iYD"><img class="aligncenter wp-image-2939 size-full" src="https://www.ufsm.br/app/uploads/sites/791/2020/09/unity8.png" alt="" width="1187" height="345" /></div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="hJDwNd-AhqUyc-II5mzb JNdkSc L6cTce-purZT L6cTce-pSzOP">
<div class="JNdkSc-SmKAyb">
<div class=""> </div>
</div>
</div>
</div>
</div>
</section>
<section id="h.573355ac9e24fdd4_119" class="yaqOZd">
<div class="yaqOZd IFuOkc"> </div>
<div class="mYVXT">
<div class="LS81yb VICjCf">
<div class="hJDwNd-AhqUyc-uQSCkd purZT-AhqUyc-II5mzb pSzOP-AhqUyc-qWD73c JNdkSc">
<div class="JNdkSc-SmKAyb">
<div class="">
<div class="oKdM2c Kzv0Me">
<div id="h.573355ac9e24fdd4_116" class="hJDwNd-AhqUyc-uQSCkd jXK9ad D2fZ2 OjCsFc wHaque GNzUNc">
<div class="jXK9ad-SmKAyb">
<div class="tyJCtd mGzaTb baZpAe">
<ul class="n8H08c UVNKR">
<li class="TYR86d zfr3Q">
<p class="zfr3Q" dir="ltr">Nas janelas “Scene” e “Game”, é onde jogo se torna visível. Na janela “Scene” é possível alterar a posição dos objetos e seus tamanhos, para montar a cena como desejar. Já na janela “Game”, verá o resultado de como estará o jogo quando o “play” ser ativado;</p>
</li>
</ul>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</section>
<section id="h.573355ac9e24fdd4_123" class="yaqOZd">
<div class="yaqOZd IFuOkc"> </div>
<div class="mYVXT">
<div class="LS81yb VICjCf">
<div class="hJDwNd-AhqUyc-ibL1re JNdkSc L6cTce-purZT L6cTce-pSzOP">
<div class="JNdkSc-SmKAyb">
<div class=""> </div>
</div>
</div>
<div class="hJDwNd-AhqUyc-II5mzb purZT-AhqUyc-II5mzb pSzOP-AhqUyc-II5mzb JNdkSc">
<div class="JNdkSc-SmKAyb">
<div class="">
<div class="oKdM2c Kzv0Me">
<div id="h.573355ac9e24fdd4_120" class="hJDwNd-AhqUyc-II5mzb pSzOP-AhqUyc-II5mzb jXK9ad D2fZ2 OjCsFc wHaque">
<div class="jXK9ad-SmKAyb">
<div class="tyJCtd baZpAe">
<div class="t3iYD"><img class="aligncenter wp-image-2940 size-full" src="https://www.ufsm.br/app/uploads/sites/791/2020/09/unity9.jpg" alt="" width="933" height="566" /></div>
<div> </div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="hJDwNd-AhqUyc-II5mzb purZT-AhqUyc-II5mzb pSzOP-AhqUyc-II5mzb JNdkSc">
<div class="JNdkSc-SmKAyb">
<div class="">
<div class="oKdM2c Kzv0Me">
<div id="h.573355ac9e24fdd4_124" class="hJDwNd-AhqUyc-II5mzb pSzOP-AhqUyc-II5mzb jXK9ad D2fZ2 OjCsFc wHaque">
<div class="jXK9ad-SmKAyb">
<div class="tyJCtd baZpAe">
<div class="t3iYD"><img class="aligncenter wp-image-2941 size-full" src="https://www.ufsm.br/app/uploads/sites/791/2020/09/unity10.jpg" alt="" width="934" height="569" /></div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="hJDwNd-AhqUyc-ibL1re JNdkSc L6cTce-purZT L6cTce-pSzOP">
<div class="JNdkSc-SmKAyb">
<div class=""> </div>
</div>
</div>
</div>
</div>
</section>
<section id="h.573355ac9e24fdd4_131" class="yaqOZd">
<div class="yaqOZd IFuOkc"> </div>
<div class="mYVXT">
<div class="LS81yb VICjCf">
<div class="hJDwNd-AhqUyc-uQSCkd purZT-AhqUyc-II5mzb pSzOP-AhqUyc-qWD73c JNdkSc">
<div class="JNdkSc-SmKAyb">
<div class="">
<div class="oKdM2c Kzv0Me">
<div id="h.573355ac9e24fdd4_128" class="hJDwNd-AhqUyc-uQSCkd jXK9ad D2fZ2 OjCsFc wHaque GNzUNc">
<div class="jXK9ad-SmKAyb">
<div class="tyJCtd mGzaTb baZpAe">
<ul class="n8H08c UVNKR">
<li class="TYR86d zfr3Q">
<p class="zfr3Q" dir="ltr">Para executar, é necessário apenas clicar na setas “play” e “pause” apresentada na imagem abaixo. Mas cuidado, caso façam alguma alteração nos objetos, códigos, entre outros, enquanto o jogo estiver rodando, nada será salvo. Apenas quando clicar na seta “play” novamente, o projeto poderá ser alterado.</p>
</li>
</ul>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</section>
<section id="h.573355ac9e24fdd4_135" class="yaqOZd">
<div class="yaqOZd IFuOkc"> </div>
<div class="mYVXT">
<div class="LS81yb VICjCf">
<div class="hJDwNd-AhqUyc-II5mzb JNdkSc L6cTce-purZT L6cTce-pSzOP">
<div class="JNdkSc-SmKAyb">
<div class=""> </div>
</div>
</div>
<div class="hJDwNd-AhqUyc-II5mzb purZT-AhqUyc-II5mzb pSzOP-AhqUyc-II5mzb JNdkSc">
<div class="JNdkSc-SmKAyb">
<div class="">
<div class="oKdM2c Kzv0Me">
<div id="h.573355ac9e24fdd4_132" class="hJDwNd-AhqUyc-II5mzb pSzOP-AhqUyc-II5mzb jXK9ad D2fZ2 OjCsFc wHaque">
<div class="jXK9ad-SmKAyb">
<div class="tyJCtd baZpAe">
<div class="t3iYD"><img class="aligncenter wp-image-2942 size-full" src="https://www.ufsm.br/app/uploads/sites/791/2020/09/unity11.png" alt="" width="136" height="43" /></div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="hJDwNd-AhqUyc-II5mzb JNdkSc L6cTce-purZT L6cTce-pSzOP">
<div class="JNdkSc-SmKAyb">
<div class=""> </div>
</div>
</div>
</div>
</div>
</section>
<section id="h.573355ac9e24fdd4_139" class="yaqOZd">
<div class="yaqOZd IFuOkc"> </div>
<div class="mYVXT">
<div class="LS81yb VICjCf">
<div class="hJDwNd-AhqUyc-uQSCkd purZT-AhqUyc-II5mzb pSzOP-AhqUyc-qWD73c JNdkSc">
<div class="JNdkSc-SmKAyb">
<div class="">
<div class="oKdM2c Kzv0Me">
<div id="h.573355ac9e24fdd4_136" class="hJDwNd-AhqUyc-uQSCkd jXK9ad D2fZ2 OjCsFc wHaque GNzUNc">
<div class="jXK9ad-SmKAyb">
<div class="tyJCtd mGzaTb baZpAe">
<p class="zfr3Q" dir="ltr">O Unity tem um universo vasto e que nos permite usufruir da nossa criatividade através de suas ferramentas práticas e acessíveis que possibilitam o processo na criação de games 2ds e 3ds. Além disso, existem vários tutoriais sobre o seu mecanismo disponíveis no site e toda a papelada para seus usuários utilizarem as classes do Unity e seus scripts.</p>
<p class="zfr3Q" dir="ltr">Neste texto foi apresentado uma pequena gota de um oceano de possibilidades que a plataforma nos oferece, todavia, podemos nos aprofundar um pouco mais nas próximas redações e ficar atento às novidades, pois programa apresenta uma comunidade bastante ativa, mais um dos benefícios para se tornar um usuário.</p>
<p class="zfr3Q" dir="ltr">Ficou curioso(a) para conhecer mais sobre essa plataforma? Segue os links onde poderão ser encontrados alguns cursos sobre:</p>
<p class="zfr3Q" dir="ltr">Udemy(1327 cursos):<a class="XqQF9c" href="https://www.google.com/url?q=https%3A%2F%2Fwww.udemy.com%2F&amp;sa=D&amp;sntz=1&amp;usg=AFQjCNF7vkDavVXgWF8o3jZQlPtIkK08gw" target="_blank" rel="noopener noreferrer"> </a><span class=" aw5Odc"><a class="XqQF9c" href="https://www.google.com/url?q=https%3A%2F%2Fwww.udemy.com%2Fcourses%2Fsearch%2F%3Fsrc%3Dukw%26q%3Dunity&amp;sa=D&amp;sntz=1&amp;usg=AFQjCNHG0J-7S3hxOZ5HsXsNlaaOMP5-Rg" target="_blank" rel="noopener noreferrer"><strong>https://www.udemy.com/courses/search/?src=ukw&amp;q=unity</strong></a></span></p>
<p class="zfr3Q" dir="ltr">Coursera(591 cursos):<a class="XqQF9c" href="https://www.google.com/url?q=https%3A%2F%2Fpt.coursera.org%2F&amp;sa=D&amp;sntz=1&amp;usg=AFQjCNGBP271GmB2njGDFNwFxaGX-uxFBw" target="_blank" rel="noopener noreferrer"> </a><span class=" aw5Odc"><a class="XqQF9c" href="https://www.google.com/url?q=https%3A%2F%2Fpt.coursera.org%2Fsearch%3Fquery%3Dunity%26&amp;sa=D&amp;sntz=1&amp;usg=AFQjCNHxWFGJIdNne6SMZ9jRI-VJhrUX7A" target="_blank" rel="noopener noreferrer"><strong>https://pt.coursera.org/search?query=unity&amp;</strong></a></span></p>
<p class="zfr3Q" dir="ltr">Lynda(2591 cursos):<a class="XqQF9c" href="https://www.google.com/url?q=https%3A%2F%2Fwww.lynda.com%2F&amp;sa=D&amp;sntz=1&amp;usg=AFQjCNG_WLmLtu2fytQZhssdqm_VrhKIMA" target="_blank" rel="noopener noreferrer"> </a><span class=" aw5Odc"><a class="XqQF9c" href="https://www.google.com/url?q=https%3A%2F%2Fwww.lynda.com%2Fsearch%3Fq%3Dunity&amp;sa=D&amp;sntz=1&amp;usg=AFQjCNG64pzkCgdXiHlOQeeqNJcit2Kv8g" target="_blank" rel="noopener noreferrer"><strong>https://www.lynda.com/search?q=unity</strong></a></span></p>
<p class="zfr3Q" dir="ltr">Além de diversas videoaulas disponíveis gratuitamente no youtube.</p>
<small class="zfr3Q TMjjoe"></small></div>
<div> </div>
<div style="text-align: right"> </div>
<div class="tyJCtd mGzaTb baZpAe" style="text-align: right"><small class="zfr3Q TMjjoe">Cristhyan/2020</small></div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</section>
</div>
<div class="Xpil1b"> </div>
<div class="dZA9kd ynRLnc">
<div id="ow64" class="U26fgb JRtysb WzwrXb I12f0b K2mXPb zXBiaf ynRLnc" role="button" aria-label="Ações do site" data-menu-corner="bottom-start" data-anchor-corner="top-start">
<div class="NWlf3e MbhUzd"> </div>
</div>
</div>
<div class="LqzjUe">
<div class="Q0cSn"> </div>
<div class="hBW7Hb">
<div class="U26fgb mUbCce fKz7Od kpPxtd QMuaBc" role="button" aria-label="Ações do site" aria-hidden="true">
<div class="VTBa7b MbhUzd"> </div>
</div>
<div class="hUphyc">
<div class="YkaBSd" data-normalized-path="inf.ufsm.br/pet-si/redações/2020/unity">
<div class="U26fgb kpPxtd J7BuEb" role="button" aria-label="Contato "> </div>
</div>
<div class="YkaBSd" data-abuse-proto="%.@.null,&quot;105785649989537254743&quot;,&quot;https://sites.google.com/inf.ufsm.br/pet-si/reda%C3%A7%C3%B5es/2020/unity?authuser\u003d0&quot;,null,null,[],[]]">
<div class="U26fgb kpPxtd J7BuEb" role="button" aria-label="Denunciar abuso"> </div>
</div>
</div>
</div>
</div>
<!-- /wp:tadv/classic-paragraph -->]]></content:encoded>
													</item>
						<item>
				<title>Flux: Arquitetura para desenvolvimentos de aplicações web</title>
				<link>https://www.ufsm.br/pet/sistemas-de-informacao/2020/04/10/flux-arquitetura-para-desenvolvimentos-de-aplicacoes-web</link>
				<pubDate>Fri, 10 Apr 2020 20:29:42 +0000</pubDate>
						<category><![CDATA[Destaques]]></category>
		<category><![CDATA[Redações]]></category>
		<category><![CDATA[Frameworks]]></category>
		<category><![CDATA[Web e Front-End]]></category>

				<guid isPermaLink="false">https://www.ufsm.br/pet/sistemas-de-informacao/?p=2679</guid>
						<description><![CDATA[No PET-Redação dessa semana, vamos tentar entender a arquitetura Flux, comparando-a com o famigerado MVC. Então pega o teu café e nos acompanha nessa redação descontraída. Flux é a arquitetura que o Facebook criou para melhorar o desenvolvimento de aplicações web nos tempos modernos. Mas antes de entrarmos no assunto, temos que entender o porquê da existência [&hellip;]]]></description>
							<content:encoded><![CDATA[  <!-- wp:tadv/classic-paragraph -->
<section id="h.5e466c2fc68333b0_12" class="yaqOZd">
<div class="mYVXT">
<div class="LS81yb VICjCf">
<div class="hJDwNd-AhqUyc-uQSCkd purZT-AhqUyc-II5mzb pSzOP-AhqUyc-qWD73c JNdkSc">
<div class="JNdkSc-SmKAyb">
<div class="">
<div class="oKdM2c Kzv0Me">
<div id="h.5e466c2fc68333b0_9" class="hJDwNd-AhqUyc-uQSCkd jXK9ad D2fZ2 OjCsFc wHaque GNzUNc">
<div class="jXK9ad-SmKAyb">
<div class="tyJCtd mGzaTb baZpAe">
<p class="zfr3Q" dir="ltr">No PET-Redação dessa semana, vamos tentar entender a arquitetura Flux, comparando-a com o famigerado MVC. Então pega o teu café e nos acompanha nessa redação descontraída.</p>
<p class="zfr3Q" dir="ltr">Flux é a arquitetura que o Facebook criou para melhorar o desenvolvimento de aplicações <em>web</em><em><strong> </strong></em>nos tempos modernos. Mas antes de entrarmos no assunto, temos que entender o porquê da existência dessa arquitetura e como ela facilita o desenvolvimento de aplicações.</p>
<p class="zfr3Q" dir="ltr">Antes de utilizar o Flux, o Facebook utilizava o MVC, a arquitetura mais famosa e conceituada quando o assunto é desenvolvimento de aplicações. Essa fama vem da separação de interesses que essa arquitetura oferece de forma a otimizar a compreensão e escrita de código. Só que, como tudo na vida, o MVC não é só flores, e um dos aspectos negativos é a complexidade que a aplicação toma quando pensamos em escalabilidade. Ou seja, para aplicações menores, com meia dúzia de funcionalidades, o MVC serve muito bem. Mas para pra pensar, quantas funcionalidades tem o Facebook? Tem o sistema de chat (Messenger), posts, grupos, galeria de fotos e vídeos, <em>stories</em>, eventos, serviços de <em>streaming</em>, etc. Agora vamos tentar imaginar um cenário em que isso está modelado em cima do MVC.</p>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</section>
<section id="h.5e466c2fc68333b0_16" class="yaqOZd">
<div class="yaqOZd IFuOkc"> </div>
<div class="mYVXT">
<div class="LS81yb VICjCf">
<div class="hJDwNd-AhqUyc-R6PoUb JNdkSc L6cTce-purZT L6cTce-pSzOP">
<div class="JNdkSc-SmKAyb">
<div class=""> </div>
</div>
</div>
<div class="hJDwNd-AhqUyc-EehZO purZT-AhqUyc-II5mzb pSzOP-AhqUyc-qWD73c JNdkSc">
<div class="JNdkSc-SmKAyb">
<div class="">
<div class="oKdM2c Kzv0Me">
<div id="h.5e466c2fc68333b0_13" class="hJDwNd-AhqUyc-EehZO jXK9ad D2fZ2 OjCsFc wHaque">
<div class="jXK9ad-SmKAyb">
<div class="tyJCtd baZpAe">
<div class="t3iYD"><img class="aligncenter wp-image-2790 size-full" src="https://www.ufsm.br/app/uploads/sites/791/2020/09/flux1.jpg" alt="" width="745" height="417" /></div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="hJDwNd-AhqUyc-R6PoUb JNdkSc L6cTce-purZT L6cTce-pSzOP">
<div class="JNdkSc-SmKAyb">
<div class=""> </div>
</div>
</div>
</div>
</div>
</section>
<section id="h.5e466c2fc68333b0_20" class="yaqOZd">
<div class="yaqOZd IFuOkc"> </div>
<div class="mYVXT">
<div class="LS81yb VICjCf">
<div class="hJDwNd-AhqUyc-uQSCkd purZT-AhqUyc-II5mzb pSzOP-AhqUyc-qWD73c JNdkSc">
<div class="JNdkSc-SmKAyb">
<div class="">
<div class="oKdM2c Kzv0Me">
<div id="h.5e466c2fc68333b0_17" class="hJDwNd-AhqUyc-uQSCkd jXK9ad D2fZ2 OjCsFc wHaque GNzUNc">
<div class="jXK9ad-SmKAyb">
<div class="tyJCtd mGzaTb baZpAe">
<p class="zfr3Q" dir="ltr">É praticamente impossível identificar alguma anomalia em um diagrama nesse estado. E se existe um loop infinito nessas comunicações, como vamos saber a partir desse diagrama? Foi por conta disso que o Facebook criou o Flux para tentar resolver esses tipos de problemas.</p>
<p class="zfr3Q" dir="ltr">Como eu falei anteriormente, o Flux é uma arquitetura para o desenvolvimento de aplicações <em>web</em> com o propósito de evitar a comunicação ambígua que existe entre as <em>views</em> e os <em>models</em>, ou seja, criar um fluxo de dados unidirecional.</p>
<p class="zfr3Q" dir="ltr">A arquitetura é dividida nas seguintes camadas:</p>
<ul class="n8H08c UVNKR">
<li class="TYR86d zfr3Q">
<p class="zfr3Q" dir="ltr"><strong><em>Actions</em></strong>: são objetos contendo o identificador do elemento que queremos mudar e a informação que será atualizada no <em>store</em>;</p>
</li>
</ul>
<ul class="n8H08c UVNKR">
<li class="TYR86d zfr3Q">
<p class="zfr3Q" dir="ltr"><strong><em>Dispatcher</em></strong>: funciona como o controlador do tráfego que entra na aplicação, gerenciando as <em>actions</em> que entram no sistema;</p>
</li>
<li class="TYR86d zfr3Q">
<p class="zfr3Q" dir="ltr"><strong><em>Store</em></strong>: serve como a camada de dados que atualiza cada vez que uma ação é realizada;</p>
</li>
<li class="TYR86d zfr3Q">
<p class="zfr3Q" dir="ltr"><strong><em>Views</em></strong>: que é a camada de visualização e realiza a re-renderização cada vez que o <em>store</em> muda de estado.</p>
</li>
</ul>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</section>
<section id="h.5e466c2fc68333b0_24" class="yaqOZd">
<div class="yaqOZd IFuOkc"> </div>
<div class="mYVXT">
<div class="LS81yb VICjCf">
<div class="hJDwNd-AhqUyc-R6PoUb JNdkSc L6cTce-purZT L6cTce-pSzOP">
<div class="JNdkSc-SmKAyb">
<div class=""> </div>
</div>
</div>
<div class="hJDwNd-AhqUyc-EehZO purZT-AhqUyc-II5mzb pSzOP-AhqUyc-qWD73c JNdkSc">
<div class="JNdkSc-SmKAyb">
<div class="">
<div class="oKdM2c Kzv0Me">
<div id="h.5e466c2fc68333b0_21" class="hJDwNd-AhqUyc-EehZO jXK9ad D2fZ2 OjCsFc wHaque">
<div class="jXK9ad-SmKAyb">
<div class="tyJCtd baZpAe">
<div class="t3iYD"><img class="aligncenter wp-image-2791 size-full" src="https://www.ufsm.br/app/uploads/sites/791/2020/09/flux2.jpg" alt="" width="739" height="418" /></div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="hJDwNd-AhqUyc-R6PoUb JNdkSc L6cTce-purZT L6cTce-pSzOP">
<div class="JNdkSc-SmKAyb">
<div class=""> </div>
</div>
</div>
</div>
</div>
</section>
<section id="h.5e466c2fc68333b0_28" class="yaqOZd">
<div class="yaqOZd IFuOkc"> </div>
<div class="mYVXT">
<div class="LS81yb VICjCf">
<div class="hJDwNd-AhqUyc-uQSCkd purZT-AhqUyc-II5mzb pSzOP-AhqUyc-qWD73c JNdkSc">
<div class="JNdkSc-SmKAyb">
<div class="">
<div class="oKdM2c Kzv0Me">
<div id="h.5e466c2fc68333b0_25" class="hJDwNd-AhqUyc-uQSCkd jXK9ad D2fZ2 OjCsFc wHaque GNzUNc">
<div class="jXK9ad-SmKAyb">
<div class="tyJCtd mGzaTb baZpAe">
<p class="zfr3Q" dir="ltr">Com o diagrama fica mais fácil de ver o fluxo de dados. Ainda, é possível enviar uma <em>action</em> a partir da <em>view</em>, acionando o <em>dispatcher</em> para receber essa ação.</p>
<p class="zfr3Q" dir="ltr">Deu pra perceber que o <em>Dispatcher</em> é o coração dessa arquitetura, né? Ele acaba sendo a parte mais importante da arquitetura na medida em que a aplicação cresce, pois é responsável por todo o gerenciamento das ações e das dependências que essas geram na camada de dados.</p>
<p class="zfr3Q" dir="ltr">Implementando essa arquitetura, eu consigo lembrar de dois exemplos que estão sendo bastante visados no mercado de trabalho, o React, <em>framework</em> de código aberto que hoje é mantido pelo Facebook, e o Vue, outro <em>framework</em> de código aberto que é mantido pela comunidade. Essas ferramentas têm um sistema de "gerenciamento de estados" que utiliza a arquitetura Flux. Para o React, esse sistema se chama Redux, e no Vue, ele é chamado de Vuex.</p>
<p class="zfr3Q" dir="ltr">Essas duas bibliotecas implementam o Flux de forma a otimizar o fluxo de dados, diminuindo a troca de mensagens entre o cliente e o servidor, e a escrita de código, criando uma camada exclusiva para os dados precisam ser persistidos em várias camadas do sistema.</p>
<p class="zfr3Q" dir="ltr">No Redux, não temos a camada do <em>Dispatcher</em>, pois a biblioteca depende de funções puras ao invés de emissores de evento, eliminando essa camada de gerenciamento das ações. Outra diferença do Redux para o Flux, é que não existe "mudança" nos dados. O que realmente acontece é uma nova instância daquele dado com outro valor, pois a ferramenta funciona com uma política de objetos imutáveis para garantir a consistência dos dados.</p>
<p class="zfr3Q" dir="ltr">O funcionamento da ferramenta tem o diagrama mais ou menos como na imagem abaixo:</p>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</section>
<section id="h.5e466c2fc68333b0_32" class="yaqOZd">
<div class="mYVXT">
<div class="LS81yb VICjCf">
<div class="hJDwNd-AhqUyc-OiUrBf purZT-AhqUyc-II5mzb pSzOP-AhqUyc-qWD73c JNdkSc">
<div class="JNdkSc-SmKAyb">
<div class="">
<div class="oKdM2c Kzv0Me">
<div id="h.5e466c2fc68333b0_29" class="hJDwNd-AhqUyc-OiUrBf jXK9ad D2fZ2 OjCsFc wHaque">
<div class="jXK9ad-SmKAyb">
<div class="tyJCtd baZpAe">
<div class="t3iYD"><img class="aligncenter wp-image-2792 size-full" src="https://www.ufsm.br/app/uploads/sites/791/2020/09/flux3.png" alt="" width="678" height="526" /></div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="hJDwNd-AhqUyc-ibL1re JNdkSc L6cTce-purZT L6cTce-pSzOP">
<div class="JNdkSc-SmKAyb">
<div class=""> </div>
</div>
</div>
</div>
</div>
</section>
<section id="h.5e466c2fc68333b0_36" class="yaqOZd">
<div class="yaqOZd IFuOkc"><span style="font-size: inherit">Como mencionei anteriormente, não existe um </span><em style="font-size: inherit">Dispatcher</em><span style="font-size: inherit">, ao invés disso, existem os </span><em style="font-size: inherit">reducers</em><span style="font-size: inherit"> que fazem o papel dessa outra funcionalidade, gerenciando o que acontece com os estados do sistema, por exemplo, quais mudanças precisam ser realizadas.</span></div>
<div class="mYVXT">
<div class="LS81yb VICjCf">
<div class="hJDwNd-AhqUyc-uQSCkd purZT-AhqUyc-II5mzb pSzOP-AhqUyc-qWD73c JNdkSc">
<div class="JNdkSc-SmKAyb">
<div class="">
<div class="oKdM2c Kzv0Me">
<div id="h.5e466c2fc68333b0_33" class="hJDwNd-AhqUyc-uQSCkd jXK9ad D2fZ2 OjCsFc wHaque GNzUNc">
<div class="jXK9ad-SmKAyb">
<div class="tyJCtd mGzaTb baZpAe">
<p class="zfr3Q" dir="ltr">Podemos tentar entender com o template exemplo quando criamos um react-app com a flag --template redux:</p>
<p class="zfr3Q" dir="ltr"><code>npx create-react-app my-app --template redux</code></p>
<p class="zfr3Q" dir="ltr">Acessando o projeto após a sua criação, podemos ver a base de um aplicativo em React com o Redux embutido. O exemplo é bem simples, um acumulador de clicks, mas dá pra ver e entender todo o fluxo do Redux.</p>
<p class="zfr3Q" dir="ltr">A página Main.js tem o seguinte template:</p>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</section>
<section id="h.5e466c2fc68333b0_40" class="yaqOZd">
<div class="yaqOZd IFuOkc"> </div>
<div class="mYVXT">
<div class="LS81yb VICjCf">
<div class="hJDwNd-AhqUyc-ibL1re JNdkSc L6cTce-purZT L6cTce-pSzOP">
<div class="JNdkSc-SmKAyb">
<div class=""> </div>
</div>
</div>
<div class="hJDwNd-AhqUyc-OiUrBf purZT-AhqUyc-II5mzb pSzOP-AhqUyc-qWD73c JNdkSc">
<div class="JNdkSc-SmKAyb">
<div class="">
<div class="oKdM2c Kzv0Me">
<div id="h.5e466c2fc68333b0_37" class="hJDwNd-AhqUyc-OiUrBf jXK9ad D2fZ2 OjCsFc wHaque">
<div class="jXK9ad-SmKAyb">
<div class="tyJCtd baZpAe">
<div class="t3iYD"><img class="aligncenter wp-image-2793 size-medium" src="https://www.ufsm.br/app/uploads/sites/791/2020/09/flux4-300x233.png" alt="" width="300" height="233" /></div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="hJDwNd-AhqUyc-ibL1re JNdkSc L6cTce-purZT L6cTce-pSzOP">
<div class="JNdkSc-SmKAyb">
<div class=""> </div>
</div>
</div>
</div>
</div>
</section>
<section id="h.5e466c2fc68333b0_44" class="yaqOZd">
<div class="yaqOZd IFuOkc"> </div>
<div class="mYVXT">
<div class="LS81yb VICjCf">
<div class="hJDwNd-AhqUyc-uQSCkd purZT-AhqUyc-II5mzb pSzOP-AhqUyc-qWD73c JNdkSc">
<div class="JNdkSc-SmKAyb">
<div class="">
<div class="oKdM2c Kzv0Me">
<div id="h.5e466c2fc68333b0_41" class="hJDwNd-AhqUyc-uQSCkd jXK9ad D2fZ2 OjCsFc wHaque GNzUNc">
<div class="jXK9ad-SmKAyb">
<div class="tyJCtd mGzaTb baZpAe">
<p class="zfr3Q" dir="ltr">Para os botões de somar (+), diminuir (-) e adicionar uma quantia (Add Amount), existe um evento <em>onclick</em> sendo emitido, dessa forma:</p>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</section>
<section id="h.5e466c2fc68333b0_48" class="yaqOZd">
<div class="mYVXT">
<div class="LS81yb VICjCf">
<div class="hJDwNd-AhqUyc-c5RTEf JNdkSc L6cTce-purZT L6cTce-pSzOP">
<div class="JNdkSc-SmKAyb">
<div class=""> </div>
</div>
</div>
<div class="hJDwNd-AhqUyc-qWD73c purZT-AhqUyc-II5mzb pSzOP-AhqUyc-qWD73c JNdkSc">
<div class="JNdkSc-SmKAyb">
<div class="">
<div class="oKdM2c Kzv0Me">
<div id="h.5e466c2fc68333b0_45" class="hJDwNd-AhqUyc-qWD73c jXK9ad D2fZ2 OjCsFc wHaque">
<div class="jXK9ad-SmKAyb">
<div class="tyJCtd baZpAe">
<div class="t3iYD"><img class="aligncenter wp-image-2794 size-full" src="https://www.ufsm.br/app/uploads/sites/791/2020/09/flux5.png" alt="" width="524" height="573" /></div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="hJDwNd-AhqUyc-c5RTEf JNdkSc L6cTce-purZT L6cTce-pSzOP">
<div class="JNdkSc-SmKAyb">
<div class=""> </div>
</div>
</div>
</div>
</div>
</section>
<section id="h.5e466c2fc68333b0_52" class="yaqOZd">
<div class="yaqOZd IFuOkc"> </div>
<div class="mYVXT">
<div class="LS81yb VICjCf">
<div class="hJDwNd-AhqUyc-uQSCkd purZT-AhqUyc-II5mzb pSzOP-AhqUyc-qWD73c JNdkSc">
<div class="JNdkSc-SmKAyb">
<div class="">
<div class="oKdM2c Kzv0Me">
<div id="h.5e466c2fc68333b0_49" class="hJDwNd-AhqUyc-uQSCkd jXK9ad D2fZ2 OjCsFc wHaque GNzUNc">
<div class="jXK9ad-SmKAyb">
<div class="tyJCtd mGzaTb baZpAe">
<p class="zfr3Q" dir="ltr">Batendo o olho, vemos a palavra-chave <em>dispatch</em> sendo chamada como uma função, e passando como parâmetro uma outra função, seja ela a <em>increment()</em> ou <em>decrement()</em>. A aplicação está acessando o <em>store</em> com a chamada do dispatch, e passando como parâmetro, a ação que ela quer realizar.</p>
<p class="zfr3Q" dir="ltr">Mas onde estão esses métodos <em>increment()</em> e <em>decrement()</em>?</p>
<p class="zfr3Q" dir="ltr">Eles estão lá no arquivo <strong>counterSlice.js</strong>, onde são definidos os <em>reducers</em>, ou ações. Essas ações que fazem atualização nos estados da aplicação. Nesse exemplo simples, o único estado que está mudando é o valor do acumulador na tela. Cada vez que clicamos para somar ou subtrair desse acumulador, é realizada uma ação no sistema para ajustar esse estado.</p>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</section>
<section id="h.5e466c2fc68333b0_56" class="yaqOZd">
<div class="yaqOZd IFuOkc"> </div>
<div class="mYVXT">
<div class="LS81yb VICjCf">
<div class="hJDwNd-AhqUyc-ibL1re JNdkSc L6cTce-purZT L6cTce-pSzOP">
<div class="JNdkSc-SmKAyb">
<div class=""> </div>
</div>
</div>
<div class="hJDwNd-AhqUyc-OiUrBf purZT-AhqUyc-II5mzb pSzOP-AhqUyc-qWD73c JNdkSc">
<div class="JNdkSc-SmKAyb">
<div class="">
<div class="oKdM2c Kzv0Me">
<div id="h.5e466c2fc68333b0_53" class="hJDwNd-AhqUyc-OiUrBf jXK9ad D2fZ2 OjCsFc wHaque">
<div class="jXK9ad-SmKAyb">
<div class="tyJCtd baZpAe">
<div class="t3iYD"><img class="aligncenter wp-image-2795 size-full" src="https://www.ufsm.br/app/uploads/sites/791/2020/09/flux6.png" alt="" width="745" height="505" /></div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="hJDwNd-AhqUyc-ibL1re JNdkSc L6cTce-purZT L6cTce-pSzOP">
<div class="JNdkSc-SmKAyb">
<div class=""> </div>
</div>
</div>
</div>
</div>
</section>
<section id="h.5e466c2fc68333b0_60" class="yaqOZd">
<div class="yaqOZd IFuOkc"> </div>
<div class="mYVXT">
<div class="LS81yb VICjCf">
<div class="hJDwNd-AhqUyc-uQSCkd purZT-AhqUyc-II5mzb pSzOP-AhqUyc-qWD73c JNdkSc">
<div class="JNdkSc-SmKAyb">
<div class="">
<div class="oKdM2c Kzv0Me">
<div id="h.5e466c2fc68333b0_57" class="hJDwNd-AhqUyc-uQSCkd jXK9ad D2fZ2 OjCsFc wHaque GNzUNc">
<div class="jXK9ad-SmKAyb">
<div class="tyJCtd mGzaTb baZpAe">
<p class="zfr3Q" dir="ltr">Os <em>reducers</em> sempre recebem dois parâmetros, o <em>state</em>, que se refere ao estado atual, e um segundo parâmetro, o <em>action</em>, que pode ser uma quantia a ser incrementada, como está sendo realizado no <em>incrementByAmount</em>.</p>
<p class="zfr3Q" dir="ltr">Por outro lado, o Vuex é implementado bem na proposta do Flux, contendo essas camadas bem definidas, como dá pra ver no diagrama abaixo:</p>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</section>
<section id="h.5e466c2fc68333b0_64" class="yaqOZd">
<div class="mYVXT">
<div class="LS81yb VICjCf">
<div class="hJDwNd-AhqUyc-OiUrBf purZT-AhqUyc-II5mzb pSzOP-AhqUyc-qWD73c JNdkSc">
<div class="JNdkSc-SmKAyb">
<div class="">
<div class="oKdM2c Kzv0Me">
<div id="h.5e466c2fc68333b0_61" class="hJDwNd-AhqUyc-OiUrBf jXK9ad D2fZ2 OjCsFc wHaque">
<div class="jXK9ad-SmKAyb">
<div class="tyJCtd baZpAe">
<div class="t3iYD"><img class="aligncenter wp-image-2796 size-full" src="https://www.ufsm.br/app/uploads/sites/791/2020/09/flux7.png" alt="" width="701" height="502" /></div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="hJDwNd-AhqUyc-ibL1re JNdkSc L6cTce-purZT L6cTce-pSzOP">
<div class="JNdkSc-SmKAyb">
<div class=""><span style="font-size: inherit">Vou utilizar um trecho de código que foi feito para uma oficina prática, podemos ver como o </span><em style="font-size: inherit">store</em><span style="font-size: inherit"> é implementado no Vue. No objeto do </span><em style="font-size: inherit">store</em><span style="font-size: inherit">, temos as propriedades </span><em style="font-size: inherit">state, getters, mutations, actions e modules</em><span style="font-size: inherit">. Seguindo o fluxo do diagrama acima, conseguimos ver o fluxo da aplicação abaixo:</span></div>
</div>
</div>
</div>
</div>
</section>
<section id="h.5e466c2fc68333b0_68" class="yaqOZd">
<div class="mYVXT">
<div class="LS81yb VICjCf">
<div class="hJDwNd-AhqUyc-uQSCkd purZT-AhqUyc-II5mzb pSzOP-AhqUyc-qWD73c JNdkSc">
<div class="JNdkSc-SmKAyb">
<div class="">
<div class="oKdM2c Kzv0Me">
<div id="h.5e466c2fc68333b0_65" class="hJDwNd-AhqUyc-uQSCkd jXK9ad D2fZ2 OjCsFc wHaque GNzUNc">
<div class="jXK9ad-SmKAyb">
<div class="tyJCtd mGzaTb baZpAe">
<p class="zfr3Q" dir="ltr">Na tela de Login dessa aplicação, temos os métodos para realizar o login do usuário:</p>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</section>
<section id="h.5e466c2fc68333b0_72" class="yaqOZd">
<div class="mYVXT">
<div class="LS81yb VICjCf">
<div class="hJDwNd-AhqUyc-ibL1re JNdkSc L6cTce-purZT L6cTce-pSzOP">
<div class="JNdkSc-SmKAyb">
<div class=""> </div>
</div>
</div>
<div class="hJDwNd-AhqUyc-OiUrBf purZT-AhqUyc-II5mzb pSzOP-AhqUyc-qWD73c JNdkSc">
<div class="JNdkSc-SmKAyb">
<div class="">
<div class="oKdM2c Kzv0Me">
<div id="h.5e466c2fc68333b0_69" class="hJDwNd-AhqUyc-OiUrBf jXK9ad D2fZ2 OjCsFc wHaque">
<div class="jXK9ad-SmKAyb">
<div class="tyJCtd baZpAe">
<div class="t3iYD"><img class="aligncenter wp-image-2797 size-full" src="https://www.ufsm.br/app/uploads/sites/791/2020/09/flux8.png" alt="" width="596" height="310" /></div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="hJDwNd-AhqUyc-ibL1re JNdkSc L6cTce-purZT L6cTce-pSzOP">
<div class="JNdkSc-SmKAyb">
<div class=""> </div>
</div>
</div>
</div>
</div>
</section>
<section id="h.5e466c2fc68333b0_76" class="yaqOZd">
<div class="mYVXT">
<div class="LS81yb VICjCf">
<div class="hJDwNd-AhqUyc-uQSCkd purZT-AhqUyc-II5mzb pSzOP-AhqUyc-qWD73c JNdkSc">
<div class="JNdkSc-SmKAyb">
<div class="">
<div class="oKdM2c Kzv0Me">
<div id="h.5e466c2fc68333b0_73" class="hJDwNd-AhqUyc-uQSCkd jXK9ad D2fZ2 OjCsFc wHaque GNzUNc">
<div class="jXK9ad-SmKAyb">
<div class="tyJCtd mGzaTb baZpAe">
<p class="zfr3Q" dir="ltr">Conseguimos ver que o método está chamando this.$store.dispatch(), a mesma palavra-chave utilizada no Redux, porque o que está acontecendo é exatamente a mesma coisa. A aplicação está realizando uma ação no <em>store</em>. No lado do <em>store</em> da aplicação, a <em>action</em> <em><strong>login</strong></em> será executada.</p>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</section>
<section id="h.5e466c2fc68333b0_80" class="yaqOZd">
<div class="mYVXT">
<div class="LS81yb VICjCf">
<div class="hJDwNd-AhqUyc-ibL1re JNdkSc L6cTce-purZT L6cTce-pSzOP">
<div class="JNdkSc-SmKAyb">
<div class=""> </div>
</div>
</div>
<div class="hJDwNd-AhqUyc-OiUrBf purZT-AhqUyc-II5mzb pSzOP-AhqUyc-qWD73c JNdkSc">
<div class="JNdkSc-SmKAyb">
<div class="">
<div class="oKdM2c Kzv0Me">
<div id="h.5e466c2fc68333b0_77" class="hJDwNd-AhqUyc-OiUrBf jXK9ad D2fZ2 OjCsFc wHaque">
<div class="jXK9ad-SmKAyb">
<div class="tyJCtd baZpAe">
<div class="t3iYD"><img class="aligncenter wp-image-2798 size-full" src="https://www.ufsm.br/app/uploads/sites/791/2020/09/flux9.png" alt="" width="766" height="667" /></div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="hJDwNd-AhqUyc-ibL1re JNdkSc L6cTce-purZT L6cTce-pSzOP">
<div class="JNdkSc-SmKAyb">
<div class=""> </div>
</div>
</div>
</div>
</div>
</section>
<section id="h.5e466c2fc68333b0_84" class="yaqOZd">
<div class="yaqOZd IFuOkc"> </div>
<div class="mYVXT">
<div class="LS81yb VICjCf">
<div class="hJDwNd-AhqUyc-uQSCkd purZT-AhqUyc-II5mzb pSzOP-AhqUyc-qWD73c JNdkSc">
<div class="JNdkSc-SmKAyb">
<div class="">
<div class="oKdM2c Kzv0Me">
<div id="h.5e466c2fc68333b0_81" class="hJDwNd-AhqUyc-uQSCkd jXK9ad D2fZ2 OjCsFc wHaque GNzUNc">
<div class="jXK9ad-SmKAyb">
<div class="tyJCtd mGzaTb baZpAe">
<p class="zfr3Q" dir="ltr">Essa <em>action</em> recebe dois parâmetros, também. O primeiro é o <em>context</em>, contexto atual da aplicação, ou seja, os valores atuais do sistema. Esse objeto está sendo desestruturado para pegar apenas o método <em>commit</em> do store, que serve para uma ação realizar uma <em>mutation</em> no store, o que, de fato, irá mudar o valor do estado.</p>
<p class="zfr3Q" dir="ltr">Nesse caso, acontece um <em>commit</em> de <strong>‘auth_success’ </strong>ou <strong>‘auth_error’</strong> dependendo da resposta da API. Caso o login for realizado, a mutação de sucesso será realizada, caso contrário, será realizada a mutação de erro.</p>
<p class="zfr3Q" dir="ltr">As mutações trocam o valor do estado, literalmente. Recebem os valores vindos das ações e sobrescrevem aquele valor atual com esse valor recebido.</p>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</section>
<section id="h.5e466c2fc68333b0_88" class="yaqOZd">
<div class="mYVXT">
<div class="LS81yb VICjCf">
<div class="hJDwNd-AhqUyc-qWD73c purZT-AhqUyc-II5mzb pSzOP-AhqUyc-qWD73c JNdkSc">
<div class="JNdkSc-SmKAyb">
<div class="">
<div class="oKdM2c Kzv0Me">
<div id="h.5e466c2fc68333b0_85" class="hJDwNd-AhqUyc-qWD73c jXK9ad D2fZ2 OjCsFc wHaque">
<div class="jXK9ad-SmKAyb">
<div class="tyJCtd baZpAe">
<div class="t3iYD"><img class="aligncenter wp-image-2799 size-full" src="https://www.ufsm.br/app/uploads/sites/791/2020/09/flux10.png" alt="" width="395" height="453" /></div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</section>
<section id="h.5e466c2fc68333b0_92" class="yaqOZd">
<div class="yaqOZd IFuOkc"> </div>
<div class="mYVXT">
<div class="LS81yb VICjCf">
<div class="hJDwNd-AhqUyc-uQSCkd purZT-AhqUyc-II5mzb pSzOP-AhqUyc-qWD73c JNdkSc">
<div class="JNdkSc-SmKAyb">
<div class="">
<div class="oKdM2c Kzv0Me">
<div id="h.5e466c2fc68333b0_89" class="hJDwNd-AhqUyc-uQSCkd jXK9ad D2fZ2 OjCsFc wHaque GNzUNc">
<div class="jXK9ad-SmKAyb">
<div class="tyJCtd mGzaTb baZpAe">
<p class="zfr3Q" dir="ltr">Para acessar esse projeto inteiro, vou deixar<a class="XqQF9c" href="https://www.google.com/url?q=https%3A%2F%2Fgithub.com%2Fpet-si%2Foficina-vuejs&amp;sa=D&amp;sntz=1&amp;usg=AFQjCNH9oVHvgkLqQEQStEhvn6ZNdV7WWA" target="_blank" rel="noopener noreferrer"> </a><a class="XqQF9c" href="https://www.google.com/url?q=https%3A%2F%2Fgithub.com%2Fpet-si%2Foficina-vuejs&amp;sa=D&amp;sntz=1&amp;usg=AFQjCNH9oVHvgkLqQEQStEhvn6ZNdV7WWA" target="_blank" rel="noopener noreferrer">aqui</a> o link para o repositório do código dessa aplicação. Nos commits, eu tentei deixar organizado e em ordem, como se fosse um tutorial passo-a-passo. Seguindo os commits, será possível implementar essa aplicação e ver ela funcionando.</p>
<p class="zfr3Q" dir="ltr">Os dois <em>frameworks</em> têm as suas particularidades, mas o conceito é o mesmo, pois os dois são baseados na mesma arquitetura.</p>
<p class="zfr3Q" dir="ltr">Para ver e entender melhor, tanto Vuex, quanto Redux, eu recomendo<a class="XqQF9c" href="https://www.google.com/url?q=https%3A%2F%2Fmedium.com%2Fjavascript-in-plain-english%2Fi-created-the-exact-same-app-in-react-and-vue-here-are-the-differences-e9a1ae8077fd&amp;sa=D&amp;sntz=1&amp;usg=AFQjCNGzRVhct3SGWM5qKv547P-W4OJxPw" target="_blank" rel="noopener noreferrer"> </a><a class="XqQF9c" href="https://www.google.com/url?q=https%3A%2F%2Fmedium.com%2Fjavascript-in-plain-english%2Fi-created-the-exact-same-app-in-react-and-vue-here-are-the-differences-e9a1ae8077fd&amp;sa=D&amp;sntz=1&amp;usg=AFQjCNGzRVhct3SGWM5qKv547P-W4OJxPw" target="_blank" rel="noopener noreferrer">este artigo</a>. O Sunil Sandhu implementa a mesma aplicação em React e em Vue, utilizando Redux e Vuex, mostrando o passo-a-passo e as diferenças de cada um.</p>
<p dir="ltr"> </p>
<p class="zfr3Q" dir="ltr">Referências:</p>
<ul class="n8H08c UVNKR">
<li class="TYR86d zfr3Q">
<p class="zfr3Q" dir="ltr"><a class="XqQF9c" href="https://www.google.com/url?q=https%3A%2F%2Ffacebook.github.io%2Fflux%2F&amp;sa=D&amp;sntz=1&amp;usg=AFQjCNEzWxGHn-KRaN3_jfCi2QgmUPjApw" target="_blank" rel="noopener noreferrer">Documentação do Flux</a>;</p>
</li>
<li class="TYR86d zfr3Q">
<p class="zfr3Q" dir="ltr"><a class="XqQF9c" href="https://www.google.com/url?q=https%3A%2F%2Fvuex.vuejs.org%2F&amp;sa=D&amp;sntz=1&amp;usg=AFQjCNFFc3YjKwLx5PbxTtCuojVLvLk-Iw" target="_blank" rel="noopener noreferrer">Documentação do Vuex</a>;</p>
</li>
<li class="TYR86d zfr3Q">
<p class="zfr3Q" dir="ltr"><a class="XqQF9c" href="https://www.google.com/url?q=https%3A%2F%2Fredux.js.org%2F&amp;sa=D&amp;sntz=1&amp;usg=AFQjCNGuftHhoZ5W08xziuJUvVZR6dlAVg" target="_blank" rel="noopener noreferrer">Documentação do Redux</a>;</p>
</li>
<li class="TYR86d zfr3Q">
<p class="zfr3Q" dir="ltr"><a class="XqQF9c" href="https://www.google.com/url?q=https%3A%2F%2Fmedium.com%2Fjavascript-in-plain-english%2Fi-created-the-exact-same-app-in-react-and-vue-here-are-the-differences-e9a1ae8077fd&amp;sa=D&amp;sntz=1&amp;usg=AFQjCNGzRVhct3SGWM5qKv547P-W4OJxPw" target="_blank" rel="noopener noreferrer">Mesma aplicação React vs Vue</a>;</p>
</li>
<li class="TYR86d zfr3Q">
<p class="zfr3Q" dir="ltr"><a class="XqQF9c" href="https://www.google.com/url?q=https%3A%2F%2Fgithub.com%2Fpet-si%2Foficina-vuejs&amp;sa=D&amp;sntz=1&amp;usg=AFQjCNH9oVHvgkLqQEQStEhvn6ZNdV7WWA" target="_blank" rel="noopener noreferrer">Repositório da aplicação em Vue</a>.</p>
</li>
</ul>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</section>
<!-- /wp:tadv/classic-paragraph -->]]></content:encoded>
													</item>
						<item>
				<title>Unreal Engine</title>
				<link>https://www.ufsm.br/pet/sistemas-de-informacao/2020/03/10/unreal-eng</link>
				<pubDate>Tue, 10 Mar 2020 20:15:09 +0000</pubDate>
						<category><![CDATA[Destaques]]></category>
		<category><![CDATA[Redações]]></category>
		<category><![CDATA[Computação Gráfica]]></category>
		<category><![CDATA[Frameworks]]></category>

				<guid isPermaLink="false">https://www.ufsm.br/pet/sistemas-de-informacao/?p=2675</guid>
						<description><![CDATA[E aí pessoal, nesta edição do PET Redação vamos utilizar a Unreal Engine para criar um FPS super simples, a ideia é mostrar pra vocês o quão fácil é começar! A Unreal Engine é um “motor de jogo” feito pela Epic Games, isso mesmo, a mesma empresa que produziu o Fortnite, não só o próprio [&hellip;]]]></description>
							<content:encoded><![CDATA[  <!-- wp:tadv/classic-paragraph -->
<section id="h.7c88d168eecd60f0_13" class="yaqOZd">
<div class="mYVXT">
<div class="LS81yb VICjCf">
<div class="hJDwNd-AhqUyc-uQSCkd purZT-AhqUyc-II5mzb pSzOP-AhqUyc-qWD73c JNdkSc">
<div class="JNdkSc-SmKAyb">
<div class="">
<div class="oKdM2c Kzv0Me">
<div id="h.7c88d168eecd60f0_10" class="hJDwNd-AhqUyc-uQSCkd jXK9ad D2fZ2 OjCsFc wHaque GNzUNc">
<div class="jXK9ad-SmKAyb">
<div class="tyJCtd mGzaTb baZpAe">
<p class="zfr3Q" dir="ltr">E aí pessoal, nesta edição do PET Redação vamos utilizar a Unreal Engine para criar um FPS super simples, a ideia é mostrar pra vocês o quão fácil é começar!</p>
<p class="zfr3Q" dir="ltr">A Unreal Engine é um “motor de jogo” feito pela Epic Games, isso mesmo, a mesma empresa que produziu o Fortnite, não só o próprio Fortnite é feito nela, mas muitos outros jogos, como por exemplo:</p>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</section>
<section id="h.12ff2366666eeb2d_0" class="yaqOZd">
<div class="yaqOZd IFuOkc">
<table style="border-collapse: collapse;width: 100%">
<tbody>
<tr>
<td style="width: 25%;text-align: center"><img class="alignnone size-medium wp-image-2943" src="https://www.ufsm.br/app/uploads/sites/791/2020/09/unreal1-300x300.jpg" alt="" width="300" height="300" />Dragon Ball Fighterz</td>
<td style="width: 25%;text-align: center"><img class="alignnone size-medium wp-image-2944" src="https://www.ufsm.br/app/uploads/sites/791/2020/09/unreal2-300x300.jpg" alt="" width="300" height="300" />Sea of Thieves</td>
<td style="width: 25%;text-align: center"><img class="alignnone size-medium wp-image-2945" src="https://www.ufsm.br/app/uploads/sites/791/2020/09/unreal3-300x300.jpg" alt="" width="300" height="300" /><br />Days Gone</td>
<td style="width: 25%;text-align: center"><a href="https://www.google.com/url?q=https%3A%2F%2Fwww.xbox.com%2Fpt-BR%2Fgames%2Fgears-of-war-4&amp;sa=D&amp;sntz=1&amp;usg=AFQjCNF9YiPHWLvcCEmR_EtVm0abhTyKmA" target="_blank" rel="noopener noreferrer"><img class="alignnone size-medium wp-image-2946" src="https://www.ufsm.br/app/uploads/sites/791/2020/09/unreal4-300x300.jpg" alt="" width="300" height="300" /></a> Gears of War 4</td>
</tr>
</tbody>
</table>
</div>
<div class="mYVXT">
<div class="LS81yb VICjCf">
<div class="hJDwNd-AhqUyc-c5RTEf purZT-AhqUyc-c5RTEf pSzOP-AhqUyc-c5RTEf JNdkSc yYI8W ">
<div class="JNdkSc-SmKAyb">
<div class="">
<div class="oKdM2c Kzv0Me">
<div id="h.12ff2366666eeb2d_3" class="hJDwNd-AhqUyc-c5RTEf purZT-AhqUyc-c5RTEf pSzOP-AhqUyc-c5RTEf jXK9ad D2fZ2 OjCsFc">
<div class="jXK9ad-SmKAyb">
<div class="tyJCtd baZpAe">
<div class="t3iYD"> </div>
</div>
</div>
</div>
</div>
<div class="oKdM2c">
<div id="h.12ff2366666eeb2d_5" class="hJDwNd-AhqUyc-c5RTEf purZT-AhqUyc-c5RTEf pSzOP-AhqUyc-c5RTEf jXK9ad D2fZ2 wHaque GNzUNc">
<div class="jXK9ad-SmKAyb">
<div class="tyJCtd mGzaTb baZpAe">
<div id="h.w2rxethmpuuu" class="GV3q8e aP9Z7e"> </div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</section>
<section id="h.12ff2366666eeb2d_54" class="yaqOZd">
<div class="mYVXT">
<div class="LS81yb VICjCf">
<div class="hJDwNd-AhqUyc-uQSCkd purZT-AhqUyc-II5mzb pSzOP-AhqUyc-qWD73c JNdkSc">
<div class="JNdkSc-SmKAyb">
<div class="">
<div class="oKdM2c Kzv0Me">
<div id="h.12ff2366666eeb2d_57" class="hJDwNd-AhqUyc-uQSCkd jXK9ad D2fZ2 OjCsFc wHaque GNzUNc">
<div class="jXK9ad-SmKAyb">
<div class="tyJCtd mGzaTb baZpAe">
<p class="zfr3Q" dir="ltr">Para começar é necessário Baixar o “Epic Games Launcher”;</p>
<p class="zfr3Q" dir="ltr">No mesmo, fazer login ou criar sua conta e depois “Instalar a Unreal Engine”;</p>
<p class="zfr3Q" dir="ltr">Clicar em Inicializar, será aberto o “Unreal Editor” na aba “Select or Create New Project”;</p>
<p class="zfr3Q" dir="ltr">Glique em “Games” e então em Próximo:</p>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</section>
<section id="h.12ff2366666eeb2d_50" class="yaqOZd">
<div class="mYVXT">
<div class="LS81yb VICjCf">
<div class="hJDwNd-AhqUyc-ibL1re JNdkSc L6cTce-purZT L6cTce-pSzOP">
<div class="JNdkSc-SmKAyb">
<div class=""> </div>
</div>
</div>
<div class="hJDwNd-AhqUyc-OiUrBf purZT-AhqUyc-II5mzb pSzOP-AhqUyc-qWD73c JNdkSc">
<div class="JNdkSc-SmKAyb">
<div class="">
<div class="oKdM2c Kzv0Me">
<div id="h.12ff2366666eeb2d_53" class="hJDwNd-AhqUyc-OiUrBf jXK9ad D2fZ2 OjCsFc wHaque">
<div class="jXK9ad-SmKAyb">
<div class="tyJCtd baZpAe">
<div class="t3iYD"><img class="aligncenter wp-image-2947 size-full" src="https://www.ufsm.br/app/uploads/sites/791/2020/09/unreal5.png" alt="" width="1106" height="722" /></div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="hJDwNd-AhqUyc-ibL1re JNdkSc L6cTce-purZT L6cTce-pSzOP">
<div class="JNdkSc-SmKAyb">
<div class=""> </div>
</div>
</div>
</div>
</div>
</section>
<section id="h.12ff2366666eeb2d_58" class="yaqOZd">
<div class="mYVXT">
<div class="LS81yb VICjCf">
<div class="hJDwNd-AhqUyc-uQSCkd purZT-AhqUyc-II5mzb pSzOP-AhqUyc-qWD73c JNdkSc">
<div class="JNdkSc-SmKAyb">
<div class="">
<div class="oKdM2c Kzv0Me">
<div id="h.12ff2366666eeb2d_61" class="hJDwNd-AhqUyc-uQSCkd jXK9ad D2fZ2 OjCsFc wHaque GNzUNc">
<div class="jXK9ad-SmKAyb">
<div class="tyJCtd mGzaTb baZpAe">
<p class="zfr3Q" dir="ltr">Selecionar “First Person”</p>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</section>
<section id="h.12ff2366666eeb2d_62" class="yaqOZd">
<div class="mYVXT">
<div class="LS81yb VICjCf">
<div class="hJDwNd-AhqUyc-c5RTEf JNdkSc L6cTce-purZT L6cTce-pSzOP">
<div class="JNdkSc-SmKAyb">
<div class=""> </div>
</div>
</div>
<div class="hJDwNd-AhqUyc-qWD73c purZT-AhqUyc-II5mzb pSzOP-AhqUyc-qWD73c JNdkSc">
<div class="JNdkSc-SmKAyb">
<div class="">
<div class="oKdM2c Kzv0Me">
<div id="h.12ff2366666eeb2d_65" class="hJDwNd-AhqUyc-qWD73c jXK9ad D2fZ2 OjCsFc wHaque">
<div class="jXK9ad-SmKAyb">
<div class="tyJCtd baZpAe">
<div class="t3iYD"><img class="aligncenter wp-image-2948 size-full" src="https://www.ufsm.br/app/uploads/sites/791/2020/09/unreal6.jpg" alt="" width="551" height="286" /></div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="hJDwNd-AhqUyc-c5RTEf JNdkSc L6cTce-purZT L6cTce-pSzOP">
<div class="JNdkSc-SmKAyb">
<div class=""> </div>
</div>
</div>
</div>
</div>
</section>
<section id="h.12ff2366666eeb2d_66" class="yaqOZd">
<div class="yaqOZd IFuOkc"> </div>
<div class="mYVXT">
<div class="LS81yb VICjCf">
<div class="hJDwNd-AhqUyc-uQSCkd purZT-AhqUyc-II5mzb pSzOP-AhqUyc-qWD73c JNdkSc">
<div class="JNdkSc-SmKAyb">
<div class="">
<div class="oKdM2c Kzv0Me">
<div id="h.12ff2366666eeb2d_69" class="hJDwNd-AhqUyc-uQSCkd jXK9ad D2fZ2 OjCsFc wHaque GNzUNc">
<div class="jXK9ad-SmKAyb">
<div class="tyJCtd mGzaTb baZpAe">
<p class="zfr3Q" dir="ltr">Vale-se ressaltar que hé muitos templates interessantes, por exemplo, "Vehicle" que proporciona um set de desenvolvimento voltado a jogos de carro e "Vehicle Advanced", template que facilita o desenvolvimento de jogos de corrida que fazem mais uso de física, "Top Down" utilizado nos dois primeiros games da franquia GTA, etc.</p>
<p class="zfr3Q" dir="ltr">Nas configurações de projeto, você pode selecionar as seguintes opções:</p>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</section>
<section id="h.12ff2366666eeb2d_70" class="yaqOZd">
<div class="yaqOZd IFuOkc"> </div>
<div class="mYVXT">
<div class="LS81yb VICjCf">
<div class="hJDwNd-AhqUyc-ibL1re JNdkSc L6cTce-purZT L6cTce-pSzOP">
<div class="JNdkSc-SmKAyb">
<div class=""> </div>
</div>
</div>
<div class="hJDwNd-AhqUyc-OiUrBf purZT-AhqUyc-II5mzb pSzOP-AhqUyc-qWD73c JNdkSc">
<div class="JNdkSc-SmKAyb">
<div class="">
<div class="oKdM2c Kzv0Me">
<div id="h.12ff2366666eeb2d_73" class="hJDwNd-AhqUyc-OiUrBf jXK9ad D2fZ2 OjCsFc wHaque">
<div class="jXK9ad-SmKAyb">
<div class="tyJCtd baZpAe">
<div class="t3iYD"><img class="aligncenter wp-image-2949 size-full" src="https://www.ufsm.br/app/uploads/sites/791/2020/09/unreal7.png" alt="" width="951" height="680" /></div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="hJDwNd-AhqUyc-ibL1re JNdkSc L6cTce-purZT L6cTce-pSzOP">
<div class="JNdkSc-SmKAyb">
<div class=""> </div>
</div>
</div>
</div>
</div>
</section>
<section id="h.12ff2366666eeb2d_74" class="yaqOZd">
<div class="yaqOZd IFuOkc"><span style="font-size: inherit">Na primeira opção selecionamos blueprint, um recurso que permite desenvolver um jogo sem programar sequer uma linha de código.</span></div>
<div class="mYVXT">
<div class="LS81yb VICjCf">
<div class="hJDwNd-AhqUyc-uQSCkd purZT-AhqUyc-II5mzb pSzOP-AhqUyc-qWD73c JNdkSc">
<div class="JNdkSc-SmKAyb">
<div class="">
<div class="oKdM2c Kzv0Me">
<div id="h.12ff2366666eeb2d_77" class="hJDwNd-AhqUyc-uQSCkd jXK9ad D2fZ2 OjCsFc wHaque GNzUNc">
<div class="jXK9ad-SmKAyb">
<div class="tyJCtd mGzaTb baZpAe">
<p class="zfr3Q" dir="ltr">Na segunda opção selecione a qualidade de acordo com a sua maquina, para maquinas mais fracas, selecione opções inferiores...</p>
<p class="zfr3Q" dir="ltr">Se você possui uma GPU com a tecnologia de <span class=" aw5Odc"><a class="XqQF9c" href="https://www.google.com/url?q=https%3A%2F%2Fen.wikipedia.org%2Fwiki%2FRay_tracing_%28graphics%29&amp;sa=D&amp;sntz=1&amp;usg=AFQjCNEx30PDNLcKSCmHV1-_aBPUIvrUfg" target="_blank" rel="noopener noreferrer">Ray Tracing</a></span> pode deixar a terceira opção habilitada, senão, siga o print acima.</p>
<p class="zfr3Q" dir="ltr">A quarta opção é para selecionar a plataforma alvo de seu jogo, neste caso foi optado por Desktop.</p>
<p class="zfr3Q" dir="ltr">E por último, deixe o "Starter Content" habilitado, ele irá deixar muitos elementos prontos para uso, facilitando seu aprendizado inicial.</p>
<p class="zfr3Q" dir="ltr">Pronto, seu projeto foi criado!</p>
<p class="zfr3Q" dir="ltr">No canto inferior esquerdo, selecione a pasta "Maps" e selecione "FirstPerson Exemple Map"</p>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</section>
<section id="h.12ff2366666eeb2d_92" class="yaqOZd">
<div class="yaqOZd IFuOkc"> </div>
<div class="mYVXT">
<div class="LS81yb VICjCf">
<div class="hJDwNd-AhqUyc-OiUrBf purZT-AhqUyc-II5mzb pSzOP-AhqUyc-qWD73c JNdkSc">
<div class="JNdkSc-SmKAyb">
<div class="">
<div class="oKdM2c Kzv0Me">
<div id="h.12ff2366666eeb2d_89" class="hJDwNd-AhqUyc-OiUrBf jXK9ad D2fZ2 OjCsFc wHaque">
<div class="jXK9ad-SmKAyb">
<div class="tyJCtd baZpAe">
<div class="t3iYD"><img class="aligncenter wp-image-2950 size-full" src="https://www.ufsm.br/app/uploads/sites/791/2020/09/unreal8.jpg" alt="" width="690" height="393" /></div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</section>
<section id="h.12ff2366666eeb2d_96" class="yaqOZd">
<div class="mYVXT">
<div class="LS81yb VICjCf">
<div class="hJDwNd-AhqUyc-uQSCkd purZT-AhqUyc-II5mzb pSzOP-AhqUyc-qWD73c JNdkSc">
<div class="JNdkSc-SmKAyb">
<div class="">
<div class="oKdM2c Kzv0Me">
<div id="h.12ff2366666eeb2d_93" class="hJDwNd-AhqUyc-uQSCkd jXK9ad D2fZ2 OjCsFc wHaque GNzUNc">
<div class="jXK9ad-SmKAyb">
<div class="tyJCtd mGzaTb baZpAe">
<p class="zfr3Q" dir="ltr">Assim, será carregado para você um mapa de exemplo com configurações iniciais prontas.</p>
<p class="zfr3Q" dir="ltr">Para iniciar você também pode retirar as paredes que o mapa já traz por default, assim, podemos aumentar o mapa! Para excluí-las basta clicar na mesma e pressionar Delete.</p>
<p class="zfr3Q" dir="ltr">Vamos aumentar a escala do mapa (tamanho) com ele selecionado, vide o canto direito da tela e aumente a escala, no exemplo usaremos 200x200, como na imagem a seguir:</p>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</section>
<section id="h.12ff2366666eeb2d_101" class="yaqOZd">
<div class="mYVXT">
<div class="LS81yb VICjCf">
<div class="hJDwNd-AhqUyc-OiUrBf purZT-AhqUyc-II5mzb pSzOP-AhqUyc-qWD73c JNdkSc">
<div class="JNdkSc-SmKAyb">
<div class="">
<div class="oKdM2c Kzv0Me">
<div id="h.12ff2366666eeb2d_97" class="hJDwNd-AhqUyc-OiUrBf jXK9ad D2fZ2 OjCsFc wHaque">
<div class="jXK9ad-SmKAyb">
<div class="tyJCtd baZpAe">
<div class="t3iYD"><img class="aligncenter wp-image-2951 size-full" src="https://www.ufsm.br/app/uploads/sites/791/2020/09/unreal9.jpg" alt="" width="383" height="184" /></div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</section>
<section id="h.12ff2366666eeb2d_132" class="yaqOZd">
<div class="mYVXT">
<div class="LS81yb VICjCf">
<div class="hJDwNd-AhqUyc-uQSCkd purZT-AhqUyc-II5mzb pSzOP-AhqUyc-qWD73c JNdkSc">
<div class="JNdkSc-SmKAyb">
<div class="">
<div class="oKdM2c Kzv0Me">
<div id="h.12ff2366666eeb2d_129" class="hJDwNd-AhqUyc-uQSCkd jXK9ad D2fZ2 OjCsFc wHaque GNzUNc">
<div class="jXK9ad-SmKAyb">
<div class="tyJCtd mGzaTb baZpAe">
<p class="zfr3Q" dir="ltr">Agora, vamos preencher o mundo, isto tornará possível moldar o relevo do mapa cuja escala foi selecionada, no canto superior direito, na aba gerenciar, selecione "Preencher Mundo"</p>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</section>
<section id="h.12ff2366666eeb2d_137" class="yaqOZd">
<div class="mYVXT">
<div class="LS81yb VICjCf">
<div class="hJDwNd-AhqUyc-II5mzb JNdkSc L6cTce-purZT L6cTce-pSzOP">
<div class="JNdkSc-SmKAyb">
<div class=""> </div>
</div>
</div>
<div class="hJDwNd-AhqUyc-II5mzb purZT-AhqUyc-II5mzb pSzOP-AhqUyc-II5mzb JNdkSc">
<div class="JNdkSc-SmKAyb">
<div class="">
<div class="oKdM2c Kzv0Me">
<div id="h.12ff2366666eeb2d_133" class="hJDwNd-AhqUyc-II5mzb pSzOP-AhqUyc-II5mzb jXK9ad D2fZ2 OjCsFc wHaque">
<div class="jXK9ad-SmKAyb">
<div class="tyJCtd baZpAe">
<div class="t3iYD"><img class="aligncenter wp-image-2952 size-full" src="https://www.ufsm.br/app/uploads/sites/791/2020/09/unreal10.jpg" alt="" width="230" height="448" /></div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="hJDwNd-AhqUyc-II5mzb JNdkSc L6cTce-purZT L6cTce-pSzOP">
<div class="JNdkSc-SmKAyb">
<div class=""> </div>
</div>
</div>
</div>
</div>
</section>
<section id="h.12ff2366666eeb2d_116" class="yaqOZd">
<div class="yaqOZd IFuOkc"> </div>
<div class="mYVXT">
<div class="LS81yb VICjCf">
<div class="hJDwNd-AhqUyc-uQSCkd purZT-AhqUyc-II5mzb pSzOP-AhqUyc-qWD73c JNdkSc">
<div class="JNdkSc-SmKAyb">
<div class="">
<div class="oKdM2c Kzv0Me">
<div id="h.12ff2366666eeb2d_113" class="hJDwNd-AhqUyc-uQSCkd jXK9ad D2fZ2 OjCsFc wHaque GNzUNc">
<div class="jXK9ad-SmKAyb">
<div class="tyJCtd mGzaTb baZpAe">
<p class="zfr3Q" dir="ltr">Agora, com a sua área útil pronta podemos esculpir o relevo...</p>
<p class="zfr3Q" dir="ltr">Selecione a ferramenta de Esculpir e esculpa o relevo ao seu gosto, para isso basta posicionar o mouse na região desejada e pressioná-lo, quanto mais pressionar, mais alto o relevo se mostrará.</p>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</section>
<section id="h.12ff2366666eeb2d_112" class="yaqOZd">
<div class="mYVXT">
<div class="LS81yb VICjCf">
<div class="hJDwNd-AhqUyc-II5mzb JNdkSc L6cTce-purZT L6cTce-pSzOP">
<div class="JNdkSc-SmKAyb">
<div class=""> </div>
</div>
</div>
<div class="hJDwNd-AhqUyc-II5mzb purZT-AhqUyc-II5mzb pSzOP-AhqUyc-II5mzb JNdkSc">
<div class="JNdkSc-SmKAyb">
<div class="">
<div class="oKdM2c Kzv0Me">
<div id="h.12ff2366666eeb2d_98" class="hJDwNd-AhqUyc-II5mzb pSzOP-AhqUyc-II5mzb jXK9ad D2fZ2 OjCsFc wHaque">
<div class="jXK9ad-SmKAyb">
<div class="tyJCtd baZpAe">
<div class="t3iYD"><img class="aligncenter wp-image-2953 size-full" src="https://www.ufsm.br/app/uploads/sites/791/2020/09/unreal11.jpg" alt="" width="224" height="224" /></div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="hJDwNd-AhqUyc-II5mzb JNdkSc L6cTce-purZT L6cTce-pSzOP">
<div class="JNdkSc-SmKAyb">
<div class=""> </div>
</div>
</div>
</div>
</div>
</section>
<section id="h.12ff2366666eeb2d_120" class="yaqOZd">
<div class="yaqOZd IFuOkc"> </div>
<div class="mYVXT">
<div class="LS81yb VICjCf">
<div class="hJDwNd-AhqUyc-uQSCkd purZT-AhqUyc-II5mzb pSzOP-AhqUyc-qWD73c JNdkSc">
<div class="JNdkSc-SmKAyb">
<div class="">
<div class="oKdM2c Kzv0Me">
<div id="h.12ff2366666eeb2d_117" class="hJDwNd-AhqUyc-uQSCkd jXK9ad D2fZ2 OjCsFc wHaque GNzUNc">
<div class="jXK9ad-SmKAyb">
<div class="tyJCtd mGzaTb baZpAe">
<p class="zfr3Q" dir="ltr">Brinque com as propriedades do cursor da ferramenta e vá esculpindo...</p>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</section>
<section id="h.12ff2366666eeb2d_106" class="yaqOZd">
<div class="yaqOZd IFuOkc"> </div>
<div class="mYVXT">
<div class="LS81yb VICjCf">
<div class="hJDwNd-AhqUyc-uQSCkd purZT-AhqUyc-II5mzb pSzOP-AhqUyc-qWD73c JNdkSc">
<div class="JNdkSc-SmKAyb">
<div class="">
<div class="oKdM2c Kzv0Me">
<div id="h.12ff2366666eeb2d_99" class="hJDwNd-AhqUyc-uQSCkd jXK9ad D2fZ2 OjCsFc wHaque">
<div class="jXK9ad-SmKAyb">
<div class="tyJCtd baZpAe">
<div class="t3iYD"><img class="aligncenter wp-image-2954 size-full" src="https://www.ufsm.br/app/uploads/sites/791/2020/09/unreal12.jpg" alt="" width="886" height="280" /></div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</section>
<section id="h.12ff2366666eeb2d_124" class="yaqOZd">
<div class="yaqOZd IFuOkc"> </div>
<div class="mYVXT">
<div class="LS81yb VICjCf">
<div class="hJDwNd-AhqUyc-uQSCkd purZT-AhqUyc-II5mzb pSzOP-AhqUyc-qWD73c JNdkSc">
<div class="JNdkSc-SmKAyb">
<div class="">
<div class="oKdM2c Kzv0Me">
<div id="h.12ff2366666eeb2d_121" class="hJDwNd-AhqUyc-uQSCkd jXK9ad D2fZ2 OjCsFc wHaque GNzUNc">
<div class="jXK9ad-SmKAyb">
<div class="tyJCtd mGzaTb baZpAe">
<p class="zfr3Q" dir="ltr">Com seu relevo esculpido, podemos adicionar uma textura a grama e as montanhas. Como estamos com o "Starter Content", já possuímos diversas opções.</p>
<p class="zfr3Q" dir="ltr">Selecione o solo, vamos aplicar um material similar a grama nele!</p>
<p class="zfr3Q" dir="ltr">Com o solo de seu mapa selecionado, no canto inferior direito expanda a pasta Starter "Content", clique na pasta "Materials" e selecione o material desejado, quando já estiver escolhido mantenha o mouse pressionado sobre e arraste para o lado direito, soltando em cima da opção "Materials", como na imagem a seguir:</p>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</section>
<section id="h.12ff2366666eeb2d_128" class="yaqOZd">
<div class="yaqOZd IFuOkc"> </div>
<div class="mYVXT">
<div class="LS81yb VICjCf">
<div class="hJDwNd-AhqUyc-uQSCkd purZT-AhqUyc-II5mzb pSzOP-AhqUyc-qWD73c JNdkSc">
<div class="JNdkSc-SmKAyb">
<div class="">
<div class="oKdM2c Kzv0Me">
<div id="h.12ff2366666eeb2d_125" class="hJDwNd-AhqUyc-uQSCkd jXK9ad D2fZ2 OjCsFc wHaque">
<div class="jXK9ad-SmKAyb">
<div class="tyJCtd baZpAe">
<div class="t3iYD"><img class="aligncenter wp-image-2955 size-full" src="https://www.ufsm.br/app/uploads/sites/791/2020/09/unreal13.jpg" alt="" width="1280" height="296" /></div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</section>
<section id="h.12ff2366666eeb2d_141" class="yaqOZd">
<div class="mYVXT">
<div class="LS81yb VICjCf">
<div class="hJDwNd-AhqUyc-uQSCkd purZT-AhqUyc-II5mzb pSzOP-AhqUyc-qWD73c JNdkSc">
<div class="JNdkSc-SmKAyb">
<div class="">
<div class="oKdM2c Kzv0Me">
<div id="h.12ff2366666eeb2d_138" class="hJDwNd-AhqUyc-uQSCkd jXK9ad D2fZ2 OjCsFc wHaque GNzUNc">
<div class="jXK9ad-SmKAyb">
<div class="tyJCtd mGzaTb baZpAe">
<p class="zfr3Q" dir="ltr">Feito, você tem sua grama. Agora selecione seu relevo, vamos dar alguma cor nele!</p>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</section>
<section id="h.12ff2366666eeb2d_109" class="yaqOZd">
<div class="mYVXT">
<div class="LS81yb VICjCf">
<div class="hJDwNd-AhqUyc-OiUrBf purZT-AhqUyc-II5mzb pSzOP-AhqUyc-qWD73c JNdkSc">
<div class="JNdkSc-SmKAyb">
<div class="">
<div class="oKdM2c Kzv0Me">
<div id="h.12ff2366666eeb2d_100" class="hJDwNd-AhqUyc-OiUrBf jXK9ad D2fZ2 OjCsFc wHaque">
<div class="jXK9ad-SmKAyb">
<div class="tyJCtd baZpAe">
<div class="t3iYD"><img class="aligncenter wp-image-2956 size-full" src="https://www.ufsm.br/app/uploads/sites/791/2020/09/unreal14.jpg" alt="" width="668" height="369" /></div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="hJDwNd-AhqUyc-ibL1re JNdkSc L6cTce-purZT L6cTce-pSzOP">
<div class="JNdkSc-SmKAyb">
<div class=""> </div>
</div>
</div>
</div>
</div>
</section>
<section id="h.12ff2366666eeb2d_145" class="yaqOZd">
<div class="yaqOZd IFuOkc"> </div>
<div class="mYVXT">
<div class="LS81yb VICjCf">
<div class="hJDwNd-AhqUyc-uQSCkd purZT-AhqUyc-II5mzb pSzOP-AhqUyc-qWD73c JNdkSc">
<div class="JNdkSc-SmKAyb">
<div class="">
<div class="oKdM2c Kzv0Me">
<div id="h.12ff2366666eeb2d_142" class="hJDwNd-AhqUyc-uQSCkd jXK9ad D2fZ2 OjCsFc wHaque GNzUNc">
<div class="jXK9ad-SmKAyb">
<div class="tyJCtd mGzaTb baZpAe">
<p class="zfr3Q" dir="ltr">Com o relevo selecionado, repita o processo feito para a grama e adicione o material as montanhas, como na imagem a seguir:</p>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</section>
<section id="h.12ff2366666eeb2d_155" class="yaqOZd">
<div class="yaqOZd IFuOkc"> </div>
<div class="mYVXT">
<div class="LS81yb VICjCf">
<div class="hJDwNd-AhqUyc-uQSCkd purZT-AhqUyc-II5mzb pSzOP-AhqUyc-qWD73c JNdkSc">
<div class="JNdkSc-SmKAyb">
<div class="">
<div class="oKdM2c Kzv0Me">
<div id="h.12ff2366666eeb2d_148" class="hJDwNd-AhqUyc-uQSCkd jXK9ad D2fZ2 OjCsFc wHaque">
<div class="jXK9ad-SmKAyb">
<div class="tyJCtd baZpAe">
<div class="t3iYD"><img class="aligncenter wp-image-2957 size-large" src="https://www.ufsm.br/app/uploads/sites/791/2020/09/unreal15-1024x405.jpg" alt="" width="1024" height="405" /></div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</section>
<section id="h.12ff2366666eeb2d_165" class="yaqOZd">
<div class="yaqOZd IFuOkc"> </div>
<div class="mYVXT">
<div class="LS81yb VICjCf">
<div class="hJDwNd-AhqUyc-uQSCkd purZT-AhqUyc-II5mzb pSzOP-AhqUyc-qWD73c JNdkSc">
<div class="JNdkSc-SmKAyb">
<div class="">
<div class="oKdM2c Kzv0Me">
<div id="h.12ff2366666eeb2d_162" class="hJDwNd-AhqUyc-uQSCkd jXK9ad D2fZ2 OjCsFc wHaque GNzUNc">
<div class="jXK9ad-SmKAyb">
<div class="tyJCtd mGzaTb baZpAe">
<p class="zfr3Q" dir="ltr">Pelo fato de termos redimensionado nosso mapa e adicionado relevos e não ter alterado as configurações de luz, alguns erros podem ocorrer, mesmo que não ocorram, pode ficar visivelmente feio, neste caso, basta desativar a opção "Projetar sombra do lado esquerdo da tela", como na figura a seguir:</p>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</section>
<section id="h.12ff2366666eeb2d_150" class="yaqOZd">
<div class="mYVXT">
<div class="LS81yb VICjCf">
<div class="hJDwNd-AhqUyc-II5mzb JNdkSc L6cTce-purZT L6cTce-pSzOP">
<div class="JNdkSc-SmKAyb">
<div class=""> </div>
</div>
</div>
<div class="hJDwNd-AhqUyc-II5mzb purZT-AhqUyc-II5mzb pSzOP-AhqUyc-II5mzb JNdkSc">
<div class="JNdkSc-SmKAyb">
<div class="">
<div class="oKdM2c Kzv0Me">
<div id="h.12ff2366666eeb2d_147" class="hJDwNd-AhqUyc-II5mzb pSzOP-AhqUyc-II5mzb jXK9ad D2fZ2 OjCsFc wHaque">
<div class="jXK9ad-SmKAyb">
<div class="tyJCtd baZpAe">
<div class="t3iYD"><img class="aligncenter wp-image-2958 size-full" src="https://www.ufsm.br/app/uploads/sites/791/2020/09/unreal16.jpg" alt="" width="312" height="312" /></div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="hJDwNd-AhqUyc-II5mzb JNdkSc L6cTce-purZT L6cTce-pSzOP">
<div class="JNdkSc-SmKAyb">
<div class=""> </div>
</div>
</div>
</div>
</div>
</section>
<section id="h.12ff2366666eeb2d_169" class="yaqOZd">
<div class="yaqOZd IFuOkc"><span style="font-size: inherit">Sem mais delongas, podemos compilar e rodar nosso jogo.</span></div>
<div class="mYVXT">
<div class="LS81yb VICjCf">
<div class="hJDwNd-AhqUyc-uQSCkd purZT-AhqUyc-II5mzb pSzOP-AhqUyc-qWD73c JNdkSc">
<div class="JNdkSc-SmKAyb">
<div class="">
<div class="oKdM2c Kzv0Me">
<div id="h.12ff2366666eeb2d_166" class="hJDwNd-AhqUyc-uQSCkd jXK9ad D2fZ2 OjCsFc wHaque GNzUNc">
<div class="jXK9ad-SmKAyb">
<div class="tyJCtd mGzaTb baZpAe">
<p class="zfr3Q" dir="ltr">Para isto, clique em "Compilar" e depois em "Reproduzir", no canto superior da interface, o processo demora mais ou menos dependendo do seu computador.</p>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</section>
<section id="h.12ff2366666eeb2d_161" class="yaqOZd">
<div class="mYVXT">
<div class="LS81yb VICjCf">
<div class="hJDwNd-AhqUyc-II5mzb purZT-AhqUyc-II5mzb pSzOP-AhqUyc-II5mzb JNdkSc">
<div class="JNdkSc-SmKAyb">
<div class="">
<div class="oKdM2c Kzv0Me">
<div id="h.12ff2366666eeb2d_146" class="hJDwNd-AhqUyc-II5mzb pSzOP-AhqUyc-II5mzb jXK9ad D2fZ2 OjCsFc wHaque">
<div class="jXK9ad-SmKAyb">
<div class="tyJCtd baZpAe">
<div class="t3iYD"><img class="aligncenter wp-image-2959 size-full" src="https://www.ufsm.br/app/uploads/sites/791/2020/09/unreal17.jpg" alt="" width="238" height="238" /></div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="hJDwNd-AhqUyc-II5mzb JNdkSc L6cTce-purZT L6cTce-pSzOP">
<div class="JNdkSc-SmKAyb">
<div class=""> </div>
</div>
</div>
</div>
</div>
</section>
<section id="h.12ff2366666eeb2d_173" class="yaqOZd">
<div class="yaqOZd IFuOkc"><span style="font-size: inherit">E pronto temos algo jogável no estilo FPS, pode-se testar atirando os projeteis nas caixas, andando pelo mapa e etc.</span></div>
</section>
<section id="h.12ff2366666eeb2d_158" class="yaqOZd">
<div class="mYVXT">
<div class="LS81yb VICjCf">
<div class="hJDwNd-AhqUyc-ibL1re JNdkSc L6cTce-purZT L6cTce-pSzOP">
<div class="JNdkSc-SmKAyb">
<div class=""> </div>
</div>
</div>
<div class="hJDwNd-AhqUyc-OiUrBf purZT-AhqUyc-II5mzb pSzOP-AhqUyc-qWD73c JNdkSc">
<div class="JNdkSc-SmKAyb">
<div class="">
<div class="oKdM2c Kzv0Me">
<div id="h.12ff2366666eeb2d_149" class="hJDwNd-AhqUyc-OiUrBf jXK9ad D2fZ2 OjCsFc wHaque">
<div class="jXK9ad-SmKAyb">
<div class="tyJCtd baZpAe">
<div class="t3iYD"><img class="aligncenter wp-image-2960 size-full" src="https://www.ufsm.br/app/uploads/sites/791/2020/09/unreal18.jpg" alt="" width="703" height="271" /></div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="hJDwNd-AhqUyc-ibL1re JNdkSc L6cTce-purZT L6cTce-pSzOP">
<div class="JNdkSc-SmKAyb">
<div class=""> </div>
</div>
</div>
</div>
</div>
</section>
<section id="h.12ff2366666eeb2d_177" class="yaqOZd">
<div class="yaqOZd IFuOkc"><span style="font-size: inherit">Como você deve imaginar, a Unreal Engine não serve apenas para jogos simples como o demonstrado no tutorial, os jogos citados lá no começo da redação são um bom exemplo, incluindo mundo aberto, gráficos sensacionais e etc.</span></div>
<div class="mYVXT">
<div class="LS81yb VICjCf">
<div class="hJDwNd-AhqUyc-uQSCkd purZT-AhqUyc-II5mzb pSzOP-AhqUyc-qWD73c JNdkSc">
<div class="JNdkSc-SmKAyb">
<div class="">
<div class="oKdM2c Kzv0Me">
<div id="h.12ff2366666eeb2d_174" class="hJDwNd-AhqUyc-uQSCkd jXK9ad D2fZ2 OjCsFc wHaque GNzUNc">
<div class="jXK9ad-SmKAyb">
<div class="tyJCtd mGzaTb baZpAe">
<p class="zfr3Q" dir="ltr">Para ter uma ideia do poder dela, pode dar uma olhada no vídeo a seguir, ele mostra cenas com gráficos incríveis, para uma melhor experiência assista o vídeo em tela cheia e configure o Youtube para reproduzir com a resolução máxima suportada por seu monitor.</p>
<p dir="ltr"> </p>
<p class="zfr3Q" dir="ltr"><strong>ENJOY</strong> :)</p>
<p class="zfr3Q" dir="ltr">https://www.youtube.com/watch?v=zKu1Y-LlfNQ</p>
<p class="zfr3Q" dir="ltr">Se quiser aprender mais você pode seguir para o youtube, lá tem muitos tutoriais e etc:</p>
<p class="zfr3Q" dir="ltr"><a class="XqQF9c" href="https://www.youtube.com/channel/UCjrxauc9gCHfewTG3xACxKA" target="_blank" rel="noopener noreferrer">https://www.youtube.com/channel/UCjrxauc9gCHfewTG3xACxKA</a></p>
<p class="zfr3Q" dir="ltr"><a class="XqQF9c" href="https://www.youtube.com/user/FuriaplayAction" target="_blank" rel="noopener noreferrer">https://www.youtube.com/user/FuriaplayAction</a></p>
<p class="zfr3Q" dir="ltr">porém se quiser algo mais formal, com certificado e etc, pode ir para a Udemy, lá tem 601 opções de cursos relacionados à Unreal Engine.</p>
<p class="zfr3Q" dir="ltr"><a class="XqQF9c" href="https://www.google.com/url?q=https%3A%2F%2Fwww.udemy.com%2Fcourses%2Fsearch%2F%3Fsrc%3Dukw%26q%3Dunreal%2520engine&amp;sa=D&amp;sntz=1&amp;usg=AFQjCNHUdScYHL_s53zybJC1IKOycikxGQ" target="_blank" rel="noopener noreferrer">https://www.udemy.com/courses/search/?src=ukw&amp;q=unreal%20engine</a></p>
<p class="zfr3Q" dir="ltr">OU</p>
<p class="zfr3Q" dir="ltr">Ainda melhor, aprender diretamente com a empresa que criou a Engine!</p>
<p class="zfr3Q" dir="ltr"><a class="XqQF9c" href="https://www.google.com/url?q=https%3A%2F%2Fwww.unrealengine.com%2Fen-US%2Fonlinelearning&amp;sa=D&amp;sntz=1&amp;usg=AFQjCNHuAntQte1MRSfNylCZT6f_Yc-M5A" target="_blank" rel="noopener noreferrer">https://www.unrealengine.com/en-US/onlinelearning</a></p>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</section>
<!-- /wp:tadv/classic-paragraph -->]]></content:encoded>
													</item>
						<item>
				<title>FLUTTER: O futuro de aplicações desktop, mobile e web?</title>
				<link>https://www.ufsm.br/pet/sistemas-de-informacao/2018/09/18/flutter-o-futuro-de-aplicacoes-desktop-mobile-e-web</link>
				<pubDate>Tue, 18 Sep 2018 17:18:00 +0000</pubDate>
						<category><![CDATA[Destaques]]></category>
		<category><![CDATA[Redações]]></category>
		<category><![CDATA[Frameworks]]></category>
		<category><![CDATA[Mobile]]></category>

				<guid isPermaLink="false">https://www.ufsm.br/pet/sistemas-de-informacao/?p=2669</guid>
						<description><![CDATA[Olá pessoal, o PET-Redação de hoje vai abordar sobre uma tecnologia promissora da Google, o Flutter. É um SDK open-source com o objetivo de construir aplicações mobile, web e desktop a partir de um único código(multiplataforma). Dessa forma, permite um rápido desenvolvimento aliado a uma expressiva e flexível UI. Além disso, o desempenho é nativo [&hellip;]]]></description>
							<content:encoded><![CDATA[  <!-- wp:tadv/classic-paragraph -->
<section id="h.3dc1e70853ba83db_12" class="yaqOZd">
<div class="mYVXT">
<div class="LS81yb VICjCf">
<div class="hJDwNd-AhqUyc-uQSCkd purZT-AhqUyc-II5mzb pSzOP-AhqUyc-qWD73c JNdkSc">
<div class="JNdkSc-SmKAyb">
<div class="">
<div class="oKdM2c Kzv0Me">
<div id="h.3dc1e70853ba83db_9" class="hJDwNd-AhqUyc-uQSCkd jXK9ad D2fZ2 OjCsFc wHaque GNzUNc">
<div class="jXK9ad-SmKAyb">
<div class="tyJCtd mGzaTb baZpAe">
<p class="zfr3Q" dir="ltr">Olá pessoal, o PET-Redação de hoje vai abordar sobre uma tecnologia promissora da Google, o Flutter. É um SDK open-source com o objetivo de construir aplicações mobile, web e desktop a partir de um único código(multiplataforma). Dessa forma, permite um rápido desenvolvimento aliado a uma expressiva e flexível UI. Além disso, o desempenho é nativo tanto para Android quanto para iOS, o que permite que apps fluam mais rápido trazendo ótimos benefícios a aplicação. É programado em Dart, uma linguaguem da Google, parecida com Java, e compilada em código de máquina. Tudo no Flutter são widgets e esses widgets formam uma árvore com hierarquia pai e filho, dessa forma se torna mais fácil de fazer as criações pois há muitas opções de widgets disponíveis, ao contrário do React Native, tecnologia do Facebook que utiliza JavaScript onde widgets são chamados de componentes onde estes não apresentam tanta complexidade, sendo necessário a criação dos mesmos. Além disso, o Flutter apresenta melhor desempenho em comparação com o React Native já que na tecnologia do Facebook é feito uma ponte entre o código nativo e o Javascript. Uma curiosidade muito interessante é de que a Google está desenvolvendo um novo sistema operacional, chamado de Fuchsia, para substituir o grandioso Android utilizando Flutter, já que a performance será muito melhor que o atual SO da empresa. Grandes organizações estão adotanto a nova tecnologia da Google diante das vantagens de a utilizá-la. Um grande exemplo é a Nubank, fintech brasileira que está mudando o cenário de bancos no país, estar alterando suas aplicações para o Flutter. Diante disso, não surgem dúvidas de que o Flutter tem muito a evoluir e crescer no mercado. Que tal instala-lo e dar os primeiros passos</p>
<p class="zfr3Q" dir="ltr">Primeiro <span class=" aw5Odc"><a class="XqQF9c" href="https://flutter.dev/docs/get-started/install" target="_blank" rel="noopener noreferrer">clique aqui</a></span> e instale o Flutter e o Android Studio conforme os passos.</p>
<p class="zfr3Q" dir="ltr">Após a instalação abra o terminal e digite: <em>flutter doctor</em> e aparecerá a seguinte tela, significando que o Flutter está instalado e o Android Studio também.</p>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</section>
<section id="h.3dc1e70853ba83db_16" class="yaqOZd">
<div class="yaqOZd IFuOkc"> </div>
<div class="mYVXT">
<div class="LS81yb VICjCf">
<div class="hJDwNd-AhqUyc-c5RTEf JNdkSc L6cTce-purZT L6cTce-pSzOP">
<div class="JNdkSc-SmKAyb">
<div class="" style="text-align: center"> </div>
</div>
</div>
<div class="hJDwNd-AhqUyc-qWD73c purZT-AhqUyc-II5mzb pSzOP-AhqUyc-qWD73c JNdkSc">
<div class="JNdkSc-SmKAyb">
<div class="">
<div class="oKdM2c Kzv0Me">
<div id="h.3dc1e70853ba83db_13" class="hJDwNd-AhqUyc-qWD73c jXK9ad D2fZ2 OjCsFc wHaque">
<div class="jXK9ad-SmKAyb">
<div class="tyJCtd baZpAe">
<div class="t3iYD"><img class="aligncenter wp-image-3013 size-full" src="https://www.ufsm.br/app/uploads/sites/791/2020/09/flutter1.png" alt="" width="735" height="315" /></div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="hJDwNd-AhqUyc-c5RTEf JNdkSc L6cTce-purZT L6cTce-pSzOP">
<div class="JNdkSc-SmKAyb">
<div class=""> </div>
</div>
</div>
</div>
</div>
</section>
<section id="h.3dc1e70853ba83db_20" class="yaqOZd">
<div class="yaqOZd IFuOkc"> </div>
<div class="mYVXT">
<div class="LS81yb VICjCf">
<div class="hJDwNd-AhqUyc-uQSCkd purZT-AhqUyc-II5mzb pSzOP-AhqUyc-qWD73c JNdkSc">
<div class="JNdkSc-SmKAyb">
<div class="">
<div class="oKdM2c Kzv0Me">
<div id="h.3dc1e70853ba83db_17" class="hJDwNd-AhqUyc-uQSCkd jXK9ad D2fZ2 OjCsFc wHaque GNzUNc">
<div class="jXK9ad-SmKAyb">
<div class="tyJCtd mGzaTb baZpAe">
<p class="zfr3Q" dir="ltr">Agora abra o Android Studio e vamos configura-lo clicando em Configure e em Plugins</p>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</section>
<section id="h.3dc1e70853ba83db_24" class="yaqOZd">
<div class="yaqOZd IFuOkc"> </div>
<div class="mYVXT">
<div class="LS81yb VICjCf">
<div class="hJDwNd-AhqUyc-c5RTEf JNdkSc L6cTce-purZT L6cTce-pSzOP">
<div class="JNdkSc-SmKAyb">
<div class=""> </div>
</div>
</div>
<div class="hJDwNd-AhqUyc-qWD73c purZT-AhqUyc-II5mzb pSzOP-AhqUyc-qWD73c JNdkSc">
<div class="JNdkSc-SmKAyb">
<div class="">
<div class="oKdM2c Kzv0Me">
<div id="h.3dc1e70853ba83db_21" class="hJDwNd-AhqUyc-qWD73c jXK9ad D2fZ2 OjCsFc wHaque">
<div class="jXK9ad-SmKAyb">
<div class="tyJCtd baZpAe">
<div class="t3iYD"><img class="aligncenter wp-image-3014 size-full" src="https://www.ufsm.br/app/uploads/sites/791/2020/09/flutter2.png" alt="" width="777" height="478" /></div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="hJDwNd-AhqUyc-c5RTEf JNdkSc L6cTce-purZT L6cTce-pSzOP">
<div class="JNdkSc-SmKAyb">
<div class=""> </div>
</div>
</div>
</div>
</div>
</section>
<section id="h.3dc1e70853ba83db_28" class="yaqOZd">
<div class="yaqOZd IFuOkc"> </div>
<div class="mYVXT">
<div class="LS81yb VICjCf">
<div class="hJDwNd-AhqUyc-uQSCkd purZT-AhqUyc-II5mzb pSzOP-AhqUyc-qWD73c JNdkSc">
<div class="JNdkSc-SmKAyb">
<div class="">
<div class="oKdM2c Kzv0Me">
<div id="h.3dc1e70853ba83db_25" class="hJDwNd-AhqUyc-uQSCkd jXK9ad D2fZ2 OjCsFc wHaque GNzUNc">
<div class="jXK9ad-SmKAyb">
<div class="tyJCtd mGzaTb baZpAe">
<p class="zfr3Q" dir="ltr">Após isso, procure pelos plugins do Dart e do Flutter o os instale.</p>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</section>
<section id="h.3dc1e70853ba83db_32" class="yaqOZd">
<div class="yaqOZd IFuOkc"> </div>
<div class="mYVXT">
<div class="LS81yb VICjCf">
<div class="hJDwNd-AhqUyc-c5RTEf JNdkSc L6cTce-purZT L6cTce-pSzOP">
<div class="JNdkSc-SmKAyb">
<div class=""> </div>
</div>
</div>
<div class="hJDwNd-AhqUyc-qWD73c purZT-AhqUyc-II5mzb pSzOP-AhqUyc-qWD73c JNdkSc">
<div class="JNdkSc-SmKAyb">
<div class="">
<div class="oKdM2c Kzv0Me">
<div id="h.3dc1e70853ba83db_29" class="hJDwNd-AhqUyc-qWD73c jXK9ad D2fZ2 OjCsFc wHaque">
<div class="jXK9ad-SmKAyb">
<div class="tyJCtd baZpAe">
<div class="t3iYD"><img class="aligncenter wp-image-3015 size-full" src="https://www.ufsm.br/app/uploads/sites/791/2020/09/flutter3.png" alt="" width="797" height="252" /></div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="hJDwNd-AhqUyc-c5RTEf JNdkSc L6cTce-purZT L6cTce-pSzOP">
<div class="JNdkSc-SmKAyb">
<div class=""> </div>
</div>
</div>
</div>
</div>
</section>
<section id="h.3dc1e70853ba83db_36" class="yaqOZd">
<div class="yaqOZd IFuOkc"> </div>
<div class="mYVXT">
<div class="LS81yb VICjCf">
<div class="hJDwNd-AhqUyc-uQSCkd purZT-AhqUyc-II5mzb pSzOP-AhqUyc-qWD73c JNdkSc">
<div class="JNdkSc-SmKAyb">
<div class="">
<div class="oKdM2c Kzv0Me">
<div id="h.3dc1e70853ba83db_33" class="hJDwNd-AhqUyc-uQSCkd jXK9ad D2fZ2 OjCsFc wHaque GNzUNc">
<div class="jXK9ad-SmKAyb">
<div class="tyJCtd mGzaTb baZpAe">
<p class="zfr3Q" dir="ltr">Vamos criar um projeto, para isso clique em Start a new Flutter project e em Flutter Application, escolha um nome para o projeto e selecione o PATH do Flutter, bem como a localização desejada do projeto:</p>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</section>
<section id="h.3dc1e70853ba83db_40" class="yaqOZd">
<div class="yaqOZd IFuOkc"> </div>
<div class="mYVXT">
<div class="LS81yb VICjCf">
<div class="hJDwNd-AhqUyc-c5RTEf JNdkSc L6cTce-purZT L6cTce-pSzOP">
<div class="JNdkSc-SmKAyb">
<div class=""> </div>
</div>
</div>
<div class="hJDwNd-AhqUyc-qWD73c purZT-AhqUyc-II5mzb pSzOP-AhqUyc-qWD73c JNdkSc">
<div class="JNdkSc-SmKAyb">
<div class="">
<div class="oKdM2c Kzv0Me">
<div id="h.3dc1e70853ba83db_37" class="hJDwNd-AhqUyc-qWD73c jXK9ad D2fZ2 OjCsFc wHaque">
<div class="jXK9ad-SmKAyb">
<div class="tyJCtd baZpAe">
<div class="t3iYD"><img class="aligncenter wp-image-3016 size-full" src="https://www.ufsm.br/app/uploads/sites/791/2020/09/flutter4.png" alt="" width="800" height="555" /></div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="hJDwNd-AhqUyc-c5RTEf JNdkSc L6cTce-purZT L6cTce-pSzOP">
<div class="JNdkSc-SmKAyb">
<div class=""> </div>
</div>
</div>
</div>
</div>
</section>
<section id="h.3dc1e70853ba83db_44" class="yaqOZd">
<div class="yaqOZd IFuOkc"> </div>
<div class="mYVXT">
<div class="LS81yb VICjCf">
<div class="hJDwNd-AhqUyc-uQSCkd purZT-AhqUyc-II5mzb pSzOP-AhqUyc-qWD73c JNdkSc">
<div class="JNdkSc-SmKAyb">
<div class="">
<div class="oKdM2c Kzv0Me">
<div id="h.3dc1e70853ba83db_41" class="hJDwNd-AhqUyc-uQSCkd jXK9ad D2fZ2 OjCsFc wHaque GNzUNc">
<div class="jXK9ad-SmKAyb">
<div class="tyJCtd mGzaTb baZpAe">
<p class="zfr3Q" dir="ltr">Após isso aparecerá uma tela com configurações de nome de domínio, deixe assim ou coloque qualquer nome e então clique em Next.</p>
<p class="zfr3Q" dir="ltr">O projeto será criado e aparecerá a seguinte tela:</p>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</section>
<section id="h.3dc1e70853ba83db_48" class="yaqOZd">
<div class="yaqOZd IFuOkc"> </div>
<div class="mYVXT">
<div class="LS81yb VICjCf">
<div class="hJDwNd-AhqUyc-R6PoUb JNdkSc L6cTce-purZT L6cTce-pSzOP">
<div class="JNdkSc-SmKAyb">
<div class=""> </div>
</div>
</div>
<div class="hJDwNd-AhqUyc-EehZO purZT-AhqUyc-II5mzb pSzOP-AhqUyc-qWD73c JNdkSc">
<div class="JNdkSc-SmKAyb">
<div class="">
<div class="oKdM2c Kzv0Me">
<div id="h.3dc1e70853ba83db_45" class="hJDwNd-AhqUyc-EehZO jXK9ad D2fZ2 OjCsFc wHaque">
<div class="jXK9ad-SmKAyb">
<div class="tyJCtd baZpAe">
<div class="t3iYD"><img class="aligncenter wp-image-3017 size-full" src="https://www.ufsm.br/app/uploads/sites/791/2020/09/flutter5-e1601502279749.jpg" alt="" width="761" height="394" /></div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="hJDwNd-AhqUyc-R6PoUb JNdkSc L6cTce-purZT L6cTce-pSzOP">
<div class="JNdkSc-SmKAyb">
<div class=""> </div>
</div>
</div>
</div>
</div>
</section>
<section id="h.3dc1e70853ba83db_52" class="yaqOZd">
<div class="yaqOZd IFuOkc"> </div>
<div class="mYVXT">
<div class="LS81yb VICjCf">
<div class="hJDwNd-AhqUyc-uQSCkd purZT-AhqUyc-II5mzb pSzOP-AhqUyc-qWD73c JNdkSc">
<div class="JNdkSc-SmKAyb">
<div class="">
<div class="oKdM2c Kzv0Me">
<div id="h.3dc1e70853ba83db_49" class="hJDwNd-AhqUyc-uQSCkd jXK9ad D2fZ2 OjCsFc wHaque GNzUNc">
<div class="jXK9ad-SmKAyb">
<div class="tyJCtd mGzaTb baZpAe">
<p class="zfr3Q" dir="ltr">Clique na imagem do smartphone e selecione um emulador(caso não tenha um , crie um), após isso clique no botão play para executar a aplicação exemplo.</p>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</section>
<section id="h.3dc1e70853ba83db_56" class="yaqOZd">
<div class="yaqOZd IFuOkc"> </div>
<div class="mYVXT">
<div class="LS81yb VICjCf">
<div class="hJDwNd-AhqUyc-II5mzb JNdkSc L6cTce-purZT L6cTce-pSzOP">
<div class="JNdkSc-SmKAyb">
<div class=""> </div>
</div>
</div>
<div class="hJDwNd-AhqUyc-II5mzb purZT-AhqUyc-II5mzb pSzOP-AhqUyc-II5mzb JNdkSc">
<div class="JNdkSc-SmKAyb">
<div class="">
<div class="oKdM2c Kzv0Me">
<div id="h.3dc1e70853ba83db_53" class="hJDwNd-AhqUyc-II5mzb pSzOP-AhqUyc-II5mzb jXK9ad D2fZ2 OjCsFc wHaque">
<div class="jXK9ad-SmKAyb">
<div class="tyJCtd baZpAe">
<div class="t3iYD"><img class="aligncenter wp-image-3018 size-full" src="https://www.ufsm.br/app/uploads/sites/791/2020/09/flutter6.png" alt="" width="383" height="691" /></div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="hJDwNd-AhqUyc-II5mzb JNdkSc L6cTce-purZT L6cTce-pSzOP">
<div class="JNdkSc-SmKAyb">
<div class=""> </div>
</div>
</div>
</div>
</div>
</section>
<section id="h.3dc1e70853ba83db_60" class="yaqOZd">
<div class="yaqOZd IFuOkc"> </div>
<div class="mYVXT">
<div class="LS81yb VICjCf">
<div class="hJDwNd-AhqUyc-uQSCkd purZT-AhqUyc-II5mzb pSzOP-AhqUyc-qWD73c JNdkSc">
<div class="JNdkSc-SmKAyb">
<div class="">
<div class="oKdM2c Kzv0Me">
<div id="h.3dc1e70853ba83db_57" class="hJDwNd-AhqUyc-uQSCkd jXK9ad D2fZ2 OjCsFc wHaque GNzUNc">
<div class="jXK9ad-SmKAyb">
<div class="tyJCtd mGzaTb baZpAe">
<p class="zfr3Q" dir="ltr">A aplicação exemplo vai ser emulada e podemos ver que o modelo possui um botão + que realizará incremento de quantas vezes o usuário clicou nesse botão. Espero que tenha gostado e boas criações!</p>
<p dir="ltr"> </p>
<p class="zfr3Q" dir="ltr">Referências:</p>
<p class="zfr3Q" dir="ltr"><span class=" aw5Odc"><a class="XqQF9c" href="https://flutter.dev/" target="_blank" rel="noopener noreferrer">https://flutter.dev/</a></span></p>
<p class="zfr3Q" dir="ltr"><span class=" aw5Odc"><a class="XqQF9c" href="https://www.google.com/url?q=https%3A%2F%2Fwww.zup.com.br%2Fblog%2Fflutter&amp;sa=D&amp;sntz=1&amp;usg=AFQjCNFBewM2Rm5QiqiWfqj06gyGLWOiiw" target="_blank" rel="noopener noreferrer">https://www.zup.com.br/blog/flutter</a></span></p>
<p class="zfr3Q" dir="ltr"><span class=" aw5Odc"><a class="XqQF9c" href="https://www.google.com/url?q=https%3A%2F%2Ftableless.com.br%2Fflutter-porque-investir-nessa-tecnologia%2F&amp;sa=D&amp;sntz=1&amp;usg=AFQjCNGR0TvhIYSgipst-3JwLLoTuR24NQ" target="_blank" rel="noopener noreferrer">https://tableless.com.br/flutter-porque-investir-nessa-tecnologia/</a></span></p>
<p class="zfr3Q" dir="ltr"><span class=" aw5Odc"><a class="XqQF9c" href="https://www.google.com/url?q=https%3A%2F%2Fwww.pipelinelab.com.br%2Fflutter-nubank-vai-migrar-ou-esta-migrando-para-o-flutter%2F&amp;sa=D&amp;sntz=1&amp;usg=AFQjCNEJoKtM_vtoMcIt11zrkbCHlOuGsg" target="_blank" rel="noopener noreferrer">https://www.pipelinelab.com.br/flutter-nubank-vai-migrar-ou-esta-migrando-para-o-flutter/</a></span></p>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</section>
<!-- /wp:tadv/classic-paragraph -->]]></content:encoded>
													</item>
						<item>
				<title>Automatização e testes com Selenium</title>
				<link>https://www.ufsm.br/pet/sistemas-de-informacao/2018/09/15/automatizacao-e-testes-com-selenium</link>
				<pubDate>Sat, 15 Sep 2018 17:04:00 +0000</pubDate>
						<category><![CDATA[Destaques]]></category>
		<category><![CDATA[Redações]]></category>
		<category><![CDATA[Automação e Testes]]></category>
		<category><![CDATA[Frameworks]]></category>

				<guid isPermaLink="false">https://www.ufsm.br/pet/sistemas-de-informacao/?p=2666</guid>
						<description><![CDATA[O desenvolvimento de aplicações web tornou-se extremamente popular nos últimos anos. Garantir o bom funcionamento desses sistemas considerando a grande variedade de browsers existentes, entretanto, pode causar uma grande dor de cabeça  (olá, Internet Explorer!). Diversas ferramentas foram criadas para auxiliar nessa tortuosa função e, entre elas, está o Selenium.         Com o Selenium é possível automatizar diferentes tipos de testes necessários [&hellip;]]]></description>
							<content:encoded><![CDATA[  <!-- wp:tadv/classic-paragraph -->
<p class="c22 c59"><span class="c4">O desenvolvimento de aplicações </span><span class="c4 c7">web</span><span class="c4"> tornou-se extremamente popular nos últimos anos. Garantir o bom funcionamento desses sistemas considerando a grande variedade de </span><span class="c4 c7">browsers </span><span class="c4">existentes</span><span class="c4">, entretanto, pode causar uma grande dor de cabeça </span><span class="c4 c7"> </span><span class="c4">(olá, Internet Explorer!). Diversas ferramentas foram criadas para auxiliar nessa tortuosa função e, entre elas, está o </span><span class="c4 c15">Selenium</span><span class="c4">.</span></p>
<p class="c22"><span class="c4">        Com o Selenium é possível automatizar diferentes tipos de testes necessários para a manutenção do ciclo de vida de um </span><span class="c4 c7">software</span><span class="c4">, tais como </span><span class="c9 c4"><a class="c28" href="https://www.google.com/url?q=http://softwaretestingfundamentals.com/acceptance-testing/&amp;sa=D&amp;ust=1588915410941000">testes de aceitação</a></span><span class="c4"> e </span><span class="c9 c4"><a class="c28" href="https://www.google.com/url?q=http://softwaretestingfundamentals.com/functional-testing/&amp;sa=D&amp;ust=1588915410941000">testes funcionais</a></span><span class="c4"> (ainda nesta redação, veremos como utilizá-lo em conjunto com </span><span class="c9 c4"><a class="c28" href="https://www.google.com/url?q=http://softwaretestingfundamentals.com/unit-testing/&amp;sa=D&amp;ust=1588915410942000">testes unitários</a></span><span class="c4">). Além disso, a ferramenta permite a automatização de praticamente qualquer tarefas repetitiva que precisamos realizar na </span><span class="c4 c7">web </span><span class="c4">(exemplos por conta de sua imaginação)</span><span class="c4 c7">.</span></p>
<p class="c45"><img class="aligncenter" title="" src="https://lh4.googleusercontent.com/0WmYAlm4ivOw8Ogw2NN0J-a8wPu-HrQd-J--nNhXTs4_OC2e5WRP4x-CVWZ1Hw_ZZCzUB3iCnOIUN1I8pO0uZzty4ebmL5LIhQsGFjtBPGYMA9DbYG2rc2v3OWuXtOfpZy5HKQ6W" alt="" /></p>
<p class="c45"><span class="c60 c4 c34 c7">Selenium automates browsers. That's it! </span><span class="c0 c7 c57">—</span><span class="c4 c34 c7 c60"> </span><span class="c33 c60 c4 c34 c73"><a class="c28" href="https://www.google.com/url?q=http://www.seleniumhq.org/&amp;sa=D&amp;ust=1588915410943000">SeleniumHQ</a></span></p>
<p class="c22"><span class="c4">        Podemos utilizar o Selenium através de sua </span><span class="c4 c9"><a class="c28" href="https://www.google.com/url?q=https://www.seleniumhq.org/selenium-ide/&amp;sa=D&amp;ust=1588915410943000">IDE</a></span><span class="c4"> ou por uma </span><span class="c4 c7">client</span><span class="c4"> API. De forma geral, os comandos definidos são enviados para o Selenium </span><span class="c4 c7">WebDriver</span><span class="c4"> que, os repassa para o </span><span class="c4 c7">browser</span><span class="c4"> desejado e, se necessário, </span><span class="c4">retorna</span><span class="c18 c4"> os resultados. Aqui, iremos utilizá-lo através da API em Python. Vamos lá!</span></p>
<p class="c27 c23"> </p>
<p class="c27"><strong><span class="c4 c15">Preparando o ambiente -- </span><span class="c51 c31 c4 c7 c15">setup:</span></strong></p>
<ul class="c42 lst-kix_zigpc7m641wn-0 start">
<li class="c22 c29"><span class="c4">Antes de continuar certifique-se de ter instalado em seu computador o Python 3, </span><span class="c4 c7">pip </span><span class="c4">e o </span><span class="c4 c7">virtualenv</span><span class="c4"> </span><span class="c47 c34">(</span><span class="c4 c47 c34">$ </span><span class="c4 c34 c30">pip install virtualenv</span><span class="c34 c30 c69">)</span><span class="c47 c34">. </span><span class="c4">Os passos abaixos são específicos para Linux (usuários Windows podem consultar a documentação </span><span class="c9 c4"><a class="c28" href="https://www.google.com/url?q=https://selenium-python.readthedocs.io/installation.html&amp;sa=D&amp;ust=1588915410946000">aqui</a></span><span class="c4">).</span></li>
</ul>
<p class="c27"><strong><span class="c18 c4">1. Inicialmente, crie e ative um ambiente virtual:</span></strong></p>
<p class="c61 c62"><code><span class="c17 c4 c55">$ virtualenv -p python3 myenv</span></code></p>
<p class="c61"><code><span class="c17 c4 c55">$ cd myenv</span></code></p>
<p class="c61"><code><span class="c17 c4 c55">$ source bin/activate</span></code></p>
<p class="c61"><strong><span class="c4">2. Instale o Selenium com o </span><span class="c4 c7">pip</span><span class="c18 c4">:</span></strong></p>
<p class="c27"><code><span class="c4 c34 c30">$ </span><span class="c17 c4 c55">pip install selenium</span></code></p>
<p class="c27"><strong><span class="c4">3. Baixe o</span><span class="c4 c7"> driver</span><span class="c4"> do</span><span class="c4 c7"> browser </span><span class="c4">em que você deseja executar os testes. Nesse exemplo iremos utilizar o Firefox, outros</span><span class="c4 c7"> drivers</span><span class="c4"> são listados na tabela abaixo.</span></strong></p>

<table class="c19">
<tbody>
<tr class="c63">
<td class="c65" colspan="1" rowspan="1">
<p class="c27"><span class="c4 c43 c15">Chrome</span></p>
</td>
<td class="c66" colspan="1" rowspan="1">
<p class="c27"><span class="c24 c4"><a class="c28" href="https://www.google.com/url?q=https://sites.google.com/a/chromium.org/chromedriver/downloads&amp;sa=D&amp;ust=1588915410950000">https://sites.google.com/a/chromium.org/chromedriver/downloads</a></span></p>
</td>
</tr>
<tr class="c64">
<td class="c65" colspan="1" rowspan="1">
<p class="c27"><span class="c4 c43 c15">Edge</span></p>
</td>
<td class="c66" colspan="1" rowspan="1">
<p class="c27"><span class="c24 c4"><a class="c28" href="https://www.google.com/url?q=https://developer.microsoft.com/en-us/microsoft-edge/tools/webdriver/&amp;sa=D&amp;ust=1588915410951000">https://developer.microsoft.com/en-us/microsoft-edge/tools/webdriver/</a></span></p>
</td>
</tr>
<tr class="c63">
<td class="c65" colspan="1" rowspan="1">
<p class="c27"><span class="c4 c43 c15">Firefox</span></p>
</td>
<td class="c66" colspan="1" rowspan="1">
<p class="c27"><span class="c24 c4"><a class="c28" href="https://www.google.com/url?q=https://github.com/mozilla/geckodriver/releases&amp;sa=D&amp;ust=1588915410953000">https://github.com/mozilla/geckodriver/releases</a></span></p>
</td>
</tr>
<tr class="c63">
<td class="c65" colspan="1" rowspan="1">
<p class="c27"><span class="c4 c43 c15">Safari</span></p>
</td>
<td class="c66" colspan="1" rowspan="1">
<p class="c27"><span class="c4 c24"><a class="c28" href="https://www.google.com/url?q=https://webkit.org/blog/6900/webdriver-support-in-safari-10/&amp;sa=D&amp;ust=1588915410955000">https://webkit.org/blog/6900/webdriver-support-in-safari-10/</a></span></p>
</td>
</tr>
</tbody>
</table>

<p class="c27"><code><span class="c20">$ wget </span><span class="c9 c34 c30 c55"><a class="c28" href="https://www.google.com/url?q=https://github.com/mozilla/geckodriver/releases/download/v0.24.0/geckodriver-v0.24.0-linux64.tar.gz&amp;sa=D&amp;ust=1588915410957000">https://github.com/mozilla/geckodriver/releases/download/v0.24.0/geckodriver-v0.24.0-linux64.tar.gz</a></span><span class="c20 c25 c54"> &amp;&amp; tar -xvzf geckodriver-v0.24.0-linux64.tar.gz &amp;&amp; rm geckodriver-v0.24.0-linux64.tar.gz</span></code></p>
<p class="c22"><strong><span class="c4">4. Adicione o </span><span class="c4 c7">driver </span><span class="c4">a varíavel do sistema </span><span class="c4 c7">PATH</span><span class="c4"> ou mova-o para a pasta </span><span class="c4 c7">bin</span><span class="c4"> do </span><span class="c4 c7">virtualenv</span><span class="c18 c4">:</span></strong></p>
<p class="c27 c59 c71"><code><span class="c20 c4">$ mv geckodriver bin/</span></code></p>
<p class="c27"><span class="c4 c15">Partiu automatizar!</span></p>
<p class="c22"><span class="c48 c43 c34">        Vamos fazer um programa bem simples que irá realizar uma busca no Google, </span><span class="c48 c43 c34 c7">printar </span><span class="c48 c43 c34">o </span><span class="c48 c43 c34 c7">link</span><span class="c48 c43 c34"> dos primeiros resultados e tirar um</span><span class="c48 c43 c34 c7"> screenshot</span><span class="c25 c43 c34 c48"> da página. Para tal, crie um arquivo Python qualquer (e.g. gsearch.py) e cole o seguinte trecho de código:</span></p>
<table class="c19">
<tbody>
<tr class="c37">
<td class="c13" colspan="1" rowspan="1">
<p class="c16"><span class="c3 c34 c44 c30">#!/usr/bin/env python</span></p>
<p class="c16"><span class="c3 c26 c30 c15">from</span><span class="c3 c34 c30"> selenium </span><span class="c3 c26 c30 c15">import</span><span class="c17 c3"> webdriver</span></p>
<p class="c16"><span class="c3 c26 c30 c15">from</span><span class="c3 c34 c30"> datetime </span><span class="c3 c26 c15 c30">import</span><span class="c17 c3"> datetime</span></p>
<p class="c16"><span class="c25 c3 c34 c44 c30"># cria uma nova sessao no browser</span></p>
<p class="c16"><span class="c3 c34 c30">browser </span><span class="c5 c3">=</span><span class="c3 c34 c30"> webdriver</span><span class="c5 c3">.</span><span class="c3 c34 c30">Firefox</span><span class="c5 c3">()</span></p>
<p class="c16"><span class="c3 c34 c30">browser</span><span class="c5 c3">.</span><span class="c3 c34 c30">maximize_window</span><span class="c5 c3">()</span></p>
<p class="c16"><span class="c3 c34 c44 c30"># navega para a home page do Google</span></p>
<p class="c16"><span class="c3 c34 c30">browser</span><span class="c5 c3">.</span><span class="c3 c34 c30">get</span><span class="c5 c3">(</span><span class="c1 c34 c30">"http://www.google.com/"</span><span class="c5 c3">)</span></p>
<p class="c16"><span class="c3 c34 c44 c30"># procura pelo elemento referente a searchbox</span></p>
<p class="c16"><span class="c3 c34 c30">search_field </span><span class="c5 c3">=</span><span class="c3 c34 c30"> browser</span><span class="c5 c3">.</span><span class="c3 c34 c30">find_element_by_name</span><span class="c5 c3">(</span><span class="c1 c34 c30">"q"</span><span class="c5 c3">)</span></p>
<p class="c16"><span class="c3 c34 c44 c30"># envia a string @query para o element e realiza a busca</span></p>
<p class="c16"><span class="c3 c34 c30">query </span><span class="c5 c3">=</span><span class="c3 c34 c30"> </span><span class="c1 c34 c30">"Test Driven Development"</span></p>
<p class="c16"><span class="c3 c34 c30">search_field</span><span class="c5 c3">.</span><span class="c3 c34 c30">send_keys</span><span class="c5 c3">(</span><span class="c3 c34 c30">query</span><span class="c5 c3">)</span></p>
<p class="c16"><span class="c3 c34 c30">search_field</span><span class="c5 c3">.</span><span class="c3 c34 c30">submit</span><span class="c5 c25 c3">()</span></p>
<p class="c16"><span class="c5 c3 c25"># espera até 3 segundos até o resultado ficar pronto</span></p>
<p class="c16"><span class="c3 c34 c30">browser</span><span class="c5 c3">.</span><span class="c3 c34 c30">implicitly_wait</span><span class="c5 c3">(</span><span class="c3 c34 c67 c30">3</span><span class="c5 c3">)</span><span class="c17 c3"> </span></p>
<p class="c16"><span class="c3 c34 c44 c30"># procura pelos resultados</span></p>
<p class="c16"><span class="c3 c34 c30">results </span><span class="c5 c3">=</span><span class="c3 c34 c30"> browser</span><span class="c5 c3">.</span><span class="c3 c34 c30">find_elements_by_class_name</span><span class="c5 c3">(</span><span class="c1 c34 c30">"r"</span><span class="c5 c3">)</span></p>
<p class="c16"><span class="c3 c34 c44 c30"># para cada resultado (&lt;div&gt;) procura a ancora (&lt;a&gt;) que contem o link da pagina</span></p>
<p class="c16"><span class="c3 c26 c30 c15">print</span><span class="c5 c3">(</span><span class="c1 c34 c30">"* {} primeiros resultados para a busca '{}':"</span><span class="c5 c3">.</span><span class="c3 c34 c30">format</span><span class="c5 c3">(</span><span class="c3 c50 c34 c30">len</span><span class="c5 c3">(</span><span class="c3 c34 c30">results</span><span class="c5 c3">),</span><span class="c3 c34 c30"> query</span><span class="c5 c3">))</span></p>
<p class="c16"><span class="c3 c26 c30 c15">for</span><span class="c3 c34 c30"> index</span><span class="c5 c3">,</span><span class="c3 c34 c30"> r </span><span class="c3 c26 c30 c15">in</span><span class="c3 c34 c30"> </span><span class="c3 c34 c30 c50">enumerate</span><span class="c5 c3">(</span><span class="c3 c34 c30">results</span><span class="c5 c3">):</span></p>
<p class="c16"><span class="c3 c34 c30">        link </span><span class="c5 c3">=</span><span class="c3 c34 c30"> r</span><span class="c5 c3">.</span><span class="c3 c34 c30">find_elements_by_tag_name</span><span class="c5 c3">(</span><span class="c1 c34 c30">"a"</span><span class="c5 c3">)[</span><span class="c3 c34 c67 c30">0</span><span class="c5 c3">].</span><span class="c3 c34 c30">get_attribute</span><span class="c5 c3">(</span><span class="c1 c34 c30">"href"</span><span class="c5 c3">)</span></p>
<p class="c16"><span class="c3 c34 c30">        </span><span class="c3 c26 c30 c15">print</span><span class="c5 c3">(</span><span class="c1 c34 c30">"</span><span class="c3 c34 c30 c75">\t</span><span class="c1 c34 c30">{:2d}. {}"</span><span class="c5 c3">.</span><span class="c3 c34 c30">format</span><span class="c5 c3">(</span><span class="c3 c34 c30">index </span><span class="c3 c34 c30 c46">+</span><span class="c3 c34 c30"> </span><span class="c3 c34 c30 c67">1</span><span class="c5 c3">,</span><span class="c3 c34 c30"> link</span><span class="c5 c3">))</span></p>
<p class="c16"><span class="c3 c34 c44 c30"># tira um print da pagina</span></p>
<p class="c16"><span class="c3 c34 c30">now </span><span class="c5 c3">=</span><span class="c3 c34 c30"> datetime</span><span class="c5 c3">.</span><span class="c3 c34 c30">now</span><span class="c5 c3">().</span><span class="c3 c34 c30">strftime</span><span class="c5 c3">(</span><span class="c1 c30 c34">'%Y-%m-%d_%H-%M-%S'</span><span class="c5 c3">)</span></p>
<p class="c16"><span class="c3 c34 c30">browser</span><span class="c5 c3">.</span><span class="c3 c34 c30">save_screenshot</span><span class="c5 c3">(</span><span class="c1 c34 c30">'search_screenshot-{}.png'</span><span class="c5 c3">.</span><span class="c3 c34 c30">format</span><span class="c3 c5">(</span><span class="c3 c34 c30">now</span><span class="c5 c3">))</span></p>
<p class="c16"><span class="c3 c34 c44 c30"># fecha a sessao com o browser</span></p>
<p class="c16"><span class="c3 c34 c30">browser</span><span class="c5 c3">.</span><span class="c3 c34 c30">quit</span><span class="c5 c3">()</span></p>
</td>
</tr>
</tbody>
</table>
<p class="c27"><span class="c4 c47 c34">        Para rodar o exemplo utilize o comando </span><span class="c20 c4">$ python gsearch.py</span></p>
<p class="c22"><span class="c47 c34">        </span><span class="c4 c47 c34">Agora é só usar e abusar da criatividade para automatizar as tarefas do seu dia a dia no</span><span class="c4 c47 c34 c7"> browser</span><span class="c35 c4 c34 c53">: procure pelo preço de algum produto em múltiplas lojas simultaneamente ou verifique se saiu um novo episódio da sua série preferida - é com você! :)</span></p>
<p class="c45"><span class="c4 c47 c15">Dica: </span><span class="c4 c34 c47">usuários Linux podem fazer uso do </span><span class="c9 c4 c47 c34 c7"><a class="c28" href="https://www.google.com/url?q=https://pt.wikipedia.org/wiki/Crontab&amp;sa=D&amp;ust=1588915410977000">cron</a></span><span class="c4 c47 c34 c7"> </span><span class="c4 c47 c34">para agendar a execução de </span><span class="c4 c34 c7 c35">scripts!</span></p>
<p class="c27"><span class="c25 c31 c4 c15">Hora dos testes!</span></p>
<p class="c22"><span class="c4">        Com o Selenium é possível reproduzir todo o </span><span class="c4 c7">test suite </span><span class="c4">de um sistema no ambiente real onde a aplicação </span><span class="c4 c7">web</span><span class="c4"> está rodando. Existem diferentes tipos de casos de teste que podem ser realizados com o apoio da ferramenta. Nesse exemplo iremos utilizar o Selenium em conjunto com o </span><span class="c4 c7">framework</span><span class="c4"> para testes unitários do Python, o </span><span class="c9 c4"><a class="c28" href="https://www.google.com/url?q=https://docs.python.org/3.6/library/unittest.html%23module-unittest&amp;sa=D&amp;ust=1588915410979000">unittest</a></span><span class="c4">. O unittest é inspirado no famoso </span><span class="c9 c4"><a class="c28" href="https://www.google.com/url?q=http://junit&amp;sa=D&amp;ust=1588915410979000">JUnit</a></span><span class="c18 c4"> e está incluído como um módulo nativo na biblioteca padrão do Python.</span></p>
<p class="c22 c59"><span class="c0">Vamos definir dois testes, um teste para validar a abertura do menu ‘Publicações’ no site do PET-SI e outro para verificar se a busca por ‘PET Redação’ </span><span class="c0">retorna</span><span class="c0"> algum resultado. </span><span class="c4">Para tal, c</span><span class="c18 c4">rie um arquivo (e.g. utest_1.py) e cole o código abaixo:</span></p>
<p class="c10 c23"> </p>
<table class="c40">
<tbody>
<tr class="c37">
<td class="c13" colspan="1" rowspan="1">
<p class="c10"><span class="c3 c44">#!/usr/bin/env python</span></p>
<p class="c10"><span class="c3 c26 c15">from</span><span class="c3"> selenium </span><span class="c3 c26 c15">import</span><span class="c18 c3"> webdriver</span></p>
<p class="c10"><span class="c3 c26 c15">from</span><span class="c3"> selenium</span><span class="c3 c11">.</span><span class="c3">webdriver</span><span class="c3 c11">.</span><span class="c3">common</span><span class="c3 c11">.</span><span class="c3">keys </span><span class="c3 c26 c15">import</span><span class="c18 c3"> Keys</span></p>
<p class="c10"><span class="c3 c26 c15">from</span><span class="c3"> selenium</span><span class="c3 c11">.</span><span class="c3">webdriver</span><span class="c3 c11">.</span><span class="c3">common</span><span class="c3 c11">.</span><span class="c3">by </span><span class="c3 c26 c15">import</span><span class="c18 c3"> By</span></p>
<p class="c10"><span class="c3 c26 c15">import</span><span class="c18 c3"> unittest</span></p>
<p class="c10 c23"> </p>
<p class="c10"><span class="c3 c26 c15">class</span><span class="c3"> PetPage</span><span class="c3 c11">(</span><span class="c3">unittest</span><span class="c3 c11">.</span><span class="c3">TestCase</span><span class="c3 c11">):</span></p>
<p class="c10"><span class="c3">    </span><span class="c3 c26 c15">def</span><span class="c3"> setUp</span><span class="c3 c11">(</span><span class="c3">self</span><span class="c3 c11">):</span></p>
<p class="c10"><span class="c3">        self</span><span class="c3 c11">.</span><span class="c3">browser </span><span class="c3 c11">=</span><span class="c3"> webdriver</span><span class="c3 c11">.</span><span class="c3">Firefox</span><span class="c25 c3 c11 c38 c34">()</span></p>
<p class="c10"><span class="c3">        self</span><span class="c3 c11">.</span><span class="c3">browser</span><span class="c3 c11">.</span><span class="c3">implicitly_wait</span><span class="c3 c11">(</span><span class="c3 c67">10</span><span class="c25 c3 c11 c38 c34">)</span></p>
<p class="c10"><span class="c3">        self</span><span class="c3 c11">.</span><span class="c3">browser</span><span class="c3 c11">.</span><span class="c3">get</span><span class="c3 c11">(</span><span class="c1">"http://coral.ufsm.br/pet-si/"</span><span class="c3 c11">)</span></p>
<p class="c10 c23"> </p>
<p class="c10"><span class="c3">    </span><span class="c3 c26 c15">def</span><span class="c3"> test_open_publicacoes_page</span><span class="c3 c11">(</span><span class="c3">self</span><span class="c3 c11">):</span></p>
<p class="c10"><span class="c3">      </span><span class="c3 c15">  self</span><span class="c3 c11 c15">.</span><span class="c3 c15">browser</span><span class="c3 c11 c15">.</span><span class="c3 c15">find_element_by_xpath</span><span class="c3 c11 c15">(</span><span class="c1 c15">"//a[text() = 'Publicações']"</span><span class="c3 c11 c15">).</span><span class="c3 c15">click</span><span class="c3 c11 c15">()</span></p>
<p class="c10"><span class="c3">        self</span><span class="c3 c11">.</span><span class="c3">assertIn</span><span class="c3 c11">(</span><span class="c1">'category/posts'</span><span class="c3 c11">,</span><span class="c3"> self</span><span class="c3 c11">.</span><span class="c3">browser</span><span class="c3 c11">.</span><span class="c3">current_url</span><span class="c3 c11">)</span></p>
<p class="c10"><span class="c18 c3">        </span></p>
<p class="c10"><span class="c3">    </span><span class="c3 c26 c15">def</span><span class="c3"> test_search</span><span class="c3 c11">(</span><span class="c3">self</span><span class="c3 c11">):</span></p>
<p class="c10"><span class="c3">       </span><span class="c3 c15"> self</span><span class="c3 c11 c15">.</span><span class="c3 c15">browser</span><span class="c3 c11 c15">.</span><span class="c3 c15">find_element_by_xpath</span><span class="c3 c11 c15">(</span><span class="c1 c15">"//a[text() = 'Publicações']"</span><span class="c3 c11 c15">).</span><span class="c3 c15">click</span><span class="c3 c11 c15">()</span></p>
<p class="c10"><span class="c3">        self</span><span class="c3 c11">.</span><span class="c3">search_field </span><span class="c3 c11">=</span><span class="c3"> self</span><span class="c3 c11">.</span><span class="c3">browser</span><span class="c3 c11">.</span><span class="c3">find_element_by_id</span><span class="c3 c11">(</span><span class="c1">"s"</span><span class="c3 c11">)</span></p>
<p class="c10"><span class="c3">        self</span><span class="c3 c11">.</span><span class="c3">search_field</span><span class="c3 c11">.</span><span class="c3">send_keys</span><span class="c3 c11">(</span><span class="c1">"PET Redação"</span><span class="c3 c11">)</span></p>
<p class="c10"><span class="c3">        self</span><span class="c3 c11">.</span><span class="c3">search_field</span><span class="c3 c11">.</span><span class="c3">send_keys</span><span class="c3 c11">(</span><span class="c3">Keys</span><span class="c3 c11">.</span><span class="c3">ENTER</span><span class="c3 c11">)</span><span class="c3"> </span><span class="c3 c44"># submit query</span></p>
<p class="c10"><span class="c3">        self</span><span class="c3 c11">.</span><span class="c3">assertTrue</span><span class="c3 c11">(</span><span class="c3">self</span><span class="c3 c11">.</span><span class="c3">is_element_on_page</span><span class="c3 c11">(</span><span class="c3">By</span><span class="c3 c11">.</span><span class="c3">CSS_SELECTOR</span><span class="c3 c11">,</span><span class="c3"> </span><span class="c1">'div.post'</span><span class="c3 c11">)) </span><span class="c3"> </span><span class="c3 c44"># check for results</span></p>
<p class="c10 c23"> </p>
<p class="c10"><span class="c3">    </span><span class="c3 c26 c15">def</span><span class="c3"> tearDown</span><span class="c3 c11">(</span><span class="c3">self</span><span class="c3 c11">):</span></p>
<p class="c10"><span class="c3">       self</span><span class="c3 c11">.</span><span class="c3">browser</span><span class="c3 c11">.</span><span class="c3">quit</span><span class="c3 c11">()</span></p>
<p class="c10 c23"> </p>
<p class="c10"><span class="c3">    </span><span class="c3 c26 c15">def</span><span class="c3"> is_element_on_page</span><span class="c3 c11">(</span><span class="c3">self</span><span class="c3 c11">,</span><span class="c3"> how</span><span class="c3 c11">,</span><span class="c3"> what</span><span class="c3 c11">):</span></p>
<p class="c10"><span class="c3">        </span><span class="c3 c26 c15">try</span><span class="c3 c11">:</span><span class="c18 c3"> </span></p>
<p class="c10"><span class="c3">            self</span><span class="c3 c11">.</span><span class="c3">browser</span><span class="c3 c11">.</span><span class="c3">find_element</span><span class="c3 c11">(</span><span class="c3">by</span><span class="c3 c11">=</span><span class="c3">how</span><span class="c3 c11">,</span><span class="c3"> value</span><span class="c3 c11">=</span><span class="c3">what</span><span class="c3 c11">)</span></p>
<p class="c10"><span class="c3">        </span><span class="c3 c26 c15">except</span><span class="c3">:</span></p>
<p class="c10"><span class="c3">            </span><span class="c3 c26 c15">return</span><span class="c3"> </span><span class="c3 c58">False</span></p>
<p class="c10"><span class="c3">        </span><span class="c3 c15 c26">return</span><span class="c3"> </span><span class="c3 c58">True</span></p>
<p class="c10 c23"> </p>
<p class="c10"><span class="c3 c26 c15">if</span><span class="c3"> </span><span class="c3 c58">__name__</span><span class="c3"> </span><span class="c3 c46">==</span><span class="c3"> </span><span class="c1">'__main__'</span><span class="c3 c11">:</span></p>
<p class="c10"><span class="c3">    unittest</span><span class="c3 c11">.</span><span class="c3">main</span><span class="c3 c11">(</span><span class="c3">verbosity</span><span class="c3 c11">=</span><span class="c3 c67">2</span><span class="c3 c11">)</span></p>
</td>
</tr>
</tbody>
</table>
<p class="c10 c23"> </p>
<p class="c22"><span class="c0">        Rode o programa (</span><span class="c20 c4">$ python utest_1.py</span><span class="c0">) e veja o resultado. Você deve ter percebido que uma nova instância do </span><span class="c0 c7">browser</span><span class="c18 c0"> é aberta para cada um dos testes. Nem sempre esse comportamento é desejado (veja a necessidade da redundância nas linhas 15 e 19). Vamos melhorar um pouco nosso código fazendo uso de algumas anotações. Para tal, crie um arquivo (e.g. utest_2.py) com o código conforme segue abaixo:</span></p>
<p class="c6 c23"> </p>
<table class="c19">
<tbody>
<tr class="c37">
<td class="c13" colspan="1" rowspan="1">
<p class="c6"><span class="c3 c44"> </span><span class="c3 c44 c15">   …</span></p>
<p class="c6"><span class="c3">    </span><span class="c3 c11">@</span><span class="c3 c50">classmethod</span></p>
<p class="c6"><span class="c3">    </span><span class="c3 c26 c15">def</span><span class="c3"> setUpClass</span><span class="c3 c11">(</span><span class="c3">inst</span><span class="c3 c11">):</span></p>
<p class="c6"><span class="c3">        inst</span><span class="c3 c11">.</span><span class="c3">browser </span><span class="c3 c11">=</span><span class="c3"> webdriver</span><span class="c3 c11">.</span><span class="c3">Firefox</span><span class="c25 c3 c11 c34 c38">()</span></p>
<p class="c6"><span class="c3">        inst</span><span class="c3 c11">.</span><span class="c3">browser</span><span class="c3 c11">.</span><span class="c3">implicitly_wait</span><span class="c3 c11">(</span><span class="c3 c67">10</span><span class="c25 c3 c11 c38 c34">)</span></p>
<p class="c6"><span class="c3">        inst</span><span class="c3 c11">.</span><span class="c3">browser</span><span class="c3 c11">.</span><span class="c3">get</span><span class="c3 c11">(</span><span class="c1">"http://coral.ufsm.br/pet-si/"</span><span class="c3 c11">)</span></p>
<p class="c6 c23"> </p>
<p class="c6"><span class="c3">    </span><span class="c3 c26 c15">def</span><span class="c3"> test_01_open_publicacoes_page</span><span class="c3 c11">(</span><span class="c3">self</span><span class="c3 c11">):</span></p>
<p class="c6"><span class="c3">        self</span><span class="c3 c11">.</span><span class="c3">browser</span><span class="c3 c11">.</span><span class="c3">find_element_by_xpath</span><span class="c3 c11">(</span><span class="c1">"//a[text() = 'Publicações']"</span><span class="c3 c11">).</span><span class="c3">click</span><span class="c3 c11">()</span></p>
<p class="c6"><span class="c3">        self</span><span class="c3 c11">.</span><span class="c3">assertIn</span><span class="c3 c11">(</span><span class="c1">'category/posts'</span><span class="c3 c11">,</span><span class="c3"> self</span><span class="c3 c11">.</span><span class="c3">browser</span><span class="c3 c11">.</span><span class="c3">current_url</span><span class="c3 c11">)</span></p>
<p class="c6"><span class="c18 c3">        </span></p>
<p class="c6"><span class="c3">    </span><span class="c3 c26 c15">def</span><span class="c3"> test_02_search</span><span class="c3 c11">(</span><span class="c3">self</span><span class="c25 c3 c11 c38 c34">):</span></p>
<p class="c6"><span class="c25 c3 c11 c38 c34">        # não é necessário navegar para ‘Publicações’ novamente</span></p>
<p class="c6"><span class="c3">        self</span><span class="c3 c11">.</span><span class="c3">search_field </span><span class="c3 c11">=</span><span class="c3"> self</span><span class="c3 c11">.</span><span class="c3">browser</span><span class="c3 c11">.</span><span class="c3">find_element_by_id</span><span class="c3 c11">(</span><span class="c1">"s"</span><span class="c3 c11">)</span></p>
<p class="c6"><span class="c3">        self</span><span class="c3 c11">.</span><span class="c3">search_field</span><span class="c3 c11">.</span><span class="c3">send_keys</span><span class="c3 c11">(</span><span class="c1">"PET Redação"</span><span class="c3 c11">)</span></p>
<p class="c6"><span class="c3">        self</span><span class="c3 c11">.</span><span class="c3">search_field</span><span class="c3 c11">.</span><span class="c3">send_keys</span><span class="c3 c11">(</span><span class="c3">Keys</span><span class="c3 c11">.</span><span class="c3">ENTER</span><span class="c3 c11">)</span><span class="c3"> </span><span class="c3 c44"># submit query</span></p>
<p class="c6"><span class="c3">        self</span><span class="c3 c11">.</span><span class="c3">assertTrue</span><span class="c3 c11">(</span><span class="c3">self</span><span class="c3 c11">.</span><span class="c3">is_element_on_page</span><span class="c3 c11">(</span><span class="c3">By</span><span class="c3 c11">.</span><span class="c3">CSS_SELECTOR</span><span class="c3 c11">,</span><span class="c3"> </span><span class="c1">'div.post'</span><span class="c3 c11">)) </span><span class="c3">  </span><span class="c3 c44"># check for results</span></p>
<p class="c6 c23"> </p>
<p class="c6"><span class="c3">    </span><span class="c3 c11">@</span><span class="c3 c50">classmethod</span></p>
<p class="c6"><span class="c3">    </span><span class="c3 c26 c15">def</span><span class="c3"> tearDownClass</span><span class="c3 c11">(</span><span class="c3">inst</span><span class="c3 c11">):</span></p>
<p class="c6"><span class="c3">       inst</span><span class="c3 c11">.</span><span class="c3">browser</span><span class="c3 c11">.</span><span class="c3">quit</span><span class="c3 c11">()</span></p>
<p class="c6"><span class="c3 c15">   …</span></p>
</td>
</tr>
</tbody>
</table>
<p class="c22"><span class="c0">        Rode o código (</span><span class="c4 c20">$ python utest_2.py</span><span class="c18 c0">) e veja o resultado. É importante notar que os testes são executados de acordo com seus nomes (ordenação de strings padrão do Python - alfabeticamente + numericamente), por isso a adição do número do teste (01 e 02) garante a ordem de execução. É claro que isso é apenas uma alternativa, nestes casos seria mais inteligente não criar métodos independentes e sim um único caso de teste.</span></p>
<p class="c56"><span class="c25 c31 c15 c70 c76">Por onde continuar?!</span></p>
<p class="c8"><span class="c0 c15">        </span><span class="c0">O Selenium possui diversas funcionalidades a serem exploradas, nessa redação apenas fizemos um </span><span class="c0 c7">overview</span><span class="c18 c0"> geral da ferramenta. Aos interessados, seguem alguns tópicos para prosseguir os estudos na linha de testes automatizados:</span></p>
<ul class="c42 lst-kix_l3esqijhqeo-0 start">
<li class="c32"><span class="c33 c0"><a class="c28" href="https://www.google.com/url?q=https://pt.wikipedia.org/wiki/Behavior_Driven_Development&amp;sa=D&amp;ust=1588915411017000">Behavior Driven Development</a></span><span class="c0">: escreva cenários de testes poderosos e elegantes com o </span><span class="c33 c0"><a class="c28" href="https://www.google.com/url?q=https://cucumber.io/&amp;sa=D&amp;ust=1588915411018000">Cucumber</a></span><span class="c0"> (para Python veja o </span><span class="c0 c33"><a class="c28" href="https://www.google.com/url?q=https://behave.readthedocs.io/en/latest/index.html%23&amp;sa=D&amp;ust=1588915411018000">Behave</a></span><span class="c18 c0">).</span></li>
<li class="c32"><span class="c33 c0"><a class="c28" href="https://www.google.com/url?q=http://selendroid.io/&amp;sa=D&amp;ust=1588915411019000">Selendroid</a></span><span class="c18 c0">: automatização de testes para aplicativos Android (nativos ou híbridos);</span></li>
<li class="c32"><span class="c33 c0"><a class="c28" href="https://www.google.com/url?q=https://pypi.org/project/castro/&amp;sa=D&amp;ust=1588915411019000">castro</a></span><span class="c0">: gravação da execução dos testes (</span><span class="c18 c0">muito útil em ambientes em que é necessário apurar a razão da falha de algum caso de teste);</span></li>
<li class="c39 c62"><span class="c33 c0"><a class="c28" href="https://www.google.com/url?q=https://robotframework.org/&amp;sa=D&amp;ust=1588915411020000">Robot Framework</a></span><span class="c0">: </span><span class="c0 c7">A</span><span class="c0 c7">cceptance test-driven development</span><span class="c0"> (ATDD) e </span><span class="c0 c7">Robotic process automation</span><span class="c18 c0"> (RPA).</span></li>
</ul>
<p class="c56 c23 c62"> </p>
<p class="c56 c23"> </p>
<p class="c74"><span class="c25 c31 c54 c15">REFERÊNCIAS</span></p>
<ul class="c42 lst-kix_1jywh6hsn7qv-0 start">
<li class="c39 c29"><span class="c21">SeleniumHQ. Selenium Documentation. (</span><span class="c2"><a class="c28" href="https://www.google.com/url?q=https://www.seleniumhq.org/docs/&amp;sa=D&amp;ust=1588915411021000">link</a></span><span class="c14">)</span></li>
<li class="c39 c29"><span class="c21">Python. unittest — Unit testing framework. (</span><span class="c2"><a class="c28" href="https://www.google.com/url?q=https://docs.python.org/3/library/unittest.html%23module-unittest&amp;sa=D&amp;ust=1588915411021000">link</a></span><span class="c14">)</span></li>
<li class="c39 c29"><span class="c21">Read the Docs. Selenium with Python. (</span><span class="c2"><a class="c28" href="https://www.google.com/url?q=https://selenium-python.readthedocs.io/getting-started.html&amp;sa=D&amp;ust=1588915411022000">link</a></span><span class="c14">)</span></li>
<li class="c39 c29"><span class="c21">TechBeamers. Build A Selenium Python Test Suite From Scratch Using Unittest. (</span><span class="c2"><a class="c28" href="https://www.google.com/url?q=https://www.techbeamers.com/selenium-python-test-suite-unittest/&amp;sa=D&amp;ust=1588915411022000">link</a></span><span class="c14">)</span></li>
<li class="c39 c29"><span class="c21">TechBeamers. Selenium Webdriver – 20 Coding Tips to Improve Quality. (</span><span class="c2"><a class="c28" href="https://www.google.com/url?q=https://www.techbeamers.com/selenium-webdriver-coding-tips/&amp;sa=D&amp;ust=1588915411023000">link</a></span><span class="c14">)</span></li>
<li class="c29 c39"><span class="c21">CherCher Tech. Python Unittest Selenium. (</span><span class="c2"><a class="c28" href="https://www.google.com/url?q=https://chercher.tech/python/python-unittest-selenium&amp;sa=D&amp;ust=1588915411023000">link</a></span><span class="c14">)</span></li>
<li class="c39 c29"><span class="c21">DevMedia. Dominando o Selenium Web Driver na prática. (</span><span class="c2"><a class="c28" href="https://www.google.com/url?q=https://www.devmedia.com.br/dominando-o-selenium-web-driver-na-pratica/34183&amp;sa=D&amp;ust=1588915411024000">link</a></span><span class="c14">)</span></li>
<li class="c39 c29"><span class="c21">Medium. Top Tutorials To Learn Selenium For Beginners. (</span><span class="c2"><a class="c28" href="https://www.google.com/url?q=https://medium.com/quick-code/top-tutorials-to-learn-selenium-for-beginners-4e1f301585&amp;sa=D&amp;ust=1588915411025000">link</a></span><span class="c14">)</span></li>
<li class="c39 c29"><span class="c21">Medium. BDD, Cucumber and Selenium WebDriver based Test Automation Framework in Python. (</span><span class="c2"><a class="c28" href="https://www.google.com/url?q=https://medium.com/@hmurari/bdd-cucumber-and-selenium-webdriver-based-test-automation-framework-in-python-ae092a7581d3&amp;sa=D&amp;ust=1588915411025000">link</a></span><span class="c14">)</span></li>
<li class="c39 c29"><span class="c21">IBM. Automated testing with Selenium and Cucumber. (</span><span class="c2"><a class="c28" href="https://www.google.com/url?q=https://www.ibm.com/developerworks/library/a-automating-ria/index.html&amp;sa=D&amp;ust=1588915411026000">link</a></span><span class="c14">)</span></li>
<li class="c39 c29"><span class="c21">The Tara Nights. Google Search Using Selenium And Python – Selenium Python Basics. (</span><span class="c2"><a class="c28" href="https://www.google.com/url?q=https://www.thetaranights.com/google-search-using-selenium-and-python-selenium-python-basics/&amp;sa=D&amp;ust=1588915411026000">link</a></span><span class="c14">)</span></li>
<li class="c39 c29"><span class="c21">Sauce Labs. Selenium Tips: CSS Selectors. (</span><span class="c2"><a class="c28" href="https://www.google.com/url?q=https://saucelabs.com/resources/articles/selenium-tips-css-selectors&amp;sa=D&amp;ust=1588915411027000">link</a></span><span class="c14">)</span></li>
<li class="c39 c29"><span class="c21">Sauce Labs. Getting Started with Selenium for Automated Website Testing. (</span><span class="c2"><a class="c28" href="https://www.google.com/url?q=https://wiki.saucelabs.com/display/DOCS/Getting%2BStarted%2Bwith%2BSelenium%2Bfor%2BAutomated%2BWebsite%2BTesting&amp;sa=D&amp;ust=1588915411027000">link</a></span><span class="c21">)</span></li>
</ul>
<!-- /wp:tadv/classic-paragraph -->]]></content:encoded>
													</item>
					</channel>
        </rss>
        