Menu

Curso De Firebase

Lecciones del Curso Gratuito

01.- Que es Firebase

Hola hola que tal buenas tardes bienvenidos al programador novato y en este curso vamos a aprender a rivers si vamos a aprender que es fire mls como programa nefarias vamos a hacer una aplicación en fibers vamos a comer desayunar y cenar para ver si eso es lo que vamos a hacer en este curso y ustedes si ustedes no saben que es fire no saben que es el concepto de phoenix les recomiendo que se queden a ver este vídeo para que sepan para qué sirve y qué es y si ya sabes que es fires pues también ve este vídeo para por si hay cosas que no sabías de fires pues aquí las vas a aprender y si definitivamente dices que sabes muy bien que es fire después vea el siguiente vídeo en donde vamos a comenzar a trabajar conformes pero antes que nada deja tu ley y pues comenzamos a ver fires para ver como su nombre lo dice es una base de datos y su nombre lo dice fire base de juego beige base base de fuego que hay en su nombre lo está diciendo es una base de datos es así como méxico el oracle podré se cuele server pero es un poco más parecida a las bases de datos no sql o sea casandra mongodb.

02.- Crear nuestro proyecto

Hola hola que tal buenas tardes bienvenidos a programador novato y en este vídeo vamos a hacer lo que hemos estado esperando durante tanto tiempo vamos a trabajar con código bueno un poco de código lo primero que tenemos que hacer es crear nuestro proyecto de firewall y para eso nos vamos a ir a esta url para aves punto org doble dólar en la cual yo voy a dejar la descripción del vídeo para que no estén copiando una manera implicaría nos vamos a ir aquí a la consola y aquí en la consola va a tardar unos cuantos segundos en cargar listo y le vamos a dar clic en donde pues de aquí donde nos dice crear nuevo proyecto que más vamos a hacer lo único que podemos hacer y aquí le vamos a poner un nombre a nuestro proyecto del cual se va a llamar en mi caso usuarios en el caso ustedes lo pueden poner el nombre que gusten seleccionamos la ubicación lo voy a dejar en estados unidos aceptamos los términos y condiciones le entregamos nuestra alma.

03.- Crear usuarios

Hola hola que tal buenas tardes bienvenidos al programa del novato y antes que antes de continuar quisiera preguntarles extrañaron pues yo si los extraño por eso estoy de regreso aquí con este tercer vídeo con este tercer tutorial de fibers y pues comencemos que quedamos que vamos a hacer así crear usuarios los podríamos crear desde aquí fácilmente medianas y le ponemos correo contraseña pero este no es el caso la idea es que los hagamos desde una aplicación web y eso es lo que vamos a hacer vamos a ir a nuestro código vamos a colocarle aquí un título decente el cual va a hacer base así así para rápido y ahora vamos a voy a quitar esto quisiera el tutorial anterior de esta variable y esto y vamos a crear el entorno para poder colocar en el este un usuario y una contraseña digo a un correo y una contraseña y un botoncito enviar para esto voy a colocar aquí con este un input text así bueno no va a ser texto para ser de tipo correo e mail y va a ser pues email está bien y listo un place holder.

04.-Login usuarios

Hola hola que tal buenas tardes bienvenidos al programador novato y en este tutorial vamos a hacer lo que dijimos que es el tutorial anterior que era lo guiarnos en nuestro programa o sea darle acceso a los usuarios que se han estado registrando y pues para esto vámonos directamente a nuestro código del cual tenemos por acá y lo primero que vamos a hacer es y verificar si los usuarios ya están enrollados antes de darles un área de acceso primero vamos a verificar si ya están logrados ahorita les voy a explicar por qué y eso lo podemos conseguir aquí en el código que en esta url donde estamos copiando el código en la parte acá donde dice configurar el observador el observador es una parte que nos va a decir si el usuario ya está registrado o no miren vamos a ver esto copiamos ese pedazo de código y lo podemos pegar en cualquier parte de nuestro script.

05.-Cerrar sesion usuario (signOut)

