Hace una semana escribí un tutorial para implementación de una búsqueda typeahead con Node.js y jQuery. Un typeahead es uno de los muchos grandes casos de uso cuando se utiliza la búsqueda de texto completo (FTS), pero ciertamente no es el único caso de uso. Como muchos de vosotros sabéis, soy tan fan de Golang como de Node.js, así que pensé que sería una buena idea ver el mismo ejemplo, pero esta vez utilizando una tecnología de programación diferente.
Vamos a ver cómo utilizar typeahead.jsuna extensión de jQuery, así como Couchbase y el lenguaje de programación Go para implementar un tipo de autocompletado en nuestra aplicación.
Si no has visto mi artículo anteriorNo te preocupes porque es un lenguaje diferente y por lo tanto un problema diferente. Vamos a empezar desde cero y ver cómo se hacen las cosas con Go. La suposición es que tienes Go instalado y configurado así como Couchbase instalado y configurado.
Preparar un conjunto de datos y un índice de búsqueda de texto completo
Para este ejemplo vamos a trabajar con un conjunto de datos muy sencillo, pero podría ser bastante más complejo con un mínimo esfuerzo adicional. Nuestro conjunto de datos será algo parecido a lo siguiente:
|
1 2 3 4 5 |
{ "título: "Por siempre y para siempre", "artista": "Taylor Swift", "tipo": "canción" } |
Cada documento de nuestra base de datos representará una canción. Para simplificar, sólo nos centraremos en el documento título y artista información, pero los documentos pueden contener información muy variada.
El siguiente paso es crear un índice FTS para nuestros documentos.
La imagen anterior muestra el aspecto que debería tener un índice. En lo que respecta a la asignación de tipos, sólo vamos a asignar el tipo canción documentos. También estamos especificando que sólo queremos que el artista y título información en nuestro índice. La parte importante aquí es que estamos almacenando los campos en el índice. Si no elegimos específicamente almacenar el campo en el índice, entonces no tendremos información para rellenar en los resultados de nuestra búsqueda.
Creación del backend de búsqueda de texto completo Go Powered (FTS)
Con algunos datos y nuestro índice FTS en su lugar, podemos empezar a desarrollar el backend que ejecutará las consultas. Nuestro backend será una API RESTful con un único punto final para la búsqueda. La plantilla para esta aplicación se puede ver a continuación:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 |
paquete principal importar ( "encoding/json" "net/http" "github.com/gorilla/handlers" "github.com/gorilla/mux" gocb "gopkg.in/couchbase/gocb.v1" "gopkg.in/couchbase/gocb.v1/cbft" ) tipo Canción struct { Id cadena `json:"id"` Puntuación float64 `json:"puntuación"` Artista cadena `json:"artista"` Título cadena `json:"título` } var cubo *gocb.Cubo func SearchEndpoint(respuesta http.EscritorRespuesta, solicitar *http.Solicitar) { } func principal() { grupo, _ := gocb.Conectar("couchbase://localhost") grupo.Autentificar(gocb.PasswordAuthenticator{Nombre de usuario: "ejemplo", Contraseña: "123456"}) cubo, _ = grupo.OpenBucket("ejemplo", "") enrutador := mux.NuevoRouter() enrutador.HandleFunc("/buscar", SearchEndpoint).Métodos("GET") http.ListenAndServe(":12345", manipuladores.CORS(manipuladores.Cabeceras permitidas([]cadena{"X-Requested-With", "Tipo de contenido", "Autorización"}), manipuladores.Métodos permitidos([]cadena{"GET", "POST", "PUT", "CABEZA", "OPCIONES"}), manipuladores.Orígenes permitidos([]cadena{"*"}))(enrutador)) } |
Primero vamos a crear una estructura de datos nativa de Go que contendrá los resultados de nuestra búsqueda. Pasando por alto la lógica de punto final por ahora, tenemos nuestro principal donde nos conectamos a nuestra base de datos y definimos nuestro único endpoint. Debido a que la búsqueda se realizará a través de JavaScript, tenemos que configurar la compartición de recursos entre orígenes (CORS) para permitir las solicitudes.
Si desea obtener más información sobre la compartición de recursos entre orígenes con Go, escribí un artículo sobre artículo anterior sobre el tema. Sin embargo, conocer los entresijos no es demasiado importante para este ejemplo.
Echemos un vistazo a la función que importa:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 |
func SearchEndpoint(respuesta http.EscritorRespuesta, solicitar *http.Solicitar) { respuesta.Cabecera().Establecer("tipo de contenido", "application/json") parámetros := solicitar.URL.Consulta() consulta := gocb.Nueva búsqueda("idx-music", cbft.NewMatchQuery(parámetros.Visite("consulta"))) consulta.Campos("artista", "título) resultado, _ := cubo.EjecutarBúsquedaConsulta(consulta) var hits []Canción para _, hit := gama resultado.Hits() { hits = añadir(hits, Canción{ Id: hit.Id, Puntuación: hit.Puntuación, Artista: hit.Campos["artista"], Título: hit.Campos["título], }) } json.Nuevo codificador(respuesta).Codificar(hits) } |
Cuando se llama a esta función, extraemos cualquier parámetro de los parámetros de consulta de la solicitud. Estos parámetros se utilizan para crear una nueva consulta en nuestro índice de búsqueda de texto completo. En la respuesta queremos tanto el artista y título por lo que debemos definirlos en nuestra consulta. Tras una ejecución correcta, recorremos los resultados de la búsqueda y construimos un objeto que puede ser útil para nuestro frontend.
Si quisieras ejecutar la aplicación Go, http://localhost:12345/search?query=swift podría devolver resultados.
Diseño de la interfaz jQuery para búsquedas anticipadas en la base de datos
Con el backend en su sitio, ahora podemos centrarnos en el frontend. El frontend será universal independientemente de qué lenguaje backend que vas a utilizar.
Nuestro objetivo es crear algo así:
Vamos a utilizar typeahead.js, jQueryy Manillares.js para que esta parte sea un éxito. Sin embargo, es muy importante que utilicemos la versión 0.10.5 de typeahead.js debido a un error en versiones posteriores.
Con las librerías descargadas, crea una estructura de proyecto parecida a la siguiente:
|
1 2 3 4 5 |
js manillar-v4.0.11.js jquery-3.3.1.min.js typeahead.paquete.min.js índice.html |
Asegúrate de que tus versiones coinciden con las de tus archivos y no con las mías.
En el index.html podemos arrancar nuestro código con lo siguiente:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 |
<html> <cabeza> <style> cuerpo { color de fondo: #F0F0F0; } .tt-input, .tt-hint, .twitter-typeahead { anchura: 100%; } </style> </cabeza> <cuerpo> <div id="remoto"> <entrada clase="typeahead" tipo="texto" marcador de posición="Canciones..."> </div> <script src="js/jquery-3.3.1.min.js"></script> <script src="js/handlebars-v4.0.11.js"></script> <script src="js/typeahead.0.10.5.bundle.min.js"></script> <script> // Lógica aquí </script> </cuerpo> </html> |
Observe que el código anterior esencialmente sólo contiene una entrada de formulario y la importación de todas nuestras bibliotecas. He ordenado a cabo donde nuestra lógica para el typeahead va a terminar.
Terminemos con nuestra lógica:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 |
$(#remote .typeahead).typeahead( { pista: verdadero, minLength: 3, destacar: falso, límite: 5 }, { nombre: "canción", displayKey: "id", fuente: función (consulta, devolución de llamada) { $.getJSON("http://localhost:12345/search?query=" + consulta, función (datos) { devolver devolución de llamada(datos); }); }, plantillas: { sugerencia: Manillar.compilar('<div>{{título}} - {{artist}}</div>') } } ); |
La primera parte de nuestro typeahead es la configuración. Estamos diciendo que queremos que se muestren las sugerencias y que nuestra lógica no ocurrirá a menos que haya al menos tres caracteres en la búsqueda para ahorrar en llamadas remotas. No resaltaremos los resultados, pero los limitaremos a cinco. Para dirigir la lógica de nuestro typeahead, emitiremos una petición a nuestro backend y procesaremos la respuesta. Se renderizará basándose en nuestra plantilla Handlebars personalizada.
En displayKey es lo que queremos mostrar después de hacer clic en un resultado. En nuestro caso, queremos mostrar los artistas y los títulos de las canciones, pero rellenar el id cuando se haga clic. De esta manera el id puede ser enviado en una futura solicitud si quisiéramos.
Conclusión
Acabas de ver cómo crear una búsqueda typeahead en jQuery con Go como backend y Couchbase como base de datos NoSQL. Este tutorial es la continuación de un tutorial anterior donde había escrito el backend FTS con Node.js y JavaScript.
Para obtener más información sobre el uso del SDK Go con Couchbase, consulte la página Portal para desarrolladores de Couchbase.
