Para conclusão
Nesta formação, você vai desenvolver do zero, no Angular, um Design System 100% completo!
Aprenda a utilizar ferramentas do mercado como o Nx, Storybook e GitHub Actions para implementar componentes e bibliotecas e aumentar a eficiência, acelerar o trabalho, alinhar mais o time e reduzir retrabalho e trabalhos manuais.
Vamos começar pelo NX e um monorepo (ou mono-repositório), que organiza múltiplas aplicações e bibliotecas em um único repositório, facilitando a colaboração e a manutenção de código em larga escala. Você aprenderá como configurar e gerenciar este ambiente, criando uma base sólida para o desenvolvimento de componentes reutilizáveis.
Em seguida, exploraremos como criar e publicar bibliotecas dentro desse monorepo para compartilhar e reutilizar o seu design system em diferentes projetos.
O Storybook será a nossa ferramenta principal para documentar e visualizar os componentes. Você aprenderá a configurar e integrar o Storybook ao Angular e ao Nx, criando um catálogo interativo e dinâmico de componentes. E tem mais! Vamos documentar variantes e estados de componentes, assegurando que ambos os times de design e de desenvolvimento tenham uma visão clara do projeto.
Para fechar com chave de ouro, vamos utilizar o GitHub Actions para implementar CI/CD (Integração Contínua e Entrega Contínua) no nosso Design System, o que aumenta a produtividade e reduz tempo e recursos em tarefas do dia a dia. Vamos automatizar as tarefas do Nx, a publicação do Storybook, os testes visuais do Chromatic e a publicação dos componentes no NPM.
Ao final dessa formação, você terá desenvolvido um Design System completo, pronto para ser aplicado em projetos reais, incluindo casos de componentes compelxo, recursos avançados do Nx e do Storybook e a implementação do CI/CD para automatizar o fluxo de trabalho.
Conteúdos pensados para facilitar seu estudo
Formação completa para o mercado
Do zero ao sonhado emprego em sua área de interesse
Comece essa formação agora mesmo e capacite-se para seu próximo projeto!
Conheça os planos
Instrutor e Desenvolvedor de Software nas escolas de Front-end e de Programação da Alura, com foco em JavaScript. Sou técnico em Informática pelo IFPI e cursei Engenharia Elétrica na UFPI. Sou apaixonado por desenvolvimento web e por compartilhar conhecimento de forma encantadora. No tempo livre, assisto séries, filmes e animes.
Instrutor e Desenvolvedor de Software nas escolas de Front-end e de Programação da Alura, com foco em JavaScript. Sou técnico em Informática pelo IFPI e cursei Engenharia Elétrica na UFPI. Sou apaixonado por desenvolvimento web e por compartilhar conhecimento de forma encantadora. No tempo livre, assisto séries, filmes e animes.
Product designer, instrutor de UX na Alura, pro player de Figma e especialista em Harry Potter.
Product designer, instrutor de UX na Alura, pro player de Figma e especialista em Harry Potter.
Neste primeiro passo, você aprenderá a utilizar o Nx para criar seu primeiro monorepo, facilitando o gerenciamento e a organização de múltiplos projetos em um único repositório.
Vamos iniciar a implementação do Design System utilizando o Storybook, onde você aprenderá a documentar e visualizar as variantes dos componentes Angular em um ambiente isolado.
E por fim, publicaremos a primeira biblioteca do monorepo no NPM, utilizando uma ferramenta do Nx - o Nx Release, para que a biblioteca possa ser utilizada por diferentes aplicações e pelo restante do mundo!
Curso Angular: construa um Design System com Nx e Storybook
08h
Site Design Systems - Hipsters #170 - Hipsters Ponto TechHipsters Ponto Tech
Artigo Design Systems: Entenda o que é e confira Exemplos | Alura
Alura+ Atomic design
Artigo Monorepo: como usá-lo para desenvolver e integrar grandes projetos | Alura
Artigo Monorepos descomplicados: explorando o NX | Alura
Artigo Versionamento Semântico (SemVer): uma breve introdução | Alura
Neste segundo passo, avançaremos no uso do Storybook e do Design System, implementando novos componentes e utilizando MDX para criar documentações que proporcionam uma comunicação clara e eficiente entre pessoas designers e desenvolvedoras.
Além disso, aprenderemos a lidar com a publicação de múltiplas bibliotecas com Nx Release, compreendendo diferentes abordagens, como utilizar uma política de versão única ou gerenciar diferentes versões.
Você também aprenderá a trabalhar com componentes compostos, ou seja, componentes formados a partir de outros. Você verá na prática como isso afeta a publicação dos componentes e a gestão de dependências entre eles.
Curso Angular: evolua a documentação do seu Design System com Nx e Storybook
08hArtigo Simplificando o controle de versão com Conventional Commits | Alura
Artigo Changelog: o guia do desenvolvedor para documentar e compreender alterações de software | Alura
Artigo Compartilhando CSS em projetos do Nx | Alura
Curso Angular e Storybook: crie componentes compostos em um Design System
10hNo final da sua jornada, você vai aplicar conhecimentos de DevOps no Design System!
Vamos aprender uma prática do mercado requisitada nas empresas: o CI/CD (Integração Contínua e Entrega Contínua) utilizando GitHub Actions para deixar o nosso monorepo ainda mais robusto!
Por fim, você vai ganhar mais tempo com aautomação de tarefas do Nx (como teste e lint). Acelere seu trabalho e saiba como automatizar a publicação do Storybook, a aplicação de testes visuais com Chromatic e a publicação dos componentes no NPM, utilizando os workflows do GitHub Actions.
Artigo DevOps: um guia sobre a cultura de desenvolvimento e operações | Alura
Curso Angular e GitHub Actions: aplique CI/CD no seu Design System
10hEscola
Além dessa, a categoria Front-end conta com cursos de HTML, CSS, React, Angular, JavaScript, jQuery,e mais...
Conheça a EscolaImpulsione 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.