Empecemos con los básicos de jQuery. jQuery nos permite manejar el DOM de una manera dinámica, hacer peticiones, manipular datos..... y de una manera muy sencilla, y realmente podemos hacer casi de todo, iremos viendo un poco de todo en varios post.
\nPrimero vamos con un ejemplo sencillo
<!DOCTYPE html>\n<html lang="es">\n\n<head>\n <meta charset="UTF-8">\n <meta http-equiv="Content-type" content="text/html">\n <title>Leccion 01</title>\n <script src="lib/jquery-3.3.1.min.js"></script>\n</head>\n<style>\n .textoVerde {\n color: green;\n }\n</style>\n\n<body>\n\n <ul>\n <li>Hola 1</li>\n <li>Hola 2</li>\n <li>Hola 3</li>\n </ul>\n\n <ul>\n <li>Negrita</li>\n <li>Negrita 2</li>\n <li>Negrita 3</li>\n </ul>\n\n <script>\n jQuery('ul').addClass('textoVerde');\n\n jQuery('ul').css('font-weight','bold')\n </script>\n\n\n</body>\n<script></script>\n\n</html>\nComo véis tenemos un html básico con dos listas, y en ellas cambiamos proopiedades, añadimos una clase css en una de las funciones de jQuery y en la otra le añadimos un estilo de css directamente, esto seria lo mismo que tener un html de esta forma
\n<!DOCTYPE html>\n<html lang="es">\n\n<head>\n <meta charset="UTF-8">\n <meta http-equiv="Content-type" content="text/html">\n <title>Leccion 01</title>\n <script src="lib/jquery-3.3.1.min.js"></script>\n</head>\n<style>\n .textoVerde {\n color: green;\n }\n</style>\n\n<body>\n\n <ul class="textoVerde">\n <li>Hola 1</li>\n <li>Hola 2</li>\n <li>Hola 3</li>\n </ul>\n\n <ul style="font-weight:bold;">\n <li>Negrita</li>\n <li>Negrita 2</li>\n <li>Negrita 3</li>\n </ul>\n\n <script>\n //jQuery('ul').addClass('textoVerde');\n\n //jQuery('ul').css('font-weight','bold')\n </script>\n\n\n</body>\n\n</html>\nSi os fijáis hemos comentado los métodos de jQuery y hemos puesto directamente en uno la clase y en el otro un estilo de css.
\nAlgunas veces tenemos en distintos lugares ciertas funciones o variables, esto nos puede dar problemas en lenguajes como html ya que el lenguaje es interpretado de arriba hacia abajo es posible que estemos ejecutando un cambio en un elemento que todavía no ha sido leído por el interprete por lo que el cambio no se producirá, para ello jQuery nos proveé de el método ready que nos permite esperar hasta que algo haya sido cargado o leído completamente, veamoslo con un ejemplo.
\nSi nosotros pusieramos los métodos anteriormente mencionados en el header, por ejemplo, no se produciría ningún cambio en la página (si no os fiáis de mi probarlo ;) ), pero si por lo que fuera tenemos que cargar algo en el header lo podríamos hacer de esta forma
\n<script>\n $(document).ready(function() {\n $('ul').addClass('textoVerde');\n $('ul').css('font-weight','bold')\n });\n</script>\nMetiendo nuestro código dentro de la función o método anterior, todo se ejecutará tras la carga de la página o documento completo.
\njQuery nos da una forma más corta para hacer lo mismo:
<script>\n $(function() {\n $('ul').addClass('textoVerde');\n $('ul').css('font-weight','bold')\n });\n</script>\nEsto es lo mismo que lo anterior, y si pensamos en las arrow functions todavía podemos ahorrarnos algo más:
\n<script>\n $(() => {\n $('ul').addClass('textoVerde');\n $('ul').css('font-weight','bold')\n });\n</script>\nLas tres son la misma función, solo que como es algo muy habitual de usar, le han dado algo de azúcar sintactico para hacer más cómodo su uso.
\nVamos a ver un ejemplo cortito de uso de algunas funciones para añadir, eliminar clases y atributos a elementos del DOM
\n<script>\n\n\t$("img")\n\t\t.attr("src","img/photo2.jpg")\n\t\t.removeClass('img-circle')\n\t\t.addClass('img-thumbnail');\n\n</script>\nEsto lo que hace es: primero cambia el atributo src de la imagen, segundo elimina la clase img-circle y tercero añade la clase img-thumbnail
\nEstas son algunas de las cosas más básicas que podemos ir haciendo con jQuery, iré haciendo más post de jQuery con ejemplos de uso. Nos vemos en el siguiente, un abrazooorrrr
\n","url":"https://jlgarcia.fulldev.ninja/jquery-basics-i/","canonical_url":null,"uuid":"09e07f3e-e198-4216-b950-9b024c3142e4","codeinjection_foot":null,"codeinjection_head":null,"codeinjection_styles":null,"comment_id":"5a81da9b8cda356bbe9bbe20","reading_time":3,"send_email_when_published":false,"email_subject":null,"childHtmlRehype":{"html":"Empecemos con los básicos de jQuery. jQuery nos permite manejar el DOM de una manera dinámica, hacer peticiones, manipular datos..... y de una manera muy sencilla, y realmente podemos hacer casi de todo, iremos viendo un poco de todo en varios post.
\nPrimero vamos con un ejemplo sencillo
<!DOCTYPE html>\n<html lang=\"es\">\n\n<head>\n <meta charset=\"UTF-8\">\n <meta http-equiv=\"Content-type\" content=\"text/html\">\n <title>Leccion 01</title>\n <script src=\"lib/jquery-3.3.1.min.js\"></script>\n</head>\n<style>\n .textoVerde {\n color: green;\n }\n</style>\n\n<body>\n\n <ul>\n <li>Hola 1</li>\n <li>Hola 2</li>\n <li>Hola 3</li>\n </ul>\n\n <ul>\n <li>Negrita</li>\n <li>Negrita 2</li>\n <li>Negrita 3</li>\n </ul>\n\n <script>\n jQuery('ul').addClass('textoVerde');\n\n jQuery('ul').css('font-weight','bold')\n </script>\n\n\n</body>\n<script></script>\n\n</html>\nComo véis tenemos un html básico con dos listas, y en ellas cambiamos proopiedades, añadimos una clase css en una de las funciones de jQuery y en la otra le añadimos un estilo de css directamente, esto seria lo mismo que tener un html de esta forma
\n<!DOCTYPE html>\n<html lang=\"es\">\n\n<head>\n <meta charset=\"UTF-8\">\n <meta http-equiv=\"Content-type\" content=\"text/html\">\n <title>Leccion 01</title>\n <script src=\"lib/jquery-3.3.1.min.js\"></script>\n</head>\n<style>\n .textoVerde {\n color: green;\n }\n</style>\n\n<body>\n\n <ul class=\"textoVerde\">\n <li>Hola 1</li>\n <li>Hola 2</li>\n <li>Hola 3</li>\n </ul>\n\n <ul style=\"font-weight:bold;\">\n <li>Negrita</li>\n <li>Negrita 2</li>\n <li>Negrita 3</li>\n </ul>\n\n <script>\n //jQuery('ul').addClass('textoVerde');\n\n //jQuery('ul').css('font-weight','bold')\n </script>\n\n\n</body>\n\n</html>\nSi os fijáis hemos comentado los métodos de jQuery y hemos puesto directamente en uno la clase y en el otro un estilo de css.
\nAlgunas veces tenemos en distintos lugares ciertas funciones o variables, esto nos puede dar problemas en lenguajes como html ya que el lenguaje es interpretado de arriba hacia abajo es posible que estemos ejecutando un cambio en un elemento que todavía no ha sido leído por el interprete por lo que el cambio no se producirá, para ello jQuery nos proveé de el método ready que nos permite esperar hasta que algo haya sido cargado o leído completamente, veamoslo con un ejemplo.
\nSi nosotros pusieramos los métodos anteriormente mencionados en el header, por ejemplo, no se produciría ningún cambio en la página (si no os fiáis de mi probarlo ;) ), pero si por lo que fuera tenemos que cargar algo en el header lo podríamos hacer de esta forma
\n<script>\n $(document).ready(function() {\n $('ul').addClass('textoVerde');\n $('ul').css('font-weight','bold')\n });\n</script>\nMetiendo nuestro código dentro de la función o método anterior, todo se ejecutará tras la carga de la página o documento completo.
\njQuery nos da una forma más corta para hacer lo mismo:
<script>\n $(function() {\n $('ul').addClass('textoVerde');\n $('ul').css('font-weight','bold')\n });\n</script>\nEsto es lo mismo que lo anterior, y si pensamos en las arrow functions todavía podemos ahorrarnos algo más:
\n<script>\n $(() => {\n $('ul').addClass('textoVerde');\n $('ul').css('font-weight','bold')\n });\n</script>\nLas tres son la misma función, solo que como es algo muy habitual de usar, le han dado algo de azúcar sintactico para hacer más cómodo su uso.
\nVamos a ver un ejemplo cortito de uso de algunas funciones para añadir, eliminar clases y atributos a elementos del DOM
\n<script>\n\n\t$(\"img\")\n\t\t.attr(\"src\",\"img/photo2.jpg\")\n\t\t.removeClass('img-circle')\n\t\t.addClass('img-thumbnail');\n\n</script>\nEsto lo que hace es: primero cambia el atributo src de la imagen, segundo elimina la clase img-circle y tercero añade la clase img-thumbnail
\nEstas son algunas de las cosas más básicas que podemos ir haciendo con jQuery, iré haciendo más post de jQuery con ejemplos de uso. Nos vemos en el siguiente, un abrazooorrrr
\n","htmlAst":{"type":"root","children":[{"type":"comment","value":"kg-card-begin: markdown"},{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"Empecemos con los básicos de jQuery. jQuery nos permite manejar el DOM de una manera dinámica, hacer peticiones, manipular datos..... y de una manera muy sencilla, y realmente podemos hacer casi de todo, iremos viendo un poco de todo en varios post."},{"type":"element","tagName":"br","properties":{},"children":[]},{"type":"text","value":"\nPrimero vamos con un ejemplo sencillo"}]},{"type":"text","value":"\n"},{"type":"element","tagName":"h2","properties":{"id":"ejemplodeusobsicodejquery"},"children":[{"type":"text","value":"Ejemplo de uso básico de jQuery"}]},{"type":"text","value":"\n"},{"type":"element","tagName":"div","properties":{"className":["kg-card","kg-code-card","gatsby-highlight"],"dataLanguage":"text"},"children":[{"type":"element","tagName":"pre","properties":{"className":["language-text"]},"children":[{"type":"element","tagName":"code","properties":{"className":["language-text"]},"children":[{"type":"text","value":"\n\n\n\n \n \nVamos con un ejemplo de creación de un Slideshow muy simple en jQuery. Lo primero de todo es generarnos la estructura del proyecto, cada uno que la haga como quiera, yo tengo algo así
\n![\"folders\"](\"https://jlgarcia.fulldev.ninja/assets/images/2018/02/folders.JPG\")
En mi caso voy a usar bootstrap, por comodidad, pero no es necesario, lo añado al index.html al igual que jQuery. También he creado mi propio fichero de estilo style.css y lo he añadido, quedando todo de esta manera:
\n<!DOCTYPE html>\n<html lang="en">\n<head>\n <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />\n <title>Ninja_slider</title>\n\n <script src="https://code.jquery.com/jquery-3.3.1.min.js"></script>\n\n <link rel="stylesheet" href="css/bootstrap.min.css">\n <link rel="stylesheet" href="css/style.css">\n \n</head>\n<body>\n \n</body>\n</html>\nLo siguiente es añadir donde estará el slider en el body de la página
\n<body>\n\n <div class="container" align="center">\n <h1>Ninja-Slider</h1>\n <hr>\n\n <div class="ninjaSlider"></div>\n\n </div>\n \n</body>\nNuestro slider como os podéis imaginar estará en el div con la clase ninjaSlider, y esto es todo por el momento en el html, ahora vamos a nuestro css para darle un poco de estilo y que se vea algo en la página. Le daremos un tamaño y un color de fondo para ir viendo algo.
\n.ninjaSlider{\n\tbackground-color: blue;\n\twidth: 600px;\n\theight: 300px;\n\toverflow: hidden;\n\tmargin-bottom: 10px;\n}\nQuedando así
\n![\"background\"](\"https://jlgarcia.fulldev.ninja/assets/images/2018/02/background.JPG\")
Bien ahora vamos a crear un fichero js donde meteremos toda la lógica de funcionamiento de nuestro slider. Tener en cuenta que la idea es hacerlo estilo plugin, es decir que este encapsulado para poder usarlo en cualquiera de nuestros proyectos.
\nBien lo primero como hemos comentado es crearnos el fichero js y meterlo en la carpeta correspondiente, lo siguiente son las imágenes para que slider tenga algo que mostrar, entonces buscamos unas cuantas imágenes, yo me he descargado 4 y las metemos en la carpeta img.
Una vez que tenemos las imagenes ya podemos empezar, con el js. Creamos una función anónima que se ejecute nada más cargar el js en el HTML:
\n(function(){\n //Aqui dentro meteríamos todo el código.\n})();\nVamos a empezar por algo sencillo, que es recibir las imagenes desde el html que es desde donde nos las mandarían si pensamos que este es un plugin. Estas imágenes las incluiremos en una lista, es decir, dentro de un ul de html.
\nPero antes de hacer esto, pensemos...¿cómo hacemos para pasar los datos que necesitemos a nuestro plugin?, fácil, por parámetros le pasamos un objecto que tenga las modificaciones que queramos hacer.
\nPrimero creemos un método, que será el que realmente configure e inicie nuestro slider
(function(){\n $.ninjaShow = function(config){\n \n }\n})();\nAqui hemos añadido la función ninjaShow a jQuery, por lo que la podemos llamar desde cualquier sitio desde el que podamos llamar a jQuery. A esta función le pasamos por parámetro un objeto config que tendrá todos los cambios sobre la configuración por defecto que establezcamos.
\nContinuemos añadiendo lógica para nuestras imagenes, suponiendo que nos indiquen cuales son las imágenes a través del objeto config, podemos tener nuestras imagenes bajo la propiedad images dentro del objeto config. Hagamos una prueba para que veáis de lo que estoy hablando, nos vamos a nuestro index.html y añadimos lo siguiente al final (pero siempre dentro del body)
<!-- añadimos nuestro js al html -->\n<script src="js/slider.js"></script>\n<script>\n\t//Llamamos a nuestra función pasandole un objeto con la propiedad images\n\t$.ninjaShow({\n\n images:['img/ninja1.jpg','img/ninja2.jpg','img/ninja3.jpg','img/ninja4.jpg'],\n\t});\n\n</script>\n</body>\nY luego en nuestro fichero js, ponemos un log para ver que estamos recibiendo.
\n(function(){\n\n $.ninjaShow = function( config ){\n\n console.log(config);\n }\n\n})();\nSi guardamos y miramos la consola al ejecutar nuestro index.html, veremos algo como lo siguiente
\n![\"images\"](\"https://jlgarcia.fulldev.ninja/assets/images/2018/02/images.JPG\")
Es decir, un objeto con la propiedad images y dentro de esta un array con la dirección donde estan nuestras imágenes.
\nEntonces ya tenemos nuestras imágenes, ahora creemos la lista con ellas.
(function(){\n\n $.ninjaShow = function( config ){\n //Comprobamos que nos pasan alguna imagen\n if (config.images.length == 0){\n alert("Necesitamos alguna imagen para mostrar");\n return;\n }\n\n //Abrimos la lista\n var imgList = "<ul>";\n\n //Recorremos el array y vamos añadiendo lineas con nuestra imagen como source\n config.images.map((img)=>{\n imgList += '<li><img src="'+ img +'"</li>';\n })\n //Cerramos la lista\n imgList += "</ul>";\n \n //Adjuntamos la lista al contenedor\n $(".ninjaSlider").append(imgList);\n }\n\n})();\nSi ejecutamos nuestro index.html veremos algo similar a esto:
\n![\"example\"](\"https://jlgarcia.fulldev.ninja/assets/images/2018/02/example.JPG\")
Ahora mismo no vemos casi nada, ¿verdad?, vamos a modificar un poco el estilo para que veamos que realmente las cosas estan donde deben estar. Nos vamos a nuestro style.css y lo dejamos así
\n.ninjaSlider{\n\tbackground-color: blue;\n\twidth: 600px;\n\theight: 300px;\n\t/* overflow: hidden; */\n\tmargin-bottom: 10px;\n}\n\n.ninjaSlider ul{\n\tpadding: 0;\n\tlist-style-type: none;\n\tmargin-left: 0px;\n\tdisplay: flex;\n}\nAhora si veríamos algo aunque solo sean las imágenes
\n![\"example2\"](\"https://jlgarcia.fulldev.ninja/assets/images/2018/02/example2.JPG\")
Pero si miramos el código fuente de la página deberíamos ver algo como esto:
\n![\"example3\"](\"https://jlgarcia.fulldev.ninja/assets/images/2018/02/example3.JPG\")
Ya tenemos nuestra lista de imágenes, y las vemos porque hemos cambiado la propiedad overflow de css, la configuración correcta sería descomentado la línea y dejandola así
\noverflow: hidden;\nPero la hemos comentado para explicar que es lo que vamos a hacer para ir cambiando de imágenes.
\nSi os fijáis las imágenes estan configuradas en una linea horizontal, una al lado de otra, lo que haremos será ir moviendo el interior del contenedor en esa linea horizontal, modificando el margin-left, es decir, supongamos que nuestro margin-left en nuestra primera imagen es 0 y tenemos imágenes con un ancho de 600, pues lo que haríamos para movernos entre las imágenes sería ir modificando el margin-left en conjuntos de 600, es decir, la siguiente imagen tendria un margen de -600, la siguiente de -1200... y el - es necesario porque nuestro slide se movera de izquierda a derecha y como os podréis imaginar para que funcione en este ejemplo es necesario que el ancho de las imágenes sea el mismo o muy parecido (podríamos manejar el ancho de cada li dentro de la lista pero prefiero dejar el código más claro).
\nCreo que está más o menos explicado el concepto de lo que queremos hacer, veamos como lo hacemos
//Variable de ayuda para gestionar la posicion\n var position = 0;\n //Numero de imagenes para controlar\n var images = config.images.length;\n\n //intervalo en el que se cambia la imagen\n var interval = setInterval(function(){\n move();\n }, 1400);\n\n function move(){\n//Cada vez que pase por aqui aumentamos la posicion \n position++;\n\n//Si la posicion es igual o mayor que la cantidad de imagenes\n//ponemos position a 0\n if (position >= images ){\n position = 0\n }\n\n//Por ultimo movemos el margen según la posición en grupos de 600\n $(".ninjaSlider ul").animate({\n marginLeft: position * -600\n },400);\nPor último descomentamos el overflow:hidden en el fichero css y listo, ya lo tenemos
\n![\"slideExample\"](\"https://jlgarcia.fulldev.ninja/assets/images/2018/02/slideExample.gif\")
Ya tenemos nuestro slide funcionando, en este punto podríamos añadir más funcionalidad, que tuviera los puntitos típicos que te indican en que slide te encuentras y que puedes pulsar para moverte de uno a otro, o parar el slide por ejemplo. Eso lo haremos más adelante en algún post posterior ahora quería solo mostrar como podríamos hacer lo más básico de un slide, ahora lo ultimo que haremos será añadir un par de cosas al js para que se vaya pareciendo más a un plugin y podamos personalizarlo un poco más.
\nSi miramos el código detenidamente y pensamos un poco que cosas podrían ser susceptibles de cambiar, podrían ser:
\nEstos son algunos de los cambios que se me han ocurrido con el código que tenemos actualmente podríamos tener más seguramente. Por el momento vamos a preparar esos.
\nPara empezar tenemos que plantearnos cuales son obligatorios y cuales podrían tener una configuración por defecto. Las imágenes deben ser obligatorias, por eso hemos puesto el control antes que nos lanzaría una alerta si no se pasa ninguna imagen, y a lo mejor el nombre del id del slide y el resto podemos tener valores por defecto si no nos lo pasan por parámetro.
\nPara ellos basta con usar el método extend de jQuery sobre el objeto que se pasa por parámetro
$.ninjaShow = function( config ){\n \n config = $.extend({\n slideName: "",\n width: 600,\n timeTransition: 1400,\n images: []\n }, config);\n\nEste método lo que hace es sobreescribir el objeto local, que sería el primero (el que está entre { }) con el que se pasa por parámetro, pero solo las propiedades con el mismo nombre, es decir, no elimina el objeto por otro, es como si cambiaramos las propiedades que coincidan por las nuevas que se pasan por parámetro.
\nY ahora simplemente es cambiar los elementos que tenemos puestos a mano como ".ninjaslider" por la propiedad correspondiente y listo, ya tendríamos preparado el código como si fuera un plugin quedando así (dejo comentado el código)
//Función anonima\n(function(){\n\n $.ninjaShow = function( config ){\n \n config = $.extend({\n slideName: "",\n width: 600,\n timeTransition: 1400,\n images: []\n }, config);\n\n\n //Comprobamos que nos pasan alguna imagen\n if (config.images.length == 0){\n alert("Necesitamos alguna imagen para mostrar");\n return;\n }\n \n //Comprobamos que nos han pasado un nombre para slider\n if (config.slideName == ""){\n alert("Falta el nombre o id donde estará el slider")\n return\n }\n\n //Abrimos la lista\n var imgList = "<ul>";\n\n //Recorremos el array y vamos añadiendo lineas con nuestra imagen como source\n config.images.map((img)=>{\n imgList += '<li><img src="'+ img +'"</li>';\n })\n //Cerramos la lista\n imgList += "</ul>";\n \n //Adjuntamos la lista al contenedor\n $(config.slideName).append(imgList);\n\n //Variable de ayuda para gestionar la posicion\n var position = 0;\n //Numero de imagenes para controlar\n var images = config.images.length;\n\n //intervalo en el que se cambia la imagen\n var interval = setInterval(function(){\n move();\n }, config.timeTransition);\n\n function move(){\n \n position++;\n\n if (position >= images ){\n position = 0\n }\n\n $(config.slideName + " ul").animate({\n marginLeft: position * - config.width\n },400);\n }\n }\n\n})();\nComo véis ahora tenemos config.algo por todas partes. Y para usarlo nos vamos a nuestro index.html y añadimos las propiedades necesarias:
\n<script>\n\t\n\t$.ninjaShow({\n slideName: ".ninjaSlider",\n ancho: 600,\n timeTransition: 1400,\n images:['img/ninja1.jpg','img/ninja3.jpg','img/ninja4.jpg'],\n });\n</script>\nY podríamos como he comentado, crear más sliders simplemente creando el elemento, dandole un nombre y crear un nuevo ninjaShow
\n$.ninjaShow({\n slideName: ".ninjaSlider",\n ancho: 600,\n timeTransition: 1400,\n images:['img/ninja1.jpg','img/ninja3.jpg','img/ninja4.jpg'],\n });\n \n$.ninjaShow({\n slideName: ".ninjaSlider2",\n ancho: 600,\n timeTransition: 1200,\n images:['img/ninja4.jpg','img/ninja1.jpg','img/ninja3.jpg'],\n});\n![\"2Sliders\"](\"https://jlgarcia.fulldev.ninja/assets/images/2018/02/2Sliders.JPG\")
Como véis ahora es muy sencillo crear sliders básicos con este código. En algún post posterior mejoraremos este slider para que tenga más funcionalidades, esto es básicamente para que veamos un poco como podemos trabajar con jQuery para hacer todo lo que queramos con el DOM.
\nSin mucho más nos vemos en el siguiente, un abrazooorrrr.
\n","url":"https://jlgarcia.fulldev.ninja/jquery-slideshow/","canonical_url":null,"uuid":"3b1de9f2-e3a4-45a7-a056-dc806e105a19","codeinjection_foot":null,"codeinjection_head":null,"codeinjection_styles":null,"comment_id":"5a8c07c98cda356bbe9bbe44","reading_time":8,"send_email_when_published":false,"email_subject":null,"childHtmlRehype":{"html":"Vamos con un ejemplo de creación de un Slideshow muy simple en jQuery. Lo primero de todo es generarnos la estructura del proyecto, cada uno que la haga como quiera, yo tengo algo así
\n
En mi caso voy a usar bootstrap, por comodidad, pero no es necesario, lo añado al index.html al igual que jQuery. También he creado mi propio fichero de estilo style.css y lo he añadido, quedando todo de esta manera:
\n<!DOCTYPE html>\n<html lang=\"en\">\n<head>\n <meta http-equiv=\"Content-Type\" content=\"text/html; charset=UTF-8\" />\n <title>Ninja_slider</title>\n\n <script src=\"https://code.jquery.com/jquery-3.3.1.min.js\"></script>\n\n <link rel=\"stylesheet\" href=\"css/bootstrap.min.css\">\n <link rel=\"stylesheet\" href=\"css/style.css\">\n \n</head>\n<body>\n \n</body>\n</html>\nLo siguiente es añadir donde estará el slider en el body de la página
\n<body>\n\n <div class=\"container\" align=\"center\">\n <h1>Ninja-Slider</h1>\n <hr>\n\n <div class=\"ninjaSlider\"></div>\n\n </div>\n \n</body>\nNuestro slider como os podéis imaginar estará en el div con la clase ninjaSlider, y esto es todo por el momento en el html, ahora vamos a nuestro css para darle un poco de estilo y que se vea algo en la página. Le daremos un tamaño y un color de fondo para ir viendo algo.
\n.ninjaSlider{\n\tbackground-color: blue;\n\twidth: 600px;\n\theight: 300px;\n\toverflow: hidden;\n\tmargin-bottom: 10px;\n}\nQuedando así
\n
Bien ahora vamos a crear un fichero js donde meteremos toda la lógica de funcionamiento de nuestro slider. Tener en cuenta que la idea es hacerlo estilo plugin, es decir que este encapsulado para poder usarlo en cualquiera de nuestros proyectos.
\nBien lo primero como hemos comentado es crearnos el fichero js y meterlo en la carpeta correspondiente, lo siguiente son las imágenes para que slider tenga algo que mostrar, entonces buscamos unas cuantas imágenes, yo me he descargado 4 y las metemos en la carpeta img.
Una vez que tenemos las imagenes ya podemos empezar, con el js. Creamos una función anónima que se ejecute nada más cargar el js en el HTML:
\n(function(){\n //Aqui dentro meteríamos todo el código.\n})();\nVamos a empezar por algo sencillo, que es recibir las imagenes desde el html que es desde donde nos las mandarían si pensamos que este es un plugin. Estas imágenes las incluiremos en una lista, es decir, dentro de un ul de html.
\nPero antes de hacer esto, pensemos...¿cómo hacemos para pasar los datos que necesitemos a nuestro plugin?, fácil, por parámetros le pasamos un objecto que tenga las modificaciones que queramos hacer.
\nPrimero creemos un método, que será el que realmente configure e inicie nuestro slider
(function(){\n $.ninjaShow = function(config){\n \n }\n})();\nAqui hemos añadido la función ninjaShow a jQuery, por lo que la podemos llamar desde cualquier sitio desde el que podamos llamar a jQuery. A esta función le pasamos por parámetro un objeto config que tendrá todos los cambios sobre la configuración por defecto que establezcamos.
\nContinuemos añadiendo lógica para nuestras imagenes, suponiendo que nos indiquen cuales son las imágenes a través del objeto config, podemos tener nuestras imagenes bajo la propiedad images dentro del objeto config. Hagamos una prueba para que veáis de lo que estoy hablando, nos vamos a nuestro index.html y añadimos lo siguiente al final (pero siempre dentro del body)
<!-- añadimos nuestro js al html -->\n<script src=\"js/slider.js\"></script>\n<script>\n\t//Llamamos a nuestra función pasandole un objeto con la propiedad images\n\t$.ninjaShow({\n\n images:['img/ninja1.jpg','img/ninja2.jpg','img/ninja3.jpg','img/ninja4.jpg'],\n\t});\n\n</script>\n</body>\nY luego en nuestro fichero js, ponemos un log para ver que estamos recibiendo.
\n(function(){\n\n $.ninjaShow = function( config ){\n\n console.log(config);\n }\n\n})();\nSi guardamos y miramos la consola al ejecutar nuestro index.html, veremos algo como lo siguiente
\n
Es decir, un objeto con la propiedad images y dentro de esta un array con la dirección donde estan nuestras imágenes.
\nEntonces ya tenemos nuestras imágenes, ahora creemos la lista con ellas.
(function(){\n\n $.ninjaShow = function( config ){\n //Comprobamos que nos pasan alguna imagen\n if (config.images.length == 0){\n alert(\"Necesitamos alguna imagen para mostrar\");\n return;\n }\n\n //Abrimos la lista\n var imgList = \"<ul>\";\n\n //Recorremos el array y vamos añadiendo lineas con nuestra imagen como source\n config.images.map((img)=>{\n imgList += '<li><img src=\"'+ img +'\"</li>';\n })\n //Cerramos la lista\n imgList += \"</ul>\";\n \n //Adjuntamos la lista al contenedor\n $(\".ninjaSlider\").append(imgList);\n }\n\n})();\nSi ejecutamos nuestro index.html veremos algo similar a esto:
\n
Ahora mismo no vemos casi nada, ¿verdad?, vamos a modificar un poco el estilo para que veamos que realmente las cosas estan donde deben estar. Nos vamos a nuestro style.css y lo dejamos así
\n.ninjaSlider{\n\tbackground-color: blue;\n\twidth: 600px;\n\theight: 300px;\n\t/* overflow: hidden; */\n\tmargin-bottom: 10px;\n}\n\n.ninjaSlider ul{\n\tpadding: 0;\n\tlist-style-type: none;\n\tmargin-left: 0px;\n\tdisplay: flex;\n}\nAhora si veríamos algo aunque solo sean las imágenes
\n
Pero si miramos el código fuente de la página deberíamos ver algo como esto:
\n
Ya tenemos nuestra lista de imágenes, y las vemos porque hemos cambiado la propiedad overflow de css, la configuración correcta sería descomentado la línea y dejandola así
\noverflow: hidden;\nPero la hemos comentado para explicar que es lo que vamos a hacer para ir cambiando de imágenes.
\nSi os fijáis las imágenes estan configuradas en una linea horizontal, una al lado de otra, lo que haremos será ir moviendo el interior del contenedor en esa linea horizontal, modificando el margin-left, es decir, supongamos que nuestro margin-left en nuestra primera imagen es 0 y tenemos imágenes con un ancho de 600, pues lo que haríamos para movernos entre las imágenes sería ir modificando el margin-left en conjuntos de 600, es decir, la siguiente imagen tendria un margen de -600, la siguiente de -1200... y el - es necesario porque nuestro slide se movera de izquierda a derecha y como os podréis imaginar para que funcione en este ejemplo es necesario que el ancho de las imágenes sea el mismo o muy parecido (podríamos manejar el ancho de cada li dentro de la lista pero prefiero dejar el código más claro).
\nCreo que está más o menos explicado el concepto de lo que queremos hacer, veamos como lo hacemos
//Variable de ayuda para gestionar la posicion\n var position = 0;\n //Numero de imagenes para controlar\n var images = config.images.length;\n\n //intervalo en el que se cambia la imagen\n var interval = setInterval(function(){\n move();\n }, 1400);\n\n function move(){\n//Cada vez que pase por aqui aumentamos la posicion \n position++;\n\n//Si la posicion es igual o mayor que la cantidad de imagenes\n//ponemos position a 0\n if (position >= images ){\n position = 0\n }\n\n//Por ultimo movemos el margen según la posición en grupos de 600\n $(\".ninjaSlider ul\").animate({\n marginLeft: position * -600\n },400);\nPor último descomentamos el overflow:hidden en el fichero css y listo, ya lo tenemos
\n
Ya tenemos nuestro slide funcionando, en este punto podríamos añadir más funcionalidad, que tuviera los puntitos típicos que te indican en que slide te encuentras y que puedes pulsar para moverte de uno a otro, o parar el slide por ejemplo. Eso lo haremos más adelante en algún post posterior ahora quería solo mostrar como podríamos hacer lo más básico de un slide, ahora lo ultimo que haremos será añadir un par de cosas al js para que se vaya pareciendo más a un plugin y podamos personalizarlo un poco más.
\nSi miramos el código detenidamente y pensamos un poco que cosas podrían ser susceptibles de cambiar, podrían ser:
\nEstos son algunos de los cambios que se me han ocurrido con el código que tenemos actualmente podríamos tener más seguramente. Por el momento vamos a preparar esos.
\nPara empezar tenemos que plantearnos cuales son obligatorios y cuales podrían tener una configuración por defecto. Las imágenes deben ser obligatorias, por eso hemos puesto el control antes que nos lanzaría una alerta si no se pasa ninguna imagen, y a lo mejor el nombre del id del slide y el resto podemos tener valores por defecto si no nos lo pasan por parámetro.
\nPara ellos basta con usar el método extend de jQuery sobre el objeto que se pasa por parámetro
$.ninjaShow = function( config ){\n \n config = $.extend({\n slideName: \"\",\n width: 600,\n timeTransition: 1400,\n images: []\n }, config);\n\nEste método lo que hace es sobreescribir el objeto local, que sería el primero (el que está entre { }) con el que se pasa por parámetro, pero solo las propiedades con el mismo nombre, es decir, no elimina el objeto por otro, es como si cambiaramos las propiedades que coincidan por las nuevas que se pasan por parámetro.
\nY ahora simplemente es cambiar los elementos que tenemos puestos a mano como \".ninjaslider\" por la propiedad correspondiente y listo, ya tendríamos preparado el código como si fuera un plugin quedando así (dejo comentado el código)
//Función anonima\n(function(){\n\n $.ninjaShow = function( config ){\n \n config = $.extend({\n slideName: \"\",\n width: 600,\n timeTransition: 1400,\n images: []\n }, config);\n\n\n //Comprobamos que nos pasan alguna imagen\n if (config.images.length == 0){\n alert(\"Necesitamos alguna imagen para mostrar\");\n return;\n }\n \n //Comprobamos que nos han pasado un nombre para slider\n if (config.slideName == \"\"){\n alert(\"Falta el nombre o id donde estará el slider\")\n return\n }\n\n //Abrimos la lista\n var imgList = \"<ul>\";\n\n //Recorremos el array y vamos añadiendo lineas con nuestra imagen como source\n config.images.map((img)=>{\n imgList += '<li><img src=\"'+ img +'\"</li>';\n })\n //Cerramos la lista\n imgList += \"</ul>\";\n \n //Adjuntamos la lista al contenedor\n $(config.slideName).append(imgList);\n\n //Variable de ayuda para gestionar la posicion\n var position = 0;\n //Numero de imagenes para controlar\n var images = config.images.length;\n\n //intervalo en el que se cambia la imagen\n var interval = setInterval(function(){\n move();\n }, config.timeTransition);\n\n function move(){\n \n position++;\n\n if (position >= images ){\n position = 0\n }\n\n $(config.slideName + \" ul\").animate({\n marginLeft: position * - config.width\n },400);\n }\n }\n\n})();\nComo véis ahora tenemos config.algo por todas partes. Y para usarlo nos vamos a nuestro index.html y añadimos las propiedades necesarias:
\n<script>\n\t\n\t$.ninjaShow({\n slideName: \".ninjaSlider\",\n ancho: 600,\n timeTransition: 1400,\n images:['img/ninja1.jpg','img/ninja3.jpg','img/ninja4.jpg'],\n });\n</script>\nY podríamos como he comentado, crear más sliders simplemente creando el elemento, dandole un nombre y crear un nuevo ninjaShow
\n$.ninjaShow({\n slideName: \".ninjaSlider\",\n ancho: 600,\n timeTransition: 1400,\n images:['img/ninja1.jpg','img/ninja3.jpg','img/ninja4.jpg'],\n });\n \n$.ninjaShow({\n slideName: \".ninjaSlider2\",\n ancho: 600,\n timeTransition: 1200,\n images:['img/ninja4.jpg','img/ninja1.jpg','img/ninja3.jpg'],\n});\n
Como véis ahora es muy sencillo crear sliders básicos con este código. En algún post posterior mejoraremos este slider para que tenga más funcionalidades, esto es básicamente para que veamos un poco como podemos trabajar con jQuery para hacer todo lo que queramos con el DOM.
\nSin mucho más nos vemos en el siguiente, un abrazooorrrr.
\n","htmlAst":{"type":"root","children":[{"type":"comment","value":"kg-card-begin: markdown"},{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"Vamos con un ejemplo de creación de un "},{"type":"element","tagName":"strong","properties":{},"children":[{"type":"text","value":"Slideshow"}]},{"type":"text","value":" muy simple en jQuery. Lo primero de todo es generarnos la estructura del proyecto, cada uno que la haga como quiera, yo tengo algo así"},{"type":"element","tagName":"br","properties":{},"children":[]},{"type":"text","value":"\n"},{"type":"element","tagName":"img","properties":{"src":"https://jlgarcia.fulldev.ninja/assets/images/2018/02/folders.JPG","alt":"folders"},"children":[]}]},{"type":"text","value":"\n"},{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"En mi caso voy a usar bootstrap, por comodidad, pero no es necesario, lo añado al index.html al igual que "},{"type":"element","tagName":"strong","properties":{},"children":[{"type":"text","value":"jQuery"}]},{"type":"text","value":". También he creado mi propio fichero de estilo "},{"type":"element","tagName":"strong","properties":{},"children":[{"type":"text","value":"style.css"}]},{"type":"text","value":" y lo he añadido, quedando todo de esta manera:"}]},{"type":"text","value":"\n"},{"type":"element","tagName":"div","properties":{"className":["kg-card","kg-code-card","gatsby-highlight"],"dataLanguage":"text"},"children":[{"type":"element","tagName":"pre","properties":{"className":["language-text"]},"children":[{"type":"element","tagName":"code","properties":{"className":["language-text"]},"children":[{"type":"text","value":"\n\n\n \nHablemos más profundamente sobre los índices,
\nLos índices son una forma muy eficiente de buscar los datos por un valor específico y nos evita tener que recorrer toda la colección en busca de un dato específico.
\nLos índices en las bases de datos tradicionales se basan en Binary Tree Sort, y Mongo también.
\nVeamos de una forma muy resumida como funcionaría este tipo de algoritmo.
Para que nos hagamos una idea, es un tipo específico de ordenación que tiene esta pinta
\n![\"Binary](\"https://jlgarcia.fulldev.ninja/assets/images/2017/10/Captura-de-pantalla-2017-10-16-a-las-9.04.36.png\")
Supongamos entonces que buscamos el número 10, en la búsqueda lo que hace es comprobar los números en la posición en la que está y sigue estos pasos:
\nBásicamente sigue este orden:
\nY así con tantos niveles como tenga el árbol. Aunque en conjunto pueda ser algo más complicado que esto, pero esta es la teoría fundamental de este algoritmo de ordenación/búsqueda. Por dar un dato extra la fórmula de lo que tarda en la búsqueda sería:
\nO(log(n))\nCreo que no tengo la capacidad para explicar bien la fórmula, tenéis un montón de información al respecto por internet. Info
\nY, ¿que hace la indexación con este algoritmo?...a parte de ordenar los datos de esa manera, intenta que un bloque de números entre en un sector del disco, lo que hace que en una sola pasada sea capaz de leer todos los números de un bloque y así en conjunto se consigue que la búsqueda de elementos sea realmente rápida.
\nY después de comentar sobre BTS (Binary Tree Search) continuemos hablando de los índices.
\nAhora viene el cambio de concepto, ya hemos visto en post anteriores como se hacian los índices, digamos, simples
\ndb.collectionName.createIndex({nombreDelCampo: Ascendente/descendente})\n\ndb.heros.createIndex({money:1})\nEstos son los índices más habituales y son los que usan BTS realmente, pero tenemos otros 2 tipos de índices que no usan este mecanismo de ordenación:
\nPrimero veamos como crear este tipo de índice:
\ndb.nameCollection.createIndex({"fieldName": "text"})\n\ndb.heros.createIndex({ name: "text"})\nSi os fijáis un poco, se crean de la misma forma que habitualmente, solo que en lugar de indicarle la dirección del índice(ascendente/descendente con +/-1) lo que hacemos es indicarle que es de tipo text.
\nEsto nos crea una especie de índice invertido, en el que en lugar de indexar al estilo "esta palabra está en todos estos documentos", lo que hace es darle la vuelta, es decir, este documento tiene estas palabras.
\nSi hacemos la prueba con el campo name de nuestra colección (sé que no tiene sentido es un campo muy pequeño pero para hacer las pruebas nos vale) y mostramos los índices:
db.heros.getIndexes()\n![\"full](\"https://jlgarcia.fulldev.ninja/assets/images/2017/10/Captura-de-pantalla-2017-10-17-a-las-8.45.23.png\")
Vemos como cambia bastante la configuración de uno a otro (el de arriba sería el normal que hicimos con el campo money y el de abajo sería el nuevo).
\nPara hacer la prueba vamos a cambiarle el nombre a Batman por un párrafo de texto como este:
"Hero can be anyone. Even a man knowing something as simple and reassuring as putting a coat around a young boy shoulders to let him know the world hadn't ended."
\nPara hacerlo, ya sabéis con:
\ndb.heros.update({_id:ObjectId("59e1ff63c5662c1d57baf715")},{$set: {name:"Hero can be anyone. Even a man knowing something as simple and reassuring as putting a coat around a young boy shoulders to let him know the world hadn't ended."}})\nPerfecto, y ahora para buscar en este formato:
\ndb.collectionName.find({$text: {$search: ""}})\nDentro del habitual find para filtrar tenemos:
\nHagamos alguna búsqueda para ver que pasa:
\ndb.heros.find({$text: {$search: "coat"}}).pretty()\n![\"full](\"https://jlgarcia.fulldev.ninja/assets/images/2017/10/Captura-de-pantalla-2017-10-17-a-las-9.02.28.png\")
Como véis lo encuentra sin problemas. Las búsquedas de este tipo en mongo parecen ser bastante inteligentes, ignoran las típicas palabras comodines como pueden ser en ingles un "a" o "the" y se centra en el resto, también busca por raiz de palabra, es decir, por palabras que contengan la palabra que estamos buscando (OJO tienen que ser palabras en sí y no mezclas de comodines como some..), por ejemplo:
\ndb.heros.find({$text: {$search: "put"}}).pretty()
\n![\"full](\"https://jlgarcia.fulldev.ninja/assets/images/2017/10/Captura-de-pantalla-2017-10-17-a-las-9.07.04.png\")
Un detalle es que el crea el índice en un idioma específico, por eso puede ignorar ciertas palabras (están soportados la mayoría de los idiomas) y en el caso de que no se le indicara el idioma en el índice, este seguiría siendo funcional pero no tan efectivo ya que nos metería palabras innecesarias en las búsquedas pero a grandes rasgos funcionaría perfectamente.
\nComo extra comentar que las búsquedas son caseInsensitive, es decir, ignora si la palabra está en mayúsculas o en minúsculas y también ignora los acentos (ambas opciones son modificables y lo veremos más abajo)
\nAntes de continuar necesitamos una colección con algo más de información, para ello nos vamos a descargar una de ejemplo oficial de Mongo desde:
\nAQUI (recomiendo botón derecho- guardar como)
Ahora vamos a importarla, para ello nos salimos fuera de la shell de mongo y en la misma ruta donde hacíamos
\nbin/mongo\nEjecutamos lo siguiente
\n./mongoimport -c collectionTest -d databaseTest ../primer-dataset.json\nSi no esta en esa ruta, buscar el ejecutable mongoimport, y lo que hacemos es meter los datos dentro de una colección nombre collectionTest que a su vez estará dentro de una base de datos llamada databaseTest (lo último es el fichero JSON que nos hemos descargado)
\nVeamos como son los documentos que tiene esta colección, usamos:
\ndb.collectionTest.findOne()\nY veremos algo similar a esto:
\n![\"mongoImport\"](\"https://jlgarcia.fulldev.ninja/assets/images/2017/10/Captura-de-pantalla-2017-10-17-a-las-21.59.54.png\")
Tenemos coordenadas, que nos serán útiles cuando trabajemos con los índices geoespaciales, y tenemos varios campos de texto como "street", "name" o "cuisine". Con esto lo que vamos a ver es como podemos gestionar nuestros índices para que diferencie la importancia de unos campos de texto u otros y así poder hacer nuestras búsquedas más eficaces. Para ello tenemos la propiedad weights , que mejor que explicarlo creo que es verlo en un ejemplo de uso:
\ndb.collectionTest.createIndex({name: "text","address.street": "text",cuisine: "text"},{weights:{name: 5, cuisine: 8, "address.street": 10}})\nSi os fijáis hemos creado un índice con los tres campos que he comentado antes, y a continuación le he puesto unos pesos específicos a cada uno, cuanto más alto más importante es el campo. OJO para los subdocumentos es necesario poner comillas a los nombres de los campos en este caso sería el campo address:{ street}.
\nHe puesto esos números pensando qué a lo hora de buscar un restaurante a no ser que busques un restaurante en concreto con el nombre exacto, sueles buscar una calle a ver que tiene, o lo mejor buscas por un tipo de cocina, pero esto es solo un ejemplo podéis usar la lógica que más os guste. En una aplicación en producción esto habrá que pensarlo más detenidamente.
Bueno ahora vamos a probar una búsqueda, y para que sea más visual vamos a solicitarle a Mongo que nos añada una puntuación a la búsqueda. Lo más fácil es verlo con un ejemplo:
\ndb.collectionTest.find({$text: {$search: "irish"}},{score: {$meta: "textScore"}, name:1, cuisine:1, "address.street":1,_id:0}).sort({score:{$meta: "textScore"}})\nVayamos por orden:
\nAl ejecutarlo obtenemos esto:
\n![\"Example](\"https://jlgarcia.fulldev.ninja/assets/images/2017/10/Captura-de-pantalla-2017-10-20-a-las-9.26.25.png\")
Vemos que obtenemos varios resultados (si escribimos it nos saldrán más) y que empiezan por 12.55 de puntuación. En este caso la puntuación es debida a que viene en cuisine y que ocupa gran parte del campo name si os fijáis va bajando la puntuación siempre que el campo name tiene más palabras(y no son comodines como The o a). Como detalle haceros a la idea de que estamos filtrando unos 25000 documentos que yo creo que no está nada mal lo que tarda en devolver los resultados
\nBueno supongo que váis viendo un poco como funcionan las búsquedas de texto. Habréis visto que en el campo street no tenemos coincidiencias, vamos a buscar algo relacionado con una calle.
\ndb.collectionTest.find({$text: {$search: "Jamaica"}},{score: {$meta: "textScore"}, name:1, cuisine:1, "address.street":1,_id:0}).sort({score:{$meta: "textScore"}})\n![\"Example](\"https://jlgarcia.fulldev.ninja/assets/images/2017/10/Captura-de-pantalla-2017-10-20-a-las-9.29.56.png\")
Veis que sigue el mismo concepto pero esta vez con la calle y el nombre. Estas búsquedas las podemos hacer tan complicadas como queramos igual que el resto que ya vimos anteriormente.
\nComo extra recalcar que podemos:
\n$languaje: Spanish\n$caseSensitive: True (default false)\n$diacriticSensitive: True (default false)\nCreo que con esto es suficiente para que se entienda como funcionan los Full text index y podáis hacer los vuestros según requiera vuestra aplicación. Ahora empecemos con los Indices Geoespaciales
\nEn Mongo tenemos dos tipos de índices Geoespaciales:
\n2d: Basicamente representa una cuadrícula sobre un plano, pensado para superficies pequeñas, por ejemplo un campo de fútbol. También si no tenemos pensado usar geoJSON o nos da igual la curvatura de la tierra.
\n2dsphere: El caso contrario, es decir, situamos cosas sobre la tierra. Este es el más común realmente. Esta basado en el estandar WGS 84, un estandar que intenta simular en una espera a la tierra.
\nLas posiciones en cualquier mapa están representadas por unas coordenadas, estas coordenadas están representadas en:
\nLatitud: Distancia desde el Ecuador al norte y al sur. De 0 a 90 al norte, de 0 a -90 al sur.
\nLongitud: Distancia desde el Meridiano de Greenwich (seían los 0 Grados). Para localizaciones al este sería de 0 a 180 y para localizaciones al oeste de 0 a -180
\nOJO las coordenadas en MongoDB se guardan Longitud/Latitud y en Google Maps Latitud/Longitud
\nBien ya sabemos un poco de que hablamos, ahora veamos como crear un índice de este tipo:
\ndb.collectionName.createIndex({campo_localización: "2dsphere"})\n(Como véis siempre tiene el mismo estilo la creación de índices) Por si acaso no lo imagináis ya, el campo de localización tiene ser unas coordenadas o datos al estilo GeoJSON
\nVamos a crear un índice con los datos de las coordenadas que tenemos en la colección que usamos antes, para ello basta con crear el índice:
\ndb.collectionTest.createIndex({"address.coord": "2dsphere"})\nYa tenemos nuestro índice creado, ahora vamos a ver como es uno de nuestros elementos con coordenadas
\ndb.collectionTest.findOne()\n![\"Document](\"https://jlgarcia.fulldev.ninja/assets/images/2017/10/Captura-de-pantalla-2017-10-22-a-las-21.22.08.png\")
Y por si acaso nos vamos a ir a Google Maps a comprobar los datos, OJO recordad que están al revés
\n![\"Google](\"https://jlgarcia.fulldev.ninja/assets/images/2017/10/Captura-de-pantalla-2017-10-22-a-las-21.23.32.png\")
Coincide con nuestra calle ¿no?. Bueno pues ahora vamos a probar a buscar por coordenadas directamente, es decir, que me muestre quien contiene la coordenada que pasamos. OJO la búsqueda que vamos a realizar ahora lo que hace es buscar documentos que contengan esa coordenada, si tuvieramos una base de datos con las coordenadas de los paises enteros podríamos sacar el pais al que pertenece
\ndb.collectionTest.find(\n {"address.coord":\n {$geoIntersects:\n {$geometry:\n {type: "Point", coordinates: [-73.9549067, 40.6971322]}}}},{"name":1}).pretty()\nVeamos que estamos pidiendo aqui:
\nEn este caso la búsqueda parece que es sobre una ubicación específica porque no tenemos coordenadas al estilo "Polígono", pero es más que nada para que veamos que funciona bien. Al ejecutarlo vemos que nos devuelve el restaurante que habíamos seleccionado
\n![\"Search](\"https://jlgarcia.fulldev.ninja/assets/images/2017/10/Captura-de-pantalla-2017-10-24-a-las-9.33.48.png\")
Probemos ahora algo con algo más de "chicha", vamos a buscar restaurantes que estén a unos 500 metros del que hemos seleccionado antes. Para ello en lugar de usar el operador geoIntersect vamos a usar el operador near
\ndb.collectionTest.find({\n "address.coord":{\n $near:{\n $geometry:{\n type: "Point", \n coordinates: [-73.9549067, 40.6971322]},\n $maxDistance: 500\n }\n }\n },{"name":1})\nComo propiedad extra que no habíamos visto antes tenemos $maxDistance, en la cual indicamos una distancia máxima en metros.
\n![\"Search](\"https://jlgarcia.fulldev.ninja/assets/images/2017/10/Captura-de-pantalla-2017-10-24-a-las-9.34.27.png\")
He cogido las coordenadas de los dos primeros restaurantes y si las ponemos en Google Maps (recordemos que tenemos que invertir las coordenadas ya que google las guarda al revés), y esto es lo que aparece
\n![\"Google](\"https://jlgarcia.fulldev.ninja/assets/images/2017/10/Captura-de-pantalla-2017-10-25-a-las-9.21.20.png\")
Como véis está a menos de 500 metros, por lo que podemos confirmar que realmente funciona.
\nAhora pensemos en otro escenario, las aplicaciones móviles, en la mayoria de los casos cuando buscamos lo que tenemos alrededor en el mapa lo que queremos ver es que se vé en la pantalla, es decir, que hay en la cuadrícula del mapa que estoy mostrando. Esto también lo podemos hacer con MongoDB, solo tenemos que indicarle cuales son las coordenadas que se están mostrando actualmente.
\ndb.collectionTest.find({"address.coord":{\n $geoWithin: {\n $geometry:{\n type: "Polygon", \n coordinates:[\n [[-73,40],\n [-75,40],\n [-75,42],\n [-73,42],\n [-73,40]]]}}}},\n {"name":1,"address.coord":1,"_id":0})\nSi os fijáis en la query hemos cambiado la propiedad a geoWithin, es decir, lo que esté dentro de esa zona, y le pasamos un polígono, con 5 coordenadas (imagináos que es una línea que vamos dibujando, que empieza en un punto y tiene que acabar en el mismo punto, por eso son 5 ;) )
\nAquí tendríamos una cuadrícula que sería más o menos esta zona
![\"Polygon](\"https://jlgarcia.fulldev.ninja/assets/images/2017/10/Captura-de-pantalla-2017-10-25-a-las-10.02.34.png\")
Si la ejecutamos veremos que nos saca un montón de coincidencias que son las que están dentro de esa zona (que yo diría que son todos jejeje)
\n![\"Polygon](\"https://jlgarcia.fulldev.ninja/assets/images/2017/10/Captura-de-pantalla-2017-10-25-a-las-10.06.42.png\")
Si por ejemplo contamos los elementos:
\ndb.collectionTest.find({"address.coord":{$geoWithin: {$geometry:{type: "Polygon", coordinates:[[[-73,40],[-75,40],[-75,42],[-73,42],[-73,40]]]}}}},{"name":1,"address.coord":1,"_id":0}).count()\nNos salen:
\n![\"Count](\"https://jlgarcia.fulldev.ninja/assets/images/2017/10/Captura-de-pantalla-2017-10-25-a-las-10.09.53.png\")
Vamos a probar a cambiar, todas las coordenadas -73 por -74 y así comprobamos como nos filtra de verdad:
\ndb.collectionTest.find({"address.coord":{$geoWithin: {$geometry:{type: "Polygon", coordinates:[[[-74,40],[-75,40],[-75,42],[-74,42],[-74,40]]]}}}},{"name":1,"address.coord":1,"_id":0})\nSi ejecutamos vemos como todos los documentos empiezan a partir de la longitud -74
\n![\"Query](\"https://jlgarcia.fulldev.ninja/assets/images/2017/10/Captura-de-pantalla-2017-10-25-a-las-10.11.24.png\")
Si contamos ahora los documentos tenemos
\n![\"Query](\"https://jlgarcia.fulldev.ninja/assets/images/2017/10/Captura-de-pantalla-2017-10-25-a-las-10.12.48.png\")
Como vemos realmente si nos está filtrando por una zona en específico. Esto es un ejemplo de algunas cosas típicas que podemos necesitar hacer.
\nBien ahora subamos un poco más el nivel, vamos a ver como podemos programar directamente en la consola de MongoDB, en este ejemplo que vamos a ver seguiremos usando los índices geoespaciales porque son los últimos que hemos visto, pero tener en cuenta que se podría hacer como queráis.
\nLo que vamos hacer va a ser recorrer todos los restaurantes que tenemos en la colección de test que estamos usando y vamos a ponerles una propiedad nueva indicando cual es el primer restaurante que esté a menos 500 mt (si hay alguno claro).
\nUna cosa muy interesante y util en mongo es que podemos usar variables.....y bueno podemos usar un estilo de programación similar al de JavaScript. Entonces para este ejemplo vamos a usar el siguiente código (podéis copiar y pegar ;) )
\nvar restaurants = db.collectionTest.find()\n\nwhile(restaurants.hasNext()){\n\n var rest = restaurants.next();\n var coords = rest.address.coord;\n \n if (coords != ""){\n var neighbour = db.collectionTest.find({"address.coord":{$near:\n {$geometry:{type: "Point", coordinates: coords},$maxDistance: 500}}}).skip(1).limit(1);\n \n if (neighbour[0] != undefined){\n var neigh = neighbour[0];\n\n db.collectionTest.update({"_id": rest._id},\n {$set: {\n "address.neighbour": neigh.name \n }}\n );\n } \n \n }\n}\nEn general supongo que más o menos se entiende el código (y no está con la intención de ser el mejor ni el más bonito solo es un ejemplo) pero por si acaso voy a explicarlo paso a paso.
\nLo primero almacenamos todos nuestros documentos en una variable, se podría haber limitado la cantidad o cualquier cosa que se os ocurra pero así comprobamos lo que tarda en modificarnos mas de 25000 documentos.
\nvar restaurants = db.collectionTest.find()\nY a continuación por ejemplo haremos un bucle while recorriendo los documentos que tenemos almacenados en la variable restaurants
\nwhile(restaurants.hasNext()){\nAlmacenamos el documento en cuestión y las coordenadas de que tiene ese documento:
\nvar rest = restaurants.next();\nvar coords = rest.address.coord;\nTenemos algunos documentos que tienen la propiedad coord vacía por lo que lo comprobamos
\nif (coords != ""){\nLo siguiente será buscar cuál es el restaurante más cercano, sin ser el propio restaurante propietario de esas coordenadas, al buscar por coordenadas nos identifica el primero como el propio restaurante, por eso ignoramos el primer resultado. Y como solo queremos encontrar uno de "los vecinos" limitamos la búsqueda a 1
\n var neighbour = db.collectionTest.find({\n "address.coord":{\n $near:{\n $geometry:{\n type: "Point",\n coordinates: coords}\n ,$maxDistance: 500}}}).skip(1).limit(1);\nComo es posible que no tengamos nungún documento(restaurante) a menos de 500 metros tenemos que comprobar antes de hacer nada para que el proceso continue
\nif (neighbour[0] != undefined){\nY por último actualizamos el restaurante usando el "_id" añadiendole la propiedad "address.neighbour" con el nombre del restaurante vecino
\ndb.collectionTest.update({"_id": rest._id},\n {$set: {\n "address.neighbour": neigh.name \n }}\n );\nEl proceso tardará un rato, y una vez terminado, si buscamos algún documento
\ndb.collectionTest.findOne({},{"name":1,"address":1,"_id":0})\nVeremos como nos ha añadido una nueva propiedad con el nombre de algún restaurante cercano
\n![\"Neighbour](\"https://jlgarcia.fulldev.ninja/assets/images/2017/10/Captura-de-pantalla-2017-10-28-a-las-17.49.58.png\")
Esto es solo un pequeño ejemplo de lo que podemos hacer con MongoDB, podemos complicar las búsquedas tanto como queramos (aunque lo suyo es que una parte lo hiciera nuestra app no la base de datos sola ;) )
\nEspero que con este post seais capaces de mejorar vuestros índices y hacer que vuestras búsquedas en vuestras bases de datos MongoDB sean mucho más eficientes. De momento vamos a dejar el tema de los índices, lo próximo que veremos será el Aggregation Framework, si no sabéis lo que es no os preocupeis lo veremos en detalle. Nos veeemoosssss un abrazooorrrrrr
\n","url":"https://jlgarcia.fulldev.ninja/mongodb-ninja-iv-index-ninja/","canonical_url":null,"uuid":"45e90e60-7350-484d-8e27-36d2cb4cf334","codeinjection_foot":null,"codeinjection_head":null,"codeinjection_styles":null,"comment_id":"5a3a19cf84f3c8302096922d","reading_time":14,"send_email_when_published":false,"email_subject":null,"childHtmlRehype":{"html":"Hablemos más profundamente sobre los índices,
\nLos índices son una forma muy eficiente de buscar los datos por un valor específico y nos evita tener que recorrer toda la colección en busca de un dato específico.
\nLos índices en las bases de datos tradicionales se basan en Binary Tree Sort, y Mongo también.
\nVeamos de una forma muy resumida como funcionaría este tipo de algoritmo.
Para que nos hagamos una idea, es un tipo específico de ordenación que tiene esta pinta
\n
Supongamos entonces que buscamos el número 10, en la búsqueda lo que hace es comprobar los números en la posición en la que está y sigue estos pasos:
\nBásicamente sigue este orden:
\nY así con tantos niveles como tenga el árbol. Aunque en conjunto pueda ser algo más complicado que esto, pero esta es la teoría fundamental de este algoritmo de ordenación/búsqueda. Por dar un dato extra la fórmula de lo que tarda en la búsqueda sería:
\nO(log(n))\nCreo que no tengo la capacidad para explicar bien la fórmula, tenéis un montón de información al respecto por internet. Info
\nY, ¿que hace la indexación con este algoritmo?...a parte de ordenar los datos de esa manera, intenta que un bloque de números entre en un sector del disco, lo que hace que en una sola pasada sea capaz de leer todos los números de un bloque y así en conjunto se consigue que la búsqueda de elementos sea realmente rápida.
\nY después de comentar sobre BTS (Binary Tree Search) continuemos hablando de los índices.
\nAhora viene el cambio de concepto, ya hemos visto en post anteriores como se hacian los índices, digamos, simples
\ndb.collectionName.createIndex({nombreDelCampo: Ascendente/descendente})\n\ndb.heros.createIndex({money:1})\nEstos son los índices más habituales y son los que usan BTS realmente, pero tenemos otros 2 tipos de índices que no usan este mecanismo de ordenación:
\nPrimero veamos como crear este tipo de índice:
\ndb.nameCollection.createIndex({\"fieldName\": \"text\"})\n\ndb.heros.createIndex({ name: \"text\"})\nSi os fijáis un poco, se crean de la misma forma que habitualmente, solo que en lugar de indicarle la dirección del índice(ascendente/descendente con +/-1) lo que hacemos es indicarle que es de tipo text.
\nEsto nos crea una especie de índice invertido, en el que en lugar de indexar al estilo \"esta palabra está en todos estos documentos\", lo que hace es darle la vuelta, es decir, este documento tiene estas palabras.
\nSi hacemos la prueba con el campo name de nuestra colección (sé que no tiene sentido es un campo muy pequeño pero para hacer las pruebas nos vale) y mostramos los índices:
db.heros.getIndexes()\n
Vemos como cambia bastante la configuración de uno a otro (el de arriba sería el normal que hicimos con el campo money y el de abajo sería el nuevo).
\nPara hacer la prueba vamos a cambiarle el nombre a Batman por un párrafo de texto como este:
\"Hero can be anyone. Even a man knowing something as simple and reassuring as putting a coat around a young boy shoulders to let him know the world hadn't ended.\"
\nPara hacerlo, ya sabéis con:
\ndb.heros.update({_id:ObjectId(\"59e1ff63c5662c1d57baf715\")},{$set: {name:\"Hero can be anyone. Even a man knowing something as simple and reassuring as putting a coat around a young boy shoulders to let him know the world hadn't ended.\"}})\nPerfecto, y ahora para buscar en este formato:
\ndb.collectionName.find({$text: {$search: \"\"}})\nDentro del habitual find para filtrar tenemos:
\nHagamos alguna búsqueda para ver que pasa:
\ndb.heros.find({$text: {$search: \"coat\"}}).pretty()\n
Como véis lo encuentra sin problemas. Las búsquedas de este tipo en mongo parecen ser bastante inteligentes, ignoran las típicas palabras comodines como pueden ser en ingles un \"a\" o \"the\" y se centra en el resto, también busca por raiz de palabra, es decir, por palabras que contengan la palabra que estamos buscando (OJO tienen que ser palabras en sí y no mezclas de comodines como some..), por ejemplo:
\ndb.heros.find({$text: {$search: \"put\"}}).pretty()
\n
Un detalle es que el crea el índice en un idioma específico, por eso puede ignorar ciertas palabras (están soportados la mayoría de los idiomas) y en el caso de que no se le indicara el idioma en el índice, este seguiría siendo funcional pero no tan efectivo ya que nos metería palabras innecesarias en las búsquedas pero a grandes rasgos funcionaría perfectamente.
\nComo extra comentar que las búsquedas son caseInsensitive, es decir, ignora si la palabra está en mayúsculas o en minúsculas y también ignora los acentos (ambas opciones son modificables y lo veremos más abajo)
\nAntes de continuar necesitamos una colección con algo más de información, para ello nos vamos a descargar una de ejemplo oficial de Mongo desde:
\nAQUI (recomiendo botón derecho- guardar como)
Ahora vamos a importarla, para ello nos salimos fuera de la shell de mongo y en la misma ruta donde hacíamos
\nbin/mongo\nEjecutamos lo siguiente
\n./mongoimport -c collectionTest -d databaseTest ../primer-dataset.json\nSi no esta en esa ruta, buscar el ejecutable mongoimport, y lo que hacemos es meter los datos dentro de una colección nombre collectionTest que a su vez estará dentro de una base de datos llamada databaseTest (lo último es el fichero JSON que nos hemos descargado)
\nVeamos como son los documentos que tiene esta colección, usamos:
\ndb.collectionTest.findOne()\nY veremos algo similar a esto:
\n
Tenemos coordenadas, que nos serán útiles cuando trabajemos con los índices geoespaciales, y tenemos varios campos de texto como \"street\", \"name\" o \"cuisine\". Con esto lo que vamos a ver es como podemos gestionar nuestros índices para que diferencie la importancia de unos campos de texto u otros y así poder hacer nuestras búsquedas más eficaces. Para ello tenemos la propiedad weights , que mejor que explicarlo creo que es verlo en un ejemplo de uso:
\ndb.collectionTest.createIndex({name: \"text\",\"address.street\": \"text\",cuisine: \"text\"},{weights:{name: 5, cuisine: 8, \"address.street\": 10}})\nSi os fijáis hemos creado un índice con los tres campos que he comentado antes, y a continuación le he puesto unos pesos específicos a cada uno, cuanto más alto más importante es el campo. OJO para los subdocumentos es necesario poner comillas a los nombres de los campos en este caso sería el campo address:{ street}.
\nHe puesto esos números pensando qué a lo hora de buscar un restaurante a no ser que busques un restaurante en concreto con el nombre exacto, sueles buscar una calle a ver que tiene, o lo mejor buscas por un tipo de cocina, pero esto es solo un ejemplo podéis usar la lógica que más os guste. En una aplicación en producción esto habrá que pensarlo más detenidamente.
Bueno ahora vamos a probar una búsqueda, y para que sea más visual vamos a solicitarle a Mongo que nos añada una puntuación a la búsqueda. Lo más fácil es verlo con un ejemplo:
\ndb.collectionTest.find({$text: {$search: \"irish\"}},{score: {$meta: \"textScore\"}, name:1, cuisine:1, \"address.street\":1,_id:0}).sort({score:{$meta: \"textScore\"}})\nVayamos por orden:
\nAl ejecutarlo obtenemos esto:
\n
Vemos que obtenemos varios resultados (si escribimos it nos saldrán más) y que empiezan por 12.55 de puntuación. En este caso la puntuación es debida a que viene en cuisine y que ocupa gran parte del campo name si os fijáis va bajando la puntuación siempre que el campo name tiene más palabras(y no son comodines como The o a). Como detalle haceros a la idea de que estamos filtrando unos 25000 documentos que yo creo que no está nada mal lo que tarda en devolver los resultados
\nBueno supongo que váis viendo un poco como funcionan las búsquedas de texto. Habréis visto que en el campo street no tenemos coincidiencias, vamos a buscar algo relacionado con una calle.
\ndb.collectionTest.find({$text: {$search: \"Jamaica\"}},{score: {$meta: \"textScore\"}, name:1, cuisine:1, \"address.street\":1,_id:0}).sort({score:{$meta: \"textScore\"}})\n
Veis que sigue el mismo concepto pero esta vez con la calle y el nombre. Estas búsquedas las podemos hacer tan complicadas como queramos igual que el resto que ya vimos anteriormente.
\nComo extra recalcar que podemos:
\n$languaje: Spanish\n$caseSensitive: True (default false)\n$diacriticSensitive: True (default false)\nCreo que con esto es suficiente para que se entienda como funcionan los Full text index y podáis hacer los vuestros según requiera vuestra aplicación. Ahora empecemos con los Indices Geoespaciales
\nEn Mongo tenemos dos tipos de índices Geoespaciales:
\n2d: Basicamente representa una cuadrícula sobre un plano, pensado para superficies pequeñas, por ejemplo un campo de fútbol. También si no tenemos pensado usar geoJSON o nos da igual la curvatura de la tierra.
\n2dsphere: El caso contrario, es decir, situamos cosas sobre la tierra. Este es el más común realmente. Esta basado en el estandar WGS 84, un estandar que intenta simular en una espera a la tierra.
\nLas posiciones en cualquier mapa están representadas por unas coordenadas, estas coordenadas están representadas en:
\nLatitud: Distancia desde el Ecuador al norte y al sur. De 0 a 90 al norte, de 0 a -90 al sur.
\nLongitud: Distancia desde el Meridiano de Greenwich (seían los 0 Grados). Para localizaciones al este sería de 0 a 180 y para localizaciones al oeste de 0 a -180
\nOJO las coordenadas en MongoDB se guardan Longitud/Latitud y en Google Maps Latitud/Longitud
\nBien ya sabemos un poco de que hablamos, ahora veamos como crear un índice de este tipo:
\ndb.collectionName.createIndex({campo_localización: \"2dsphere\"})\n(Como véis siempre tiene el mismo estilo la creación de índices) Por si acaso no lo imagináis ya, el campo de localización tiene ser unas coordenadas o datos al estilo GeoJSON
\nVamos a crear un índice con los datos de las coordenadas que tenemos en la colección que usamos antes, para ello basta con crear el índice:
\ndb.collectionTest.createIndex({\"address.coord\": \"2dsphere\"})\nYa tenemos nuestro índice creado, ahora vamos a ver como es uno de nuestros elementos con coordenadas
\ndb.collectionTest.findOne()\n
Y por si acaso nos vamos a ir a Google Maps a comprobar los datos, OJO recordad que están al revés
\n
Coincide con nuestra calle ¿no?. Bueno pues ahora vamos a probar a buscar por coordenadas directamente, es decir, que me muestre quien contiene la coordenada que pasamos. OJO la búsqueda que vamos a realizar ahora lo que hace es buscar documentos que contengan esa coordenada, si tuvieramos una base de datos con las coordenadas de los paises enteros podríamos sacar el pais al que pertenece
\ndb.collectionTest.find(\n {\"address.coord\":\n {$geoIntersects:\n {$geometry:\n {type: \"Point\", coordinates: [-73.9549067, 40.6971322]}}}},{\"name\":1}).pretty()\nVeamos que estamos pidiendo aqui:
\nEn este caso la búsqueda parece que es sobre una ubicación específica porque no tenemos coordenadas al estilo \"Polígono\", pero es más que nada para que veamos que funciona bien. Al ejecutarlo vemos que nos devuelve el restaurante que habíamos seleccionado
\n
Probemos ahora algo con algo más de \"chicha\", vamos a buscar restaurantes que estén a unos 500 metros del que hemos seleccionado antes. Para ello en lugar de usar el operador geoIntersect vamos a usar el operador near
\ndb.collectionTest.find({\n \"address.coord\":{\n $near:{\n $geometry:{\n type: \"Point\", \n coordinates: [-73.9549067, 40.6971322]},\n $maxDistance: 500\n }\n }\n },{\"name\":1})\nComo propiedad extra que no habíamos visto antes tenemos $maxDistance, en la cual indicamos una distancia máxima en metros.
\n
He cogido las coordenadas de los dos primeros restaurantes y si las ponemos en Google Maps (recordemos que tenemos que invertir las coordenadas ya que google las guarda al revés), y esto es lo que aparece
\n
Como véis está a menos de 500 metros, por lo que podemos confirmar que realmente funciona.
\nAhora pensemos en otro escenario, las aplicaciones móviles, en la mayoria de los casos cuando buscamos lo que tenemos alrededor en el mapa lo que queremos ver es que se vé en la pantalla, es decir, que hay en la cuadrícula del mapa que estoy mostrando. Esto también lo podemos hacer con MongoDB, solo tenemos que indicarle cuales son las coordenadas que se están mostrando actualmente.
\ndb.collectionTest.find({\"address.coord\":{\n $geoWithin: {\n $geometry:{\n type: \"Polygon\", \n coordinates:[\n [[-73,40],\n [-75,40],\n [-75,42],\n [-73,42],\n [-73,40]]]}}}},\n {\"name\":1,\"address.coord\":1,\"_id\":0})\nSi os fijáis en la query hemos cambiado la propiedad a geoWithin, es decir, lo que esté dentro de esa zona, y le pasamos un polígono, con 5 coordenadas (imagináos que es una línea que vamos dibujando, que empieza en un punto y tiene que acabar en el mismo punto, por eso son 5 ;) )
\nAquí tendríamos una cuadrícula que sería más o menos esta zona
Si la ejecutamos veremos que nos saca un montón de coincidencias que son las que están dentro de esa zona (que yo diría que son todos jejeje)
\n
Si por ejemplo contamos los elementos:
\ndb.collectionTest.find({\"address.coord\":{$geoWithin: {$geometry:{type: \"Polygon\", coordinates:[[[-73,40],[-75,40],[-75,42],[-73,42],[-73,40]]]}}}},{\"name\":1,\"address.coord\":1,\"_id\":0}).count()\nNos salen:
\n
Vamos a probar a cambiar, todas las coordenadas -73 por -74 y así comprobamos como nos filtra de verdad:
\ndb.collectionTest.find({\"address.coord\":{$geoWithin: {$geometry:{type: \"Polygon\", coordinates:[[[-74,40],[-75,40],[-75,42],[-74,42],[-74,40]]]}}}},{\"name\":1,\"address.coord\":1,\"_id\":0})\nSi ejecutamos vemos como todos los documentos empiezan a partir de la longitud -74
\n
Si contamos ahora los documentos tenemos
\n
Como vemos realmente si nos está filtrando por una zona en específico. Esto es un ejemplo de algunas cosas típicas que podemos necesitar hacer.
\nBien ahora subamos un poco más el nivel, vamos a ver como podemos programar directamente en la consola de MongoDB, en este ejemplo que vamos a ver seguiremos usando los índices geoespaciales porque son los últimos que hemos visto, pero tener en cuenta que se podría hacer como queráis.
\nLo que vamos hacer va a ser recorrer todos los restaurantes que tenemos en la colección de test que estamos usando y vamos a ponerles una propiedad nueva indicando cual es el primer restaurante que esté a menos 500 mt (si hay alguno claro).
\nUna cosa muy interesante y util en mongo es que podemos usar variables.....y bueno podemos usar un estilo de programación similar al de JavaScript. Entonces para este ejemplo vamos a usar el siguiente código (podéis copiar y pegar ;) )
\nvar restaurants = db.collectionTest.find()\n\nwhile(restaurants.hasNext()){\n\n var rest = restaurants.next();\n var coords = rest.address.coord;\n \n if (coords != \"\"){\n var neighbour = db.collectionTest.find({\"address.coord\":{$near:\n {$geometry:{type: \"Point\", coordinates: coords},$maxDistance: 500}}}).skip(1).limit(1);\n \n if (neighbour[0] != undefined){\n var neigh = neighbour[0];\n\n db.collectionTest.update({\"_id\": rest._id},\n {$set: {\n \"address.neighbour\": neigh.name \n }}\n );\n } \n \n }\n}\nEn general supongo que más o menos se entiende el código (y no está con la intención de ser el mejor ni el más bonito solo es un ejemplo) pero por si acaso voy a explicarlo paso a paso.
\nLo primero almacenamos todos nuestros documentos en una variable, se podría haber limitado la cantidad o cualquier cosa que se os ocurra pero así comprobamos lo que tarda en modificarnos mas de 25000 documentos.
\nvar restaurants = db.collectionTest.find()\nY a continuación por ejemplo haremos un bucle while recorriendo los documentos que tenemos almacenados en la variable restaurants
\nwhile(restaurants.hasNext()){\nAlmacenamos el documento en cuestión y las coordenadas de que tiene ese documento:
\nvar rest = restaurants.next();\nvar coords = rest.address.coord;\nTenemos algunos documentos que tienen la propiedad coord vacía por lo que lo comprobamos
\nif (coords != \"\"){\nLo siguiente será buscar cuál es el restaurante más cercano, sin ser el propio restaurante propietario de esas coordenadas, al buscar por coordenadas nos identifica el primero como el propio restaurante, por eso ignoramos el primer resultado. Y como solo queremos encontrar uno de \"los vecinos\" limitamos la búsqueda a 1
\n var neighbour = db.collectionTest.find({\n \"address.coord\":{\n $near:{\n $geometry:{\n type: \"Point\",\n coordinates: coords}\n ,$maxDistance: 500}}}).skip(1).limit(1);\nComo es posible que no tengamos nungún documento(restaurante) a menos de 500 metros tenemos que comprobar antes de hacer nada para que el proceso continue
\nif (neighbour[0] != undefined){\nY por último actualizamos el restaurante usando el \"_id\" añadiendole la propiedad \"address.neighbour\" con el nombre del restaurante vecino
\ndb.collectionTest.update({\"_id\": rest._id},\n {$set: {\n \"address.neighbour\": neigh.name \n }}\n );\nEl proceso tardará un rato, y una vez terminado, si buscamos algún documento
\ndb.collectionTest.findOne({},{\"name\":1,\"address\":1,\"_id\":0})\nVeremos como nos ha añadido una nueva propiedad con el nombre de algún restaurante cercano
\n
Esto es solo un pequeño ejemplo de lo que podemos hacer con MongoDB, podemos complicar las búsquedas tanto como queramos (aunque lo suyo es que una parte lo hiciera nuestra app no la base de datos sola ;) )
\nEspero que con este post seais capaces de mejorar vuestros índices y hacer que vuestras búsquedas en vuestras bases de datos MongoDB sean mucho más eficientes. De momento vamos a dejar el tema de los índices, lo próximo que veremos será el Aggregation Framework, si no sabéis lo que es no os preocupeis lo veremos en detalle. Nos veeemoosssss un abrazooorrrrrr
\n","htmlAst":{"type":"root","children":[{"type":"comment","value":"kg-card-begin: markdown"},{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"Hablemos más profundamente sobre los índices,"}]},{"type":"text","value":"\n"},{"type":"element","tagName":"h2","properties":{"id":"qusonlosndices"},"children":[{"type":"text","value":"¿Qué son los índices?"}]},{"type":"text","value":"\n"},{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"Los índices son una forma muy eficiente de buscar los datos por un valor específico y nos evita tener que recorrer toda la colección en busca de un dato específico."},{"type":"element","tagName":"br","properties":{},"children":[]},{"type":"text","value":"\nLos índices en las bases de datos tradicionales se basan en "},{"type":"element","tagName":"strong","properties":{},"children":[{"type":"text","value":"Binary Tree Sort"}]},{"type":"text","value":", y Mongo también."},{"type":"element","tagName":"br","properties":{},"children":[]},{"type":"text","value":"\nVeamos de una forma muy resumida como funcionaría este tipo de algoritmo."}]},{"type":"text","value":"\n"},{"type":"element","tagName":"h2","properties":{"id":"binarytreesort"},"children":[{"type":"text","value":"Binary Tree Sort"}]},{"type":"text","value":"\n"},{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"Para que nos hagamos una idea, es un tipo específico de ordenación que tiene esta pinta"}]},{"type":"text","value":"\n"},{"type":"element","tagName":"p","properties":{},"children":[{"type":"element","tagName":"img","properties":{"src":"https://jlgarcia.fulldev.ninja/assets/images/2017/10/Captura-de-pantalla-2017-10-16-a-las-9.04.36.png","alt":"Binary Tree Sort"},"children":[]}]},{"type":"text","value":"\n"},{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"Supongamos entonces que buscamos el número 10, en la búsqueda lo que hace es comprobar los números en la posición en la que está y sigue estos pasos:"}]},{"type":"text","value":"\n"},{"type":"element","tagName":"ul","properties":{},"children":[{"type":"text","value":"\n"},{"type":"element","tagName":"li","properties":{},"children":[{"type":"text","value":"¿El número que busco es menor que 8? No."}]},{"type":"text","value":"\n"},{"type":"element","tagName":"li","properties":{},"children":[{"type":"text","value":"¿Está entre 8 - 12? Sí. Paso la búsqueda por la rama central."}]},{"type":"text","value":"\n"}]},{"type":"text","value":"\n"},{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"Básicamente sigue este orden:"}]},{"type":"text","value":"\n"},{"type":"element","tagName":"ul","properties":{},"children":[{"type":"text","value":"\n"},{"type":"element","tagName":"li","properties":{},"children":[{"type":"text","value":"Si es menor que el número más a la izquierda pasamos la búsqueda por la rama que esté más a la izquierda."}]},{"type":"text","value":"\n"},{"type":"element","tagName":"li","properties":{},"children":[{"type":"text","value":"Si está entre números lo mando por la rama que comprenda esos números."}]},{"type":"text","value":"\n"},{"type":"element","tagName":"li","properties":{},"children":[{"type":"text","value":"Si el número es mayor que el número que esta más a la derecha envío la búsqueda por la rama que está más a la derecha."}]},{"type":"text","value":"\n"}]},{"type":"text","value":"\n"},{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"Y así con tantos niveles como tenga el árbol. Aunque en conjunto pueda ser algo más complicado que esto, pero esta es la teoría fundamental de este algoritmo de ordenación/búsqueda. Por dar un dato extra la fórmula de lo que tarda en la búsqueda sería:"}]},{"type":"text","value":"\n"},{"type":"element","tagName":"div","properties":{"className":["kg-card","kg-code-card","gatsby-highlight"],"dataLanguage":"text"},"children":[{"type":"element","tagName":"pre","properties":{"className":["language-text"]},"children":[{"type":"element","tagName":"code","properties":{"className":["language-text"]},"children":[{"type":"text","value":"O(log(n))\n"}]}]}]},{"type":"text","value":"\n"},{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"Creo que no tengo la capacidad para explicar bien la fórmula, tenéis un montón de información al respecto por internet. "},{"type":"element","tagName":"a","properties":{"href":"https://es.khanacademy.org/computing/computer-science/algorithms/asymptotic-notation/a/big-o-notation"},"children":[{"type":"text","value":"Info"}]}]},{"type":"text","value":"\n"},{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"Y, ¿que hace la indexación con este algoritmo?...a parte de ordenar los datos de esa manera, intenta que un bloque de números entre en un sector del disco, lo que hace que en una sola pasada sea capaz de leer todos los números de un bloque y así en conjunto se consigue que la búsqueda de elementos sea realmente rápida."}]},{"type":"text","value":"\n"},{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"Y después de comentar sobre BTS (Binary Tree Search) continuemos hablando de los índices."}]},{"type":"text","value":"\n"},{"type":"element","tagName":"h2","properties":{"id":"tiposdendices"},"children":[{"type":"text","value":"Tipos de índices"}]},{"type":"text","value":"\n"},{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"Ahora viene el cambio de concepto, ya hemos visto en post anteriores como se hacian los índices, digamos, "},{"type":"element","tagName":"strong","properties":{},"children":[{"type":"text","value":"simples"}]}]},{"type":"text","value":"\n"},{"type":"element","tagName":"div","properties":{"className":["kg-card","kg-code-card","gatsby-highlight"],"dataLanguage":"text"},"children":[{"type":"element","tagName":"pre","properties":{"className":["language-text"]},"children":[{"type":"element","tagName":"code","properties":{"className":["language-text"]},"children":[{"type":"text","value":"db.collectionName.createIndex({nombreDelCampo: Ascendente/descendente})\n\ndb.heros.createIndex({money:1})\n"}]}]}]},{"type":"text","value":"\n"},{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"Estos son los índices más habituales y son los que usan "},{"type":"element","tagName":"strong","properties":{},"children":[{"type":"text","value":"BTS"}]},{"type":"text","value":" realmente, pero tenemos otros 2 tipos de índices que no usan este mecanismo de ordenación:"}]},{"type":"text","value":"\n"},{"type":"element","tagName":"ul","properties":{},"children":[{"type":"text","value":"\n"},{"type":"element","tagName":"li","properties":{},"children":[{"type":"element","tagName":"strong","properties":{},"children":[{"type":"text","value":"Full text Index"}]},{"type":"text","value":": Indices de texto libre. Nos permite buscar el texto que hay en los documentos, es una búsqueda tipo Google. Al generar este tipo de índice crea una base de datos grande con todos los documentos de tipo texto (según los criterios que indiquemos) y a la hora de buscar nos muestras los elementos por relevancia (cuanto más aparezca la palabra que buscamos en el documento, más relevante se vuelve)"}]},{"type":"text","value":"\n"},{"type":"element","tagName":"li","properties":{},"children":[{"type":"element","tagName":"strong","properties":{},"children":[{"type":"text","value":"Geospatial Index"}]},{"type":"text","value":": Indices de búsqueda geoespacial, que nos permiten manejar datos geográficos, latitudes y longitudes pero no solo puntos si no, nos permiten hacer búsquedas por zonas (en plan datos a mi alrededor o a X Km o si tengo por ejemplo una línea de las de Google maps ruta/origen/destino podríamos buscar lo que está cerca de la línea). Esto se vuelve muy útil para aplicaciones móviles por ejemplo."}]},{"type":"text","value":"\n"}]},{"type":"text","value":"\n"},{"type":"element","tagName":"h2","properties":{"id":"fulltextindex"},"children":[{"type":"text","value":"Full text Index"}]},{"type":"text","value":"\n"},{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"Primero veamos como crear este tipo de índice:"}]},{"type":"text","value":"\n"},{"type":"element","tagName":"div","properties":{"className":["kg-card","kg-code-card","gatsby-highlight"],"dataLanguage":"text"},"children":[{"type":"element","tagName":"pre","properties":{"className":["language-text"]},"children":[{"type":"element","tagName":"code","properties":{"className":["language-text"]},"children":[{"type":"text","value":"db.nameCollection.createIndex({\"fieldName\": \"text\"})\n\ndb.heros.createIndex({ name: \"text\"})\n"}]}]}]},{"type":"text","value":"\n"},{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"Si os fijáis un poco, se crean de la misma forma que habitualmente, solo que en lugar de indicarle la dirección del índice(ascendente/descendente con +/-1) lo que hacemos es indicarle que es de tipo "},{"type":"element","tagName":"strong","properties":{},"children":[{"type":"text","value":"text"}]},{"type":"text","value":"."},{"type":"element","tagName":"br","properties":{},"children":[]},{"type":"text","value":"\nEsto nos crea una especie de índice invertido, en el que en lugar de indexar al estilo \"esta palabra está en todos estos documentos\", lo que hace es darle la vuelta, es decir, este documento tiene estas palabras."},{"type":"element","tagName":"br","properties":{},"children":[]},{"type":"text","value":"\nSi hacemos la prueba con el campo name de nuestra colección (sé que no tiene sentido es un campo muy pequeño pero para hacer las pruebas nos vale) y mostramos los índices:"}]},{"type":"text","value":"\n"},{"type":"element","tagName":"div","properties":{"className":["kg-card","kg-code-card","gatsby-highlight"],"dataLanguage":"text"},"children":[{"type":"element","tagName":"pre","properties":{"className":["language-text"]},"children":[{"type":"element","tagName":"code","properties":{"className":["language-text"]},"children":[{"type":"text","value":"db.heros.getIndexes()\n"}]}]}]},{"type":"text","value":"\n"},{"type":"element","tagName":"p","properties":{},"children":[{"type":"element","tagName":"img","properties":{"src":"https://jlgarcia.fulldev.ninja/assets/images/2017/10/Captura-de-pantalla-2017-10-17-a-las-8.45.23.png","alt":"full text index example"},"children":[]}]},{"type":"text","value":"\n"},{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"Vemos como cambia bastante la configuración de uno a otro (el de arriba sería el normal que hicimos con el campo money y el de abajo sería el nuevo)."},{"type":"element","tagName":"br","properties":{},"children":[]},{"type":"text","value":"\nPara hacer la prueba vamos a cambiarle el nombre a Batman por un párrafo de texto como este:"}]},{"type":"text","value":"\n"},{"type":"element","tagName":"p","properties":{},"children":[{"type":"element","tagName":"em","properties":{},"children":[{"type":"text","value":"\"Hero can be anyone. Even a man knowing something as simple and reassuring as putting a coat around a young boy shoulders to let him know the world hadn't ended.\""}]}]},{"type":"text","value":"\n"},{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"Para hacerlo, ya sabéis con:"}]},{"type":"text","value":"\n"},{"type":"element","tagName":"div","properties":{"className":["kg-card","kg-code-card","gatsby-highlight"],"dataLanguage":"text"},"children":[{"type":"element","tagName":"pre","properties":{"className":["language-text"]},"children":[{"type":"element","tagName":"code","properties":{"className":["language-text"]},"children":[{"type":"text","value":"db.heros.update({_id:ObjectId(\"59e1ff63c5662c1d57baf715\")},{$set: {name:\"Hero can be anyone. Even a man knowing something as simple and reassuring as putting a coat around a young boy shoulders to let him know the world hadn't ended.\"}})\n"}]}]}]},{"type":"text","value":"\n"},{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"Perfecto, y ahora para buscar en este formato:"}]},{"type":"text","value":"\n"},{"type":"element","tagName":"div","properties":{"className":["kg-card","kg-code-card","gatsby-highlight"],"dataLanguage":"text"},"children":[{"type":"element","tagName":"pre","properties":{"className":["language-text"]},"children":[{"type":"element","tagName":"code","properties":{"className":["language-text"]},"children":[{"type":"text","value":"db.collectionName.find({$text: {$search: \"\"}})\n"}]}]}]},{"type":"text","value":"\n"},{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"Dentro del habitual find para filtrar tenemos:"}]},{"type":"text","value":"\n"},{"type":"element","tagName":"ul","properties":{},"children":[{"type":"text","value":"\n"},{"type":"element","tagName":"li","properties":{},"children":[{"type":"element","tagName":"strong","properties":{},"children":[{"type":"text","value":"$text"}]},{"type":"text","value":": Con esto le indicamos que haga una búsqueda de tipo texto."}]},{"type":"text","value":"\n"},{"type":"element","tagName":"li","properties":{},"children":[{"type":"element","tagName":"strong","properties":{},"children":[{"type":"text","value":"$search"}]},{"type":"text","value":": Con search lo que hacemos es indicarle que busque por algo."}]},{"type":"text","value":"\n"}]},{"type":"text","value":"\n"},{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"Hagamos alguna búsqueda para ver que pasa:"}]},{"type":"text","value":"\n"},{"type":"element","tagName":"div","properties":{"className":["kg-card","kg-code-card","gatsby-highlight"],"dataLanguage":"text"},"children":[{"type":"element","tagName":"pre","properties":{"className":["language-text"]},"children":[{"type":"element","tagName":"code","properties":{"className":["language-text"]},"children":[{"type":"text","value":"db.heros.find({$text: {$search: \"coat\"}}).pretty()\n"}]}]}]},{"type":"text","value":"\n"},{"type":"element","tagName":"p","properties":{},"children":[{"type":"element","tagName":"img","properties":{"src":"https://jlgarcia.fulldev.ninja/assets/images/2017/10/Captura-de-pantalla-2017-10-17-a-las-9.02.28.png","alt":"full text index example2"},"children":[]}]},{"type":"text","value":"\n"},{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"Como véis lo encuentra sin problemas. Las búsquedas de este tipo en mongo parecen ser bastante inteligentes, ignoran las típicas palabras comodines como pueden ser en ingles un "},{"type":"element","tagName":"em","properties":{},"children":[{"type":"text","value":"\"a\""}]},{"type":"text","value":" o "},{"type":"element","tagName":"em","properties":{},"children":[{"type":"text","value":"\"the\""}]},{"type":"text","value":" y se centra en el resto, también busca por raiz de palabra, es decir, por palabras que contengan la palabra que estamos buscando (OJO tienen que ser palabras en sí y no mezclas de comodines como "},{"type":"element","tagName":"em","properties":{},"children":[{"type":"text","value":"some.."}]},{"type":"text","value":"), por ejemplo:"}]},{"type":"text","value":"\n"},{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"db.heros.find({$text: {$search: \"put\"}}).pretty()"}]},{"type":"text","value":"\n"},{"type":"element","tagName":"p","properties":{},"children":[{"type":"element","tagName":"img","properties":{"src":"https://jlgarcia.fulldev.ninja/assets/images/2017/10/Captura-de-pantalla-2017-10-17-a-las-9.07.04.png","alt":"full text index example3"},"children":[]}]},{"type":"text","value":"\n"},{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"Un detalle es que el crea el índice en un idioma específico, por eso puede ignorar ciertas palabras (están soportados la mayoría de los idiomas) y en el caso de que no se le indicara el idioma en el índice, este seguiría siendo funcional pero no tan efectivo ya que nos metería palabras innecesarias en las búsquedas pero a grandes rasgos funcionaría perfectamente."}]},{"type":"text","value":"\n"},{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"Como extra comentar que las búsquedas son "},{"type":"element","tagName":"strong","properties":{},"children":[{"type":"text","value":"caseInsensitive"}]},{"type":"text","value":", es decir, ignora si la palabra está en mayúsculas o en minúsculas y también ignora los acentos (ambas opciones son modificables y lo veremos más abajo)"}]},{"type":"text","value":"\n"},{"type":"element","tagName":"h3","properties":{"id":"importantodatos"},"children":[{"type":"text","value":"Importanto datos"}]},{"type":"text","value":"\n"},{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"Antes de continuar necesitamos una colección con algo más de información, para ello nos vamos a descargar una de ejemplo oficial de Mongo desde:"},{"type":"element","tagName":"br","properties":{},"children":[]},{"type":"text","value":"\n"},{"type":"element","tagName":"a","properties":{"href":"https://raw.githubusercontent.com/mongodb/docs-assets/primer-dataset/primer-dataset.json"},"children":[{"type":"text","value":"AQUI"}]},{"type":"text","value":" (recomiendo botón derecho- guardar como)"}]},{"type":"text","value":"\n"},{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"Ahora vamos a importarla, para ello nos salimos fuera de la shell de mongo y en la misma ruta donde hacíamos"}]},{"type":"text","value":"\n"},{"type":"element","tagName":"div","properties":{"className":["kg-card","kg-code-card","gatsby-highlight"],"dataLanguage":"text"},"children":[{"type":"element","tagName":"pre","properties":{"className":["language-text"]},"children":[{"type":"element","tagName":"code","properties":{"className":["language-text"]},"children":[{"type":"text","value":"bin/mongo\n"}]}]}]},{"type":"text","value":"\n"},{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"Ejecutamos lo siguiente"}]},{"type":"text","value":"\n"},{"type":"element","tagName":"div","properties":{"className":["kg-card","kg-code-card","gatsby-highlight"],"dataLanguage":"text"},"children":[{"type":"element","tagName":"pre","properties":{"className":["language-text"]},"children":[{"type":"element","tagName":"code","properties":{"className":["language-text"]},"children":[{"type":"text","value":"./mongoimport -c collectionTest -d databaseTest ../primer-dataset.json\n"}]}]}]},{"type":"text","value":"\n"},{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"Si no esta en esa ruta, buscar el ejecutable "},{"type":"element","tagName":"strong","properties":{},"children":[{"type":"text","value":"mongoimport"}]},{"type":"text","value":", y lo que hacemos es meter los datos dentro de una colección nombre "},{"type":"element","tagName":"em","properties":{},"children":[{"type":"text","value":"collectionTest"}]},{"type":"text","value":" que a su vez estará dentro de una base de datos llamada "},{"type":"element","tagName":"em","properties":{},"children":[{"type":"text","value":"databaseTest"}]},{"type":"text","value":" (lo último es el fichero JSON que nos hemos descargado)"}]},{"type":"text","value":"\n"},{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"Veamos como son los documentos que tiene esta colección, usamos:"}]},{"type":"text","value":"\n"},{"type":"element","tagName":"div","properties":{"className":["kg-card","kg-code-card","gatsby-highlight"],"dataLanguage":"text"},"children":[{"type":"element","tagName":"pre","properties":{"className":["language-text"]},"children":[{"type":"element","tagName":"code","properties":{"className":["language-text"]},"children":[{"type":"text","value":"db.collectionTest.findOne()\n"}]}]}]},{"type":"text","value":"\n"},{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"Y veremos algo similar a esto:"}]},{"type":"text","value":"\n"},{"type":"element","tagName":"p","properties":{},"children":[{"type":"element","tagName":"img","properties":{"src":"https://jlgarcia.fulldev.ninja/assets/images/2017/10/Captura-de-pantalla-2017-10-17-a-las-21.59.54.png","alt":"mongoImport"},"children":[]}]},{"type":"text","value":"\n"},{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"Tenemos coordenadas, que nos serán útiles cuando trabajemos con los índices geoespaciales, y tenemos varios campos de texto como \"street\", \"name\" o \"cuisine\". Con esto lo que vamos a ver es como podemos gestionar nuestros índices para que diferencie la importancia de unos campos de texto u otros y así poder hacer nuestras búsquedas más eficaces. Para ello tenemos la propiedad weights , que mejor que explicarlo creo que es verlo en un ejemplo de uso:"}]},{"type":"text","value":"\n"},{"type":"element","tagName":"div","properties":{"className":["kg-card","kg-code-card","gatsby-highlight"],"dataLanguage":"text"},"children":[{"type":"element","tagName":"pre","properties":{"className":["language-text"]},"children":[{"type":"element","tagName":"code","properties":{"className":["language-text"]},"children":[{"type":"text","value":"db.collectionTest.createIndex({name: \"text\",\"address.street\": \"text\",cuisine: \"text\"},{weights:{name: 5, cuisine: 8, \"address.street\": 10}})\n"}]}]}]},{"type":"text","value":"\n"},{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"Si os fijáis hemos creado un índice con los tres campos que he comentado antes, y a continuación le he puesto unos pesos específicos a cada uno, cuanto más alto más importante es el campo. "},{"type":"element","tagName":"strong","properties":{},"children":[{"type":"text","value":"OJO para los subdocumentos es necesario poner comillas a los nombres de los campos en este caso sería el campo address:{ street}."}]},{"type":"element","tagName":"br","properties":{},"children":[]},{"type":"text","value":"\nHe puesto esos números pensando qué a lo hora de buscar un restaurante a no ser que busques un restaurante en concreto con el nombre exacto, sueles buscar una calle a ver que tiene, o lo mejor buscas por un tipo de cocina, pero esto es solo un ejemplo podéis usar la lógica que más os guste. En una aplicación en producción esto habrá que pensarlo más detenidamente."}]},{"type":"text","value":"\n"},{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"Bueno ahora vamos a probar una búsqueda, y para que sea más visual vamos a solicitarle a Mongo que nos añada una puntuación a la búsqueda. Lo más fácil es verlo con un ejemplo:"}]},{"type":"text","value":"\n"},{"type":"element","tagName":"div","properties":{"className":["kg-card","kg-code-card","gatsby-highlight"],"dataLanguage":"text"},"children":[{"type":"element","tagName":"pre","properties":{"className":["language-text"]},"children":[{"type":"element","tagName":"code","properties":{"className":["language-text"]},"children":[{"type":"text","value":"db.collectionTest.find({$text: {$search: \"irish\"}},{score: {$meta: \"textScore\"}, name:1, cuisine:1, \"address.street\":1,_id:0}).sort({score:{$meta: \"textScore\"}})\n"}]}]}]},{"type":"text","value":"\n"},{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"Vayamos por orden:"}]},{"type":"text","value":"\n"},{"type":"element","tagName":"ul","properties":{},"children":[{"type":"text","value":"\n"},{"type":"element","tagName":"li","properties":{},"children":[{"type":"element","tagName":"strong","properties":{},"children":[{"type":"text","value":"$text:{$search: \"irish\"}"}]},{"type":"text","value":": Esto ya lo hemos visto que es la palabra por la que estamos buscando."}]},{"type":"text","value":"\n"},{"type":"element","tagName":"li","properties":{},"children":[{"type":"element","tagName":"strong","properties":{},"children":[{"type":"text","value":"score: {$meta: \"textScore\"}"}]},{"type":"text","value":": Aquí le indicamos que nos genere un campo con la puntuación del texto."}]},{"type":"text","value":"\n"},{"type":"element","tagName":"li","properties":{},"children":[{"type":"element","tagName":"strong","properties":{},"children":[{"type":"text","value":"name:1, cuisine:1, \"address.street\":1,_id:0"}]},{"type":"text","value":": Si os acordáis de esto, le estamos diciendo los campos que queremos ver para que no nos saque todos, name, cuisine y address.street, y ademas que nos quite el _id que nos molesta."}]},{"type":"text","value":"\n"},{"type":"element","tagName":"li","properties":{},"children":[{"type":"element","tagName":"strong","properties":{},"children":[{"type":"text","value":"sort({score:{$meta: \"textScore\"}})"}]},{"type":"text","value":": Por último le decimos que nos ordene los resultados por la puntuación que ha recibido."}]},{"type":"text","value":"\n"}]},{"type":"text","value":"\n"},{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"Al ejecutarlo obtenemos esto:"}]},{"type":"text","value":"\n"},{"type":"element","tagName":"p","properties":{},"children":[{"type":"element","tagName":"img","properties":{"src":"https://jlgarcia.fulldev.ninja/assets/images/2017/10/Captura-de-pantalla-2017-10-20-a-las-9.26.25.png","alt":"Example textScore"},"children":[]}]},{"type":"text","value":"\n"},{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"Vemos que obtenemos varios resultados (si escribimos it nos saldrán más) y que empiezan por 12.55 de puntuación. En este caso la puntuación es debida a que viene en cuisine y que ocupa gran parte del campo name si os fijáis va bajando la puntuación siempre que el campo name tiene más palabras(y no son comodines como The o a). Como detalle haceros a la idea de que estamos filtrando unos 25000 documentos que yo creo que no está nada mal lo que tarda en devolver los resultados"}]},{"type":"text","value":"\n"},{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"Bueno supongo que váis viendo un poco como funcionan las búsquedas de texto. Habréis visto que en el campo street no tenemos coincidiencias, vamos a buscar algo relacionado con una calle."}]},{"type":"text","value":"\n"},{"type":"element","tagName":"div","properties":{"className":["kg-card","kg-code-card","gatsby-highlight"],"dataLanguage":"text"},"children":[{"type":"element","tagName":"pre","properties":{"className":["language-text"]},"children":[{"type":"element","tagName":"code","properties":{"className":["language-text"]},"children":[{"type":"text","value":"db.collectionTest.find({$text: {$search: \"Jamaica\"}},{score: {$meta: \"textScore\"}, name:1, cuisine:1, \"address.street\":1,_id:0}).sort({score:{$meta: \"textScore\"}})\n"}]}]}]},{"type":"text","value":"\n"},{"type":"element","tagName":"p","properties":{},"children":[{"type":"element","tagName":"img","properties":{"src":"https://jlgarcia.fulldev.ninja/assets/images/2017/10/Captura-de-pantalla-2017-10-20-a-las-9.29.56.png","alt":"Example textScore"},"children":[]}]},{"type":"text","value":"\n"},{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"Veis que sigue el mismo concepto pero esta vez con la calle y el nombre. Estas búsquedas las podemos hacer tan complicadas como queramos igual que el resto que ya vimos anteriormente."}]},{"type":"text","value":"\n"},{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"Como extra recalcar que podemos:"}]},{"type":"text","value":"\n"},{"type":"element","tagName":"ul","properties":{},"children":[{"type":"text","value":"\n"},{"type":"element","tagName":"li","properties":{},"children":[{"type":"text","value":"Modificar el lenguaje del índice con "},{"type":"element","tagName":"strong","properties":{},"children":[{"type":"text","value":"$language: Idioma"}]},{"type":"text","value":", por ejemplo"}]},{"type":"text","value":"\n"}]},{"type":"text","value":"\n"},{"type":"element","tagName":"div","properties":{"className":["kg-card","kg-code-card","gatsby-highlight"],"dataLanguage":"text"},"children":[{"type":"element","tagName":"pre","properties":{"className":["language-text"]},"children":[{"type":"element","tagName":"code","properties":{"className":["language-text"]},"children":[{"type":"text","value":"$languaje: Spanish\n"}]}]}]},{"type":"text","value":"\n"},{"type":"element","tagName":"ul","properties":{},"children":[{"type":"text","value":"\n"},{"type":"element","tagName":"li","properties":{},"children":[{"type":"text","value":"Indicarle que sea "},{"type":"element","tagName":"strong","properties":{},"children":[{"type":"text","value":"$caseSensitive"}]},{"type":"text","value":":"}]},{"type":"text","value":"\n"}]},{"type":"text","value":"\n"},{"type":"element","tagName":"div","properties":{"className":["kg-card","kg-code-card","gatsby-highlight"],"dataLanguage":"text"},"children":[{"type":"element","tagName":"pre","properties":{"className":["language-text"]},"children":[{"type":"element","tagName":"code","properties":{"className":["language-text"]},"children":[{"type":"text","value":"$caseSensitive: True (default false)\n"}]}]}]},{"type":"text","value":"\n"},{"type":"element","tagName":"ul","properties":{},"children":[{"type":"text","value":"\n"},{"type":"element","tagName":"li","properties":{},"children":[{"type":"text","value":"Soportar acentos con "},{"type":"element","tagName":"strong","properties":{},"children":[{"type":"text","value":"$diacriticSensitive"}]},{"type":"text","value":":"}]},{"type":"text","value":"\n"}]},{"type":"text","value":"\n"},{"type":"element","tagName":"div","properties":{"className":["kg-card","kg-code-card","gatsby-highlight"],"dataLanguage":"text"},"children":[{"type":"element","tagName":"pre","properties":{"className":["language-text"]},"children":[{"type":"element","tagName":"code","properties":{"className":["language-text"]},"children":[{"type":"text","value":"$diacriticSensitive: True (default false)\n"}]}]}]},{"type":"text","value":"\n"},{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"Creo que con esto es suficiente para que se entienda como funcionan los "},{"type":"element","tagName":"em","properties":{},"children":[{"type":"element","tagName":"strong","properties":{},"children":[{"type":"text","value":"Full text index"}]}]},{"type":"text","value":" y podáis hacer los vuestros según requiera vuestra aplicación. Ahora empecemos con los "},{"type":"element","tagName":"em","properties":{},"children":[{"type":"element","tagName":"strong","properties":{},"children":[{"type":"text","value":"Indices Geoespaciales"}]}]}]},{"type":"text","value":"\n"},{"type":"element","tagName":"h2","properties":{"id":"geospatialindex"},"children":[{"type":"text","value":"Geospatial Index"}]},{"type":"text","value":"\n"},{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"En Mongo tenemos dos tipos de índices "},{"type":"element","tagName":"em","properties":{},"children":[{"type":"text","value":"Geoespaciales"}]},{"type":"text","value":":"}]},{"type":"text","value":"\n"},{"type":"element","tagName":"ul","properties":{},"children":[{"type":"text","value":"\n"},{"type":"element","tagName":"li","properties":{},"children":[{"type":"text","value":"\n"},{"type":"element","tagName":"p","properties":{},"children":[{"type":"element","tagName":"strong","properties":{},"children":[{"type":"text","value":"2d"}]},{"type":"text","value":": Basicamente representa una cuadrícula sobre un plano, pensado para superficies pequeñas, por ejemplo un campo de fútbol. También si no tenemos pensado usar geoJSON o nos da igual la curvatura de la tierra."}]},{"type":"text","value":"\n"}]},{"type":"text","value":"\n"},{"type":"element","tagName":"li","properties":{},"children":[{"type":"text","value":"\n"},{"type":"element","tagName":"p","properties":{},"children":[{"type":"element","tagName":"strong","properties":{},"children":[{"type":"text","value":"2dsphere"}]},{"type":"text","value":": El caso contrario, es decir, situamos cosas sobre la tierra. Este es el más común realmente. Esta basado en el estandar "},{"type":"element","tagName":"em","properties":{},"children":[{"type":"text","value":"WGS 84"}]},{"type":"text","value":", un estandar que intenta simular en una espera a la tierra."}]},{"type":"text","value":"\n"}]},{"type":"text","value":"\n"}]},{"type":"text","value":"\n"},{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"Las posiciones en cualquier mapa están representadas por unas "},{"type":"element","tagName":"em","properties":{},"children":[{"type":"element","tagName":"strong","properties":{},"children":[{"type":"text","value":"coordenadas"}]}]},{"type":"text","value":", estas coordenadas están representadas en:"}]},{"type":"text","value":"\n"},{"type":"element","tagName":"ul","properties":{},"children":[{"type":"text","value":"\n"},{"type":"element","tagName":"li","properties":{},"children":[{"type":"text","value":"\n"},{"type":"element","tagName":"p","properties":{},"children":[{"type":"element","tagName":"strong","properties":{},"children":[{"type":"text","value":"Latitud"}]},{"type":"text","value":": Distancia desde el Ecuador al norte y al sur. De 0 a 90 al norte, de 0 a -90 al sur."}]},{"type":"text","value":"\n"}]},{"type":"text","value":"\n"},{"type":"element","tagName":"li","properties":{},"children":[{"type":"text","value":"\n"},{"type":"element","tagName":"p","properties":{},"children":[{"type":"element","tagName":"strong","properties":{},"children":[{"type":"text","value":"Longitud"}]},{"type":"text","value":": Distancia desde el "},{"type":"element","tagName":"em","properties":{},"children":[{"type":"element","tagName":"strong","properties":{},"children":[{"type":"text","value":"Meridiano de Greenwich"}]}]},{"type":"text","value":" (seían los 0 Grados). Para localizaciones al este sería de 0 a 180 y para localizaciones al oeste de 0 a -180"}]},{"type":"text","value":"\n"}]},{"type":"text","value":"\n"}]},{"type":"text","value":"\n"},{"type":"element","tagName":"p","properties":{},"children":[{"type":"element","tagName":"strong","properties":{},"children":[{"type":"text","value":"OJO las coordenadas en MongoDB se guardan Longitud/Latitud y en Google Maps Latitud/Longitud"}]}]},{"type":"text","value":"\n"},{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"Bien ya sabemos un poco de que hablamos, ahora veamos como crear un índice de este tipo:"}]},{"type":"text","value":"\n"},{"type":"element","tagName":"div","properties":{"className":["kg-card","kg-code-card","gatsby-highlight"],"dataLanguage":"text"},"children":[{"type":"element","tagName":"pre","properties":{"className":["language-text"]},"children":[{"type":"element","tagName":"code","properties":{"className":["language-text"]},"children":[{"type":"text","value":"db.collectionName.createIndex({campo_localización: \"2dsphere\"})\n"}]}]}]},{"type":"text","value":"\n"},{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"(Como véis siempre tiene el mismo estilo la creación de índices) Por si acaso no lo imagináis ya, el campo de localización tiene ser unas "},{"type":"element","tagName":"strong","properties":{},"children":[{"type":"text","value":"coordenadas"}]},{"type":"text","value":" o datos al estilo "},{"type":"element","tagName":"strong","properties":{},"children":[{"type":"element","tagName":"a","properties":{"href":"http://geojson.org/"},"children":[{"type":"text","value":"GeoJSON"}]}]}]},{"type":"text","value":"\n"},{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"Vamos a crear un índice con los datos de las coordenadas que tenemos en la colección que usamos antes, para ello basta con crear el índice:"}]},{"type":"text","value":"\n"},{"type":"element","tagName":"div","properties":{"className":["kg-card","kg-code-card","gatsby-highlight"],"dataLanguage":"text"},"children":[{"type":"element","tagName":"pre","properties":{"className":["language-text"]},"children":[{"type":"element","tagName":"code","properties":{"className":["language-text"]},"children":[{"type":"text","value":"db.collectionTest.createIndex({\"address.coord\": \"2dsphere\"})\n"}]}]}]},{"type":"text","value":"\n"},{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"Ya tenemos nuestro índice creado, ahora vamos a ver como es uno de nuestros elementos con coordenadas"}]},{"type":"text","value":"\n"},{"type":"element","tagName":"div","properties":{"className":["kg-card","kg-code-card","gatsby-highlight"],"dataLanguage":"text"},"children":[{"type":"element","tagName":"pre","properties":{"className":["language-text"]},"children":[{"type":"element","tagName":"code","properties":{"className":["language-text"]},"children":[{"type":"text","value":"db.collectionTest.findOne()\n"}]}]}]},{"type":"text","value":"\n"},{"type":"element","tagName":"p","properties":{},"children":[{"type":"element","tagName":"img","properties":{"src":"https://jlgarcia.fulldev.ninja/assets/images/2017/10/Captura-de-pantalla-2017-10-22-a-las-21.22.08.png","alt":"Document Example"},"children":[]}]},{"type":"text","value":"\n"},{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"Y por si acaso nos vamos a ir a Google Maps a comprobar los datos, "},{"type":"element","tagName":"strong","properties":{},"children":[{"type":"text","value":"OJO recordad que están al revés"}]}]},{"type":"text","value":"\n"},{"type":"element","tagName":"p","properties":{},"children":[{"type":"element","tagName":"img","properties":{"src":"https://jlgarcia.fulldev.ninja/assets/images/2017/10/Captura-de-pantalla-2017-10-22-a-las-21.23.32.png","alt":"Google Maps Check"},"children":[]}]},{"type":"text","value":"\n"},{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"Coincide con nuestra calle ¿no?. Bueno pues ahora vamos a probar a buscar por coordenadas directamente, es decir, que me muestre quien contiene la coordenada que pasamos. "},{"type":"element","tagName":"strong","properties":{},"children":[{"type":"text","value":"OJO la búsqueda que vamos a realizar ahora lo que hace es buscar documentos que contengan esa coordenada, si tuvieramos una base de datos con las coordenadas de los paises enteros podríamos sacar el pais al que pertenece"}]}]},{"type":"text","value":"\n"},{"type":"element","tagName":"div","properties":{"className":["kg-card","kg-code-card","gatsby-highlight"],"dataLanguage":"text"},"children":[{"type":"element","tagName":"pre","properties":{"className":["language-text"]},"children":[{"type":"element","tagName":"code","properties":{"className":["language-text"]},"children":[{"type":"text","value":"db.collectionTest.find(\n {\"address.coord\":\n {$geoIntersects:\n {$geometry:\n {type: \"Point\", coordinates: [-73.9549067, 40.6971322]}}}},{\"name\":1}).pretty()\n"}]}]}]},{"type":"text","value":"\n"},{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"Veamos que estamos pidiendo aqui:"}]},{"type":"text","value":"\n"},{"type":"element","tagName":"ul","properties":{},"children":[{"type":"text","value":"\n"},{"type":"element","tagName":"li","properties":{},"children":[{"type":"element","tagName":"strong","properties":{},"children":[{"type":"text","value":"address.coord"}]},{"type":"text","value":": Esta es fácil le indicamos donde queremos que busque."}]},{"type":"text","value":"\n"},{"type":"element","tagName":"li","properties":{},"children":[{"type":"element","tagName":"strong","properties":{},"children":[{"type":"text","value":"geoIntersects"}]},{"type":"text","value":": Es uno de los operadores para buscar con los índices Geoespaciales (tener en cuenta que todo esto esta más pensado para documentos tipo "},{"type":"element","tagName":"em","properties":{},"children":[{"type":"text","value":"GeoJSON"}]},{"type":"text","value":"). En este caso lo que hace es buscar geometrias que se crucen con la coordenada que le indiquemos. Veremos alguno más, tenemos 4 distintos. "},{"type":"element","tagName":"a","properties":{"href":"https://docs.mongodb.com/manual/geospatial-queries/#geospatial-query-operators"},"children":[{"type":"text","value":"Geospatial query operators"}]}]},{"type":"text","value":"\n"},{"type":"element","tagName":"li","properties":{},"children":[{"type":"element","tagName":"strong","properties":{},"children":[{"type":"text","value":"geometry"}]},{"type":"text","value":": Propiedad para indicarle lo que queremos buscar."}]},{"type":"text","value":"\n"},{"type":"element","tagName":"li","properties":{},"children":[{"type":"element","tagName":"strong","properties":{},"children":[{"type":"text","value":"type"}]},{"type":"text","value":": Dentro de type le indicamos el tipo de coordenadas que le vamos a buscar, siempre pensando en formato GeoJSON. En este caso hemos puesto un tipo \"Punto\". Existen varios distintos, lo mejor es que los veáis en la documentación: "},{"type":"element","tagName":"a","properties":{"href":"https://docs.mongodb.com/manual/reference/geojson/"},"children":[{"type":"text","value":"GeoJSON Objects"}]}]},{"type":"text","value":"\n"},{"type":"element","tagName":"li","properties":{},"children":[{"type":"element","tagName":"strong","properties":{},"children":[{"type":"text","value":"coordinates y name"}]},{"type":"text","value":": Básicamente son las coordenadas por las que queremos buscar y lo que queremos que nos devuelva."}]},{"type":"text","value":"\n"}]},{"type":"text","value":"\n"},{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"En este caso la búsqueda parece que es sobre una ubicación específica porque no tenemos coordenadas al estilo "},{"type":"element","tagName":"em","properties":{},"children":[{"type":"text","value":"\"Polígono\""}]},{"type":"text","value":", pero es más que nada para que veamos que funciona bien. Al ejecutarlo vemos que nos devuelve el restaurante que habíamos seleccionado"}]},{"type":"text","value":"\n"},{"type":"element","tagName":"p","properties":{},"children":[{"type":"element","tagName":"img","properties":{"src":"https://jlgarcia.fulldev.ninja/assets/images/2017/10/Captura-de-pantalla-2017-10-24-a-las-9.33.48.png","alt":"Search Example"},"children":[]}]},{"type":"text","value":"\n"},{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"Probemos ahora algo con algo más de \"chicha\", vamos a buscar restaurantes que estén a unos 500 metros del que hemos seleccionado antes. Para ello en lugar de usar el operador "},{"type":"element","tagName":"em","properties":{},"children":[{"type":"text","value":"geoIntersect"}]},{"type":"text","value":" vamos a usar el operador "},{"type":"element","tagName":"em","properties":{},"children":[{"type":"text","value":"near"}]}]},{"type":"text","value":"\n"},{"type":"element","tagName":"div","properties":{"className":["kg-card","kg-code-card","gatsby-highlight"],"dataLanguage":"text"},"children":[{"type":"element","tagName":"pre","properties":{"className":["language-text"]},"children":[{"type":"element","tagName":"code","properties":{"className":["language-text"]},"children":[{"type":"text","value":"db.collectionTest.find({\n \"address.coord\":{\n $near:{\n $geometry:{\n type: \"Point\", \n coordinates: [-73.9549067, 40.6971322]},\n $maxDistance: 500\n }\n }\n },{\"name\":1})\n"}]}]}]},{"type":"text","value":"\n"},{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"Como propiedad extra que no habíamos visto antes tenemos "},{"type":"element","tagName":"strong","properties":{},"children":[{"type":"text","value":"$maxDistance"}]},{"type":"text","value":", en la cual indicamos una distancia máxima en metros."}]},{"type":"text","value":"\n"},{"type":"element","tagName":"p","properties":{},"children":[{"type":"element","tagName":"img","properties":{"src":"https://jlgarcia.fulldev.ninja/assets/images/2017/10/Captura-de-pantalla-2017-10-24-a-las-9.34.27.png","alt":"Search Example with Metres"},"children":[]}]},{"type":"text","value":"\n"},{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"He cogido las coordenadas de los dos primeros restaurantes y si las ponemos en "},{"type":"element","tagName":"strong","properties":{},"children":[{"type":"text","value":"Google Maps"}]},{"type":"text","value":" (recordemos que tenemos que invertir las coordenadas ya que google las guarda al revés), y esto es lo que aparece"}]},{"type":"text","value":"\n"},{"type":"element","tagName":"p","properties":{},"children":[{"type":"element","tagName":"img","properties":{"src":"https://jlgarcia.fulldev.ninja/assets/images/2017/10/Captura-de-pantalla-2017-10-25-a-las-9.21.20.png","alt":"Google Maps 500 mt example"},"children":[]}]},{"type":"text","value":"\n"},{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"Como véis está a menos de 500 metros, por lo que podemos confirmar que realmente funciona."}]},{"type":"text","value":"\n"},{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"Ahora pensemos en otro escenario, las aplicaciones móviles, en la mayoria de los casos cuando buscamos lo que tenemos alrededor en el mapa lo que queremos ver es que se vé en la pantalla, es decir, que hay en la cuadrícula del mapa que estoy mostrando. Esto también lo podemos hacer con MongoDB, solo tenemos que indicarle cuales son las coordenadas que se están mostrando actualmente."}]},{"type":"text","value":"\n"},{"type":"element","tagName":"div","properties":{"className":["kg-card","kg-code-card","gatsby-highlight"],"dataLanguage":"text"},"children":[{"type":"element","tagName":"pre","properties":{"className":["language-text"]},"children":[{"type":"element","tagName":"code","properties":{"className":["language-text"]},"children":[{"type":"text","value":"db.collectionTest.find({\"address.coord\":{\n $geoWithin: {\n $geometry:{\n type: \"Polygon\", \n coordinates:[\n [[-73,40],\n [-75,40],\n [-75,42],\n [-73,42],\n [-73,40]]]}}}},\n {\"name\":1,\"address.coord\":1,\"_id\":0})\n"}]}]}]},{"type":"text","value":"\n"},{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"Si os fijáis en la query hemos cambiado la propiedad a "},{"type":"element","tagName":"strong","properties":{},"children":[{"type":"text","value":"geoWithin"}]},{"type":"text","value":", es decir, lo que esté dentro de esa zona, y le pasamos un polígono, con 5 coordenadas (imagináos que es una línea que vamos dibujando, que empieza en un punto y tiene que acabar en el mismo punto, por eso son 5 ;) )"},{"type":"element","tagName":"br","properties":{},"children":[]},{"type":"text","value":"\nAquí tendríamos una cuadrícula que sería más o menos esta zona"}]},{"type":"text","value":"\n"},{"type":"element","tagName":"p","properties":{},"children":[{"type":"element","tagName":"img","properties":{"src":"https://jlgarcia.fulldev.ninja/assets/images/2017/10/Captura-de-pantalla-2017-10-25-a-las-10.02.34.png","alt":"Polygon Google Maps"},"children":[]}]},{"type":"text","value":"\n"},{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"Si la ejecutamos veremos que nos saca un montón de coincidencias que son las que están dentro de esa zona (que yo diría que son todos jejeje)"}]},{"type":"text","value":"\n"},{"type":"element","tagName":"p","properties":{},"children":[{"type":"element","tagName":"img","properties":{"src":"https://jlgarcia.fulldev.ninja/assets/images/2017/10/Captura-de-pantalla-2017-10-25-a-las-10.06.42.png","alt":"Polygon Example Query"},"children":[]}]},{"type":"text","value":"\n"},{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"Si por ejemplo contamos los elementos:"}]},{"type":"text","value":"\n"},{"type":"element","tagName":"div","properties":{"className":["kg-card","kg-code-card","gatsby-highlight"],"dataLanguage":"text"},"children":[{"type":"element","tagName":"pre","properties":{"className":["language-text"]},"children":[{"type":"element","tagName":"code","properties":{"className":["language-text"]},"children":[{"type":"text","value":"db.collectionTest.find({\"address.coord\":{$geoWithin: {$geometry:{type: \"Polygon\", coordinates:[[[-73,40],[-75,40],[-75,42],[-73,42],[-73,40]]]}}}},{\"name\":1,\"address.coord\":1,\"_id\":0}).count()\n"}]}]}]},{"type":"text","value":"\n"},{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"Nos salen:"}]},{"type":"text","value":"\n"},{"type":"element","tagName":"p","properties":{},"children":[{"type":"element","tagName":"img","properties":{"src":"https://jlgarcia.fulldev.ninja/assets/images/2017/10/Captura-de-pantalla-2017-10-25-a-las-10.09.53.png","alt":"Count Query"},"children":[]}]},{"type":"text","value":"\n"},{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"Vamos a probar a cambiar, todas las coordenadas -73 por -74 y así comprobamos como nos filtra de verdad:"}]},{"type":"text","value":"\n"},{"type":"element","tagName":"div","properties":{"className":["kg-card","kg-code-card","gatsby-highlight"],"dataLanguage":"text"},"children":[{"type":"element","tagName":"pre","properties":{"className":["language-text"]},"children":[{"type":"element","tagName":"code","properties":{"className":["language-text"]},"children":[{"type":"text","value":"db.collectionTest.find({\"address.coord\":{$geoWithin: {$geometry:{type: \"Polygon\", coordinates:[[[-74,40],[-75,40],[-75,42],[-74,42],[-74,40]]]}}}},{\"name\":1,\"address.coord\":1,\"_id\":0})\n"}]}]}]},{"type":"text","value":"\n"},{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"Si ejecutamos vemos como todos los documentos empiezan a partir de la longitud -74"}]},{"type":"text","value":"\n"},{"type":"element","tagName":"p","properties":{},"children":[{"type":"element","tagName":"img","properties":{"src":"https://jlgarcia.fulldev.ninja/assets/images/2017/10/Captura-de-pantalla-2017-10-25-a-las-10.11.24.png","alt":"Query with long -74"},"children":[]}]},{"type":"text","value":"\n"},{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"Si contamos ahora los documentos tenemos"}]},{"type":"text","value":"\n"},{"type":"element","tagName":"p","properties":{},"children":[{"type":"element","tagName":"img","properties":{"src":"https://jlgarcia.fulldev.ninja/assets/images/2017/10/Captura-de-pantalla-2017-10-25-a-las-10.12.48.png","alt":"Query -74 count"},"children":[]}]},{"type":"text","value":"\n"},{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"Como vemos realmente si nos está filtrando por una zona en específico. Esto es un ejemplo de algunas cosas típicas que podemos necesitar hacer."}]},{"type":"text","value":"\n"},{"type":"element","tagName":"h2","properties":{"id":"subiendodenivel"},"children":[{"type":"text","value":"Subiendo de nivel"}]},{"type":"text","value":"\n"},{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"Bien ahora subamos un poco más el nivel, vamos a ver como podemos programar directamente en la consola de MongoDB, en este ejemplo que vamos a ver seguiremos usando los índices "},{"type":"element","tagName":"em","properties":{},"children":[{"type":"text","value":"geoespaciales"}]},{"type":"text","value":" porque son los últimos que hemos visto, pero tener en cuenta que se podría hacer como queráis."}]},{"type":"text","value":"\n"},{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"Lo que vamos hacer va a ser recorrer todos los restaurantes que tenemos en la colección de test que estamos usando y vamos a ponerles una propiedad nueva indicando cual es el primer restaurante que esté a menos 500 mt (si hay alguno claro)."}]},{"type":"text","value":"\n"},{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"Una cosa muy interesante y util en mongo es que podemos usar variables.....y bueno podemos usar un estilo de programación similar al de "},{"type":"element","tagName":"em","properties":{},"children":[{"type":"text","value":"JavaScript"}]},{"type":"text","value":". Entonces para este ejemplo vamos a usar el siguiente código (podéis copiar y pegar ;) )"}]},{"type":"text","value":"\n"},{"type":"element","tagName":"div","properties":{"className":["kg-card","kg-code-card","gatsby-highlight"],"dataLanguage":"text"},"children":[{"type":"element","tagName":"pre","properties":{"className":["language-text"]},"children":[{"type":"element","tagName":"code","properties":{"className":["language-text"]},"children":[{"type":"text","value":"var restaurants = db.collectionTest.find()\n\nwhile(restaurants.hasNext()){\n\n var rest = restaurants.next();\n var coords = rest.address.coord;\n \n if (coords != \"\"){\n var neighbour = db.collectionTest.find({\"address.coord\":{$near:\n {$geometry:{type: \"Point\", coordinates: coords},$maxDistance: 500}}}).skip(1).limit(1);\n \n if (neighbour[0] != undefined){\n var neigh = neighbour[0];\n\n db.collectionTest.update({\"_id\": rest._id},\n {$set: {\n \"address.neighbour\": neigh.name \n }}\n );\n } \n \n }\n}\n"}]}]}]},{"type":"text","value":"\n"},{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"En general supongo que más o menos se entiende el código (y no está con la intención de ser el mejor ni el más bonito solo es un ejemplo) pero por si acaso voy a explicarlo paso a paso."}]},{"type":"text","value":"\n"},{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"Lo primero almacenamos todos nuestros documentos en una variable, se podría haber limitado la cantidad o cualquier cosa que se os ocurra pero así comprobamos lo que tarda en modificarnos mas de 25000 documentos."}]},{"type":"text","value":"\n"},{"type":"element","tagName":"div","properties":{"className":["kg-card","kg-code-card","gatsby-highlight"],"dataLanguage":"text"},"children":[{"type":"element","tagName":"pre","properties":{"className":["language-text"]},"children":[{"type":"element","tagName":"code","properties":{"className":["language-text"]},"children":[{"type":"text","value":"var restaurants = db.collectionTest.find()\n"}]}]}]},{"type":"text","value":"\n"},{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"Y a continuación por ejemplo haremos un bucle while recorriendo los documentos que tenemos almacenados en la variable "},{"type":"element","tagName":"em","properties":{},"children":[{"type":"text","value":"restaurants"}]}]},{"type":"text","value":"\n"},{"type":"element","tagName":"div","properties":{"className":["kg-card","kg-code-card","gatsby-highlight"],"dataLanguage":"text"},"children":[{"type":"element","tagName":"pre","properties":{"className":["language-text"]},"children":[{"type":"element","tagName":"code","properties":{"className":["language-text"]},"children":[{"type":"text","value":"while(restaurants.hasNext()){\n"}]}]}]},{"type":"text","value":"\n"},{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"Almacenamos el documento en cuestión y las coordenadas de que tiene ese documento:"}]},{"type":"text","value":"\n"},{"type":"element","tagName":"div","properties":{"className":["kg-card","kg-code-card","gatsby-highlight"],"dataLanguage":"text"},"children":[{"type":"element","tagName":"pre","properties":{"className":["language-text"]},"children":[{"type":"element","tagName":"code","properties":{"className":["language-text"]},"children":[{"type":"text","value":"var rest = restaurants.next();\nvar coords = rest.address.coord;\n"}]}]}]},{"type":"text","value":"\n"},{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"Tenemos algunos documentos que tienen la propiedad "},{"type":"element","tagName":"em","properties":{},"children":[{"type":"text","value":"coord"}]},{"type":"text","value":" vacía por lo que lo comprobamos"}]},{"type":"text","value":"\n"},{"type":"element","tagName":"div","properties":{"className":["kg-card","kg-code-card","gatsby-highlight"],"dataLanguage":"text"},"children":[{"type":"element","tagName":"pre","properties":{"className":["language-text"]},"children":[{"type":"element","tagName":"code","properties":{"className":["language-text"]},"children":[{"type":"text","value":"if (coords != \"\"){\n"}]}]}]},{"type":"text","value":"\n"},{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"Lo siguiente será buscar cuál es el restaurante más cercano, sin ser el propio restaurante propietario de esas coordenadas, al buscar por coordenadas nos identifica el primero como el propio restaurante, por eso ignoramos el primer resultado. Y como solo queremos encontrar uno de "},{"type":"element","tagName":"em","properties":{},"children":[{"type":"text","value":"\"los vecinos\""}]},{"type":"text","value":" limitamos la búsqueda a 1"}]},{"type":"text","value":"\n"},{"type":"element","tagName":"div","properties":{"className":["kg-card","kg-code-card","gatsby-highlight"],"dataLanguage":"text"},"children":[{"type":"element","tagName":"pre","properties":{"className":["language-text"]},"children":[{"type":"element","tagName":"code","properties":{"className":["language-text"]},"children":[{"type":"text","value":" var neighbour = db.collectionTest.find({\n \"address.coord\":{\n $near:{\n $geometry:{\n type: \"Point\",\n coordinates: coords}\n ,$maxDistance: 500}}}).skip(1).limit(1);\n"}]}]}]},{"type":"text","value":"\n"},{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"Como es posible que no tengamos nungún documento(restaurante) a menos de 500 metros tenemos que comprobar antes de hacer nada para que el proceso continue"}]},{"type":"text","value":"\n"},{"type":"element","tagName":"div","properties":{"className":["kg-card","kg-code-card","gatsby-highlight"],"dataLanguage":"text"},"children":[{"type":"element","tagName":"pre","properties":{"className":["language-text"]},"children":[{"type":"element","tagName":"code","properties":{"className":["language-text"]},"children":[{"type":"text","value":"if (neighbour[0] != undefined){\n"}]}]}]},{"type":"text","value":"\n"},{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"Y por último actualizamos el restaurante usando el "},{"type":"element","tagName":"em","properties":{},"children":[{"type":"text","value":"\"_id\""}]},{"type":"text","value":" añadiendole la propiedad "},{"type":"element","tagName":"em","properties":{},"children":[{"type":"text","value":"\"address.neighbour\""}]},{"type":"text","value":" con el nombre del restaurante vecino"}]},{"type":"text","value":"\n"},{"type":"element","tagName":"div","properties":{"className":["kg-card","kg-code-card","gatsby-highlight"],"dataLanguage":"text"},"children":[{"type":"element","tagName":"pre","properties":{"className":["language-text"]},"children":[{"type":"element","tagName":"code","properties":{"className":["language-text"]},"children":[{"type":"text","value":"db.collectionTest.update({\"_id\": rest._id},\n {$set: {\n \"address.neighbour\": neigh.name \n }}\n );\n"}]}]}]},{"type":"text","value":"\n"},{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"El proceso tardará un rato, y una vez terminado, si buscamos algún documento"}]},{"type":"text","value":"\n"},{"type":"element","tagName":"div","properties":{"className":["kg-card","kg-code-card","gatsby-highlight"],"dataLanguage":"text"},"children":[{"type":"element","tagName":"pre","properties":{"className":["language-text"]},"children":[{"type":"element","tagName":"code","properties":{"className":["language-text"]},"children":[{"type":"text","value":"db.collectionTest.findOne({},{\"name\":1,\"address\":1,\"_id\":0})\n"}]}]}]},{"type":"text","value":"\n"},{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"Veremos como nos ha añadido una nueva propiedad con el nombre de algún restaurante cercano"}]},{"type":"text","value":"\n"},{"type":"element","tagName":"p","properties":{},"children":[{"type":"element","tagName":"img","properties":{"src":"https://jlgarcia.fulldev.ninja/assets/images/2017/10/Captura-de-pantalla-2017-10-28-a-las-17.49.58.png","alt":"Neighbour restaurant's"},"children":[]}]},{"type":"text","value":"\n"},{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"Esto es solo un pequeño ejemplo de lo que podemos hacer con MongoDB, podemos complicar las búsquedas tanto como queramos (aunque lo suyo es que una parte lo hiciera nuestra app no la base de datos sola ;) )"}]},{"type":"text","value":"\n"},{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"Espero que con este post seais capaces de mejorar vuestros índices y hacer que vuestras búsquedas en vuestras bases de datos MongoDB sean mucho más eficientes. De momento vamos a dejar el tema de los índices, lo próximo que veremos será el "},{"type":"element","tagName":"strong","properties":{},"children":[{"type":"text","value":"Aggregation Framework"}]},{"type":"text","value":", si no sabéis lo que es no os preocupeis lo veremos en detalle. Nos veeemoosssss un abrazooorrrrrr"}]},{"type":"text","value":"\n"},{"type":"comment","value":"kg-card-end: markdown"}],"data":{"quirksMode":false}},"tableOfContents":[{"id":"qusonlosndices","heading":"¿Qué son los índices?"},{"id":"binarytreesort","heading":"Binary Tree Sort"},{"id":"tiposdendices","heading":"Tipos de índices"},{"id":"fulltextindex","heading":"Full text Index","items":[{"id":"importantodatos","heading":"Importanto datos"}]},{"id":"geospatialindex","heading":"Geospatial Index"},{"id":"subiendodenivel","heading":"Subiendo de nivel"}]},"featureImageSharp":{"base":"MongoBanner.png","publicURL":"/static/e2d851a4e8d17762251ac236e48b5140/MongoBanner.png","imageMeta":{"width":510,"height":261},"childImageSharp":{"fluid":{"base64":"data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABQAAAAKCAYAAAC0VX7mAAAACXBIWXMAAAsTAAALEwEAmpwYAAACEElEQVQoz11STW8SURSdn+SiBoRhGOaTYSiCtR98t0hbhaIFagrWSimVFqqpFbdN9C+4Nd2Ybk3/iEk3GONi3vHdV1DSxcl9c+e9c8+590pWNDQyDBmmKTN+ngKzMCfRnoHI2zKbwR+OJ5LJyRIlDc6KwgRxVJ5eFpiS6lYQqh74hztFvUn8KRlc2fKFzZyDIMwIr8QJdTMgyAxOQtD4dyqpYTXvopCNoZhzoRkPCEwz/IzOtqN49EYiq+5Igb7vY83nVZx9OMGrvSZ6vdcYDA7R7bbRO+rg+HAbrRdL+NjfxPuDNWSySTx6HMfCYhyJpM38gXskxJPIZiwdZs5iGNnMAjY2Cyiv51BcXUalWsL5+RDb9WfI5xIoZKLIpR1kV2w8TFm4vPyG8XiMm5sb7LYbLBSe4wqjsmdZ3L8VYhHDL3oS0f3CcjQWFhA5bks3ZW4/CCXi48pcXF19x1ZtHf3jLru+/oF4wvgtWXbIo77ZMYUp6hxa7TpOuNX9zi63P8CbTgv1RkWcSbmq+UQBx42gsVPD5y8XGH06Y08rJd7TwC+JK6EJMd5UUsbWSmkM373FKUe9WeGxj+HpEbq9Pey8rAn1t3dpKAGUN/IsX1yi/GQo/1eDdolXVoXNZMrmUYU7r6G6VRbTduf1mZW6jYp6n1QLQfSPCL9Ods6bkhKmq0MgVXSZSO/sJxGxmXf9v1BbiUoJyKuGAAAAAElFTkSuQmCC","aspectRatio":1.9444444444444444,"src":"/static/e2d851a4e8d17762251ac236e48b5140/8d82d/MongoBanner.png","srcSet":"/static/e2d851a4e8d17762251ac236e48b5140/847ef/MongoBanner.png 175w,\n/static/e2d851a4e8d17762251ac236e48b5140/91cba/MongoBanner.png 350w,\n/static/e2d851a4e8d17762251ac236e48b5140/8d82d/MongoBanner.png 510w","srcWebp":"/static/e2d851a4e8d17762251ac236e48b5140/23d6c/MongoBanner.webp","srcSetWebp":"/static/e2d851a4e8d17762251ac236e48b5140/9fca7/MongoBanner.webp 175w,\n/static/e2d851a4e8d17762251ac236e48b5140/37a4e/MongoBanner.webp 350w,\n/static/e2d851a4e8d17762251ac236e48b5140/23d6c/MongoBanner.webp 510w","sizes":"(max-width: 510px) 100vw, 510px"}}}},"allGhostPost":{"edges":[{"node":{"id":"Ghost__Post__5a8c07c98cda356bbe9bbe44","title":"jQuery Slideshow","slug":"jquery-slideshow","featured":false,"feature_image":"https://jlgarcia.fulldev.ninja/assets/images/2018/02/jquery-logo-1.png","excerpt":"Vamos con un ejemplo de creación de un Slideshow muy simple en jQuery. Lo\nprimero de todo es generarnos la estructura del proyecto, cada uno que la haga\ncomo quiera, yo tengo algo así\n\n\nEn mi caso voy a usar bootstrap, por comodidad, pero no es necesario, lo añado\nal index.html al igual que jQuery. También he creado mi propio fichero de estilo \nstyle.css y lo he añadido, quedando todo de esta manera:\n\n\n\n\n \n\n\n \nVamos con un ejemplo de creación de un Slideshow muy simple en jQuery. Lo primero de todo es generarnos la estructura del proyecto, cada uno que la haga como quiera, yo tengo algo así
\n
En mi caso voy a usar bootstrap, por comodidad, pero no es necesario, lo añado al index.html al igual que jQuery. También he creado mi propio fichero de estilo style.css y lo he añadido, quedando todo de esta manera:
\n<!DOCTYPE html>\n<html lang="en">\n<head>\n <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />\n <title>Ninja_slider</title>\n\n <script src="https://code.jquery.com/jquery-3.3.1.min.js"></script>\n\n <link rel="stylesheet" href="css/bootstrap.min.css">\n <link rel="stylesheet" href="css/style.css">\n \n</head>\n<body>\n \n</body>\n</html>\nLo siguiente es añadir donde estará el slider en el body de la página
\n<body>\n\n <div class="container" align="center">\n <h1>Ninja-Slider</h1>\n <hr>\n\n <div class="ninjaSlider"></div>\n\n </div>\n \n</body>\nNuestro slider como os podéis imaginar estará en el div con la clase ninjaSlider, y esto es todo por el momento en el html, ahora vamos a nuestro css para darle un poco de estilo y que se vea algo en la página. Le daremos un tamaño y un color de fondo para ir viendo algo.
\n.ninjaSlider{\n\tbackground-color: blue;\n\twidth: 600px;\n\theight: 300px;\n\toverflow: hidden;\n\tmargin-bottom: 10px;\n}\nQuedando así
\n
Bien ahora vamos a crear un fichero js donde meteremos toda la lógica de funcionamiento de nuestro slider. Tener en cuenta que la idea es hacerlo estilo plugin, es decir que este encapsulado para poder usarlo en cualquiera de nuestros proyectos.
\nBien lo primero como hemos comentado es crearnos el fichero js y meterlo en la carpeta correspondiente, lo siguiente son las imágenes para que slider tenga algo que mostrar, entonces buscamos unas cuantas imágenes, yo me he descargado 4 y las metemos en la carpeta img.
Una vez que tenemos las imagenes ya podemos empezar, con el js. Creamos una función anónima que se ejecute nada más cargar el js en el HTML:
\n(function(){\n //Aqui dentro meteríamos todo el código.\n})();\nVamos a empezar por algo sencillo, que es recibir las imagenes desde el html que es desde donde nos las mandarían si pensamos que este es un plugin. Estas imágenes las incluiremos en una lista, es decir, dentro de un ul de html.
\nPero antes de hacer esto, pensemos...¿cómo hacemos para pasar los datos que necesitemos a nuestro plugin?, fácil, por parámetros le pasamos un objecto que tenga las modificaciones que queramos hacer.
\nPrimero creemos un método, que será el que realmente configure e inicie nuestro slider
(function(){\n $.ninjaShow = function(config){\n \n }\n})();\nAqui hemos añadido la función ninjaShow a jQuery, por lo que la podemos llamar desde cualquier sitio desde el que podamos llamar a jQuery. A esta función le pasamos por parámetro un objeto config que tendrá todos los cambios sobre la configuración por defecto que establezcamos.
\nContinuemos añadiendo lógica para nuestras imagenes, suponiendo que nos indiquen cuales son las imágenes a través del objeto config, podemos tener nuestras imagenes bajo la propiedad images dentro del objeto config. Hagamos una prueba para que veáis de lo que estoy hablando, nos vamos a nuestro index.html y añadimos lo siguiente al final (pero siempre dentro del body)
<!-- añadimos nuestro js al html -->\n<script src="js/slider.js"></script>\n<script>\n\t//Llamamos a nuestra función pasandole un objeto con la propiedad images\n\t$.ninjaShow({\n\n images:['img/ninja1.jpg','img/ninja2.jpg','img/ninja3.jpg','img/ninja4.jpg'],\n\t});\n\n</script>\n</body>\nY luego en nuestro fichero js, ponemos un log para ver que estamos recibiendo.
\n(function(){\n\n $.ninjaShow = function( config ){\n\n console.log(config);\n }\n\n})();\nSi guardamos y miramos la consola al ejecutar nuestro index.html, veremos algo como lo siguiente
\n
Es decir, un objeto con la propiedad images y dentro de esta un array con la dirección donde estan nuestras imágenes.
\nEntonces ya tenemos nuestras imágenes, ahora creemos la lista con ellas.
(function(){\n\n $.ninjaShow = function( config ){\n //Comprobamos que nos pasan alguna imagen\n if (config.images.length == 0){\n alert("Necesitamos alguna imagen para mostrar");\n return;\n }\n\n //Abrimos la lista\n var imgList = "<ul>";\n\n //Recorremos el array y vamos añadiendo lineas con nuestra imagen como source\n config.images.map((img)=>{\n imgList += '<li><img src="'+ img +'"</li>';\n })\n //Cerramos la lista\n imgList += "</ul>";\n \n //Adjuntamos la lista al contenedor\n $(".ninjaSlider").append(imgList);\n }\n\n})();\nSi ejecutamos nuestro index.html veremos algo similar a esto:
\n
Ahora mismo no vemos casi nada, ¿verdad?, vamos a modificar un poco el estilo para que veamos que realmente las cosas estan donde deben estar. Nos vamos a nuestro style.css y lo dejamos así
\n.ninjaSlider{\n\tbackground-color: blue;\n\twidth: 600px;\n\theight: 300px;\n\t/* overflow: hidden; */\n\tmargin-bottom: 10px;\n}\n\n.ninjaSlider ul{\n\tpadding: 0;\n\tlist-style-type: none;\n\tmargin-left: 0px;\n\tdisplay: flex;\n}\nAhora si veríamos algo aunque solo sean las imágenes
\n
Pero si miramos el código fuente de la página deberíamos ver algo como esto:
\n
Ya tenemos nuestra lista de imágenes, y las vemos porque hemos cambiado la propiedad overflow de css, la configuración correcta sería descomentado la línea y dejandola así
\noverflow: hidden;\nPero la hemos comentado para explicar que es lo que vamos a hacer para ir cambiando de imágenes.
\nSi os fijáis las imágenes estan configuradas en una linea horizontal, una al lado de otra, lo que haremos será ir moviendo el interior del contenedor en esa linea horizontal, modificando el margin-left, es decir, supongamos que nuestro margin-left en nuestra primera imagen es 0 y tenemos imágenes con un ancho de 600, pues lo que haríamos para movernos entre las imágenes sería ir modificando el margin-left en conjuntos de 600, es decir, la siguiente imagen tendria un margen de -600, la siguiente de -1200... y el - es necesario porque nuestro slide se movera de izquierda a derecha y como os podréis imaginar para que funcione en este ejemplo es necesario que el ancho de las imágenes sea el mismo o muy parecido (podríamos manejar el ancho de cada li dentro de la lista pero prefiero dejar el código más claro).
\nCreo que está más o menos explicado el concepto de lo que queremos hacer, veamos como lo hacemos
//Variable de ayuda para gestionar la posicion\n var position = 0;\n //Numero de imagenes para controlar\n var images = config.images.length;\n\n //intervalo en el que se cambia la imagen\n var interval = setInterval(function(){\n move();\n }, 1400);\n\n function move(){\n//Cada vez que pase por aqui aumentamos la posicion \n position++;\n\n//Si la posicion es igual o mayor que la cantidad de imagenes\n//ponemos position a 0\n if (position >= images ){\n position = 0\n }\n\n//Por ultimo movemos el margen según la posición en grupos de 600\n $(".ninjaSlider ul").animate({\n marginLeft: position * -600\n },400);\nPor último descomentamos el overflow:hidden en el fichero css y listo, ya lo tenemos
\n
Ya tenemos nuestro slide funcionando, en este punto podríamos añadir más funcionalidad, que tuviera los puntitos típicos que te indican en que slide te encuentras y que puedes pulsar para moverte de uno a otro, o parar el slide por ejemplo. Eso lo haremos más adelante en algún post posterior ahora quería solo mostrar como podríamos hacer lo más básico de un slide, ahora lo ultimo que haremos será añadir un par de cosas al js para que se vaya pareciendo más a un plugin y podamos personalizarlo un poco más.
\nSi miramos el código detenidamente y pensamos un poco que cosas podrían ser susceptibles de cambiar, podrían ser:
\nEstos son algunos de los cambios que se me han ocurrido con el código que tenemos actualmente podríamos tener más seguramente. Por el momento vamos a preparar esos.
\nPara empezar tenemos que plantearnos cuales son obligatorios y cuales podrían tener una configuración por defecto. Las imágenes deben ser obligatorias, por eso hemos puesto el control antes que nos lanzaría una alerta si no se pasa ninguna imagen, y a lo mejor el nombre del id del slide y el resto podemos tener valores por defecto si no nos lo pasan por parámetro.
\nPara ellos basta con usar el método extend de jQuery sobre el objeto que se pasa por parámetro
$.ninjaShow = function( config ){\n \n config = $.extend({\n slideName: "",\n width: 600,\n timeTransition: 1400,\n images: []\n }, config);\n\nEste método lo que hace es sobreescribir el objeto local, que sería el primero (el que está entre { }) con el que se pasa por parámetro, pero solo las propiedades con el mismo nombre, es decir, no elimina el objeto por otro, es como si cambiaramos las propiedades que coincidan por las nuevas que se pasan por parámetro.
\nY ahora simplemente es cambiar los elementos que tenemos puestos a mano como ".ninjaslider" por la propiedad correspondiente y listo, ya tendríamos preparado el código como si fuera un plugin quedando así (dejo comentado el código)
//Función anonima\n(function(){\n\n $.ninjaShow = function( config ){\n \n config = $.extend({\n slideName: "",\n width: 600,\n timeTransition: 1400,\n images: []\n }, config);\n\n\n //Comprobamos que nos pasan alguna imagen\n if (config.images.length == 0){\n alert("Necesitamos alguna imagen para mostrar");\n return;\n }\n \n //Comprobamos que nos han pasado un nombre para slider\n if (config.slideName == ""){\n alert("Falta el nombre o id donde estará el slider")\n return\n }\n\n //Abrimos la lista\n var imgList = "<ul>";\n\n //Recorremos el array y vamos añadiendo lineas con nuestra imagen como source\n config.images.map((img)=>{\n imgList += '<li><img src="'+ img +'"</li>';\n })\n //Cerramos la lista\n imgList += "</ul>";\n \n //Adjuntamos la lista al contenedor\n $(config.slideName).append(imgList);\n\n //Variable de ayuda para gestionar la posicion\n var position = 0;\n //Numero de imagenes para controlar\n var images = config.images.length;\n\n //intervalo en el que se cambia la imagen\n var interval = setInterval(function(){\n move();\n }, config.timeTransition);\n\n function move(){\n \n position++;\n\n if (position >= images ){\n position = 0\n }\n\n $(config.slideName + " ul").animate({\n marginLeft: position * - config.width\n },400);\n }\n }\n\n})();\nComo véis ahora tenemos config.algo por todas partes. Y para usarlo nos vamos a nuestro index.html y añadimos las propiedades necesarias:
\n<script>\n\t\n\t$.ninjaShow({\n slideName: ".ninjaSlider",\n ancho: 600,\n timeTransition: 1400,\n images:['img/ninja1.jpg','img/ninja3.jpg','img/ninja4.jpg'],\n });\n</script>\nY podríamos como he comentado, crear más sliders simplemente creando el elemento, dandole un nombre y crear un nuevo ninjaShow
\n$.ninjaShow({\n slideName: ".ninjaSlider",\n ancho: 600,\n timeTransition: 1400,\n images:['img/ninja1.jpg','img/ninja3.jpg','img/ninja4.jpg'],\n });\n \n$.ninjaShow({\n slideName: ".ninjaSlider2",\n ancho: 600,\n timeTransition: 1200,\n images:['img/ninja4.jpg','img/ninja1.jpg','img/ninja3.jpg'],\n});\n
Como véis ahora es muy sencillo crear sliders básicos con este código. En algún post posterior mejoraremos este slider para que tenga más funcionalidades, esto es básicamente para que veamos un poco como podemos trabajar con jQuery para hacer todo lo que queramos con el DOM.
\nSin mucho más nos vemos en el siguiente, un abrazooorrrr.
\n","url":"https://jlgarcia.fulldev.ninja/jquery-slideshow/","canonical_url":null,"uuid":"3b1de9f2-e3a4-45a7-a056-dc806e105a19","codeinjection_foot":null,"codeinjection_head":null,"codeinjection_styles":null,"comment_id":"5a8c07c98cda356bbe9bbe44","reading_time":8,"send_email_when_published":false,"email_subject":null,"childHtmlRehype":{"html":"Vamos con un ejemplo de creación de un Slideshow muy simple en jQuery. Lo primero de todo es generarnos la estructura del proyecto, cada uno que la haga como quiera, yo tengo algo así
\n
En mi caso voy a usar bootstrap, por comodidad, pero no es necesario, lo añado al index.html al igual que jQuery. También he creado mi propio fichero de estilo style.css y lo he añadido, quedando todo de esta manera:
\n<!DOCTYPE html>\n<html lang=\"en\">\n<head>\n <meta http-equiv=\"Content-Type\" content=\"text/html; charset=UTF-8\" />\n <title>Ninja_slider</title>\n\n <script src=\"https://code.jquery.com/jquery-3.3.1.min.js\"></script>\n\n <link rel=\"stylesheet\" href=\"css/bootstrap.min.css\">\n <link rel=\"stylesheet\" href=\"css/style.css\">\n \n</head>\n<body>\n \n</body>\n</html>\nLo siguiente es añadir donde estará el slider en el body de la página
\n<body>\n\n <div class=\"container\" align=\"center\">\n <h1>Ninja-Slider</h1>\n <hr>\n\n <div class=\"ninjaSlider\"></div>\n\n </div>\n \n</body>\nNuestro slider como os podéis imaginar estará en el div con la clase ninjaSlider, y esto es todo por el momento en el html, ahora vamos a nuestro css para darle un poco de estilo y que se vea algo en la página. Le daremos un tamaño y un color de fondo para ir viendo algo.
\n.ninjaSlider{\n\tbackground-color: blue;\n\twidth: 600px;\n\theight: 300px;\n\toverflow: hidden;\n\tmargin-bottom: 10px;\n}\nQuedando así
\n
Bien ahora vamos a crear un fichero js donde meteremos toda la lógica de funcionamiento de nuestro slider. Tener en cuenta que la idea es hacerlo estilo plugin, es decir que este encapsulado para poder usarlo en cualquiera de nuestros proyectos.
\nBien lo primero como hemos comentado es crearnos el fichero js y meterlo en la carpeta correspondiente, lo siguiente son las imágenes para que slider tenga algo que mostrar, entonces buscamos unas cuantas imágenes, yo me he descargado 4 y las metemos en la carpeta img.
Una vez que tenemos las imagenes ya podemos empezar, con el js. Creamos una función anónima que se ejecute nada más cargar el js en el HTML:
\n(function(){\n //Aqui dentro meteríamos todo el código.\n})();\nVamos a empezar por algo sencillo, que es recibir las imagenes desde el html que es desde donde nos las mandarían si pensamos que este es un plugin. Estas imágenes las incluiremos en una lista, es decir, dentro de un ul de html.
\nPero antes de hacer esto, pensemos...¿cómo hacemos para pasar los datos que necesitemos a nuestro plugin?, fácil, por parámetros le pasamos un objecto que tenga las modificaciones que queramos hacer.
\nPrimero creemos un método, que será el que realmente configure e inicie nuestro slider
(function(){\n $.ninjaShow = function(config){\n \n }\n})();\nAqui hemos añadido la función ninjaShow a jQuery, por lo que la podemos llamar desde cualquier sitio desde el que podamos llamar a jQuery. A esta función le pasamos por parámetro un objeto config que tendrá todos los cambios sobre la configuración por defecto que establezcamos.
\nContinuemos añadiendo lógica para nuestras imagenes, suponiendo que nos indiquen cuales son las imágenes a través del objeto config, podemos tener nuestras imagenes bajo la propiedad images dentro del objeto config. Hagamos una prueba para que veáis de lo que estoy hablando, nos vamos a nuestro index.html y añadimos lo siguiente al final (pero siempre dentro del body)
<!-- añadimos nuestro js al html -->\n<script src=\"js/slider.js\"></script>\n<script>\n\t//Llamamos a nuestra función pasandole un objeto con la propiedad images\n\t$.ninjaShow({\n\n images:['img/ninja1.jpg','img/ninja2.jpg','img/ninja3.jpg','img/ninja4.jpg'],\n\t});\n\n</script>\n</body>\nY luego en nuestro fichero js, ponemos un log para ver que estamos recibiendo.
\n(function(){\n\n $.ninjaShow = function( config ){\n\n console.log(config);\n }\n\n})();\nSi guardamos y miramos la consola al ejecutar nuestro index.html, veremos algo como lo siguiente
\n
Es decir, un objeto con la propiedad images y dentro de esta un array con la dirección donde estan nuestras imágenes.
\nEntonces ya tenemos nuestras imágenes, ahora creemos la lista con ellas.
(function(){\n\n $.ninjaShow = function( config ){\n //Comprobamos que nos pasan alguna imagen\n if (config.images.length == 0){\n alert(\"Necesitamos alguna imagen para mostrar\");\n return;\n }\n\n //Abrimos la lista\n var imgList = \"<ul>\";\n\n //Recorremos el array y vamos añadiendo lineas con nuestra imagen como source\n config.images.map((img)=>{\n imgList += '<li><img src=\"'+ img +'\"</li>';\n })\n //Cerramos la lista\n imgList += \"</ul>\";\n \n //Adjuntamos la lista al contenedor\n $(\".ninjaSlider\").append(imgList);\n }\n\n})();\nSi ejecutamos nuestro index.html veremos algo similar a esto:
\n
Ahora mismo no vemos casi nada, ¿verdad?, vamos a modificar un poco el estilo para que veamos que realmente las cosas estan donde deben estar. Nos vamos a nuestro style.css y lo dejamos así
\n.ninjaSlider{\n\tbackground-color: blue;\n\twidth: 600px;\n\theight: 300px;\n\t/* overflow: hidden; */\n\tmargin-bottom: 10px;\n}\n\n.ninjaSlider ul{\n\tpadding: 0;\n\tlist-style-type: none;\n\tmargin-left: 0px;\n\tdisplay: flex;\n}\nAhora si veríamos algo aunque solo sean las imágenes
\n
Pero si miramos el código fuente de la página deberíamos ver algo como esto:
\n
Ya tenemos nuestra lista de imágenes, y las vemos porque hemos cambiado la propiedad overflow de css, la configuración correcta sería descomentado la línea y dejandola así
\noverflow: hidden;\nPero la hemos comentado para explicar que es lo que vamos a hacer para ir cambiando de imágenes.
\nSi os fijáis las imágenes estan configuradas en una linea horizontal, una al lado de otra, lo que haremos será ir moviendo el interior del contenedor en esa linea horizontal, modificando el margin-left, es decir, supongamos que nuestro margin-left en nuestra primera imagen es 0 y tenemos imágenes con un ancho de 600, pues lo que haríamos para movernos entre las imágenes sería ir modificando el margin-left en conjuntos de 600, es decir, la siguiente imagen tendria un margen de -600, la siguiente de -1200... y el - es necesario porque nuestro slide se movera de izquierda a derecha y como os podréis imaginar para que funcione en este ejemplo es necesario que el ancho de las imágenes sea el mismo o muy parecido (podríamos manejar el ancho de cada li dentro de la lista pero prefiero dejar el código más claro).
\nCreo que está más o menos explicado el concepto de lo que queremos hacer, veamos como lo hacemos
//Variable de ayuda para gestionar la posicion\n var position = 0;\n //Numero de imagenes para controlar\n var images = config.images.length;\n\n //intervalo en el que se cambia la imagen\n var interval = setInterval(function(){\n move();\n }, 1400);\n\n function move(){\n//Cada vez que pase por aqui aumentamos la posicion \n position++;\n\n//Si la posicion es igual o mayor que la cantidad de imagenes\n//ponemos position a 0\n if (position >= images ){\n position = 0\n }\n\n//Por ultimo movemos el margen según la posición en grupos de 600\n $(\".ninjaSlider ul\").animate({\n marginLeft: position * -600\n },400);\nPor último descomentamos el overflow:hidden en el fichero css y listo, ya lo tenemos
\n
Ya tenemos nuestro slide funcionando, en este punto podríamos añadir más funcionalidad, que tuviera los puntitos típicos que te indican en que slide te encuentras y que puedes pulsar para moverte de uno a otro, o parar el slide por ejemplo. Eso lo haremos más adelante en algún post posterior ahora quería solo mostrar como podríamos hacer lo más básico de un slide, ahora lo ultimo que haremos será añadir un par de cosas al js para que se vaya pareciendo más a un plugin y podamos personalizarlo un poco más.
\nSi miramos el código detenidamente y pensamos un poco que cosas podrían ser susceptibles de cambiar, podrían ser:
\nEstos son algunos de los cambios que se me han ocurrido con el código que tenemos actualmente podríamos tener más seguramente. Por el momento vamos a preparar esos.
\nPara empezar tenemos que plantearnos cuales son obligatorios y cuales podrían tener una configuración por defecto. Las imágenes deben ser obligatorias, por eso hemos puesto el control antes que nos lanzaría una alerta si no se pasa ninguna imagen, y a lo mejor el nombre del id del slide y el resto podemos tener valores por defecto si no nos lo pasan por parámetro.
\nPara ellos basta con usar el método extend de jQuery sobre el objeto que se pasa por parámetro
$.ninjaShow = function( config ){\n \n config = $.extend({\n slideName: \"\",\n width: 600,\n timeTransition: 1400,\n images: []\n }, config);\n\nEste método lo que hace es sobreescribir el objeto local, que sería el primero (el que está entre { }) con el que se pasa por parámetro, pero solo las propiedades con el mismo nombre, es decir, no elimina el objeto por otro, es como si cambiaramos las propiedades que coincidan por las nuevas que se pasan por parámetro.
\nY ahora simplemente es cambiar los elementos que tenemos puestos a mano como \".ninjaslider\" por la propiedad correspondiente y listo, ya tendríamos preparado el código como si fuera un plugin quedando así (dejo comentado el código)
//Función anonima\n(function(){\n\n $.ninjaShow = function( config ){\n \n config = $.extend({\n slideName: \"\",\n width: 600,\n timeTransition: 1400,\n images: []\n }, config);\n\n\n //Comprobamos que nos pasan alguna imagen\n if (config.images.length == 0){\n alert(\"Necesitamos alguna imagen para mostrar\");\n return;\n }\n \n //Comprobamos que nos han pasado un nombre para slider\n if (config.slideName == \"\"){\n alert(\"Falta el nombre o id donde estará el slider\")\n return\n }\n\n //Abrimos la lista\n var imgList = \"<ul>\";\n\n //Recorremos el array y vamos añadiendo lineas con nuestra imagen como source\n config.images.map((img)=>{\n imgList += '<li><img src=\"'+ img +'\"</li>';\n })\n //Cerramos la lista\n imgList += \"</ul>\";\n \n //Adjuntamos la lista al contenedor\n $(config.slideName).append(imgList);\n\n //Variable de ayuda para gestionar la posicion\n var position = 0;\n //Numero de imagenes para controlar\n var images = config.images.length;\n\n //intervalo en el que se cambia la imagen\n var interval = setInterval(function(){\n move();\n }, config.timeTransition);\n\n function move(){\n \n position++;\n\n if (position >= images ){\n position = 0\n }\n\n $(config.slideName + \" ul\").animate({\n marginLeft: position * - config.width\n },400);\n }\n }\n\n})();\nComo véis ahora tenemos config.algo por todas partes. Y para usarlo nos vamos a nuestro index.html y añadimos las propiedades necesarias:
\n<script>\n\t\n\t$.ninjaShow({\n slideName: \".ninjaSlider\",\n ancho: 600,\n timeTransition: 1400,\n images:['img/ninja1.jpg','img/ninja3.jpg','img/ninja4.jpg'],\n });\n</script>\nY podríamos como he comentado, crear más sliders simplemente creando el elemento, dandole un nombre y crear un nuevo ninjaShow
\n$.ninjaShow({\n slideName: \".ninjaSlider\",\n ancho: 600,\n timeTransition: 1400,\n images:['img/ninja1.jpg','img/ninja3.jpg','img/ninja4.jpg'],\n });\n \n$.ninjaShow({\n slideName: \".ninjaSlider2\",\n ancho: 600,\n timeTransition: 1200,\n images:['img/ninja4.jpg','img/ninja1.jpg','img/ninja3.jpg'],\n});\n
Como véis ahora es muy sencillo crear sliders básicos con este código. En algún post posterior mejoraremos este slider para que tenga más funcionalidades, esto es básicamente para que veamos un poco como podemos trabajar con jQuery para hacer todo lo que queramos con el DOM.
\nSin mucho más nos vemos en el siguiente, un abrazooorrrr.
\n","htmlAst":{"type":"root","children":[{"type":"comment","value":"kg-card-begin: markdown"},{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"Vamos con un ejemplo de creación de un "},{"type":"element","tagName":"strong","properties":{},"children":[{"type":"text","value":"Slideshow"}]},{"type":"text","value":" muy simple en jQuery. Lo primero de todo es generarnos la estructura del proyecto, cada uno que la haga como quiera, yo tengo algo así"},{"type":"element","tagName":"br","properties":{},"children":[]},{"type":"text","value":"\n"},{"type":"element","tagName":"img","properties":{"src":"https://jlgarcia.fulldev.ninja/assets/images/2018/02/folders.JPG","alt":"folders"},"children":[]}]},{"type":"text","value":"\n"},{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"En mi caso voy a usar bootstrap, por comodidad, pero no es necesario, lo añado al index.html al igual que "},{"type":"element","tagName":"strong","properties":{},"children":[{"type":"text","value":"jQuery"}]},{"type":"text","value":". También he creado mi propio fichero de estilo "},{"type":"element","tagName":"strong","properties":{},"children":[{"type":"text","value":"style.css"}]},{"type":"text","value":" y lo he añadido, quedando todo de esta manera:"}]},{"type":"text","value":"\n"},{"type":"element","tagName":"div","properties":{"className":["kg-card","kg-code-card","gatsby-highlight"],"dataLanguage":"text"},"children":[{"type":"element","tagName":"pre","properties":{"className":["language-text"]},"children":[{"type":"element","tagName":"code","properties":{"className":["language-text"]},"children":[{"type":"text","value":"\n\n\n \n