spanner fts demo

Demostración de búsqueda de texto completo de llave

Descripción general

spanner-search-demo es una aplicación web que permite a los usuarios realizar búsquedas de texto y ver los resultados. La aplicación se construye usando Vue.js para el frontend y el backend. Esta aplicación está diseñada para mostrar las capacidades de búsqueda de texto completo de Cloud Spanner.

Requisitos previos

• Node.js (versión 20 o posterior)
• Golang (versión 1.23.0)
• Proyecto de Google Cloud con Cloud Spanner habilitado
• Cuenta de servicio con permisos para acceder a Spanner (ver https://cloud.google.com/iam/docs/creating-managing-service-counts)

Configuración del proyecto

Instalar dependencias

Para instalar las dependencias necesarias, ejecute:

npm install

Compila y recargadores de calor para el desarrollo

Para iniciar el servidor de desarrollo con la recuperación de calor, ejecute:

npm run serve

Luego se puede acceder a la aplicación web de las siguientes maneras:

  App running at:
  - Local:   http://localhost:3000/
  - Network: http://192.168.0.192:3000/

Compila y minifica para la producción

Para construir el proyecto para la producción, ejecute:

npm run build

Configuración de backend

Instalar dependencias de Go

Asegúrese de haberlo instalado. Luego, instale las dependencias de GO necesarias ejecutando:

go mod tidy

Importar datos de muestra a la llave de nubes

Cree una instancia de llave, base de datos y tabla.

 CREATE TABLE Restaurants (
  id STRING(MAX) NOT NULL ,
  dateAdded TIMESTAMP OPTIONS (
    allow_commit_timestamp = true
  ),
  dateUpdated TIMESTAMP OPTIONS (
    allow_commit_timestamp = true
  ),
  address STRING(MAX),
  categories STRING(MAX),
  primaryCategories STRING(MAX),
  city STRING(MAX),
  country STRING(MAX),
  keys STRING(MAX),
  latitude FLOAT64,
  longitude FLOAT64,
  name STRING(MAX),
  postalCode STRING(MAX),
  province STRING(MAX),
  sourceURLs STRING(MAX),
  websites STRING(MAX),
  name_token TOKENLIST AS (tokenize_fulltext(name)) HIDDEN,
  categories_token TOKENLIST AS (tokenize_substring(categories)) HIDDEN,
  city_Tokens TOKENLIST AS (TOKENIZE_FULLTEXT(city)) HIDDEN,
) PRIMARY KEY (id);;

Crea el índice para la búsqueda de texto completo

CREATE SEARCH INDEX RestaurantsIndex ON Restaurants(name_token, categories_token);

Use los restaurantes de comida rápida de datos de muestra en todo Estados Unidos e importe a la llave de nubes para demostrar sus capacidades de búsqueda de texto completo. Editar import.go para configurar la configuración de su llave.

go run main.go -import -file=Datafiniti_Fast_Food_Restaurants_Jun19.csv

Ejecutar el servidor de backend

Para iniciar el servidor de backend, edite main.go para configurar la configuración de su llave y luego ejecute el siguiente comando:

go run main.go

Configuración de frontend

Usando la aplicación

Realizando una búsqueda

1. Abra la aplicación en su navegador web.
2. Ingrese su consulta de búsqueda en la barra de búsqueda.
3. Haga clic en el botón "Buscar" para realizar la búsqueda.

Ver los resultados de la búsqueda

Los resultados de búsqueda se mostrarán debajo de la barra de búsqueda. Cada resultado incluye detalles como país, ciudad, nombre, dirección, sitios web y categorías.

Depuración

Imprimir consulta ejecutada

La aplicación imprime la consulta SQL ejecutada en la consola para fines de depuración. Esto ayuda a verificar la corrección de la consulta.

Imprimir resultados de búsqueda

La aplicación también imprime cada resultado de búsqueda en la consola. Esto ayuda a verificar la exactitud de los resultados de búsqueda.

Estructura de directorio

 project-root/
├── main.go
├── importer/
│   ├── import.go
├── search/
│   ├── search.go
│   └── results.go
├── public/
│   ├── index.html
├── src/
│   ├── assets/
│   │   └── tailwind.css
│   ├── App.vue
│   └── main.js
├── babel.config.js
├── postcss.config.js
├── tailwind.config.js
├── package.json
├── README.md
└── vue.config.js

información adicional

CSS de viento de cola

El proyecto utiliza CSS Tailwind para el estilo. Asegúrese de que la configuración CSS de Vailín de cola esté configurada correctamente en Tailwind.Config.JS y Postcss.config.js.

Configuración de Vue

La configuración VUE se define en Vue.config.js, que establece el puerto del servidor de desarrollo y otras configuraciones.