{"id":25441027,"url":"https://github.com/cidaluna/mfe-angular","last_synced_at":"2025-11-01T11:30:35.033Z","repository":{"id":277828420,"uuid":"866801507","full_name":"cidaluna/mfe-angular","owner":"cidaluna","description":"Desafio micro frontend Angular com CRUD para livros e editoras","archived":false,"fork":false,"pushed_at":"2025-02-16T11:59:11.000Z","size":3998,"stargazers_count":2,"open_issues_count":0,"forks_count":0,"subscribers_count":1,"default_branch":"main","last_synced_at":"2025-02-16T12:27:51.405Z","etag":null,"topics":["angular","host-app","mfe-app","microfrontends"],"latest_commit_sha":null,"homepage":"","language":"TypeScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":null,"status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/cidaluna.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":null,"code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null}},"created_at":"2024-10-02T22:37:21.000Z","updated_at":"2025-02-16T11:59:14.000Z","dependencies_parsed_at":"2025-02-16T12:28:04.031Z","dependency_job_id":"54df9c62-25ee-435b-b9fc-e2fe421386c6","html_url":"https://github.com/cidaluna/mfe-angular","commit_stats":null,"previous_names":["cidaluna/mfe-angular"],"tags_count":0,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/cidaluna%2Fmfe-angular","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/cidaluna%2Fmfe-angular/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/cidaluna%2Fmfe-angular/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/cidaluna%2Fmfe-angular/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/cidaluna","download_url":"https://codeload.github.com/cidaluna/mfe-angular/tar.gz/refs/heads/main","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":239286266,"owners_count":19613689,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["angular","host-app","mfe-app","microfrontends"],"created_at":"2025-02-17T12:19:23.177Z","updated_at":"2025-11-01T11:30:35.005Z","avatar_url":"https://github.com/cidaluna.png","language":"TypeScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# Micro Frontend Angular \n\nMono repositório contendo duas aplicações Front-end Angular 16, gerenciadas pelo Module Federation.\nO micro frontend host-app é o orquestrador que atende na porta 4222 e mfe-app é a aplicação remota que expõe componentes no host-app e roda na porta 4333.\n\nO fluxo da aplicação inicia na página de boas vindas Home, permitindo o usuário clicar no link Login, inserindo as credenciais cida@app.com senha 1234, será direcionado para a listagem de livros, podendo inserir, atualizar e excluir livros. E nesta mesma listagem, existe o botão no canto superior direito ver editoras que permite a navegação para as operações de CRUD em localstorage relacionadas com as editoras.\n\n## Como rodar as aplicações micro frontend Angular:\n\n1. **Clone o repositório:**\n  ```bash\n    git clone https://github.com/cidaluna/mfe-angular.git\n  ```\n\n2. **Navegue no diretório principal**\n```bash\n  cd mfe-angular\n```\n\n3. **Navegue no diretório backend**\n  ```bash\n    cd backend\n  ```\n\n4. **Inicie a API Json Server**\n  ```bash \n    json-server --watch db.json --port 4000\n  ```\n\n5. **Abra um novo terminal no diretório do projeto e execute os comandos**\n  ```bash \n    npm install\n  ```\n\n6. **Execute a aplicação host-app**\n  ```bash \n    ng serve host-app \n  ```\n\n7. **Abra um novo terminal e execute a aplicação mfe-app**\n  ```bash \n    ng serve mfe-app \n  ```\n\nExemplo no terminal:  \n\n![Iniciando Host App](./projects/host-app/src/assets/start-host-app.PNG)\n\n7. **Navegue nas URLs que o comando anterior apresentou**\n\nHost-app: http://localhost:4222\n\nMfe-app:  http://localhost:4333\n\n\n## Como rodar os testes Jasmine/Karma:\n\n1. **Navegue no diretório da aplicação desejada**\n  ```bash\n    cd host-app\n  ```\n\n2. **Execute o comando**\n  ```bash\n    ng test\n  ```\n\n## Como rodar os testes Cypress/e2e:\n\n1. **Navegue até o diretório mfe-app**\n```bash\n   cd projects/mfe-app\n```\n\n2. **No diretório do micro frontend mfe-app, execute o comando**\n```bash\n  npx cypress open\n```\n\n3. **Será aberta uma tela, clique na opção E2E Testing**\n\n4. **Clique no navegador de sua preferência e clique em Start**\n\n5. **Clique em publishers.cy.js**\n\n6. **Acompanhe o resultado dos testes Cypress na tela**\n\n\nTestes com o Cypress E2E realizando CRUD Localstorage na tela de editoras:\n\n![Testes Cypress CRUD editoras](./projects/host-app/src/assets/mfe-cypress-crud-editoras.PNG)\n\n\n### Pre-Requisitos\n- Node.js 18\n- Angular CLI 16\n\n### Tecnologias\n\n- Angular 16, \n- Angular Material,\n- Webpack,\n- Module Federation,\n- Node.js,\n- Boostrap,\n- Ícones Angular Material,\n- JSON Server,\n- Jasmine Karma,\n- Cypress\n\n\n### Considerações sobre o desafio\n\nTive dificuldade ao tentar estabelecer a arquitetura proposta, especialmente na integração do Angular 17 com suas dependências, particularmente no que diz respeito ao Module Federation do Webpack. Como resultado, decidi explorar a versão 16 do Angular, onde consegui realizar a integração com sucesso. Essa abordagem alternativa me permitiu avançar no projeto e garantir a funcionalidade de carregar a modularização desejada.\n\n### Sobre o Backend\n\nCada micro frontend deve ter um service responsável pela comunicação com o backend, realizando chamadas HTTP para a API.\n\nAs URLs podem ser configuradas nos arquivos environment.ts e environment.prod.ts, facilitando a troca entre ambientes. Além disso, é possível implementar criptografia, autenticação, uso de tokens, configurar proxy entre outros para proteger as requisições, estabelecer a comunicação entre as aplicações e manter a segurança dos dados compartilhados.\n\nCom os services configurados, os componentes podem realizar as operações de manipulação de dados e renderizar na tela os módulos necessários, atendendo a arquitetura de modularidade e escalabilidade, considerando as regras de negócio do produto e proporcionando uma experiência agradável ao cliente.\n\n\nQuando o backend real estiver disponível, configuramos todos os arquivos de ambiente com as URLs corretas e realizamos os testes de ponta a ponta para garantir a integração do Frontend com o Backend nos ambientes de desenvolvimento, homologação e produção.\n\n\n### Documentação\n\nCriando o mono repositório:\n\n`ng new mfe-angular --create-application=false`\n\n`cd mfe-angular`\n\nCriando as aplicações micro frontends:\n\n`ng g application host-app --routing --no-standalone --style=scss`\n\n`ng g application mfe-app --routing --no-standalone --style=scss`\n\nInstalando o Webpack:\n\n`npm i webpack webpack-cli --save-dev`\n\nConfigurando Module Federation:\n\n`npm install @angular-architects/module-federation`\n\n`ng add @angular-architects/module-federation --project host-app --port 4222`\n\n`ng add @angular-architects/module-federation --project mfe-app --port 4333`\n\nOutros comandos:\n\n`npm cache clean --force`\n\nDependências:\n\n`npm i json-server`\n\n`npm i cypress`\n\n`npm i @angular/material` Utilizado SnackBar para notificações de erro, Dialog para abrir o modal, alguns botões e para campos de formulário do componente livro.\n\n\n## Screenshots\n\nTela Home com login no Host Application:\n\n![Home Host App](./projects/host-app/src/assets/mfe-home-host-app.PNG)\n\n\nTela listagem de livros CRUD feito com API JSON Server do MFE no Host Application:\n\n![Books MFE App](./projects/host-app/src/assets/mfe-host-render-books-v2.PNG)\n\nFormulário adicionar livro:\n\n![Form Adicionar Livro](./projects/host-app/src/assets/mfe-add-book.PNG)\n\nValidações do formulário:\n\n![Form validators bloquea](./projects/host-app/src/assets/mfe-add-book-validators.PNG)\n\nCampos preenchidos:\n\n![Form validators ok](./projects/host-app/src/assets/mfe-add-book-validators-ok.PNG)\n\nFiltro e paginação para buscar livro:\n\n![Form filtro e paginação](./projects/host-app/src/assets/mfe-add-filter-pagination.PNG)\n\n\nTela de editoras com CRUD (Adicionar, Listar, Editar e Excluir) salvando em LocalStorage:\n\n![Editoras CRUD LocalStorage](./projects/host-app/src/assets/mfe-host-editoras-crud-localstorage.PNG)\n\nBarra de notificações com snackBar:\n\n![Notificação para o usuário](./projects/host-app/src/assets/mfe-host-editoras-snackbar-notifications.PNG)\n\n\n\n\n\n\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fcidaluna%2Fmfe-angular","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fcidaluna%2Fmfe-angular","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fcidaluna%2Fmfe-angular/lists"}