Firebase desde cero: Un chat que funciona en real time

[@josetuz]

Gracias por este video, la verdad es una manera muy amera de aprender firebase para web. Saludos desde Argentina.

[@programacionymas]

Con gusto José, y gracias por comentar.

[@HectorRendon]

Exelente video, graias por compartir tus conocimientos y de una manera simple, efectiva y al grano.

[@programacionymas]

Gracias compañero! Un gusto que te haya sido de ayuda.

[@humbertojosuemendozagaspar6389]

Muy bien Explicado Saludos.. Me sirvió de mucho..

[@programacionymas]

Genial! Gracias por comentar.

[@f.vg0]

Muchas gracias, me ha sido muy útil :)

[@programacionymas]

Genial! Gracias por comentar.

[@obedcardona6717]

gracias me sirvio! Saludos desde Guatemala.

[@programacionymas]

Genial!

[@pedrovilla1183]

Excelente vídeo.. Muy bien explicado

[@x25fer]

Uncaught TypeError: Cannot read property 'addEventListener' of null at index.html:47

[@4rthurbl00]

Gracias por el contenido!!!!

[@programacionymas]

Con gusto. Gracias también por comentar!

[@xhgc05]

Tengo un problema, cuando uso la funcion: firebase.database()... dice que no es una funcion, por qué?

[@programacionymas]

Es probable que estés ejecutando código javascript antes de cargar la biblioteca de firebase.

[@joseeduardovcn]

Cómo resolviste el problema ?

[@Oasis323]

@@programacionymas y cómo lo soluciono?

[@ElSystem32]

Pudieras hacer un video desde cero explicando mas sobre los servicios web RESTful, buen video.

[@jeanpaulgiraldo]

Excelente video!!! Corto y claro.

[@programacionymas]

Gracias por comentar Jean. Qué bueno que te haya sido de ayuda.

[@mr.robenrych8584]

gracias por tu ayuda, otros lugares solo programan y no explican ademas que no sirve de nada que usen firebase ya que usan mysql y no explican nada, gracias

[@programacionymas]

Genial! Gracias por comentar.

[@alew140]

oye muchas gracias por tu tiempo en la pregunta anterior. la solución y respuesta a mi pregunta era crear una instancia múltiple. firebase.google.com/docs/web/setup?authuser=0#additional_setup_options

[@programacionymas]

Gracias por el aporte!

[@rsfaelto1234]

gracias

[@programacionymas]

Gracias por comentar!

[@samiurias]

Amazing, thank you

[@programacionymas]

You're welcome!

[@mistyblunch]

muchas gracias

[@programacionymas]

Gracias por comentar!

[@kuntur.13]

No me esta saliendo, no me escribe en la base de datos de firebase. Al inspeccionar elemento de la pagina html en la parte Consola me salta este error: Uncaught TypeError: firebase.database is not a function Me parece que no esta reconociendo la función "firebase.database" .Me he fijado en firebase y el código cambio donde dice "Añade Firebase a tu aplicacion Web" será eso? se cambio "config" por "firebaseConfig " y se a añadido algunas lineas mas de código.

[@programacionymas]

Gracias Ivan por el aporte. Como comentas parece que hubieron algunos cambios en la configuración.

[@kuntur.13]

@@programacionymas hola, gracias por responder, acabo de ver otro código de otro canal y pasa lo mismo y buscando encontré que solo funciona el código antiguo, lo he probado y funciona , ahora cuando pueda probare lo que tu hiciste pero con el código antiguo , seguiré buscando para el código actual.

[@trefahso]

buen video, estuve siguiendo el tutorial, pero no he podido conectar con firebase, ya intente un monton de cosas y soy nuevo en esto, pero los datos no se envian a firebase, esta plataforma ha cambiado un poco su aspecto y al crear una coleccion me pierdo, tienes un tutorial mas reciente haciendo exactamente esto mismo?

[@programacionymas]

Hola, estás creando un Firbease DB o Firestore?

[@trefahso]

​@@programacionymas hola, pues le di en la opcion de realtime Database lo que creo que esta fallando en mi codigo es esta parte 16:56 tu colocas firebase.database().ref('chat').push({ name: nombre, message: mensaje }); la diferencia es que a mi con el cdn que pegué, se inicia de esta forma: // Initialize Firebase const app = initializeApp(firebaseConfig); const analytics = getAnalytics(app); entonces creo que deberia escribir esa linea de otra manera para llamar a firebase, mi navegador en consola dice: Uncaught ReferenceError: firebase is not defined at HTMLButtonElement. mi codigo es casi igual al tuyo pero no puedo colocar link aqui

[@bobsica9724]

