Tomas me gustaría felicitarte. Si bien el vídeo es largo, pero es demasiado ilustrativo. Se ve que comprendes muy bien todos los elementos que nos has presentando. ¡Muchas felicitaciones!
Excelente tutorial, muy completo y bien explicado. Estoy realizando todos tu tutoriales, gracias por compartir tus conocimientos. Saludos desde Caracas, Venezuela.
Primeramente, te agradezco muchísimo por este tutorial, en verdad me ha funcionado, eh visto otros pero no había logrado hacerlo, tienes un nuevo suscriptor, al hacer este tutorial obtuve algunos errores que dejare en la siguiente lista y así mismo como es que lo pude solucionar: Los siguientes casos son los errores que me ocurrieron al momento de hacer esta practica 1. En el minuto 41:50 presten atención a como se escribe formGroup ya que yo cometí el error de colocarlo ambas con mayúsculas y me salió error 2. Como haces para descomentar y comentar un código con atajos de teclado? Lo que haces en el minuto 1:07:08 3. Si en caso no les funciona los estilos de ToastrService intenten detener el servidor y volver a correrlo, sino reinicien el vs, por último, instalen de forma global con el parametro -g 4. En caso de que no les funcione la configuración de routes (1:11:00) verifiquen que se les instale correctamente el import { Router } from '@angular/router'; Si se llegan a presentar otros, pueden agregarlo aquí y vemos cómo solucionarlo
Te felicito Tomas por todo lo que sabés y lo claro que lo explicás. Hay muchos buenos desarrolladores, pero que además sean didácticos, no tantos. Gracias!!
Que genial el vídeo, ya voy en una hora y 15 minutos y todo muy bien, lo estoy implementando en Angular 8 y obviamente he tenido que hacer pequeñas modificaciones, pero excelente, explicas muy bien. Saludos y gracias por darte todo el tiempo en subir esto tan completo!.
Lo pude terminar, aunque tuve que hacer unas modificaciones, me imagino que es por la versión de Angular que estoy usando que es la 8. Así que muchas gracias.
Me gustaría que, si fuera posible hicieras otro tutorial apoyándonos a 1. Como configurar un login with Google, Facebook (al menos uno de estos dos) and Telephone 2. Configurar la plantilla del correo electrónico 3. En el dashboard agregar una imagen del usuario 4. Como hacer un perfil de usuario donde se pueda editar los atributos (nombre, imagen, correo electrónico, cambiar password, etc) Si logro hacer alguno de estos les mandaré los pasos
@@TomasRuizDiaz Gracias a vos, explicas muy bien, tus videos me ayudaron a pasar una prueba técnica cuando recién había terminado de cursar "FullStack" (con muchas comillas) con MEAN stack y tenia varios conceptos mezclados. Todavía me pasa jaja Encantado de apoyar el canal!
cuando configuras el Authenticaion de firebase en angular lo hace con npm -i save firebase @angular/fire para la autenticacion ..pero ahora quiero configurar la base de datos tambien con firebase y no puedo, me aparece error al intentarlo.. que puedo hacer?
Hola, estuve siguiendo este tutorial para armar un proyecto mas grande. Una vez que paso al dashboard y le agregue rutas a este modulo nuevo con su respectivo routing module. Me saca directamente al login y no me deja seguir navegando, supongo tiene algo que ver con las cookies o que se ingrese al componente dashboard con credenciales del usuario que esta en firebase.
Hola, excelente sus videos. Lo felicito. Tengo un inconveniente no se porque cuando subo mi proyecto a producción, al actualizar la pagina me manda error 404
Hola. cuando agregue al componente login, en el css esto: .body { width: 100%; max-width: 330px; margin: auto; padding: 30px; text-align: center; } tambien afectó el centrado al "label" del "floatingInput y password" como hago para que no les afecte?. Gracias
Hola Tomas, en primer lugar. Tremendo video!! Tengo una pequeña duda y es que no me funciona bien el toastr. No me aparece ningún tipo de css, solo texto plano y debajo de mi footer. ¿Qué puedo hacer?
Hola me gusto mucho el video, pero me dejaste con la dudad de como bloquear el dashboard y el usuario no puedo navegar en las ruta, hasta que se haya logeado.
Si desean verificar que ambas contraseñas son iguales pueden hacer uso del siguiente código que va dentro del metodo registrar(){ //Const ... if (password !== repetirPassword) { this.toastr.error('Las contraseñas no son las mismas', "Error"); return; } } Nota: Solo logre hacerlo con un alert, estuve pensando que también se podría hacer con el span, pero aplicaría más lógica, me imagino que haciendo un arreglo
puede alguien mas reproducir este error: 1) ir al formulario de registro 2) achicar la pantalla a modo tal que aparezca el Scroll. 3) mover el scrool y ver si el fondo pierde el color "gris" y aparece solo el blanco. en mi caso pasa eso. no se refresca el fondo, entocnes el color gris de fondo no es completo. ahora bine, si hacer un "maximizar" la pantalla ahi si se refresca y se vuelve nuevamente todo color "gris" en el fondo.
Me ayudó un montón, gracias!! Solo me quedo duda de cómo poder lograr una validación para que la contraseña contenga una letra Mayúscula, una minúscula y un número.
Hola Taki, desconozco si hay alguna función/servicio que te de esos datos. En aplicaciones reales seguramente vasa tener que guardar los usuarios en alguna base de datos para asignarle roles, permisos, a que empresa pertenecen etc (en firebase tenemos firestore y realtime database) y en ese caso podrías hacer la consulta facilmente
Hola Emir, si se puede te dejo un link con la documentación oficial firebase.google.com/docs/firestore/solutions/role-based-access. También en la web si googleas un poco vas a encontrar muchísimo material!
muy buen tutorial, pero cuando logro loguearme, abre el dashboard y doy refrescar, me redirige al login, tiene algo q ver con la session storage?, muchas gracias
@@TomasRuizDiaz Muchisimas gracias, hacia varios dias andaba por resolver eso y gracias a su ayuda lo pude resolver, siga haciendo contenido asi, es de mucha ayuda para la comunidad, gracias
Great tutorial but i get this Error, would like to know how i can solve it ERROR Error: Uncaught (in promise): FirebaseError: Firebase: This operation is restricted to administrators only. (auth/admin-restricted-operation).
Hola! Primero, gracias muy buenos videos y super explicados :D En 1:23:30 donde se hace el ruteo hacia el dashboard, el mío no manda a ninguna parte :/ Revise esa parte ya mil veces y se queda donde mismo como si el botón no funcionara. Espero puedas ayudarme! Gracias { console.log(user); this.router.navigate(['/dashboard']); }).catch((error) => { console.log(error) }); }
Hola Ana, en ese minuto que marcaste, en la pantalla login estamos usando el método signInWithEmailAndPassword() y no createUserWithEmailAndPassword (este método lo estamos usando en la otra pantalla de registrarse). Quizás venga por ahí el problema
ok tube un problema con el firebase en la parte de: AngularFireModule.initializeApp(environment.firebaseConfig) si alguien tiene el mismo problema debe de crear la carpeta environment( ng g environment) ya que por alguna razon no se crea al principio y si va a esta parte 51:45 debe de hacer lo siguiente : Coloque esto en AMBOS archivos environment.ts y environment.prod.ts firebaseConfig: { apiKey: '', authDomain: '', databaseURL: '', projectId: '', storageBucket: '', messagingSenderId: '' } y luego importe el entorno import { environment } from '../environments/environment'; y luego use AngularFireModule.initializeApp(environment.firebase),
Tomas me gustaría felicitarte. Si bien el vídeo es largo, pero es demasiado ilustrativo. Se ve que comprendes muy bien todos los elementos que nos has presentando. ¡Muchas felicitaciones!
Excelente tutorial, muy completo y bien explicado. Estoy realizando todos tu tutoriales, gracias por compartir tus conocimientos. Saludos desde Caracas, Venezuela.
Primeramente, te agradezco muchísimo por este tutorial, en verdad me ha funcionado, eh visto otros pero no había logrado hacerlo, tienes un nuevo suscriptor, al hacer este tutorial obtuve algunos errores que dejare en la siguiente lista y así mismo como es que lo pude solucionar:
Los siguientes casos son los errores que me ocurrieron al momento de hacer esta practica
1. En el minuto 41:50 presten atención a como se escribe formGroup ya que yo cometí el error de colocarlo ambas con mayúsculas y me salió error
2. Como haces para descomentar y comentar un código con atajos de teclado? Lo que haces en el minuto 1:07:08
3. Si en caso no les funciona los estilos de ToastrService intenten detener el servidor y volver a correrlo, sino reinicien el vs, por último, instalen de forma global con el parametro -g
4. En caso de que no les funcione la configuración de routes (1:11:00) verifiquen que se les instale correctamente el import { Router } from '@angular/router';
Si se llegan a presentar otros, pueden agregarlo aquí y vemos cómo solucionarlo
Gracias crack tus vídeos son de gran contenido espero que sigas actualozando tu canal que son de gran ayuda
Te felicito Tomas por todo lo que sabés y lo claro que lo explicás. Hay muchos buenos desarrolladores, pero que además sean didácticos, no tantos. Gracias!!
Excelente video, pude completarlo al 100%, muy buena tu forma de explicar, se te agradece. saludos!
amigo buen trabajo fue las 2 horas mejor invertidas en mi vida, es super sencillo cuando le tomas el juego bendiciones
Que genial el vídeo, ya voy en una hora y 15 minutos y todo muy bien, lo estoy implementando en Angular 8 y obviamente he tenido que hacer pequeñas modificaciones, pero excelente, explicas muy bien. Saludos y gracias por darte todo el tiempo en subir esto tan completo!.
Lo pude terminar, aunque tuve que hacer unas modificaciones, me imagino que es por la versión de Angular que estoy usando que es la 8. Así que muchas gracias.
@@ElMijel Podrías compartir el repositorio en caso de que lo tengas?
excelente video, explicacion muy clara! me encanto!!! muchas gracias
me salvaste, me lo vi completo muy detallado, GRACIAS
sos el mejor al dia de hoy con angular 14.0.0 funciona ya lo probe
excelente video, gracias hombre por aportarnos estos conocimientos. Bendiciones
Gracias!!!! Me sirvio banda este video !!
graciasss!!! sigo esperando más cursos tuyos, tocando temas como rxjs, websocket.
Hola Luis gracias por el comentario! Tengo pensado hacer varios videos utilizando mas que todo los operades de RxJS
Buenísimo tutorial! Sos un crack, mas cursos tuyossss :)
muy buenos tus videos bro, gracias por compartir!
de lo mejor esta video , no tiene perdida .....lastima solo puedo dar un solo like
😂
@@TomasRuizDiaz sos grande bro...saludos desde Vzla
Excelente contenido, me ayudo demasiado!!!
Me gustaría que, si fuera posible hicieras otro tutorial apoyándonos a
1. Como configurar un login with Google, Facebook (al menos uno de estos dos) and Telephone
2. Configurar la plantilla del correo electrónico
3. En el dashboard agregar una imagen del usuario
4. Como hacer un perfil de usuario donde se pueda editar los atributos (nombre, imagen, correo electrónico, cambiar password, etc)
Si logro hacer alguno de estos les mandaré los pasos
Eh logrado hacer el registro con google, pero no el login por si alguien le sirve
@@cesaralo2111 como lo hiciste? necesito ayuda
@@matiasr1014 Yo lo tengo, tengo el de google y facebook, pero el de facebook me dá error pero creo que es por metaDevelopers
Groso!! Siempre se me pasaban las fechas de los descuentos ajja
Este mes pude comprarme los cursos de Udemy! con muchas ganas de iniciar!
Pato! Udemy nos da solo 3 cupones por mes y los suelo usar los primeros tres lunes de cada mes. gracias por el comentario!
@@TomasRuizDiaz Gracias a vos, explicas muy bien, tus videos me ayudaron a pasar una prueba técnica cuando recién había terminado de cursar "FullStack" (con muchas comillas) con MEAN stack y tenia varios conceptos mezclados. Todavía me pasa jaja Encantado de apoyar el canal!
cuando configuras el Authenticaion de firebase en angular lo hace con npm -i save firebase @angular/fire para la autenticacion ..pero ahora quiero configurar la base de datos tambien con firebase y no puedo, me aparece error al intentarlo.. que puedo hacer?
muy claro y bien explicado!
Muchas gracias!!! excelente explicación
Muy good la verdad el tutorial
Excelente tuto, gracias.
sos un genio, un proyecto podria ser un carito de compras
Hola, estuve siguiendo este tutorial para armar un proyecto mas grande.
Una vez que paso al dashboard y le agregue rutas a este modulo nuevo con su respectivo routing module.
Me saca directamente al login y no me deja seguir navegando, supongo tiene algo que ver con las cookies o que se ingrese al componente dashboard con credenciales del usuario que esta en firebase.
Hola por favor mas cursos tuyos!!! MAESTRO
Que buen video!!
donde esta esa carpeta enviroment?
genio!!!
tremendo loco!
Hola, excelente sus videos. Lo felicito. Tengo un inconveniente no se porque cuando subo mi proyecto a producción, al actualizar la pagina me manda error 404
bastante completo
Hola. cuando agregue al componente login, en el css esto:
.body {
width: 100%;
max-width: 330px;
margin: auto;
padding: 30px;
text-align: center;
}
tambien afectó el centrado al "label" del "floatingInput y password" como hago para que no les afecte?.
Gracias
Hola Gustavo si le queres poner un label a la izq podes usar las propiedad texto-align: left (solo a los labels)
@@TomasRuizDiaz
es sobre este codigo. en el video no afecta a este codigo que te pongo aca, y en el repositor que deja no está el css
Password
@@TomasRuizDiaz te envio por email la captura
Proba poniendo esto: Password
@@TomasRuizDiaz ahora si funcionó.
Hola Tomas, en primer lugar. Tremendo video!! Tengo una pequeña duda y es que no me funciona bien el toastr. No me aparece ningún tipo de css, solo texto plano y debajo de mi footer. ¿Qué puedo hacer?
Hola, fíjate que tengas importados los mismos módulos en el archivo app.module.ts
I fixed it by adding @import '~ngx-toastr/toastr.css'; into style.css
@@lucianorojas8497 graciassssss 😁
Cuando modificamos el archivo angular.json.. tenemos que bajar el proyecto y volverlo a subir para que tome los cambios. Quizás fue eso
Que versión de Angular estas usando disculpa?
Hola, creo que fue creada con la 14
Hola me gusto mucho el video, pero me dejaste con la dudad de como bloquear el dashboard y el usuario no puedo navegar en las ruta, hasta que se haya logeado.
Hola para proteger una ruta desde el cliente (Angular) se usan los Guards
Si desean verificar que ambas contraseñas son iguales pueden hacer uso del siguiente código que va dentro del metodo registrar(){
//Const ...
if (password !== repetirPassword) {
this.toastr.error('Las contraseñas no son las mismas', "Error");
return;
}
}
Nota: Solo logre hacerlo con un alert, estuve pensando que también se podría hacer con el span, pero aplicaría más lógica, me imagino que haciendo un arreglo
puede alguien mas reproducir este error:
1) ir al formulario de registro
2) achicar la pantalla a modo tal que aparezca el Scroll.
3) mover el scrool y ver si el fondo pierde el color "gris" y aparece solo el blanco.
en mi caso pasa eso. no se refresca el fondo, entocnes el color gris de fondo no es completo. ahora bine, si hacer un "maximizar" la pantalla ahi si se refresca y se vuelve nuevamente todo color "gris" en el fondo.
Me ayudó un montón, gracias!!
Solo me quedo duda de cómo poder lograr una validación para que la contraseña contenga una letra Mayúscula, una minúscula y un número.
Hola lo haces con Validatos.pattern(). stackoverflow.com/questions/48350506/how-to-validate-password-strength-with-angular-5-validator-pattern
hay alguna forma de poner esos datos dentro de una tabla para saber cuantos usuarios existen??
Hola Taki, desconozco si hay alguna función/servicio que te de esos datos. En aplicaciones reales seguramente vasa tener que guardar los usuarios en alguna base de datos para asignarle roles, permisos, a que empresa pertenecen etc (en firebase tenemos firestore y realtime database) y en ese caso podrías hacer la consulta facilmente
Hola, que buen video, tengo una duda con respecto a agregar roles, es posible ?
Hola Emir, si se puede te dejo un link con la documentación oficial firebase.google.com/docs/firestore/solutions/role-based-access. También en la web si googleas un poco vas a encontrar muchísimo material!
@@TomasRuizDiaz si pero eso es con un backend, como aplicaría en este caso que estoy usando correo y contraseña para el login.
muy buen tutorial, pero cuando logro loguearme, abre el dashboard y doy refrescar, me redirige al login, tiene algo q ver con la session storage?, muchas gracias
Hola Guido, gracias por el comentario. Deberías usar el método setPersistence. Ejemplo: jsmobiledev.com/article/firebase-auth-persistence/
@@TomasRuizDiaz Muchisimas gracias, hacia varios dias andaba por resolver eso y gracias a su ayuda lo pude resolver, siga haciendo contenido asi, es de mucha ayuda para la comunidad, gracias
@@guidoernestolorenzohernand2651 de que forma lo pusiste?
👽😍😍😍
Alguien tiene la parte de css parecida?? Gracias
Great tutorial but i get this Error, would like to know how i can solve it
ERROR Error: Uncaught (in promise): FirebaseError: Firebase: This operation is restricted to administrators only. (auth/admin-restricted-operation).
Hola! Primero, gracias muy buenos videos y super explicados :D
En 1:23:30 donde se hace el ruteo hacia el dashboard, el mío no manda a ninguna parte :/ Revise esa parte ya mil veces y se queda donde mismo como si el botón no funcionara. Espero puedas ayudarme!
Gracias {
console.log(user);
this.router.navigate(['/dashboard']);
}).catch((error) => {
console.log(error)
});
}
Hola Ana, en ese minuto que marcaste, en la pantalla login estamos usando el método signInWithEmailAndPassword() y no createUserWithEmailAndPassword (este método lo estamos usando en la otra pantalla de registrarse). Quizás venga por ahí el problema
@@TomasRuizDiaz ay noooo, no vi que elegi la opción incorrecta. Muchísimas gracias!!!
ok tube un problema con el firebase en la parte de:
AngularFireModule.initializeApp(environment.firebaseConfig)
si alguien tiene el mismo problema debe de crear la carpeta environment( ng g environment) ya que por alguna razon no se crea al principio y si va a esta parte 51:45 debe de hacer lo siguiente :
Coloque esto en AMBOS archivos environment.ts y environment.prod.ts
firebaseConfig: { apiKey: '', authDomain: '', databaseURL: '', projectId: '', storageBucket: '', messagingSenderId: '' }
y luego importe el entorno
import { environment } from '../environments/environment';
y luego use
AngularFireModule.initializeApp(environment.firebase),