Hola hola que tal buenas tardes bienvenidos al programador novato y en este tutorial vamos a desbloquear nos de nuestra cuenta de usuario yo creo que muchos ya deben de estar hartos de que cada vez que entramos aquí pues nos aparece la cuenta lo que tenemos que venir aquí a restaurar si borrar todo esto y volver en este tutorial vamos a resolver esto fácil rápido y prácticamente es que vamos a hacer pues vamos a nuestro código obviamente y nos vamos a crear un nuevo botón botón que diga desbloquear y para eso ese botón lo vamos a colocar aquí donde dice elogiado pues ahí pues cuando se muestre que está logueado pues también hay que mostrar el botón de desarrollarse no entonces para esto fíjense que voy a cambiar esta doble comillas por una comilla invertirá si ustedes no saben sacar la comida invertida es con shift alterna 396 con el sacar la comida invertida y la voy a poner aquí aquí vamos a poner y para qué me sirve esta comida invertida pues miren es para poder moverme libremente con estas comillas por todos lados para poder colocar código de html fácilmente así y este lo que voy a hacer precisamente es que voy a colocar estos códigos aquí y así y además aquí abajo y aquí voy a crear mi botoncito aquí basta un botón como con botón diagonal cerrar sesión qué raro y ahí está y ese botón que va a ser pues va a mandar a llamar una una función o clic cuando hacemos clic que va a pasar pues que se va a ejecutar cerrar así así como así así de fácil y que va a pasar cuando le damos clic en cerrar pues vamos a ejecutar un evento el cual a cerrar a una función la cual va a decir cerrar y qué vamos a hacer cuando le damos click en cerrar pues fácilmente vamos a mandar a llamar a la función de fibers y sabéis autentificación y esta función se llama así [Música] y listo ahora esta función me va a retornar un en una función y cómo se llaman a una función anónima y esta función anónima un caché lo que queda de él es cuando se ejecuta correctamente mi evento o sea cuando se desbloquea correctamente y como les digo me va a retornar una función anónima la cual va nos va a mostrar en la controlar con solé punto love no vamos a dar un texto que va a ser así corto salir allí y qué pasa si no se ejecutó correctamente pues nos va a mostrar otro texto qué va a decir el error y aquí y el error y lo mostramos aquí así de fácil ahí está qué bien más no no no no variables nos ahorra mucho con eso bueno ahí estamos no lo guiados nos vamos a lograr un m2 que hubiera utilizado un correo más sencillo gmail.com 1 2 3 4 5 6 7 damos clic en acceso y ya estamos ya accedemos ya nos dice que estábamos logrados con este usuario y ahora le vamos a dar clic en cerrar sesión y listo se desbloqueó y nos manda aquí en consola que se salió y si se dan cuenta todo es asincrónicos no estamos comunicando como ninguno comunicando con la base de datos de forma sincrónica sea con simple html estamos haciendo esto como si fuera un programa de lo que sea visual desechar o hasta de access así como como es directo esto es directo con el navegador o sea es ésta es la web en que vamos 3.0 2.0 bueno no se prestó en la web y en puntuación es increíble es hermoso y bueno eso es todo por este tutorial si te gustó pues dale like si quieres seguir recibiendo más vídeos como éste suscríbete y activa la campanita para que se notifique cuando se sube en el vídeo si se acuerdan que les había dicho que vamos a colocar aquí una validación verify verify verify donde sea que esté mi email verify false esto lo vamos a cambiar al truck verificando el correo o sea que este correo sea real porque no queremos que chirulí es que no metan goles en nuestra nuestro sistema no no no esto tiene que quedar bien muy bien y bueno eso es todo por este vídeo comparte no te voy a ayudar y muchas gracias hasta luego.

06.-Verificar email del usuario (sendEmailVerification)

