Boas-vindas a mais um curso de Angular na Alura! Eu sou o Charleston Campos.
Audiodescrição: Charleston é um homem negro com cabelo curto preto e barba preta, vestindo uma camiseta escura. Ao fundo, parede com estante, vários elementos decorativos e luminosos, e uma iluminação azul arroxeada.
Neste curso, vamos transformar uma aplicação que é nativamente web em uma PWA, a ser executada tanto no desktop quanto no mobile, sendo que neste há a vantagem de executarmos a aplicação como se ela fosse nativa.
Trabalharemos com base no método Pomodoro, utilizado na aplicação chamada NG Fokus. Essa aplicação implementa muito bem o método Pomodoro, que consiste em intercalar um período de tempo para focar em uma determinada tarefa e outro para descanso curto ou longo. Assim, conseguimos produzir mais e garantir o foco exatamente na tarefa que precisa ser feita naquele momento.
Teremos a aplicação sendo executada, e aprenderemos como conseguimos dividir os grupos de descanso longo, descanso curto e também o momento de foco. O mais interessante é que, no desenvolvimento dessa aplicação, você aprenderá diversas técnicas voltadas para o desenvolvimento web e utilizará várias ferramentas do ecossistema Angular no dia a dia de trabalho.
É importante realizar o curso com afinco para entender todas as ferramentas disponíveis. Para isso, é interessante ter os pré-requisitos:
Isso facilitará a implementação de todas as aulas do curso. Espero você para transformarmos essa aplicação web em uma PWA que terá a aparência de um aplicativo nativo nos dispositivos móveis. Até lá!
Neste curso, vamos focar na aplicação NG Fokus, voltada para a implementação do método Pomodoro, que consiste em manter o foco em uma tarefa por um determinado tempo, seguido de um período de pausa. A configuração padrão do Pomodoro é de 25 minutos de foco, seguidos por um tempo de descanso, ajustado conforme necessidade.
Para entender melhor a aplicação, vamos abri-la no Google Chrome, onde ela está rodando com Angular. A NG Fokus possui uma interface simples, com um contador que permite iniciar o tempo de foco, descanso curto ou descanso longo. O contador é configurado para o tempo necessário para cada atividade. No aplicativo, trabalharemos com segundos, mas essa configuração pode ser alterada para minutos, conforme desejado.
Essa aplicação já foi utilizada em outros cursos da Alura: foi originalmente desenvolvida em JavaScript por Vini, e adaptada para Angular neste curso, e vamos transformá-la em um PWA (Progressive Web App). Para compreender melhor seu funcionamento, podemos acompanhar as telas no Figma, para visualizar a lista de tarefas e entender como cadastrá-las.
Ao adicionarmos uma nova tarefa, poderemos definir o foco para resolvê-la no tempo estipulado, dividindo-a em subtarefas caso necessário. Após concluir, é possível iniciar o tempo de descanso. A aplicação, originalmente web, pode ser utilizada em diversos dispositivos, como computadores e celulares.
A NG Fokus é uma aplicação simples, mas rica em conteúdo, conforme exploraremos ao longo do curso. Vamos trabalhar em diversos aspectos importantes para entender como um PWA se torna essencial no uso diário de um aplicativo. Também codificaremos e implementaremos funcionalidades presentes nas principais aplicações do mercado, algo crucial para direcionar o desenvolvimento da aplicação.
Para continuar, vamos transformar nossa aplicação Angular em um PWA. Nos vemos na sequência. Até já!
Já conhecemos brevemente a aplicação com a qual trabalharemos ao longo deste curso, então, antes de transformar a NG Fokus em uma PWA, é importante conhecermos também o código que utilizaremos ao longo do curso. No VSCode, tenha o projeto clonado em suas máquinas para que possam acompanhar o processo de configuração.
Quem tiver familiaridade com o Angular entenderá a divisão de diretórios no projeto. Não há nada muito fora do usual, pois a aplicação é simples, mas é importante compreender onde estão alguns pontos e componentes principais antes de transformá-la em uma PWA. À esquerda, no VSCode, temos a árvore de arquivos com todas as partes do projeto. Na pasta "src" estarão as pastas "app", "assets" e "styles".
Ao longo do curso, trabalharemos na pasta "app", em que identificaremos os componentes e as services (serviços) que utilizaremos no projeto. Ainda nessa pasta, encontraremos "shared" e "components", com todos os componentes utilizados na aplicação, além da pasta "services".
É importante se familiarizar com a árvore de diretórios e arquivos do projeto para saber exatamente em qual arquivo estamos trabalhando. Vamos parar a execução da aplicação no terminal pressionando "Ctrl + C", em seguida, faremos a instalação do PWA para realizar a transformação mencionada anteriormente.
Se estiverem utilizando Windows, o atalho para abrir o terminal é "Ctrl + "". Vamos adicionar o PWA à aplicação Angular, NG Fokus, digitando:
ng add @angular/pwa --project=ng-fokus
Pressionaremos Enter e aguardaremos a instalação do pacote. O terminal perguntará se desejamos proceder com a instalação do PWA, e confirmaremos a instalação do pacote. Note que o pacote a ser instalado é do Angular 17, mas estamos utilizando o Angular 18.
Recomendamos que instalem a CLI do Angular 18 em suas máquinas para acompanhar o curso de forma a não haver problemas. Este projeto funcionará nas versões 17 e 16, mas é interessante trabalhar com a mesma versão para evitar complicações ao implementar o código.
Verifiquem também a versão do Node. Para que o Angular funcione perfeitamente nas versões 18 e 17, é interessante utilizar pelo menos a versão 20 do NPM para evitar problemas de compatibilidade. É crucial conferir a atividade de preparação do ambiente, pois nela estão todas as configurações necessárias para executarmos o projeto com sucesso. Tanto o repositório quanto as versões do Node, NPM e Angular utilizadas no projeto devem ser conferidos.
Voltando ao terminal, teremos que o PWA foi adicionado ao projeto. A instalação do pacote é simples e o Angular é integrado ao projeto. Checando a árvore de arquivos no Git do VSCode, é possível conferir os arquivos adicionados pelo Angular ao projeto, por meio do schematics para tais alterações automáticas, facilitando nosso trabalho. Isso é um grande avanço.
O Angular modificará o arquivo angular.json, adicionará algumas execuções e gerará novos arquivos e ícones, os quais são utilizados para notificações no navegador, na instalação da aplicação, e em diferentes ocasiões. Podemos configurar tudo isso através do nosso manifest, onde colocamos todas as configurações específicas da PWA. No VSCode, fica explícito o que precisamos fazer ou modificar na aplicação.
Se executarmos novamente o projeto digitando ng serve no terminal, poderemos conferir uma pequena mudança na aplicação. Abriremos a aplicação novamente ao clicarmos no link do localhost fornecido (http://localhost:4200) junto com "Ctrl": a aplicação é executada com sucesso, agora capaz de ser instalada. Poderemos clicar no ícone para download na barra de endereço do navegador e instalar a NG Fokus. Após a instalação, a aplicação é executada como um PWA, com aparência de aplicação nativa.
No computador, a aparência de um PWA pode não ser tão óbvia, mas ao instalar no celular, temos a sensação de estar utilizando uma aplicação nativa do ecossistema, seja iOS ou Android. A execução é diferente, sem a barra de endereço no topo da página, e a aplicação tem aparência de aplicação nativa. Nota-se a diferença entre uma aplicação com PWA e uma aplicação web comum.
Trabalharemos para adicionar novas funcionalidades à NG Fokus, mais relacionadas à execução de uma PWA do que a de um aplicativo web comum. Nos vemos na sequência.
O curso Angular: transformando uma aplicação web em PWA possui 179 minutos de vídeos, em um total de 51 atividades. Gostou? Conheça nossos outros cursos de Angular em Front-end, ou leia nossos artigos de Front-end.
Matricule-se e comece a estudar com a gente hoje! Conheça outros tópicos abordados durante o curso:
Impulsione a sua carreira com os melhores cursos e faça parte da maior comunidade tech.
1 ano de Alura
Assine o PLUS e garanta:
Formações com mais de 1500 cursos atualizados e novos lançamentos semanais, em Programação, Inteligência Artificial, Front-end, UX & Design, Data Science, Mobile, DevOps e Inovação & Gestão.
A cada curso ou formação concluído, um novo certificado para turbinar seu currículo e LinkedIn.
No Discord, você tem acesso a eventos exclusivos, grupos de estudos e mentorias com especialistas de diferentes áreas.
Faça parte da maior comunidade Dev do país e crie conexões com mais de 120 mil pessoas no Discord.
Acesso ilimitado ao catálogo de Imersões da Alura para praticar conhecimentos em diferentes áreas.
Explore um universo de possibilidades na palma da sua mão. Baixe as aulas para assistir offline, onde e quando quiser.
Acelere o seu aprendizado com a IA da Alura e prepare-se para o mercado internacional.
1 ano de Alura
Todos os benefícios do PLUS e mais vantagens exclusivas:
Luri é nossa inteligência artificial que tira dúvidas, dá exemplos práticos, corrige exercícios e ajuda a mergulhar ainda mais durante as aulas. Você pode conversar com a Luri até 100 mensagens por semana.
Aprenda um novo idioma e expanda seus horizontes profissionais. Cursos de Inglês, Espanhol e Inglês para Devs, 100% focado em tecnologia.
Transforme a sua jornada com benefícios exclusivos e evolua ainda mais na sua carreira.
1 ano de Alura
Todos os benefícios do PRO e mais vantagens exclusivas:
Mensagens ilimitadas para estudar com a Luri, a IA da Alura, disponível 24hs para tirar suas dúvidas, dar exemplos práticos, corrigir exercícios e impulsionar seus estudos.
Envie imagens para a Luri e ela te ajuda a solucionar problemas, identificar erros, esclarecer gráficos, analisar design e muito mais.
Escolha os ebooks da Casa do Código, a editora da Alura, que apoiarão a sua jornada de aprendizado para sempre.