{"id":19817683,"url":"https://github.com/raizertechdev/02.desafiostackx-web3.0-angular","last_synced_at":"2025-02-28T15:23:45.779Z","repository":{"id":168821109,"uuid":"577933168","full_name":"RaizerTechDev/02.DESAFIOSTACKX-WEB3.0-ANGULAR","owner":"RaizerTechDev","description":"Lançados 03 projetos que fazem parte do Módulo Web 3.0 do Curso StackX, neste desafio foram aplicadas as seguintes stacks =\u003e Angular use Sass, TypeScript e HTML5🙌🚀","archived":false,"fork":false,"pushed_at":"2023-01-09T20:59:18.000Z","size":461,"stargazers_count":2,"open_issues_count":0,"forks_count":0,"subscribers_count":1,"default_branch":"master","last_synced_at":"2025-01-11T08:12:15.557Z","etag":null,"topics":["angular","html5","sass","typescript"],"latest_commit_sha":null,"homepage":"https://rafarz76dev-02-desafiostackx-web-3-0-angular.vercel.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/RaizerTechDev.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-12-13T21:33:27.000Z","updated_at":"2023-07-05T22:22:32.000Z","dependencies_parsed_at":null,"dependency_job_id":"120e484b-1695-4e49-95cf-84b403b23e43","html_url":"https://github.com/RaizerTechDev/02.DESAFIOSTACKX-WEB3.0-ANGULAR","commit_stats":null,"previous_names":["rafarz76dev/02.desafiostackx-web3.0-angular","raizertechdev/02.desafiostackx-web3.0-angular"],"tags_count":0,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/RaizerTechDev%2F02.DESAFIOSTACKX-WEB3.0-ANGULAR","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/RaizerTechDev%2F02.DESAFIOSTACKX-WEB3.0-ANGULAR/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/RaizerTechDev%2F02.DESAFIOSTACKX-WEB3.0-ANGULAR/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/RaizerTechDev%2F02.DESAFIOSTACKX-WEB3.0-ANGULAR/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/RaizerTechDev","download_url":"https://codeload.github.com/RaizerTechDev/02.DESAFIOSTACKX-WEB3.0-ANGULAR/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":241173944,"owners_count":19922213,"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","html5","sass","typescript"],"created_at":"2024-11-12T10:13:18.877Z","updated_at":"2025-02-28T15:23:45.756Z","avatar_url":"https://github.com/RaizerTechDev.png","language":"TypeScript","readme":"# Olá  \u003cimg src=\"https://media.giphy.com/media/l1J9sBOqBIvnafnUc/giphy.gif\" align=\"center\" width=\"85\"\u003e\n\n***\n# \u003cimg src=\"https://media.giphy.com/media/XwcRflO9HD0Sk6RaRM/giphy.gif\" align=\"center\" height=\"25\" width=\"55\"\u003e Venho aqui apresentar \u003cimg src=\"https://media.giphy.com/media/LmqitTYGsNMiWu3VWO/giphy.gif\" align=\"center\" width=\"65\"\u003e\n# DESAFIO WEB 3.0 STACKX\n## Lançados 03 projetos que fazem parte do Módulo Web 3.0 do Curso StackX - Formação de Desenvolvedores de Software. \n##  Requisitos para o Desafio:\n\n1) A lista de tecnologias deve ser um array onde no HTML você irá fazer um map para listar;\n\n\n2) Ao clicar no botão de linguagem o texto de apresentação ”Olá meu nome....” muda para a linguagem selecionada;\n\n\n3) O botão de linguagem deve ser um componente onde você passará 3 propriedades: Título, ícone e o click dele;\n\n\n4) Para estilização \n- React use Styled Components\n- Angular use Sass \n- Vue use Tailwind CSS\n\n***\n# Suas aplicações vão ser:\n\n\u003cimg style=\"width: 100px\" alt=\"React\" src=\"https://media.giphy.com/media/eNAsjO55tPbgaor7ma/giphy.gif\"\u003e \u003cimg style=\"width: 100px\" alt=\"Angular\" src=\"https://media.giphy.com/media/XEDIHHp3i8bVoEdxd7/giphy.gif\"\u003e \u003cimg style=\"width: 100px\" alt=\"Vue.js\" src=\"https://media.giphy.com/media/VgGthkhUvGgOit7Y9i/giphy.gif\"\u003e\n\n***\n# \u003cimg src=\"https://media.giphy.com/media/eBqEQyWGdgSNgRVLCV/giphy.gif\" align=\"center\" height=\"95\" width=\"95\"\u003e Ferramenta Do Desafio⁉\n\u003cimg style=\"width: 80px\" alt=\"VSCode\" src=\"https://media.giphy.com/media/IdyAQJVN2kVPNUrojM/giphy.gif\"\u003e\n\n***\n## \u003cimg src=\"https://media.giphy.com/media/JO9WCVmDMbC0eLSlyV/giphy.gif\" align=\"center\" height=\"70\" width=\"70\"\u003e \u0026nbsp;Linguagem Tecnológica do Desafio:\n\u003cimg style=\"width: 80px\" alt=\"TypeScript\" src=\"https://upload.wikimedia.org/wikipedia/commons/thumb/4/4c/Typescript_logo_2020.svg/2048px-Typescript_logo_2020.svg.png\"\u003e\n\n***\n# 2º Desafio \u003cimg src=\"https://media.giphy.com/media/XwcRflO9HD0Sk6RaRM/giphy.gif\" align=\"center\" height=\"25\" width=\"55\"\u003e ANGULAR\n\n\u003cbr\u003e\n\nEste projeto foi gerado com o Angular CLI versão 15.0.3 e o sistema SASS que é uma linguagem de extensão do CSS, tornando o processo de desenvolvimento mais simples e eficiente.\n\n\u003cbr\u003e\n\n  ### \u003cdiv align=\"center\"\u003e[Clique aqui para acessar o Projeto](https://rafarz76dev-02-desafiostackx-web-3-0-angular.vercel.app/)\n\n***\n   \u003cimg src=\"ProjetoWeb3.0-Angular.png\" align=\"center\" height=\"500em\" width=\"100%\" href=\"https://rafarz76dev-02-desafiostackx-web-3-0-angular.vercel.app/\"\u003e\n   \n ***\n # Passo a Passo do Projeto:\n   \n   ## Instalando no ```terminal power shell``` clicando no botão direito como administrador para o projeto em angular \u003cimg src=\"https://media.giphy.com/media/HPzNBFdTh8sxhqNdpX/giphy.gif\" align=\"center\" height=\"30\" width=\"25\"\u003e\n  \n### 1º Executar o comando CLI usando o npm gerenciador de pacotes e clica com botão direito em administrador, ao abrir digita:\n- ```npm install -g @angular/cli  ```\n\n### 2º Para criar, construir e servir um novo projeto Angular básico em um servidor de desenvolvimento, vá para o diretório (pasta) que criou no seu espaço de trabalho e use o seguinte comando👇\n- ```ng new nome do projeto ( ex. projetoangular-web3.0)  ```\n\n### \u003cimg src=\"https://media.giphy.com/media/XwcRflO9HD0Sk6RaRM/giphy.gif\" align=\"center\" height=\"25\" width=\"25\"\u003e Quando perguntar digita:  - ```y ```\n\n### \u003cimg src=\"https://media.giphy.com/media/XwcRflO9HD0Sk6RaRM/giphy.gif\" align=\"center\" height=\"25\" width=\"25\"\u003eEscolhe a estilização `` `Sass``` e dá ```Enter```\n\n### Aguarda a instalação dos pacotes no projeto,\n\n### \u003cimg src=\"https://media.giphy.com/media/XwcRflO9HD0Sk6RaRM/giphy.gif\" align=\"center\" height=\"25\" width=\"25\"\u003eE altera copiando e colando para a pasta do projeto que foi criado antes de abrir no VSCode com o comando.\n```cd nomepastaprojeto```\n\n### 3º Agora sim vai Abrir o Projeto no Terminal para a ferramenta VSCode, digitando 👊\n```code .```\n\n   ## Dentro do editor de código VSCode:\n\n### Executar o projeto no servidor digitando:\n```ng serve```\n### \u003cimg src=\"https://media.giphy.com/media/XwcRflO9HD0Sk6RaRM/giphy.gif\" align=\"center\" height=\"25\" width=\"25\"\u003e Vai compilar na porta `http://localhost:4200/`. \n\n### Criando component:\n- ```ng g c```\n\n\u003cimg src=\"https://media.giphy.com/media/XwcRflO9HD0Sk6RaRM/giphy.gif\" align=\"center\" height=\"25\" width=\"25\"\u003e O componente é composto por 3 arquivos, para template (HTML), estilo (SASS) e classe (TS) e toda essa configuração é feita dentro do decorador @Component onde é passado como metadados o template, o estilo e um seletor para que este componente possa ser usado em outro template.\n\n### Criando module:\n- ```ng g m```\n\n\u003cimg src=\"https://media.giphy.com/media/XwcRflO9HD0Sk6RaRM/giphy.gif\" align=\"center\" height=\"25\" width=\"25\"\u003e É uma classe marcada pelo decorador. recebe um objeto de metadados que descreve como compilar o modelo de um componente e como criar um injetor em tempo de execução.\n\n### Bibliotecas importadas no terminal do VSCode👇  \n- ```ng add @angular/material```\n\n\u003cimg src=\"https://media.giphy.com/media/XwcRflO9HD0Sk6RaRM/giphy.gif\" align=\"center\" height=\"25\" width=\"25\"\u003e Inclui informações sobre pré-requisitos, instalação do Angular Material e, opcionalmente, exibição de um componente Material de amostra em seu aplicativo para verificar sua configuração.\n  \n### Implementando Build\n- ```ng build```\n\n\u003cimg src=\"https://media.giphy.com/media/XwcRflO9HD0Sk6RaRM/giphy.gif\" align=\"center\" height=\"25\" width=\"25\"\u003e Execute 'ng build' para compilar o projeto. Os artefatos de compilação serão armazenados no diretório 'dist/'.\n  \n  ### Criando o módulo de rotas\n  \n \u003cimg src=\"https://media.giphy.com/media/XwcRflO9HD0Sk6RaRM/giphy.gif\" align=\"center\" height=\"25\" width=\"25\"\u003e Em nossa aplicação é um arquivo de módulo das rotas e importá-lo posteriormente no Root Module. Este arquivo de rotas, normalmente chamado app-routing.module.ts\n\n***\n### ▶ 😀👀 Bora lá....\n\n### Gostou, então já clica na 🌟\n","funding_links":[],"categories":[],"sub_categories":[],"project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fraizertechdev%2F02.desafiostackx-web3.0-angular","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fraizertechdev%2F02.desafiostackx-web3.0-angular","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fraizertechdev%2F02.desafiostackx-web3.0-angular/lists"}