Share
En el tutorial de hoy, lo pondremos en marcha con Firebase mediante la creación de una aplicación de sala de chat simple aprovechando la API de JavaScript de Firebase. Esta aplicación le proporcionará los componentes básicos para desarrollar aplicaciones en tiempo real más avanzadas en sus propios proyectos..
Para que Firebase esté en funcionamiento, tendrá que crear una cuenta de desarrollador gratuita visitando su sitio web y registrándose. Una vez que se haya registrado correctamente, Firebase lo redirigirá al panel de control de su cuenta, donde tendrá acceso a todas sus ubicaciones de datos de Firebase y otras características interesantes. Sin embargo, ahora mismo debe seleccionar la ubicación de datos de Firebase titulada, Mi primera aplicación. Siéntase libre de cambiar el nombre de esta aplicación o crear una nueva.
Cuando se creó la ubicación de datos de Firebase, se le asignó su propia y única nombre de host. Este nombre de host único es muy importante; porque esta es la ubicación donde se leerán y escribirán sus datos también. Discutiremos el nombre del host con mayor profundidad, más adelante en el tutorial pero por ahora:
El primer elemento de la agenda: crear un nuevo archivo HTML que haga referencia al cliente Firebase, jQuery y Bootstrap CDN. Es bastante obvio que necesitamos hacer referencia al CDN de Firebase. Ahora, puede que no sea tan claro por qué nos estamos refiriendo tanto a jQuery como a Bootstrap. Estoy usando tanto jQuery como Bootstrap para el rápido desarrollo de aplicaciones. Ambas bibliotecas me permiten hacer las cosas muy rápidamente y no requieren mucha codificación manual. Sin embargo, no cubriré jQuery o Bootstrap en ningún gran detalle; así que siéntase libre de aprender más sobre estas bibliotecas de JavaScript por su cuenta.
El marcado que implementa lo que describí es el siguiente:
Aplicación de chat de Firebase
Ahora que hemos creado nuestro archivo HTML y que hace referencia a los CDN correctos, comencemos a trabajar en el resto de nuestra aplicación.
Primero, necesitamos determinar qué funcionalidad esencial necesitará esta aplicación. Parece que la mayoría de las aplicaciones de estilo de sala de chat tienen dos similitudes: un cuadro de mensaje para enviar mensajes a un servidor y una sección que se llena con los mensajes de un servidor. En nuestro caso, este servidor será nuestra ubicación de datos Firebase..
Implementemos el cuadro de mensajes para enviar mensajes a un servidor de antemano. Esto requerirá que creemos una interfaz simple que incluya un entrada campo y un enviar botón envuelto dentro formar etiquetas Ya que estamos haciendo referencia a la hoja de estilo Bootstrap, tenemos la conveniencia de usar algunos estilos predefinidos de bootstrap para crear la interfaz. Como dije anteriormente, esto es muy conveniente y nos permite escribir menos código a mano.
Así que primero coloquemos un div con el atributo de clase envase directamente después de la apertura cuerpo etiqueta dentro del archivo HTML. Esta es una función bootstrap que proporciona restricciones de ancho y relleno para el contenido de la página. Dentro de las etiquetas del contenedor, vamos a agregar un título envuelto dentro de H1 etiquetas, para que podamos dar a la aplicación un nombre descriptivo. Mi título será, "Firebase Chat Application". Siéntete libre de usar tu propia creatividad al escribir tu título.
El marcado que implementa lo que describí anteriormente, se ve así:
Aplicación de chat de Firebase
Además, también tenemos que añadir un div con atributos de clase: panel y panel predeterminado. Un panel es un componente de Bootstrap que proporciona una caja simple que contiene cuatro DIV interiores: encabezado del panel, título del panel, panel-cuerpo, y panel de pie de página por defecto. No vamos a utilizar encabezado del panel y título del panel pero usaremos ambos panel-cuerpo y panel de pie de página. los panel DIV se utilizará como el contenedor principal para el cliente de la sala de chat.
El marcado que implementa lo que describí anteriormente, es el siguiente:
Aplicación de chat de Firebase
Por el momento, no estaremos trabajando con el panel-cuerpo. Sin embargo, necesitaremos usar esta sección más adelante en el tutorial para llenar mensajes desde nuestra ubicación de datos.
En este momento nos enfocaremos en el panel de pie de página div. El pie de página del panel contendrá un campo de entrada, un botón de envío y un botón de reinicio. Le daremos al campo de entrada un ID de atributo de comentarios y el botón enviar un ID de atributo de enviar-btn. Ambos atributos de identificación son muy importantes y se necesitarán más adelante en el tutorial. Siéntase libre de alterar los ID de atributo para los elementos de formulario.
El marcado que implementa lo que describí anteriormente, es el siguiente:
Aplicación de chat de Firebase
Ahora implementemos el JavaScript que nos permitirá enviar el mensaje a la ubicación de datos de Firebase.
Primero necesitamos agregar un conjunto de guión etiquetas directamente encima del cierre cuerpo etiqueta, dentro del archivo HTML. Dentro de las etiquetas de secuencia de comandos, debemos crear una referencia a la ubicación de los datos de Firebase. Sin esta referencia, no podemos escribir datos en nuestra ubicación de datos. Esto se puede lograr inicializando el constructor Firebase y pasando nuestra ubicación de datos como parámetro. Recuerde, la ubicación de los datos de Firebase se creó al configurar Firebase (el nombre de host único).
El código que implementa lo que describí anteriormente, es el siguiente:
Accentsconagua
var fireBaseRef = new Firebase ("TU URL DE DATOS DE FIREBASE"); Después de inicializar el objeto de referencia de Firebase, debemos vincular un controlador de eventos de clic al selector de botón de envío. La ubicación de este selector está dentro del pie del panel. Además, debemos asegurarnos de que la devolución de llamada del controlador de eventos contenga una falso retorno Declaración como la última línea de código. Esto asegurará que la acción predeterminada de enviar el formulario, no ocurra, y evitará que el evento burbujee en el árbol DOM. Sin embargo, en algunos casos es posible que desee que se produzcan burbujas de eventos..
Los dos fragmentos de JavaScript a continuación implementan lo que se describe anteriormente:
$ ("# submit-btn"). bind ("click", function () return false;); $ ("# submit-btn"). bind ("click", function (event) event.preventDefault (); event.stopPropagation ();); A continuación, definiremos una variable que haga referencia al selector del comentario y otra variable que elimine los espacios en blanco desde el principio y el final del valor del comentario..
El código que implementa lo que describí anteriormente, es el siguiente:
$ ("# submit-btn"). bind ("click", function () var comment = $ ("# comments"); var comment_value = $ .trim (comment.val ()); devolver falso;) ; Ahora necesitamos determinar el método necesario para escribir estos comentarios en realidad en nuestra ubicación de datos.
La API de Firebase ofrece varios métodos para escribir datos en una ubicación de datos. Sin embargo, en el tutorial de hoy nos centraremos en utilizar el conjunto() y empujar() metodos Repasemos brevemente lo que cada uno de estos métodos nos permite hacer..
conjunto() El método escribirá los datos en la ubicación de los datos, así como sobreescribirá cualquier información que esté actualmente almacenada en la ubicación de los datos..empujar() El método escribirá los datos en la ubicación de los datos al generar automáticamente una nueva ubicación secundaria con un nombre único. Además, este nombre único será prefijado con una marca de tiempo. Esto permitirá que todas las ubicaciones de los niños se ordenen cronológicamente.Después de revisar tanto el conjunto() y empujar() metodos Creo que es bastante evidente que tenemos que aprovechar el empujar() Método en nuestra aplicación. De lo contrario, sobrescribiremos continuamente el último comentario en nuestra ubicación de datos y no sería divertido.
Para hacer esto, saltemos al JavaScript que agregamos previamente a nuestra página. Ahora debemos enviar el valor del comentario a nuestra ubicación de datos. Ahora ten en cuenta que hay diferentes empujar Métodos que nos permiten enviar datos en varios formatos, como un objeto, matriz, cadena, número, booleano o nulo. Solo usaremos un objeto que tenga un par de valores clave de un comentario y un valor de comentario. Además, adjuntaremos una devolución de llamada opcional para disparar después de la empujar Los métodos han terminado. La devolución de llamada devolverá un objeto de error en caso de error, y en caso de éxito, un valor nulo.
El código que implementa lo que describí anteriormente, es el siguiente:
$ ("# submit-btn"). bind ("click", function () var comment = $ ("# comments"); var commentValue = $ .trim (comment.val ()); fireBaseRef.push ( comment: commentValue, function (error) if (error! == null) alert ('No se pueden enviar comentarios a Firebase!');); return false;); Ahora agreguemos algo para asegurarnos de que los usuarios de la sala de chat no puedan escribir mensajes en blanco en nuestra ubicación de datos. Esto se puede lograr fácilmente agregando un simple si mas Declaración que verifica la longitud del valor del comentario..
El código que implementa lo que describí anteriormente, es el siguiente:
$ ("# submit-btn"). bind ("click", function () var comment = $ ("# comments"); var commentValue = $ .trim (comment.val ()); if (commentValue.length === 0) alert ('¡Se requieren comentarios para continuar!'); Else _fireBaseRef.push (comment: commentValue, function (error) if (error! == null) alert ('No se puede hacer enviar comentarios a Firebase! ');); comment.val (""); devolver falso;); Genial, hemos completado con éxito la sección de nuestra aplicación que permite a los usuarios escribir datos en nuestra ubicación de datos. Sin embargo, todavía nos falta la funcionalidad que proporciona a los usuarios una experiencia de chat en tiempo real. Este tipo de experiencia requerirá la capacidad de leer datos de las ubicaciones secundarias, dentro de la ubicación de datos.
Como mencionamos anteriormente, la mayoría de las aplicaciones de estilo de sala de chat leen datos de un servidor y luego llenan una sección de la interfaz. Tendremos que hacer lo mismo en nuestra aplicación, aprovechando la API de Firebase.
La API de Firebase ofrece varios métodos para leer datos desde una ubicación de datos. En el tutorial de hoy, nos centraremos en usar el en() método.
los en() El método tiene varios argumentos que vale la pena analizar, pero solo vamos a cubrir los dos primeros argumentos: tipo de evento y llamar de vuelta. Vamos a revisar ambos.
tipo de evento Los "tipo de evento"el argumento tiene varias opciones. Echemos un vistazo a cada uno de ellos para que podamos determinar cuál satisfará nuestras necesidades.
valor"- se activará una vez, y leerá todos los comentarios, y cada vez que se modifique un comentario, se activará de nuevo, y se leerán todos los comentarios.niño_added"- se activará una vez por cada comentario, así como cada vez que se agregue un nuevo comentario.remover a un niño"- se activará cada vez que se elimine un comentario.child_changed"- se activará cada vez que se cambie un comentario.child_moved"- se activará cada vez que se cambie la orden de un comentario.Después de revisar las opciones anteriores, parece bastante claro que deberíamos usar "niño_added" como el nuestro "tipo de evento". Este tipo de evento se activará una vez para cada comentario en nuestra ubicación de datos, así como cada vez que se agregue un nuevo comentario. Además, cuando se agrega un nuevo comentario, no se devolverá el conjunto completo de comentarios en esa ubicación pero solo el último niño agregado. Esto es exactamente lo que queremos. No hay necesidad de devolver todo el conjunto de comentarios, cuando se agrega un nuevo comentario..
llamar de vuelta Los "llamar de vuelta" Para el en() El método proporciona un elemento al que Firebase se refiere como una "instantánea de datos" que tiene varias funciones miembro, el enfoque de hoy está en nombre() y val ().
los nombre() La función miembro nos proporciona el nombre único de la "instantánea de datos". Si recuerdas antes, usamos el empujar() Función para escribir un nuevo comentario a nuestra ubicación de datos. Cuando empujar() se invocó, generó una nueva ubicación secundaria con un nombre único y ese es el nombre que se devolverá a través de la función miembro de devolución de llamada,nombre().
los val () La función miembro nos proporciona la representación del objeto JavaScript de la "instantánea de datos" y con esta instantánea, podremos recuperar un comentario de nuestra ubicación de datos. Sin embargo, tenemos que retroceder un momento.
Anteriormente en este tutorial, implementamos el JavaScript necesario para enviar comentarios a nuestra ubicación de Firebase y lo hicimos presionando un objeto con un par de valores clave. En este caso, la clave era "comentario"y el valor fue la entrada que ingresó el usuario. Por lo tanto, si queremos extraer un comentario de nuestra" instantánea de datos "necesitamos reconocer el tipo de datos correcto. En este caso, estamos tratando con un objeto, por lo que puede use la notación de puntos o la de corchetes para acceder a la propiedad especificada.
Ambos fragmentos de JavaScript a continuación, implementan lo que se describe anteriormente:
fireBaseRef.on ('child_added', function (snapshot) var uniqName = snapshot.name (); var comment = snapshot.val (). comment;); fireBaseRef.on ('child_added', function (snapshot) var uniqName = snapshot.name (); var comment = snapshot.val () ["comment"];); A continuación, vamos a crear una manera simple, pero limpia para mostrar cada comentario. Esto se puede lograr fácilmente envolviendo cada comentario dentro de un div y etiquetando cada comentario con su nombre único. Por lo general, los comentarios están etiquetados con el nombre del usuario que escribió ese comentario, en nuestro caso, este es un cliente de sala de chat anónimo..
El código que implementa lo que describí anteriormente, es el siguiente:
var commentsContainer = $ ('# comments-container'); PS', clase:' comentario-contenedor ') .html ('Comentario '+ uniqName +''+ comentario); A continuación, debemos adjuntar cada comentario al contenedor del comentario y obtener la posición vertical actual de la barra de desplazamiento del contenedor del comentario y desplazarnos a la ubicación más reciente. Esto asegurará que cada vez que se envíe un comentario a Firebase, todos los usuarios que utilicen la aplicación de chat verán el último comentario realizado. Todo esto debe hacerse dentro de la devolución de llamada.
Debería verse algo como esto:
var commentsContainer = $ ('# comments-container'); PS', clase:' comentario-contenedor ') .html ('Comentario '+ uniqName +''+ comentario) .appendTo (commentsContainer); commentsContainer.scrollTop (commentsContainer.prop ('scrollHeight')); Ahora apliquemos algunos estilos CSS simples a los DIVs que se envuelven alrededor de cada bloque de comentarios. Esto hará que la apariencia sea un poco más atractiva y fácil de usar. Estos estilos deben agregarse dentro de las etiquetas de estilo, ubicadas en el cabeza sección del HTML.
El código que implementa lo que describí anteriormente, es el siguiente:
.contenedor ancho máximo: 700 px; # comments-container border: 1px solid # d0d0d0; altura: 400px; overflow-y: scroll; .comment-container padding: 10px; margen: 6px; fondo: # f5f5f5; tamaño de fuente: 13px; -moz-border-radius: 5px; -webkit-border-radius: 5px; radio del borde: 5px; .comment-container .label margin-right: 20px; .comment-container: last-of-type border-bottom: none;
Ahora es el momento de ejecutar nuestra aplicación. Comencemos por abrir dos instancias de nuestro navegador favorito y moderno y colocarlos uno al lado del otro en nuestro escritorio. A continuación, buscaremos la ubicación del archivo de nuestro archivo que creamos en ambos navegadores. Pruébalo escribiendo algunos comentarios y disfruta viendo la magia de Firebase.
Es increíble que solo un par de líneas de código puedan producir una aplicación tan poderosa. Siéntase libre de editar este fragmento de código de cualquier manera para producir los resultados deseados..
Echa un vistazo a la demostración en línea para verlo en acción. A continuación se muestra el código fuente completo de toda la aplicación de sala de chat:
Aplicación de chat de Firebase Aplicación de chat de Firebase
En el tutorial de hoy, trabajamos durante todo el proceso de implementación de una aplicación de sala de chat simple aprovechando la API de JavaScript de Firebase. Al hacerlo, pudimos experimentar el poder de Firebase y obtener una apreciación por su comodidad. A continuación se presentan algunos de los elementos clave que encontramos hoy:
empujar método.en Método con el tipo de evento "niño_added".Espero que este tutorial le haya brindado el punto de partida que necesita para ir más allá con Firebase. Si tiene preguntas o comentarios, no dude en dejarlos a continuación. Gracias de nuevo por su tiempo y continúe explorando las infinitas posibilidades de la API de Firebase.
