Lo primero que debemos hacer para incluir firebase en nuestro sitio es agregar la librería en el encabezado del sitio

	
		<script src="https://www.gstatic.com/firebasejs/4.2.0/firebase.js"></script>
	

Ahora, dentro de un script de nuestra página, se debe inicializar con los valores dados

	
		var config = {
			apiKey: "PUBLIC_API_KEY",
			authDomain: "DOMAIN",
			databaseURL: "DATABASE_URL",
			storageBucket: "STORAGE_BUCKED",
			messagingSenderId: "SENDER_ID"
		};
		firebase.initializeApp(config);
	

¿Cómo agrego rápidamente una variable en firebase? ¿Para qué me serviría? ¿Vale la pena el esfuerzo?

Las respuestas a éstas preguntas suelen ser "Es fácil", "Depende de para qué la ocupes", "Tal vez". Yo por ejemplo, incluí un "Selector de tema de color" en la parte inferior del sitio. Lo hermoso es que al momento de modificarlo, todos los visitantes del sitio lo verán del mismo color que yo he seleccionado sin necesidad de recargar la página ¡en tiempo real!. Quizás no es algo muy asombroso, pero abre la puerta a muchas interacciones que se pueden realizar entre visitantes de una misma web o proyecto

Una vez que firebase está instalado, lo primero que hago es agregar mi control en el HTML, en éste caso un simple selector

	
		<div class="input-field col s12">	
		    <select id="colorThemeSelector">	
		      <option value="" disabled selected>Theme</option>	
		      <option value="indigo">	Indigo</option>	
		      <option value="red">Red</option>	
		      <option value="pink">Pink</option>	
		      <option value="purple">Purple</option>	
		      <option value="blue">Blue</option>	
		      <option value="teal">Teal</option>
		      <option value="green">Green</option>	
		      <option value="lime">Lime</option>	
		      <option value="amber">Amber</option>	
		      <option value="grey">Grey</option>	
		    </select>	
		    <label class="white-text">RT Theme Color Selector</label>	
		</div>
		

Para ahorrar algo de trabajo futuro (si deseo agregar o modificar los colores), creo variables de control que me ayuden al momento de reemplazar las clases de color

	
		var colorThemeClasses = "",
			colorThemeTextClasses  = "";
		...
		$("#colorThemeSelector option").each(function(i, item){
			var val = $(item).val();
			if (val) {
				colorThemeClasses += val + " ";
				colorThemeTextClasses += val + "-text ";
			}
		});	
		

Creo una función que será la encargada del cambio del color en el sitio. Recibe como parámetro el color que deseo utilizar. Simplemente busco los objetos dentro de la página con la clase "themeColorText" y "themeColor" para reemplazar los colores actuales por el nuevo.

	
		function changeTheme(colorTheme) {
			$(".themeColorText").removeClass(colorThemeTextClasses).addClass(colorTheme + "-text");
			$(".themeColor").removeClass(colorThemeClasses).addClass(colorTheme);
		}	
	

De firebase, obtengo la base de datos y busco una referencia a "colorTheme" (si no existe en la BD, al momento de agregarle un valor éste se crea por lo que no me preocupo), y creo un handler tal que al modificarse en la BD el color, invoque a mi método de cambio de color en la página definido en el paso anterior

	
		var databaseColorRef = firebase.database().ref("colorTheme");
		databaseColorRef.on("value", function(snap){
			color = snap.val();
			changeTheme(color);
		});
		

Finalmente, asigno al evento de cambio del selector una función que se encarga de guardar en la base de datos el nuevo valor seleccionado. Ésto de manera automática llamará al handler definido en todos los visitantes activos (incluyéndome) y para cada uno le pondrá el color que he seleccionado en éste instante.

	
		$("#colorThemeSelector").change(function(){
			databaseColorRef.set($(this).val());
		});