Amigo se puede subir a un webhosting y que me escriba desde otro dispositivo?

[@programacionymas]

Efectivamente. Puedes usar Firebase Databases desde cualquier dispositivo cliente, y cada vez que se modifiquen los valores, se actualizará en cada uno de ellos.

[@bobsica9724]

Muchas gracias amigooo🍃

[@bobsica9724]

Amigo soy nuevo en esto

[@bobsica9724]

Como hiciste para agregar el nodo chat luego de cambiar las reglas

[@bobsica9724]

Ya que no me lo crea

[@centi-requiem8818]

Me preguntó si hay alguno repositorio de este código para compararlo con el mio me da error

[@programacionymas]

Desafortunadamente no llegué a subir el proyecto a GitHub y se perdió en mi antigua PC :( Aunque el ejemplo no es muy extenso y la mayor parte del código se llega a ver en el minuto 22:45 y la otra parte en 25:48. Te recomiendo también revisar la DevTools para ver mensajes de error con pistas de qué puede estar pasando.

[@Kuntur13]

@@programacionymas también me sale error, me sale esto: Uncaught TypeError: firebase.database is not a function ya revise el código una y otra ves y nada. parece que reconoces "firebase" , pero no "database( )"

[@programacionymas]

@@Kuntur13 Hola. Parece que en la actualidad debes cargar un JS de Firebase, luego otro del servicio de Database: En este enlace puedes encontrar las URLs para que así las puedas cargar a tu proyecto: firebase.google.com/docs/web/setup#libraries-cdn Usa las que aparecen en la categoría CDN.

[@mariajoseprieto5420]

@programación y más. Puedes hacer un video de esto en la actualidad?

[@programacionymas]

​@@mariajoseprieto5420 Es una buena idea. Gracias por la sugerencia.

[@vanessahenao9985]

muy buen video :)

[@maicolterrero461]

GENIAL GENIAL

[@programacionymas]

Qué bueno que te haya sido de ayuda!

[@alew140]

ya pasó un año pero de casualidad tienes el repositorio ?

[@programacionymas]

Hola Alejandro. Lo acabo de buscar pero no lo encuentro :/ Si llegas a seguir el ejemplo del video tal vez puedas compartirnos tu repositorio. Saludos.

[@alew140]

@@programacionymas tengo una duda quizas me puedas ayudar. estoy haciendo una API y quiero usar el servicio de autenticación desde otros dominios (terceros) es posible ?

[@programacionymas]

Es posible. Por ejemplo si tienes una app Android y tienes tu API con registro y login pero quieres que puedan ingresar también vía Facebook, puedes agregar el SDK de Fb a tu proyecto Android. Cuando inicien sesión desde sus cuentas obtendrás un token, que podrás usar desde tu backend para validar si es correcto y obtener los datos básicos del usuario.

[@alew140]

@@programacionymas no me explique bien... acceder desde otro dominio que no este en la lista blanca de auth firebase se puede ?

[@programacionymas]

Ese dominio puede implementar un protocolo como OAuth2, y entonces tú puedes usarlo desde tu API, independientemente de Firebase. Aquí una intro general sobre ese tema: programacionymas.com/blog/protocolo-oauth-2

[@cesargianfranconicoliniriv8398]

buen video :D

[@cesargianfranconicoliniriv8398]

con mucho esfuerzo he hecho una aplicación tiempo real usando node.js socket.io , laravel y a en vez de usar wamp server usé laravel homestead. Te paso el tutorial laracasts.com/series/real-time-laravel-with-socket-io . Me gustaría ver cómo lo harías usando laravel, ya que lo haces muy entendible.

[@programacionymas]

Hola. Disculpa, estuve un poco ocupado y no pude contestar, pero me acordé de tu comentario y por fin lo encuentro. Quería preguntarte, ahora que estás usando Laravel y Node.JS, ¿cómo llevaste todo a producción? Porque imagino que requieres de 2 servidores, Apache y Nginx, verdad? Yo cuando trabajé con realtime antes lo hice con Pusher, así solo usaba el servicio que ellos ofrecen sin requerir de un servidor adicional. Y en otro caso lo hice con Firebase, de la misma forma, sin requerir un servidor adicional. Saludos.

[@astrofenixsv]

Hola amigo, excelente video, como haces para crear un chat privado por cada persona? no un chat publico?

[@programacionymas]

