{"id":22550251,"url":"https://github.com/diegoreports/spa-dio","last_synced_at":"2026-04-20T10:32:06.111Z","repository":{"id":158250735,"uuid":"455697622","full_name":"DiegoReports/SPA-DIO","owner":"DiegoReports","description":"Desenvolvimento de SPA com ANGULAR | Desafio Digital Innovation One","archived":false,"fork":false,"pushed_at":"2022-02-07T21:57:49.000Z","size":1015,"stargazers_count":0,"open_issues_count":0,"forks_count":0,"subscribers_count":2,"default_branch":"main","last_synced_at":"2025-03-28T09:43:00.240Z","etag":null,"topics":["angular","angularmaterial","developer","digitalinnovationone","front-end","javascript","material-ui","spa"],"latest_commit_sha":null,"homepage":"https://spa-dio.netlify.app/","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/DiegoReports.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":"2022-02-04T21:10:38.000Z","updated_at":"2022-02-07T18:50:20.000Z","dependencies_parsed_at":null,"dependency_job_id":"19ac21a4-454d-4f69-acf1-1d05b63d1cfe","html_url":"https://github.com/DiegoReports/SPA-DIO","commit_stats":null,"previous_names":[],"tags_count":0,"template":false,"template_full_name":null,"purl":"pkg:github/DiegoReports/SPA-DIO","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/DiegoReports%2FSPA-DIO","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/DiegoReports%2FSPA-DIO/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/DiegoReports%2FSPA-DIO/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/DiegoReports%2FSPA-DIO/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/DiegoReports","download_url":"https://codeload.github.com/DiegoReports/SPA-DIO/tar.gz/refs/heads/main","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/DiegoReports%2FSPA-DIO/sbom","scorecard":null,"host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":286080680,"owners_count":32043001,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2026-04-20T00:18:06.643Z","status":"online","status_checked_at":"2026-04-20T02:00:06.527Z","response_time":94,"last_error":null,"robots_txt_status":"success","robots_txt_updated_at":"2025-07-24T06:49:26.215Z","robots_txt_url":"https://github.com/robots.txt","online":true,"can_crawl_api":true,"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","angularmaterial","developer","digitalinnovationone","front-end","javascript","material-ui","spa"],"created_at":"2024-12-07T16:11:39.248Z","updated_at":"2026-04-20T10:32:06.082Z","avatar_url":"https://github.com/DiegoReports.png","language":"TypeScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"\u003ch1 align=center\u003eSPA PROFILES - Angular\u003c/h1\u003e\n\nAplicação desenvolvida em Angular para cadastro de perfis profissionais. Desafio proposto pela [Digital Innovation One](https://www.dio.me/) no Lab: “Desenvolvendo SPA com Angular”.\n\n![SPA-PROFILES.png](src/assets/SPA-PROFILES.png)\n\n\u003cp align=center\u003e\u003cstrong\u003eVisualize o projeto \u003ca href=\"https://spa-dio.netlify.app/\"\u003eClicando aqui\u003c/a\u003e\u003c/strong\u003e\u003c/p\u003e\n\n## ⚙️Tecnologias:\n\n\u003cimg src=\"https://img.shields.io/badge/Angular-DD0031?style=for-the-badge\u0026logo=angular\u0026logoColor=white\" alt=\"badge Angular\"\u003e \u003cimg src=\"https://img.shields.io/badge/Netlify-00C7B7?style=for-the-badge\u0026logo=netlify\u0026logoColor=white\" alt=\"badge Netfly\"\u003e\n\n## 🔥 O Desafio:\n\n- [ ] Crie uma aplicação Angular (Não esqueça que todo código precisa estar no GitHub)\n- [ ] Crie no mínimo 3 componentes que deverão estar interagindo na mesma página (Não esqueça das rotas)\n- [ ] Escolha no mínimo 4 componentes do Angular Material e incorpore eles em sua aplicação.\n- [ ] Crie em uma das páginas uma interação através da Interpolação e/ou utilizando Property Biding.\n- [ ] Crie uma explicação sobre o que foi feito, esta explicação será inserida na plataforma junto com o link para o código no GitHub.\n\n## 💻 A Aplicação:\n\nA Aplicação consiste na visualização e criação de perfis profissionais. Nela podemos adicionar um novo perfil com:\n\n- Nome\n- E-mail\n- Linkedin\n\nEsses perfis podem ser editados e deletados também. Cada perfil possui uma foto também. Quando um novo perfil é cadastrado na aplicação, ele recebe uma foto padrão de uma avatar. Foi utilizado o Angular que é um Framework Javascript (baseado em Typescript) cuja plataforma nos permite a criação de aplicações web. E também a biblioteca Angular Material nos trouxe componentes baseados no Material Design, a especificação de design para interfaces interativas do Google.\n\n- Temos 7 Componentes do Angular Material\n  - Toolbar\n  - Icon\n  - Table\n  - Button\n  - Dialog\n  - FormField\n  - Input\n- 4 Componentes interagem na mesma página:\n\n1. Botão “Adicionar Perfil”\n2. Modal Dialog “Criar Perfil” e “Editar perfil”\n3. Inputs do Modal\n4. Table de Perfis\n5. Botões de ação: Editar e Deletar\n\n- Interpolação e Property Binding:\n\n1. Interpolação nas informações de perfis\n2. Property Binding no nosso DATASOURCE `home.component.html` (linha 10) e `home.component.ts` (linha 30) recebendo informações do nosso **_ProfileElement._**\n\n## 🔄Rodando o projeto\n\nProjeto gerado com [Angular CLI](https://github.com/angular/angular-cli) versão 13.1.2.\n\n### Servidor de desenvolvimento\n\nExecute `ng serve` para um servidor dev. Navegue até `http://localhost:4200/`. O aplicativo será recarregado automaticamente se você alterar qualquer um dos arquivos de origem.\n\n### Build\n\nExecute `ng build` para compilar o projeto. Os artefatos de construção serão armazenados no diretório `dist/`.\n\n---\n\n\u003cp align=center\u003e\n🚧 Desenvolvido por \u003ca href=\"https://www.linkedin.com/in/diego-henrique-sg/\"\u003eDiego Henrique\u003c/a\u003e\n\u003c/p\u003e\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fdiegoreports%2Fspa-dio","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fdiegoreports%2Fspa-dio","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fdiegoreports%2Fspa-dio/lists"}