RESOLVENDO DESAFIO FRONTEND - PROJETO ANGULAR COMPLETO
ฝัง
- เผยแพร่เมื่อ 7 ต.ค. 2023
- Nesse vídeo iremos resolver o desafio frontend da maior rede de academias do Brasil, a Smartfit.
Para resolver o desafio iremos utilizar o framework Angular, explorando vários conceitos do mundo Angular como observables, services, data binding e mais!
⭐ Seja um membro do canal e tenha acesso à lives, vídeos e conteúdos exclusivos!
/ @kipperdev
🎁 ASSINE A NORDVPN COM até 64% OFF!
nordvpn.com/kipperdev/
🔗 Link do desafio
github.com/bioritmo/front-end...
🔗 Repositório do projeto
github.com/Fernanda-Kipper/sm...
👉 Me siga no instagram!
/ kipper.dev
👉 Seja também um membro do canal e tenha benefícios exclusivos!
/ @kipperdev
🌎 Comunidade do Discord
/ discord - วิทยาศาสตร์และเทคโนโลยี
ASSINE A NORVPN COM ATÉ 64% OFF
nordvpn.com/kipperdev/
obrigado pelo video, tem o link do projeto no ar para vermos? e voce esta usando o co-pilot?
9:44
Acho ótima essa ideia de resolver desafios técnicos, é a melhor maneira de saber se estamos realmente manjando do assunto.
Simm, é também é muito bom pra colocar o que estamos aprendendo em prática!
@@kipperdev estou estudando essa tecnologia e vendo o seu vídeo fiquei curioso se você sabe qual é a faixa salarial que eles colocaram pra essa vaga?
@@giovanibenvenutti3578 esse desafio foi postado em alguma vaga antiga, o repositório não é desse ano. geralmente os salários podem ser consultados no glassdoor, lá você consegue saber a média!
@@kipperdev uma curiosidade, quando voce faz um video assim, voce realmente começa do zero e termina o desafio em 3hrs , ou tem alguma "pre-produção" pq acho incrivel vc ter feito tanta coisa em tao pouco tempo, eu demoraria no minimo um dia inteiro ou dois 😅
@@guilhermemm-dev eu leio o desafio antes Gui, e já começo a pensar o que faria, e claro durante a gravação eu faço umas pausas para tomar água e ir no banheiro e descansar um pouco a mente hahaha
Mas vou fazendo do zero ali durante o vídeo, mas seguindo a ideia que eu tinha pensado lendo o desafio antes… por isso muitas vezes a solução não fica a melhor de todas, pois como é a primeira ideia que tive muitas vezes depois de pensar algumas vezes e tentar outras abordagens a solução talvez ficaria melhor 😊
Estou comecando agora e fui ver so por curiosidade, e estou abismado com a sabedoria dela.
Um dia quero saber tanto assim
Só uma observação, pra quem está reproduzindo o projeto em novembro/2023 ou depois, o Angular não pergunta mais sobre o Routing, mas pergunta 'Do you want to enable Server-Side Rendering (SSR) and Static Site Generation (SSG/Prerendering)?', é só colocar 'N'. Mas ainda assim tive que criar a pasta src/app/app.modules.ts na mão. Não sei se tem outro jeito, mas pelo menos essa foi a minha solução, espero ter ajudado :)
Olá! Me surgiu a mesma dúvida aqui e fui atrás
Com o Angular 17 o novo padrão é utilizar standalone components, sugiro estudar mais sobre na nova documentação do angular com a extensão .dev
Para resumir, dentro do Standalone component é possível realizar imports, para fazer a importação do Header component que ela mostra no vídeo ficou assim:
@Component({
selector: 'app-root',
standalone: true,
imports: [CommonModule, RouterOutlet, HeaderComponent],
templateUrl: './app.component.html',
styleUrl: './app.component.css',
})
export class AppComponent {
title = 'desafio-SmartFit';
}
eu pesquisei e achei isso, Vc vai criar novo projeto coloca isso " ng new my-app --no-standalone --routing --ssr=false "
É só criar o projeto com a versão 14 do CLI e todos os arquivos (app.module.ts e os arquivos de ambientes environment.ts) e rotas já vêm como antes.
Quando vc criar um projeto Angular, vc precisa colocar o --no-standalone
ex: ng new projeto --no-standalone
A partir da versão 17 se eu não me engano é preciso colocar --no-standalone, se não vc terá que importar componente por componet em outro componente
Estou encantado com a forma como esse vídeo foi produzido. É inspirador ver o talento e a criatividade em ação.
Você tem um ótimo conteúdo! Estou muito feliz por ter me inscrito aqui!
Sensacional! Esse vídeo merece ser compartilhado com o mundo. Parabéns ao responsável por esse trabalho excepcional.
Show de bola o ocnteudo !! Parabehns pela iniciativa !!
shooow ! Muito legal todo o desenvolvimento e sei a trabalheira que dá, ainda mais gravar e ensinar ao mesmo tempo.
Parabéns pelo conteúdo !
Me envolvi totalmente com este vídeo.
sempre com conteúdos top! show
Parabéns pelo vídeo, sei o trabalho que dá documentar desenvolvimento de projetos.
Me ajudou bastante com relação ao CSS!
Obrigada pelo uso e explicação do observable no Angular, junto com o Behavior Subject e o Subscribe. Já havia tentado usar antes e achei bem confuso, sinto que agora está ficando mais claro pra mim a aplicação do Observable. Sou iniciante no Angular e o seu video me ajudou muito a compreender os padrões usados no Angular e associar com conhecimentos anteriores em Vue e React. Parabéns pelo canal, é muito legal ver uma mulher ensinando programação! :)
Seus videos são simplesmente perfeitos! principalmente resolvendo esses desafios
Muito obrigadaa, Adriano
Fico feliz que você goste💜
Mano, esses vídeos seus são tudo o que eu procurava! kkkk good job!
obrigadaa Moacir! Fico feliz que ajudou 😊
Fê, você é incrível! Suas lives estão tirando muitas dúvidas que eu tinha. Obrigada!
Que bomm, Nayr
Muito bom saber que está ajudando você💜
Se ficar com dúvida em algum vídeo deixa nos comentário que eu sempre tento reponder
!1. Excelente vídeo! Muito bem explicado e informativo.
To velho dms pra isso kipper :) parabéns pelo esforço
Fera demais, excelente conteúdo. D+
Adorei o vídeo, parabéns por trazer conteúdo assim.
Muito obrigadaa, @glaudirschlemper78
Fico feliz que tenha gostado 💜
Obrigada demaaaaais!!! Didática de milhões😄
vc é tão fodona no que faz que o vídeo de 3 hrs parece que é 30min de tão legal que você explica e aborda os itens
Oi! Fernanda. Muito obrigado por trazer esses conteúdos tops pra gente. Tanto para quem ainda está apenas estudando, quanto para aqueles que já estão no mercado, são conhecimentos que ajudam muito no dia a dia. Até então os únicos canais que eu conhecia que traziam conteúdos tops assim, eram o da Loiane e o do CristianDev, mas agora o teu com certeza está nessa lista também. Parabéns pelo trampo maneiro que tu fazes.
Oii Garcia!
Muito obrigado pela mensagem 💜
Fico muito feliz em saber que tenho conseguido ajudar
EU FIZ ESSE DESAFIO TECNICO EM REACT E PASSEI
TRABALHEI LÁ DURANTE OITO MESES, UMA EXCELENTE EMPRESA PRA TRABALHAR!
Que massaa!!
Era temporário?
Conheci o canal agora e amei esse estilo de live coding, mt bom
Que bomm, David
Fico feliz que tenha gostado 💜
Parabéns pelo conteúdo, atualmente estou estudando o Angular e seu video me ajudou bastante a entender melhor na pratica 👾❤
Obrigadaa, @gabrielcosta6862
Fico feliz que tenha ajudado você 💜
Que vídeo incrível! To estudando angular atualmente, e não muito conteúdo. Esse vídeo ajuda MUITO!
Obrigadaa Renan, fico feliz demais em conseguir ajudar de alguma forma 💜
Excelente conteúdo! Mais angular por favor!
Boa Fê!
Eu usei a extensão ColorZilla pra capturar o código das cores do preview que disponibilizaram no repositório, assim não tem erro.
Parabéns pelo vídeo!
Valeu obrigado pelo curso.
Muito bom! Vai ser top se tiver mais vídeos utilizando Angular
Obrigada Joneilson!! 😊
Muito da hora, parabéns 😊
Obrigadaa! 😊
Amo seus vídeos Kipper.
A comunidade de Angular em Português ainda me parece pequena.
Conteúdo como o seus são ótimos.
Parabéns!
Valeuu Dennis! Fico feliz que gostou 😊
Simm, vou buscar trazer mais conteúdos de angular para contribuir para nossa comunidade que ainda é pequena
Cara muito incrível Fernanda, o Angular é um framework único em sua organização, seria ótimo se você trouxesse mais vídeos dele, poderia até trazer vídeos de por exemplo, construindo o front-end em angular e uma api em java com spring, é uma junção perfeita e é uma ótima ideia de vídeo, muito obrigado por trazer o Angular pro canal
up
Muito obrigadaaa!!
Simm, vou trazer mais conteúdos de angular pro canal, uma integração com Java fica perfeito, como você falou 😊
Excelente live ;)!!!
Obrigadaa Anselmo! 💜
Perfeito como sempre
Obrigadaaa!
Parabéns pela aula!!!
Muito obrigada Marcio!!
Muito bom. Deu pra ter uma boa ideia do funcionamento do Angular.
Que bomm, @fillipeamg5877
Fico feliz que tenha ajudado você 💜
Canal brabo!
Encontrei seu canal recentemente. Vc é f0d@. ❤
obrigadaa Marcelo! 💜💜
Muito bom vídeo!!!
Usar display: grid pra posicionar os cards das academias fica bom também
Muito obrigadaa, @AndreMBagestan 💜
Boa! Também funcionaria!
Chuvas de bênçãos pra mim e para você...
Belo Vídeo, ficou top
obrigadaa Lucas! 💜
Top demais, to acompanhando e replicando já que ainda não consigo sozinho.. creio que sirva para aprendizado também né, ainda replicando da trabalho kkk
caso me torne membro, tem muitos outros videos, lives de angular para acompanhar esse tipo de conteudo ?
Uma dica pra não ficar sofrendo com cores é usar uma extensão, como o ColorZilla
Muito bom, daria para utilizar mais o scss em todos os casos que você fica repetindo o header por exemplo, diminuiria bastante o código
Não terminei de ver o vídeo ainda, mas parabéns pelo conteúdo, bem interessante pegar um projeto assim mais "completo" pra sair da mesmisse de to-dos e afins.
Eu sou dev backend mas estou sempre tentando aprender mais sobre front, no momento estudando Vue pois é usado na empresa que acabei de entrar, mas a ideia do vídeo me chamou a atenção.
Confesso que não estou gostando muito do Angular, parece muito mais verboso que Vue e React e olha que meu background é voltado a OOP, mas forçaram a barra aí rs.
Uma dica: Pra "roubar" as cores do layout tem um botão no próprio DevTools do navegador (ícone de conta-gotas), muito prático e funciona com qqr elemento incluindo imagens
Fernanda te admiro demais, acompanho o canal a pouco tempo mas você é a única que consegue me prender por +3 horas num vídeo de programação KKKKKKK
hahah que bom, @catft
Fico muito feliz em saber que você gosta tanto assim do conteúdo 💜
que incrivel mano, aulas
Ahahaha valeuuu! 💜🫶🏼
Parabéns Fernanda obrigado por passar seus conhecimentos pará nos, gostaria de saber se você consegue fazer um vídeo ensinando criar um integração com os site dos correios API com a aplicação em Java usando idea intellij e usando Postman para trazer o resultado
Muito top seus conteúdos
obrigadaaa Igor! 💜
Perfeita como sempre!
Saberia informar se era desafio para vaga de junior ou pleno?
seus videos são muitos bons, ja vi outros
Ajudou demais!!!
que bom Gigio, fico feliz! 💜
Brabaaa...bom deeemais...que videoo toop...to comecando a gostar mais de angular do que react que é o que eu trabalho hahaha....
ahahahah valeu Dan! Simm, depois que a gente se acostuma com a linguagem a gente começa a gostar do angular, ai é caminho sem volta 💜
Vou fazer!
Boaa!
Puts estudo Python e amo programar... voce é surreal garota hahahha , manja muito..
@Fernanda Kipper observei que você teve dificuldades com as cores que não estavam especificadas... poque você não usa o plugin do ColorZila pra pegar as cores?
Muito bom esse desafio, gostei muito da solução com Angular. Parabéns!!!
É incrivel como o JJ mistura programação com smart fit
ótimo conteúdo, muito bom ver testes técnicos assim, pode fazer testes que foram com reactjs?
Oii, Adryel. Muito obrigada 💜
Boa! Vou anotar aqui a sua ideia
desculpa ja vi que é o angular/cli 14, parabéns gostei do desafio👍👍👏👏
Top demaize!!
valeuu Matheus! 💜
Temos pouquíssimos projetos em angular no TH-cam continue fazendo nesse framework !!
Simm!
Os animais são incríveis!
Que vídeo maravilhoso! Obrigada pelo conteúdo!! Alguma razão por vc estar usando os componentes sem ser em standalone? E tb o scss queria saber se tem alguma razão da sintaxe não ser feita em nestes (&, etc). Obrigada! ☺️
você não gerencia possíveis erros ao trabalhar com operadores rxjs, ao fazer solicitação http você precisa gerenciar os 'casos infelizes' para isso existem operadores como CatchError, retry, replace e rethrow operadores
Sou só um estudante disso e vendo essa menina fazendo isso, tó em pânico não sei se consigo aprender esse monte de coisa 😅 que Deus me de forças!
Consegue sim!
É tudo questão de prática!
Bons estudos 💜
Excelente conteúdo, o bom que não preciso pagar um curso de Angular tendo seus vídeos aqui no canal.
Ahahaha valeu Fred! Fico feliz que os vídeos ajudamm
Acho tão bonito quem sabe usar css. Digita e funciona; É lindo. Eu erro umas 150x antes de funcionar
ahahah normal, só depois de muita prática a gente acaba acertando
Pra resolver esse esquema das cores da pra usar a extenção ColorZilla
1:27:15 o else poderia ser descartado ao usar um return na condição do if.
eu acho que fica mais bonito.
A braba!
valeuuu 💜
Tarefas extras que pensei em fazer para complementar:
- criar um seletor para data (data atual como default)
- criar filtro por cidades
- limpar tambem os cards ao clickar em Limpar
Boaaa, ótimas ideias!
Fê, uma dúvida. Onde você acha desafios de vagas? To afim de pegar vários para estudar!
Eu tava fazendo esse em react semana passada 😂
Ahahahah boaa!
Ei fernanda , qnd vc vai desenvolver qualquer coisa, vc tem um feeling de onde começar, ou mapear em algum lugar ?
Você usa angular ?
Você gosta mais do angular , React ou nextjs ?
Qual desses é mais fácil aprender?
Você já usou vue se sim ele é muito utilizado nas empresas ?
Na moral, top demais isso ai
Muito obrigadaa, @VictorHugoAlves7
Fico feliz que tenha gostado 💜
@@kipperdev vc nos inspira a querer aprender mais❤️😍🤙👏👏
Parabéns @kipperdev uma dica de uma extensão do chrome pra conseguir "pegar" as cores (colorpick-eyedropper). É complicado mesmo acertar no olhometro...rs.
Oi Fernanda tudo bem?!, quais os primeiros passos para ser um Desenvolvedor web? obrigado!
Um dia vc poderia fazer um video criando um CRUD usando apenas HTML, CSS e JavaScript? Não consigo encontrar bons conteúdos ensinando isso em português, só em inglês. E para quem é mais iniciante, é um pouco mais complicado.
Ué, o GPT da vários exemplos de CRUD, só pedi.
Oii, Juninho, tudo bem? Eu postei um vídeo exatamente assim recentemente.
Nele, nós construímos a Landing Page da Apple.
O vídeo é esse daqui: th-cam.com/video/yYgkh7n5Ubg/w-d-xo.html
Muito bom vídeo! Queria só deixar uma observação quanto a forma de declarar variáveis com scss. Acredito que você pode declarar elas utilizando apenas o “$”.
Ex: $dark-grey: #333333
Outra coisa que gosto de fazer é separar a tipografia e cores em arquivos diferentes e importar eles no styles global . Geralmente utilizo _tipografia.scss, _colors.scss.
Usando o SASS ou SCSS sim, da pra usar sim.
Obrigada Gabriel 💜
Simm, da pra fazer dessa forma também!
me pergunto se um dia chegarei nesse nível
acho que eu to aprendo mais nesse vídeo , do que em um cursinho por aí skskskksk
Fico feliz que tenha ajudado você 💜
Pode me passar onde baixou o Driver do seu MIC? Tenho um igual e ele não acende mais o Led e não tem contato com o NGenuity, e toda vez que tenho instalar o driver de novo ele da erro!
Quando tentei executar o "ng serve" me retornou erro relacionado com as fontes, o que pode ser?
Fiz certo. Coloquei na pasta correta. Normal!
Porque a maioria das pessoas que tem um determinado conhecimento não sabem transmitir esse conhecimento , veja na intermete de como transmitir o conhecimento depois vc vem e transmite esse conhecimento .
Ela resolveu o desafio. Ela não disse que iria ensinar você a ter o conhecimento dela para resolver você. Até porque ela não aprendeu tudo que sabe sobre programação em um vídeo de 3 horas
faz um video de um sistema de recimento PIX via API Sicoob
Esse template que eles passaram sequer está em uma pag, certo? Pq caso estivesse, bastava inspecionar os elementos do layout para descobrir o espaçamentos.
Parabéns pela aula Fernanda!
Me tira uma dúvida, qual a config do teu Mac e o tema do VSCode?
Novamente, parabéns pelo conteúdo!
Muito obrigadaa, @arthurarw 💜
O tema do meu VSCode é esse daqui: marketplace.visualstudio.com/items?itemName=igornfaustino.emerald
O meu Mac é o M1 de 512gb de SSD e 16b de RAM
Esse daqui com upgrade: amzn.to/46R3uuq
Esse seria um desafio para qual nível profissional? (Pleno, Sênior)
No caso da transformação do 1:38:39 dias em numbers, poderia ser também um Enum ai ou eu to viajando?
onde voce encontra esses desafios?
mano nunca tinha visto nada sobre programação, nada mesmo e por incrível que pareça eu gostei, poderia me ajudar por onde posso começar a programar nessa linguagem
Boaa, Matheus! Que legal!
Fiz um vídeo exatamente sobre isso!
Dá uma olhada nele e me diz o que achou 👉th-cam.com/video/RR3LMp6rpWw/w-d-xo.html
Onde voce trabalha atualmente? Estou querendo começar na programa mas estou achando que ja estou velho.. tenho 28 anos ja.
eu nao constumo trabalhar com angular, na época fiz um curso de angular 9, porem depois mudei para react, olha qual a versao do angular que vc está usando? pq na versao 17 nao tem mais o arquivo app.module.ts. e portanto da erro na renderização
Fer aonde vc fica sabendo dos desafios?
Angular agora tem o modo "standalone" para não depender mais de módulos, ainda não é uma boa idéia usar essa novidade? Parabéns pelo vídeo! Angular precisa de mais visibilidade!
Boaa, eu ainda não testei essa funcionalidade em produção, então não sei te afirmar, mas vou tentar testar assim que possível.
Obrigadaaa Marcos! 💜
Entre o VueJS e o Angular qual vc indica para um desenvolver backend Python(Django) ? Sei que a pergunta é abrangente e depende do contexto, mas o objetivo é fazer uma virada de chave deixando de trabalhar com o HTML "gerado" pelo Django e adotar uma interface mais rica em interação por parte do usuário. No backend trabalho com a camada de API utilizando o FastAPI.
Oii Gui, tudo bem?
Pois é, é muito amplo o escopo hahah
Mas eu diria assim: VueJS tende a ser mais rápido de aplicar por causa da sua simplicidade (sem deixar de ter tudo que um framework frontend precisa), então dependendo da matutidade do projeto em que você trabalha, talvez ele seja o recomendado.
Angular, por sua vez, é mais verboso, mas pode trazer muitos benefícios de manutenção de código, principalmente pra aplicações mais complexas.
Espero ter ajudado 💜
esse desafio é para front end jr ?