Hola que tal buenas tardes bienvenidos al programador novato y como no hay fecha que no llegue plazo que no se cumpla y promesa que yo haga que no se lleve a cabo en este tutorial vamos a verificar el usuario que acabamos de crear pero bueno mejor dicho lo vamos a borrar y luego lo vamos a crear y se va a verificar y para eso simplemente vamos a utilizar nada más ni nada los que esta simple línea de código pueden creerlo o sea para beers far y veis es increíble es increible nada más esto es lo que necesitamos pero primero antes de hacer esto vamos a mostrar si nuestro usuario está o no verificado obviamente no está verificado y eso lo podemos ver en la línea de código qué bueno nada consola quién estaría aquí email verify es fax y si recuerdan en el tutorial anterior que pues colocamos este observador y el mismo observador pues ya nos manda ciertos datos entre ellos e.mail verify pues con este dato vamos a mostrar al usuario si su correo está o no verificado así que vamos a hacer lo siguiente voy a copiar este código y le voy a decir sí el email no está verificado es igual a falso vas a agarrar y vas a mostrar un mensaje el cual primero voy a guardar aquí bueno string que se va a llamar texto verde picado igual a un texto vacío y lo voy a llenar acá le voy a decir texto verificado iguala email e mail gmail no verificado perfecto de lo contrario de lo contrario para decir email verificado ahí está así así de fácil y ahora este texto lo vamos a poner por donde por donde aquí en adelante del correo y va a estar más o menos pero es una variable que claro que le hago más que debe de tener este y está así para colocarle hay un espacio y cerramos el string.

07.-Agregar estilos con bootstrap

Hola que tal buenas tardes bienvenidos al programa de novato y en este vídeo vamos a hacer esto bueno ya esto ya lo hicimos pero nuestro código pues no fue o lo que le sigue lo vamos a convertir en esta preciosura en esta cosa de aquí en un área de login y registro como dios manda así con su botoncito con bueno que se lo que no que se registre en un botón más o menos decente todo todo todo muy bonito y pues comencemos cómo vamos a lograr esto con busta tú manejas buscar mira esto va a ser súper fácil para ti es más si la manejas muestras nada más con esto yo creo que ya con ver esto que yo creo que ya puedes este de este estilo si no manejas mostrar aquí vas a aprender y muy fácil y rápido en este pequeño vamos a si no les gusta que bueno por ti porque vas a matar dos pájaros de un tiro’ a sorprender freebase.

08.-Agregar funcionalidad con jquery

Bueno vamos a continuar estudiando nuestro más bonito nuestro blogging si se dan cuenta que hay un espacio bueno aquí falta un espacio entre este botón y esto sin tu texto así que lo vamos a hacer con una clase esta clase es este de aquí justo un control control check out y le estamos dando un margen de 2 no voy a cerrar por aquí y ahí está y listo ahora vamos a ver cómo quedó perfecto pero faltaría darle la funcionalidad y además de la funcionalidad nos faltaría decirle qué es lo que se va a mostrar en qué momento y le voy a decir que cuando esté en estado o no diga registro o registrar y cuando esté en 11 días quedarse ahí está a ver ahí está darse y registrarse muy bien registrarse adaptados muy bien ahora vamos a colocarle vamos a hacer ahora la funcionalidad para esto le tengo que agregar aquí nombre vuelva a ser un login registro hacer porque este es el que va a soltar ya sea desde el login hacia el registro y le vamos a colocar una funcionalidad en javascript.

09.-Agregar mas funcionalidad con jquery

Hola hola que tal buenas tardes bienvenidos al programa dorado y en este tutorial vamos a matar dos pájaros de un tiro’ en primer lugar vamos a darle más funcionalidad a este área de login porque esto de que ya está registrado y todavía te puedes mover aquí al área del hogar te de registro como que no checa no cuadra y en segundo lugar vamos a colocar esto como dios manda o sea nuestros scripts los vamos a colocar en un nuevo archivo y pues comencemos vamos a obviamente a crear un nuevo archivo no file este se va a llamar junto a js porque porque así lo maneja así se maneja aquí en miami en feve se bueno en muchas partes se maneja si le ponen a la aplicación copiamos bueno cortamos este código lo pegamos acá le borramos esto de los scripts porque cuando es un código en javascript ya no se coloca eso y lo vamos a intentar de nuevo en la descripción del vídeo les voy a enseñar cómo se intenta en visual studio code.