{"id":23681936,"url":"https://github.com/vilhalva/lista-de-musicas-com-angular","last_synced_at":"2026-04-11T03:33:58.180Z","repository":{"id":232693512,"uuid":"782659613","full_name":"VILHALVA/LISTA-DE-MUSICAS-COM-ANGULAR","owner":"VILHALVA","description":"👨‍🏫APP DE FORMULARIO DE MÚSICAS FAVORITAS FEITO COM ANGULAR E JSON-SERVER.","archived":false,"fork":false,"pushed_at":"2024-05-30T21:01:28.000Z","size":389,"stargazers_count":0,"open_issues_count":0,"forks_count":0,"subscribers_count":1,"default_branch":"main","last_synced_at":"2025-06-01T14:36:40.418Z","etag":null,"topics":["angular","crud","database","framework","html","json-server","nodejs","projeto","scss","site","typescript"],"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/VILHALVA.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-04-05T18:45:02.000Z","updated_at":"2024-05-30T21:01:31.000Z","dependencies_parsed_at":"2025-02-19T20:40:05.125Z","dependency_job_id":null,"html_url":"https://github.com/VILHALVA/LISTA-DE-MUSICAS-COM-ANGULAR","commit_stats":null,"previous_names":["vilhalva/lista-de-musicas-com-angular"],"tags_count":0,"template":false,"template_full_name":null,"purl":"pkg:github/VILHALVA/LISTA-DE-MUSICAS-COM-ANGULAR","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/VILHALVA%2FLISTA-DE-MUSICAS-COM-ANGULAR","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/VILHALVA%2FLISTA-DE-MUSICAS-COM-ANGULAR/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/VILHALVA%2FLISTA-DE-MUSICAS-COM-ANGULAR/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/VILHALVA%2FLISTA-DE-MUSICAS-COM-ANGULAR/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/VILHALVA","download_url":"https://codeload.github.com/VILHALVA/LISTA-DE-MUSICAS-COM-ANGULAR/tar.gz/refs/heads/main","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/VILHALVA%2FLISTA-DE-MUSICAS-COM-ANGULAR/sbom","scorecard":null,"host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":286080680,"owners_count":31668049,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2026-04-10T17:19:37.612Z","status":"online","status_checked_at":"2026-04-11T02:00:05.776Z","response_time":54,"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","crud","database","framework","html","json-server","nodejs","projeto","scss","site","typescript"],"created_at":"2024-12-29T18:46:30.580Z","updated_at":"2026-04-11T03:33:58.153Z","avatar_url":"https://github.com/VILHALVA.png","language":"TypeScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# LISTA DE MUSICAS COM ANGULAR\r\n👨‍🏫APP DE FORMULARIO DE MÚSICAS FAVORITAS FEITO COM ANGULAR E JSON-SERVER.\r\n\r\n\u003cimg src=\"./IMAGENS/FOTO_1.png\" align=\"center\" width=\"500\"\u003e \u003cbr\u003e \r\n\u003cimg src=\"./IMAGENS/FOTO_2.png\" align=\"center\" width=\"500\"\u003e \u003cbr\u003e \r\n\u003cimg src=\"./IMAGENS/FOTO_3.png\" align=\"center\" width=\"500\"\u003e \u003cbr\u003e \r\n\u003cimg src=\"./IMAGENS/FOTO_4.png\" align=\"center\" width=\"500\"\u003e \u003cbr\u003e \r\n\r\n## DESCRIÇÃO:\r\nEste app é uma aplicação de gerenciamento de músicas, onde os usuários podem adicionar, visualizar, editar e excluir músicas da lista (CRUD). Aqui está uma descrição das principais funcionalidades:\r\n\r\n1. **Formulário de Entrada de Dados:**\r\n   - O formulário permite aos usuários adicionar novas músicas à lista. Ele possui campos para o ID (geralmente preenchido automaticamente), autor e título da música. O campo de ID é desativado, o que significa que não pode ser editado manualmente pelo usuário.\r\n\r\n2. **Botão \"Criar\" ou \"Salvar\":**\r\n   - Dependendo do estado do formulário (se um ID já estiver definido ou não), o botão exibirá \"Criar\" ou \"Salvar\". Se o ID estiver preenchido, significa que o usuário está editando uma música existente e o botão será \"Salvar\". Caso contrário, será \"Criar\" para adicionar uma nova música.\r\n\r\n3. **Lista de Músicas:**\r\n   - Abaixo do formulário, há uma tabela que exibe todas as músicas existentes na lista. Cada música é exibida em uma linha separada da tabela.\r\n   - As colunas exibem o ID, autor e título da música.\r\n   - Para cada música, há opções para editar ou excluir. Clicar em \"alterar\" permite que o usuário preencha novamente o formulário com os detalhes dessa música para edição. Clicar em \"remover\" exclui permanentemente a música da lista.\r\n\r\n4. **Atualizações em Tempo Real:**\r\n   - A lista de músicas é atualizada em tempo real à medida que novas músicas são adicionadas ou existentes são editadas ou removidas. Isso é possível através do uso de observáveis e a função `async` na diretiva `*ngFor`, que permite a visualização dinâmica dos dados.\r\n\r\n## EXECUTANDO O PROJETO:\r\n1. **Instalando as Depêndencias:**\r\n   - Para instalar as dependências listadas no arquivo \"package.json\", você pode usar o comando `npm install` ou simplesmente `npm i` no terminal. Certifique-se de estar no diretório do seu projeto onde o arquivo \"package.json\" está localizado (No diretório `moments` e `API`). O npm irá ler o arquivo \"package.json\" e instalar todas as dependências listadas nele. \r\n\r\n   - Aqui está o comando:\r\n\r\n   ```bash\r\n   npm install\r\n   ```\r\n\r\n   ou\r\n\r\n   ```bash\r\n   npm i\r\n   ```\r\n\r\n2. **Iniciando o Servidor Localmente:**\r\n   Antes de fazer solicitações para a URL da API, é necessário iniciar o servidor localmente. Você pode iniciar o servidor executando o comando no diretório `CODIGO`:\r\n   ```\r\n   json-server --watch ./src/db/db.json\r\n   ```\r\n\r\n3. **Testando API:**\r\n   - Para testar a API, você pode utilizar uma ferramenta de cliente HTTP, como o **Postman**, **Insomnia**, **Paw** ou **SoapUI**. Você pode acessar a API usando o seguinte link:\r\n   ```\r\n    http://localhost:3000/musics\r\n   ```\r\n   \r\n4. **Executando o Aplicativo:**\r\n   - Para subir o servidor, no diretório `CODIGO`, abra outro Terminal/CMD e digite o seguinte comando:\r\n   ```bash\r\n   ng serve\r\n   ```\r\n   - Acesse o APP no navegador visitando `http://localhost:4200`.\r\n\r\n5. **Usando o APP:**\r\n   - **Adicionar uma Nova Música:**\r\n      - No formulário de entrada de dados, preencha os campos \"Author\" e \"Musica\" com as informações da nova música que deseja adicionar.\r\n      - Clique no botão \"Criar\" para adicionar a música à lista.\r\n\r\n   -**Editar uma Música Existente:**\r\n      - Na lista de músicas exibida abaixo do formulário, clique na opção \"alterar\" ao lado da música que deseja editar.\r\n      - Isso preencherá automaticamente os campos do formulário com os detalhes da música selecionada.\r\n      - Faça as alterações desejadas nos campos do formulário.\r\n      - Clique no botão \"Salvar\" para aplicar as alterações à música.\r\n\r\n   - **Excluir uma Música Existente:**\r\n      - Na lista de músicas, clique na opção \"remover\" ao lado da música que deseja excluir.\r\n      - Isso removerá permanentemente a música da lista.\r\n\r\n   - **Visualizar Músicas Existente:**\r\n      - Na lista de músicas, você pode visualizar todas as músicas existentes, incluindo seus IDs, autores e títulos.\r\n\r\n   - **Atualizações em Tempo Real:**\r\n      - As alterações feitas na lista de músicas serão refletidas instantaneamente na interface, sem a necessidade de atualizar a página. Isso permite uma experiência de usuário mais fluida e dinâmica.\r\n\r\n## NÃO SABE?\r\n- Entendemos que para manipular arquivos em `HTML`, `CSS` e outras linguagens relacionadas, é necessário possuir conhecimento nessas áreas. Para auxiliar nesse aprendizado, oferecemos cursos gratuitos disponíveis:\r\n* [CURSO DE HTML E CSS](https://github.com/VILHALVA/CURSO-DE-HTML-E-CSS)\r\n* [CURSO DE NODEJS](https://github.com/VILHALVA/CURSO-DE-NODEJS)\r\n* [CURSO DE ANGULAR](https://github.com/VILHALVA/CURSO-DE-ANGULAR)\r\n* [CURSO DE JSON SERVER](https://github.com/VILHALVA/CURSO-DE-JSON-SERVER)\r\n* [CONFIRA MAIS CURSOS](https://github.com/VILHALVA?tab=repositories\u0026q=+topic:CURSO)\r\n\r\n## CREDITOS:\r\n- [PROJETO CRIADO PELO \"cristianWilliam\"](https://github.com/cristianWilliam/ANGULAR-CONSUMINDO-API)\r\n- [VEJA O VIDEO SOBRE O PROJETO](https://youtu.be/rjrQpMYtTUw?si=Hb9r3SQk6-EwYXPI)\r\n- [PROJETO FEITO PELO VILHALVA](https://github.com/VILHALVA)\r\n\r\n\r\n\r\n\r\n\r\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fvilhalva%2Flista-de-musicas-com-angular","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fvilhalva%2Flista-de-musicas-com-angular","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fvilhalva%2Flista-de-musicas-com-angular/lists"}