PROJETO FULLSTACK APP DE LOGIN ANGULAR 17 + JAVA SPRING | FRONTEND
HTML-код
- Опубликовано: 9 фев 2025
- Nesse vídeo iremos construir o Frontend da nossa aplicação Fullstack de Login e Cadastro, para isso, iremos usar o framework Angular na versão 17 com Typescript e Sass.
⭐ Seja um membro do canal e tenha acesso à lives, vídeos e conteúdos exclusivos!
/ @kipperdev
🔗 Link do Figma
www.figma.com/...
🔗 Link do Gitub
github.com/Fer...
👉 Aprenda inglês com 47% OFF
tr.ee/kipperde...
👉 Me siga no instagram!
/ kipper.dev
🌎 Comunidade do Discord
/ discord
⭐ Seja um membro do canal e tenha acesso à lives, vídeos e conteúdos exclusivos!
ruclips.net/channel/UCpKvMmsF6QrkVr_zWaLGK-Ajoin
Consegui implementar a frontend, faz tempo que não mexia com Angular, conversor que ainda acho ele muito verboso comparado com Vue.JS. Uma sugestão construtiva que posso te dizer Fer é que na edição ter um pouco de cuidado na redução do vídeo, pq fica muito difícil de acompanhar a aula sem ter que parar a cada 10 a 20 segundos. Pois, na edição fica muito rápido a mudança de arquivo ou edição dele muitos trechos só achei no github pq no vídeo não foi mostrado de maneira clara. Obrigado pelo compartilhamento.
Muito bom, parabéns Fernanda Kipper!!!! Queremos mais séries de tutoriais Spring Boot, Angular, Kotlin, Java, Android (Nativo).
Para Android, recomendo kotlin
Muito bom como sempre, Fernanda. Continue assim. Seu conteúdo é muito valioso para nós devs.
Muito obrigadaa, Bruno 💜
Fico muito feliz em ler esse tipo de feedback, de verdade!
Até aqui, tô levando uma hora pra assistir 15 minutos do vídeo, é muito conteúdo!
Parabéns pelo canal. conteudo e conhecimento passado. Sou nova na comunidade, ituber e estou amando tudooooo!!!
Obrigada Ilanna!!! Que bom que está gostando 💜💜💜
Meu Deus, como eu queria um conteúdo assim!!! vou acompanhar demais.
41:52 A 5ª série que habita em mim saúda a 5ª série que habita em você! kkkkkkkkkkkkkkkkkkkkk
Ninguém riu, babac
rapaz, como que consegue ter tudo isso de informação na cabeça e na ponta da língua 😲
Parabéns pelo vídeo. Me ajudou muito nessa parte dos forms.
Que bom que ajudou, Filip! Fico feliz 💜
Nas versões mais recentes não existe mais a pasta assets, as imagens e ícones agora são colocados na pasta public.
por isso eu estranhei jovem, a minha versão é atual e não tem a pasta app-routing.module.ts
Deu muito erro no meu tbm apesar de jogar no public, não precisa botar o caminho todo, se a imagem tiver na pasta public é só botar o nome do arquivo direto. No final o meu ficou assim:
🙏
@@mellorenan19 Mano, to usando o angular na última versão, tb não cria a pasta assets, criei na mão, no VSCode reconhece o caminho de boa, mas no browser não. Tentei na public tb sem sucesso. Se tiverem uma dica agradeço!
conseguisse resolver@@mikrosistemas3190 ?
Em 31:38 você cria o loginForm usando FormGroup; sem usar .
Depois em 51:39 o login component esta diferente já está com o FormGroup ;
eu fiquei perdido pq eu segui o video e não teve esse mudança até tive que voltar o video tudo de novo para ver e nada acho que foi cortada essa modificação e eu como não sou front to perdido e não da para eu copiar o codigo do github pq fiz o projeto meio diferente.
obrigado por todo conhecimento repassado, Fernanda
Já sou mega membro super indico mais faço umas propostas quero muito ver um conteúdo de
Angular com supabase.
Login + crud completo pois supabase está super em alta e ajuda muito como um possível backend onde já ti entrega URLs prontas como endpoints
Esperançoso que um dia sai o curso de Java da Fer! Hahahahah! Didática surreal!
vc é fera Feh eu estou aprendendo mais com vc do que na faculdade de ADS, e a Linguagem JAVA foi a que eu escolhi para trampar 🤦 kkkkkkkkkk
olá Fernanda, gostei muito do vídeo especialmente da forma como foi feita a reutilização de código, mudou completamente a forma como farei os meus formularios, thank you very much, se um dia for ao Brasil, com certaza és uma das pessoas que gostaria de conhecer pessoalmente....
não estou conseguindo utilizar o toastService, mesmo realizando o passo a passo apresentado durante a aula
pow, o dia que eu programar assim, vou me considerar uma boa dev haha, arrasou demais!
Olá Fernanda, gostaria de saber como tu configura um terminal NODE no teu vscode. Estou apanhando aqui para fazer. Já tenho o node instalado de forma global mas mesmo assim não aparece como opção de terminal
Parabéns Fer. Lhe acompanho acredito que desde do início do canal e como está evoluindo os conteúdos por aqui. Será possível um dia um curso completo de Java/Spring e Angular para membros? Pretendo ser membro ainda hoje hehe. Sinto falta de curos de qualidade brasileiros em Angular. Seria interessante um aplicação completa nessas tecnologias citadas acima.
Oii, Carlos! Vi que você virou membro hahah muito obrigada pela confiança 💜
Quem sabe um dia eu faça algo nesse sentido...
Muito obrigado pela dica, bom saber que ajudaria!
Meus Parabéns !!!! Show !!!!!
Vou meter o front em flutter. Seu eu vou conseguir é outra história
Ótima didática, ótimo conteúdo.
Muito obrigadaa, João 💜
Só videos bons nesse canal, show demais
Muito bom!
Fernanda, uma dica... muitas pessoas devem assistir pelo celular. E pelo celular nao da pra ver quase nada oq vc ta fazendo... nos proximos vídeos se puder sempre dar zoom que fica fe melhor visualização
FER TO USANDO SEU PROJETO PARA FAZER O DESAFIO DE UMA VAGA DE EMPREGO! OBRIGADO PELO SEU TRABALHO NO RUclips
Boaaaaa! Espero que dê tudo certo Julio!!
Tmjj
Um projeto em Angular, top demais
Onde está o link de tutorial de instalação do Node ?
Só conteúdo de qualidade :3 Vou aplicar os conhecimentos desse vídeo em um projeto :)
Oii Victor muito obrigadaa 💜
Show! Bom desenvolvimento!
Obrigado, ❤ Fernanda 😀😀🤝🤝🇻🇪🇻🇪🎉🎉
Estou começando a compreender melhor o que foi explicado, mas ainda encontro dificuldades, pois não consegui resolver tudo na configuração do Angular. Não entendo por que é diferente, mesmo sendo a mesma versão. Talvez seja necessário realizar uma atualização.
Angular + java = Melhor stack!❤
Show! Bem objetivo.
Parabéns pelo ótimo vídeo Fernanda!! Adoro seu conteúdo e me inspira demais
não sei se é de la que ela retira, mas tem o freepik tem imagens semelhantes lá é só procurar por ILUSTRAÇÔES
qual a diferença de quando você seta uma propriedade no componente com [ ], ( ) ou sem contendo apenas o nome da propriedade?
Muito bom como sempre ❤
Conteudo top 👏🏼👏🏼
Muito bom 👏👏
Obrigadaa 💜
Fernanda, parabéns pelo conteudo abordado, uma pergunta a parte 2 sairá para quem ainda não é um membro também?
a parte 2 do backend ja ta no canal
Show, sem enrolação!
Como faz pra ter essa mesma visão dos ícones dos arquivos? por exemplo, aqui os arquivos "app...ts" são todos um ícone de TS, no dela tem um recipiente, um A, e um Ts.
Se eu n me engano isso é um addon do vscode
conteúdo fantástico ficou muito bomm 🤩
Muito obrigadaa, Jhon 💜 🤩
quando eu dou um ng new aparece: ...não pode ser carregado porque a execução de scripts foi
desabilitada neste sistema. Para obter mais informações, consulte about_Execution_Policies em... algm sabe como resolver?
conseguiu resolver?
Os erros não são tratados na subscribe, eles são tratados antes da subscribe para poder se recuperar do erro, usando catchError e, usando estratégias como retry, throw, voce tampoco usa Signals
Fê, no spring boot 3.3.4 o CORS tá barrando o login no front... Bora atualizar? Não consegui.
Mto bala
Valeuu, Rapha 💜
Top!!
Kipper, tmj
Estou com um erro que quando vou pro localhost:4200/login, não aparece nada. Só aparece quando escrevo algo no app.component.html, aí aparece tanto no localhost:4200/login quanto no localhost:4200
Oii, Kevin. Manda a sua dúvida mais detalhada lá no Discord da comunidade que o pessoal vai tentar te ajudar!
discord.gg/D5sStBByFr
Abraços
Conteúdo muito top
Obrigadaa Ernane!! 💜
Uma pergunta, meio receio em aprofundar em linguagens de programação e pq tenho uma memoria bem ruim, em um nível biológico, exemplo, com 25 não lembro o nome dos professores que me deram aula em todo o ensino médio. Todos esses projetos partem de uma estrutura padrão que é valido para tipos de projeto? Tipo, todo site web precisa ter X no front, Y no back, autenticação Z, etc? Como "lembrar" digamos assim, de toda essa estrutura, de todas as etapas?
Você não precisa decorar tudo, só precisa entender como funciona. Todo mundo dá uma olhadinha no google rs
Cara, vim do java estou tentando entender Angular, mas confunde demais, estou em 34:00 cara, variavel chamada type, tipo type, componente type, foi usado tudo mesmo nome, confunde mais ainda
Pior que no começo as coisas são meio confusas, mas praticando começa a fazer sentido a diferença dos usos! 🙏🙏
OPAAAA, vai ter deploy tanto front quanto back ???
Tive esse problema para renderizar as informações dos inputs e segui a recomendação do console, coloquei esse trecho de código na classe PrimaryInputComponent:
loginForm = new FormGroup({
email: new FormControl('', [Validators.required, Validators.email]),
password: new FormControl('', [Validators.required, Validators.minLength(6)])
})
+ e o erro sumiu, eu poderia seguir com esse código ou você recomenda que eu passe a utilizar essa forma que você passou no vídeo? desde já agradeço!
Cade a parte 2?
Fernanda do céu!!! É coisa demais pra fazer apenas um login!! 😅 Como você conseguiu decorar tudo isso? Esse aí é o que chama de Crud?
Para aprender esse conteúdo é essencial saber de HTML e css?
oiii Fernanda tudo bem? tem algum livro de Angular para indicar?
Essa gataiada no formulário me quebrou kkkk meio que tem que gravar a receita ali pra evitar o erro. Mas, top demais a aula.
Rapaz que trabalheira é essa pra criar um formulário kkkk
Muito top FER, PARABÉNS. Gostaria muito que vc detalhasse mais sobre o angular, principalmente na parte que não estava dando certo a label, vc criou muito código apenas pra corriri um problema de visibilidade. Nesta parte ficou confuso pra mim... Mas muito top!!!1
essa parte do ControlValueAcessor a gente finge que entendeu
qual o link do figma?
Conseguiu?
@@pabloaraujolachei o que ela pegou como base, mas nao da pra colar aqui
Tá na mão!
www.figma.com/file/7T1wkErczpMOBeqtpVjMSb/Login-Page-Design-%7C-Figma-to-HTML-using-bootstrap-(Community)?type=design&node-id=6%3A920&mode=design&t=vdTFja2G7s4Mh8yg-1
segunda parte please
Fê, uma pergunta -- É possível utilizar o React junto com o Angular?
Com microfrontends simm!!
se eu tivesse trabalhando virava membro
Tenho certeza que você vai aproveitar muito!!
você é FODA
Excelente video, cade o back-end😭😭😭😁😁
Oii, Mayara ta aquii: ruclips.net/video/tJCyNV1G0P4/видео.html
Espero que goste 💜
@@kipperdev muito obrigada, eu não estava encontrando
tem a parte 2 ?
Oii, tem sim! ruclips.net/video/tJCyNV1G0P4/видео.html
Espero que goste 💜
Conteúdo top. Mas infelizmente não consegui avançar devido ao seguinte erro quando injeto o serviço do toast no ts. Error: Uncaught (in promise): Error: NG0203: inject() must be called from an injection context such as a constructor, a factory function, a field initializer, or a function used with `runInInjectionContext`. Find more. Caso alguem puder dar um help, agradeço demais.
Obrigada Alex! 💜💜
Ainda está com esse erro ou já conseguiu resolver? Caso nao tenha conseguido, manda lá no Discord, no canal exclusivo dos membros, que te ajudooo.
@@kipperdev oi Fê, desculpe a demora em responder. Acabei abandonando o projeto, rss
Realmente não consegui fazer login pelo spring achei bem confuso 😩
Preciso de ajuda com o angular qual o discord da Fernanda pra mim ver com a comunidade se me ajuda
Oii Bruno, o link é esse daqui: discord.com/invite/D5sStBByFr
Manda lá que o pessoal te ajuda!
Você vai fazer o mesmo projeto, porém, em React ?
Não está nos meus planos, mas quem sabe um dia!
alguém sabe o nome da primeira musica??
Cadê o figma?
Oii, Andrey. Adicionei o Figma à descrição
www.figma.com/file/7T1wkErczpMOBeqtpVjMSb/Login-Page-Design
Qual a diferença desse projeto para o desse vídeo ? ruclips.net/video/tJCyNV1G0P4/видео.html
o vídeo atual é o front, o outro é o back
Oi, consegue tirar essa musica nos próximos vídeos? Ela me distrai bastaste, por mim poderia ser até sem música.
Super()
💜
Angular me dá medo
Não tente aprender com ela, tudo o que ela tem de conhecimento é inversamente proporcional à didática.
Hahahah da medo de tão bom que é!!!
Você é muito acelerada, por favor vá mais devagar na próxima vez, estou tentando, mas tenho que voltar toda hora.
escrever tudo em ingles é muita frescura kkkkkkkkk se isso for pra ajudar iniciantes eu lhe digo : faça em portugues !!!! até eu que sei fazer fiquei confuso
Confuso é tu saber fazer e ficar confuso
Frescura? Sinceramente olha, preguiça pra explicar
No mercado de tecnologia atual, escrever códigos em inglês é uma exigência, não apenas uma preferência. Dominar essa prática é essencial para se manter competitivo e atender às demandas da indústria.
eu também achava frescura ate chegar no mercado e ver tudo em inglês. só aprendo e escrevo em inglês
@@renanxttmano 😅😂
Não precisa instalar o angular globalmente, basta só digitar o seguinte comando
npm init @angular (nome do projeto)
Conteúdo excelente 👏👏👏