Hola. En el video tenemos un único nodo llamado "chat". Tener varias conversaciones privadas implica tener un nodo llamado "chats" y dentro de él ir creando conversaciones más específicas. Supongamos que van a conversar 2 usuarios, un usuario A y un usuario B. Para ello tendrías dentro del nodo chats un nodo más específico, con un ID generado por Firebase, representando la conversación privada. Y dentro de este nodo los mensajes. Además de ello necesitarías un nodo "user-chats", donde tendrías el ID de cada usuario y en su interior el ID de otros usuarios con los que haya hablado, para que puedas saber qué chat privados mostrar. Lo que te comento es una idea general de cómo se podría implementar. Me parece interesante por lo que, probablemente haga pronto un video de esto. Por ser un chat privado implica usar las reglas de Firebase. Saludos.

[@astrofenixsv]

Seria excelente un video!

[@sebastianmedina5106]

Consulta! estamos a mayo del 2017 ¿ los ejemplos siguen sirviendo =) ? o ya todo se actualizo y el tutorial esta obsoleto xd?

[@programacionymas]

Mm parece que aun funciona, acabo de probar el ejemplo del video.

[@alvaromena100]

muchísimas gracias por el video, tengo una duda, si quisiera hacer un crud en firebase usando Javascript? por ejemplo una persona con atributos de nombre y apellido, se inserta en el nodo persona, pero como lo recupero luego si quiero editarlo o eliminarlo si tengo muchos registros? gracias por tu tiempo si logras responder mi duda, saludos :)

[@programacionymas]

Hola. Si tienes un nodo "personas", puedes hacer push sobre este nodo e ir agregando distintos objetos persona. Al hacer push se va a generar un ID único para la persona que acabas de insertar. Este ID lo puedes guardar en otro nodo según lo que necesites.

[@alvaromena100]

Programación y más Sí, justo lo ví en el vídeo usando push me crea un ID en base a la hora. maneja firebase pero lo q no logro entender es como obtener un ID de un nodo en específico de personas, q tal si en "personas" tengo 5 registros y quiero acceder al 2do para editar o eliminar sus atributos :o o simplemente mostrar sus atributos pero de ese segundo registro del nodo personas~ gracias por responder :D

[@programacionymas]

Mm, lo que puedes hacer es solicitar a firebase las últimas X personas registradas (o bien todas), y una vez que tienes los datos acceder a la 2da persona. O si tienes el ID de la 2da persona, solicitar sus datos directamente. Pero no puedes pedirle a firebase que te devuelva solo 1 persona en la posición X porque su forma de trabajar es por clave/valor.

[@alvaromena100]

ahhh cierto gracias,me diste una idea y en el caso si quisiera hacer un login pidiendo los registros de mi BD de firebase, en base a un usuario y password? no usando el servicio de autentifiacion de firebase...esq quiero hacer un login para mi app q lea registros de mi BD, si uso el servicio de autentificacion tendria q estar esos datos de correo tambien en mi BD imagino

[@programacionymas]

Sí es posible. Al iniciar sesión con firebase se genera un token al usuario que puedes pasarlo a tu propio servidor para verificar la autenticación: firebase.google.com/docs/auth/admin/verify-id-tokens#retrieve_id_tokens_on_clients La verdad es que tiempo atrás tuve la intención de conectar firebase con laravel, pero al final no lo llegué a hacer. Solo recuerdo que había que implementar JWT en el proyecto. En tu caso, tu app se basa en laravel?

[@melissavelozcampos1050]

es normal que al hacer click en comentar se actualiza toda la pagina? y no solo la sección de los comentarios?

[@programacionymas]

Hola Melissa, te refieres aquí en KZbin? O al botón "Enviar" del ejemplo del video?

[@melissavelozcampos1050]

Al del ejemplo del video , al hacer click en comentar se actualiza toda la pagina , lo que escribo se queda guardado y todo , pero es como si actualizara la pag.

[@programacionymas]

Ya sé! Creo que tienes el botón como type submit. Debe ser un button con type="button".

[@melissavelozcampos1050]

no tenia el botón como submit pero no le había puesto el type , y por fin se arreglo gracias a ti !!! te pasaste :)

[@programacionymas]

Sí, lo que sucede es que por defecto usa submit.

[@robertosepulveda6804]

Es gokú!

[@programacionymas]

No entendí muy bien el mensaje, pero gracias por comentar Roberto. Un saludo!

[@robertosepulveda6804]

a veces hablas como Gokú, lo cual es épico.

[@valeria-210]

Excelente viedeo! Como se podria hacer para tener un chat de uno a uno? es decir, de un usuario a otro usuario especifico? Gracias!

[@programacionymas]

Hola Valeria. Gracias por comentar. Para ello debes usar una estructura más elaborada en la base de datos. Hay ejemplos con Firebase sobre cómo crear un chat de 1-1 e incluso son salas de conversación. Por ejemplo: github.com/crazyhitty/firebase-chat Saludos.

