{"id":46708,"date":"2025-10-22T18:58:09","date_gmt":"2025-10-22T21:58:09","guid":{"rendered":"https:\/\/portifolioos-prontos.com\/?post_type=product&#038;p=46708"},"modified":"2025-10-22T18:58:09","modified_gmt":"2025-10-22T21:58:09","slug":"aula-pratica-desenvolvimento-em-javascript-2","status":"publish","type":"product","link":"https:\/\/portifolioos-prontos.com\/index.php\/product\/aula-pratica-desenvolvimento-em-javascript-2\/","title":{"rendered":"Aula Pr\u00e1tica Desenvolvimento em Javascript"},"content":{"rendered":"<p>Roteiro Aula Pr\u00e1tica<\/p>\n<p><strong>NOME DA DISCIPLINA: DESENVOLVIMENTO EM JAVASCRIPT<\/strong><\/p>\n<p><strong>Unidade: 1 \u2013 PRINC\u00cdPIOS DO JAVASCRIPT<\/strong><\/p>\n<p><strong>Aula: 3 \u2013 ESTRUTURAS DE REPETI\u00c7\u00c3O<\/strong><\/p>\n<p>OBJETIVOS<\/p>\n<p>\u2713 Compreender e aplicar as estruturas de repeti\u00e7\u00f5es com a finalidade de familiarizar os<\/p>\n<p>estudantes com a estrutura \u201cfor\u201d em JavaScript.<\/p>\n<p>\u2713 Compreender e aplicar os conceitos te\u00f3ricos aprendidos em programa\u00e7\u00e3o, como vari\u00e1veis,<\/p>\n<p>loops e opera\u00e7\u00f5es matem\u00e1ticas simples, em um contexto pr\u00e1tico e relevante.<\/p>\n<p>SOLU\u00c7\u00c3O DIGITAL<\/p>\n<ul>\n<li>Google Colab<\/li>\n<\/ul>\n<p>LINK SOLU\u00c7\u00c3O DIGITAL (EXCETO ALGETEC): https:\/\/colab.google\/<\/p>\n<p>O Google Colab, ou Colaboratory, \u00e9 uma plataforma gratuita baseada na nuvem oferecida pelo<\/p>\n<p>Google. Ela fornece um ambiente de notebook interativo e colaborativo que permite a cria\u00e7\u00e3o e<\/p>\n<p>execu\u00e7\u00e3o de c\u00f3digo diretamente no navegador, sem a necessidade de configurar ou instalar<\/p>\n<p>qualquer software no seu computador.<\/p>\n<p>PROCEDIMENTO\/ATIVIDADE<\/p>\n<p>ATIVIDADE PROPOSTA:<\/p>\n<ul>\n<li>Nesta atividade, voc\u00ea ir\u00e1 criar uma p\u00e1gina web que oferece uma experi\u00eancia interativa<\/li>\n<\/ul>\n<p>para gerar tabuadas de multiplica\u00e7\u00e3o. Ao abrir a p\u00e1gina, os usu\u00e1rios ser\u00e3o guiados a<\/p>\n<p>inserir um n\u00famero de sua escolha entre (1 e 10). A partir desse n\u00famero, o programa<\/p>\n<p>calcular\u00e1 automaticamente e exibir\u00e1 a tabuada completa desse n\u00famero, do multiplicador 1<\/p>\n<p>ao 10.<\/p>\n<p>PROCEDIMENTOS PARA A REALIZA\u00c7\u00c3O DA ATIVIDADE:<\/p>\n<ol>\n<li>Abertura da P\u00e1gina:<\/li>\n<\/ol>\n<p>Ao acessar a p\u00e1gina, voc\u00ea receber\u00e1 uma mensagem com o t\u00edtulo &#8220;Gerador de Tabuada<\/p>\n<p>Interativo&#8221; e um campo de entrada para inserir um n\u00famero.<\/p>\n<ol start=\"2\">\n<li>Inser\u00e7\u00e3o de Dados:<\/li>\n<\/ol>\n<p>Na caixa de mensagem ser\u00e1 solicitado que voc\u00ea insira um n\u00famero entre 1 e 10. Isso<\/p>\n<p>determinar\u00e1 qual tabuada ser\u00e1 gerada.<\/p>\n<ol start=\"3\">\n<li>C\u00e1lculo e Exibi\u00e7\u00e3o:<\/li>\n<\/ol>\n<p>Utilizando a estrutura de repeti\u00e7\u00e3o \u201cFor\u201d em JavaScript, o programa calcular\u00e1 e exibir\u00e1<\/p>\n<p>cada linha da tabuada correspondente ao n\u00famero inserido. Cada multiplica\u00e7\u00e3o ser\u00e1<\/p>\n<p>apresentada de forma clara e organizada na p\u00e1gina.<\/p>\n<ol start=\"4\">\n<li>Explora\u00e7\u00e3o e Interatividade:<\/li>\n<\/ol>\n<p>Ap\u00f3s a gera\u00e7\u00e3o da tabuada, voc\u00ea poder\u00e1 explorar os resultados visualizados na p\u00e1gina.<\/p>\n<p>Experimente inserir diferentes n\u00fameros para gerar novas tabuadas e observe como o<\/p>\n<p>programa responde dinamicamente.<\/p>\n<p>CHECKLIST:<\/p>\n<ul>\n<li>Inserir um campo para o usu\u00e1rio digitar um n\u00famero.<\/li>\n<li>Calcular a tabuada desse n\u00famero utilizando JavaScript.<\/li>\n<li>Utilizar um loop \u201cfor\u201d para gerar as multiplica\u00e7\u00f5es de 1 a 10.<\/li>\n<li>Exibir dinamicamente os resultados na p\u00e1gina usando manipula\u00e7\u00e3o do DOM.<\/li>\n<li>Testar a funcionalidade com diferentes n\u00fameros para verificar a precis\u00e3o dos c\u00e1lculos.<\/li>\n<li>Revisar e refinar a implementa\u00e7\u00e3o para garantir que todos os requisitos sejam atendidos.<\/li>\n<li>Preparar a p\u00e1gina e os arquivos necess\u00e1rios para submiss\u00e3o ou uso final.<\/li>\n<\/ul>\n<p>RESULTADOS<\/p>\n<p>Para comprovar a realiza\u00e7\u00e3o da atividade, \u00e9 necessario entregar um relat\u00f3rio no formato .docx ou<\/p>\n<p>.pdf, contendo:<\/p>\n<ul>\n<li>Todos os c\u00f3digo implementados em HTML, CSS e JavaScript.<\/li>\n<li>Prints das telas do navegador executando a atividade.<\/li>\n<\/ul>\n<p>RESULTADOS DE APRENDIZAGEM:<\/p>\n<p>Essa atividade demonstra como integrar HTML, CSS e JavaScript para criar uma aplica\u00e7\u00e3o simples<\/p>\n<p>e interativa que utiliza a estrutura de repeti\u00e7\u00e3o for para gerar e exibir a tabuada de um n\u00famero<\/p>\n<p>escolhido pelo usu\u00e1rio.<\/p>\n<p>DESENVOLVIMENTO EM JAVASCRIPT<\/p>\n<p>Roteiro<\/p>\n<p>Aula Pr\u00e1tica<\/p>\n<p><strong>ROTEIRO DE AULA PR\u00c1TICA<\/strong><\/p>\n<p><strong>NOME DA DISCIPLINA: LINGUAGEM DE PROGRAMA\u00c7\u00c3O<\/strong><\/p>\n<p><strong>Unidade: 2 \u2013 Bibliotecas para Desenvolvimento em JavaScript<\/strong><\/p>\n<p><strong>Aula: 2 \u2013 APIS de Navegador &#8211; Manipulando \u00c1udio e Gr\u00e1fico<\/strong><\/p>\n<p>OBJETIVOS<\/p>\n<p>\u2713 Desenvolver uma anima\u00e7\u00e3o b\u00e1sica usando o &lt;canvas&gt; e JavaScript, onde objetos se<\/p>\n<p>movem e mudam de cor ao longo do tempo.<\/p>\n<p>SOLU\u00c7\u00c3O DIGITAL<\/p>\n<ul>\n<li>Google Colab<\/li>\n<\/ul>\n<p>LINK SOLU\u00c7\u00c3O DIGITAL (EXCETO ALGETEC): https:\/\/colab.google\/<\/p>\n<p>O Google Colab, ou Colaboratory, \u00e9 uma plataforma gratuita baseada na nuvem oferecida pelo<\/p>\n<p>Google. Ela fornece um ambiente de notebook interativo e colaborativo que permite a cria\u00e7\u00e3o e<\/p>\n<p>execu\u00e7\u00e3o de c\u00f3digo diretamente no navegador, sem a necessidade de configurar ou instalar<\/p>\n<p>qualquer software no seu computador.<\/p>\n<p>PROCEDIMENTO\/ATIVIDADE<\/p>\n<p>ATIVIDADE PROPOSTA:<\/p>\n<ul>\n<li>Nesta atividade, voc\u00ea ir\u00e1 criar uma p\u00e1gina web que cont\u00e9m uma anima\u00e7\u00e3o simples utilizando<\/li>\n<\/ul>\n<p>o elemento &lt;canvas&gt; do HTML5. A anima\u00e7\u00e3o consistir\u00e1 em objetos (por exemplo, c\u00edrculos)<\/p>\n<p>que se movem ou mudam de cor ao longo do tempo.<\/p>\n<p>PROCEDIMENTOS PARA A REALIZA\u00c7\u00c3O DA ATIVIDADE:<\/p>\n<ol>\n<li>Configura\u00e7\u00e3o do Projeto:<\/li>\n<\/ol>\n<p>Crie um arquivo HTML com um elemento &lt;canvas&gt; e um arquivo JavaScript para a l\u00f3gica<\/p>\n<p>da anima\u00e7\u00e3o.<\/p>\n<ol start=\"2\">\n<li>Desenvolvimento da Anima\u00e7\u00e3o:<\/li>\n<\/ol>\n<p>Configura\u00e7\u00e3o Inicial:<\/p>\n<p>Defina o tamanho do &lt;canvas&gt; e obtenha o contexto 2D do canvas em JavaScript.<\/p>\n<p>Desenho de Objetos:<\/p>\n<p>3<\/p>\n<p>Crie e desenhe objetos (por exemplo, c\u00edrculos, ret\u00e2ngulos) no &lt;canvas&gt; usando m\u00e9todos<\/p>\n<p>como ctx.beginPath(), ctx.arc(), ctx.fillRect(), por exemplo.<\/p>\n<p>Anima\u00e7\u00e3o B\u00e1sica:<\/p>\n<p>Use o requestAnimationFrame para criar um loop de anima\u00e7\u00e3o.<\/p>\n<p>Dentro do loop, atualize as propriedades dos objetos (posi\u00e7\u00e3o, cor, tamanho) para criar<\/p>\n<p>efeitos de anima\u00e7\u00e3o.<\/p>\n<p>Interatividade Opcional:<\/p>\n<p>Adicione eventos de mouse para interagir com os objetos (por exemplo, clicar para mudar<\/p>\n<p>de cor).<\/p>\n<p>CHECKLIST:<\/p>\n<ul>\n<li>Criar um arquivo HTML com um elemento &lt;canvas&gt;.<\/li>\n<li>Definir o tamanho do &lt;canvas&gt; e obter o contexto 2D em JavaScript.<\/li>\n<li>Desenhar objetos no &lt;canvas&gt; usando m\u00e9todos apropriados.<\/li>\n<li>Implementar um loop de anima\u00e7\u00e3o com requestAnimationFrame.<\/li>\n<li>Atualizar propriedades dos objetos para criar a anima\u00e7\u00e3o.<\/li>\n<li>Adicionar eventos de mouse para interatividade (opcional).<\/li>\n<li>Testar e ajustar a anima\u00e7\u00e3o conforme necess\u00e1rio.<\/li>\n<\/ul>\n<p>RESULTADOS<\/p>\n<p>Para comprovar a realiza\u00e7\u00e3o da atividade, \u00e9 necess\u00e1rio entregar um relat\u00f3rio no formato .docx ou<\/p>\n<p>.pdf, contendo:<\/p>\n<ul>\n<li>Todos os c\u00f3digos implementados em HTML, CSS e JavaScript.<\/li>\n<li>Prints das telas do navegador executando a atividade. (Comprovando que o c\u00edrculo est\u00e1<\/li>\n<\/ul>\n<p>mudando de cor).<\/p>\n<p>RESULTADOS DE APRENDIZAGEM:<\/p>\n<p>Esta atividade pr\u00e1tica introduz o estudante ao \u201ccanvas\u201d do HTML5 e como ele pode ser utilizado<\/p>\n<p>para criar anima\u00e7\u00f5es simples diretamente com JavaScript. Encoraje os alunos a experimentarem<\/p>\n<p>diferentes propriedades e m\u00e9todos do contexto 2D (ctx) para explorar mais possibilidades de<\/p>\n<p>anima\u00e7\u00e3o, como adicionar mais objetos, modificar velocidades e implementar intera\u00e7\u00f5es adicionais<\/p>\n<p>com o usu\u00e1rio. Essa atividade \u00e9 um passo para outros futuros projetos mais complexos envolvendo<\/p>\n<p>anima\u00e7\u00f5es e gr\u00e1ficos din\u00e2micos no \u201dcanvas\u201d.<\/p>\n<p>DESENVOLVIMENTO EM JAVASCRIPT<\/p>\n<p>Roteiro<\/p>\n<p>Aula Pr\u00e1tica<\/p>\n<p>ROTEIRO DE AULA PR\u00c1TICA<\/p>\n<p><strong>NOME DA DISCIPLINA: DESENVOLVIMENTO EM JAVASCRIPT<\/strong><\/p>\n<p><strong>Unidade: 3 \u2013 Programa\u00e7\u00e3o Orientada a Eventos<\/strong><\/p>\n<p><strong>Aula: 4 \u2013 Eventos em N\u00edvel de P\u00e1gina<\/strong><\/p>\n<p>OBJETIVOS<\/p>\n<p>\u2713 Desenvolver um projeto interativo que utilize eventos CSS e HTML5 para criar uma<\/p>\n<p>experi\u00eancia din\u00e2mica e envolvente para o usu\u00e1rio.<\/p>\n<p>SOLU\u00c7\u00c3O DIGITAL<\/p>\n<ul>\n<li>Google Colab<\/li>\n<\/ul>\n<p>LINK SOLU\u00c7\u00c3O DIGITAL (EXCETO ALGETEC): https:\/\/colab.google\/<\/p>\n<p>O Google Colab, ou Colaboratory, \u00e9 uma plataforma gratuita baseada na nuvem oferecida pelo<\/p>\n<p>Google. Ela fornece um ambiente de notebook interativo e colaborativo que permite a cria\u00e7\u00e3o e<\/p>\n<p>execu\u00e7\u00e3o de c\u00f3digo diretamente no navegador, sem a necessidade de configurar ou instalar<\/p>\n<p>qualquer software no seu computador.<\/p>\n<p>PROCEDIMENTO\/ATIVIDADE<\/p>\n<p>ATIVIDADE PROPOSTA:<\/p>\n<ul>\n<li>Nesta atividade, vamos criar um jogo simples de &#8220;Jokenp\u00f4&#8221; (pedra, papel, tesoura) utilizando<\/li>\n<\/ul>\n<p>HTML, CSS e JavaScript. O jogo permitir\u00e1 ao usu\u00e1rio escolher uma das op\u00e7\u00f5es (pedra,<\/p>\n<p>papel ou tesoura) e competir contra o computador. Utilizaremos eventos CSS para animar<\/p>\n<p>as escolhas e eventos HTML5 para capturar intera\u00e7\u00f5es do usu\u00e1rio.<\/p>\n<p>PROCEDIMENTOS PARA A REALIZA\u00c7\u00c3O DA ATIVIDADE:<\/p>\n<p>Estrutura do Projeto:<\/p>\n<ol>\n<li>Crie um arquivo HTML com a estrutura b\u00e1sica.<\/li>\n<\/ol>\n<ul>\n<li>Campos para escolher entre pedra, papel ou tesoura<\/li>\n<li>Campo resultado<\/li>\n<li>Bot\u00e3o para reiniciar<\/li>\n<\/ul>\n<ol start=\"2\">\n<li>Use CSS para estilizar o jogo e criar anima\u00e7\u00f5es simples.<\/li>\n<\/ol>\n<ul>\n<li>Utilize sua criatividade<\/li>\n<\/ul>\n<ol start=\"3\">\n<li>Utilize JavaScript para implementar a l\u00f3gica do jogo e intera\u00e7\u00f5es com o usu\u00e1rio.<\/li>\n<\/ol>\n<ul>\n<li>Pedra ganha da tesoura, perde para o papel.<\/li>\n<li>Papel ganha da pedra, perde para a tesoura.<\/li>\n<li>Tesoura ganha do papel, perde para a pedra.<\/li>\n<\/ul>\n<p>CHECKLIST:<\/p>\n<ul>\n<li>Criar um arquivo HTML com a estrutura b\u00e1sica para o jogo.<\/li>\n<li>Utilizar CSS para estilizar o jogo e criar anima\u00e7\u00f5es simples.<\/li>\n<li>Implementar JavaScript para a l\u00f3gica do jogo e intera\u00e7\u00f5es com o usu\u00e1rio.<\/li>\n<li>Testar e ajustar a funcionalidade do jogo conforme necess\u00e1rio.<\/li>\n<\/ul>\n<p>RESULTADOS<\/p>\n<p>Para comprovar a realiza\u00e7\u00e3o da atividade, \u00e9 necess\u00e1rio entregar um relat\u00f3rio no formato .docx ou<\/p>\n<p>.pdf, contendo:<\/p>\n<ul>\n<li>Todos os c\u00f3digo implementados em HTML, CSS e JavaScript.<\/li>\n<li>Prints das telas do navegador executando a atividade.<\/li>\n<\/ul>\n<p>RESULTADOS DE APRENDIZAGEM:<\/p>\n<p>Esta atividade pr\u00e1tica permite aos alunos aplicarem seus conhecimentos em HTML, CSS e<\/p>\n<p>JavaScript para criar um jogo interativo completo de &#8220;Jokenp\u00f4&#8221;. Tendo a oportunidade de praticar a<\/p>\n<p>manipula\u00e7\u00e3o de eventos HTML5 para intera\u00e7\u00f5es do usu\u00e1rio e de explorar o uso de transi\u00e7\u00f5es CSS<\/p>\n<p>para melhorar a experi\u00eancia visual do jogo e expandir o projeto, adicionando novas funcionalidades<\/p>\n<p>e personaliza\u00e7\u00f5es para enriquecer ainda mais a experi\u00eancia de jogo.<\/p>\n<p>DESENVOLVIMENTO EM JAVASCRIPT<\/p>\n<p><strong>ROTEIRO DE AULA PR\u00c1TICA<\/strong><\/p>\n<p><strong>NOME DA DISCIPLINA: DESENVOLVIMENTO EM JAVASCRIPT<\/strong><\/p>\n<p><strong>Unidade: 4 \u2013 Frameworks &#8211; Bibliotecas para Desenvolvimento em JavaScript<\/strong><\/p>\n<p><strong>Aula: 2 \u2013 Angular<\/strong><\/p>\n<p>OBJETIVOS<\/p>\n<p>\u2713 Criar um projeto simples em Angular para praticar a cria\u00e7\u00e3o de componentes e m\u00f3dulos.<\/p>\n<p>\u2713 Configurar o ambiente de desenvolvimento inicial para Angular.<\/p>\n<p>SOLU\u00c7\u00c3O DIGITAL<\/p>\n<ul>\n<li>Visual Studio Code<\/li>\n<\/ul>\n<p>LINK SOLU\u00c7\u00c3O DIGITAL (EXCETO ALGETEC): https:\/\/code.visualstudio.com\/download<\/p>\n<p>Visual Studio Code (VS Code) \u00e9 um editor de c\u00f3digo-fonte desenvolvido pela Microsoft,<\/p>\n<p>amplamente utilizado por desenvolvedores de software devido \u00e0 sua versatilidade e performance.<\/p>\n<p>PROCEDIMENTO\/ATIVIDADE<\/p>\n<p>ATIVIDADE PROPOSTA:<\/p>\n<ul>\n<li>Desenvolver um site simples utilizando Angular, focando na cria\u00e7\u00e3o de componentes,<\/li>\n<\/ul>\n<p>m\u00f3dulos e na configura\u00e7\u00e3o inicial do ambiente.<\/p>\n<p>PROCEDIMENTOS PARA A REALIZA\u00c7\u00c3O DA ATIVIDADE:<\/p>\n<p>Passo 1: Configurando o ambiente<\/p>\n<p>Node.js e npm: Verifique se o Node.js est\u00e1 instalado. O Angular requer o Node.js vers\u00e3o 12.x ou<\/p>\n<p>superior e o npm (gerenciador de pacotes do Node.js).<\/p>\n<ul>\n<li>Instale o Node.js em nodejs.org.<\/li>\n<\/ul>\n<p>Instala\u00e7\u00e3o do Angular CLI: O Angular CLI (Command Line Interface) facilita a cria\u00e7\u00e3o e a<\/p>\n<p>configura\u00e7\u00e3o de projetos Angular.<\/p>\n<ul>\n<li>Abra o terminal (ou prompt de comando) e execute o seguinte comando:<\/li>\n<\/ul>\n<p>npm install -g @angular\/cli<\/p>\n<p>\u25cb Isso instala o Angular CLI globalmente na sua m\u00e1quina.<\/p>\n<p>3<\/p>\n<p>Passo 2: Criando um Novo Projeto Angular<\/p>\n<ol>\n<li>Cria\u00e7\u00e3o do Projeto: Agora seu ambiente est\u00e1 pronto para criar um novo projeto Angular.<\/li>\n<\/ol>\n<p>\u25cb No terminal, execute o comando:<\/p>\n<p>ng new nome-do-seu-projeto<\/p>\n<p>\u25cb Substitua nome-do-seu-projeto pelo nome escolhido por voc\u00ea para o seu projeto.<\/p>\n<ol start=\"2\">\n<li>Sele\u00e7\u00e3o de Recursos: Durante o processo de cria\u00e7\u00e3o do projeto, o Angular CLI far\u00e1 algumas<\/li>\n<\/ol>\n<p>perguntas sobre recursos opcionais como o roteamento e o estilo de CSS a ser usado.<\/p>\n<p>Escolha de acordo com suas necessidades ou mantenha sem alterar os par\u00e2metros.<\/p>\n<ol start=\"3\">\n<li>Acessando o Projeto: Ap\u00f3s a cria\u00e7\u00e3o, navegue para o diret\u00f3rio do projeto:<\/li>\n<\/ol>\n<p>\u25cb cd nome-do-seu-projeto<\/p>\n<p>Passo 3: Entendendo Componentes e M\u00f3dulos<\/p>\n<ol>\n<li>Componentes: Os componentes s\u00e3o os blocos de constru\u00e7\u00e3o b\u00e1sicos de uma aplica\u00e7\u00e3o<\/li>\n<\/ol>\n<p>Angular. Eles consistem em uma classe TypeScript que define o comportamento do<\/p>\n<p>componente e um template HTML que define sua apar\u00eancia.<\/p>\n<p>\u25cb Para criar um componente, use o Angular CLI:<\/p>\n<p>ng generate component nome-do-seu-componente<\/p>\n<p>\u25cb Isso criar\u00e1 automaticamente arquivos para o componente (arquivo TypeScript,<\/p>\n<p>HTML, CSS, etc.) e registrar\u00e1 o componente em um m\u00f3dulo.<\/p>\n<ol start=\"2\">\n<li>M\u00f3dulos: Os m\u00f3dulos no Angular s\u00e3o containers que agrupam componentes, diretivas, pipes<\/li>\n<\/ol>\n<p>e servi\u00e7os relacionados, formando um contexto de funcionalidade.<\/p>\n<p>\u25cb O m\u00f3dulo principal de um projeto Angular \u00e9 o AppModule, que \u00e9 criado<\/p>\n<p>automaticamente durante a cria\u00e7\u00e3o do projeto.<\/p>\n<p>\u25cb Para criar um novo m\u00f3dulo, use o Angular CLI:<\/p>\n<p>ng generate module nome-do-seu-modulo<\/p>\n<p>\u25cb Isso criar\u00e1 um novo m\u00f3dulo que voc\u00ea pode usar para organizar e encapsular<\/p>\n<p>funcionalidades espec\u00edficas da sua aplica\u00e7\u00e3o.<\/p>\n<p>Passo 4: Executando o Projeto<\/p>\n<ol>\n<li>Servidor de Desenvolvimento: O Angular CLI inclui um servidor de desenvolvimento<\/li>\n<\/ol>\n<p>embutido.<\/p>\n<p>4<\/p>\n<p>\u25cb No terminal, dentro do diret\u00f3rio do seu componente, execute:<\/p>\n<p>npm start<\/p>\n<p>\u25cb Isso compilar\u00e1 seu projeto e iniciar\u00e1 um servidor de desenvolvimento. Por padr\u00e3o,<\/p>\n<p>ele estar\u00e1 dispon\u00edvel em http:\/\/localhost:4200\/. A porta 4200 \u00e9 a porta padr\u00e3o do<\/p>\n<p>Angular.<\/p>\n<ol start=\"2\">\n<li>Visualizando no Navegador: Abra seu navegador e v\u00e1 para http:\/\/localhost:4200\/ para<\/li>\n<\/ol>\n<p>visualizar seu aplicativo Angular em execu\u00e7\u00e3o.<\/p>\n<p>CHECKLIST:<\/p>\n<ul>\n<li>Instala\u00e7\u00e3o do Angular CLI globalmente.<\/li>\n<li>Cria\u00e7\u00e3o de um novo projeto Angular com o Angular CLI.<\/li>\n<li>Cria\u00e7\u00e3o de componentes utilizando o Angular CLI.<\/li>\n<li>Configura\u00e7\u00e3o b\u00e1sica do projeto Angular com o arquivo \u2019angular.json\u2019.<\/li>\n<li>Execu\u00e7\u00e3o do projeto Angular localmente para teste.<\/li>\n<\/ul>\n<p>RESULTADOS<\/p>\n<p>Para comprovar a realiza\u00e7\u00e3o da atividade, \u00e9 necess\u00e1rio entregar um relat\u00f3rio no formato .docx ou<\/p>\n<p>.pdf, contendo:<\/p>\n<ul>\n<li>Todos os c\u00f3digo implementados em HTML, CSS e JavaScript(Caso necess\u00e1rio).<\/li>\n<li>Prints das telas do navegador executando a atividade.<\/li>\n<\/ul>\n<p>RESULTADOS DE APRENDIZAGEM:<\/p>\n<p>Esta atividade pr\u00e1tica proporciona uma introdu\u00e7\u00e3o pr\u00e1tica ao Angular, destacando a cria\u00e7\u00e3o de<\/p>\n<p>componentes e a configura\u00e7\u00e3o inicial do ambiente de desenvolvimento.<\/p>\n<p>Os alunos aprender\u00e3o a usar o Angular CLI para gerar componentes rapidamente e configurar um<\/p>\n<p>projeto Angular b\u00e1sico para desenvolvimento.<\/p>\n<div class=\"elementor-toggle-item\">\n<p id=\"elementor-tab-title-1941\" class=\"elementor-tab-title elementor-active\" tabindex=\"0\" role=\"tab\" data-tab=\"1\" aria-controls=\"elementor-tab-content-1941\" aria-expanded=\"true\" aria-selected=\"true\"><strong>Como funciona?<\/strong><\/p>\n<p>Elaboramos os portf\u00f3lios, j\u00e1 deixamos prontos, nas normas da ABNT e conforme os requisitos da universidade. F\u00e1cil assim! O MELHOR \u00c9 QUE VOC\u00ca COMPRA E J\u00c1 BAIXA NA HORA O SEU ARQUIVO EM WORD! Sabemos que conciliar trabalho, fam\u00edlia, vida profissional e estudos \u00e9 dif\u00edcil hoje em dia, por isso, estamos aqui para ajudar voc\u00ea. Conte com nossa qualidade, experi\u00eancia e profissionalismo adquirindo seu portf\u00f3lio conosco. GARANTIMOS SEU CONCEITO!<\/p>\n<p><strong>Como se realizam os envios?<\/strong><\/p>\n<\/div>\n<p id=\"elementor-tab-content-1942\" class=\"elementor-tab-content elementor-clearfix elementor-active\" role=\"tabpanel\" data-tab=\"2\" aria-labelledby=\"elementor-tab-title-1942\">O seu trabalho \u00e9 disponibilizado pronto, respondido e nas normas j\u00e1 na mesma hora aqui em nosso site na sua \u00e1rea de downloads e tamb\u00e9m no seu e-mail.<\/p>\n<p><strong>Em quanto tempo recebo o portf\u00f3lio?<\/strong><\/p>\n<p>Os envios s\u00e3o imediatos. Ap\u00f3s sua compra, o trabalho j\u00e1 \u00e9 disponibilizado instantaneamente aqui em nosso site e no seu e-mail.<\/p>\n<p><strong>E se o portf\u00f3lio que comprei precisar de corre\u00e7\u00e3o?<\/strong><\/p>\n<p>Caso haja alguma solicita\u00e7\u00e3o de corre\u00e7\u00e3o\/altera\u00e7\u00e3o por parte do tutor, basta entrar em contato conosco pelo\u00a0WhatsApp\u00a0que provid\u00eanciaremos sem custo algum.<\/p>\n<p><strong>Qual o formato do arquivo?<\/strong><\/p>\n<p>Os arquivos s\u00e3o enviados em formato Word e s\u00e3o edit\u00e1veis.<\/p>\n<p><strong>Caso eu tiver alguma d\u00favida, terei suporte no p\u00f3s venda?<\/strong><\/p>\n<p>Sim, com certeza. Basta clicar no \u00edcone do WhatsApp no cantinho da tela. Ser\u00e1 um prazer atend\u00ea-lo(a).<\/p>\n<div id=\"elementor-tab-content-1948\" class=\"elementor-tab-content elementor-clearfix elementor-active\" role=\"tabpanel\" data-tab=\"8\" aria-labelledby=\"elementor-tab-title-1948\">\n<p><strong>Quais os seus canais de contato?<\/strong><\/p>\n<\/div>\n<div id=\"elementor-tab-content-1949\" class=\"elementor-tab-content elementor-clearfix elementor-active\" role=\"tabpanel\" data-tab=\"9\" aria-labelledby=\"elementor-tab-title-1949\">\n<p>Whatsapp: 53 984751621 \u2013 Clicar no canto da tela ou ESCANEIE O QRCODE ABAIXO<\/p>\n<h4><img decoding=\"async\" class=\"alignnone wp-image-13699 jetpack-lazy-image jetpack-lazy-image--handled\" src=\"https:\/\/i0.wp.com\/portifolioos-prontos.com\/wp-content\/uploads\/2023\/02\/whatsapp-business-projeto-de-extensao-300x300.jpeg?resize=144%2C144\" sizes=\"(max-width: 144px) 100vw, 144px\" srcset=\"https:\/\/i0.wp.com\/portifolioos-prontos.com\/wp-content\/uploads\/2023\/02\/whatsapp-business-projeto-de-extensao.jpeg?resize=300%2C301&amp;ssl=1 300w, https:\/\/i0.wp.com\/portifolioos-prontos.com\/wp-content\/uploads\/2023\/02\/whatsapp-business-projeto-de-extensao.jpeg?resize=150%2C150&amp;ssl=1 150w, https:\/\/i0.wp.com\/portifolioos-prontos.com\/wp-content\/uploads\/2023\/02\/whatsapp-business-projeto-de-extensao.jpeg?resize=370%2C372&amp;ssl=1 370w, https:\/\/i0.wp.com\/portifolioos-prontos.com\/wp-content\/uploads\/2023\/02\/whatsapp-business-projeto-de-extensao.jpeg?resize=100%2C100&amp;ssl=1 100w, https:\/\/i0.wp.com\/portifolioos-prontos.com\/wp-content\/uploads\/2023\/02\/whatsapp-business-projeto-de-extensao.jpeg?w=470&amp;ssl=1 470w\" alt=\"projeto de extens\u00e3o unopar\" width=\"144\" height=\"144\" data-lazy-loaded=\"1\" \/><\/h4>\n<\/div>\n<div class=\"elementor-toggle-item\">\n<div id=\"elementor-tab-content-1949\" class=\"elementor-tab-content elementor-clearfix elementor-active\" role=\"tabpanel\" data-tab=\"9\" aria-labelledby=\"elementor-tab-title-1949\">\n<p>E-mail:portifoliosp@gmail.com<\/p>\n<div id=\"attachment_143\" class=\"wp-caption alignnone\">\n<div id=\"attachment_143\" class=\"wp-caption alignnone\">\n<p id=\"caption-attachment-143\" class=\"wp-caption-text\"><a href=\"http:\/\/portfolio-pronto.com\/\">Portf\u00f3lio<\/a>\u00a0em Word, respondido, completo e j\u00e1 nas normas<\/p>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n","protected":false},"excerpt":{"rendered":"<div class=\"product-short-description\">\n<p><strong>Pague pelo PIX ou cart\u00e3o e fa\u00e7a o download agora mesmo.<\/strong><\/p>\n<\/div>\n<div class=\"sticky-add-to-cart-wrapper\">\n<div class=\"sticky-add-to-cart\">\n<p class=\"quantity buttons_added form-flat\"><img decoding=\"async\" class=\"lazyloaded smush-image-5 smush-image-3 smush-image-4 smush-detected-img smush-image-bigger-3\" src=\"https:\/\/d26lpennugtm8s.cloudfront.net\/assets\/common\/img\/logos\/payment\/visa@2x.png\" width=\"46\" height=\"29\" data-src=\"https:\/\/d26lpennugtm8s.cloudfront.net\/assets\/common\/img\/logos\/payment\/visa@2x.png\" \/><img decoding=\"async\" class=\"lazyloaded smush-image-6 smush-image-4 smush-image-5 smush-detected-img smush-image-bigger-4\" src=\"https:\/\/d26lpennugtm8s.cloudfront.net\/assets\/common\/img\/logos\/payment\/boleto@2x.png\" width=\"43\" height=\"27\" data-src=\"https:\/\/d26lpennugtm8s.cloudfront.net\/assets\/common\/img\/logos\/payment\/boleto@2x.png\" \/><img loading=\"lazy\" decoding=\"async\" class=\"lazyloaded smush-image-7 smush-image-5 smush-image-6 smush-detected-img smush-image-bigger-5\" src=\"https:\/\/d26lpennugtm8s.cloudfront.net\/assets\/common\/img\/logos\/payment\/mastercard@2x.png\" width=\"43\" height=\"27\" data-src=\"https:\/\/d26lpennugtm8s.cloudfront.net\/assets\/common\/img\/logos\/payment\/mastercard@2x.png\" \/><img loading=\"lazy\" decoding=\"async\" class=\"lazyloaded smush-image-8 smush-image-6 smush-image-7 smush-detected-img smush-image-bigger-6\" src=\"https:\/\/d26lpennugtm8s.cloudfront.net\/assets\/common\/img\/logos\/payment\/amex@2x.png\" width=\"43\" height=\"27\" data-src=\"https:\/\/d26lpennugtm8s.cloudfront.net\/assets\/common\/img\/logos\/payment\/amex@2x.png\" \/><img loading=\"lazy\" decoding=\"async\" class=\"lazyloaded smush-image-9 smush-image-7 smush-image-8 smush-detected-img smush-image-bigger-7\" src=\"https:\/\/d26lpennugtm8s.cloudfront.net\/assets\/common\/img\/logos\/payment\/diners@2x.png\" width=\"46\" height=\"29\" data-src=\"https:\/\/d26lpennugtm8s.cloudfront.net\/assets\/common\/img\/logos\/payment\/diners@2x.png\" \/><img loading=\"lazy\" decoding=\"async\" class=\"lazyloaded smush-image-10 smush-image-8 smush-image-9 alignnone smush-detected-img smush-image-bigger-8\" src=\"https:\/\/d26lpennugtm8s.cloudfront.net\/assets\/common\/img\/logos\/payment\/br\/elo@2x.png\" alt=\"portf\u00f3lio unopar anhanguera\" width=\"45\" height=\"28\" data-src=\"https:\/\/d26lpennugtm8s.cloudfront.net\/assets\/common\/img\/logos\/payment\/br\/elo@2x.png\" \/><img loading=\"lazy\" decoding=\"async\" class=\"lazyloaded smush-image-11 smush-image-9 smush-image-10 alignnone smush-detected-img smush-image-bigger-9\" src=\"https:\/\/d26lpennugtm8s.cloudfront.net\/assets\/common\/img\/logos\/payment\/br\/hipercard@2x.png\" alt=\"portf\u00f3lio unopar anhanguera\" width=\"44\" height=\"28\" data-src=\"https:\/\/d26lpennugtm8s.cloudfront.net\/assets\/common\/img\/logos\/payment\/br\/hipercard@2x.png\" \/><img loading=\"lazy\" decoding=\"async\" class=\"lazyloaded smush-image-12 smush-image-10 smush-image-11 alignnone smush-detected-img smush-image-bigger-10\" src=\"https:\/\/d26lpennugtm8s.cloudfront.net\/assets\/common\/img\/logos\/payment\/mercadopago@2x.png\" alt=\"portf\u00f3lio unopar anhanguera\" width=\"45\" height=\"28\" data-src=\"https:\/\/d26lpennugtm8s.cloudfront.net\/assets\/common\/img\/logos\/payment\/mercadopago@2x.png\" \/><img loading=\"lazy\" decoding=\"async\" class=\"alignnone lazyloaded smush-detected-img smush-image-bigger-11\" src=\"https:\/\/futurium.com.br\/wp-content\/uploads\/2021\/06\/logo-pix-icone-512.png\" alt=\"portfolio pronto\" width=\"30\" height=\"30\" data-src=\"https:\/\/futurium.com.br\/wp-content\/uploads\/2021\/06\/logo-pix-icone-512.png\" \/><\/p>\n<\/div>\n<\/div>\n","protected":false},"featured_media":46710,"template":"","meta":{"_seopress_robots_primary_cat":"","_seopress_titles_title":"","_seopress_titles_desc":"","_seopress_robots_index":""},"product_cat":[15],"product_tag":[],"class_list":{"0":"post-46708","1":"product","2":"type-product","3":"status-publish","4":"has-post-thumbnail","6":"product_cat-uncategorized","8":"first","9":"instock","10":"shipping-taxable","11":"purchasable","12":"product-type-simple","13":"col-xs-6 col-sm-4","14":"col-mf-5","15":"un-5-cols"},"jetpack_sharing_enabled":true,"_links":{"self":[{"href":"https:\/\/portifolioos-prontos.com\/index.php\/wp-json\/wp\/v2\/product\/46708","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/portifolioos-prontos.com\/index.php\/wp-json\/wp\/v2\/product"}],"about":[{"href":"https:\/\/portifolioos-prontos.com\/index.php\/wp-json\/wp\/v2\/types\/product"}],"version-history":[{"count":1,"href":"https:\/\/portifolioos-prontos.com\/index.php\/wp-json\/wp\/v2\/product\/46708\/revisions"}],"predecessor-version":[{"id":46711,"href":"https:\/\/portifolioos-prontos.com\/index.php\/wp-json\/wp\/v2\/product\/46708\/revisions\/46711"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/portifolioos-prontos.com\/index.php\/wp-json\/wp\/v2\/media\/46710"}],"wp:attachment":[{"href":"https:\/\/portifolioos-prontos.com\/index.php\/wp-json\/wp\/v2\/media?parent=46708"}],"wp:term":[{"taxonomy":"product_cat","embeddable":true,"href":"https:\/\/portifolioos-prontos.com\/index.php\/wp-json\/wp\/v2\/product_cat?post=46708"},{"taxonomy":"product_tag","embeddable":true,"href":"https:\/\/portifolioos-prontos.com\/index.php\/wp-json\/wp\/v2\/product_tag?post=46708"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}