[@gavoelpapi]

muy bueno amigo pero lo pude seguir hasta la alerta hasta ese momento me funciono. var html = ""+nombre+": "+ mensaje +""; en esta parte el simbolo + no se marca no se si son por las comillas o que sera. gracias por tu ayuda

[@programacionymas]

Hola. El fragmento de código que has copiado lo veo bien escrito. Es probable que haya faltado cerrar una comilla en una línea anterior.

[@gavoelpapi]

aqui me quede en el codigo Document Nombre Mensaje Enviar Nombre: Mensaje Nombre: Mensaje // Initialize Firebase var config = { apiKey: "AIzaSyCj2c9i6zXNwtucDgGTvC_Afx-kqkMhS0w", authDomain: "colina4342-17f0e.firebaseapp.com", databaseURL: "colina4342-17f0e.firebaseio.com", projectId: "colina4342-17f0e", storageBucket: "colina4342-17f0e.appspot.com", messagingSenderId: "294717807004" }; firebase.initializeApp(config); var TxtNombre = document.getElementById("nombre"); alert(nombre); var TxtMensaje = document.getElementById("mensaje"); var btnEnviar = document.getElementById("btnEnviar"); var chatUL = document.getElementById("chatUl"); btnEnviar.addEventListener("click", function(){ var nombre = TxtNombre.value; var mensaje = TxtMensaje.value; var html = ""+nombre+": "+ mensaje +""; chatUL.innerHTML+= html; firebase.database().ref('chat').push({ name: nombre, message: mensaje }); });

[@programacionymas]

En el label que dice Mensaje el for no tiene la comilla de cierre.

[@gavoelpapi]

escontre que > no van ">nombre" "nombre" y en mansaje Nombre Mensaje

[@allansanchezvalerio8118]

Excelente el ejemplo, justo lo que necesito. Una pregunta , como puedo hacer que un chat de escritorio creado en visual studio cargue los cambios aunque estos se produscan constantemente hasta en un segundo o menos? ya uso un metodo que consulta por webbrowser constantemente el elemento con un timer, pero tiende a ponerse lento y queria encontrar otra posible forma de implementar el listener en VB. gracias. Amo los wizard de final fntasy, porque tengo un proyecto basado en Final Fantasy Tactics, este es mi canal: kzbin.info/door/kGkKIs5yZ2Y1INLEzUTcEw

[@programacionymas]

Hola Allan. Yo hace unos años hice también un chat de escritorio que consistía en actualizar los datos cada segundo, recuerdo que estaba en Java y consultaba una base de datos online en MySQL. En tu caso hay algo que no entiendo bien, webBrowser no es un elemento para cargar una página? Es decir, por lo que entiendo el chat no lo tienes programado en VB, sino que el chat está en una página y lo que haces es mostrar esa página en el programa de escritorio. O tal vez estoy entendiendo mal. Acabo de googlear y veo que hay una biblioteca para VB.NET, tal vez te resulte útil: www.example-code.com/vbnet/firebase_get.asp Por cierto, lo de FF Tactics es un juego que lo has ido customizando? Yo antes jugaba mucho Tibia, y existían los OpenTibia Servers, no sé si sea similar a lo que estás haciendo, pero en todo caso se ven interesantes los videos de tu canal. Varios me han comentado que la imagen del canal viene de Final Fantasy, aunque en realidad yo solo había buscado la imagen de un mago y ésta fue la que me pareció mejor. Saludos.

[@programacionymas]

Muchos éxitos en tu proyecto Allan. De seguro que consigues terminarlo. Cuando haces algo que te gusta, solo es cuestión de tiempo para alcanzar la meta jeje. Al inicio la programación parece mucho un tema de prueba y error, pero a medida que más conoces un lenguaje y sus bibliotecas, desarrollas una afinidad y es cada vez más sencillo (siempre está presente una sensación de desconfianza por ir probando cosas nuevas pero la idea es ir con calma y haciendo una cosa a la vez). Saludos.

[@AIgencify]

no funciona amigoo.. firebase.database().ref('chat2').on('value'. function(snapshot) { var html = ""; snapshot.forEach(function (e){ var element = e.val(); var nombre = element.name; var mensaje = element.message; html += ""+nombre+": "+mensaje+""; }) txchatUl.innerHtml = html; });

[@programacionymas]

Hola. ¿Puedes poner por aquí el mensaje de error que obtienes? Así podré ayudarte a identificar qué ocurre.

[@AIgencify]

era un punto que molestaba , igualmente no me importa el chat a mi html! cabe destacar que tengo esto en mi html main> Nombre